:root{color-scheme:light;--bg:#edf2f5;--panel:#fff;--line:#d2dce3;--text:#203343;--muted:#526b7d;--accent:#087966}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px system-ui,sans-serif}main{width:100%;padding:12px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) 210px 60px;gap:10px;height:calc(100dvh - 28px);min-height:650px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px;min-width:0;min-height:0}.atom-panel,.energy-panel{display:flex;flex-direction:column}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.head-actions{display:flex;align-items:center;gap:8px}.eyebrow{font-size:10px;letter-spacing:1.2px;color:var(--accent);margin:0 0 4px;font-weight:700}h1,h2{font-size:19px;font-weight:650;letter-spacing:-.4px;margin:0}h1{font-size:18px}.badge{font-size:11px;padding:5px 8px;border-radius:20px;background:#e2f3ed;color:var(--accent);white-space:nowrap}svg{width:100%;display:block}#atom,#diagram{flex:1;min-height:100px;height:0;touch-action:none;user-select:none}#atom{margin:5px 0 10px;background:#f6fafc;border-radius:7px}.hint,.small{color:var(--muted);font-size:11px;line-height:1.4}.hint{margin:7px 0}.slider-head{display:flex;justify-content:space-between;font-size:12px}strong{font-weight:650;color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);margin:7px 0 3px;height:16px;cursor:pointer}.ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}button,select{font:inherit;font-size:12px;color:var(--text);background:#f0f5f8;border:1px solid #b9cbd6;border-radius:6px;padding:7px 10px;cursor:pointer}button:hover{background:#dce9f0}button:focus-visible,select:focus-visible,input:focus-visible,svg [tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.primary{background:var(--accent);color:#fff;font-weight:650;border-color:var(--accent)}.primary:hover{background:#056350}.quiet{background:transparent;color:var(--muted)}.controls{display:flex;gap:7px;flex-wrap:wrap}.options{display:flex;gap:14px;margin-top:7px;font-size:11px;color:var(--muted);flex-wrap:wrap}input[type=checkbox]{accent-color:var(--accent)}.photon-slider{margin-top:8px;padding-top:7px;border-top:1px solid var(--line)}.photon-values{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.photon-values>div{display:flex;align-items:baseline;justify-content:space-between;gap:5px;background:#f0f7f5;padding:7px 9px;border-radius:5px}.photon-values span{font-size:10px;color:var(--muted)}.photon-values strong{font-size:13px;white-space:nowrap}.equation{text-align:center;color:var(--muted);padding:6px;border-top:1px solid var(--line);font-size:12px}.message{padding:9px 12px;background:#eaf4f2;border-radius:6px;font-size:12px;min-height:44px;line-height:1.5}.photon-controls{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}.photon-controls label{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:10px}select{min-width:100px}#photonInfo{flex:1;color:var(--accent);font-size:13px}#photonInfo small{color:var(--muted);display:block;margin-top:4px;font-size:11px}.spectrum{position:relative;background:#111925;height:48px;border-radius:5px;margin-top:9px;overflow:hidden}.rainbow{position:absolute;inset:0;background:linear-gradient(90deg,#833cff,#315bff,#00bbdf,#25d15d,#e9e631,#ff982a,#ed302c,#8e1625);opacity:.15}#lines{position:absolute;inset:0}.spectral-line{position:absolute;top:5px;bottom:5px;width:3px;box-shadow:0 0 10px currentColor}.spectrum-axis,.outside{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:5px}.outside{margin-top:7px}.line-list{display:flex;gap:5px;flex-wrap:wrap;font-size:10px;color:var(--muted);max-height:38px;overflow:auto}.line-chip{padding:3px 5px;border:1px solid var(--line);border-radius:4px;background:#152232}.log-panel{grid-column:1/-1;padding:8px 14px;display:grid;grid-template-columns:100px 1fr;gap:12px}.log-title{font-size:12px;color:var(--muted);padding-top:4px}.log-title span{margin-left:8px}#log{font-size:11px;color:var(--muted);line-height:1.7;margin:0;padding-left:20px;overflow:auto}footer{height:28px;padding:5px 14px;font-size:10px;color:var(--muted)}dialog{max-width:620px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:25px;line-height:1.6}dialog::backdrop{background:#20334370}a{color:var(--accent)}svg text{font-family:system-ui,sans-serif}.orbit{fill:none;stroke:#b6c7d3;stroke-width:1.3;vector-effect:non-scaling-stroke}.orbit.active{stroke:var(--accent);stroke-width:2}#electron,#diagramElectron{cursor:grab;filter:drop-shadow(0 0 3px #08796650)}#electron:active,#diagramElectron:active{cursor:grabbing}@media(min-width:1600px){main{grid-template-rows:minmax(0,1fr) 235px 85px}.panel{padding:18px}h1,h2{font-size:22px}.hint,.small,.options{font-size:12px}.photon-values strong{font-size:16px}.spectrum{height:65px}.line-list{max-height:48px}.photon-controls{margin-top:25px}}@media(max-width:1100px){.head-actions{flex-wrap:wrap;justify-content:flex-end}h1{max-width:245px}.photon-values>div{flex-direction:column;gap:2px}.photon-controls{gap:8px}.photons .section-head .small{display:none}}@media(max-width:750px){main{height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto;gap:10px;padding:10px}.panel{padding:12px}#atom{height:230px;flex:auto}#diagram{height:310px;flex:auto}.log-panel{grid-column:auto;min-height:90px}.section-head{flex-wrap:wrap}.head-actions{justify-content:flex-start}.photon-controls{margin-top:12px}.photons,.spectrum-panel{min-height:200px}.photon-values strong{font-size:12px}footer{height:auto}h1{max-width:none}.line-list{max-height:75px}}

.atom-panel> :not(svg),.energy-panel> :not(svg){flex-shrink:0}

h1{display:flex;align-items:center;gap:8px;white-space:nowrap}h1 select{font-size:inherit;font-weight:650;padding:4px 8px;min-width:0}.inspiration{font-size:10px;color:var(--muted);margin:1px 0 4px}.reference-line{opacity:.28;width:1px;box-shadow:none}button:disabled{opacity:.45;cursor:default}@media(max-width:1100px){h1{max-width:none;font-size:15px}.atom-panel .section-head{flex-wrap:wrap}}@media(max-width:750px){h1{font-size:16px}.inspiration{max-width:280px}}
@media(min-width:751px) and (max-height:780px){#atom{min-height:60px}}
