:root{--ink:#10171d;--paper:#f3f4ee;--line:#d7ddd7;--lime:#b9f45b;--aqua:#62d8c5;--blue:#6fa8ff;--amber:#ffbf64;--coral:#ff806b;--muted:#607278;--panel:#172228;--white:#f2f7f4;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}button,input,select{font:inherit}main{max-width:1500px;margin:auto;padding:0 36px}.nav{height:72px;display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);font-size:.75rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}.nav .brand{font-size:1.18rem;letter-spacing:-.07em;color:var(--ink);text-decoration:none}.brand span{color:#659620}.nav>a:last-child{margin-left:auto;color:var(--ink);text-underline-offset:4px}.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:56px;align-items:end;padding:48px 0 35px}.kicker{margin:0 0 10px;font-size:.72rem;font-weight:900;letter-spacing:.15em;color:var(--muted)}h1,h2{margin:0;letter-spacing:-.065em;line-height:.98}h1{font-size:clamp(2.8rem,5.7vw,5.9rem);max-width:940px}.intro>p{margin:0 0 8px;max-width:510px;color:#405259;font-size:1.08rem}.workbench{display:grid;grid-template-columns:minmax(420px,.8fr) minmax(560px,1.2fr);background:var(--ink);border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #10171d1a}.control-panel,.result-panel{padding:36px}.control-panel{background:#131d22;border-right:1px solid #314148}.section-head{display:flex;gap:15px;align-items:flex-start}.section-head>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #506269;border-radius:50%;color:var(--lime);font-size:.72rem}.workbench h2{font-size:2.2rem;color:var(--white)}.workbench .kicker{color:var(--lime)}.presets{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 22px}.presets button,.exports button{border:1px solid #45575e;background:#1d2b31;color:#dbe6e4;border-radius:999px;padding:9px 12px;font-size:.78rem;font-weight:800;cursor:pointer}.presets button:hover,.presets button.active{background:var(--lime);border-color:var(--lime);color:var(--ink)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field-grid label{color:#aebdbd;font-size:.78rem;font-weight:800}.field-grid input,.field-grid select{display:block;width:100%;margin-top:6px;border:1px solid #43555c;border-radius:9px;background:#0f181d;color:var(--white);padding:10px 11px;min-height:43px}.field-grid small{display:block;margin-top:4px;color:#7f9294;font-size:.68rem}.control-panel details{margin-top:22px;border-top:1px solid #35464d;padding-top:18px;color:#dce6e4}.control-panel summary{cursor:pointer;font-size:.86rem;font-weight:800}.occupants{display:grid;gap:8px;margin-top:15px}.occupants label{display:grid;grid-template-columns:1fr 100px 43px;align-items:center;gap:8px;color:#aebdbd;font-size:.76rem}.occupants input{width:100%;background:#0f181d;border:1px solid #43555c;border-radius:7px;color:var(--white);padding:7px}.occupants span{color:#718487;font-size:.68rem}.result-panel{background:linear-gradient(145deg,#182329,#111a1f);color:var(--white);position:relative}.result-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.result-top h2{font-size:clamp(2.4rem,4vw,4.6rem)}.result-panel.over .result-top h2{color:var(--coral)}.result-panel.tight .result-top h2{color:var(--amber)}.gauge{text-align:right;min-width:105px}.gauge strong{display:block;color:var(--lime);font-size:2.2rem;line-height:1;letter-spacing:-.07em}.gauge span{color:#8fa2a4;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.status-note{min-height:48px;max-width:610px;color:#aebdbd}.vessel{height:118px;margin:27px 0 16px;position:relative;background:#0a1115;border:1px solid #45575e;border-radius:12px;overflow:hidden}.segments{height:100%;display:flex;transition:.25s}.segment{height:100%;min-width:2px;position:relative;transition:width .25s}.segment span{position:absolute;left:8px;bottom:8px;color:#11191d;font-size:.67rem;font-weight:900;writing-mode:vertical-rl;transform:rotate(180deg);max-height:90px;overflow:hidden}.window-line{position:absolute;top:0;bottom:0;right:0;border-right:2px dashed #eff5ef}.window-line span{position:absolute;right:7px;top:6px;color:#e5efeb;font-size:.65rem;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em}.legend{display:flex;flex-wrap:wrap;gap:8px 15px}.legend span{font-size:.69rem;color:#9fb0b1}.legend i{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:2px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:25px}.metrics>div{padding:15px;background:#1d2a30;border:1px solid #34464d;border-radius:11px}.metrics span,.metrics small{display:block;color:#8fa2a4;font-size:.68rem}.metrics strong{display:block;margin:6px 0;color:var(--white);font-size:1.55rem;letter-spacing:-.05em}.exports{display:flex;gap:9px;margin-top:15px}.exports button{border-color:#65825d;color:var(--lime)}.exports button:hover{background:#293e2d}.boundary{margin:19px 0 0;border-top:1px solid #34464d;padding-top:15px;color:#8fa2a4;font-size:.75rem}.boundary strong{color:#dce6e4}.explain{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:95px 7%}.explain h2{font-size:clamp(2.5rem,4.5vw,4.7rem)}.explain>div:last-child{color:#405259;font-size:1.12rem}.explain>div:last-child p:first-child{margin-top:0}@media(max-width:1000px){main{padding:0 22px}.intro{grid-template-columns:1fr;gap:20px}.workbench{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid #314148}.explain{padding:75px 0;grid-template-columns:1fr;gap:30px}}@media(max-width:600px){main{padding:0 14px}.nav{height:64px}.nav>span{display:none}.intro{padding:28px 2px 24px}.intro h1{font-size:2.75rem}.intro>p{font-size:1rem}.control-panel,.result-panel{padding:23px 18px}.workbench{border-radius:18px}.field-grid{grid-template-columns:1fr}.result-top{display:block}.gauge{text-align:left;margin-top:14px}.metrics{grid-template-columns:1fr}.occupants label{grid-template-columns:1fr 92px}.occupants span{display:none}.explain{padding:68px 2px}.explain h2{font-size:2.7rem}}
