/* nightcoop.net — one stylesheet for every page.
   Layout: an in-game HUD laid edge to edge over black. The game's own yellow marks the host and the
   main actions, cyan the guests and links, red PvP and recording. Panels carry corner ticks, buttons
   and tabs lose one corner, labels are condensed capitals. One loud thing per screen: the yellow
   block behind the hero's last word. Motion lives in a few places: the header wire, that word's rare
   glitch, the ticker, the flight and the network diagram. */
:root {
  color-scheme: dark;
  /* black with a trace of the yellow in it */
  --ground: #060606;
  --band: #0c0c0b;
  --panel: #121210;
  --panel-hi: #1b1b18;
  --line: #2a2a25;
  --line-hi: #48473f;
  --text: #f4f3eb;
  --dim: #adac9f;
  --faint: #7f7e73;
  --p1: #fcee0a;        /* yellow: the host, the main actions */
  --p1-hi: #fff35c;
  --p2: #00f0ff;        /* cyan: guests and links */
  --hot: #ff2a4f;       /* red: PvP, recording, warnings */
  --ok: #3cf08a;
  --on-accent: #060606;
  --code: #0a0a09;

  --display: "Russo One", "Arial Black", system-ui, sans-serif;
  --hud: "IBM Plex Sans Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 7rem);
  --top-h: 3.9rem;      /* the sticky header; site.js measures it */
  --cut: .7rem;         /* the cut corner of buttons and tabs */
  --under: var(--ground);  /* what an outlined button is filled with: the surface it sits on */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { font-size: clamp(100%, 0.5vw + 0.55rem, 150%); scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + .5rem); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--ground); }
::selection { background: var(--p1); color: var(--on-accent); }
img { max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--p2); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .6rem 1rem; background: var(--p1); color: var(--on-accent); font: 600 .9rem var(--hud); text-transform: uppercase; letter-spacing: .1em; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + .6rem); }

/* language blocks and switches */
html[lang="en"] [data-lang="ru"], html:not([lang="en"]) [data-lang="en"] { display: none !important; }
html:not([data-medal="on"]) .flag-medal { display: none !important; }
html:not(.beta-live) [data-when="live"], html.beta-live [data-when="before"] { display: none !important; }

/* small type */
.label { font: 500 .74rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.eyebrow { display: inline-flex; align-items: center; gap: .55rem; font: 600 .8rem/1.2 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.eyebrow::before { content: ""; width: .55rem; height: .55rem; background: var(--c, var(--p1)); flex: none; clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.fine { font: 400 .8rem/1.5 var(--mono); color: var(--dim); }

/* ---------- header ---------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.top-in { display: flex; align-items: center; gap: 1rem 2rem; padding-block: .8rem; }
.mark { display: inline-flex; align-items: center; gap: .75rem; margin-right: auto; font: 400 1.15rem var(--display); letter-spacing: .01em; text-decoration: none; }
.mark b { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--p1); color: var(--on-accent); font: 400 .8rem/1 var(--display); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.nav { display: flex; align-items: center; gap: .3rem 1.6rem; flex-wrap: wrap; }
.nav a { position: relative; padding-block: .35rem; font: 600 .86rem var(--hud); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--dim); }
.nav a:hover, .nav a[aria-current="page"], .nav a[aria-expanded="true"] { color: var(--text); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px; background: var(--p1); }
.nav a.ext::after { content: " ↗"; color: var(--faint); }
/* the partner stands apart from the site's own sections: a rule before it and a tag beside it */
.nav a.nav-partner { display: inline-flex; align-items: center; gap: .55rem; padding-left: 1.6rem; border-left: 1px solid var(--line-hi); color: var(--text); }
.nav-tag { padding: .2rem .38rem; border: 1px solid var(--hot); color: var(--hot); font: 500 .62rem/1 var(--mono); letter-spacing: .08em; }
.nav a.nav-partner:hover .nav-tag, .nav a.nav-partner[aria-current="page"] .nav-tag { background: var(--hot); color: var(--on-accent); }
.lang, .menu-btn { font: 600 .8rem var(--hud); letter-spacing: .1em; background: none; color: var(--text); border: 1px solid var(--line-hi); padding: .42rem .65rem; cursor: pointer; }
.lang:hover, .menu-btn:hover { border-color: var(--p1); color: var(--p1); }
.menu-btn { display: none; text-transform: uppercase; }
/* the wire under the header: a yellow lead at the gutter and a cyan packet that runs along it */
.wire { position: relative; height: 1px; background: var(--line); }
.wire::before { content: ""; position: absolute; left: 0; top: -1px; width: max(var(--gutter), 2rem); height: 3px; background: var(--p1); }
.wire b { position: absolute; top: -1px; left: 0; width: 3rem; height: 3px; background: var(--p2); animation: packet 5s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
@keyframes packet { to { left: calc(100% - 3rem); } }

/* ---------- buttons and chips ---------- */
.btn {
  --b: var(--line-hi); --f: var(--under); --t: var(--text);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3rem; padding: .8rem 1.4rem;
  background: var(--b); color: var(--t); border: 0; cursor: pointer; text-decoration: none;
  font: 600 .9rem/1.15 var(--hud); letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
  transition: background-color .15s ease-out, color .15s ease-out;
}
.btn::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--f);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + .59px), calc(100% - var(--cut) + .59px) 100%, 0 100%);
  transition: background-color .15s ease-out;
}
.btn:hover { --b: var(--text); }
.btn:focus-visible { outline: 0; --b: var(--p2); }
.btn.go { --b: var(--p1); --f: var(--p1); --t: var(--on-accent); }
.btn.go:hover { --b: var(--p1-hi); --f: var(--p1-hi); }
.btn.go:focus-visible { --b: var(--p2); }
.btn.warm { --b: var(--p1); --t: var(--p1); }
.btn.warm:hover, .btn.warm[aria-expanded="true"] { --f: var(--p1); --t: var(--on-accent); }
.btn.cold { --b: var(--p2); --t: var(--p2); }
.btn.cold:hover { --f: var(--p2); --t: var(--on-accent); }
.btn.rec { --b: var(--hot); --t: var(--hot); }
.btn.rec:hover { --f: var(--hot); --t: var(--on-accent); }
.btn.small { min-height: 2.4rem; padding: .55rem .95rem; font-size: .8rem; --cut: .5rem; }
.btn[aria-disabled="true"] { --t: var(--dim); cursor: default; }
.btn[aria-disabled="true"]:hover { --b: var(--line-hi); }
.btn .seg { align-self: stretch; display: grid; place-items: center; margin: calc(1px - .8rem) calc(1px - 1.4rem) calc(1px - .8rem) .3rem; padding: 0 1.25rem 0 .95rem; background: var(--on-accent); color: var(--p1); font: 400 .92rem var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { --c: var(--line-hi); display: inline-flex; align-items: center; gap: .45rem; padding: .34rem .6rem; border: 1px solid var(--c); color: var(--dim); font: 600 .74rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.chip.host { --c: var(--p1); color: var(--p1); }
.chip.guest { --c: var(--p2); color: var(--p2); }
.chip.hot { --c: var(--hot); color: var(--hot); }
.chip.ok { --c: var(--ok); color: var(--ok); }
.chip.solid { background: var(--p1); color: var(--on-accent); --c: var(--p1); }
.chip.dl-total { color: var(--text); text-decoration: none; }
.chip.dl-total svg { width: 1em; height: 1em; flex: none; color: var(--p1); }
.chip.dl-total:hover { --c: var(--p1); }
.dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; animation: ping 2.2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }

/* ---------- HUD frame: corner ticks and a tab ---------- */
.frame { --c: var(--p1); position: relative; border: 1px solid var(--line); background: var(--panel); }
.frame.guest { --c: var(--p2); }
.frame.hot { --c: var(--hot); }
.frame::after {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  --t: 1rem; --w: 2px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--w), linear-gradient(var(--c) 0 0) 0 0 / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--w), linear-gradient(var(--c) 0 0) 100% 0 / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--w), linear-gradient(var(--c) 0 0) 0 100% / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--w), linear-gradient(var(--c) 0 0) 100% 100% / var(--w) var(--t);
  background-repeat: no-repeat;
}
.tab {
  position: absolute; z-index: 4; top: -1px; left: -1px;
  display: inline-flex; align-items: center; gap: .5rem; max-width: calc(100% - 3rem);
  padding: .45rem 1.25rem .45rem .8rem; background: var(--c, var(--p1)); color: var(--on-accent);
  font: 600 .76rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, 100% 0, calc(100% - .6rem) 100%, 0 100%);
}
.tab.right { left: auto; right: -1px; padding: .45rem .8rem .45rem 1.25rem; clip-path: polygon(0 0, 100% 0, 100% 100%, .6rem 100%); background: var(--ground); color: var(--c); box-shadow: inset 0 0 0 1px var(--c); font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(2rem, 5vw, 7rem); align-items: center; padding-block: clamp(1.4rem, 3.2vw, 3.8rem) clamp(2.4rem, 4.5vw, 5rem); }
.hero > .film, .hero > .angles { margin-top: 2.5rem; }
.hero-head { grid-column: 1 / -1; min-width: 0; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem; opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 75% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 65% 75% at 75% 40%, #000 0%, transparent 75%);
}
.hero h1 { font: 400 clamp(2.1rem, 5.3vw, 12rem)/1.04 var(--display); letter-spacing: -.005em; margin: 1.15rem 0 clamp(1.2rem, 2.4vw, 2.8rem); }
.hero h1 .nb { white-space: nowrap; }
.hero h1 br { display: none; }
/* the one loud thing: a word on a yellow block */
.accent {
  display: inline-block; font-style: normal; color: var(--on-accent); background: var(--p1);
  padding: .04em .2em .08em; line-height: 1.02;
  clip-path: polygon(0 0, 100% 0, 100% 68%, calc(100% - .3em) 100%, 0 100%);
}
.glitch { animation: glitch 9s steps(1, end) 1.5s infinite; }
@keyframes glitch {
  0%, 90%, 100% { transform: none; text-shadow: none; }
  91% { transform: translateX(-.05em); text-shadow: .05em 0 0 var(--p2), -.05em 0 0 var(--hot); }
  92% { transform: translateX(.04em) skewX(-8deg); text-shadow: -.06em 0 0 var(--p2), .04em 0 0 var(--hot); }
  93% { transform: translateX(-.02em); text-shadow: .03em 0 0 var(--p2); }
}
.lede { max-width: 30em; margin: 0 0 1.6rem; font-size: clamp(1.12rem, 1.45vw, 1.45rem); line-height: 1.5; color: var(--dim); }
.lede strong { color: var(--text); font-weight: 500; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }

