:root { color-scheme:dark; --bg:rgba(5,12,23,.87); --line:rgba(137,193,211,.18); --bright:#7af6e6; --orange:#f7ad70; --dim:#829cab; --white:#e5f4fa; font-family:'IBM Plex Mono',monospace; }
* { box-sizing:border-box; } html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#02050c;color:var(--white)} canvas#scene{display:block;width:100vw;height:100vh;touch-action:none} #vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 62% 48%,transparent 29%,rgba(0,3,12,.3) 88%),linear-gradient(180deg,rgba(0,0,0,.18),transparent 25%,transparent 75%,rgba(0,0,0,.3));z-index:1} button{font:inherit;color:inherit;cursor:pointer} button:focus-visible,input:focus-visible {outline:2px solid var(--bright)} #topbar{position:fixed;top:0;left:0;right:0;height:77px;z-index:7;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(2,9,17,.94),rgba(2,9,17,.65));backdrop-filter:blur(15px)} .brandmark{display:flex;align-items:center;gap:13px}.brand-icon,.bootmark{width:44px;height:44px;border:1px solid #60e9dc;color:var(--bright);display:grid;place-items:center;font-family:'Barlow Condensed';font-size:32px;font-weight:800;clip-path:polygon(0 0,100% 0,100% 83%,83% 100%,0 100%)} .brandmark small{display:block;color:#668898;letter-spacing:.16em;font-size:9px;margin-bottom:4px}.brandmark strong{font-family:'Barlow Condensed';font-size:24px;letter-spacing:.1em}.brandmark em{font-style:normal;font-weight:400;color:#a6c0cb}.top-status{font-size:10px;letter-spacing:.13em;color:#9cc8d0;display:flex;align-items:center;gap:13px}.status-live{width:7px;height:7px;display:inline-block;background:#5debc3;border-radius:50%;box-shadow:0 0 12px #4fc9b7;margin-right:6px}.divider{width:1px;height:17px;background:var(--line)}.iconbtn{border:1px solid var(--line);background:#111f2a;padding:8px 12px;font-size:18px}#sidebar{position:fixed;z-index:5;top:92px;bottom:83px;left:20px;width:326px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#274559 transparent;background:var(--bg);border:1px solid var(--line);box-shadow:0 16px 70px rgba(0,0,0,.35);backdrop-filter:blur(22px);padding:20px 20px 14px}.eyebrow{font-size:9px;letter-spacing:.2em;color:var(--bright);font-weight:600}.welcome h1{margin:12px 0;font:700 33px/.94 'Barlow Condensed',sans-serif;letter-spacing:.065em}.welcome h1 span{display:block;color:var(--bright)}.welcome p{font-size:10px;line-height:1.75;color:#90aab9;max-width:280px}.panel-title{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:11px 0;margin:19px 0 13px;letter-spacing:.12em;font-size:10px;color:#e0f3f4}.subtle{color:#5c7c8e}.control{margin:14px 0}.control label{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;letter-spacing:.1em}.control output{color:var(--bright)}.control small{color:#5d7d8c;font-size:9px}.control input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#4bded2 0%,#255f68 66%,#203342 66%);margin:14px 0 7px;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:15px;background:var(--bright);border:2px solid #051018}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.action{background:#12222d;border:1px solid #2b4751;font:600 10px 'IBM Plex Mono';padding:12px 7px;color:#bbd4de}.action:hover,.action.active{background:#1d4850;border-color:#6bc4ba;color:#e7fffd}.action.primary{border-color:#4fc2b8;color:#70eade;background:#102b31}.action.danger{color:#e6a59b;border-color:#70413f}.action.danger.active{color:#fff;background:#6a2930}.inspect-label{margin-top:24px}.layer-row{display:grid;gap:10px;font-size:10px;color:#a5c0cb}.layer-row label{cursor:pointer}.layer-row input{accent-color:var(--bright)}.console-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;margin-top:20px;padding-top:16px;font-size:9px;color:#8fb0ba}#siteNav{position:fixed;right:24px;top:98px;z-index:4;width:208px;text-align:right}#navButtons{margin-top:12px;display:grid;gap:7px}#navButtons button{text-align:right;background:rgba(4,15,26,.72);border:1px solid var(--line);padding:11px 12px;font-size:10px;letter-spacing:.06em;color:#9fb7c6;backdrop-filter:blur(9px)}#navButtons button:hover,#navButtons button.active{border-color:rgba(117,242,229,.8);color:#79f7e7;background:rgba(20,55,62,.85)}#navButtons button span{color:var(--orange);font-size:9px;margin-right:12px}#bottomBar{position:fixed;bottom:0;left:0;right:0;z-index:6;min-height:65px;border-top:1px solid var(--line);background:rgba(3,10,19,.89);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 23px;backdrop-filter:blur(20px)}.controlhint{font-size:8.5px;line-height:1.8;color:#7d9caa}.controlhint kbd{display:inline-block;color:#d9ebed;border:1px solid #365361;padding:1px 4px;margin:0 3px;font:inherit}.hud-actions{display:flex;gap:7px;flex-shrink:0}.hud-actions button{background:#12222b;border:1px solid var(--line);padding:11px;font-size:9px;color:#b0cbd3}.hud-actions button:hover,.hud-actions button.active{color:var(--bright);border-color:#73d0c5}#reticle{position:fixed;left:50%;top:50%;font-size:26px;transform:translate(-50%,-50%);z-index:4;color:var(--bright);pointer-events:none}#inspect{position:fixed;right:23px;bottom:86px;width:270px;z-index:5;background:rgba(5,18,30,.9);border-left:2px solid var(--bright);padding:17px 22px;backdrop-filter:blur(20px)}#inspect strong{font:700 24px 'Barlow Condensed';display:block;margin:6px 0;letter-spacing:.04em}#inspect p{font-size:10px;color:#9eb7c7;line-height:1.6}#inspect small{font-size:9px;color:var(--orange)}#inspectClose{position:absolute;right:9px;top:9px;background:transparent;border:0}#toast{position:fixed;z-index:9;left:50%;top:98px;transform:translateX(-50%);padding:10px 17px;background:rgba(5,29,39,.94);border:1px solid rgba(100,240,217,.4);color:var(--bright);font-size:10px;letter-spacing:.08em;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}#boot{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 40%,#172f40,#02060d 65%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity 1s}.bootmark{width:84px;height:84px;font-size:64px}.boothead{font:700 60px 'Barlow Condensed';letter-spacing:.12em}.boothead span{font-weight:400;color:#91aebd}.bootcopy{font-size:11px;letter-spacing:.26em;color:#8daab9}.boottrack{width:220px;height:2px;background:#284550;overflow:hidden}.boottrack div{height:100%;width:100%;background:#74eeda;transform:translateX(-100%);animation:loading 2s ease-in-out forwards}#boot small{color:#5b7888;font-size:9px;letter-spacing:.18em}#boot.hidden{opacity:0;pointer-events:none}@keyframes loading{to{transform:translateX(0)}}@media(max-width:980px){.top-status{display:none}#siteNav{right:12px;top:85px;width:170px}#navButtons button{font-size:8px}#sidebar{width:300px;left:8px;top:85px;bottom:73px}.controlhint{display:none}#bottomBar{justify-content:center}#inspect{right:12px}}@media(max-width:650px){#topbar{height:65px;padding:0 12px}#sidebar{width:min(310px,calc(100vw - 18px));top:74px;bottom:70px;left:9px;display:none}body.show-sidebar #sidebar{display:block}#siteNav{top:76px;right:7px;width:152px}#navButtons button{padding:8px}#bottomBar{padding:6px;min-height:58px}.hud-actions{gap:3px}.hud-actions button{font-size:8px;padding:8px 6px}#inspect{bottom:68px;width:min(260px,calc(100% - 20px))} .brandmark strong{font-size:21px}.brandmark small{font-size:8px} }