:root{color-scheme:dark;--ink:#082e35;--mint:#b7ddd3;--cream:#f3e8ca;--gold:#e8bd69}*{box-sizing:border-box}body{margin:0;background:#082e35;color:var(--cream);font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{color:inherit;background:#ffffff09;border:1px solid #ffffff29;padding:10px 15px;border-radius:6px;cursor:pointer}button:hover{background:#ffffff19;border-color:var(--gold)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:wait}a{color:inherit}header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;border-bottom:1px solid #ffffff20}.brand{text-decoration:none;display:flex;gap:13px;align-items:center;font:19px Georgia,serif;letter-spacing:3px}.sigil{color:var(--gold);font-size:36px}.brand small{display:block;font:8px/2.2 sans-serif;letter-spacing:2.1px;color:var(--mint)}nav{display:flex;gap:8px}nav button{border-color:transparent}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;max-width:1700px;margin:auto}.ocean{position:relative;min-height:650px;height:calc(100vh - 138px);overflow:hidden;background:#428e9d}.ocean>canvas{display:block;width:100%;height:100%;touch-action:none}.location{position:absolute;left:30px;top:26px;pointer-events:none;text-shadow:0 1px 18px #002c31aa}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:var(--mint)}h1{font:clamp(28px,3.3vw,49px)/1.05 Georgia,serif;margin:12px 0;color:#fff5dc;letter-spacing:-1px}.hud{position:absolute;top:28px;right:26px;display:flex;gap:22px;padding:12px 18px;border:1px solid #d6eed350;background:#07343a99;border-radius:9px;backdrop-filter:blur(10px)}.hud span{display:block;font-size:8px;letter-spacing:1.2px;color:var(--mint)}.hud strong{display:block;font:24px/1.4 Georgia,serif}#Text{position:absolute;left:30px;top:188px;margin:0;font-size:13px;max-width:70%;text-shadow:0 1px 5px #000}.Warning{color:#ffe2a1}.boat-hint{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);padding:7px 14px;background:#082e35be;border-radius:30px;text-align:center;font-size:11px;max-width:85%;width:max-content}.controls{position:absolute;bottom:24px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.controls button{pointer-events:auto;touch-action:none;user-select:none;background:#082e35c9;box-shadow:0 6px 20px #04282f35}.controls button:active,.controls button.held{background:#e8bd69;color:#082e35}.dpad{display:grid;grid-template-columns:48px 48px 48px;gap:5px}.dpad button{font-size:24px;padding:4px;height:45px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-row:2;grid-column:1}.dpad button:nth-child(3){grid-row:2;grid-column:2}.dpad button:nth-child(4){grid-row:2;grid-column:3}.dive{height:70px;min-width:120px;font:18px Georgia,serif;letter-spacing:2px}.dive small{display:block;font:7px/2 sans-serif;letter-spacing:1px}aside{padding:24px;background:#0a3037;border-left:1px solid #ffffff16}.chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.tiny{font-size:11px;color:var(--gold)}.chart{position:relative;width:100%;aspect-ratio:1;border:1px solid #b9ab7e88;border-radius:5px;overflow:hidden}.chart img,.chart canvas{position:absolute;width:100%;height:100%;inset:0}.chart-label{position:absolute;bottom:14px;left:0;width:100%;text-align:center;font-size:7px;letter-spacing:2px;color:#dfd0a7}.legend{display:flex;justify-content:space-between;font-size:9px;color:#d1c6a7;margin-top:11px}.legend span:first-child{color:var(--gold)}.sonar{margin-top:28px;padding:18px 0;border-top:1px solid #ffffff21;border-bottom:1px solid #ffffff21}.sonar strong{display:block;font:26px/1.7 Georgia,serif;color:var(--gold)}.sonar p,.notes p{font-size:12px;color:#acc9c7;line-height:1.75;margin:4px 0}.notes{margin-top:25px}.notes p{margin-top:12px}.record{border-top:1px solid #ffffff21;margin-top:24px;padding-top:18px;display:flex;justify-content:space-between;align-items:center}.record span{font-size:8px;letter-spacing:1.6px;color:var(--mint)}.record strong{font:27px Georgia,serif}footer{display:flex;justify-content:space-between;gap:15px;padding:15px 30px;font-size:10px;color:#94b5b4;border-top:1px solid #ffffff20}dialog{padding:0;max-width:760px;width:calc(100% - 30px);color:var(--cream);background:#0b343b;border:1px solid #c7bd8866;border-radius:12px;box-shadow:0 25px 120px #0008}dialog::backdrop{background:#001b22bb;backdrop-filter:blur(5px)}#welcome[open]{display:grid;grid-template-columns:280px 1fr}.modal-art{background:linear-gradient(0deg,#0b343b44,#0b343b00),url('chart.webp') center/cover;min-height:500px}.modal-content{padding:34px}h2{font:44px/1.03 Georgia,serif;letter-spacing:-1px;margin:14px 0 22px}.modal-content p{color:#bad0cb;font-size:13px}.modal-content label{display:block;margin:24px 0 8px;font-size:11px;color:var(--mint)}select{width:100%;padding:12px;border:1px solid #97b1a75c;border-radius:5px;background:#092a30;color:var(--cream)}.primary{display:block;width:100%;margin:14px 0 18px;background:var(--gold);border-color:var(--gold);color:#123b3d;font-weight:650;text-align:left;padding:13px 17px}.primary:hover{background:#f2d294}.primary span{float:right}.modal-content small{color:#8cafac;font-size:10px}#help,#result{max-width:510px}#ready{font-size:10px;margin-bottom:0}body.paused .ocean:after{content:'PAUSED · Press P or Resume';position:absolute;inset:48% 0 auto;text-align:center;background:#082e35d9;padding:18px;letter-spacing:2px;pointer-events:none} @media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 280px}aside{padding:18px}.hud{top:150px;left:28px;right:auto}.location{top:22px}#Text{top:245px}.ocean{min-height:640px}}@media(max-width:700px){header{height:72px;padding:0 14px}.brand{font-size:15px;gap:7px;letter-spacing:2px}.brand small{font-size:6px;letter-spacing:1px}.sigil{font-size:24px}nav{gap:0}nav button{font-size:10px;padding:8px}nav #new{display:none}main{display:block}.ocean{height:67vh;min-height:530px}h1{font-size:31px}.location{left:18px;top:18px}.hud{top:112px;left:18px;gap:20px;padding:8px 14px}.hud strong{font-size:21px}#Text{top:194px;left:18px;font-size:11px}.controls{left:16px;right:16px;bottom:18px}.boat-hint{bottom:120px;font-size:10px}.dive{min-width:105px}aside{display:grid;grid-template-columns:145px 1fr;gap:9px 18px;padding:18px}.chart-head{grid-column:1/-1;margin:0}.chart{grid-column:1;grid-row:2/5}.legend{display:none}.sonar{margin:0;padding:0 0 5px;border-top:0}.sonar .eyebrow{font-size:7px;letter-spacing:1px}.sonar strong{font-size:20px}.sonar p{font-size:10px}.notes{margin:0}.notes .eyebrow,.notes p:last-child{display:none}.notes p{font-size:10px;margin:0}.record{margin:0;padding-top:7px}.record span{font-size:7px;letter-spacing:.5px}.record strong{font-size:19px}footer{font-size:8px;display:block;padding:12px 18px}footer span{display:block;margin:3px 0}#welcome[open]{grid-template-columns:1fr;max-width:430px}.modal-art{min-height:90px;background-position:center 35%}.modal-content{padding:24px}h2{font-size:35px;margin:10px 0 15px}.modal-content label{margin-top:16px}.modal-content p{font-size:12px}#welcome{max-height:94vh}.eyebrow{font-size:8px;letter-spacing:1.5px}}

.brake{font-size:11px;align-self:end;margin-left:auto;margin-right:12px}.brake small{display:block;font-size:6px;letter-spacing:1px}@media(max-width:700px){.brake{padding:8px;margin-right:8px}.dpad{grid-template-columns:40px 40px 40px;gap:4px}.dive{min-width:92px}}