:root{color-scheme:dark;--bg:#020712;--panel:#061320e9;--line:#25405282;--edge:#365f7580;--muted:#66869a;--body:#a9c7d2;--white:#ebf6f7;--cyan:#70ffed;--ice:#51bfe0;--violet:#a58eff;--gold:#ffc87b;font-family:Inter,Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;min-height:100%;background:var(--bg);font-family:Inter,Arial,Helvetica,sans-serif;color:var(--body)}button,input,select{font:inherit}button{cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button:hover{color:#fff;border-color:#4adad8!important}.stage{height:100vh;height:100dvh;min-height:650px;position:relative;overflow:hidden;background:radial-gradient(ellipse 54% 65% at 53% 48%,#09233b 0%,#040d1c 62%,#020711 100%)}#viewport{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;z-index:0}#viewport.grabbing{cursor:grabbing}.ambient-gradient{pointer-events:none;position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 30% 38% at 54% 54%,transparent 18%,#02081512 96%),linear-gradient(90deg,#020914b8 0%,transparent 24%,transparent 69%,#020815b9 100%),linear-gradient(0deg,#020713bc 0%,transparent 20%,transparent 86%,#020713a6 100%)}.design-grid{pointer-events:none;position:absolute;inset:0;opacity:.12;z-index:1;background-image:linear-gradient(to right,#35718d31 1px,transparent 1px),linear-gradient(to bottom,#35718d31 1px,transparent 1px);background-size:66px 66px;mask-image:linear-gradient(to bottom,transparent 10%,black 50%,transparent 95%)}.topbar{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;height:82px;padding:0 35px;z-index:5;border-bottom:1px solid #2950644f;background:linear-gradient(#04101ccd,#04101c22);gap:22px}.brand{display:flex;align-items:center;gap:14px}.brand-symbol{width:42px;height:42px;color:var(--cyan)}.brand-symbol svg{stroke:currentColor;stroke-width:2;fill:none;width:100%;height:100%}.brand-kicker{font:700 9px/1.5 monospace;letter-spacing:2px;color:var(--cyan)}.brand-kicker span{color:#5d7388}.brand h1{font-size:22px;letter-spacing:.065em;margin:0;line-height:1.5;color:#f0fafc;font-weight:750}.brand h1 span{font-weight:300;color:#92abb9}.top-center{font:11px/1.3 monospace;letter-spacing:1.2px;color:#b8dae0;white-space:nowrap}.status-dot,.indicator{display:inline-block;width:7px;height:7px;background:#5bffc9;box-shadow:0 0 12px #5bffc9;border-radius:50%;vertical-align:middle;margin-right:11px;animation:breathe 2.5s infinite}@keyframes breathe{50%{opacity:.35;box-shadow:0 0 5px #58e6be}}.separator{padding:0 9px;color:#567183}.top-actions{display:flex;align-items:center;gap:11px}.build-tag{font:10px monospace;color:#7998a9;border-right:1px solid #244152;padding-right:17px;margin-right:7px}.top-actions button{border:1px solid #305164aa;background:#0b1e2bb7;color:#d5edf1;min-height:33px;min-width:34px;display:flex;align-items:center;justify-content:center;padding:0 10px;font-size:15px}.top-actions button svg{fill:none;stroke:currentColor;stroke-width:1.7;width:17px;height:17px;margin-right:8px}.top-actions button span{font:700 10px monospace;letter-spacing:1px}.top-actions button:last-child{border-radius:50%;width:33px;font-size:13px}.left-pane{position:absolute;top:111px;left:36px;width:262px;bottom:154px;overflow:auto;z-index:4;scrollbar-width:none}.left-pane::-webkit-scrollbar{display:none}.index-label,.eyebrow{font:700 9px/1.5 monospace;color:var(--cyan);letter-spacing:1.7px}.index-label{color:#7a9db1;margin:8px 0 18px}.hero-caption .hero-eyebrow{font:10px monospace;letter-spacing:1.3px;color:#7d95a6}.hero-caption h2{font-size:clamp(31px,2.7vw,49px);line-height:.99;letter-spacing:-.052em;color:#e8f6fa;margin:20px 0 14px;font-weight:850}.hero-caption em{font-style:normal;color:var(--cyan)}.hero-caption p{font-size:12px;line-height:1.8;color:#8aaab9;max-width:225px}.thin-rule{height:1px;background:linear-gradient(90deg,#34687a,#34687a00);margin:30px 0 24px}.view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.view-buttons button{display:flex;gap:8px;align-items:center;text-align:left;border:1px solid #24435399;background:#071725d2;color:#6e90a4;font:9px monospace;padding:12px 9px;letter-spacing:.4px}.view-buttons button b{font-size:10px;font-weight:600;color:#bad4de}.view-buttons button.current{border-color:#4bcab5;background:#15343b91;color:var(--cyan)}.view-buttons button.current b{color:var(--cyan)}.inspect{border-left:1px solid var(--cyan);padding-left:12px}.inspect h3{color:#effaf9;letter-spacing:1px;font:700 14px/1.3 monospace;margin:12px 0 8px}.inspect p{font-size:11px;line-height:1.65;color:#8da9b9;margin:0 0 10px}.inspect small{font:9px monospace;color:#557c91}.inspect .indicator{width:5px;height:5px;margin:0 0 0 8px}.center-crosshair{position:absolute;left:51.7%;top:51%;transform:translate(-50%,-50%);width:40px;height:40px;z-index:2;pointer-events:none;opacity:.35}.center-crosshair i:first-child{position:absolute;height:1px;width:40px;background:var(--cyan);top:50%}.center-crosshair i:nth-child(2){position:absolute;width:1px;height:40px;background:var(--cyan);left:50%}.center-crosshair span{display:block;width:7px;height:7px;border:1px solid var(--cyan);border-radius:50%;position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);background:#000}.floating-spec{position:absolute;top:107px;left:50%;transform:translateX(-50%);display:flex;gap:60px;justify-content:center;pointer-events:none;z-index:2;color:#5c8ca5;font:9px monospace;letter-spacing:1px;white-space:nowrap;opacity:.8}.control-pane{position:absolute;right:29px;top:109px;bottom:156px;width:285px;background:#061422e0;border:1px solid #2b4b5f99;box-shadow:0 18px 90px #02040cba, inset 0 1px 0 #81d9ed10;z-index:4;padding:22px 20px 16px;display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin;scrollbar-color:#23516a transparent;backdrop-filter:blur(16px)}.panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:19px;border-bottom:1px solid var(--line)}.panel-head h2{color:#ecf6f9;font-size:16px;line-height:1.4;letter-spacing:.035em;margin:7px 0 0}.panel-head h2 span{font-weight:300;color:#8eb6c7}.panel-icon{font-size:28px;color:#54a4a8}.panel-section{padding:22px 0 0}.panel-section.compact{padding-top:15px}.section-heading{display:flex;justify-content:space-between;gap:8px;font:700 10px monospace;color:#d5ecf2;letter-spacing:.4px;padding-bottom:15px}.section-heading span{color:#5d8497;font-size:9px}.control{margin:0 0 19px}.control-line{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:11px}.control label{font:9px monospace;letter-spacing:.6px;color:#8fb3c6}.control output{font:700 12px monospace;color:var(--cyan)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:linear-gradient(90deg,var(--cyan),#2b6172);outline:none;display:block}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;box-shadow:0 0 10px #56effba4;border:2px solid var(--cyan);background:#061421;cursor:pointer;transform:rotate(45deg)}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:var(--cyan);border:0;cursor:pointer}.toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.toggle{font:9px monospace;letter-spacing:.1px;text-align:center;color:#86a4b7;background:#0a1d2d;border:1px solid #284457;padding:10px 4px;white-space:nowrap}.toggle.active{color:var(--cyan);border-color:#3b958f;background:#0e3339}select{width:100%;border:1px solid #2c546b;background:#0b1b2b;color:#c8e6ef;font:10px monospace;letter-spacing:.7px;padding:10px;outline:0}.bottom-buttons{display:flex;gap:7px}.bottom-buttons button{flex:1;background:#102636;border:1px solid #2e6070;color:#d4e8eb;font:9px monospace;letter-spacing:.5px;padding:11px 7px}.help-note{margin-top:auto;padding-top:22px;font:8px/1.8 monospace;letter-spacing:.3px;color:#7394a4}.help-note span{color:var(--cyan)}.telemetry{position:absolute;left:28px;right:28px;bottom:24px;z-index:4;display:grid;grid-template-columns:1.15fr repeat(4,1fr) .92fr;min-height:109px;background:linear-gradient(180deg,#061929f4,#06121ff5);border:1px solid #245269b3;box-shadow:0 -16px 60px #00121c66}.telemetry-cell{padding:20px 19px;min-width:0;border-right:1px solid #2d57675e}.telemetry-cell:last-child{border-right:0}.telemetry .eyebrow{font-size:9px;color:#729bad;white-space:nowrap;letter-spacing:.75px}.telemetry-title{background:linear-gradient(100deg,#0c2934,#081723)}.telemetry-title .eyebrow{color:var(--cyan)}.telemetry-title h4{font-size:20px;color:#d8eef2;white-space:nowrap;letter-spacing:1px;margin:16px 0 0}.telemetry-title h4 span{color:#47848f;font-size:14px}.metric{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin-top:12px}.metric strong{font-size:clamp(17px,1.5vw,26px);color:#edf9fa;letter-spacing:-.06em;font-weight:600;white-space:nowrap}.metric span{font:8px monospace;white-space:nowrap;color:#598c99}.signal-line{background:#25465a;height:2px;margin-top:12px}.signal-line span{height:2px;background:var(--cyan);display:block;width:72%;box-shadow:0 0 8px var(--cyan)}.technical{display:inline-block;margin-right:7px;font:8px monospace;color:#7393a6;margin-top:6px}.loading{position:absolute;inset:0;background:#030b17;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .7s ease}.loading.hidden{opacity:0;pointer-events:none}.loading-mark{font-size:72px;font-weight:100;color:var(--cyan);text-shadow:0 0 55px #55edff}.loading h2{font:700 17px monospace;color:#e6f6f8;letter-spacing:2px}.loading p{font:9px monospace;letter-spacing:1.3px;color:#698fa2}.loading-bar{width:230px;height:1px;background:#294353;margin-top:30px}.loading-bar i{display:block;background:#5efef0;height:1px;width:100%;box-shadow:0 0 10px var(--cyan)}.toast{position:absolute;left:50%;bottom:155px;transform:translate(-50%,15px);padding:10px 22px;border:1px solid #6be4e1;background:#0e3035;color:#b8fff6;font:11px monospace;letter-spacing:1px;z-index:9;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(560px,calc(100% - 32px));background:#091c2c;color:#a4c9d8;border:1px solid #3b7185;padding:28px;line-height:1.7;box-shadow:0 12px 60px #000a}dialog::backdrop{background:#000b}.dialog-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #2a4c62}.dialog-head h2{color:#e4f9f9;font-size:20px}.dialog-head button{background:transparent;border:1px solid #294b5d;padding:6px 10px;color:#d5ebec}dialog p{font-size:13px}dialog code{color:var(--cyan)}
@media(max-width:1250px){.left-pane{width:216px;left:23px}.control-pane{right:22px;width:265px}.topbar{padding:0 22px}.telemetry{left:22px;right:22px}.telemetry-cell{padding:18px 13px}.top-center{display:none}.hero-caption h2{font-size:40px}.floating-spec{display:none}}
@media(max-width:850px){.stage{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;padding-bottom:20px}#viewport{position:fixed;height:100vh;height:100dvh}.ambient-gradient,.design-grid{position:fixed}.topbar{position:relative;height:70px;padding:0 13px;flex-shrink:0;background:#04101bd9}.brand h1{font-size:17px}.brand-kicker{font-size:7px;letter-spacing:1px}.brand-symbol{width:29px;height:29px}.build-tag,.top-actions button span,.top-actions button svg{display:none}.top-actions{gap:6px}.top-actions button{min-width:31px;min-height:31px;padding:0 5px}.left-pane{position:relative;top:auto;left:auto;bottom:auto;width:100%;padding:18px 18px 10px;overflow:visible;display:grid;grid-template-columns:1fr 1fr;column-gap:24px}.index-label,.left-pane>.thin-rule,.hero-caption p,.inspect{display:none}.hero-caption h2{font-size:clamp(27px,5vw,41px);margin:8px 0 0}.hero-caption .hero-eyebrow{font-size:9px}.left-pane>.eyebrow{grid-column:2;grid-row:1;align-self:start}.view-buttons{grid-column:2;grid-row:2;margin-top:0;align-self:start}.view-buttons button{padding:7px 6px}.center-crosshair{display:none}.control-pane{position:relative;right:auto;top:auto;bottom:auto;width:calc(100% - 36px);margin:12px 18px;flex:none;max-height:none;overflow:visible;padding:16px}.panel-section{padding-top:17px}.panel-head{padding-bottom:11px}.panel-section:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}.panel-section:first-of-type>.section-heading{grid-column:1/-1}.control{margin-bottom:11px}.telemetry{position:relative;left:auto;right:auto;bottom:auto;margin:10px 18px 0;display:grid;grid-template-columns:repeat(3,1fr);order:5}.telemetry-cell{padding:12px}.telemetry .metric strong{font-size:19px}.telemetry-title{display:none}.help-note{padding-top:17px}.stage:after{content:'';position:fixed;inset:0;background:#020b177a;z-index:-1;pointer-events:none}.toast{position:fixed;bottom:20px}}
@media(max-width:480px){.left-pane{grid-template-columns:1fr;gap:16px}.left-pane>.eyebrow{display:none}.view-buttons{grid-column:1;grid-row:auto;grid-template-columns:repeat(3,1fr)}.control-pane{margin:12px 12px;width:calc(100% - 24px)}.telemetry{margin:10px 12px;grid-template-columns:1fr 1fr}.telemetry .eyebrow{font-size:8px}.control label{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}