:root{
  --paper:#F7F7F7; --paper-2:#EDEDED; --ink:#111111; --ink-2:#5C5C5C; --rule:#DEDEDE; --live:#1E7F4F;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#121212; --paper-2:#1C1C1C; --ink:#EDEDED; --ink-2:#A6A6A6; --rule:#2E2E2E; --live:#4CC38A; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.55;
  font-variant-numeric:lining-nums tabular-nums; -webkit-font-smoothing:antialiased;
}
#sea{position:absolute; top:0; left:0; z-index:0; pointer-events:none; display:block}
body{position:relative}
.shell{position:relative; z-index:1; flex:1; width:100%; max-width:1120px; margin:0 auto; padding:0 20px}
main{min-width:0; max-width:600px; padding:clamp(48px, 12vh, 120px) 0 48px}
.map-space{display:none}
.mark img{display:block; width:120px; height:auto; margin:0 0 36px}
.eyebrow{margin:0 0 14px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
h1{margin:0 0 18px; font-family:var(--serif); font-weight:600; font-size:clamp(34px, 7vw, 52px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
.lead{margin:0 0 28px; font-size:clamp(17px, 2.4vw, 19px); color:var(--ink-2); max-width:34em; text-wrap:pretty}
.status{background:var(--paper); display:inline-flex; align-items:center; gap:10px; margin:0 0 48px; padding:8px 16px; border:1.5px solid var(--ink); border-radius:999px; font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase}
.dot{width:8px; height:8px; border-radius:50%; background:var(--live); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .dot{animation:none} }
.note{padding-top:8px}
.note h2{margin:0 0 8px; font-size:17px; font-weight:600}
.note p{margin:0; color:var(--ink-2); max-width:34em}
footer{display:flex; justify-content:space-between; gap:16px; width:100%; max-width:1120px; margin:0 auto; padding:20px; position:relative; z-index:1; font-family:var(--mono); font-size:12px; color:var(--ink-2)}
@media (max-width:860px){ .map-space{display:block; height:min(88svh, 640px)} .map-cap{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--ink-2)} }
@media (max-width:860px){
  .shell{padding:0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-left))}
  main{max-width:none; padding:calc(28px + env(safe-area-inset-top)) 0 40px}
  .mark img{width:64px; margin:0 0 22px}
  .eyebrow{font-size:12px; margin-bottom:10px}
  h1{font-size:clamp(27px, 8.2vw, 36px); line-height:1.1; margin-bottom:14px}
  .lead{font-size:16px; line-height:1.5; margin-bottom:22px}
  .status{margin-bottom:28px; padding:7px 14px; font-size:12px}
  .note h2{font-size:16px}
  .note p{font-size:16px}
  footer{padding:20px max(20px, env(safe-area-inset-left)) calc(20px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){ h1{font-size:28px} .lead{font-size:15px} }