/* countdown */
.timer { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.4rem; }
.timer .segs { display: flex; gap: .35rem; }
.timer .segs > span { display: grid; justify-items: center; min-width: 3.4rem; padding: .5rem .5rem .4rem; background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--line-hi); }
.timer .segs > span:first-child { border-top-color: var(--p1); }
.timer b { min-width: 2ch; text-align: center; font: 400 clamp(1.3rem, 1.9vw, 2.1rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.timer .segs > span:first-child b { color: var(--p1); }
.timer i { margin-top: .32rem; font: 600 .62rem var(--hud); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.timer .when { display: grid; gap: .2rem; }
.timer .when .fine { margin: 0; }

/* Discord card */
.dc { --under: var(--panel); display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; max-width: 37rem; margin-top: 1.4rem; padding: .85rem 1.1rem; background: var(--panel); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s; }
.dc:hover { border-color: var(--line-hi); }
.dc:hover .btn { --f: var(--p1); --t: var(--on-accent); }
.dc-icon, .dc-mark { flex: none; width: 3.2rem; height: 3.2rem; border-radius: 28%; }
.dc-mark { display: grid; place-items: center; background: var(--p1); color: var(--on-accent); font: 400 1.05rem/1 var(--display); }
.dc-body { flex: 1 1 11rem; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.dc-name { font: 400 1.1rem/1.2 var(--display); overflow-wrap: anywhere; }
.dc-counts { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; font: 400 .86rem var(--mono); color: var(--dim); }
.dc-counts > span { display: inline-flex; align-items: center; gap: .5rem; }
.dc-counts i { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--dim); }
.dc-counts i.on { background: var(--ok); }
.dc-counts b { color: var(--text); font-weight: 500; }
.dc .btn { flex: none; }
/* Medal's clip contest under the Discord card: the left column has room beside the reel, so on wide
   screens the card lifts the Discord card rather than pushing the hero down */
.mc { --under: var(--panel); container-type: inline-size; display: flex; align-items: flex-start; gap: .8rem 1.2rem; max-width: 37rem; margin-top: .8rem; padding: .85rem 1.1rem 1rem; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hot); }
.mc-mark { flex: none; width: 3.2rem; height: 3.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; background: var(--hot); color: var(--on-accent); font: 400 .9rem/1 var(--display); clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.mc-body { flex: 1 1 auto; min-width: 0; display: grid; grid-template-areas: "title" "text" "links"; gap: .4rem; justify-items: start; }
.mc-title { grid-area: title; font: 400 1.1rem/1.2 var(--display); }
.mc p { grid-area: text; margin: 0; color: var(--dim); font-size: .88rem; line-height: 1.5; }
.mc p b, .give p b, .pcard p b, .mtoast p b { color: var(--text); font-weight: 600; }
.mc-links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; margin-top: .3rem; }
/* a wide card puts the links beside the title: the card stays short enough for the first screen */
@container (min-width: 34rem) {
  .mc-body { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title links" "text text"; align-items: center; }
  .mc-links { margin-top: 0; }
}

/* the reel: our own poster until a click, then the player (on nightcoop.net only) */
.film { min-width: 0; margin: 0; }
.film .frame { padding: 0; background: var(--ground); }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--ground); overflow: hidden; container-type: inline-size; }
.yt img, .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.yt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); opacity: 0; transition: opacity .2s; }
a.yt:hover::after { opacity: 1; }
.yt-meta { position: absolute; left: 3.6%; top: 11%; max-width: 36%; display: flex; flex-direction: column; gap: .55em; font-size: clamp(.62rem, 1.7cqw, 1rem); }
.yt-note { font: 500 1.35em/1.3 var(--body); color: var(--text); text-wrap: balance; }
@container (max-width: 34rem) { .yt-note { display: none; } }
.yt-play { position: absolute; left: 50%; top: 50%; width: clamp(2.9rem, 10cqw, 6rem); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--p1); clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%); transition: transform .15s ease-out; }
.yt-play::after { content: ""; position: absolute; inset: 29% 26% 29% 36%; background: var(--on-accent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
a.yt:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); }
.reel-nav { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; }
.reel-nav button { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; background: none; color: var(--text); border: 1px solid var(--line-hi); font: 500 1.2rem/1 var(--hud); cursor: pointer; }
.reel-nav button:hover { border-color: var(--p1); color: var(--p1); }
.reel-nav .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--band); }
.ticker-track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track > span { display: inline-flex; align-items: center; gap: .9rem; padding: .8rem 1.6rem .8rem 0; font: 600 .82rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.ticker-track > span::before { content: ""; width: .45rem; height: .45rem; background: var(--p1); clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); flex: none; }
.ticker-track > span:nth-child(even)::before { background: var(--p2); }
.ticker-track b { color: var(--text); font-weight: 600; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- the flight: the second screen ---------- */
.pano { position: relative; height: 280vh; height: 280svh; background: var(--ground); }
.pano-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; }
.pano-poster, .pano-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pano-poster { object-fit: cover; }
.pano-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--ground) 80%, transparent) 0%, transparent 22%, transparent 58%, color-mix(in srgb, var(--ground) 85%, transparent) 100%); }
.pano-corners { position: absolute; inset: calc(var(--top-h) + .6rem) clamp(.7rem, 1.6vw, 1.6rem) clamp(.7rem, 1.6vw, 1.6rem); z-index: 2; pointer-events: none; --c: color-mix(in srgb, var(--p1) 75%, transparent); --t: 1.6rem; --w: 2px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--w), linear-gradient(var(--c) 0 0) 0 0 / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--w), linear-gradient(var(--c) 0 0) 100% 0 / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--w), linear-gradient(var(--c) 0 0) 0 100% / var(--w) var(--t),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--w), linear-gradient(var(--c) 0 0) 100% 100% / var(--w) var(--t);
  background-repeat: no-repeat; }
