/* Animalcules, shared chrome for the sub-pages (linux / macos / windows /
   roadmap / privacy). The immersive home (index.html) keeps its own
   self-contained styles; this only dresses the standard scrolling pages. */
:root{
  color-scheme:dark;
  --ink:#eaf2f2; --dim:#9fb4bc; --faint:#5c757f; --accent:#54b9af; --on-accent:#04221f;
  --bg:#05080a; --card:#0e181d; --line:#1b2a31;
  --mono:ui-monospace,Menlo,Consolas,"SF Mono",monospace;
}
*{ box-sizing:border-box; }
html{ height:100%; }
body{ margin:0; min-height:100%; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #0c1620 0%, #05080a 60%) fixed;
  font:16px/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent; }
a{ color:var(--accent); }

/* ---------- header + platform tabs ---------- */
.site-header{ position:sticky; top:0; z-index:20; display:grid; align-items:center; gap:14px;
  grid-template-columns:1fr auto 1fr; grid-template-areas:"brand tabs actions";
  padding:11px max(16px,env(safe-area-inset-right)) 11px max(16px,env(safe-area-inset-left));
  background:rgba(5,8,10,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.brand{ grid-area:brand; justify-self:start; display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand img{ width:28px; height:28px; display:block; }
.brand .name{ font:600 16px/1 var(--mono); letter-spacing:1.4px; text-transform:uppercase; color:var(--ink); }
.tabs{ grid-area:tabs; justify-self:center; display:flex; gap:3px; padding:4px; max-width:100%; overflow:auto;
  border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--line); scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs a{ flex:0 0 auto; padding:7px 14px; border-radius:9px; white-space:nowrap; text-decoration:none; color:var(--dim);
  font:600 12.5px/1 -apple-system,Segoe UI,Roboto,sans-serif; letter-spacing:.3px; transition:color .15s, background .15s; }
.tabs a:hover{ color:var(--ink); }
.tabs a[aria-current="page"]{ background:rgba(84,185,175,.16); color:var(--ink); box-shadow:inset 0 0 0 1px rgba(84,185,175,.3); }
.hbtns{ grid-area:actions; justify-self:end; display:inline-flex; align-items:center; gap:10px; }
.store{ display:inline-flex; }
.store img{ height:38px; width:auto; display:block; }
@media (max-width:760px){
  .site-header{ grid-template-columns:1fr auto; grid-template-areas:"brand actions" "tabs tabs"; row-gap:9px; }
  .brand .name{ display:none; }
  .tabs{ justify-self:stretch; }
}

/* ---------- page body ---------- */
.wrap{ flex:1 0 auto; width:100%; max-width:1000px; margin:0 auto; padding:42px 22px 64px; }
h1{ font:700 clamp(28px,5vw,42px)/1.12 var(--mono); letter-spacing:.4px; margin:0 0 12px; }
h2{ font:600 18px/1.2 var(--mono); letter-spacing:.4px; margin:0 0 12px; color:var(--ink); }
p{ color:var(--dim); }
.lead{ font-size:16px; max-width:60ch; margin:0 0 26px; }
.muted{ color:var(--faint); }

/* coming-soon hero */
.soon{ display:inline-block; padding:5px 11px; border-radius:999px; font:600 11px/1 var(--mono);
  letter-spacing:1.2px; text-transform:uppercase; color:var(--accent);
  background:rgba(84,185,175,.12); border:1px solid rgba(84,185,175,.32); margin-bottom:16px; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin:4px 0 30px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:13px;
  text-decoration:none; font-weight:700; font-size:14px; }
.btn.primary{ background:var(--accent); color:var(--on-accent); }
.btn.ghost{ background:rgba(255,255,255,.05); color:var(--ink); border:1px solid var(--line); }
.tiles{ display:flex; gap:10px; overflow:auto; padding:6px 2px 14px; scrollbar-width:none; }
.tiles::-webkit-scrollbar{ display:none; }
.tiles img{ width:104px; height:104px; flex:0 0 auto; border-radius:14px; border:1px solid var(--line);
  object-fit:cover; box-shadow:0 8px 22px rgba(0,0,0,.45); }
.tiles figure{ margin:0; flex:0 0 auto; text-align:center; }
.tiles figcaption{ margin-top:7px; font-size:11.5px; color:var(--dim); }
.hint{ color:var(--faint); font-size:13.5px; margin-top:20px; max-width:60ch; }

/* roadmap lanes */
.lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:8px; }
.lane{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px 18px; }
.lane h2{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.lane h2::before{ content:""; width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.lane.now h2::before{ background:#54e0a0; }
.lane.next h2::before{ background:var(--accent); }
.lane.later h2::before{ background:var(--faint); }
.lane ul{ margin:0; padding:0; list-style:none; }
.lane li{ position:relative; padding:10px 0 10px 18px; color:var(--dim); font-size:14px; border-top:1px solid rgba(255,255,255,.05); }
.lane li:first-child{ border-top:0; }
.lane li::before{ content:"›"; position:absolute; left:3px; color:var(--accent); }
.lane li b{ color:var(--ink); font-weight:600; }
@media (max-width:720px){ .lanes{ grid-template-columns:1fr; } }

/* prose (privacy etc.) */
.prose{ max-width:720px; }
.prose h2{ margin-top:28px; }
.prose a{ color:var(--accent); }

/* ---------- footer ---------- */
.site-footer{ flex-shrink:0; border-top:1px solid var(--line); padding:26px 22px 34px; background:rgba(5,8,10,.6); }
.site-footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px 20px; margin-bottom:14px; }
.site-footer nav a{ color:var(--dim); text-decoration:none; font-size:14px; }
.site-footer nav a:hover{ color:var(--ink); }
.site-footer p{ text-align:center; color:var(--faint); font-size:12.5px; margin:0; }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }