:root{color-scheme:dark;--ink:#d8e7ec;--muted:#738595;--quiet:#536777;--gold:#dcae75;--cyan:#4dc4d9;--edge:rgba(130,168,190,.17);--panel:#0c1723;--back:#08121b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--back);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:13px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.app{display:flex;flex-direction:column;height:100dvh;min-height:680px;overflow:hidden}.bar{height:58px;flex:none;border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#0b1520;letter-spacing:.12em;font:500 10px 'DM Mono',monospace;gap:16px}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;white-space:nowrap}.brand-symbol{color:var(--gold);font-size:26px;line-height:1}.brand-light{font-size:10px;font-weight:400;color:var(--muted)}.bar-center{color:#a2b3bc;display:flex;align-items:center;gap:12px;white-space:nowrap}.signal{width:6px;height:6px;border-radius:50%;background:#48d8aa;box-shadow:0 0 10px #48d8aa}.separator{color:#4b5866}.bar-right{display:flex;gap:14px;align-items:center}.chip{padding:7px 9px;border:1px solid var(--edge);color:var(--gold)}.version{color:var(--muted)}.layout{min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 356px}.stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 48%,#162938 0%,#0a141f 62%,#070e18 100%)}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%}.stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,15,24,.37) 0%,transparent 26%,transparent 78%,rgba(4,11,19,.5) 100%)}.stage-header{position:absolute;z-index:2;left:36px;top:39px;pointer-events:none}.eyebrow,.little-kicker,.section-label,.slider-title,.scale,.metric-label,.annotation,.render-footer,.footer,.camera-tip,.setup-row label{font-family:'DM Mono',monospace;letter-spacing:.085em}.eyebrow{font-size:10px;color:var(--gold)}.dash{padding:0 5px;color:#627b8a}.stage-header h1{font:800 clamp(48px,6.4vw,94px)/.92 'Barlow Condensed',sans-serif;letter-spacing:.025em;margin:13px 0 10px;color:#f2f5f3}.stage-header h1>span:first-child{font-weight:400;color:#b9c4ca}.h1-dot{color:var(--gold)}.stage-header p{font-size:12px;max-width:330px;letter-spacing:.01em;color:#8d9eac;margin:0}.stage-top-right{position:absolute;z-index:2;right:30px;top:39px;text-align:right;font:500 9px/1.9 'DM Mono',monospace;letter-spacing:.08em;color:#acbfc4}.little-kicker{color:var(--muted);font-size:9px}.quality-line{color:#587484}.stage-bottom{position:absolute;z-index:3;bottom:25px;left:34px;right:30px;display:flex;justify-content:space-between;gap:15px;align-items:center}.camera-tip{font-size:10px;color:#899cac}.tip-icon{font-size:21px;color:var(--gold);vertical-align:middle;margin-right:7px}.mid-dot{color:var(--gold);margin:0 8px}.stage-tools{display:flex;gap:7px}.stage-tools button{background:rgba(10,21,31,.84);color:#c0d0d8;border:1px solid #345267;padding:11px 12px;font:500 10px 'DM Mono',monospace;white-space:nowrap}.stage-tools button:hover{border-color:var(--gold);color:var(--gold)}.annotation{position:absolute;z-index:2;display:flex;flex-direction:column;gap:4px;font-size:9px;pointer-events:none;color:#b6dce7;text-shadow:0 1px 8px #020911;transition:opacity .3s;white-space:nowrap}.annotation::before{content:'';height:1px;width:38px;background:#8ba1a9;position:absolute;left:-48px;top:6px;opacity:.8}.annotation-title{color:#e6bd88}.annotation-description{color:#9bb0ba;font-size:8px}.sidebar{border-left:1px solid var(--edge);background:#0b1722;overflow-y:auto;overscroll-behavior:contain;padding:24px 23px 26px;scrollbar-width:thin;scrollbar-color:#2c4657 transparent}.side-head{display:flex;align-items:center;justify-content:space-between}.side-head h2{font:700 29px 'Barlow Condensed',sans-serif;letter-spacing:.065em;margin:5px 0 2px}.running-tag{font:500 9px 'DM Mono',monospace;color:#75e4c4;border:1px solid #25675d;padding:7px 9px}.running-tag.paused{color:#d3b678;border-color:#695734}.section-label{display:flex;align-items:center;gap:9px;font-size:10px;color:#9faeb6;margin-top:24px;margin-bottom:14px;white-space:nowrap}.section-label>span:first-child{color:var(--gold)}.hline{flex:1;height:1px;background:var(--edge)}.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:7px}.metric{border:1px solid #233746;padding:11px 12px;min-width:0;background:linear-gradient(140deg,rgba(32,54,69,.35),rgba(5,17,26,.4))}.mainmetric{grid-column:1/-1;padding:13px 14px 12px}.metric-label{font-size:9px;color:#8299a6}.metric-data{display:flex;gap:6px;align-items:baseline;margin-top:7px;white-space:nowrap}.metric-data strong{font:600 28px/1 'Barlow Condensed',sans-serif;letter-spacing:.02em;color:#f1f5f3}.mainmetric .metric-data strong{font-size:47px;color:#d7e8ec}.metric-data span{color:var(--muted);font:400 11px 'DM Mono',monospace}.metric-data.heat strong{color:#e8b18a}.mini-bar{height:3px;background:#263845;margin-top:11px}.mini-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3eb0c1,#c6e7f3);transition:width .12s}.setup-row{margin:14px 0}.setup-row label{display:block;font-size:9px;color:#8397a5;margin:0 0 8px}select{width:100%;appearance:none;border:1px solid #2c4352;background:#101f2c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='m3 3 4 4 4-4' stroke='%2383a2ad' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat calc(100% - 11px) center;color:#d0dce1;padding:10px 30px 10px 10px;font:400 11px 'DM Mono',monospace}.slider-control{margin:17px 0}.slider-title{display:flex;justify-content:space-between;align-items:baseline;gap:9px;font-size:9px;color:#a3b4bc}.slider-title output{color:var(--gold);font-size:10px;white-space:nowrap}input[type=range]{width:100%;height:4px;background:#2c4251;margin:13px 0 5px;appearance:none;accent-color:var(--gold);cursor:ew-resize}input[type=range]::-webkit-slider-thumb{appearance:none;background:#e7ba7f;width:12px;height:12px;border:2px solid #0b1722;outline:1px solid #d9a56d;border-radius:50%}.scale{display:flex;justify-content:space-between;color:#637c8c;font-size:8px}.toggles{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:12px 0;display:flex;flex-direction:column;gap:11px}.toggles label{display:flex;align-items:center;gap:10px;font:500 9px 'DM Mono',monospace;letter-spacing:.045em;color:#a2b7bf;cursor:pointer}.toggles input{position:absolute;opacity:0}.switch{display:inline-block;width:26px;height:13px;border-radius:7px;background:#354553;position:relative;transition:background .2s;flex:none}.switch::after{content:'';display:block;position:absolute;width:9px;height:9px;border-radius:50%;left:2px;top:2px;background:#9cabb7;transition:transform .2s}.toggles input:checked+.switch{background:#a17b4e}.toggles input:checked+.switch::after{background:#f5d5a6;transform:translateX(13px)}.toggles input:focus-visible+.switch{outline:2px solid #58c3dd;outline-offset:2px}.actions{display:grid;grid-template-columns:1.2fr 1.2fr .9fr;gap:6px;margin-top:19px}.actions button{font:500 10px 'DM Mono',monospace;color:#e2dee0;border:1px solid #3c5361;background:#192a39;padding:13px 3px;white-space:nowrap}.actions button.primary{background:#d6a66d;border-color:#d6a66d;color:#131d27;font-weight:700}.actions button:hover{filter:brightness(1.16)}.perf-title{margin-top:24px}.render-footer{display:flex;align-items:center;justify-content:space-between;gap:6px;color:#728d9e;font-size:9px}.render-footer span span{color:#c6d6dc}.render-footer select{width:72px;padding:5px 17px 5px 5px;font-size:10px}.footer{height:32px;flex:none;border-top:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 26px;background:#080f17;color:#647a87;font-size:9px;white-space:nowrap}.footer b{font-weight:400;color:#d8a871}@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 330px}.stage-header{left:24px;top:25px}.stage-top-right{right:21px;top:27px}.stage-header h1{font-size:60px}.sidebar{padding:20px 17px}.bar{padding:0 18px}.stage-bottom{left:20px;right:20px}}@media(max-width:730px){.app{height:auto;min-height:100vh;overflow:visible}.layout{display:block}.stage{height:68vh;min-height:480px}.sidebar{border-left:0;border-top:1px solid var(--edge);overflow:visible}.stage-header h1{font-size:60px}.stage-header p{max-width:250px}.stage-top-right{display:none}.stage-bottom{left:16px;right:16px;bottom:17px}.camera-tip{display:none}.bar-center{display:none}.footer{font-size:8px;flex-wrap:wrap;height:auto;min-height:36px;padding:9px 15px}.annotation{display:none}}@media(max-width:380px){.bar-right{display:none}}
