:root{color-scheme:dark;--bg:#0a1019;--panel:#101a26;--line:#263747;--muted:#8293a3;--blue:#68c4de;--white:#e7eef2;font-family:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 40% -20%,#162c40 0,transparent 53%),var(--bg);color:var(--white)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.app-shell{max-width:1880px;margin:auto;min-height:100vh;display:flex;flex-direction:column;padding:0 3.4%}.masthead{height:94px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.branding{display:flex;gap:12px;align-items:center}.brandmark{font:700 28px 'Space Grotesk';border:1px solid #608398;border-radius:11px;padding:4px 9px;line-height:29px;color:#eafaff}.branddot{color:var(--blue)}.branding strong{letter-spacing:.16em;font-size:12px;display:block}.branding small{font-size:9px;letter-spacing:.23em;color:#7897a7}.collection{font-size:11px;letter-spacing:.15em;color:#9aa9b4}.collection i{font-style:normal;color:var(--blue);margin-left:18px}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:30px;flex:1;padding-top:29px}.viewport-panel{min-width:0}.viewport{position:relative;min-height:670px;height:calc(100vh - 186px);max-height:960px;overflow:hidden;border:1px solid #2a4355;border-radius:12px;background:radial-gradient(circle at 44% 36%,#284257,#101a27 68%,#0b111b);box-shadow:0 25px 50px #0003}.viewport canvas{width:100%;height:100%;display:block}.viewport-top{position:absolute;top:25px;left:25px;z-index:2;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#a4bfca;pointer-events:none}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.green{background:#58d9b4;box-shadow:0 0 12px #43cc9e}.webgl-badge{margin-left:16px;color:#6a879b;border:1px solid #456076;padding:7px 9px;border-radius:4px}.viewport-footer{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;color:#8fa6b4;font-size:10px;letter-spacing:.12em}.viewport-footer button{border:1px solid #425a67;background:#142737ab;color:#bed3dc;border-radius:4px;padding:9px;font-size:10px;letter-spacing:.1em}.viewport-meta{display:flex;justify-content:space-between;margin:14px 4px 0;color:#647f90;font-size:10px;letter-spacing:.13em}.control-panel{padding:6px 5px 0}.eyebrow,.section-label,.phase-heading,.speed-row,.footer{font-size:10px;letter-spacing:.16em;font-weight:700;color:#7f9aad}.eyebrow{color:var(--blue)}h1{font:700 clamp(42px,4.2vw,68px)/1.05 'Space Grotesk';letter-spacing:-.07em;margin:18px 0 4px;white-space:nowrap}h1 span{color:var(--blue)}.subtitle{color:#c6d5de;font-size:16px;margin:0 0 18px;font-weight:600}.intro{font-size:13px;line-height:1.8;color:#8ba1af;margin:0 0 32px}.section-label{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px}.status{letter-spacing:.05em;color:#67d4aa;font-size:10px}.status.dwell{color:#e8ba7b}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px 9px;padding:21px 0 28px}.metrics>div{background:linear-gradient(130deg,#162331,#111b28);border:1px solid #253547;border-radius:7px;padding:15px}.metrics small{display:block;color:#879baa;font-size:9px;letter-spacing:.12em;margin-bottom:13px}.metrics strong{font:600 27px 'Space Grotesk';letter-spacing:-.05em}.metrics strong span{font-size:13px;color:#849aab;letter-spacing:0}.phase-heading{display:flex;justify-content:space-between;margin:0 0 13px}.phase-heading span:last-child{color:var(--blue)}.phase-bar{height:9px;background:linear-gradient(90deg,#346d85 25%,#354454 25%);border-radius:15px;position:relative;overflow:hidden}.cycle-fill{height:100%;width:0;background:#a1e9f6;box-shadow:0 0 10px #b2d6f1;transition:width .06s linear}.dwell-divider{position:absolute;left:25%;top:-3px;bottom:-3px;width:2px;background:#a5a9ac}.phase-key{display:flex;justify-content:space-between;font-size:10px;color:#879caa;margin:11px 0 29px}.phase-key b{width:8px;height:8px;display:inline-block;border-radius:2px;margin-right:7px}.phase-key-blue{background:#4895ad}.phase-key-grey{background:#61717e}.controls-label{margin-bottom:17px}.play-row{display:flex;gap:7px}.play-row button{height:43px;border-radius:6px;letter-spacing:.08em;font-size:11px;font-weight:700;border:1px solid #405263}.primary{background:#69bed4;color:#05222e;flex:1}.secondary{background:#1a2a38;color:#d0e2e9;padding:0 16px}.speed-row{display:flex;justify-content:space-between;margin:25px 0 14px;color:#9db0ba}.speed-row output{color:#8bd9eb;font-size:12px}.control-panel input[type=range]{width:100%;accent-color:#73cbe1;cursor:pointer}.ends{display:flex;justify-content:space-between;font-size:10px;color:#61788a;margin:7px 0 26px}.toggle-row{display:flex;flex-direction:column;gap:16px;font-size:12px;color:#b0c0cb}.toggle-row label{display:flex;align-items:center;gap:8px;cursor:pointer}.toggle-row input{accent-color:#66c0d8}.equation{border:1px solid #2e4559;background:#0e1b29;border-radius:7px;margin-top:26px;padding:18px}.equation p{font-size:9px;letter-spacing:.16em;color:#7ea3b5;margin:0 0 11px}.equation div{font:500 21px 'Space Grotesk';color:#dae3e8}.equation small{font-size:10px;color:#8196a6;display:block;margin-top:11px}.footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:26px;min-height:65px;font-size:9px;color:#5f7989}.loading{position:absolute;z-index:3;inset:0;background:#101c29;display:flex;align-items:center;justify-content:center;gap:10px;color:#92afbc;letter-spacing:.14em;font-size:12px}.loading.hidden{display:none}.pulse{width:16px;height:16px;border:2px solid #5abbd7;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:1080px){.main-grid{grid-template-columns:1fr}.viewport{min-height:490px;height:60vh}.control-panel{padding:12px 5px 30px}.metrics{grid-template-columns:repeat(4,1fr)}}@media(max-width:700px){.app-shell{padding:0 4%}.masthead{height:72px}.collection{display:none}.main-grid{gap:10px;padding-top:13px}.viewport{min-height:360px;height:53vh}.viewport-top{top:13px;left:13px;font-size:8px}.viewport-footer{bottom:14px;left:12px;right:12px;font-size:8px}.viewport-meta{font-size:8px}.metrics{grid-template-columns:1fr 1fr}.footer span:last-child{display:none}h1{font-size:49px}}