.pano-hud { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--top-h) + clamp(1.3rem, 2.2vw, 2.2rem)); display: flex; justify-content: space-between; gap: 1rem; pointer-events: none; }
.pano-hud span { display: inline-flex; align-items: center; gap: .55rem; font: 600 .78rem/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--text); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.pano-hud .rec { color: var(--hot); }
.pano-hud .count { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.pano-title, .pz { position: absolute; z-index: 4; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: clamp(2rem, 6vh, 4.5rem); transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.pano-title { right: max(var(--gutter), env(safe-area-inset-right, 0px)); pointer-events: none; display: grid; gap: .8rem; }
.pano-title h2 { font: 400 clamp(2rem, 4.4vw, 7rem)/1 var(--display); margin: 0; max-width: 14ch; text-shadow: 0 .1em .6em rgba(0, 0, 0, .6); }
.pano-title p { margin: 0; max-width: 34rem; font-size: clamp(1rem, 1.3vw, 1.3rem); color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.pano.late .pano-title { opacity: 0; transform: translateY(1.2rem); }
.pano-hud { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }

/* the closing plate: the game's update the flight was shot on */
.pz { width: min(19rem, calc(100% - 2 * var(--gutter))); padding: 2.6rem 1.15rem 1.15rem; display: grid; gap: .7rem; justify-items: start;
  background: color-mix(in srgb, var(--ground) 84%, transparent); border: 1px solid var(--line-hi);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(1rem); pointer-events: none; }
.pz .tab { font-size: .82rem; }
.pz p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text); }
.pz .chip { white-space: normal; line-height: 1.2; }
.pano.end .pz { opacity: 1; transform: none; }

/* marks that ride with the people in the shot (none at the moment; site.js moves them along their tracks) */
.pano-marks { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pano:not(.ready) .pano-marks { display: none; }
.pm { --c: var(--p1); position: absolute; left: 0; top: 0; will-change: transform; }
.pm.guest { --c: var(--p2); }
.pm.hot { --c: var(--hot); }
.pm .pin { position: absolute; left: -.45rem; top: -.45rem; width: .9rem; height: .9rem; border: 2px solid var(--c); background: color-mix(in srgb, var(--ground) 55%, transparent); transform: rotate(45deg); }
.pm .card { position: absolute; left: 1.4rem; bottom: 1.1rem; width: max-content; max-width: min(17rem, 60vw); padding: .55rem .75rem .6rem; background: color-mix(in srgb, var(--ground) 82%, transparent); border: 1px solid var(--c); opacity: 0; transition: opacity .35s; }
.pm .card b { display: block; font: 600 .74rem/1.1 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.pm .card span { display: block; margin-top: .3rem; font-size: .88rem; line-height: 1.35; }
.pm.on .pin { background: var(--c); }
.pm.on .card { opacity: 1; }

/* ---------- spec strip ---------- */
.spec { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.spec > div { min-width: 0; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding-block: .95rem; border-top: 1px solid var(--line); }
.spec > div:first-child { border-top: 0; }
.spec dt { padding-top: .18rem; }
.spec dd { margin: 0; font-weight: 500; }
.spec dd small { display: block; color: var(--dim); font-size: .82rem; font-weight: 400; margin-top: .15rem; }

/* ---------- Medal: the mark, the record key and the partner tag ---------- */
.partner-mark { display: inline-flex; align-items: center; gap: .65rem; font: 400 1.15rem/1 var(--display); }
.rec-key { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border: 1px solid var(--hot); color: var(--hot); font: 600 .72rem/1 var(--hud); letter-spacing: .12em; }
.rec-key .dot { animation-duration: 1.4s; }
.kbd { display: inline-block; padding: .05rem .4rem; border: 1px solid var(--line-hi); border-bottom-width: 2px; background: var(--panel); color: var(--text); font: 500 .82rem var(--mono); }
.ad-tag { font: 500 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: clamp(3.2rem, 6.5vw, 7.5rem); border-top: 1px solid var(--line); }
.band { background: var(--band); --under: var(--band); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 6rem); }
.split > * { min-width: 0; }
.sec-head { display: grid; gap: 1rem; align-content: start; }
.sec-head p { margin: 0; max-width: 30rem; color: var(--dim); }
.sec-head .btn { justify-self: start; margin-top: .4rem; }
h2 { font: 400 clamp(1.6rem, 2.5vw, 2.6rem)/1.1 var(--display); margin: 0; overflow-wrap: break-word; hyphens: auto; }
.more { display: inline-flex; align-items: center; gap: .5rem; font: 600 .84rem var(--hud); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line-hi); padding-bottom: .2rem; justify-self: start; }
.more::after { content: "→"; color: var(--p1); transition: transform .15s; }
.more:hover { border-color: var(--p1); }
.more:hover::after { transform: translateX(.2rem); }

/* rules: who decides */
.rules { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 2.2rem clamp(1.5rem, 3vw, 4rem); }
.rules > div { --c: var(--p1); position: relative; min-width: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
.rules > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.4rem; height: 2px; background: var(--c); }
.rules > div.guest { --c: var(--p2); }
.rules > div.all { --c: var(--text); }
.rules > div.hot { --c: var(--hot); }
.rules dt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .5rem; font: 600 1.15rem/1.3 var(--body); }
.rules dd { margin: 0; max-width: 36rem; color: var(--dim); }
.who { flex: none; font: 600 .66rem/1 var(--hud); letter-spacing: .14em; text-transform: uppercase; padding: .3rem .45rem; border: 1px solid var(--c); color: var(--c); }

/* PvP */
.pvp { --c: var(--hot); }
.pvp .eyebrow { --c: var(--hot); }
.pvp-switch { --c: var(--line-hi); display: inline-flex; align-items: center; gap: .9rem; margin-top: .4rem; padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; font: 600 .82rem var(--hud); letter-spacing: .12em; text-transform: uppercase; justify-self: start; }
.pvp-switch .track { position: relative; width: 3.2rem; height: 1.5rem; border: 1px solid var(--c); background: var(--ground); transition: border-color .2s; }
.pvp-switch .knob { position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); background: var(--dim); transition: transform .25s cubic-bezier(.3, .7, .2, 1), background-color .2s; }
.pvp-switch[aria-checked="true"] { --c: var(--hot); border-color: var(--hot); }
.pvp-switch[aria-checked="true"] .knob { transform: translateX(1.7rem); background: var(--hot); }
.pvp-switch .state { min-width: 3.2rem; color: var(--dim); }
.pvp-switch[aria-checked="true"] .state { color: var(--hot); }
.pvp .rules > div { --c: var(--line-hi); transition: border-color .3s; }
.pvp.armed .rules > div { --c: var(--hot); }
.pvp.armed { background: linear-gradient(180deg, color-mix(in srgb, var(--hot) 9%, var(--band)), var(--band) 60%); }

