:root {
  color-scheme: light;
  --ink: #163c48;
  --muted: #254a56;
  --glass: rgb(229 243 245 / 48%);
  --selected: rgb(248 252 252 / 80%);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif; color: var(--ink); background: #82b9c9; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, #ocean:focus-visible, .time-dial:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
#ocean { position: fixed; inset: 0; touch-action: none; outline: none; overflow: hidden; }
#ocean canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
body.ready #ocean canvas { opacity: 1; }
.fallback-sky { position: absolute; inset: 0 0 58%; background: linear-gradient(#8bbed7, #d6e4e5); }
.fallback-sea { position: absolute; inset: 42% 0 0; background: repeating-linear-gradient(177deg, transparent 0 9px, rgb(181 226 232 / 17%) 10px 11px, transparent 13px 25px), linear-gradient(#6692a7, #19677a); }
body.ready .fallback-sky, body.ready .fallback-sea { display: none; }
.chrome { position: fixed; z-index: 1; left: 48px; right: 48px; display: flex; justify-content: space-between; pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
.chrome button, .chrome a, .time-control { pointer-events: auto; }
.masthead { top: max(40px, env(safe-area-inset-top)); align-items: start; }
h1 { margin: 0; font-size: 23px; font-weight: 500; letter-spacing: .22em; line-height: 1.5; }
h1 span { display: block; font-size: 10px; letter-spacing: .14em; font-weight: 400; margin-top: 5px; }
.utilities { display: flex; align-items: center; gap: 22px; }
.utilities button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; background: transparent; font-size: 12px; letter-spacing: .08em; }
.utilities button:hover { opacity: .65; }
.sound-bars { display: flex; align-items: center; gap: 2px; height: 14px; }
.sound-bars i { display: block; width: 2px; height: 3px; background: currentColor; border-radius: 2px; }
.sound-bars i:nth-child(2) { height: 9px; }
.sound-bars i:nth-child(3) { height: 13px; }
.sound-bars i:nth-child(4) { height: 6px; }
.controls { bottom: max(35px, env(safe-area-inset-bottom)); align-items: end; gap: 24px; }
#instructions { font-size: 12px; letter-spacing: .08em; margin: 0 0 4px; line-height: 1.8; color: #eff7f7; text-shadow: 0 1px 8px rgb(0 35 50 / 65%); }
#instructions span { display: block; font-size: 10px; letter-spacing: .05em; margin-top: 4px; }
#instructions .touch-hint { display: none; }
.voyage-copy { color: #edf3f7; text-shadow: 0 1px 8px rgb(0 25 35 / 60%); }
#voyage-distance { margin: 0 0 6px; font-size: 11px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
#encounter-note { margin: 0 0 10px; min-height: 18px; font-size: 11px; color: #e4dfce; letter-spacing: .05em; }
.credits-link { display: inline-block; margin-top: 8px; padding: 3px 0; color: #d2dfe3; font-size: 9px; text-underline-offset: 3px; }
.volume-label { margin: 18px 0; }
.volume-label input { border: 0; padding: 0; height: 22px; accent-color: #d4e0d9; }
.music-credit { display: block; font-size: 10px; color: #c4d3dc; text-underline-offset: 3px; line-height: 1.8; }
.location-privacy a { color: inherit; }
#music-status { min-height: 18px; font-size: 11px; color: #bdcbd4; }
.time-control { width: min(320px, 100%); flex-shrink: 0; padding: 12px 16px 9px; color: #edf3f7; background: rgb(12 32 46 / 52%); border: 1px solid rgb(224 238 248 / 18%); border-radius: 16px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 4px 20px rgb(5 22 32 / 8%); }
.time-control:focus-within { border-color: rgb(224 238 248 / 60%); }
.time-readout { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; }
#time-period { font-size: 11px; letter-spacing: .12em; }
#time-value { font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: .08em; line-height: 1.3; }
.time-hint { justify-self: end; font-size: 9px; letter-spacing: .05em; color: #c1cdd6; }
.time-dial { position: relative; height: 54px; margin-top: 6px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.time-dial.scrubbing { cursor: grabbing; }
.time-track { position: absolute; left: 50%; top: 8px; height: 42px; width: 1px; transform: translateX(var(--time-offset, -480px)); will-change: transform; }
.time-dial { overflow: hidden; mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 9%, black 91%, transparent); }
.time-tick { position: absolute; top: 0; width: 1px; height: 7px; background: rgb(227 237 247 / 38%); }
.time-tick.major { height: 14px; background: rgb(227 237 247 / 70%); }
.time-tick span { position: absolute; top: 23px; left: 50%; transform: translateX(-50%); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: #d1dce5; }
.time-needle { position: absolute; left: 50%; top: 1px; width: 2px; height: 25px; transform: translateX(-50%); background: #f2dfbf; border-radius: 1px; box-shadow: 0 0 7px rgb(255 230 197 / 18%); pointer-events: none; }
.calendar-row, .location-row, .moon-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 10px; color: #bdcbd6; }
.calendar-row { margin: -4px 0 5px; }
#sea-date { width: 112px; color-scheme: dark; color: #d1dce5; border: 0; background: transparent; padding: 7px 0; font: inherit; font-variant-numeric: tabular-nums; }
.time-control button { color: #d1dce5; padding: 7px 0; font-size: 10px; background: transparent; }
.time-control button:hover { color: #fff; }
.time-control button:disabled { opacity: .4; cursor: default; }
#follow-clock[aria-pressed="true"] { color: #c9d8cd; }
#follow-clock[aria-pressed="true"]::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px 0; background: #b8d6c2; border-radius: 50%; }
.moon-control { padding-top: 3px; border-top: 1px solid rgb(224 238 248 / 12%); }
.moon-control > span:first-child { display: flex; gap: 8px; }
#moon-visibility { font-size: 9px; }
.location-row { border-top: 1px solid rgb(224 238 248 / 10%); }
#view-heading { font-size: 9px; }
#moon-label { min-width: 3em; color: #edf3f7; }
dialog { width: min(370px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; color: #e5edf3; background: #172f40; border: 1px solid #536878; border-radius: 20px; box-shadow: 0 20px 90px #0006; color-scheme: dark; }
dialog::backdrop { background: #04151f70; backdrop-filter: blur(7px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.dialog-heading h2 { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .05em; }
.dialog-heading button { font-size: 24px; background: transparent; padding: 0 4px; }
.location-description { font-size: 12px; line-height: 1.8; color: #b7c6d2; margin: 16px 0; }
.location-privacy { font-size: 10px; line-height: 1.7; color: #a2b6c5; }
dialog label, dialog summary { display: block; font-size: 11px; color: #c8d6df; }
dialog select, dialog input { font: inherit; font-size: 12px; color: #ecf4f8; width: 100%; min-height: 38px; border: 1px solid #526777; border-radius: 7px; background: #ffffff08; padding: 8px; margin-top: 8px; }
dialog details { margin-top: 18px; }
dialog summary { cursor: pointer; list-style: revert; display: list-item; }
.coordinates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.locate-device, .apply-location { width: 100%; min-height: 40px; border-radius: 8px; font-size: 12px; background: #e5ede9; color: #213b47; }
.locate-device { border: 1px solid #657c8b; color: #e2edf5; background: transparent; }
.locate-device:disabled { opacity: .6; }
#location-error { font-size: 11px; line-height: 1.8; color: #ecc9b6; margin: 12px 0; }
#forget-location { display: block; margin: 12px auto -8px; padding: 8px; font-size: 10px; color: #a2b6c5; background: transparent; }
#status { position: fixed; inset: 50% 0 auto; margin: 0; text-align: center; font-size: 13px; letter-spacing: .13em; color: #edf7f8; pointer-events: none; text-shadow: 0 1px 12px rgb(0 40 55 / 65%); transition: opacity .6s ease; }
body.ready #status:empty { opacity: 0; }
body[data-scene="sunrise"] .utilities { color: #edf3f7; text-shadow: 0 1px 8px rgb(8 25 35 / 30%); }
body[data-scene="sunset"] h1 { color: #edf3f7; text-shadow: 0 1px 8px rgb(8 25 35 / 30%); }
body[data-scene="night"] { color-scheme: dark; --ink: #e1eaf4; --muted: #b4c8dd; --glass: rgb(19 38 61 / 68%); --selected: rgb(124 152 190 / 25%); }
body.immersed .chrome { opacity: 0; transform: translateY(8px); visibility: hidden; }
.return-control { position: fixed; bottom: max(30px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 1; color: #eff7f7; border: 1px solid rgb(255 255 255 / 25%); background: rgb(12 39 51 / 22%); backdrop-filter: blur(12px); border-radius: 100px; padding: 10px 18px; font-size: 11px; opacity: .28; transition: opacity .2s ease; }
.return-control:hover, .return-control:focus-visible { opacity: 1; }
.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 (max-width: 600px) {
  .chrome { left: 24px; right: 24px; }
  .masthead { top: max(27px, env(safe-area-inset-top)); }
  h1 { font-size: 21px; }
  .utilities { gap: 14px; }
  .controls { align-items: start; flex-direction: column; gap: 20px; bottom: max(27px, env(safe-area-inset-bottom)); }
  .time-control { align-self: center; }
  .voyage-copy { align-self: center; text-align: center; }
  #encounter-note { margin-bottom: 4px; }
  #instructions { align-self: center; text-align: center; font-size: 11px; }
  #instructions .desktop-hint { display: none; }
  #instructions .touch-hint { display: block; }
}
@media (min-width: 601px) and (max-width: 680px) {
  .controls { align-items: center; flex-direction: column; gap: 20px; }
  #instructions { text-align: center; }
  .voyage-copy { text-align: center; }
}
@media (prefers-reduced-motion: no-preference) {
  #sound[aria-pressed="true"] .sound-bars i { animation: breathe 1.4s ease-in-out infinite alternate; }
  #sound[aria-pressed="true"] .sound-bars i:nth-child(2) { animation-delay: -.6s; }
  #sound[aria-pressed="true"] .sound-bars i:nth-child(3) { animation-delay: -.9s; }
  #sound[aria-pressed="true"] .sound-bars i:nth-child(4) { animation-delay: -.3s; }
  @keyframes breathe { to { transform: scaleY(.35); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .time-control { background: #243d4d; backdrop-filter: none; }
}