:root{color-scheme:dark;--bg:#0b1420;--panel:#101e2b;--panel2:#152635;--edge:#263948;--mute:#8699a9;--mutelight:#b3c3ce;--white:#f3f5f2;--teal:#66d7d7;--gold:#eab66a}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white)}body{font-family:'DM Sans',Arial,sans-serif;font-size:13px}.app{max-width:2000px;margin:0 auto;min-height:100vh}.topbar{height:77px;background:#0e1b27;border-bottom:1px solid #243442;display:flex;align-items:center;padding:0 43px;gap:35px}.brand{display:flex;align-items:center;gap:13px;min-width:300px}.symbol{display:flex;align-items:flex-end;gap:3px;transform:skewX(-16deg)}.symbol span{width:13px;background:#61d4d2;height:25px;display:inline-block;border-radius:2px}.symbol span+span{height:15px;background:#e6b16a}.brand b{display:block;font:700 21px 'Space Grotesk',sans-serif;letter-spacing:-.7px}.brand small{display:block;font-size:8px;letter-spacing:2.1px;color:#7f9baa;margin-top:2px}.edition,.version{font:600 10px 'Space Grotesk';letter-spacing:1.8px;color:#b1c0cb}.version{margin-left:auto;color:#6c8292}.sep{margin:0 6px}.signal{display:inline-block;vertical-align:middle;width:7px;height:7px;border-radius:50%;background:#50dbb8;box-shadow:0 0 12px #47d4a77a;margin-right:8px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 375px}.main-area{min-width:0;padding:35px 36px 38px 43px}.sidebar{border-left:1px solid #273846;background:linear-gradient(180deg,#122230,#0e1b28)}.sidebar-inner{padding:34px 28px 30px;height:100%}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;gap:20px}.eyebrow,.section-index{font:700 9px 'Space Grotesk';letter-spacing:2px;color:var(--teal)}.eyebrow .dim{color:#475e6e;margin:0 9px}.heading h1{font:600 clamp(24px,2.6vw,40px) 'Space Grotesk';letter-spacing:-1.6px;margin:11px 0 6px}.heading h1 em{font-style:normal;color:#eab875}.heading p{margin:0;color:#8da1b2;line-height:1.6}.lesson{border-left:1px solid #344654;padding-left:20px;min-width:115px}.lesson span{font:600 9px 'Space Grotesk';color:#7c94a5;letter-spacing:1px}.lesson strong{display:block;margin-top:8px;line-height:1.35;font:600 13px 'Space Grotesk';letter-spacing:1px}.viewport{height:clamp(410px,43vw,590px);position:relative;background:radial-gradient(ellipse at 60% 45%,#273b4a,#0d1a28 75%);border:1px solid #314657;border-radius:10px;overflow:hidden}.viewport canvas.webgl{display:block;width:100%;height:100%}.loading{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:16px;background:#111e2beb;padding:18px 22px;border:1px solid #395063;border-radius:9px;box-shadow:0 10px 30px #050e1880}.loading strong{display:block;font:600 14px 'Space Grotesk'}.loading small{display:block;color:#8ba0b0;margin-top:4px}.loading.error{max-width:calc(100% - 40px);line-height:1.5;white-space:normal}.spinner{border:2px solid #42606d;border-top-color:#63d4d7;width:30px;height:30px;border-radius:50%;animation:spin .8s linear infinite;flex:none}.error .spinner{display:none}@keyframes spin{to{transform:rotate(360deg)}}.view-top,.view-bottom{position:absolute;z-index:4;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.view-top{top:21px}.view-bottom{bottom:20px}.viewport-label,.view-hint,.legend,.view-bottom>span{font:600 9px 'Space Grotesk';letter-spacing:1.1px;color:#9aafbe}.viewport-label{color:#d1e4e5}.view-hint{color:#6f8497}.view-hint span{padding:0 8px}.legend{display:flex;align-items:center;gap:7px;letter-spacing:.5px;flex-wrap:wrap}.legend-dot{width:7px;height:7px;border-radius:50%;margin-left:7px}.camera-bar{position:absolute;z-index:7;right:19px;top:53px;display:flex;flex-direction:column;gap:4px}.camera-bar button{cursor:pointer;background:#101c29bd;color:#9fb0bf;border:1px solid #314757;border-radius:5px;padding:9px 13px;font:600 9px 'Space Grotesk';letter-spacing:.8px;text-align:left;transition:.2s}.camera-bar button:hover,.camera-bar button.active{color:#a7f2ed;border-color:#489c9b;background:#1c3e49dc}.markers{position:absolute;inset:0;pointer-events:none;z-index:5}.marker{position:absolute;left:0;top:0;transform:translate(-50%,-100%);background:#0d1b27d9;border:1px solid #4d6978;color:#e2f4f3;font:600 9px 'Space Grotesk';padding:6px 9px;border-radius:5px;white-space:nowrap}.marker:after{content:'';position:absolute;left:50%;top:100%;height:22px;width:1px;background:#6eb5c1}.runbar{display:flex;align-items:center;gap:10px;border:1px solid #2a3e4d;border-top:0;padding:15px 17px;background:#142231;border-radius:0 0 10px 10px;margin-top:-4px}.runbar button{border:1px solid #314655;background:#152636;color:#c2d1db;cursor:pointer;border-radius:6px;font:700 10px 'Space Grotesk';letter-spacing:1px;padding:14px 15px}.runbar button:hover{border-color:#5cabb1}.runbar .primary{border-color:#70d7d6;background:#75dad6;color:#08202a;padding:15px 20px}.runbar .primary:hover{background:#9cece8}.run-info{margin-left:auto;min-width:120px;display:flex;align-items:center;gap:12px;color:#9aafbe;font:700 9px 'Space Grotesk';letter-spacing:1px}.progress-track{height:4px;min-width:95px;background:#324451;border-radius:6px;overflow:hidden}.progress-track span{display:block;background:#62d7d4;height:100%;width:0}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:21px}.metric{background:#122232;border:1px solid #263c4c;border-radius:8px;padding:19px 17px;min-height:133px}.metric-top{display:flex;justify-content:space-between;color:#9fb4c0;font:700 9px 'Space Grotesk';letter-spacing:.85px;gap:5px}.metric-top span{color:#64d1d2}.value{font:600 clamp(20px,2.1vw,29px) 'Space Grotesk';letter-spacing:-1px;margin:15px 0 8px}.value small{font:500 12px 'DM Sans';color:#96adbd}.metric-sub{font:400 11px 'DM Sans';color:#7c94a5}.accent-metric{border-color:#34676b;background:linear-gradient(135deg,#173b43,#142936)}.value-status{font:700 15px 'Space Grotesk';color:#89e4d8;margin:20px 0 12px;line-height:1.4}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:18px}.glass-section{background:#111f2d;border:1px solid #273b4b;padding:22px 24px;border-radius:8px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.section-head h2{font:600 17px 'Space Grotesk';margin:6px 0 0}.hint-small{font:700 9px 'Space Grotesk';letter-spacing:1px;color:#6e8a9e}.force-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:25px}.force-cell span{color:#8da4b2;font:600 9px 'Space Grotesk';letter-spacing:1px;display:block}.force-cell strong{font:600 24px 'Space Grotesk';display:block;margin-top:6px}.force-cell strong small{font-size:12px;color:#829aad}.f-dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-left:4px}.orange{background:#e9ab69}.blue{background:#67cfdf}.red{background:#ee796f}.gold{background:#d2c386}#trace{width:100%;height:160px;margin-top:12px}.side-top{display:flex;justify-content:space-between;color:#6fd5d4;font:700 9px 'Space Grotesk';letter-spacing:1.4px}.control-count{color:#718d9d}.panel-title h2{font:600 23px 'Space Grotesk';letter-spacing:-.6px;margin:20px 0 5px}.panel-title p{color:#839bac;font-size:12px;margin:0}.controls{margin-top:22px}.group{border-top:1px solid #2a4050;padding:17px 0}.field-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;gap:8px}.field-heading label{font:600 12px 'DM Sans';color:#d8e2e8}.field-heading output{color:#8ce0da;font:700 12px 'Space Grotesk'}.field-number{font:600 10px 'Space Grotesk';color:#66889b}select{width:100%;background:#1b3040;color:#e0ebef;border:1px solid #3a5262;padding:11px 12px;border-radius:5px;font:500 12px 'DM Sans'}input[type=range]{width:100%;margin:2px 0 0;appearance:none;background:linear-gradient(90deg,#5ac8c7 42%,#304757 42%);height:4px;border-radius:5px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#e6f6f4;box-shadow:0 0 0 3px #32636b;border:1px solid #10424d}.bounds{display:flex;justify-content:space-between;color:#648093;font:500 10px 'Space Grotesk';margin-top:9px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:13px}.two-col .field-heading{display:block;min-height:36px}.two-col .field-heading label{display:block;font-size:11px}.two-col .field-heading output{display:block;margin-top:3px}.two-col .group{padding:15px 0}.sidebar-subhead{font:700 9px 'Space Grotesk';letter-spacing:1.8px;color:#68cdd2;border-top:1px solid #304756;padding-top:23px;margin:10px 0 13px}.switchline{display:flex;justify-content:space-between;align-items:center;color:#c0d0d7;font-size:12px;min-height:37px;cursor:pointer}.switchline input{position:absolute;opacity:0}.switch{width:33px;height:18px;border-radius:20px;background:#3b4c58;position:relative;transition:.2s}.switch:after{content:'';position:absolute;top:3px;left:3px;background:#93a4ae;border-radius:50%;width:12px;height:12px;transition:.2s}.switchline input:checked + .switch{background:#397c84}.switchline input:checked + .switch:after{left:18px;background:#9bf1e7}.learning,.selection{border:1px solid #315361;background:linear-gradient(160deg,#183440,#142635);border-radius:8px;padding:21px;margin-top:21px}.learning h3,.selection h3{font:600 18px 'Space Grotesk';margin:8px 0}.learning p,.selection p{font-size:12px;color:#a2b7c4;line-height:1.75;margin:9px 0}.learning strong{color:#dfefe8}.formula{background:#0c1f29;border-left:2px solid #63d5d2;padding:14px 12px;font:500 15px 'Space Grotesk';text-align:center;color:#e8f6f1;margin:15px 0}.selection{background:#142431;border-color:#334755}.shortcuts{font:600 9px 'Space Grotesk';letter-spacing:.55px;color:#657f90;margin-top:23px}.shortcuts span{margin:0 3px}footer{padding:17px 43px;border-top:1px solid #293c49;color:#647b8d;display:flex;justify-content:space-between;gap:16px;font:600 9px 'Space Grotesk';letter-spacing:1.2px}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #89e6d6;outline-offset:3px}@media(max-width:1300px){.layout{grid-template-columns:minmax(0,1fr) 335px}.main-area{padding:30px 22px}.sidebar-inner{padding:30px 22px}.topbar{padding:0 24px}.metrics{gap:9px}.metric{padding:17px 11px}.run-info .progress-track{min-width:65px}}@media(max-width:1060px){.layout{display:block}.sidebar{border-left:0;border-top:1px solid #304556}.sidebar-inner{max-width:750px;margin:auto}.main-area{padding:26px}.viewport{height:490px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.two-col{grid-column:1/-1}.topbar{height:68px}}@media(max-width:650px){.main-area{padding:18px 13px}.heading h1{font-size:26px}.heading .lesson{display:none}.viewport{height:410px}.view-hint,.view-bottom .legend{display:none}.camera-bar{top:auto;bottom:55px;right:8px;flex-direction:row}.camera-bar button{font-size:8px;padding:7px}.runbar{flex-wrap:wrap}.run-info{width:100%;justify-content:space-between}.run-info .progress-track{flex:1}.metrics,.bottom-grid{grid-template-columns:1fr 1fr}.metric{min-height:110px}.metric-top{font-size:8px}.value{font-size:23px}.bottom-grid .glass-section{grid-column:1/-1}.controls{display:block}.two-col{grid-template-columns:1fr 1fr}.topbar{padding:0 12px}.brand{min-width:0}.brand b{font-size:17px}.edition{display:none}.version{font-size:8px}.viewport-label{font-size:8px}footer{padding:15px;flex-wrap:wrap;gap:8px;font-size:8px}}