:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#e6eee9;background:#0e1b25;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #83d6d6;outline-offset:3px}button:disabled{opacity:.4}a{color:inherit;text-decoration:none}
.app-shell{max-width:1820px;margin:0 auto;min-height:100vh}.topbar{height:85px;display:flex;align-items:center;justify-content:space-between;padding:0 3.1%;border-bottom:1px solid #263840}.identity{display:flex;align-items:center;gap:13px}.logomark{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #6baaaa;color:#e0e9d6;font-weight:800;font-size:26px;letter-spacing:-.06em}.waterbar{position:absolute;bottom:5px;left:9px;width:27px;height:2px;background:#7bbdc4}.identity strong{display:block;letter-spacing:.10em;font-size:13px;font-weight:800}.muted-slash{color:#779f9e}.identity small{display:block;font-size:9px;letter-spacing:.18em;color:#748c91;margin-top:7px}.top-right{display:flex;align-items:center;gap:16px}.mark,.top-badge{font-size:10px;letter-spacing:.14em;font-weight:650}.mark{color:#99b6b3}.mark i{display:inline-block;height:6px;width:6px;background:#74bdb3;border-radius:50%;margin-right:6px}.top-badge{border:1px solid #344752;padding:11px 15px;color:#b5c8c9}.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:stretch}.viewport-section{padding:39px 30px 30px min(4vw,64px);min-width:0}.scene-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:25px}.eyebrow{font-size:10px;letter-spacing:.20em;font-weight:750;color:#7cb9b9}.accent-line{display:inline-block;vertical-align:middle;background:#ba9d72;width:26px;height:1px;margin:0 7px}.scene-header h1{font-size:clamp(36px,4vw,59px);line-height:1.10;letter-spacing:-.065em;margin:14px 0 13px;font-weight:760}.scene-header h1 em{font-family:Georgia,serif;font-weight:400;color:#88c4c0;letter-spacing:-.065em}.scene-header p{font-size:13px;color:#90a6aa;margin:0;line-height:1.6}.edition{display:flex;flex-direction:column;align-items:flex-end;gap:7px;justify-content:end;color:#6b8990;letter-spacing:.14em;font-size:9px;white-space:nowrap}.edition span:first-child{font-family:Georgia,serif;font-size:26px;color:#b8d0ce;letter-spacing:0}.viewport-frame{position:relative;height:clamp(390px,48vw,640px);max-height:66vh;min-height:390px;background:#a8c2c4;overflow:hidden;border:1px solid #314e58}#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene.dragging{cursor:grabbing}.render-error{position:absolute;z-index:15;top:35%;left:10%;right:10%;padding:25px;background:#742f37;color:white}.scene-gradient{pointer-events:none;position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,32,39,.27),transparent 23%,transparent 60%,rgba(8,26,30,.55));}.scene-status{position:absolute;top:19px;left:19px;background:rgba(15,35,40,.88);border:1px solid rgba(188,211,205,.25);padding:12px 14px;display:flex;align-items:center;gap:9px;color:#e4f2eb;font-size:10px;letter-spacing:.12em;font-weight:750}.live-dot{width:7px;height:7px;border-radius:50%;background:#8cddac;box-shadow:0 0 10px #64ccaa}.live-dot.halted{background:#ce8b69;box-shadow:none}.scene-separator{color:#658080}.object-label{position:absolute;pointer-events:none;transform:translate(-50%,-100%);background:rgba(19,42,45,.90);color:#f1eee0;border-left:2px solid #80c7c1;padding:7px 9px;font-size:9px;white-space:nowrap;letter-spacing:.08em;font-weight:800;line-height:1.3;box-shadow:0 7px 16px #0b141633}.object-label small{display:block;color:#95b9b2;letter-spacing:.16em;font-size:7px;margin-top:3px}.object-label:after{content:"";position:absolute;left:50%;height:14px;width:1px;top:100%;background:#cee3d6}.camera-toolbar{position:absolute;top:17px;right:17px;display:flex;align-items:center;gap:4px;background:rgba(15,33,38,.86);padding:5px}.viewport-button{background:transparent;border:0;color:#d2e2db;width:34px;height:34px;display:grid;place-items:center;font-size:18px}.viewport-button:hover,.viewport-button.active{background:#426b6d}.viewport-button svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.65;fill:none;stroke-linecap:round;stroke-linejoin:round}.toolbar-divider{width:1px;height:22px;background:#4b686c;margin:0 3px}.viewport-instructions{position:absolute;bottom:22px;left:20px;font-size:10px;color:#e5eeeb;letter-spacing:.12em;font-weight:700}.viewport-instructions b{color:#96b6b1;margin:0 8px}.pointer-icon{font-size:15px;margin-right:6px}.corner-coordinate{position:absolute;bottom:22px;right:20px;display:flex;flex-direction:column;text-align:right;gap:5px;font-size:9px;letter-spacing:.12em;font-weight:700;color:#d8e8e3}.corner-coordinate span{font-size:8px;color:#9db6b5}
.telemetry{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#172a34;border:1px solid #2b3f46;border-top:0}.telemetry-card{padding:24px 19px 18px;min-height:120px;border-right:1px solid #34464d}.telemetry-card:last-child{border-right:0}.metric-label{font-size:10px;letter-spacing:.14em;font-weight:750;color:#9baeb3}.metric-number{margin:9px 0 6px;display:flex;gap:6px;align-items:baseline;font-family:Georgia,serif;font-size:34px;color:#f2f3e8;letter-spacing:-.045em;line-height:1}.metric-number small{font:600 12px Inter,"Segoe UI",sans-serif;color:#7dbcbf;letter-spacing:0}.meter{margin-top:14px;height:3px;background:#3b4a50}.meter>div{height:100%;background:#85c5c1;transition:width .25s}.metric-sub{font-size:10px;color:#85999e;margin-top:12px}.explain-strip{display:flex;gap:13px;padding:20px 5px 13px;align-items:flex-start}.circle-info{flex:none;width:20px;height:20px;border:1px solid #73918d;border-radius:50%;display:grid;place-items:center;color:#8cd0c8;font-size:12px;font-family:Georgia,serif}.explain-strip p{margin:0;line-height:1.8;font-size:11px;color:#819a9e}.explain-strip strong{color:#b7cbca}
.control-panel{border-left:1px solid #30444b;background:#14252f;padding:32px 27px 26px;min-width:0}.panel-head{display:flex;align-items:flex-end;justify-content:space-between;padding-bottom:23px}.panel-head h2{font-size:24px;letter-spacing:-.055em;margin:8px 0 0}.panel-version{font-size:10px;color:#869fa2;letter-spacing:.09em}.run-controls{display:flex;gap:8px}.start-button,.icon-control{height:47px;background:#76bcb9;color:#12313b;border:0;font-size:11px;letter-spacing:.12em;font-weight:800}.start-button{display:flex;flex:1;align-items:center;justify-content:center;gap:10px}.start-button:hover{background:#98d9d4}.start-button span:first-child{font-size:17px}.icon-control{width:48px;background:#253b45;color:#e3e9e2;font-size:23px}.icon-control:hover{background:#315562}.flow-state{border:1px solid #34505a;border-left:2px solid #81bfaa;margin:19px 0 25px;padding:14px 15px 13px;display:flex;flex-direction:column;gap:6px;background:#1a3039}.state-name{color:#91a9aa;font-size:9px;letter-spacing:.16em;font-weight:750}.flow-state strong{color:#9dd9b4;font-size:12px;letter-spacing:.11em}.flow-state strong[data-status="NO FLOW"],.flow-state strong[data-status="LOW POWER"]{color:#e3ae7a}.flow-state strong[data-status="PAUSED"]{color:#b8c5bd}.state-details{font-size:10px;color:#92a9ae}.control-group{padding:3px 0 9px}.group-title{display:flex;align-items:center;gap:12px;margin:0 0 20px}.group-title>span:first-child{font-size:10px;color:#6baead;letter-spacing:.13em;font-weight:800}.group-title h3{font-size:12px;margin:0;letter-spacing:.045em;white-space:nowrap}.divider-line{height:1px;background:#334951;flex:1}.input-row{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;gap:8px}.input-row label{font-size:11px;color:#c1d3d0}.input-row output{font-variant-numeric:tabular-nums;color:#e9eadc;font-size:12px;font-weight:800}.unit{color:#7e9da1;font-size:10px}.control-group input[type=range]{width:100%;height:17px;background:transparent;margin:0 0 13px;appearance:none;-webkit-appearance:none;cursor:pointer}.control-group input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#84bfbc var(--range-value,50%),#385158 var(--range-value,50%));border-radius:0}.control-group input[type=range]::-moz-range-track{height:4px;background:#385158}.control-group input[type=range]::-moz-range-progress{height:4px;background:#84bfbc}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:13px;width:13px;border:3px solid #ecf4e8;background:#7ebbb8;border-radius:50%;margin-top:-4.5px;box-shadow:0 0 0 2px #27424b}.control-group input[type=range]::-moz-range-thumb{height:9px;width:9px;border:3px solid #eef4e6;background:#7ebbb8;border-radius:50%}.range-ends{display:flex;justify-content:space-between;color:#70898d;font-size:9px;letter-spacing:.10em;margin:-3px 0 25px;font-weight:650}.vessel-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:7px}.vessel-dot.blue{background:#70bfc6}.vessel-dot.rust{background:#d89477}.scenario-group{margin:3px 0 25px}.scenario-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.scenario{height:36px;background:#21343e;border:1px solid #344c56;color:#a6bfc0;font-weight:800;font-size:9px;letter-spacing:.045em}.scenario:hover,.scenario.selected{background:#d3e1d8;border-color:#d3e1d8;color:#1b3b43}.chart-section{border-top:1px solid #334751;padding-top:19px;margin-bottom:20px}.chart-header{display:flex;justify-content:space-between;align-items:flex-end}.chart-header>div{display:flex;flex-direction:column;gap:6px}.chart-header strong{font-size:12px}.chart-header>span{font-size:10px;color:#9ab5b7}#power-chart{width:100%;height:115px;display:block;margin-top:13px}.chart-key{display:flex;justify-content:space-between;color:#849fa2;font-size:9px;letter-spacing:.08em;font-weight:750}.chart-key i{display:inline-block;width:11px;height:2px;background:#7cc5c8;vertical-align:middle;margin-right:5px}.stats-grid{border-top:1px solid #344953;border-bottom:1px solid #344953;display:grid;grid-template-columns:1fr 1fr;row-gap:21px;padding:23px 0}.stats-grid>div{display:flex;flex-direction:column;gap:8px}.stats-grid span{color:#779299;font-size:9px;letter-spacing:.08em;font-weight:700}.stats-grid strong{font-family:Georgia,serif;font-size:19px;font-weight:500;color:#d9e8df;font-variant-numeric:tabular-nums}.stats-grid strong span{font:inherit;color:inherit;letter-spacing:0}.advanced{margin-top:20px;border-bottom:1px solid #2c454c;padding-bottom:12px;color:#98b4b5}.advanced summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.15em;font-weight:750}.advanced summary::-webkit-details-marker{display:none}.advanced p{font-size:11px;line-height:1.65}.advanced[open] summary span{transform:rotate(45deg)}.panel-footer{display:flex;justify-content:space-between;gap:10px;margin-top:25px;color:#68888e;font-size:9px;letter-spacing:.06em;font-weight:650}.site-footer{padding:20px 3.1%;border-top:1px solid #30434a;display:flex;justify-content:space-between;gap:20px;color:#77989b;font-size:9px;letter-spacing:.12em;font-weight:700}.site-footer a{color:#a4c5c4}.site-footer a:hover{text-decoration:underline}
@media(max-width:1190px){.layout{grid-template-columns:minmax(0,1fr) 324px}.control-panel{padding:30px 20px}.viewport-section{padding:28px 19px}.viewport-frame{height:500px}.metric-number{font-size:27px}.telemetry-card{padding:20px 11px}.metric-label{font-size:9px}.corner-coordinate span{display:none}}
@media(max-width:920px){.layout{grid-template-columns:1fr}.control-panel{border-left:0;border-top:1px solid #3b555b;padding:30px 5%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}.panel-head,.run-controls,.flow-state,.scenario-group,.chart-section,.stats-grid,.advanced,.panel-footer{grid-column:1/-1}.control-group{grid-column:auto}.viewport-section{padding:26px 4% 25px}.viewport-frame{max-height:none;height:clamp(420px,65vh,600px)}.control-panel .panel-head{margin-bottom:2px}}
@media(max-width:620px){.topbar{height:68px;padding:0 4%}.identity strong{font-size:11px}.identity small{font-size:7px}.top-badge,.mark{display:none}.scene-header{padding-right:5px}.scene-header h1{font-size:39px}.scene-header p{font-size:11px;max-width:285px}.edition{font-size:8px}.edition span:first-child{font-size:23px}.viewport-frame{height:480px;min-height:400px}.scene-status{left:9px;top:9px;padding:10px;font-size:8px}.camera-toolbar{right:9px;top:46px;gap:0;padding:3px}.viewport-button{height:30px;width:30px}.viewport-instructions{font-size:8px;bottom:14px;left:10px}.viewport-instructions b{margin:0 3px}.corner-coordinate{display:none}.object-label{font-size:7px}.telemetry{grid-template-columns:1fr 1fr}.telemetry-card:nth-child(2){border-right:0}.telemetry-card:nth-child(-n+2){border-bottom:1px solid #34464d}.telemetry-card{min-height:100px;padding:18px}.metric-number{font-size:30px}.control-panel{display:block;padding:29px 6%}.site-footer{flex-direction:column;gap:9px}.panel-head,.run-controls,.flow-state,.scenario-group,.chart-section,.stats-grid,.advanced,.panel-footer{grid-column:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}