:root{font-family:system-ui,-apple-system,"Arial",sans-serif;color:#edfcff;background:#04314d;color-scheme:dark;font-size:16px}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#086a82,transparent 65%),linear-gradient(140deg,#103956,#061f39);min-height:100svh;line-height:1.5}
button,input{font:inherit}button{border:1px solid #83c9d688;border-radius:16px;padding:10px 14px;min-height:48px;min-width:48px;background:#164d69;color:#fff;cursor:pointer;box-shadow:0 3px 0 #001b35}
button:active{transform:translateY(2px);box-shadow:0 1px 0 #001b35}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #fff2a2;outline-offset:3px}
button.primary{background:#8cf3df;color:#093c4c;font-weight:750;border-color:#c6fff0}button:hover:not(:disabled){filter:brightness(1.08)}
#study{width:min(100%,480px);margin:auto;padding:max(12px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom))}
.study-label{font-size:10px;letter-spacing:.06em;margin:0 0 10px;color:#d1e8ef;overflow-wrap:anywhere}header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}h1{font-size:32px;line-height:1.15;margin:0}h2{font-size:22px;margin:0}.eyebrow{margin:0;color:#bce9f2;font-size:14px}header button{background:#103e5a;font-size:14px}
.hud{display:flex;justify-content:space-between;gap:8px;padding:10px 16px;background:#072e49;border:1px solid #5ba6bd66;border-radius:18px 18px 0 0;font-weight:650}
.sea{position:relative;width:100%;aspect-ratio:400/620;border:1px solid #75becb66;border-top:0;overflow:hidden;border-radius:0 0 26px 26px;background:#074362 url('./assets/sea-study.svg') center/cover;box-shadow:0 18px 36px #00162944,inset 0 0 30px #29bad414}
#canvas-mount{width:100%;height:100%}canvas{display:block;width:100%;height:100%;touch-action:none}.status{min-height:1.5em;margin:10px 0;color:#d7faff}
.aim-label{display:block;margin-top:10px;font-weight:600}#angle{width:100%;min-height:44px;accent-color:#7fecdc}.actions{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px}.actions #cancel{grid-column:1/-1}.settings{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}.settings label{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px}.settings input{width:22px;height:22px;accent-color:#8cf3df}
.result{position:fixed;inset:auto max(12px,calc((100vw - 480px)/2 + 16px)) max(12px,env(safe-area-inset-bottom));z-index:3;padding:16px;border-radius:24px;background:#f0fffc;color:#083b51;box-shadow:0 12px 60px #0008;border:2px solid #a5f2dc;display:grid;grid-template-columns:80px 1fr;gap:10px}.result[hidden]{display:none}.result p{margin:4px 0}.result-actions{grid-column:1/-1;display:flex;gap:10px}.result-actions button{flex:1;background:#144d69}.result-actions .primary{background:#0b695f;color:#fff}.warning{padding:12px;background:#fff3ca;color:#4a3803;border-radius:14px}
dialog{max-width:min(90vw,440px);background:#edfffa;color:#113c4c;border:2px solid #b9f8e5;border-radius:22px;padding:24px}dialog::backdrop{background:#032133bb}dialog button{margin:8px 4px}dialog h2{font-size:22px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}@media(max-width:360px){#study{padding-inline:10px}header button{padding-inline:10px}.actions{grid-template-columns:1fr 1fr}.actions #cancel{grid-column:auto}.result{grid-template-columns:60px 1fr}.result img{width:60px;height:60px}}