:root{--bg:#07131e;--side:#091724;--line:#243747;--ink:#dceaf3;--muted:#7f99aa;--accent:#f4ad55;--cyan:#71d7d9}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font:13px/1.45 'Segoe UI',Inter,system-ui,-apple-system,sans-serif;color:var(--ink);overflow:hidden}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app-shell{height:100dvh;min-height:540px;display:flex;flex-direction:column}
.topbar{height:64px;flex-shrink:0;border-bottom:1px solid #233642;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:linear-gradient(95deg,#0d1e2b,#081521);gap:16px}
.brand{display:flex;align-items:center;gap:13px;letter-spacing:2px}.brand-symbol{display:grid;place-items:center;width:39px;height:39px;color:#f8b65d;border:1px solid #a26c43;border-radius:6px;font-weight:900;font-size:23px;letter-spacing:-4px;padding-right:5px}.brand-symbol span{color:#77cdd7;font-size:10px;letter-spacing:0;margin-left:-4px}.brand strong{font-size:16px;line-height:18px;display:block;color:#f5f6f5}.brand small{display:block;color:#7291a5;font-size:8px;letter-spacing:1.8px;margin-top:3px}.top-meta{color:#7c95a4;font-size:10px;letter-spacing:1.5px}.top-meta b{color:#cbd9df;font-weight:600}.meta-dot,.mini-dot{display:inline-block;width:6px;height:6px;background:#68d9bd;box-shadow:0 0 10px #68d9bd;border-radius:50%;margin-right:8px}.top-separator{border-right:1px solid #435261;margin:0 15px}.top-actions{display:flex;align-items:center;gap:18px}.engine-badge{font-size:9px;letter-spacing:1.4px;color:#83d5d5;border:1px solid #315b66;padding:8px 10px;border-radius:3px}.icon-button{background:transparent;border:1px solid #435568;color:#b9d7e2;width:29px;height:29px;border-radius:50%;font-weight:800}.content{flex:1;min-height:0;display:flex}.sidebar{width:362px;min-width:362px;background:linear-gradient(160deg,#0b1b2a,#081522);border-right:1px solid #233743;z-index:4;box-shadow:8px 0 50px #0005}.sidebar-scroll{height:100%;overflow:auto;padding:26px 25px 28px;scrollbar-color:#284254 transparent;scrollbar-width:thin}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:1.8px;font-weight:700;display:flex;justify-content:space-between;align-items:center}.edition{border:1px solid #375069;color:#9bb8c8;padding:2px 5px;font-weight:500;font-size:9px}.sidebar h1{font-weight:600;letter-spacing:-1.1px;font-size:29px;line-height:1.17;margin:17px 0 9px;color:#f2f6f8}.sidebar h1 em{font-style:normal;color:#f6ba6c}.lead{color:#91a9b7;font-size:12px;line-height:1.7;margin:0 0 24px}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #2c4554;background:#2c4554;margin-bottom:27px}.spec-grid>div{background:#102131;padding:13px 13px 10px}.spec-grid small{font-size:9px;letter-spacing:1.1px;color:#7e9cab;display:block;margin-bottom:3px}.spec-grid b{font-size:22px;color:#eaf2f5;font-weight:600}.spec-grid b span{font-size:10px;letter-spacing:.3px;font-weight:500;color:#7895a6}.section-title{border-bottom:1px solid #294253;padding-bottom:10px;margin:24px 0 18px;display:flex;justify-content:space-between;color:#a8c2d0;font-weight:700;letter-spacing:1.7px;font-size:10px}.section-title small{color:#66dabc;font-size:9px;letter-spacing:1px}.control{margin-bottom:20px}.control-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.control-header label{font-size:12px;color:#d3e2e7}.control-header output{font-size:12px;color:#ffbe72;font-variant-numeric:tabular-nums}input[type=range]{accent-color:#eaa451;width:100%;height:3px;display:block;cursor:pointer}.scale{display:flex;justify-content:space-between;font-size:9px;color:#70899b;margin-top:7px;letter-spacing:1px}.control-row,.mode-row{display:flex;gap:7px;margin-bottom:9px}.button-primary{flex:1;background:#edaa5a;color:#13202a;border:0;border-radius:3px;padding:13px 9px;font-size:10px;font-weight:800;letter-spacing:1.5px;transition:background .2s}.button-primary:hover{background:#fbc985}.button-square,.mode-btn{border:1px solid #345063;background:#102436;color:#aac7d4;border-radius:3px}.button-square{width:47px;font-size:23px}.mode-btn{flex:1;padding:10px 7px;font-size:9px;letter-spacing:.6px;white-space:nowrap}.mode-btn:hover,.mode-btn.selected{border-color:#c18c59;color:#ffd2a2;background:#302c2b}.layers{display:flex;flex-direction:column;gap:5px}.layer{background:#101f2d;border:1px solid #1d3546;border-radius:3px;display:flex;align-items:center;gap:9px;padding:9px 9px;min-height:41px;transition:background .2s}.layer:hover{background:#162b3c}.layer input{accent-color:#e5b26f;width:15px;height:15px;margin:0;cursor:pointer}.layer-swatch{width:5px;height:20px;border-radius:1px}.layer-label{min-width:0;flex:1;font-size:11px;color:#bfd2db}.layer-count{font-size:10px;color:#708fa0;font-variant-numeric:tabular-nums}.layer-solo{padding:3px 5px;border:1px solid #2d4757;background:transparent;color:#7e9eb0;border-radius:2px;font-size:8px;letter-spacing:1px}.layer-solo.active{color:#fac18a;border-color:#ae7e4c}.sidebar-note{margin-top:21px;padding:13px;background:#0d2630;border-left:2px solid #558c8b;color:#90b0bd;font-size:11px;line-height:1.6}
.viewer-area{position:relative;flex:1;min-width:0;overflow:hidden;background:#06121e}.viewer-area canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:none}.viewer-area canvas:active{cursor:grabbing}.viewer-glow{pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 52% 43%,transparent 36%,#04101b66 99%)}.hud-top{position:absolute;left:25px;right:25px;top:25px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.hud-id{color:#9dc3cd;font-size:10px;letter-spacing:1.2px}.hud-led,.fps-dot{display:inline-block;width:6px;height:6px;background:#65e4bb;border-radius:50%;margin-right:8px;box-shadow:0 0 10px #65e4bb}.hud-divider{color:#3e6779;margin:0 8px}.view-controls{display:flex;gap:6px;pointer-events:auto}.view-controls button{background:#09202cce;border:1px solid #2c4957;padding:8px 10px;color:#c3dce4;font-size:10px;letter-spacing:.8px;border-radius:3px}.view-controls button:hover{border-color:#deb079}.crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#7dabb73d;font-size:27px;pointer-events:none}.edge-ruler{position:absolute;bottom:100px;right:29px;letter-spacing:1.4px;font-size:9px;color:#52748b;pointer-events:none}.coordinate-widget{position:absolute;bottom:112px;left:26px;width:69px;height:75px;pointer-events:none}.axis-dot{border:1px solid;border-radius:50%;height:21px;width:21px;display:grid;place-items:center;position:absolute;font-size:9px}.axis-y{top:1px;left:26px;color:#74d5b6;border-color:#3c796e}.axis-x{bottom:11px;left:2px;color:#f48e81;border-color:#86524c}.axis-z{bottom:11px;right:2px;color:#74aedc;border-color:#416684}.bottom-hud{height:75px;position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,#081b29ee,#091b29cc);border-top:1px solid #284454;display:flex;align-items:center;gap:21px;padding:0 27px}.hud-block small{display:block;font-size:9px;letter-spacing:1.05px;color:#81a1b1;white-space:nowrap}.hud-block strong{display:block;margin-top:3px;font-size:21px;font-weight:550;color:#eef6f8;font-variant-numeric:tabular-nums;white-space:nowrap}.hud-block strong span{font-size:9px;color:#7c9bad;font-weight:500;letter-spacing:1px}.hud-sep{width:1px;background:#2a4757;height:31px}.hud-spacer{flex:1}.fps{white-space:nowrap;font-size:11px;color:#99c9c3}.fps-dot{width:5px;height:5px;margin-right:4px}.footer{height:29px;flex-shrink:0;background:#091725;border-top:1px solid #253946;display:flex;justify-content:space-between;align-items:center;padding:0 22px;color:#577487;font-size:9px;letter-spacing:1.1px}.selection,.help{position:absolute;z-index:5;background:#0b2231f5;border:1px solid #3b6273;border-radius:4px;box-shadow:0 16px 40px #0008;backdrop-filter:blur(14px)}.selection{right:24px;top:85px;width:min(310px,90%);padding:19px}.selection-eyebrow,.help-title{font-size:10px;letter-spacing:1.4px;color:#e9ad6a;display:flex;justify-content:space-between}.selection h3{font-size:17px;margin:13px 0 10px}.selection p{color:#a5c0ca;font-size:12px;line-height:1.6}.selection button,.help-title button{background:transparent;color:#b9d4de;border:0;font-size:20px;line-height:14px}.help{left:50%;top:50%;width:min(475px,90%);padding:22px;transform:translate(-50%,-50%)}.help p{line-height:2;color:#b6d3df;font-size:12px}.help kbd{display:inline-block;border:1px solid #466476;padding:1px 5px;border-radius:3px;background:#183343}.hidden{display:none!important}.toast{position:absolute;left:50%;bottom:91px;transform:translateX(-50%);background:#0b2639e8;border:1px solid #4c7180;color:#ddf0f1;border-radius:3px;box-shadow:0 10px 28px #0005;padding:9px 15px;font-size:11px;opacity:0;transition:opacity .25s;pointer-events:none}.toast.show{opacity:1}@media(max-width:1100px){.sidebar{width:315px;min-width:315px}.sidebar-scroll{padding:20px}.top-meta{display:none}.bottom-hud{gap:12px;padding:0 18px}.hud-block strong{font-size:17px}.hud-block small{font-size:8px}}@media(max-width:730px){body{overflow:auto}.app-shell{height:auto;min-height:100dvh}.topbar{height:57px}.content{display:flex;flex-direction:column-reverse}.viewer-area{height:56vh;min-height:400px;flex:auto}.sidebar{width:100%;min-width:0;border-right:0}.sidebar-scroll{height:auto}.footer{display:none}.bottom-hud{gap:8px;padding:0 10px;height:64px}.hud-block strong{font-size:14px}.hud-block small{font-size:7px}.hud-sep{display:none}.fps{font-size:9px}.edge-ruler,.coordinate-widget{display:none}.hud-top{top:14px;left:13px;right:13px}.hud-id{font-size:8px}.view-controls button{padding:6px;font-size:8px}}