/* a plate under a section head: how the story is synced and how far it is tested */
.bnote { margin-top: 1.2rem; max-width: 30rem; padding: 2.7rem 1.2rem 1.15rem; }
.bnote dl { margin: 0; display: grid; gap: .9rem; }
.bnote dl > div + div { padding-top: .9rem; border-top: 1px solid var(--line); }
.bnote dt { font: 600 .76rem/1.2 var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--p1); }
.bnote dd { margin: .35rem 0 0; color: var(--text); font-size: .95rem; line-height: 1.5; }

/* beta at a glance */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cards > div { --c: var(--p1); position: relative; min-width: 0; padding: 1.4rem 1.3rem 1.5rem; background: var(--ground); display: grid; gap: .55rem; align-content: start; transition: background-color .2s; }
.cards > div::before { content: ""; position: absolute; top: -1px; left: -1px; width: 1.4rem; height: 2px; background: var(--c); }
.band .cards > div { background: var(--band); }
.cards > div:hover { background: var(--panel); }
.cards > div.guest { --c: var(--p2); }
.cards > div.hot { --c: var(--hot); }
.cards .eyebrow { --c: inherit; }
.cards h3 { margin: 0; font: 600 1.12rem/1.3 var(--body); }
.cards p { margin: 0; color: var(--dim); font-size: .95rem; }

/* start: steps and the latest build */
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, 4vw, 6rem); align-items: start; }
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0 1.2rem; color: var(--dim); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: span 2; font: 400 2.4rem/1 var(--display); color: var(--line-hi); }
.steps li:first-child::before { color: var(--p1); }
.steps strong { display: block; margin-bottom: .3rem; color: var(--text); font: 600 1.15rem/1.3 var(--body); }

