:root{color-scheme:dark;--bg:#090f1b;--panel:#0d1726;--line:#25354b;--faint:#7489a1;--accent:#39e3d5;--ink:#e0ebf5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{background:var(--bg);margin:0;color:var(--ink);min-width:320px}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation}.topbar{height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #243248;background:#0b1422;padding:0 35px;gap:20px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:38px;height:38px;border:1px solid #34e1d0;border-radius:8px;display:grid;place-items:center;font-size:24px;font-weight:750;color:#ddfcff;box-shadow:inset 0 0 16px #1aa39b36}.brand-mark span{color:var(--accent);font-size:17px}.brand b{font-size:15px;letter-spacing:.08em}.brand b span{color:var(--accent)}.brand small{display:block;font-size:9px;letter-spacing:.22em;color:#72869c;margin-top:3px}.top-center,.top-right{font-size:10px;letter-spacing:.1em;color:#99a9b9;display:flex;align-items:center;gap:15px}.led,.dot{display:inline-block;width:6px;height:6px;background:#32dfc2;border-radius:50%;box-shadow:0 0 12px #32dfc2}.separator{width:1px;height:15px;background:#344257}.pill{border:1px solid #22565b;border-radius:3px;padding:8px 12px;color:#6fe3d8;font-size:10px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 342px;min-height:calc(100vh - 111px)}.stage{padding:27px 33px 26px;min-width:0;background:radial-gradient(ellipse at 50% 12%,#15283b88,transparent 66%)}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:22px;margin-bottom:22px}.eyebrow{font-size:10px;color:#6ce0d3;letter-spacing:.2em;font-weight:650}.stage-head h1{font-size:clamp(32px,3.8vw,57px);font-weight:680;letter-spacing:.04em;margin:6px 0 2px;line-height:1.15}.stage-head h1 i{font-weight:350;font-style:normal;color:#42b6b0}.stage-head p{font-size:11px;letter-spacing:.16em;color:#8699ac;margin:9px 0 0}.micro-tag{font-size:10px;letter-spacing:.09em;color:#678a9e;border:1px solid #284052;padding:10px 11px;white-space:nowrap}.micro-tag span{color:#65e6d8;padding:0 3px}.viewport{height:min(52vh,535px);min-height:330px;position:relative;overflow:hidden;border:1px solid #2a3a4e;border-radius:5px;background:radial-gradient(ellipse at 52% 43%,#1b3046,#0a101b 65%);box-shadow:inset 0 0 40px #08101d}.three-canvas,.fallback-canvas{display:block;width:100%;height:100%;position:absolute;inset:0}.viewport-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;font-size:11px;letter-spacing:.19em;color:#659ba9;z-index:3;background:radial-gradient(ellipse at center,#15283a,#0a101b);transition:opacity .3s}.viewport-loading.hidden{opacity:0;pointer-events:none}.spinner{height:37px;width:37px;border:2px solid #295360;border-top-color:#39e3d5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.viewport-hud{position:absolute;left:20px;top:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:#b2c9d3;pointer-events:none}.viewport-hud>div{background:#081420ac;padding:8px 10px}.viewport-hud .dot{margin-right:7px}.viewport-tools{position:absolute;right:19px;top:50%;transform:translateY(-50%);display:grid;gap:9px}.viewport-tools button{height:37px;width:38px;border:1px solid #35465b;border-radius:3px;color:#d8e9f1;background:#111d2bdc;font-size:18px}.viewport-tools button:hover{background:#1d3e4c;border-color:#41b2b3}.viewport-foot{position:absolute;bottom:16px;left:17px;right:17px;display:flex;flex-wrap:wrap;gap:18px;font-size:9px;letter-spacing:.12em;color:#7596a4;pointer-events:none}.viewport-foot span:before{content:'+';color:var(--accent);margin-right:5px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-top:13px}.metric{border:1px solid #293c4e;background:#0e1929;padding:15px 18px;min-width:0}.metric-label{font-size:9px;color:#8094a7;letter-spacing:.16em;white-space:nowrap}.metric div:nth-child(2){margin:10px 0 7px;display:flex;align-items:baseline;gap:8px}.metric strong{font-size:32px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.metric em{font-style:normal;color:#5da7ad;font-size:12px}.metric>span{font-size:10px;color:#607e93;letter-spacing:.08em}.bottom-grid{display:grid;grid-template-columns:minmax(0,1.27fr) minmax(275px,.9fr);gap:13px;margin-top:13px}.glass-card{border:1px solid #28394b;background:#0d1826;padding:19px;min-width:0}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:5px}.card-heading>div{display:flex;align-items:center;gap:11px}.section-code{font-size:10px;color:#42c3b8;padding:6px 7px;border:1px solid #28575b}.card-heading h2{font-size:14px;margin:0;font-weight:650}.live-tag,.small-note{font-size:9px;letter-spacing:.12em;color:#5fbab5}.chart-legend{display:flex;flex-wrap:wrap;gap:17px;margin:14px 0 5px;color:#859cb0;font-size:10px}.chart-legend i,.swatch{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:7px}.chart-panel canvas{display:block;width:100%;height:178px}.chart-foot{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.13em;color:#617a8d;margin-top:7px}.tube-list{display:grid;gap:9px;margin-top:20px}.tube-item{border:1px solid #284052;background:#101e2b;display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:13px;width:100%;padding:11px;text-align:left;color:#c7d9e8}.tube-item.selected{border-color:#3ca3a0;background:#152e38}.tube-item .colorline{width:5px;height:35px;border-radius:2px}.tube-item b{font-size:12px;font-weight:650;display:block}.tube-item small{font-size:10px;color:#7891a2;display:block;margin-top:5px}.tube-item strong{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}.tube-item em{font-size:10px;font-style:normal;color:#7e96a4;margin-left:4px}.info-note{margin:12px 0 0;color:#71899b;font-size:10px;line-height:1.65}.control-panel{border-left:1px solid #293d52;background:#0c1523;display:flex;flex-direction:column;min-width:0}.sidebar-header{padding:27px 22px 21px;border-bottom:1px solid #24374a}.sidebar-header h2{font-size:28px;font-weight:650;margin:7px 0}.sidebar-header p{font-size:12px;line-height:1.65;color:#889ba9;margin:4px 0 0}.control-scroll{padding:0 22px 20px;flex:1}.control-section{padding:24px 0;border-bottom:1px solid #283547}.control-heading{display:flex;align-items:center;gap:11px;margin-bottom:20px}.control-heading b{font-size:10px;color:#64c9c0;font-weight:550}.control-heading span{font-size:10px;letter-spacing:.15em;color:#c1d4df;font-weight:650}.transport{display:flex;gap:9px}.primary-btn{flex:1;background:#35d5cb;color:#09242c;border:0;border-radius:3px;min-height:43px;font-size:13px;font-weight:750}.primary-btn:hover{background:#7bf8e8}.icon-btn{min-width:45px;min-height:43px;border:1px solid #355064;border-radius:3px;background:#142438;color:#c0d8e4;font-size:20px}.icon-btn:hover{border-color:#55d5cf}.slider-row{margin:20px 0 4px}.slider-row label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#adbdc8}.slider-row label span{display:flex;align-items:center}.slider-row output{color:#55d8cf;font-size:11px;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}.slider-row input[type=range]{width:100%;margin:16px 0 3px;appearance:none;height:3px;background:linear-gradient(90deg,#39e3d5 40%,#304659 40%);border-radius:5px;cursor:pointer}.slider-row input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#d3fbf7;border:3px solid #36d4cd;border-radius:50%;box-shadow:0 0 0 3px #2ebfba20}.slider-row input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#d3fbf7;border:2px solid #36d4cd;border-radius:50%}.microcopy{font-size:10px;line-height:1.65;color:#708b9d;margin:13px 0 0}.presets,.gravities{display:flex;gap:6px}.presets button,.gravities button{flex:1;border:1px solid #315061;background:#122333;color:#91a9b5;border-radius:3px;padding:9px 4px;font-size:10px}.presets button.active,.gravities button.active{border-color:#29bab3;color:#7ff4e4;background:#173941}.presets button:hover,.gravities button:hover{border-color:#45bcb8}.formula{background:#11283a;border:1px solid #295669;text-align:center;color:#98f2de;font:600 17px Georgia,serif;padding:21px 6px}.principles p{color:#8fa2ae;font-size:11px;line-height:1.72}.principles details{font-size:11px;color:#a8c4cd;padding:8px 0}.principles summary{cursor:pointer;color:#50c9c4}.sidebar-footer{border-top:1px solid #24384b;padding:16px 22px;display:flex;justify-content:space-between;font-size:9px;color:#7898aa;letter-spacing:.08em}.sidebar-footer b{color:#4be6cc}.site-footer{height:39px;padding:0 35px;border-top:1px solid #263647;background:#0a121e;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#657e90;font-size:9px;letter-spacing:.09em}.site-footer b{color:#a3c4d0;font-weight:550}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 300px}.stage{padding:22px}.metric{padding:12px}.metric strong{font-size:27px}.micro-tag{display:none}.control-scroll{padding-left:17px;padding-right:17px}}@media(max-width:820px){.topbar{padding:0 17px;height:65px}.top-center{display:none}.workspace{display:block}.stage{padding:19px}.viewport{height:48vh}.control-panel{border-left:0;border-top:1px solid #283e4e}.control-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;padding:0 22px}.control-section{padding:19px 0}.sidebar-footer{padding:18px 22px}.site-footer{display:none}}@media(max-width:550px){.top-right{display:none}.stage-head h1{font-size:35px}.stage-head p{font-size:9px}.viewport{height:420px;min-height:290px}.viewport-foot{font-size:8px;gap:10px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid,.control-scroll{grid-template-columns:1fr}.control-scroll{display:block}.glass-card{padding:15px}.stage{padding:14px}.metric strong{font-size:26px}.metric-label{font-size:8px}.viewport-hud{font-size:8px;left:10px;right:10px}.viewport-tools{right:10px}.stage-head{margin-bottom:18px}}
