@font-face{font-family:"Bricolage";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/bricolage-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/bricolage-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201D,U+201E,U+2212}
@font-face{font-family:"PlexMono";font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/plexmono-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F}

/* Layout: one full-bleed night shore; a quiet caption top-left, controls and live readout pinned bottom. Single dark world by choice. */
:root{
  --night:#03070d;      /* water at night */
  --sky:#060d18;        /* sky near horizon */
  --spark:#5fd4ff;      /* Noctiluca flash, ~474 nm */
  --ink:#d9ecf5;        /* text */
  --mute:#7d94a3;       /* secondary text, blue-biased grey */
  --glass:rgba(10,22,34,.55);
  --line:rgba(140,200,230,.18);
  --display:"Bricolage", "Avenir Next", system-ui, sans-serif;
  --mono:"PlexMono", ui-monospace, Menlo, monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);overflow:hidden;font-family:var(--display);
  -webkit-tap-highlight-color:transparent}
#sea{position:fixed;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;
  background:linear-gradient(to bottom,#02050a 0%,var(--sky) 18%,#0a1622 21.5%,#050c15 24%,var(--night) 60%,#02060a 100%)}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.cap{position:fixed;top:calc(var(--browser-safe-top,env(safe-area-inset-top,0px)) + 22px);
  left:max(20px,env(safe-area-inset-left,0px));right:max(20px,env(safe-area-inset-right,0px));
  max-width:34rem;pointer-events:none}
h1{margin:0;font-weight:300;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.92;letter-spacing:-.03em;text-wrap:balance}
h1 b{font-weight:700;color:var(--spark);text-shadow:0 0 18px rgba(95,212,255,.55),0 0 46px rgba(95,212,255,.25)}
.cap p{margin:.9rem 0 0;font-size:clamp(.95rem,1.6vw,1.05rem);line-height:1.5;color:var(--ink);opacity:.82;max-width:30rem}
.cap p em{font-style:italic;color:var(--spark)}
.facts{margin-top:.8rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--mute);line-height:1.7}
.bar{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;pointer-events:none}
.read{font-family:var(--mono);font-size:.75rem;color:var(--mute);display:flex;gap:18px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;background:var(--glass);border:1px solid var(--line);
  padding:9px 14px;border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.read span b{color:var(--ink);font-weight:500}
.meter{display:inline-block;width:64px;height:5px;border-radius:3px;background:rgba(120,170,200,.18);
  vertical-align:middle;margin-left:6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--spark);box-shadow:0 0 8px var(--spark);width:100%}
.btns{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
button{font:500 .78rem/1 var(--mono);letter-spacing:.05em;color:var(--ink);background:var(--glass);
  border:1px solid var(--line);border-radius:999px;padding:10px 15px;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .2s,color .2s,box-shadow .2s}
button:hover{border-color:rgba(95,212,255,.6);color:#fff}
button:focus-visible{outline:2px solid var(--spark);outline-offset:2px}
button[aria-pressed="true"]{border-color:rgba(95,212,255,.7);box-shadow:0 0 14px rgba(95,212,255,.25) inset}
@media (max-width:560px){.facts{display:none}.read{font-size:.7rem;gap:12px}}

[hidden]{display:none!important}
*{box-sizing:border-box}
.home{display:inline-block;margin-bottom:.7rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--mute);text-decoration:none;pointer-events:auto}
.home:hover,.home:focus-visible{color:var(--spark)}
a.chip{font:500 .78rem/1 var(--mono);letter-spacing:.05em;color:var(--ink);background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:10px 15px;text-decoration:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
a.chip:hover{border-color:rgba(95,212,255,.6)}
a.chip:focus-visible{outline:2px solid var(--spark);outline-offset:2px}
.about:not(.open){display:none}
.about{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:rgba(1,4,8,.72);padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
.panel{max-width:36rem;max-height:calc(100dvh - 48px);overflow:auto;background:#07111c;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:22px 24px;font-family:var(--display);line-height:1.55}
.panel h2{margin:0 0 .6rem;font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.panel h2+p{margin-top:0}
.panel p{margin:.6rem 0;opacity:.88}
.panel ol{margin:.6rem 0 0;padding-left:1.2rem;font-size:.85rem;color:var(--mute)}
.panel li{margin:.35rem 0}
.panel a{color:var(--spark)}
.panel .x{float:right;margin:-6px -8px 0 10px}
@media (max-width:560px){.cap p{font-size:.92rem}.bar{flex-direction:column-reverse;align-items:stretch}.read{justify-content:center}.btns{justify-content:center}}
@media (max-height:640px) and (max-width:560px){.cap p{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}