:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;--ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#112a3a}
body{color:#fff;-webkit-font-smoothing:antialiased}
#scene{position:absolute;inset:0;touch-action:none;outline:none}
canvas{display:block;width:100%;height:100%}

header{pointer-events:none;position:fixed;left:max(28px,env(safe-area-inset-left));top:max(28px,env(safe-area-inset-top));display:flex;flex-direction:column;gap:7px;color:#203640;transition:color .4s var(--ease)}
.place{font-size:21px;font-weight:500;letter-spacing:-.7px}
.coordinates{font-size:10px;letter-spacing:1.4px;font-weight:500;opacity:.72}
.depth{position:fixed;top:max(32px,env(safe-area-inset-top));right:28px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;letter-spacing:.2px;color:#203640;pointer-events:none;transition:color .4s var(--ease)}
#depth{opacity:.8}
#whale{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:500;opacity:.6}
#seen{font-size:15px;font-weight:600;letter-spacing:-.2px;margin-top:4px}
#ferry{font-size:11px;opacity:.7}
.credits{pointer-events:auto;font-size:10px;letter-spacing:.4px;color:inherit;opacity:.55;text-decoration:none;margin-top:2px}
.credits:hover{opacity:.9;text-decoration:underline}
#toast{position:fixed;left:50%;bottom:calc(max(26px,env(safe-area-inset-bottom)) + 74px);transform:translate(-50%,8px);max-width:min(88vw,460px);padding:11px 18px;border-radius:22px;background:rgba(18,30,40,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #ffffff2a;color:#fff;font-size:13px;line-height:1.35;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
#toast.on{opacity:1;transform:translate(-50%,0)}
body[data-dream="1"] #toast{background:rgba(18,52,110,.5)}
#tag{position:fixed;left:0;top:0;pointer-events:none;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.2px;color:#fff;padding:5px 9px;border-radius:12px;background:rgba(14,26,36,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #ffffff30;margin:-28px 0 0 0;translate:-50% 0}
#tag[data-edge="l"]{translate:0 -50%;margin:0}
#tag[data-edge="r"]{translate:-100% -50%;margin:0}
#tag[hidden]{display:none}
body[data-tone=dark] header,body[data-tone=dark] .depth{color:#fff}
body[data-dream="1"] header,body[data-dream="1"] .depth{color:#fff;text-shadow:0 0 2px #0a3d8acc,0 1px 12px #0a3d8a}
body[data-dream="1"] #depth,body[data-dream="1"] #whale,body[data-dream="1"] .coordinates{opacity:1}

.dock{position:fixed;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:7px;border-radius:40px;background:rgba(22,31,38,.58);backdrop-filter:blur(20px) saturate(.9);-webkit-backdrop-filter:blur(20px) saturate(.9);border:1px solid #ffffff33;box-shadow:0 8px 28px #0719232e,inset 0 1px 1px #ffffff30}
body[data-dream="1"] .dock{background:rgba(18,52,110,.42);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
button{appearance:none;border:0;background:transparent;color:#fff;border-radius:24px;padding:11px 14px;display:flex;align-items:center;gap:8px;font:500 13px/1.1 inherit;font-family:inherit;font-size:13px;cursor:pointer;transition:background 150ms var(--ease);-webkit-tap-highlight-color:transparent;min-height:44px;white-space:nowrap}
button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button:active{background:#0004}
button[aria-pressed=true]{background:#ffffff26}
#dream[aria-pressed=true]{background:linear-gradient(110deg,#ff7aa866,#ffd36a66 30%,#7cf0c866 55%,#6fb6ff66 78%,#c58bff66)}
button:focus-visible{outline:2px solid white;outline-offset:2px}
.divider{height:22px;width:1px;background:#ffffff22;margin:0 3px}
#light,#pause{padding:11px 12px}

#flash{position:fixed;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 30%,#fff,#d8f4ff 40%,#9fd8ff88);transition:opacity .6s var(--ease)}
#flash.on{opacity:.92;transition:opacity .2s ease-in}
#fallback{position:fixed;inset:0;place-content:center;text-align:center;background:linear-gradient(#93b4c3,#536f80 46%,#233b49 47%,#122b3c);font-size:14px}
#fallback:not([hidden]){display:grid}

@media(hover:hover) and (pointer:fine){button:hover{background:#ffffff18}}
@media(max-width:600px){
  header{left:22px;top:max(24px,env(safe-area-inset-top))}
  .place{font-size:20px}
  .depth{right:22px;top:max(29px,env(safe-area-inset-top));font-size:10px}
  .coordinates{font-size:9px}
  .dock{bottom:max(24px,env(safe-area-inset-bottom));gap:2px;padding:6px}
  button{padding:11px 11px;gap:6px;font-size:12px}
  #light,#pause{padding:11px 10px}
}
@media(max-width:380px){button span{display:none}button{padding:11px 13px}}
@media(prefers-reduced-motion:reduce){button,#flash,header,.depth{transition:none}}