:root{--ink:#e9effe;--muted:#8290ad;--fine:#56657f;--line:#202a40;--bg:#070b14;--blue:#64d9fa;--violet:#b292ff;--panel:#0d1321;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #89d5ff;outline-offset:3px}.shell{height:100vh;display:grid;grid-template-columns:minmax(285px,330px) minmax(320px,1fr) minmax(215px,260px);overflow:hidden}.panel{background:linear-gradient(150deg,#101728,#0a101c 85%);z-index:3}.sidebar{padding:28px 27px 20px;display:flex;flex-direction:column;border-right:1px solid #273047;overflow-y:auto;scrollbar-color:#273449 transparent;scrollbar-width:thin}.brand{display:flex;align-items:center;gap:12px}.mark{height:43px;width:43px;border:1px solid #48ddff66;background:#102236;border-radius:13px;display:grid;place-items:center;font-size:26px;color:var(--blue);box-shadow:inset 0 0 20px #04bdff17}.brandword{font-weight:800;font-size:21px;letter-spacing:1.7px}.brandword span{font-weight:350;color:#a7b5d4}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#70a0bd}.brand .eyebrow{margin-bottom:2px;font-size:8px;letter-spacing:1.3px}.divider{height:1px;background:linear-gradient(90deg,#45607b,transparent);margin:25px 0}.tag{font-size:10px;letter-spacing:1.3px;color:#9eb7d2;border:1px solid #2b4256;background:#132436;padding:6px 11px;border-radius:40px;display:inline-flex;align-items:center;gap:7px;font-weight:700}.tag i,.live-dot,.status-dot{height:6px;width:6px;display:inline-block;border-radius:100%;background:#59e6c7;box-shadow:0 0 8px #31ceaf}.intro h1{font-size:30px;line-height:1.16;letter-spacing:-1.3px;margin:15px 0 10px}.intro h1 em{font-style:normal;color:#83daf9}.intro p,.inspector-desc{font-size:12px;line-height:1.65;color:#9ca8bc;margin:0 0 22px}.controls{padding-bottom:10px}.section-head{display:flex;align-items:center;justify-content:space-between;color:#789bb8;font-size:10px;font-weight:850;letter-spacing:1.4px;margin:14px 0}.tiny{color:#4fe0cc;font-size:9px}.gap-top{margin-top:27px}.control{display:block;margin:12px 0}.control>span{display:block;color:#b4bfd3;font-size:11px;margin-bottom:7px}.control select{width:100%;background:#141e31;border:1px solid #303b55;border-radius:8px;color:#e3edff;padding:10px 11px;font-size:12px}.range-row{display:block;margin:16px 0 10px}.range-row>span{display:flex;justify-content:space-between;color:#b7c3d6;font-size:12px}.range-row output{color:#72dcf5;font-size:11px;font-variant-numeric:tabular-nums}.range-row input[type=range]{width:100%;margin:11px 0 0;accent-color:#66d8f3;height:5px;cursor:ew-resize}.toggle-grid{display:grid;grid-template-columns:1fr;gap:4px}.toggle{display:flex;align-items:center;justify-content:space-between;padding:7px 0;color:#bdc5d7;font-size:12px;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle b{width:31px;height:18px;border-radius:18px;background:#29324a;position:relative;transition:background .2s}.toggle b:before{content:'';display:block;width:12px;height:12px;border-radius:50%;background:#adb6c9;position:absolute;top:3px;left:3px;transition:transform .2s}.toggle input:checked+b{background:#195a69}.toggle input:checked+b:before{transform:translateX(13px);background:#6deaf1}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:15px;font-size:9px;letter-spacing:1.1px;color:#6a7b98;line-height:2}.sidebar-foot b{color:#a4cde0}.stage{position:relative;min-width:0;min-height:0;background:radial-gradient(ellipse at 50% 45%,#172345 0%,#090f1f 50%,#050914 100%);overflow:hidden}#viewport{position:absolute;inset:0}#canvas{width:100%;height:100%;display:block;outline:none;touch-action:none}.stage-top{position:absolute;top:29px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;gap:15px;pointer-events:none;font-size:10px;letter-spacing:1.4px;font-weight:850;color:#a6bdd1}.live-dot{margin-right:8px}.view-id{color:#526b83;margin-left:8px}.capsule{border:1px solid #56708c55;color:#8fa2bc;border-radius:40px;padding:9px 13px;background:#0b1525aa;white-space:nowrap}.stage-caption{position:absolute;bottom:109px;left:38px;max-width:375px;pointer-events:none}.stage-caption h2{font-size:30px;letter-spacing:-1px;margin:9px 0}.stage-caption h2 i{font-style:normal;color:#7be2ee}.stage-caption p{max-width:330px;line-height:1.6;font-size:11px;color:#8193ad;margin:0}.stage-bottom{position:absolute;bottom:22px;left:30px;right:30px;display:flex;align-items:center;justify-content:space-between;gap:9px;border:1px solid #2d3a52;padding:9px;border-radius:14px;background:#0c1627db;backdrop-filter:blur(18px)}.actions{display:flex;gap:5px}.action{border:1px solid transparent;background:#18263b;color:#b6cde2;padding:11px 14px;font-size:12px;border-radius:8px;transition:.2s}.action:hover{background:#253d56}.action.primary{background:#69d7ec;color:#072333;font-weight:750}.action.primary:hover{background:#b2edff}.action.pulse{border:1px solid #4f416d;color:#dbc3ff;background:#2c223d}.status{display:flex;gap:13px;font-size:10px;letter-spacing:1px;font-weight:800;color:#5adbbf;white-space:nowrap}.status #fps{color:#7a90ae}.axis-widget{position:absolute;right:26px;top:84px;height:64px;width:64px;border:1px solid #3d536f;border-radius:50%;background:#0c1425b8;font-size:10px;font-weight:800}.axis-widget span{position:absolute}.ax-y{top:9px;left:28px;color:#54e9a8}.ax-x{bottom:8px;right:10px;color:#f78a95}.ax-z{bottom:8px;left:12px;color:#65adfb}.boot-notice{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;background:#101a2de6;border:1px solid #405578;border-radius:12px;padding:24px;max-width:310px;display:flex;flex-direction:column;gap:10px;line-height:1.5;color:#dbe7f5;font-size:12px}.boot-notice b{font-size:17px}.boot-notice code{color:#73e7e9}.inspector{border-left:1px solid #273047;padding:31px 20px;overflow-y:auto;scrollbar-width:thin}.inspector-head{display:flex;justify-content:space-between}.inspector h3{font-weight:760;font-size:27px;letter-spacing:-.8px;line-height:1.18;margin:21px 0 13px}.inspector-desc{margin-bottom:27px}.color-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #293549;background:#141d2e;border-radius:9px;padding:8px 10px;margin:9px 0;color:#c2cee0;font-size:11px}.color-picker>span{display:flex;align-items:center;gap:7px}.color-dot{display:block;height:8px;width:8px;border-radius:100%}.cyan{background:#48d7ef}.violet{background:#bb7dfc}.color-picker input{appearance:none;width:42px;height:25px;border:0;background:transparent;padding:0;cursor:pointer}.swatches{display:flex;gap:8px}.swatch{background:#0a1021;border:2px solid #485872;border-radius:9px;width:35px;height:35px;color:#a9bfd0;font-size:12px}.swatch[data-bg=slate]{background:#273347}.swatch[data-bg=black]{background:#000}.swatch[data-bg=light]{background:#bfcbd7;color:#536174}.swatch.selected{outline:2px solid #6edbea;outline-offset:3px}.audio-button{width:100%;border:1px solid #3b6276;background:#173447;color:#8cdef3;border-radius:9px;padding:11px;text-align:left;font-size:12px;font-weight:700}.audio-button span{margin-left:7px}.microcopy{font-size:10px;color:#78889d;line-height:1.6;margin:9px 0}.metric{border-bottom:1px solid #222c40;display:flex;align-items:center;justify-content:space-between;padding:11px 0;font-size:11px;color:#8da0b8}.metric b{color:#e6eef8;font-weight:650;font-variant-numeric:tabular-nums}.inspector-note{border:1px solid #244a58;background:#102330;border-radius:10px;display:flex;gap:11px;margin-top:27px;padding:12px;font-size:10px;color:#98bbca;line-height:1.55}.inspector-note span{color:#6bcde8;font-size:19px}
@media(max-width:1110px){.shell{grid-template-columns:280px minmax(350px,1fr)}.inspector{display:none}.intro h1{font-size:27px}}@media(max-width:700px){.shell{height:auto;min-height:100vh;display:flex;flex-direction:column}.sidebar{order:2;max-height:none;padding:20px 23px}.stage{order:1;min-height:65vh;height:65vh}.stage-caption{display:none}.stage-top{left:18px;right:18px;top:16px;font-size:9px}.capsule{font-size:9px}.stage-bottom{left:10px;right:10px;bottom:9px}.action{padding:10px 9px}.action span{display:none}.action.pulse span{display:inline}.status{font-size:9px}.intro h1{font-size:25px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.section-head,.toggle-grid{grid-column:1/-1}.sidebar-foot{margin-top:15px}}