/* release card */
.rel { --c: var(--p2); padding: 2.9rem clamp(1.1rem, 2vw, 2rem) clamp(1.2rem, 2vw, 1.8rem); --under: var(--panel); }
.rel-ver { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.rel-ver b { font: 400 clamp(1.8rem, 3vw, 3rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.rel-meta { margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr)); gap: .9rem 1.2rem; }
.rel-meta div { min-width: 0; }
.rel-meta dt { font: 600 .68rem var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rel-meta dd { margin: .2rem 0 0; font: 500 .95rem var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.2rem; margin-top: 1.4rem; }
.rel-empty p { margin: .6rem 0 0; color: var(--dim); }
.demo-note { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .4rem .65rem; border: 1px dashed var(--p1); color: var(--p1); font: 500 .74rem/1.4 var(--mono); }

/* network diagram */
.net-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem clamp(2rem, 4vw, 6rem); align-items: center; }
.net-fig { margin: 0; }
.net-fig svg { display: block; width: 100%; height: auto; max-width: 44rem; overflow: visible; }
.net-fig .node rect { fill: var(--panel); stroke: var(--line-hi); }
.net-fig .node.host rect { stroke: var(--p1); }
.net-fig .node.guest rect { stroke: var(--p2); }
.net-fig .node text { fill: var(--text); font: 600 16px var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.net-fig .node text.sub { fill: var(--dim); font: 400 12px var(--mono); letter-spacing: .02em; text-transform: none; }
.net-fig .link { fill: none; stroke-width: 1.5; }
.net-fig .link.direct { stroke: url(#hostguest); stroke-dasharray: 6 6; }
.net-fig .link.relay { stroke: var(--line-hi); }
.net-fig .cap { fill: var(--dim); font: 400 12px var(--mono); }
.net-fig .pkt.p1 { fill: var(--p1); }
.net-fig .pkt.p2 { fill: var(--p2); }
.net-fig .pkt.p3 { fill: var(--text); }
.facts { margin: 0; display: grid; gap: 1.4rem; }
.facts > div { border-top: 1px solid var(--line); padding-top: .9rem; }
.facts dt { font: 600 1.08rem/1.3 var(--body); margin-bottom: .3rem; }
.facts dd { margin: 0; color: var(--dim); }
code, .code { font: 400 .88em var(--mono); background: var(--panel); border: 1px solid var(--line); padding: .05rem .35rem; overflow-wrap: anywhere; }

/* questions */
.qa { min-width: 0; }
.qa details { border-top: 1px solid var(--line); break-inside: avoid; }
.qa summary { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.05rem 0; list-style: none; cursor: pointer; font: 600 1.08rem/1.35 var(--body); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; font: 400 1.3rem/1 var(--display); color: var(--p1); transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--p1); }
.qa .a { padding: 0 0 1.3rem; max-width: 44rem; color: var(--dim); }
.qa .a p { margin: 0 0 .6rem; }
.qa .a p:last-child { margin: 0; }
.qa .a a { color: var(--p2); }

/* support: Medal and Patreon side by side */
.give { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; }
.give > div { --under: var(--panel); display: grid; gap: .9rem; align-content: start; justify-items: start; padding: 2.7rem 1.3rem 1.4rem; }
.give h3 { margin: 0; font: 400 1.4rem/1.15 var(--display); }
.give p { margin: 0; color: var(--dim); }
.give-intro { margin: 0 0 1.6rem; max-width: 40rem; font-size: 1.1rem; color: var(--dim); }
.give .row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }

/* footer */
footer { border-top: 1px solid var(--line); padding-block: 2.6rem 3rem; color: var(--dim); font-size: .9rem; }
.foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 2rem 3rem; }
.foot h3 { margin: 0 0 .8rem; font: 600 .74rem var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--p1); }
.foot .legal { grid-column: 1 / -1; display: grid; gap: .4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.foot .legal p { margin: 0; max-width: 52rem; }

/* ---------- inner pages ---------- */
.page-hero { position: relative; isolation: isolate; display: grid; gap: 1.1rem; padding-block: clamp(2rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem); }
.page-hero h1 { margin: 0; font: 400 clamp(2.2rem, 4.8vw, 7rem)/1.04 var(--display); }
.page-hero .lede { margin: 0; }
.page-hero .cta { margin-top: .4rem; }

/* download page */
.dl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, 4vw, 5rem); align-items: start; }
.dl-side { display: grid; gap: 1.5rem; }
.req { margin: 0; display: grid; gap: 1rem; }
.req > div { border-top: 1px solid var(--line); padding-top: .8rem; }
.req dt { font: 600 .7rem var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.req dd { margin: .25rem 0 0; }
.req dd a { color: var(--p2); }
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.4rem 0 .4rem; }
.filters button { padding: .48rem .8rem; background: none; color: var(--dim); border: 1px solid var(--line-hi); cursor: pointer; font: 600 .76rem var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.filters button:hover { color: var(--text); border-color: var(--text); }
.filters button[aria-pressed="true"] { background: var(--p1); border-color: var(--p1); color: var(--on-accent); }
.vlist { margin-top: .6rem; }
.vrow { --under: var(--ground); display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem 2rem; padding-block: 1.3rem; border-top: 1px solid var(--line); }
.vrow h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font: 400 1.35rem/1.15 var(--display); }
.vmeta { margin: .55rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font: 400 .82rem var(--mono); color: var(--dim); }
.vmeta b { color: var(--text); font-weight: 500; }
.vrow .notes summary { cursor: pointer; margin-top: .7rem; font: 600 .78rem var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--p2); }
.vrow .notes ul { margin: .7rem 0 0; padding-left: 1.15rem; color: var(--dim); max-width: 46rem; }
.vrow .notes li { margin-bottom: .3rem; }
.vrow .notes li::marker { color: var(--p1); }
.vrow .act { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.vrow.yanked h3 b { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--hot); }
.yank-note { margin: .6rem 0 0; color: var(--hot); font-size: .92rem; }
.hashline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; font: 400 .74rem var(--mono); color: var(--faint); }
.hashline code { color: var(--dim); font-size: .74rem; }
.copy-btn { padding: .3rem .55rem; background: none; border: 1px solid var(--line-hi); color: var(--dim); font: 600 .68rem var(--hud); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.copy-btn:hover { color: var(--text); border-color: var(--text); }
.copy-btn.done { color: var(--ok); border-color: var(--ok); }
.files-extra { margin: .5rem 0 0; font-size: .88rem; color: var(--dim); }
.files-extra a { color: var(--p2); }
.state-msg { padding: 1.4rem 0; color: var(--dim); border-top: 1px solid var(--line); }

/* partner card in a sidebar (like the launcher card) */
.pcard { --c: var(--hot); --under: var(--panel); padding: 2.6rem 1.3rem 1.3rem; display: grid; gap: .9rem; }
.pcard .partner-mark { font-size: 1.35rem; }
.pcard p { margin: 0; color: var(--dim); font-size: .95rem; }
.pcard .row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }

