@font-face{font-family:Inter;src:url('assets/InterVariable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#18191b;--text:#eeeae2;--muted:#a3a7af;--accent:#c3aadf;--surface:#25272b;--selected:#383b40;--radius:10px;--ease:cubic-bezier(.2,.8,.2,1);--feedback:180ms}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:Inter,'PingFang SC','Microsoft YaHei',sans-serif;font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none;touch-action:none;transition:background-color var(--feedback),color var(--feedback),transform var(--feedback) var(--ease)}
button:focus-visible{outline:2px solid #c2c7ce;outline-offset:4px}
button:disabled{cursor:default;opacity:.23}
button:not(:disabled):active{transform:scale(.97);transition-duration:80ms}
[hidden]{display:none!important}
.defs{position:absolute;width:0;height:0}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#canvas-wrap{position:absolute;inset:0;z-index:0}
canvas{display:block;width:100%;height:100%}
header{position:absolute;inset:0 0 auto;height:96px;display:flex;align-items:center;padding:0 44px;z-index:5;gap:28px}
h1{font-size:24px;font-weight:500;margin:0;letter-spacing:0}
.course-tabs{margin-left:auto;display:flex;position:relative;background:#232528;border-radius:14px;padding:4px;height:48px}
.course-tabs button{width:80px;position:relative;z-index:1;font-size:16px;color:var(--muted)}
.course-tabs button.active{color:var(--text)}
.course-tabs i{position:absolute;width:80px;height:40px;left:4px;top:4px;background:var(--selected);border-radius:10px;box-shadow:0 1px 2px #0e101330,inset 0 .5px 0 #ffffff0a;transition:transform 240ms var(--ease)}
.icon-button{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius);color:var(--muted);background:var(--surface)}
.icon-button:hover:not(:disabled){background:var(--selected);color:var(--text)}
#help-btn{background:none;font-size:21px;border:1px solid #555a62;border-radius:50%;width:36px;height:36px;color:var(--muted)}
#help-btn:hover{border-color:#a3a7af;color:var(--text)}
#view{position:absolute;inset:96px 0 168px;z-index:1;touch-action:none;outline:none;cursor:grab}
#view:active{cursor:grabbing}
.readout{position:absolute;right:44px;top:43%;width:254px;z-index:3;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.observing .readout{opacity:1;transform:none}
#angle-stat{font-size:66px;font-weight:400;letter-spacing:-.055em;line-height:1.1;min-height:73px}
#angle-stat small{font-size:.6em;vertical-align:.2em;margin-left:3px}
#molecule-identity{margin-top:14px;font-size:18px;line-height:1.5;color:#bac0c8;white-space:nowrap}
#formula,#geometry-name{font:inherit;letter-spacing:0}
sub{font-size:.52em;vertical-align:-.18em}
.model-controls{position:absolute;top:128px;right:44px;display:flex;align-items:center;gap:12px;z-index:4}
.model-switch{position:relative;display:flex;gap:4px;padding:4px;background:#232528;border-radius:14px;height:56px}
.model-switch button{width:48px;height:48px;position:relative;z-index:1;display:grid;place-items:center;border-radius:var(--radius);color:var(--muted)}
.model-switch button[aria-pressed=true]{color:var(--text)}
.model-switch button:hover:not(:disabled){color:var(--text)}
.model-switch i{position:absolute;top:4px;left:4px;width:48px;height:48px;border-radius:var(--radius);background:var(--selected);box-shadow:0 1px 2px #0e101330,inset 0 .5px 0 #ffffff0a;transition:transform 250ms var(--ease)}
.model-switch.space i{transform:translateX(52px)}
#angle-btn{font-size:24px}
#angle-btn[aria-pressed=true],#cloud-btn[aria-pressed=true]{color:var(--text);background:var(--selected)}
#cloud-btn{padding:0}
.space-state #angle-btn{visibility:hidden}
.view-tools{position:absolute;bottom:192px;right:44px;display:flex;gap:12px;z-index:3}
.view-tools .icon-button{background:none}
#empty-target{position:absolute;left:42.4%;top:60%;transform:translateX(-50%);z-index:2;pointer-events:none;color:#c1bcc9;font-size:17px}
#view-caption,#angle-label{display:none!important}
#atom-labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.atom-label{position:absolute;transform:translate(-50%,-50%);font-size:26px;line-height:1;font-weight:500;color:#f4efe8;text-shadow:0 1px 3px #0003}
.atom-label.dark{color:#42414a;text-shadow:none}
#angle-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;stroke-linecap:round}
.outline{stroke:#242129;stroke-width:3.6px;opacity:.6}
.stroke{stroke:var(--accent);stroke-width:1.3px}
footer{position:absolute;height:168px;bottom:0;left:0;right:0;z-index:4;pointer-events:none;display:flex;align-items:center;padding:0 44px}
.tray{display:flex;gap:10px;height:168px;position:relative;pointer-events:auto}
.element{width:150px;height:168px;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0 0 14px;gap:8px;isolation:isolate}
.element b{font-weight:500;font-size:16px}
.element .remaining{font-size:14px;color:#b6b2be}
.element.unused{color:#a09caa}
.element:not(.unused){color:var(--text)}
.element.exhausted{opacity:.65}
.element:focus-visible{outline-offset:-8px;border-radius:22px}
.element:hover:not(:disabled){filter:brightness(1.08)}
.actions{display:flex;align-items:center;margin-left:auto;gap:14px;pointer-events:auto}
#restart-btn,#next-btn{background:none;color:#bac0c8}
#next-btn:disabled{visibility:hidden}
#next-btn:hover:not(:disabled),#restart-btn:hover:not(:disabled){background:var(--surface);color:var(--text)}
#toast{position:absolute;left:42%;bottom:230px;transform:translate(-50%,10px);background:#36323c;color:var(--text);padding:12px 20px;border-radius:var(--radius);font-size:15px;opacity:0;z-index:10;pointer-events:none;transition:opacity var(--feedback),transform var(--feedback) var(--ease)}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.comparison-readouts{display:none}
.compare-state .comparison-readouts{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.comparison-readouts>div{position:absolute;transform:translateX(-50%);text-align:center;width:310px}
.comparison-readouts strong{display:block;font-size:32px;font-weight:400;letter-spacing:-.04em}
.comparison-readouts b{display:block;font-size:44px;font-weight:400;margin:13px 0 12px;letter-spacing:-.04em}
.compare-state .readout,.compare-state .tray,.compare-state #angle-btn,.compare-state #undo-btn,.compare-state #restart-btn,.compare-state #empty-target{display:none!important}
.compare-state .view-tools{bottom:35px;right:auto;left:44px}
dialog{border:1px solid #50535a;background:#26272b;color:var(--text);border-radius:20px;width:480px;padding:42px;box-shadow:0 25px 100px #0008}
dialog::backdrop{background:#111013a8;backdrop-filter:blur(5px)}
dialog h2{font-weight:500;font-size:24px;margin:0 0 26px}
dialog p{font-size:16px;line-height:1.9;color:#bbc0c9;margin:0 0 23px}
.close{position:absolute;right:16px;top:14px;width:40px;height:40px;font-size:26px}
.close.start{position:static;width:100%;height:48px;font-size:16px;background:#dedfe3;color:#202124;border-radius:var(--radius)}
#fallback{position:absolute;inset:96px 260px 180px 20px;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
#fallback img{width:75%;max-height:65%;object-fit:contain}
#fallback p{font-size:16px;line-height:1.8;color:#bbc0c9}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation:none!important}}
@media(max-width:1050px){header{padding:0 28px}.readout{right:24px;width:190px}#angle-stat{font-size:50px}.model-controls,.view-tools{right:24px}.element{width:120px}.tray{gap:0}footer{padding:0 24px}.actions{gap:4px}}