:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:#e7f0f8;background:#091321;font-synthesis:none;--line:#26384a;--muted:#8498ab;--teal:#57dbc9;--base:#111e2d;--bg:#0a1522}
*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit;cursor:pointer;color:inherit;background:#172839;border:1px solid #35495d;border-radius:7px;padding:9px 11px;font-size:11px;font-weight:700;letter-spacing:.045em;transition:background .15s,border-color .15s}button:hover{background:#243b50;border-color:#5e8095}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible{outline:2px solid #58d7c8;outline-offset:3px}
#app{display:flex;min-height:100vh;flex-direction:column}.masthead{height:73px;display:flex;align-items:center;justify-content:space-between;background:#0d1827;border-bottom:1px solid var(--line);padding:0 24px;gap:16px}.logo{display:flex;gap:12px;align-items:center}.logo-icon{width:42px;height:42px;display:grid;place-items:center;background:linear-gradient(135deg,#44bdb2,#23687b);border-radius:10px;font-size:25px;font-weight:900;box-shadow:0 0 20px #2acbc32d;position:relative}.logo-icon span{color:#142d40;font-size:26px;position:absolute;top:-1px;right:8px}.overline,.section-id{color:#54cec0;letter-spacing:.16em;font-size:9px;font-weight:800}.brand{margin-top:3px;font-size:19px;font-weight:800;letter-spacing:.045em}.brand span{color:#94a8bc;font-weight:500}.mast-actions{display:flex;align-items:center;gap:12px}.seed{font-size:10px;letter-spacing:.12em;color:#91a4b9}.seed strong{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:#ecf5f8;padding-left:5px}.live-dot,.mini-live{height:7px;width:7px;border-radius:50%;background:#55dac4;box-shadow:0 0 13px #57dbc9;display:inline-block}.live-text{font-size:10px;font-weight:800;color:#a6d8d2;white-space:nowrap}.quiet{background:transparent}
.body-layout{display:grid;grid-template-columns:280px minmax(440px,1fr) 282px;flex:1;min-height:600px}.side{background:#0e1b29;display:flex;flex-direction:column;min-height:0}.left-side{border-right:1px solid var(--line)}.right-side{border-left:1px solid var(--line)}.panel-top{padding:25px 22px 17px;border-bottom:1px solid var(--line)}.panel-top h2{font-size:19px;line-height:1.2;font-weight:720;letter-spacing:-.035em;margin:12px 0 5px}.panel-top p{font-size:11px;color:var(--muted);margin:0;line-height:1.5}.panel-scroll{padding:19px 22px 25px;overflow:auto}.section-caption{font-size:9px;color:#6b92a7;font-weight:800;letter-spacing:.16em;margin:20px 0 13px;padding-top:14px;border-top:1px solid #253548}.section-caption:first-child{margin-top:0;padding-top:0;border:0}.preset-row{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.preset{padding:9px 5px;font-size:10px;letter-spacing:0}.preset.selected,.plot-tabs button.selected{background:#164b54;border-color:#2c8c8e;color:#76f6dd}.slider-row{display:block;margin:0 0 19px}.slider-row>span{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#a2b5c5;gap:5px}.slider-row b{font-size:10px;color:#e7f8f4;font-weight:700;font-family:ui-monospace,Consolas,monospace;white-space:nowrap}input[type=range]{width:100%;margin:12px 0 0;appearance:none;background:#34475b;height:3px;border-radius:5px;display:block;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;background:#67ddd0;border:3px solid #142e38;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1px #44c4b5}input[type=range]::-moz-range-thumb{background:#67ddd0;border:3px solid #142e38;width:10px;height:10px;border-radius:50%}.mini-note{margin-top:17px;padding:12px;background:#152638;border:1px solid #2b4253;border-radius:7px;font-size:10px;line-height:1.6;color:#94aabb}
.stage-area{background:#0c1725;display:flex;flex-direction:column;min-width:0}.stage-bar{padding:23px 27px 17px;display:flex;justify-content:space-between;align-items:center;gap:8px}.stage-bar h1{font-size:22px;line-height:1.2;margin:8px 0 0;font-weight:700;letter-spacing:-.04em}.stage-stat{text-align:right;border-left:1px solid #344656;padding-left:16px}.stage-stat span{display:block;font-size:9px;color:#8ea6b8;letter-spacing:.13em;font-weight:700}.stage-stat strong{display:block;margin-top:6px;font-size:16px;font-family:ui-monospace,Consolas,monospace;font-weight:600;color:#8ff0e0}
.viewport{min-height:340px;flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 56%,#20334b 0%,#0b1726 65%)}#wheelCanvas{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}#wheelCanvas:active{cursor:grabbing}.viewport-vignette{pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #07111ca8}.stream-label{position:absolute;font-size:10px;font-weight:800;letter-spacing:.1em;border:1px solid #42515d;border-radius:6px;background:#0c1c2bdc;padding:10px;display:flex;gap:9px;align-items:center;backdrop-filter:blur(7px)}.stream-label b{font-family:ui-monospace,Consolas,monospace;letter-spacing:0}.stream-hot{top:13%;left:5%;color:#ffae72;border-left:3px solid #f58b4c}.stream-cold{bottom:19%;left:5%;color:#74b6ff;border-left:3px solid #63a3ff}.scene-tag{position:absolute;top:14px;right:18px;background:#0c1d2abf;border:1px solid #263b4a;border-radius:5px;padding:9px 11px;color:#a8bbca;font-size:9px;letter-spacing:.09em;font-weight:700}.scene-tag .mini-live{width:5px;height:5px;margin-right:5px}.scene-tag small{display:block;color:#6e8599;letter-spacing:0;padding:5px 0 0 13px;font-size:9px;font-weight:400}.temperature-legend{position:absolute;right:20px;bottom:20px;width:210px;border:1px solid #30465c;border-radius:6px;background:#0b1927dd;padding:12px 13px 10px;backdrop-filter:blur(8px)}.legend-text,.legend-bounds{display:flex;justify-content:space-between;gap:7px;font-size:9px;letter-spacing:.09em;color:#b5c8d5;font-weight:700}.legend-text span{color:#829aab;font-size:8px}.legend-bar{height:6px;border-radius:4px;margin:10px 0 8px;background:linear-gradient(90deg,#286bd9,#28b7cf,#69cfaa,#faba53,#ef5238)}.legend-bounds{font-family:ui-monospace,Consolas,monospace;color:#d8ebf1;font-size:10px}.nav-help{position:absolute;bottom:19px;left:22px;letter-spacing:.08em;color:#8b9fae;font-size:9px;font-weight:700}.nav-help span{padding:0 7px;color:#4ba29c}
.playback-bar{padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.playback-controls{display:flex;flex-wrap:wrap;gap:7px}.playback-controls button{padding:9px 10px;font-size:10px;white-space:nowrap}.playback-controls .major-action{background:#1f665f;border-color:#3b9e8f;color:#dffff7}.playback-controls .is-paused{background:#54452b;border-color:#857048}.clock{white-space:nowrap;font-size:9px;color:#86a1ae;letter-spacing:.09em}.clock strong{display:block;text-align:right;margin-top:4px;font-size:13px;color:#d5e4eb;font-family:ui-monospace,Consolas,monospace}.process-footer{display:flex;align-items:center;gap:10px;padding:16px 23px;flex-wrap:wrap}.process-footer b{font-size:10px;color:#76dece;letter-spacing:.06em}.process-footer b.warning{color:#ffc27c}.process-footer span:last-child{margin-left:auto;color:#829aab;font-size:10px}.footer{display:flex;justify-content:space-between;padding:13px 24px;border-top:1px solid var(--line);background:#0a1420;gap:10px;font-size:9px;letter-spacing:.11em;color:#638092;font-weight:700}
.hero-kpi{margin:2px 0 18px;padding:17px 15px;border-radius:9px;border:1px solid #28565b;background:linear-gradient(130deg,#153b40,#122836)}.kpi-label{font-size:9px;color:#a2b5c3;letter-spacing:.08em;font-weight:800}.kpi-label span{float:right;font-size:13px;color:#56ceb9}.hero-value{font-size:32px;font-weight:780;color:#76f1d8;letter-spacing:-.055em;margin:12px 0 3px;font-variant-numeric:tabular-nums}.hero-caption{color:#82aaa8;font-size:10px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.kpi{background:#132433;border:1px solid #2b4050;border-radius:7px;padding:13px 10px;min-height:100px}.kpi strong{display:block;margin-top:16px;font-weight:720;font-size:18px;white-space:nowrap;font-variant-numeric:tabular-nums}.kpi small{display:block;color:#7c94a7;font-size:9px;margin-top:8px}.meter{height:4px;background:#253b43;border-radius:4px;margin-top:12px;overflow:hidden}.meter>div{background:linear-gradient(90deg,#278fbd,#62dac3);height:100%;width:0;transition:width .15s}.plot-card{margin-top:18px;border:1px solid #314354;border-radius:8px;padding:13px 9px;background:#111f2e}.plot-title{display:flex;align-items:center;justify-content:space-between;font-weight:750;font-size:10px;letter-spacing:.08em;padding:1px 3px 10px}.plot-title small{color:#5eccba}.plot-tabs{display:flex;gap:3px}.plot-tabs button{padding:5px 8px;font-size:9px}.plot-card canvas{display:block;width:100%;height:162px}.plot-foot{display:flex;justify-content:space-between;font-size:9px;color:#668095;padding:5px 6px 0}.plot-foot b{color:#91aabb;font-weight:500}.secondary-kpi{margin-top:15px;padding:12px 14px;border:1px solid #324d55;border-radius:7px;display:flex;justify-content:space-between;gap:6px;align-items:center}.secondary-kpi span{font-size:9px;color:#95aab7;letter-spacing:.08em}.secondary-kpi strong{font-size:16px;white-space:nowrap;color:#7cdecd;font-variant-numeric:tabular-nums}.disclaimer{font-size:9px;line-height:1.6;color:#7891a3;margin:12px 4px}
@media(max-width:1250px){.body-layout{grid-template-columns:250px minmax(400px,1fr) 250px}.panel-scroll{padding:16px}.panel-top{padding:21px 16px}.stage-bar{padding:19px}.stage-bar h1{font-size:19px}.playback-bar{align-items:flex-start;flex-direction:column}.clock strong{text-align:left}.masthead{padding:0 15px}}
@media(max-width:1010px){.body-layout{grid-template-columns:240px minmax(0,1fr)}.right-side{grid-column:1/-1;border-top:1px solid var(--line);border-left:0}.right-side .panel-scroll{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.hero-kpi{margin:0}.plot-card{grid-column:2;grid-row:1/3;margin-top:0}.disclaimer{grid-column:1/-1}.stage-area{min-height:720px}.mast-actions .seed{display:none}}
@media(max-width:680px){.body-layout{display:flex;flex-direction:column}.left-side{order:2;border-top:1px solid var(--line)}.stage-area{order:1;min-height:690px}.right-side{order:3}.masthead{height:64px}.brand{font-size:14px}.overline{font-size:8px}.mast-actions{gap:8px}.mast-actions .live-text{display:none}.mast-actions button{font-size:9px;padding:7px}.panel-scroll{overflow:visible}.right-side .panel-scroll{display:block}.right-side .kpi-grid{margin-top:11px}.right-side .plot-card{margin-top:15px}.stage-bar{padding:17px}.stage-bar h1{font-size:18px}.stage-stat{display:none}.viewport{min-height:360px}.scene-tag{right:7px;top:7px;font-size:8px}.stream-label{font-size:9px;padding:7px;left:7px}.temperature-legend{right:8px;bottom:9px;width:190px}.nav-help{left:10px;bottom:10px;max-width:120px;line-height:1.8}.footer{font-size:8px;flex-direction:column}.process-footer span:last-child{margin-left:0}}