/* ---------- tokens ---------- */
:root{
  color-scheme:light dark;
  --bg:#f4f3ef;--paper:rgba(255,255,255,.66);--paper-hi:rgba(255,255,255,.88);
  --ink:#171815;--muted:#71736d;
  --line:rgba(23,24,21,.10);--line-strong:rgba(23,24,21,.18);
  --green:#4f7b5c;--amber:#a8823c;
  --glyph:#151714;--glyph-inv:#f5f4ef;
  --glow:rgba(79,123,92,.20);
  --aurora-a:rgba(206,215,200,.42);--aurora-b:rgba(214,208,226,.34);--aurora-c:rgba(232,222,201,.40);
  --grain:.24;--grain-ink:rgba(16,17,15,.13);
  --map-dot:rgba(23,24,21,.14);--map-visit:rgba(79,123,92,.60);--map-you:#4f7b5c;
}
:root[data-theme="dark"]{
  --bg:#0e100e;--paper:rgba(255,255,255,.045);--paper-hi:rgba(255,255,255,.085);
  --ink:#eceee7;--muted:#8b8f85;
  --line:rgba(236,238,231,.10);--line-strong:rgba(236,238,231,.22);
  --green:#7fb98d;--amber:#d0a860;
  --glyph:#eceee7;--glyph-inv:#0e100e;
  --glow:rgba(127,185,141,.22);
  --aurora-a:rgba(72,104,82,.30);--aurora-b:rgba(78,72,106,.28);--aurora-c:rgba(110,94,60,.24);
  --grain:.30;--grain-ink:rgba(255,255,255,.10);
  --map-dot:rgba(236,238,231,.11);--map-visit:rgba(127,185,141,.65);--map-you:#7fb98d;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e100e;--paper:rgba(255,255,255,.045);--paper-hi:rgba(255,255,255,.085);
    --ink:#eceee7;--muted:#8b8f85;
    --line:rgba(236,238,231,.10);--line-strong:rgba(236,238,231,.22);
    --green:#7fb98d;--amber:#d0a860;
    --glyph:#eceee7;--glyph-inv:#0e100e;
    --glow:rgba(127,185,141,.22);
    --aurora-a:rgba(72,104,82,.30);--aurora-b:rgba(78,72,106,.28);--aurora-c:rgba(110,94,60,.24);
    --grain:.30;--grain-ink:rgba(255,255,255,.10);
  --map-dot:rgba(236,238,231,.11);--map-visit:rgba(127,185,141,.65);--map-you:#7fb98d;
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;overflow-x:hidden;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);background:var(--bg);
  transition:background .5s ease,color .5s ease;
}
/* film grain */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:2;opacity:var(--grain);
  background-image:radial-gradient(var(--grain-ink) .55px,transparent .55px);background-size:14px 14px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 70%);
}

/* ---------- drifting aurora ---------- */
/* The map sits above the aurora and below the content. Both are decorative,
   so neither takes pointer events. */
#worldmap{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-25vmax;z-index:0;pointer-events:none;filter:blur(60px);opacity:.9}
.aurora::before,.aurora::after{content:"";position:absolute;inset:0}
.aurora::before{
  background:
    radial-gradient(38vmax 34vmax at 22% 28%,var(--aurora-a),transparent 62%),
    radial-gradient(30vmax 30vmax at 78% 18%,var(--aurora-b),transparent 60%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.aurora::after{
  background:radial-gradient(34vmax 32vmax at 62% 84%,var(--aurora-c),transparent 62%);
  animation:drift-b 44s ease-in-out infinite alternate;
}
@keyframes drift-a{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}
@keyframes drift-b{from{transform:translate3d(3%,2%,0) scale(1.06)}to{transform:translate3d(-4%,-3%,0) scale(1)}}

/* ---------- layout ---------- */
.shell{position:relative;z-index:1;min-height:100svh;width:min(1180px,calc(100% - 40px));margin:0 auto;display:grid;grid-template-rows:auto 1fr auto}
.topbar{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
/* The mark is the only branding in the topbar now, so it gets a real hit area
   and something to do on hover. */
.brand{display:inline-flex;align-items:center;padding:8px;margin:-8px;color:var(--ink);text-decoration:none}
.brand-mark{width:9px;height:9px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease}
.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:scale(1.18);box-shadow:0 0 0 8px color-mix(in srgb,var(--ink) 11%,transparent)}
.brand:focus-visible{outline:none}
.controls{display:flex;align-items:center;gap:16px}
.presence{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.presence-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--glow);animation:pulse 3.2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

.theme-toggle{
  display:grid;place-items:center;width:34px;height:34px;padding:0;cursor:pointer;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}
.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--ink);border-color:var(--line-strong);background:var(--paper-hi);transform:rotate(-18deg);outline:none}
.theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}

