:root{color-scheme:dark;--bg:#06111c;--panel:rgba(5,16,27,.88);--edge:rgba(150,194,208,.15);--muted:#7f98a9;--white:#e9f0ee;--sea:#52e8c7;--amber:#ffa477;--heading:'Space Grotesk',system-ui,sans-serif;--body:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;min-height:560px;font-family:var(--body)}body{background:var(--bg);color:var(--white);overflow:hidden}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--sea);outline-offset:3px}
#viewport{display:block;width:100%;height:100%;touch-action:none;cursor:grab;background:linear-gradient(155deg,#284b56,#071b2b 60%,#030b14)}#viewport:active{cursor:grabbing}.canvas-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(2,10,19,.67) 0%,transparent 30%,transparent 75%,rgba(2,11,20,.58)),linear-gradient(0deg,rgba(2,11,19,.8),transparent 26%,transparent 75%,rgba(3,12,20,.35))}.grid-overlay{position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:linear-gradient(rgba(174,235,238,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(174,235,238,.1) 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(0deg,transparent 28%,#000 100%)}
.topbar{height:81px;position:absolute;z-index:10;inset:0 0 auto;display:flex;align-items:center;padding:0 39px 0 36px;border-bottom:1px solid var(--edge);background:linear-gradient(180deg,rgba(5,16,25,.92),rgba(5,16,25,.5));justify-content:space-between}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:45px;height:45px;border:1.5px solid var(--sea);border-radius:50%;display:grid;place-items:center;position:relative;color:var(--white);font:bold 26px var(--heading);letter-spacing:-6px;padding-right:6px}.brand-mark span{color:var(--sea)}.brand-lines{display:flex;flex-direction:column;gap:2px}.brand-lines strong{font:700 17px var(--heading);letter-spacing:.095em}.brand-lines strong small{color:var(--sea);font-size:12px}.brand-lines>span{font-size:9px;letter-spacing:.18em;color:#89a9b8}.header-center{font-size:10px;letter-spacing:.18em;color:#b8d1d8;display:flex;align-items:center;gap:12px}.header-center b{font-size:9px;color:#5e7785;margin-left:15px;font-weight:600}.live-dot,.signal{display:inline-block;background:var(--sea);width:6px;height:6px;border-radius:50%;box-shadow:0 0 12px var(--sea)}.top-action{color:#c9d7da;border:1px solid rgba(160,206,214,.27);background:rgba(18,41,53,.35);padding:12px 16px;font-size:10px;letter-spacing:.13em;font-weight:700}.top-action span{font-size:15px;padding-right:9px;color:var(--sea)}.top-action:hover{border-color:var(--sea)}
.left-rail{position:absolute;z-index:5;left:0;top:81px;bottom:86px;width:332px;padding:43px 30px 18px 38px;background:linear-gradient(90deg,rgba(3,15,25,.82),rgba(3,15,25,.45) 76%,transparent);display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:thin}.eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:.19em;color:#8ca8b6}.eyebrow span{color:var(--sea);font-size:9px;margin-left:6px}.left-rail h1{font-family:var(--heading);letter-spacing:-.07em;font-size:clamp(41px,4vw,66px);line-height:.98;font-weight:600;margin:34px 0 20px}.left-rail h1 em{color:var(--sea);font-style:normal}.tagline{font-size:12px;line-height:1.85;color:#9bb4c1;max-width:259px;margin:0}.main-divider,.panel-rule{height:1px;background:var(--edge);margin:27px 0}.section-label{color:#b7cbd2;font-size:9px;letter-spacing:.16em;font-weight:700;display:flex;justify-content:space-between;gap:10px;margin:0 0 12px}.section-label span{color:#56868d;font-weight:500}.view-list{display:flex;flex-direction:column}.view-btn{width:100%;text-align:left;border:0;border-bottom:1px solid rgba(150,194,208,.11);background:transparent;color:#9eb7c3;padding:13px 4px;display:grid;grid-template-columns:27px 1fr 15px;align-items:center;gap:9px;font-size:9px;letter-spacing:.075em}.view-btn:hover,.view-btn.active{color:var(--sea)}.view-btn.active{background:linear-gradient(90deg,rgba(38,224,182,.09),transparent);border-left:2px solid var(--sea);padding-left:8px}.view-number{font:700 10px var(--heading);color:#5e7d8b}.view-btn.active .view-number{color:var(--sea)}.chev{font-size:16px;color:#5e7d8b}.dimension-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}.dimension-grid>div{display:flex;flex-direction:column;gap:3px}.dimension-grid strong{font:600 27px var(--heading);letter-spacing:-.05em}.dimension-grid strong span{font:500 10px var(--body);color:var(--sea);letter-spacing:.06em}.dimension-grid small{font-size:8px;letter-spacing:.11em;color:#7e9eac}.rail-footer{margin-top:auto;padding-top:24px;font-size:8px;letter-spacing:.12em;color:#56717d;display:flex;flex-wrap:wrap;gap:6px 12px}.rail-footer span{color:#455d69}
.right-rail{position:absolute;z-index:8;right:0;top:81px;bottom:86px;width:334px;background:rgba(5,17,27,.9);border-left:1px solid var(--edge);padding:25px 26px 27px 26px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1d4b54 transparent}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.panel-title h2{font:600 22px var(--heading);letter-spacing:-.04em;margin:5px 0 0}.panel-title h2 span{font-size:16px;color:var(--sea)}.icon-btn{color:#9ab7bf;background:none;border:1px solid var(--edge);width:26px;height:26px}.system-status{display:flex;gap:12px;align-items:center;padding:14px 12px;background:rgba(35,209,172,.075);border:1px solid rgba(65,234,195,.22);margin-bottom:28px}.status-icon{font-size:23px;color:var(--sea)}.system-status>div{display:flex;flex-direction:column;gap:5px}.system-status strong{font-size:10px;letter-spacing:.12em}.system-status small{color:#8db1b6;font-size:8px;letter-spacing:.13em}.tiny-metric{font:600 9px var(--heading);margin-left:auto;color:#68a49f}.slider-field{margin:20px 0 24px}.slider-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.slider-row label,.switch-row label{font-size:10px;letter-spacing:.10em;color:#b3c7cd;font-weight:600}.slider-row b{color:var(--sea);font:600 16px var(--heading)}.slider-row b small{font:500 10px var(--body);color:#86a2af}.slider-field input{width:100%;height:4px;appearance:none;background:linear-gradient(90deg,var(--sea) var(--fill,50%),#29414c var(--fill,50%));border-radius:2px;cursor:pointer}.slider-field input::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:var(--sea);box-shadow:0 0 0 4px rgba(82,232,199,.13)}.slider-field input::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--sea)}.panel-rule{margin:24px 0}.switch-row{display:flex;justify-content:space-between;align-items:center;margin:17px 0}.switch{appearance:none;width:31px;height:16px;background:#2a414f;border:1px solid #39515e;border-radius:18px;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}.switch:after{content:'';position:absolute;left:2px;top:2px;background:#8da5ae;width:10px;height:10px;border-radius:50%;transition:transform .2s}.switch:checked{background:#206d66;border-color:var(--sea)}.switch:checked:after{transform:translateX(15px);background:var(--sea)}.switch.warning:checked{border-color:var(--amber);background:#774334}.switch.warning:checked:after{background:var(--amber)}.segment{display:flex;border:1px solid #2d4654;padding:3px;margin:16px 0 18px}.segment button{flex:1;border:0;background:transparent;color:#7e9ca9;padding:11px 0;font-size:9px;font-weight:700;letter-spacing:.1em}.segment button.active{background:#2b6d68;color:#d2fff2}.segment button:hover{color:#fff}select{appearance:none;width:100%;border:1px solid #385361;border-radius:0;padding:12px;background:rgba(12,33,43,.95);color:#bed4d5;font-size:9px;letter-spacing:.1em;outline:none}.panel-buttons{display:flex;gap:8px;margin-top:11px}.panel-buttons button{height:40px;font-size:9px;font-weight:700;letter-spacing:.08em}.primary-btn{flex:1;background:var(--sea);border:1px solid var(--sea);color:#0b292b}.primary-btn:hover{background:#b9ffe9}.secondary-btn{padding:0 15px;border:1px solid #365463;color:#a6c2c7;background:#142b38}.secondary-btn:hover{border-color:#b1d3d1}
.bottom-bar{position:absolute;z-index:9;bottom:0;left:0;right:0;min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 34px;border-top:1px solid var(--edge);background:rgba(4,14,24,.97)}.telemetry{display:flex;align-items:stretch;gap:0}.telemetric{min-width:175px;padding:0 28px;border-left:1px solid var(--edge);display:flex;flex-direction:column;justify-content:center;gap:6px}.telemetric:first-child{padding-left:0;border:0}.telemetric small{font-size:9px;letter-spacing:.13em;color:#7194a1}.telemetric strong{font:600 25px var(--heading);letter-spacing:-.025em}.telemetric strong span{font-size:11px;letter-spacing:.035em;color:#8daeb8}.telemetric.primary strong{color:var(--sea)}.build-meta{display:flex;align-items:center;gap:18px;color:#7e9ba6;font-size:9px;letter-spacing:.1em}.build-meta span{white-space:nowrap}.build-meta button{background:none;border:1px solid rgba(150,194,208,.25);padding:10px;color:#cbdce0;font-size:9px;font-weight:700;letter-spacing:.05em;white-space:nowrap}.build-meta button:hover{border-color:var(--sea)}.signal{width:5px;height:5px;margin-right:5px}
.floating-hint{position:absolute;z-index:4;left:calc(50% - 195px);bottom:120px;border:1px solid rgba(115,200,206,.24);background:rgba(6,23,33,.64);backdrop-filter:blur(5px);padding:12px 16px;display:flex;gap:11px;align-items:center;pointer-events:none}.hint-glyph{color:var(--sea);font-size:22px}.floating-hint b,.floating-hint small{display:block;letter-spacing:.12em}.floating-hint b{font-size:9px;color:#c8ebe4}.floating-hint small{font-size:8px;color:#8faab8;margin-top:3px}.inspector{position:absolute;z-index:13;left:350px;bottom:160px;width:285px;background:rgba(5,22,31,.96);border:1px solid rgba(82,232,199,.4);box-shadow:0 12px 60px #01090d99;padding:20px 22px}.inspector[hidden]{display:none}.inspector-header{font-size:9px;letter-spacing:.15em;color:var(--sea);display:flex;justify-content:space-between}.inspector-header span{color:#7d9ba5}.inspector h3{font:600 23px var(--heading);letter-spacing:-.04em;margin:22px 0 5px}.inspector p{font-size:11px;line-height:1.7;color:#a6bac2}.inspector #inspect-subtitle{color:var(--sea);font-size:10px;letter-spacing:.03em}.inspector #btn-inspect-focus{background:transparent;border:1px solid #568986;color:#b8f5e6;padding:12px;margin-top:8px;width:100%;font-size:9px;letter-spacing:.08em}.inspector #btn-inspect-focus:hover{background:#173f3e}.inspector #inspector-close{position:absolute;right:9px;top:8px;font-size:20px;background:none;border:0;color:#a4bfc5}
#toast{position:absolute;bottom:115px;right:360px;z-index:30;color:#ccfff4;font-size:11px;letter-spacing:.06em;pointer-events:none;transition:opacity .3s}#loading{position:absolute;inset:0;z-index:40;background:#06131d;display:flex;flex-direction:column;gap:18px;align-items:center;justify-content:center;transition:opacity .7s,visibility .7s}#loading.ready{opacity:0;visibility:hidden;pointer-events:none}.loading-symbol{font:600 96px var(--heading);letter-spacing:-.2em;padding-right:24px;color:#e9faf1}.loading-symbol span{color:var(--sea)}#loading>strong{font-size:11px;letter-spacing:.22em}#loading>small{font-size:9px;letter-spacing:.15em;color:#6c9caa}.loading-line{width:220px;height:2px;background:#173d46;overflow:hidden}.loading-line span{display:block;width:42%;height:100%;background:var(--sea);animation:load 1.4s ease-in-out infinite alternate}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
.right-rail.collapsed{width:286px;bottom:auto;height:80px;overflow:hidden}.right-rail.collapsed .panel-title{margin:0}.right-rail.collapsed .panel-title h2{font-size:19px}.right-rail.collapsed .panel-title .eyebrow{font-size:9px}
@media(max-width:1400px){.telemetric{min-width:142px;padding:0 16px}.build-meta{gap:9px}.left-rail{width:298px;padding-left:27px}.right-rail{width:306px}.left-rail h1{font-size:52px}.inspector{left:300px}}
@media(max-width:1050px){.header-center{display:none}.left-rail{width:250px;padding:28px 15px 18px 20px}.left-rail h1{font-size:45px}.tagline{font-size:11px}.dimension-grid strong{font-size:22px}.right-rail{width:270px;padding:22px 17px}.telemetric{min-width:115px;padding:0 10px}.telemetric strong{font-size:19px}.build-meta{font-size:8px}.build-meta span:nth-child(2){display:none}.inspector{left:260px}}
@media(max-width:760px){body{overflow:auto}html,body,#app{min-height:720px}.topbar{height:66px;padding:0 13px}.brand-lines strong{font-size:14px}.brand-lines>span{font-size:7px}.brand-mark{width:34px;height:34px;font-size:21px}.top-action{font-size:0;padding:8px 10px}.top-action span{font-size:17px;padding:0}.left-rail{top:66px;bottom:auto;height:230px;max-width:calc(100% - 12px);width:100%;padding:18px 15px;background:linear-gradient(180deg,rgba(4,16,24,.9),transparent);pointer-events:none}.left-rail h1{font-size:43px;line-height:1;margin:14px 0}.left-rail h1 br{display:none}.left-rail h1 em{margin-left:7px}.left-rail .tagline,.left-rail .main-divider,.left-rail .section-label,.left-rail .view-list,.left-rail .dimension-grid,.left-rail .rail-footer{display:none}.right-rail{top:auto;bottom:68px;right:10px;width:min(320px,calc(100% - 20px));max-height:49%;padding:17px;box-shadow:0 0 30px #0008}.right-rail.collapsed{width:220px;height:63px}.right-rail .panel-title{margin-bottom:15px}.right-rail .slider-field{margin:12px 0 17px}.right-rail .panel-rule{margin:17px 0}.bottom-bar{min-height:68px;padding:0 10px}.telemetry{justify-content:space-between;width:100%}.telemetric{min-width:0;flex:1;padding:0 5px}.telemetric small{font-size:7px}.telemetric strong{font-size:17px}.telemetric strong span{font-size:8px}.telemetric:nth-child(4){display:none}.build-meta{display:none}.floating-hint{left:10px;bottom:80px;padding:8px 10px}.floating-hint small{font-size:7px}.inspector{bottom:80px;left:10px;width:min(285px,calc(100% - 30px))}#toast{right:10px;bottom:75px}}