/* docs */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 5rem); padding-bottom: 4rem; }
.toc { min-width: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .4rem; }
.toc a { display: block; white-space: nowrap; padding: .55rem .8rem; border: 1px solid var(--line); text-decoration: none; color: var(--dim); font: 500 .92rem var(--body); }
.toc a:hover { color: var(--text); }
.toc a.on { color: var(--text); border-color: var(--p1); background: var(--panel); }
.toc .eyebrow { margin-bottom: .8rem; }
.doc { min-width: 0; max-width: 54rem; }
.doc article { padding-block: 1rem 3.5rem; }
.doc article + article { border-top: 1px solid var(--line); padding-top: 2.6rem; }
.doc h2 { margin-bottom: 1rem; }
.doc h3 { margin: 2rem 0 .6rem; font: 600 1.15rem/1.3 var(--body); }
.doc p, .doc li { color: var(--dim); }
.doc p { margin: 0 0 1rem; }
.doc strong { color: var(--text); font-weight: 600; }
.doc ol, .doc ul { padding-left: 1.3rem; margin: 0 0 1rem; display: grid; gap: .45rem; }
.doc li::marker { color: var(--p1); font-family: var(--mono); }
.doc a { color: var(--p2); }
pre { position: relative; margin: 0 0 1.2rem; padding: 1rem 1.1rem; overflow-x: auto; background: var(--code); border: 1px solid var(--line); border-left: 2px solid var(--p1); font: 400 .86rem/1.65 var(--mono); color: #ecebe0; }
pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
pre .c { color: var(--faint); }
pre .copy-btn { position: absolute; top: .5rem; right: .5rem; background: var(--code); }
.note { margin: 0 0 1.2rem; padding: .9rem 1.1rem; background: var(--panel); border-left: 2px solid var(--p2); color: var(--dim); }
.note.warn { border-left-color: var(--hot); }
.note p:last-child { margin: 0; }
.tbl { overflow-x: auto; margin: 0 0 1.2rem; border: 1px solid var(--line); }
.tbl table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
.tbl th, .tbl td { padding: .7rem .85rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { border-top: 0; background: var(--panel); font: 600 .7rem var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.tbl td { color: var(--dim); }
.tbl td:first-child { color: var(--text); }
.path { font: 400 .86rem var(--mono); color: var(--text); overflow-wrap: anywhere; }

/* beta page */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 2.4rem clamp(1.5rem, 3vw, 3.5rem); }
.feat { --c: var(--p1); min-width: 0; border-top: 1px solid var(--line); padding-top: 1rem; position: relative; }
.feat::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.4rem; height: 2px; background: var(--c); }
.feat.guest { --c: var(--p2); }
.feat.hot { --c: var(--hot); }
.feat h3 { margin: 0 0 .5rem; font: 600 1.15rem/1.3 var(--body); }
.feat ul { margin: 0; padding-left: 1.1rem; color: var(--dim); display: grid; gap: .35rem; }
.feat li::marker { color: var(--c); }
.known { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.known li { display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--dim); }
.known strong { color: var(--text); font-weight: 600; }

/* medal page */
.angles { margin: 0; }
.angles .frame { background: var(--ground); }
.angles img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.toast { position: absolute; z-index: 4; right: clamp(.6rem, 2vw, 1.4rem); bottom: clamp(.6rem, 2vw, 1.4rem); display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .8rem; background: color-mix(in srgb, var(--ground) 88%, transparent); border: 1px solid var(--hot); font: 600 .76rem/1 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.toast .dot { color: var(--hot); }
.prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.4rem; }
.prizes > div { display: grid; gap: .35rem; align-content: start; padding: 2.7rem 1.3rem 1.3rem; }
.prizes b { font: 400 clamp(2.4rem, 4vw, 3.6rem)/1 var(--display); color: var(--text); }
.prizes span:not(.tab) { color: var(--dim); }
.prizes-note { margin: .8rem 0 2.4rem; }

/* ---------- Medal on arrival: a notice that stays until closed ---------- */
.mtoast {
  --under: var(--panel);
  position: fixed; z-index: 44; right: calc(1rem + env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: min(23rem, calc(100% - 2rem)); padding: 1rem 1.1rem 1.1rem 1.25rem; display: grid; gap: .6rem;
  background: var(--panel); border: 1px solid var(--line-hi); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .65);
  opacity: 0; transform: translateY(1rem); transition: opacity .35s, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.mtoast::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--hot); }
.mtoast.in { opacity: 1; transform: none; }
/* while the flight holds the screen the notice steps aside, and comes back after it */
html.in-flight .mtoast.in, html.in-flight .preview-bar { opacity: 0; transform: translateY(1rem); pointer-events: none; }
.mt-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mt-close { display: grid; place-items: center; width: 2rem; height: 2rem; margin: -.4rem -.5rem -.4rem 0; background: none; border: 0; color: var(--dim); font: 400 1.4rem/1 var(--body); cursor: pointer; }
.mt-close:hover { color: var(--text); }
.mtoast h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font: 400 1.2rem/1.2 var(--display); }
.mtoast p { margin: 0; color: var(--dim); font-size: .92rem; line-height: 1.5; }
.mtoast .row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .2rem; }
.mtoast .more { font-size: .78rem; }

/* ---------- "Support": a window in the middle over the blurred page, Medal or Patreon ---------- */
/* the page under it holds still; the gutter keeps it from shifting when its scrollbar goes */
html.sm-open { overflow: hidden; scrollbar-gutter: stable; }
.smodal {
  width: min(48rem, calc(100% - 2rem)); max-width: none; max-height: calc(100% - 2rem); margin: auto; padding: 0;
  background: var(--ground); color: var(--text); border: 1px solid var(--line-hi); box-shadow: 0 2rem 6rem rgba(0, 0, 0, .75);
  overflow: auto; overscroll-behavior: contain;
}
/* ::backdrop does not see the page's colour tokens in every browser: the ground colour is written out */
.smodal::backdrop { background: rgba(6, 6, 6, .55); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.smodal[open] { animation: sm-in .28s cubic-bezier(.2, .7, .2, 1); }
.smodal[open]::backdrop { animation: sm-fade .28s ease-out; }
@keyframes sm-in { from { opacity: 0; transform: translateY(1rem) scale(.98); } }
@keyframes sm-fade { from { opacity: 0; } }
.sm-box { position: relative; display: grid; gap: 1.2rem; padding: 1.5rem 1.6rem 1.7rem; }
.sm-box::before { content: ""; position: absolute; left: 0; top: 0; width: max(4rem, 12%); height: 3px; background: var(--p1); }
.sm-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sm-head h2 { margin: 0; font: 400 clamp(1.45rem, 2.3vw, 2rem)/1.15 var(--display); }
.sm-lead { margin: 0; max-width: 38rem; color: var(--dim); font-size: 1.02rem; }
.smodal .give > div { --under: var(--panel); }

/* preview-only switch (artifact build) */
.preview-bar { position: fixed; z-index: 45; left: calc(1rem + env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; background: var(--panel); border: 1px dashed var(--p1); font: 600 .72rem var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .5); transition: opacity .35s, transform .5s; }
.preview-bar button { padding: .35rem .6rem; background: none; border: 1px solid var(--line-hi); color: var(--text); font: inherit; letter-spacing: inherit; cursor: pointer; }
.preview-bar button[aria-pressed="true"] { background: var(--p1); border-color: var(--p1); color: var(--on-accent); }

/* toast for page notices */
.notice { position: fixed; z-index: 47; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100% - 2rem); padding: .7rem 1rem; background: var(--panel); border: 1px solid var(--p1); color: var(--text); font-size: .9rem; box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .5); }

