:root{font-family:Hiragino Kaku Gothic ProN,Yu Gothic,sans-serif;color:#f4f2d9;background:#164d58;font-synthesis:none;--cream:#f5ebc9;--ink:#153f47}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select,a.primary{font:inherit;font-size:12px;color:inherit;border:1px solid #ffffff38;background:#153d465e;border-radius:30px;padding:12px 18px;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background .2s,transform .2s}button:hover,a.primary:hover{background:#386972bd;transform:translateY(-1px)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #f3d794;outline-offset:4px}button.primary,a.primary{background:var(--cream);color:var(--ink);border-color:var(--cream);font-weight:700}button.primary:hover{background:#fff8e3}button:disabled{opacity:.45}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#sea{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}#waterwash{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 32%,#09313e25 100%);transition:background .4s}#waterwash.underwater{background:radial-gradient(ellipse at 50% 40%,transparent 22%,#06405380 100%)}#waterwash.cross{animation:cross .7s ease-out}@keyframes cross{0%{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset 0 0 100px #b8ffff88}to{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}header{position:fixed;top:28px;left:36px;right:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}.wordmark{font-size:12px;font-weight:700;letter-spacing:3px;display:flex;align-items:center;text-shadow:0 2px 8px #173d44}.wave{font:36px Georgia;margin-right:10px}.edition{font-size:9px;font-weight:400;letter-spacing:2px;opacity:.7;border-left:1px solid #fff6;margin-left:22px;padding-left:22px}.tools{display:flex;gap:7px}.tools button{font-size:11px;padding:10px 14px}.depth{position:fixed;top:100px;left:38px;display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:2px;text-shadow:0 2px 5px #19414f}.depth i{width:5px;height:5px;background:#e4eabb;border-radius:50%;box-shadow:0 0 10px #e2ffd1}.intro{position:fixed;left:7%;top:24%;text-shadow:0 3px 24px #09344355}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:600;margin:0 0 24px;opacity:.76}h1{font-family:Yu Mincho,Hiragino Mincho ProN,Georgia,serif;font-size:clamp(52px,6vw,88px);font-weight:500;line-height:1.18;letter-spacing:.06em;margin:0 0 28px}h1 span{letter-spacing:.01em}h1 i{color:#ebd7a1;font-style:normal;font-size:.8em}.lead{font-size:13px;line-height:2;letter-spacing:.12em;margin:0 0 26px}.startRow{display:flex;gap:10px;align-items:center}.startRow button{padding:14px 24px}.startRow .primary span{padding-left:24px}.small{font-size:10px;line-height:1.9;opacity:.73}.intro .small{margin-top:20px}.guide{position:fixed;right:36px;bottom:110px;width:294px;background:linear-gradient(135deg,#144e556e,#103f4aab);border:1px solid #ffffff38;border-radius:18px;padding:24px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 15px 50px #07394318}.guide .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:20px}.species{display:flex;align-items:center;gap:12px;margin-bottom:22px}.species strong{font-family:Yu Mincho,serif;font-size:17px;font-weight:500;letter-spacing:3px}.species small{display:block;font-size:8px;margin-top:5px;opacity:.7}.species em{font:24px Georgia;margin-left:auto;color:#f1e6c9;font-style:normal}.fishIcon{position:relative;display:inline-block;font-size:20px;letter-spacing:-11px;margin-right:12px;transform:scaleY(.7);color:#deaaa8}.fishIcon b{font-size:35px}.hamachi{color:#c6d4a6;transform:scaleY(.5)}.modeRow{display:flex;border-top:1px solid #fff3;padding-top:15px;gap:6px}.modeRow button{border:0;font-size:10px;padding:8px 10px;background:transparent}.modeRow .active{background:#fff2}#scoreNote{font-size:8px;opacity:.6;margin-bottom:0;letter-spacing:1px}footer{position:fixed;bottom:28px;left:36px;right:36px;display:flex;justify-content:space-between;align-items:end}.coordinates{font-size:9px;line-height:1.8;letter-spacing:2px;text-shadow:0 2px 6px #103f47}.coordinates b{font-size:7px;font-weight:400;opacity:.6;letter-spacing:2px}#playing{position:fixed;bottom:110px;left:50%;transform:translate(-50%);text-align:center}.timer{font-size:11px;letter-spacing:2px;margin-bottom:15px;text-shadow:0 1px 6px #123d47}.actionRow{display:flex;justify-content:center;gap:8px;white-space:nowrap}.actionRow button{padding:14px 24px}.actionRow kbd{font:8px sans-serif;margin-left:10px;opacity:.55}#help{font-size:9px;letter-spacing:1px;opacity:.8;text-shadow:0 2px 5px #123d47}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;text-align:center}#crosshair span{display:inline-block;width:12px;height:12px;border:1px solid #ffffff99;border-radius:50%;box-shadow:0 1px 12px #174650}#crosshair.ready span{width:24px;height:24px;border:2px solid #ffec9e;box-shadow:0 0 24px #ffde7177}#targetHint{position:absolute;width:250px;margin-left:-119px;font-size:10px;letter-spacing:1px;white-space:nowrap;text-shadow:0 2px 6px #083744}#toast{position:fixed;left:50%;top:21%;transform:translate(-50%);padding:16px 24px;border-radius:28px;background:#123f4acc;border:1px solid #f8ecc34d;font-size:12px;max-width:90vw;width:max-content;opacity:0;transition:opacity .25s;pointer-events:none}#toast.visible{opacity:1}#demoLabel{position:fixed;top:110px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:2px;white-space:nowrap;background:#194c4e55;padding:10px 16px;border-radius:24px}#show{position:fixed;bottom:20px;right:20px;opacity:.65}.minimal .ui{display:none!important}#joystick{display:none;position:fixed;bottom:125px;left:24px;width:100px;height:100px;border:1px solid #ffffff55;border-radius:50%;background:#21585a45;touch-action:none;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}#stick{position:absolute;left:30px;top:30px;width:38px;height:38px;border:1px solid #fff8;background:#e5edcf44;border-radius:50%;pointer-events:none}#joystick small{position:absolute;top:109px;left:34px;font-size:9px;letter-spacing:2px}dialog{border:1px solid #fff5;border-radius:24px;background:#164b53f5;color:#f6eed7;max-width:min(540px,92vw);padding:35px;box-shadow:0 30px 100px #001b3277}dialog::backdrop{background:#032b4670;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}dialog h2{font-family:Yu Mincho,serif;font-size:24px;font-weight:400}dialog p{font-size:12px;line-height:1.9}dialog .close{position:absolute;top:12px;right:12px;font:22px sans-serif;padding:5px 13px;border:0;background:transparent}dialog label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;margin:20px 0}dialog select{max-width:250px;background:#1c5962}dialog .startRow{margin-top:28px}#format{display:block;margin-top:20px;opacity:.6;font-size:10px}#preview img,#preview video{display:block;max-width:100%;max-height:48vh;margin:auto;border-radius:12px}#download{display:inline-block}#last{position:fixed;bottom:30px;right:175px}#recording{position:fixed;top:24px;left:50%;transform:translate(-50%);display:flex;gap:12px;align-items:center;font-size:11px;background:#103f48bb;border:1px solid #fff4;border-radius:30px;padding:8px 10px 8px 18px;white-space:nowrap}#recording i{width:7px;height:7px;border-radius:50%;background:#f1aa8c;animation:pulse 1s infinite}#recording button{padding:8px 12px;font-size:10px}@keyframes pulse{50%{opacity:.3}}.filming .ui,.filming #crosshair,.filming #demoLabel{display:none!important}.filming #sea{object-fit:contain;background:#092d37}.filming:has(#source option[value=play]:checked) #playing,.filming:has(#source option[value=play]:checked) #joystick{display:block!important}@media(max-width:900px){.edition{display:none}.guide{right:24px;width:248px;padding:18px;bottom:110px}.guide .species small{font-size:7px}.intro{left:7%;top:23%}#playing{left:36%}.tools button{padding:9px 11px}.coordinates{font-size:8px}.guide .modeRow button{font-size:9px;padding:8px 7px}}@media(max-width:600px){header{left:20px;right:20px;top:18px;align-items:flex-start}.wordmark{font-size:10px;letter-spacing:2px}.wave{font-size:27px;margin-right:6px}.tools{gap:5px;max-width:180px;flex-wrap:wrap;justify-content:flex-end}.tools button{font-size:9px;padding:8px 10px}.depth{left:22px;top:94px;font-size:7px;letter-spacing:1px}.intro{top:20%;left:28px}.intro .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:20px}h1{font-size:53px;margin-bottom:20px}.lead{font-size:11px;margin-bottom:20px}.intro .startRow{gap:8px}.startRow button{font-size:11px;padding:12px 16px}.intro .small{font-size:8px;max-width:300px}.guide{bottom:89px;left:20px;right:20px;width:auto;padding:14px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.guide .eyebrow,.guide .species small,#scoreNote{display:none}.species{margin:0;gap:6px}.species strong{font-size:14px;letter-spacing:2px}.species em{font-size:20px;margin-left:8px}.fishIcon{font-size:14px;margin-right:7px;letter-spacing:-8px}.fishIcon b{font-size:26px}.modeRow{grid-column:span 2;justify-content:center;padding-top:8px;margin-top:3px}.modeRow button{font-size:10px!important;padding:7px 14px!important}footer{bottom:23px;left:22px;right:22px}.coordinates{font-size:7px;letter-spacing:1px}.coordinates b{font-size:5px;letter-spacing:1px}footer button{font-size:10px;padding:10px 12px}body:has(#intro[hidden]) .guide{top:125px;bottom:auto}.guide .modeRow{border-top:0;padding-top:0}body:has(#intro[hidden]) #joystick{display:block}#playing{left:auto;right:22px;bottom:117px;transform:none}#playing .timer{position:fixed;bottom:225px;left:auto;right:0;font-size:9px;white-space:nowrap}.actionRow{flex-direction:column}.actionRow button{padding:14px 18px;font-size:12px}.actionRow kbd{display:none}#help{position:fixed;right:0;bottom:-27px;font-size:8px;width:135px;line-height:1.6}#toast{top:34%;font-size:10px;padding:14px 18px;white-space:normal;width:85vw;text-align:center}#demoLabel{top:235px;font-size:8px;letter-spacing:1px}#last{bottom:64px;right:22px;font-size:9px;padding:8px 12px}dialog{padding:26px}dialog h2{font-size:20px}dialog label{gap:10px;font-size:10px}dialog select{font-size:10px;max-width:195px;padding:10px}dialog .startRow{justify-content:center}#recording{top:24px;width:max-content;max-width:96vw}}body:has(#intro:not([hidden])) #waterwash{background:linear-gradient(90deg,#07384466,transparent 60%),radial-gradient(ellipse at center,transparent 35%,#103f4825)}@media(max-width:600px){#help{position:absolute;top:100%;bottom:auto;right:0;width:165px;margin-top:8px;line-height:1.5}}.minimal #crosshair,.minimal #toast,.minimal #demoLabel{display:none!important}dialog .close{z-index:5}