/* ---------- hero: a quiet cluster, low and to the left ---------- */
/* The map is the page now. The wordmark, the line of text and the two links
   used to sit dead centre on top of it, so they have moved down into the
   bottom-left corner — over open ocean on the equirectangular crop — and shrunk
   to something that reads as a caption rather than a billboard. */
.hero{align-self:end;justify-self:start;max-width:min(420px,100%);padding:0 0 34px;text-align:left}
.eyebrow{margin-bottom:10px;color:var(--muted);font-size:10px;font-weight:650;letter-spacing:.24em;text-transform:uppercase;opacity:.82}
/* tabular-nums keeps the wordmark from jittering sideways as digits swap:
   a 1 is much narrower than an 8 in the proportional face. */
h1{margin:0;font-size:clamp(30px,3.4vw,40px);line-height:1;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
h1 .d{display:inline-block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
h1 .d.flip{transform:scaleX(-1)}
h1 .g{display:inline-block}
h1 .g.roll{animation:roll .58s cubic-bezier(.4,0,.2,1)}
@keyframes roll{
  0%{opacity:1;transform:translateY(0);filter:blur(0)}
  44%{opacity:0;transform:translateY(-.16em);filter:blur(6px)}
  56%{opacity:0;transform:translateY(.16em);filter:blur(6px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
.subtitle{margin:11px 0 0;min-height:1.2em;color:var(--muted);font-size:13px;letter-spacing:-.01em}

/* ---------- app links ---------- */
/* No card, no border, no backdrop: just the artwork, so the dots keep showing
   through. Hover and focus are carried by the icon itself. */
.apps{display:flex;justify-content:flex-start;gap:18px;margin-top:26px}
.app{
  position:relative;display:grid;place-items:center;
  width:40px;height:40px;text-decoration:none;opacity:.84;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .22s ease;
}
.app:hover{opacity:1;transform:translateY(-3px)}
.app:focus-visible{
  opacity:1;transform:translateY(-3px);
  outline:1.5px solid var(--line-strong);outline-offset:6px;border-radius:14px;
}
.app:active{transform:translateY(-1px)}

.app-icon{display:grid;place-items:center;width:30px;height:30px;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.app:hover .app-icon{transform:scale(1.08)}
.app-icon svg{width:30px;height:30px;overflow:visible}
/* The single tile is drawn, not branded: a ring in the page's own ink, so it
   inherits the theme and gives away nothing about what it opens. The app
   artwork that used to live here went with the tiles it belonged to. */
.app-node svg{fill:none;stroke:var(--ink);stroke-width:1.4;opacity:.9}
.app-node:hover svg,.app-node:focus-visible svg{opacity:1}

.app-key{
  position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  color:var(--muted);font-size:9px;font-weight:600;
  letter-spacing:.06em;opacity:0;transition:opacity .22s ease;font-variant-numeric:tabular-nums;
}
.app:hover .app-key,.app:focus-visible .app-key{opacity:.6}

.app-status{position:absolute;top:-1px;right:-3px;width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.28;transition:background .4s ease,opacity .4s ease,box-shadow .4s ease}
.app-status[data-status="live"]{background:var(--green);opacity:1;box-shadow:0 0 0 3px var(--glow)}
.app-status[data-status="unknown"]{background:var(--amber);opacity:.55}

/* ---------- footer ---------- */
.footer{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.meta{display:flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums}
.sep{opacity:.45}
.foot-id{font-variant-numeric:tabular-nums}

/* ---------- entrance ---------- */
.reveal{opacity:0;animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.r0{animation-delay:.05s}.r1{animation-delay:.13s}.r2{animation-delay:.23s}.r3{animation-delay:.34s}.r4{animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .shell{width:min(100% - 28px,1180px)}
  .topbar,.footer{min-height:72px}
  .hero{padding:0 0 26px}
  .apps{margin-top:22px;gap:16px}
  .app{width:38px;height:38px}
  .app-icon,.app-icon svg{width:27px;height:27px}
  .footer{align-items:flex-end;padding:18px 0}
}

@media (prefers-reduced-motion:reduce){
  .app,.app-icon,.theme-toggle,.app-status,.brand-mark,h1 .d,body{transition:none}
  .reveal{opacity:1;animation:none}
  .aurora::before,.aurora::after,.presence-dot{animation:none}
}