/* gentle arrival: content is readable at rest; it only settles into place */
html.rv-on .rv { transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
html.rv-on .rv.below { transform: translateY(1.6rem); }

/* ---------- wider screens ---------- */
@media (min-width: 40em) {
  .hero h1 br { display: inline; }
}
@media (min-width: 48em) {
  .steps { gap: 2.4rem; }
}
@media (min-width: 56em) {
  .start-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .net-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .vrow { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .known li { grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; }
}
@media (min-width: 60em) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hero > .film, .hero > .angles { margin-top: 0; }
}
@media (min-width: 64em) {
  .qa-cols { columns: 2; column-gap: clamp(2rem, 4vw, 5rem); }
  .dl-grid { grid-template-columns: minmax(0, 8fr) minmax(16rem, 4fr); }
  .dl-side { position: sticky; top: calc(var(--top-h) + 1.5rem); }
  .docs { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc nav { position: sticky; top: calc(var(--top-h) + 1.5rem); }
  .toc ol { display: grid; gap: .15rem; overflow: visible; padding: 0; }
  .toc a { white-space: normal; border: 0; border-left: 2px solid var(--line); }
  .toc a.on { border-left-color: var(--p1); }
}
@media (min-width: 75em) {
  .spec { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 2.4vw, 3.5rem); }
  .spec > div { display: block; border-top: 0; padding-block: 1.8rem; }
  .spec dt { padding: 0 0 .5rem; }
}
@media (min-width: 90em) {
  .split { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
}
/* short screens (laptops, 1080p with browser bars): a tighter hero keeps the Discord card in the first screen */
@media (min-width: 60em) and (max-height: 62em) {
  .hero { padding-top: 1.1rem; }
  .hero h1 { font-size: clamp(1.8rem, 4.3vw, 12rem); margin-block: .9rem 1.3rem; }
  .lede { font-size: 1.05rem; margin-bottom: 1.1rem; }
  .cta { gap: .6rem; }
  .timer { margin-top: 1rem; }
  .timer .segs > span { min-width: 3rem; padding-block: .35rem .3rem; }
  .dc { margin-top: 1rem; padding-block: .7rem; }
  .mc { margin-top: .7rem; padding-block: .7rem .8rem; }
  .mc p { font-size: .84rem; }
}

/* ---------- phones and narrow windows ---------- */
@media (min-width: 70em) {
  .nav a.nav-partner[aria-current="page"]::after { left: 1.6rem; }
}
/* the header folds into the menu button below 70em: seven sections and the partner do not fit one row there */
@media (max-width: 69.99em) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: .4rem max(var(--gutter), env(safe-area-inset-right, 0px)) 1rem max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--band); border-bottom: 1px solid var(--line); }
  .top.open .nav { display: flex; }
  .nav a { padding-block: .85rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .nav a[aria-current="page"]::after { top: 0; bottom: 0; left: auto; right: 0; width: 3px; height: auto; }
  .nav a.nav-partner { padding-left: 0; border-left: 0; }
  .top-in { gap: .6rem; }
}
@media (max-width: 47.99em) {
  /* the flight stays full-screen on a window that follows the action; the plate spans the width */
  .pano { height: 240svh; }
  .pm .card { display: none; }
  .pano-title { bottom: 1.4rem; gap: .8rem; }
  .pano-title p { display: none; }
  .pz { right: max(var(--gutter), env(safe-area-inset-right, 0px)); width: auto; bottom: 1.2rem; padding: 2.4rem 1rem 1rem; }
  .pz p { font-size: .9rem; }
  .pano-hud span { font-size: .66rem; letter-spacing: .1em; white-space: nowrap; }
  .mtoast { left: calc(.75rem + env(safe-area-inset-left, 0px)); right: calc(.75rem + env(safe-area-inset-right, 0px)); bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); width: auto; padding: .8rem .9rem .9rem 1.1rem; gap: .45rem; }
  .mtoast p { font-size: .86rem; }
  .smodal { width: calc(100% - 1.5rem); max-height: calc(100% - 1.5rem); }
  .sm-box { gap: 1rem; padding: 1.2rem 1rem 1.3rem; }
  .smodal .give { gap: 1rem; }
  /* on a phone the preview switch sits under the header, clear of the notice */
  .preview-bar { left: auto; right: calc(.75rem + env(safe-area-inset-right, 0px)); bottom: auto; top: calc(var(--top-h) + .6rem); }
}
@media (max-width: 40em) {
  .top-in { padding-block: .7rem; }
  .hero { padding-top: 1rem; }
  .hero h1 { margin-block: .8rem 1.1rem; font-size: clamp(1.6rem, 7.6vw, 2.4rem); }
  .lede { font-size: 1.05rem; margin-bottom: 1.1rem; }
  .cta { gap: .5rem; }
  .cta .btn { padding-inline: .95rem; }
  .cta .btn .seg { margin-right: calc(1px - .95rem); }
  .timer .segs > span { min-width: 2.9rem; }
  .dc { margin-top: .9rem; }
  .mc { gap: .8rem; padding-inline: .9rem; }
  .mc-mark { width: 2.6rem; height: 2.6rem; font-size: .78rem; }
  .steps li { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .steps li::before { font-size: 1.9rem; }
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wire b { animation: none; left: calc(50% - 1.5rem); }
  .glitch, .dot { animation: none; }
  .net-fig .pkt { display: none; }
  .ticker-track { animation: none; flex-wrap: wrap; width: auto; }
  .ticker-track > span[aria-hidden="true"] { display: none; }
  .pano { height: auto; }
  .pano-stage { position: relative; height: 100svh; }
  .mtoast, .pano-title, .pz { transition: none; }
  .smodal[open], .smodal[open]::backdrop { animation: none; }
  /* the last frame only: the title moves up and stays beside the plate */
  .pano.late .pano-title { opacity: 1; transform: none; top: calc(var(--top-h) + 4.5rem); bottom: auto; }
  html.rv-on .rv.below { transform: none; }
}