:root{color-scheme:dark;--bg:#111f27;--panel:#15242d;--panel2:#192c34;--line:#2b4048;--muted:#8fa3a8;--ink:#e6e9df;--gold:#d5ad6a;--aqua:#78bec4;--dark:#0e1c24;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--dark);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{cursor:default;opacity:.47}
#app{width:100%;min-height:100vh}.topbar{height:61px;display:flex;align-items:center;justify-content:space-between;background:#122129;border-bottom:1px solid #294049;padding:0 24px 0 27px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;font-size:13px;letter-spacing:.15em}.brand-mark{color:#11242a;display:grid;place-items:center;background:var(--gold);font-size:30px;font-weight:500;width:32px;height:32px;border-radius:3px;line-height:1}.brand-accent{color:var(--gold)}.brand small{display:block;color:#738b94;font-size:8px;letter-spacing:.18em;margin-top:3px;font-weight:600}.top-meta{display:flex;align-items:center;gap:12px;color:#9bb2b9;font-size:9px;font-weight:800;letter-spacing:.16em}.meta-dot,.pulse{height:6px;width:6px;border-radius:50%;background:#83c8a8;display:inline-block;box-shadow:0 0 9px #83c8a8}.top-divider{height:14px;width:1px;background:#3b535b;margin:0 6px}
.workspace{display:grid;grid-template-columns:310px minmax(420px,1fr) 316px;min-height:calc(100vh - 61px);max-height:calc(100vh - 61px)}.sidebar{background:var(--panel);min-width:0;overflow:auto;scrollbar-color:#36545e transparent;scrollbar-width:thin}.sidebar-left{padding:27px 24px 14px;border-right:1px solid #31434c}.sidebar-right{padding:27px 23px 14px;border-left:1px solid #31434c}.eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:800;letter-spacing:.13em;color:#a9c0c6;white-space:nowrap}.gold-line{height:2px;width:20px;display:inline-block;background:var(--gold);flex-shrink:0}.chapter{margin-left:auto;color:#58717a;font-size:9px}.sidebar h1{font-weight:750;font-size:clamp(40px,4vw,57px);line-height:1.02;letter-spacing:-.064em;margin:31px 0 12px}.slash{color:var(--gold);font-weight:300}.edition{color:var(--gold);font-weight:380;letter-spacing:-.052em}.subtitle{color:#bbccca;font-family:Georgia,serif;font-size:16px;font-style:italic;margin:4px 0 20px}.heritage-tag{color:#e7c491;background:#2b302c;border:1px solid #504a37;padding:9px 10px;font-size:9px;font-weight:800;letter-spacing:.12em;text-align:center}.heritage-tag span{margin:0 4px;color:#7f805e}.panel-section{margin-top:28px}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3a4b4f;padding-bottom:11px;margin-bottom:16px}.section-heading h2{margin:0;color:#dbe4e0;font-size:10px;letter-spacing:.17em}.section-number{font-size:11px;font-weight:700;color:#7f989c}.section-explainer{font-size:11px;line-height:1.65;color:#96aeb3;margin:-5px 0 17px}.operation-card{border:1px solid #30464c;background:#172932;padding:12px 12px 11px;margin-bottom:9px}.op-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;letter-spacing:.08em;font-size:10px;gap:5px}.op-icon{font-size:16px;color:var(--gold);margin-right:5px}.status-closed,.status-open,.status-moving{font-size:9px;letter-spacing:.07em}.status-closed{color:#9faeb0}.status-open{color:#89d8b8}.status-moving{color:#f3c784}.control-button{width:100%;padding:10px 12px;margin-top:12px;text-align:left;border:1px solid #52666b;background:#20343d;color:#eff3e9;font-size:11px;font-weight:650;display:flex;justify-content:space-between}.control-button:hover{border-color:var(--gold);background:#29434d}.control-button span{color:#c3d3d0}.valve-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:13px 0}.small-control{border:1px solid #3d545b;background:#20323b;color:#e4eae4;padding:11px 7px 10px;display:flex;align-items:flex-start;flex-direction:column;text-align:left;gap:7px}.small-control:hover{border-color:#b7a47c}.tiny-label{color:#7c9ca2;font-weight:750;letter-spacing:.1em;font-size:8px}.small-control strong{font-size:10px;letter-spacing:.05em}.valve-state{color:#9baeb1;font-size:9px}.valve-state.active{color:#a7e7c9}.primary-outline{width:100%;border:1px solid var(--gold);background:#242d2d;color:#e9c990;font-weight:750;font-size:11px;padding:13px;text-align:center;margin-top:1px}.primary-outline span{font-size:16px;margin-right:7px}.primary-outline:hover{background:#39382f}.automation{margin-top:24px}.gold-button{width:100%;border:0;background:#d5ac68;color:#19252a;font-weight:850;font-size:11px;letter-spacing:.02em;padding:14px 8px}.gold-button:hover{background:#f0cb8b}.gold-button.running{background:#4e6e6b;color:#fff}.two-buttons{display:flex;gap:9px;margin-top:10px}.two-buttons button{width:50%;background:#20313a;border:1px solid #4c6168;color:#cfdbd7;font-size:11px;font-weight:650;padding:11px 7px}.two-buttons button:hover{border-color:var(--gold)}.slider-line{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:5px}.slider-line label{color:#a8b8b9;font-size:10px}.slider-line output{font-size:12px;color:var(--gold);font-weight:750}input[type=range]{accent-color:var(--gold);width:100%;height:19px;margin:5px 0}.speed-range{display:flex;justify-content:space-between;color:#677d82;font-weight:700;font-size:8px;letter-spacing:.08em}.side-foot,.right-foot{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.085em;color:#6e8589;padding-top:22px;margin-top:23px;border-top:1px solid #2a3e45}
.main-visual{position:relative;overflow:hidden;min-width:0;background:radial-gradient(ellipse at 50% 45%,#2e474a,#142831 72%)}#viewport{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#viewport:active{cursor:grabbing}.visual-top{position:absolute;z-index:3;top:0;left:0;right:0;padding:25px 27px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.scene-kicker{font-size:10px;color:#b2c9c9;letter-spacing:.115em;font-weight:800;display:flex;align-items:center;gap:9px;text-shadow:0 2px 7px #101d22}.scene-separator{color:#7d969d}.help-button{border:1px solid #667d80;background:#19333dbe;color:#e8efec;padding:10px 13px;font-size:9px;font-weight:800;letter-spacing:.06em;pointer-events:auto}.help-button:hover{border-color:var(--gold)}.scene-hud{position:absolute;pointer-events:none}.top-left{left:27px;top:85px;background:#14242ccc;border-left:2px solid var(--gold);padding:14px 15px;backdrop-filter:blur(9px)}.hud-caption{font-size:9px;color:#a8b8b9;letter-spacing:.14em;font-weight:850}.hud-stage{font-size:15px;margin-top:5px;font-weight:800;color:#f5e7d0;letter-spacing:.04em}.hud-small{font-size:10px;color:#a4bdba;margin-top:5px}.camera-guide{bottom:87px;left:27px;display:flex;align-items:center;gap:10px;color:#ddeae4}.guide-icon{font-size:27px;color:var(--gold);font-weight:300}.camera-guide div{display:flex;flex-direction:column;gap:5px}.camera-guide b{font-size:9px;letter-spacing:.12em}.camera-guide span{font-size:8px;color:#b7c7c6;letter-spacing:.055em}.scene-badge{position:absolute;right:26px;bottom:91px;padding:9px 10px;background:#1b3039ce;color:#c2d7da;font-size:8px;letter-spacing:.09em;font-weight:750}.scene-badge span{color:var(--gold);margin:0 4px}.compass{bottom:141px;right:31px;display:flex;align-items:center;flex-direction:column;gap:2px;color:#ddede7;font-size:9px}.compass div{font-size:23px;color:#d9ae70}.visual-bottom{position:absolute;bottom:0;left:0;right:0;height:55px;background:#12252ce6;border-top:1px solid #506368;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 28px;color:#8fa8ac;font-size:9px;font-weight:700;letter-spacing:.10em}.visual-bottom b{color:#e7d0a1}.separator{color:var(--gold);margin:0 7px}.graphics-error{position:absolute;top:40%;left:10%;width:80%;background:#6b2525;color:white;padding:24px;z-index:4;border:1px solid #ea8c8c}
.data-hero{margin-top:26px}.data-label{color:#a0b5b7;font-size:9px;letter-spacing:.13em;font-weight:800}.big-measure{display:flex;align-items:baseline;gap:10px;color:#f0f5e9;font-variant-numeric:tabular-nums;font-weight:600;margin-top:11px}.big-measure>span:first-child{font-size:58px;line-height:1.1;letter-spacing:-.05em}.unit{font-size:19px;color:var(--gold)}.level-track{height:9px;width:100%;background:#294048;margin-top:20px;position:relative}.level-fill{height:100%;width:0%;background:linear-gradient(90deg,#448c9c,#a1cbd0);transition:width .1s linear}.level-indicator{position:absolute;height:17px;width:3px;top:-4px;left:0%;background:#f2d7a9;box-shadow:0 0 8px #dab783}.level-endpoints{display:flex;justify-content:space-between;color:#7e979b;font-size:8px;font-weight:750;margin-top:10px;letter-spacing:.06em}.data-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #304850;border-bottom:1px solid #304850;margin:27px 0 24px}.metric{padding:16px 0 14px}.metric:nth-child(odd){border-right:1px solid #344952}.metric:nth-child(even){padding-left:15px}.metric:nth-child(-n+2){border-bottom:1px solid #344952}.metric>span{display:block;color:#8fa7ab;font-size:8px;letter-spacing:.07em;line-height:1.5;font-weight:800}.metric div{margin-top:8px;display:flex;align-items:baseline;gap:6px}.metric strong{font-size:24px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.metric small{color:var(--gold);font-size:11px}.chart-heading{display:flex;justify-content:space-between;align-items:center}.chart-heading h2{font-size:10px;letter-spacing:.09em;margin:0}.chart-heading span{color:#8bafb2;font-size:8px;font-weight:800}.chart-section canvas{display:block;width:100%;height:110px;margin-top:11px}.chart-legend{font-size:8px;display:flex;align-items:center;gap:8px;color:#b6ccc6;font-weight:800;letter-spacing:.05em}.legend-mark{height:3px;width:19px;background:#81c7d3}.chart-legend span:last-child{margin-left:auto;color:#7d969b;font-weight:700}.info-section{margin-top:30px}.event-log{height:76px;overflow:auto;padding:2px 0;color:#aebfc0;font-size:10px;line-height:1.6;scrollbar-width:thin}.log-entry{padding:3px 0;border-bottom:1px solid #293e44}.log-entry:first-child{color:#cfe3d7}.knowledge-card{padding:17px 17px 13px;background:#223039;border:1px solid #40515a;margin-top:22px}.knowledge-label{display:flex;justify-content:space-between;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:.1em}.knowledge-card h3{font-family:Georgia,serif;font-size:20px;font-weight:400;margin:11px 0}.knowledge-card p{color:#a3b9bb;font-size:11px;line-height:1.68;margin:0}.knowledge-card button{background:transparent;border:0;border-top:1px solid #45575b;width:100%;margin-top:16px;padding:13px 0 2px;color:#e2c58f;font-size:9px;letter-spacing:.07em;font-weight:850;text-align:left;display:flex;justify-content:space-between}.right-foot{margin-top:18px}.right-foot span:first-child{color:#98cbbb}
dialog{border:1px solid #8c784f;background:#172932;color:#e4eee8;width:min(610px,calc(100vw - 30px));max-height:86vh;padding:0;box-shadow:0 24px 100px #000b}dialog::backdrop{background:#03121acc;backdrop-filter:blur(6px)}.dialog-inner{padding:25px 32px 32px;overflow:auto;max-height:86vh}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading>button{border:1px solid #4f666a;background:#233b43;color:#f2e3c2;font-size:25px;line-height:25px;width:34px;height:34px}.dialog-inner h2{font-size:39px;letter-spacing:-.055em;margin:15px 0 10px}.dialog-inner h3{color:var(--gold);font-size:13px;letter-spacing:.06em;margin-top:25px}.dialog-inner p,.dialog-inner li{font-size:13px;line-height:1.8;color:#b8cbc8}.dialog-inner ol{padding-left:20px}.dialog-inner code,.dialog-inner kbd{color:#ebd2a5;background:#263d42;padding:3px}.dialog-inner>.gold-button{margin-top:16px}
@media(min-width:1600px){.workspace{grid-template-columns:335px minmax(500px,1fr) 345px}.sidebar-left,.sidebar-right{padding-left:30px;padding-right:30px}}
@media(max-width:1180px){.workspace{grid-template-columns:265px minmax(310px,1fr) 265px}.sidebar-left,.sidebar-right{padding:21px 14px}.sidebar h1{font-size:45px}.topbar{padding:0 15px}.eyebrow{font-size:8px}.brand small{font-size:7px}}
@media(max-width:850px){.workspace{grid-template-columns:minmax(0,1fr) 285px;max-height:none}.sidebar-left{grid-column:1/3;grid-row:2;border-right:0;border-top:1px solid #30464c;display:grid;grid-template-columns:minmax(190px,.8fr) minmax(235px,1.4fr) minmax(200px,1fr);gap:16px;align-items:start}.sidebar-left>.eyebrow,.sidebar-left>h1,.sidebar-left>.subtitle,.sidebar-left>.heritage-tag{grid-column:1}.sidebar-left>.eyebrow{grid-row:1}.sidebar-left h1{grid-row:2;margin:4px 0}.sidebar-left>.subtitle{grid-row:3}.sidebar-left>.heritage-tag{grid-row:4}.sidebar-left>.panel-section{margin-top:0;grid-row:1/5}.sidebar-left>.panel-section:first-of-type{grid-column:2}.sidebar-left>.automation{grid-column:3}.side-foot{display:none}.sidebar-right{grid-column:2;grid-row:1}.main-visual{grid-column:1;grid-row:1;height:min(75vh,750px);min-height:540px}.visual-bottom{font-size:7px;padding:0 12px}.top-meta{font-size:8px}.sidebar-left .panel-section{margin-bottom:8px}}
@media(max-width:620px){.topbar{height:54px}.brand{font-size:11px}.top-meta{font-size:7px}.top-meta>span:last-child,.top-divider{display:none}.workspace{display:flex;flex-direction:column;max-height:none}.main-visual{order:1;height:67vh;min-height:440px}.sidebar-right{order:3;border-left:0}.sidebar-left{order:2;display:block;padding:25px 22px}.sidebar-left>.panel-section{margin-top:24px}.sidebar-right{padding:22px}.scene-kicker{font-size:8px}.visual-top{padding:13px}.top-left{left:13px;top:60px}.scene-badge{bottom:74px;right:12px;font-size:7px}.camera-guide{left:12px;bottom:80px}.camera-guide span{font-size:7px}.visual-bottom{height:52px;flex-wrap:wrap;align-content:center;gap:4px}.visual-bottom>span{width:100%}.compass{display:none}.sidebar-left h1{font-size:52px;margin:20px 0}.big-measure>span:first-child{font-size:48px}.data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.graphics-error{left:5%;width:90%}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}