@font-face{font-family:Fraunces;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;
  src:url(fonts/figtree-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --surface:#f5f1e8; --surface-raised:#fffdf9; --line:#ddd5c3;
  --ink:#10273a; --ink-muted:#52616c;
  --sea:#123a57; --sea-hover:#0f2a40; --on-sea:#fdfaf3;
  --deep:#0f2a40; --on-deep:#f6f2e9; --on-deep-muted:#b5c6d1; --signal-on-deep:#ff8a5c;
  --wave-back:#123a57; --wave-front:#0d1b26;
  --shadow-card:0 1px 2px rgba(16,39,58,.06),0 6px 16px rgba(16,39,58,.06);
  --font-display:Fraunces,Georgia,serif;
  --font-sans:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --surface:#0d1b26; --surface-raised:#152836; --line:#26404f;
    --ink:#eef2ee; --ink-muted:#a3b5c0;
    --sea:#8cc4e0; --sea-hover:#a9d3e8; --on-sea:#0d1b26;
    --deep:#1c3a4f; --wave-front:#09141d;
    --shadow-card:0 1px 2px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--surface); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:24px;
  -webkit-font-smoothing:antialiased;
}
.page{
  min-height:100vh; min-height:100dvh;
  max-width:1280px; margin:0 auto;
  padding:24px 48px 16px;
  padding-left:max(48px, env(safe-area-inset-left));
  padding-right:max(48px, env(safe-area-inset-right));
  display:flex; flex-direction:column; gap:32px;
}
a{color:var(--sea)}
a:focus-visible{outline:none;border-radius:8px;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--sea)}

.top{display:flex;align-items:center;justify-content:space-between;height:44px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand span{font-family:var(--font-display);font-size:21px;line-height:28px;font-weight:600}
.login{display:inline-flex;align-items:center;height:44px;padding:0 8px;font-weight:600;text-decoration:none}
.login:hover{text-decoration:underline}

.hero{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hero h1{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;font-size:56px;line-height:62px}
.lead{margin:0;max-width:520px;font-size:18px;line-height:28px;color:var(--ink-muted)}
.cta{
  align-self:center; margin-top:-8px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;min-width:240px;padding:0 24px;
  background:var(--sea);color:var(--on-sea);
  border-radius:14px;font-weight:600;text-decoration:none;
  transition:background-color .15s ease;
}
.cta:hover{background:var(--sea-hover)}
.cta:focus-visible{border-radius:14px}
.invite{margin:-24px 0 0;text-align:center;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-muted)}
.invite a{font-weight:600}

.sea{
  position:relative;flex:1 1 auto;min-height:300px;overflow:hidden;
  background:var(--deep);border-radius:22px;
}
.status{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:12px}
.live{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:18px;font-weight:500;color:var(--signal-on-deep)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--signal-on-deep);animation:pulse 2.4s ease-in-out infinite}
.clock{font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--on-deep-muted);font-variant-numeric:tabular-nums}
.wave{position:absolute;left:0;bottom:0;display:block;width:100%}
.wave-back rect{animation:drift-back 14s linear infinite}
.wave-front rect{animation:drift-front 7s linear infinite}
.boat-wrap{position:absolute;left:50%;bottom:34px;width:150px;height:150px;margin-left:-75px}
.boat{display:block;animation:bob 5s ease-in-out infinite;transform-origin:50% 85%}

@keyframes drift-back{to{transform:translateX(-240px)}}
@keyframes drift-front{to{transform:translateX(-180px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
  .wave rect,.boat,.dot{animation:none}
}

.doc{
  flex:1 1 auto; width:100%; max-width:720px; margin:0 auto;
  background:var(--surface-raised); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-card);
  padding:32px;
}
.doc h1{margin:0 0 4px;font-family:var(--font-display);font-size:30px;line-height:36px;font-weight:600;letter-spacing:-0.01em}
.doc .updated{margin:0 0 24px;font-family:var(--font-mono);font-size:14px;line-height:20px;color:var(--ink-muted)}
.doc h2{margin:24px 0 8px;font-size:17px;line-height:24px;font-weight:600}
.doc p,.doc ul,.doc ol{margin:0 0 12px}
.doc ul,.doc ol{padding-left:20px}
.doc li{margin-bottom:4px}
.doc .back{display:inline-flex;align-items:center;height:44px;margin-top:12px;font-weight:600;text-decoration:none}
.doc .back:hover{text-decoration:underline}

.foot{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;line-height:18px;font-weight:500;color:var(--ink-muted)}
.foot nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:24px}
.foot a{display:inline-flex;align-items:center;height:44px;color:var(--ink-muted)}
.foot a:hover,.foot a[aria-current]{color:var(--ink)}

@media (max-width: 640px){
  .page{padding:16px 16px 8px;padding-bottom:max(8px, env(safe-area-inset-bottom));gap:24px}
  .login{display:none}
  .hero{align-items:flex-start;text-align:left}
  .hero h1{font-size:36px;line-height:40px}
  .lead{font-size:16px;line-height:24px}
  .sea{order:1;min-height:280px}
  .cta{order:2;align-self:stretch;margin-top:0}
  .invite{order:3;margin-top:-16px}
  .foot{order:4;flex-direction:column-reverse;gap:0}
  .foot nav{column-gap:20px}
  .status{top:16px;left:16px;right:16px;justify-content:space-between}
  .boat-wrap{width:136px;height:136px;margin-left:-68px;bottom:32px}
  .doc{padding:24px 16px}
}