:root{color-scheme:dark;--bg: #080b0f;--bg-2: #10161d;--panel: #141b24;--panel-2: #1b2430;--stroke: #2a3646;--stroke-2: #3d4d62;--text: #e8eef6;--muted: #8b9aab;--a: #3ec4ff;--b: #ffb020;--c: #d060ff;--accent: #5ee0c0;--on-accent: #08201a;--danger: #ff6b7a;--shadow: 0 18px 50px rgba(0, 0, 0, .35);--radius: 16px;--font: "Instrument Sans", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace;--topbar: linear-gradient(180deg, #121922 0%, #0c1117 100%);--viewport-glow: #152033;--overlay: rgba(20, 27, 36, .82);--plot: #1b2430;--slider: #2a3544;--thumb-border: #0c1117;--switch: #2c3848;--switch-knob: #d7e2ee;--switch-on: #1f6d5c;--grip: #6d7e90;--scene-bg: #080b0f;--box-fill: #8eb4d4;--box-edge: #6f889e;--grid-major: #35506a;--grid-minor: #243140;--mb: #5ee0c0;--plot-label: #8b9aab}html[data-theme=light]{color-scheme:light;--bg: #eef2f6;--bg-2: #ffffff;--panel: #e4eaf1;--panel-2: #f4f7fb;--stroke: #c5d0dc;--stroke-2: #8fa0b3;--text: #15202b;--muted: #5b6b7c;--a: #0284c7;--b: #d97706;--c: #9333ea;--accent: #0f9d82;--on-accent: #f4fffb;--danger: #dc3d52;--shadow: 0 16px 40px rgba(21, 40, 62, .12);--topbar: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);--viewport-glow: #d7e4f2;--overlay: rgba(255, 255, 255, .82);--plot: #f4f7fb;--slider: #cdd6e1;--thumb-border: #ffffff;--switch: #c5d0dc;--switch-knob: #ffffff;--switch-on: #0f9d82;--grip: #8fa0b3;--scene-bg: #e8eef4;--box-fill: #4d6f8c;--box-edge: #3d5670;--grid-major: #7b93ab;--grid-minor: #c5d3e0;--mb: #0f9d82;--plot-label: #5b6b7c}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--font);overflow:hidden}button,input{font-family:inherit}#app{height:100%;display:grid;grid-template-rows:auto 1fr}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px 10px;border-bottom:1px solid var(--stroke);background:var(--topbar)}.brand{display:flex;flex-direction:column;gap:2px}.brand h1{margin:0;font-size:18px;font-weight:620;letter-spacing:.01em}.brand p{margin:0;color:var(--muted);font-size:12.5px}.equation{font-family:var(--mono);font-size:13px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:999px;padding:7px 12px}.topbar-actions{display:flex;align-items:center;gap:10px}.theme-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--stroke-2);background:var(--bg-2);color:var(--text);display:grid;place-items:center;cursor:pointer}.theme-btn:hover{border-color:var(--accent);color:var(--accent)}.theme-btn .icon-copied,.theme-btn.copied .icon-share{display:none}.theme-btn.copied .icon-copied{display:block}.theme-btn .icon-moon,html[data-theme=light] .theme-btn .icon-sun{display:none}html[data-theme=light] .theme-btn .icon-moon{display:block}.stage{position:relative;min-height:0;display:grid;grid-template-columns:0px minmax(0,1fr) 360px;grid-template-areas:"left view right"}.stage.has-left-dock{grid-template-columns:360px minmax(0,1fr) 360px}.viewport{grid-area:view;position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 30%,var(--viewport-glow) 0%,transparent 55%),var(--bg)}.viewport canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%;touch-action:none;z-index:0}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.overlay>*{pointer-events:auto}.view-tools{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px}.view-btn{width:42px;height:42px;border:1px solid var(--stroke-2);background:var(--overlay);color:var(--text);border-radius:12px;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}.view-btn:hover,.view-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.view-clock{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--overlay);border:1px solid var(--stroke);border-radius:10px;padding:8px 10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow)}.legend{position:absolute;left:16px;top:16px;display:flex;gap:8px;padding:8px;border-radius:14px;background:var(--overlay);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.chip{display:flex;align-items:center;gap:7px;padding:4px 8px;font-size:12px;color:var(--muted)}.dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px currentColor}.dot.a{color:var(--a);background:var(--a)}.dot.b{color:var(--b);background:var(--b)}.dot.c{color:var(--c);background:var(--c)}.hint{position:absolute;left:16px;bottom:16px;font-size:12px;color:var(--muted);background:var(--overlay);border:1px solid var(--stroke);padding:8px 10px;border-radius:10px}.controls{min-height:0;overflow:auto;background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:14px;position:relative;z-index:2}.dock-right{grid-area:right;border-left:1px solid var(--stroke)}.dock-left{grid-area:left;border-right:1px solid var(--stroke);min-width:0}.dock-left.collapsed{padding:0;border:0;overflow:hidden}.controls.drop-target{background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.dock-hint{display:none;margin:0;padding:18px 12px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--stroke-2);border-radius:var(--radius)}.dock-hint.visible{display:block}.card-placeholder{min-height:56px;border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);border-radius:var(--radius);background:color-mix(in srgb,var(--accent) 8%,transparent);flex:0 0 auto}.float-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:6}.card{position:relative;background:var(--bg-2);border:1px solid var(--stroke);border-radius:var(--radius);padding:0;display:flex;flex-direction:column;min-width:0;flex:0 0 auto}.card.dock-sized{overflow:hidden}.card.floating{position:absolute;pointer-events:auto;margin:0;box-shadow:var(--shadow);overflow:hidden}.card.dragging{opacity:.96;cursor:grabbing}.card-head{display:flex;align-items:center;gap:8px;padding:11px 12px 11px 10px;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;flex:0 0 auto}.card.dragging .card-head,.card-head:active{cursor:grabbing}.card:not(.collapsed) .card-head{border-bottom:1px solid var(--stroke)}.card-grip{width:12px;height:16px;flex:0 0 auto;background-image:radial-gradient(circle,var(--grip) 1.15px,transparent 1.25px);background-size:6px 6px;background-position:0 1px;opacity:.85}.card h2{margin:0;flex:1;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.card-toggle{width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;position:relative;flex:0 0 auto}.card-toggle:hover{background:var(--panel-2);color:var(--text)}.card-toggle:before{content:"";position:absolute;left:10px;top:8px;width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);transition:transform .15s ease}.card.collapsed .card-toggle:before{top:10px;transform:rotate(-45deg)}.card-body{padding:14px;min-height:0;overflow:auto}.card.collapsed .card-body,.card.collapsed .card-resize{display:none}.card.floating:not(.collapsed) .card-body,.card.dock-sized:not(.collapsed) .card-body{flex:1}.card-resize{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:ns-resize;touch-action:none}.card.floating .card-resize{cursor:nwse-resize}.card-resize:before{content:"";position:absolute;right:4px;bottom:4px;width:9px;height:9px;border-right:1.6px solid var(--stroke-2);border-bottom:1.6px solid var(--stroke-2)}.energy-body{display:flex;flex-direction:column;min-height:180px}.energy-stats{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;color:var(--muted)}.energy-stats b{font-family:var(--mono);color:var(--text);font-weight:500}#energy-dist{width:100%;flex:1;min-height:140px;height:160px;display:block;background:var(--plot);border-radius:10px}.energy-legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:8px;font-size:11px;color:var(--muted)}.energy-legend span,.legend-item{display:flex;align-items:center;gap:6px}.legend-item{margin:0;padding:2px 6px 2px 4px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;cursor:pointer}.legend-item:hover{background:var(--panel-2);color:var(--text)}.legend-item[aria-pressed=false]{opacity:.38;text-decoration:line-through;text-decoration-color:var(--muted)}.swatch{width:10px;height:10px;border-radius:2px;display:inline-block}.swatch.a{background:var(--a)}.swatch.b{background:var(--b)}.swatch.mb{height:2px;width:14px;border-radius:0;background:var(--mb)}.swatch.reactive{width:12px;height:10px;border-radius:2px;background:color-mix(in srgb,var(--danger) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 70%,transparent)}.swatch.ea{width:4px;height:12px;border-radius:1px;background:var(--danger)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--slider);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--text);border:2px solid var(--thumb-border);cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}.slider-head+input[type=range]+.slider-head{margin-top:12px}.slider-head label{font-size:13px}.value{font-family:var(--mono);font-size:12px;color:var(--accent)}.value.a{color:var(--a)}.value.b{color:var(--b)}.value.c{color:var(--c)}.pack-input{width:76px;font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--panel-2);border:1px solid var(--stroke);border-radius:8px;padding:4px 8px;text-align:right}.pack-input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);border-color:var(--accent)}.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.toggle span{font-size:13px}.switch{position:relative;width:44px;height:26px;flex:0 0 auto}.switch input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer;z-index:1}.knob{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--switch);border-radius:999px;cursor:pointer;transition:.15s ease}.knob:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:var(--switch-knob);border-radius:50%;transition:.15s ease}.switch input:checked+.knob{background:var(--switch-on)}.switch input:checked+.knob:after{transform:translate(18px);background:var(--accent)}.ea-grid{display:grid;gap:12px}.ea-grid.disabled .rev-only{opacity:.38;pointer-events:none}.energy{width:100%;height:118px;margin-top:12px;display:block}.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.stat{background:var(--panel-2);border:1px solid var(--stroke);border-radius:12px;padding:8px;text-align:center}.stat b{display:block;font-family:var(--mono);font-size:20px;line-height:1.2}.stat span{font-size:11px;color:var(--muted)}.stat.a b{color:var(--a)}.stat.b b{color:var(--b)}.stat.c b{color:var(--c)}.rates{margin-bottom:10px}.rates .stat b{font-size:16px}.rates .stat.muted{opacity:.4}.card[data-card=composition] .card-body{display:flex;flex-direction:column}#chart{width:100%;height:84px;min-height:72px;display:block}.card.floating[data-card=composition] #chart,.card.dock-sized[data-card=composition] #chart{flex:1;height:auto}.card.floating .energy-body #energy-dist,.card.dock-sized .energy-body #energy-dist{height:auto}.reset-row{display:flex;gap:8px}.text-btn{flex:1;height:38px;border-radius:10px;border:1px solid var(--stroke-2);background:var(--panel-2);color:var(--text);cursor:pointer}.text-btn:hover{border-color:var(--accent)}.note{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.45}@media(max-width:980px){html,body{overflow:auto}#app{height:auto;min-height:100%}.stage{grid-template-columns:1fr;grid-template-rows:minmax(52vh,62vh) auto;grid-template-areas:"view" "right"}.stage.has-left-dock{grid-template-columns:1fr;grid-template-rows:minmax(52vh,62vh) auto auto;grid-template-areas:"view" "left" "right"}.dock-right{border-left:0;border-top:1px solid var(--stroke);max-height:48vh}.dock-left{border-right:0;border-top:1px solid var(--stroke);max-height:48vh}.dock-left.collapsed{display:none}}