
:root{color-scheme:dark;font-family:'DM Sans',Arial,sans-serif;background:#081321;color:#e9f2fb;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-width:640px;min-height:100%;background:#081321}body{overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #33dfcd;outline-offset:3px}.app{min-height:100vh;display:flex;flex-direction:column}.topbar{height:73px;background:#0e1c2c;display:flex;align-items:center;gap:23px;padding:0 26px;border-bottom:1px solid #28415a;flex-shrink:0}.brand{display:flex;gap:13px;align-items:center;min-width:182px}.brand-mark{display:grid;place-items:center;position:relative;background:#0d3949;border:1px solid #1a999d;width:37px;height:37px;border-radius:8px;color:#8ff8e4;font-weight:800;font-size:20px}.brand-cross{position:absolute;color:#ffc36c;font-size:13px;bottom:-3px;right:0}.brand strong{display:block;font-size:17px;letter-spacing:-.5px}.brand small{font-size:8px;letter-spacing:2px;color:#55bec5}.header-sep{width:1px;height:24px;background:#294156}.crumb{font-size:10px;letter-spacing:1px;font-weight:700;color:#7592aa;flex:1}.crumb span{color:#44e0c6;margin:0 8px}.header-right{display:flex;gap:12px;align-items:center}.seed,.renderer-badge{border:1px solid #304a5c;background:#14283a;border-radius:5px;padding:7px 10px;font-size:9px;letter-spacing:1.1px;color:#95adbd}.renderer-badge{border-color:#20645e;color:#6ee9d2}.workbench{display:grid;grid-template-columns:294px minmax(500px,1fr) 278px;min-height:calc(100vh - 114px);flex:1}.panel{background:#101f30;padding:25px 22px}.controls{border-right:1px solid #293c50}.inspector{border-left:1px solid #293c50;padding:25px 21px}.panel-eyebrow,.section-title{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#75a0b3;display:flex;align-items:center;justify-content:space-between}.dot{width:6px;height:6px;border-radius:50%;background:#35dfcb;box-shadow:0 0 11px #35dfcb}.dot.orange{background:#ffaa58;box-shadow:0 0 10px #ffaa58}h1{font-family:'Space Grotesk',sans-serif;font-size:30px;line-height:1.07;margin:27px 0 14px;letter-spacing:-1.5px;font-weight:700}h1 em{font-style:normal;color:#2fe2c7}.lede{font-size:12px;line-height:1.7;color:#90a9bd;margin:0 0 25px}.transport{display:flex;gap:9px;margin-bottom:33px}.transport button{border-radius:7px;height:43px;border:1px solid #38556b;background:#1b3347;color:#bcd3e0;font-weight:700}.transport .primary{background:linear-gradient(115deg,#1ec7ae,#44e9cb);color:#05242b;border:0;flex:1;display:flex;gap:13px;justify-content:center;align-items:center}.primary span:first-child{font-size:19px}.transport .iconbutton{width:43px;font-size:24px}.section-title{margin:0 0 23px}.section-title span{font-size:9px;letter-spacing:0;color:#496c80}.slidergroup{margin:0 0 22px}.labelrow{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:12px}.labelrow label{font-size:12px;color:#d4e3eb;font-weight:600}.labelrow output{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;color:#4fe4d1}.slider{width:100%;appearance:none;background:linear-gradient(90deg,#24cbb4 0% 50%,#344c60 50% 100%);height:4px;border-radius:4px;display:block;cursor:pointer;margin:0 0 10px}.slider::-webkit-slider-thumb{appearance:none;height:14px;width:14px;border:3px solid #89ffee;background:#0b2533;border-radius:50%;box-shadow:0 0 0 3px #1d535d}.slider::-moz-range-thumb{height:10px;width:10px;border:3px solid #89ffee;background:#0b2533;border-radius:50%}.ends{display:flex;justify-content:space-between;color:#53758b;font-size:9px;font-weight:700;letter-spacing:.3px}.section-title.second{margin:34px 0 18px}.switch-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#c4d7e1;margin:15px 0;cursor:pointer}.switch-row input{position:absolute;opacity:0;width:1px;height:1px}.switch{border-radius:11px;width:29px;height:17px;background:#3b5367;position:relative;flex-shrink:0;transition:.15s}.switch:after{content:'';position:absolute;left:3px;top:3px;background:#9cb3bf;border-radius:50%;height:11px;width:11px;transition:.15s}.switch-row input:checked + .switch{background:#168b87}.switch-row input:checked + .switch:after{transform:translateX(12px);background:#68ffe2}.about-box{display:flex;gap:12px;border:1px solid #29475a;background:#162b3f;padding:12px;margin-top:29px;border-radius:7px}.icon-bulb{font-size:20px;color:#f9b969}.about-box p{margin:0;color:#85a5ba;font-size:10px;line-height:1.7}.viewport-wrap{display:flex;flex-direction:column;min-width:0;background:#0b1827}.viewport-top{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;border-bottom:1px solid #193349;background:#102133}.live-tag,.status{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#5ce6ca}.pulsedot{display:inline-block;height:7px;width:7px;background:#3efad8;border-radius:50%;box-shadow:0 0 10px #32f3d0;margin-right:8px}.thin{opacity:.35;margin:0 12px}.status{color:#9fb3c2;letter-spacing:1.3px}.viewport{position:relative;flex:1;min-height:490px;overflow:hidden;background:radial-gradient(ellipse at 58% 43%,#18384e 0%,#0e2235 45%,#071423 84%)}.viewport:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#05101d29,transparent 25%,transparent 68%,#05101d80)}#stage{width:100%;height:100%;position:absolute;inset:0;display:block;touch-action:none;cursor:grab}#stage:active{cursor:grabbing}.scene-title{pointer-events:none;position:absolute;top:23px;left:25px;z-index:2}.mini-kicker{font-size:9px;font-weight:800;letter-spacing:2px;color:#47b9bc}.mini-kicker span{color:#587f92;margin-left:13px}.scene-name{font-family:'Space Grotesk',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.7px;margin-top:6px}.scene-sub{font-size:11px;color:#8ea9bb;margin-top:5px}.camera-controls{position:absolute;bottom:22px;left:23px;display:flex;align-items:center;gap:5px;z-index:4;padding:7px;border:1px solid #294e62;background:#0c1c2bbf;border-radius:8px;backdrop-filter:blur(8px)}.view-title{font-weight:800;font-size:9px;letter-spacing:1.2px;color:#7ca7bc;margin:0 13px 0 5px}.cam{font-size:10px;letter-spacing:.5px;font-weight:800;color:#9bbbc7;background:transparent;border:1px solid transparent;border-radius:4px;padding:8px 9px}.cam.active{background:#2a555d;color:#aaffec;border-color:#337f82}.cam:hover{color:#fff}.metricbar{height:116px;display:grid;grid-template-columns:repeat(4,1fr);background:#102235;box-shadow:inset 0 1px #274458;padding:20px 8px;flex-shrink:0}.metric{padding:4px 18px;border-right:1px solid #29485d;min-width:0}.metric:last-child{border-right:0}.metric-label{font-size:9px;letter-spacing:1.1px;font-weight:800;color:#7195aa;display:flex;justify-content:space-between;gap:4px;white-space:nowrap}.metric-label span{color:#4a7d94;font-size:13px}.metric-val{display:flex;align-items:baseline;gap:5px;margin-top:8px;font-family:'Space Grotesk',sans-serif;white-space:nowrap}.metric-val>span{font-size:25px;letter-spacing:-1px;font-weight:700}.metric-val small{font-size:10px;color:#7ba6bd;font-weight:700}.tiny-graph{height:2px;background:#28465a;margin-top:9px;overflow:hidden;border-radius:2px}.tiny-graph i{height:2px;width:0;background:#31edc9;display:block;transition:width .2s}.tiny-graph.orange i{background:#fea45a}.inspector-top{display:flex;align-items:center;justify-content:space-between;margin:27px 0 18px}.part-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid #237e83;border-radius:10px;background:#163944;color:#6af8da;font-size:25px}.inspector-ref{font-size:9px;color:#66859c;letter-spacing:1.2px}.inspector h2{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.6px;line-height:1.25;margin:0 0 10px}.part-description{color:#92acc0;font-size:12px;line-height:1.68;margin:0;min-height:125px}.info-divider{height:1px;background:#294053;margin:23px 0}.inspector .section-title{margin-bottom:18px}.tanks{display:flex;align-items:center;justify-content:center;gap:26px}.tank{text-align:center}.tank-glass{height:96px;width:61px;border:2px solid #466c7d;border-top:5px solid #64808e;position:relative;background:#0d263a;overflow:hidden;border-radius:2px 2px 5px 5px;margin-bottom:9px}.tank-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,#43b9db,#17618a);transition:height .2s}.tank-fill:before{content:'';height:3px;position:absolute;top:0;left:0;right:0;background:#b8f3ff;box-shadow:0 0 12px #7adfff}.tank-fill.delivery{background:linear-gradient(180deg,#38d5ca,#1b8ca7)}.tickmarks{position:absolute;left:5px;top:10px;bottom:10px;width:9px;opacity:.7;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 10px,#bee4e85c 11px,#bee4e85c 12px)}.tank strong{display:block;font-family:'Space Grotesk';font-size:15px}.tank small{font-size:9px;color:#678ca1;letter-spacing:1.6px;font-weight:800}.water-arrow{font-size:22px;color:#51daca;margin-top:-22px}.statrow{display:flex;align-items:center;justify-content:space-between;margin:14px 0;font-size:11px;color:#91adbd}.statrow strong{color:#e5f4f8;font-size:12px;font-weight:700;white-space:nowrap}.formula{background:#142c3c;border:1px solid #2b5264;padding:14px;border-radius:6px}.formula>div{font-size:10px;color:#80aab8}.formula strong{display:block;font-family:'Space Grotesk';color:#7df1dc;font-size:22px;margin:8px 0}.formula small{font-size:10px;color:#668aa2}.disclaimer{font-size:10px;color:#638297;line-height:1.7;margin-top:24px}.labels-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}.component-label{position:absolute;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#caf5f3;background:#09283ccc;border:1px solid #278889a1;white-space:nowrap;padding:6px 8px;border-radius:4px;transform:translate(-50%,-130%);text-shadow:0 1px 4px #020b17;box-shadow:0 3px 20px #071421aa}.component-label:after{content:'';position:absolute;left:50%;top:100%;height:15px;width:1px;background:#3ca4a8aa}.scene-error{position:absolute;inset:27% 12%;border:1px solid #ed8c75;background:#181f30e8;color:#fbd2c0;z-index:7;padding:24px;line-height:1.65;border-radius:9px}.scene-error[hidden]{display:none}footer{height:41px;background:#081626;border-top:1px solid #294154;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;font-size:9px;color:#587b90;letter-spacing:1px;font-weight:700}footer button{border:1px solid #346b6a;background:#153d44;color:#80e5d4;font-size:9px;letter-spacing:1px;padding:6px 9px;border-radius:4px}
@media(max-width:1250px){.workbench{grid-template-columns:260px minmax(450px,1fr) 244px}.panel{padding:20px 16px}.controls h1{font-size:28px}.metric{padding:4px 10px}.metric-label{font-size:8px}.metric-val>span{font-size:21px}.header-right .seed{display:none}}@media(max-width:1050px){.workbench{grid-template-columns:270px minmax(360px,1fr)}.inspector{grid-column:1 / -1;border-left:0;border-top:1px solid #2b475a;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 23px}.inspector>.panel-eyebrow,.inspector>.inspector-top,.inspector h2,.inspector .part-description{grid-column:1}.inspector>.info-divider{display:none}.inspector>.section-title{margin:10px 0}.inspector>.tanks{grid-column:2;grid-row:2 / span 3}.inspector>.statrow{grid-column:3}.inspector>.formula{grid-column:2}.inspector>.disclaimer{grid-column:3}}@media(max-width:740px){.workbench{display:flex;flex-direction:column}.viewport-wrap{order:-1;min-height:600px}.viewport{min-height:470px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}.controls .panel-eyebrow,.controls h1,.controls .lede,.controls .transport,.controls .section-title,.controls .about-box{grid-column:1 / -1}.controls .slidergroup{grid-column:auto}.inspector{display:block}.inspector .part-description{min-height:auto}.header-sep,.crumb{display:none}.topbar{padding:0 14px}.metricbar{height:99px;padding:16px 0}.metric-label{font-size:7px}.metric-val>span{font-size:17px}footer span:nth-child(2){display:none}}
