/* Asterion Studios
   One accent (the brand's amber) on near-black, hairline structure, DIN-style
   display type to match the banner's Bahnschrift, and mono for labels the way
   the banner sets "MANAGEMENT AND SAFETY". Colour beyond the accent is kept for
   meaning: the enforcement icons wear the same orange and red they do in the
   Discord embeds, and status pills are green/amber/red. */

:root {
  --bg: #08090b;
  --bg-raise: #0c0e11;
  --surface: #101317;
  --surface-2: #15191e;
  --surface-3: #1b2026;
  --line: #1c2127;
  --line-2: #262c34;
  --line-3: #343b45;
  --text: #eceef1;
  --text-2: #a3abb5;
  --text-3: #69717c;
  --accent: #4d8dff;
  --accent-2: #7aabff;
  --accent-fill: #2f6fed;
  --accent-fill-2: #4580f5;
  --accent-ink: #ffffff;
  --accent-soft: rgb(47 111 237 / 0.16);
  --accent-line: rgb(77 141 255 / 0.42);
  --ok: #3ddc97;
  --bad: #ef5a5f;
  --warn: #e67e22;
  --info: #5aa9ff;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --nav-h: 64px;
  --font-display: "Barlow Semi Condensed", "Bahnschrift", "DIN Alternate", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.641' viewBox='0 0 60 34.641'%3E%3Cpath d='M0 17.32 10 0h20l10 17.32-10 17.321H10ZM40 17.32h20' fill='none' stroke='%238b12e3' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--font-body);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgb(47 111 237 / 0.49); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; }
h1 { font-size: clamp(40px, 6.2vw, 76px); letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 20px; }
p { margin: 0; }
.lead { font-size: clamp(16px, 1.4vw, 18px); color: var(--text-2); max-width: 56ch; line-height: 1.65; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.accent { color: var(--accent); }

.icon { width: 1.1em; height: 1.1em; flex: none; stroke-width: 1.9; }

.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent-fill); color: var(--accent-ink); padding: 8px 12px; border-radius: var(--radius-sm); }
.skip:focus { left: 8px; }

/* ── Eyebrows, links, buttons ─────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 11.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-2);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.eyebrow--plain { letter-spacing: 0.12em; color: var(--text-3); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-weight: 500; transition: color .2s; }
.link-arrow .icon { transition: transform .25s var(--ease); }
.link-arrow:hover { color: var(--text); }
.link-arrow:hover .icon { transform: translateX(3px); }

.btn {
  --h: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: var(--h); padding: 0 18px; border-radius: 999px;
  font-weight: 550; font-size: 14.5px; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .25s;
}
.btn .icon { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-fill); color: var(--accent-ink); box-shadow: 0 0 0 0 rgb(47 111 237 / 0); }
.btn--primary:hover { background: var(--accent-fill-2); box-shadow: 0 8px 28px -10px rgb(47 111 237 / 0.84); }
.btn--ghost { background: rgb(255 255 255 / 0.02); border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--line-3); background: rgb(255 255 255 / 0.05); }
.btn--danger { background: rgb(239 90 95 / 0.1); border-color: rgb(239 90 95 / 0.35); color: #ff9a9d; }
.btn--danger:hover { background: rgb(239 90 95 / 0.18); }
.btn--ok { background: rgb(61 220 151 / 0.1); border-color: rgb(61 220 151 / 0.35); color: #7ff0bf; }
.btn--ok:hover { background: rgb(61 220 151 / 0.18); }
.btn--discord { background: #5865f2; color: #fff; }
.btn--discord:hover { background: #6b77ff; box-shadow: 0 8px 28px -10px rgb(88 101 242 / 0.7); }
.btn--sm { --h: 34px; padding: 0 14px; font-size: 13.5px; }
.btn--lg { --h: 50px; padding: 0 24px; font-size: 15.5px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }
/* Sent, waiting for the page: a spinner after the label. */
.btn.is-busy::after { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }

/* ── Announcement, navigation ─────────────────────────────────────────── */
.announce {
  display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px var(--gutter);
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--text-2);
}
.announce .icon { color: var(--accent); }

.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgb(8 9 11 / 0.72); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); background: rgb(8 9 11 / 0.86); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand__word { font: 600 16px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; }
.brand__word b { font-weight: 600; color: var(--accent); margin-left: 0.45em; }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a {
  position: relative; padding: 8px 12px; border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 500;
  transition: color .2s, background .2s;
}
.nav__links a:hover { color: var(--text); background: rgb(255 255 255 / 0.04); }
.nav__links a[aria-current="page"] { color: var(--text); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent);
}
.nav__staff { display: inline-flex; align-items: center; gap: 7px; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font: 600 11px/1 var(--font-mono); }
.nav__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 999px; width: 38px; height: 38px; place-items: center; cursor: pointer; }

.user-chip {
  display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px 0 5px; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.02); transition: border-color .2s;
}
.user-chip:hover { border-color: var(--line-3); }
.user-chip img, .user-chip__blank { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); display: grid; place-items: center; }
.user-chip__name { font-size: 13.5px; font-weight: 500; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip__caret { width: 15px; color: var(--text-3); }
.menu { position: relative; }
.notif__button {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.02); color: var(--text-2); cursor: pointer; transition: .2s;
}
.notif__button:hover, .notif__button[aria-expanded="true"] { border-color: var(--line-3); color: var(--text); }
.notif__button .icon { width: 17px; height: 17px; }
.user-chip[aria-expanded="true"] { border-color: var(--accent-line); }
.user-chip .count { margin-left: -2px; }
.notif.has-unread .notif__button { color: var(--accent); border-color: var(--accent-line); }
.notif.has-unread .notif__button .icon { animation: bell-ring .9s var(--ease) 1; transform-origin: 50% 10%; }
.notif__count {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; background: var(--accent-fill); color: var(--accent-ink); font: 600 10.5px/1 var(--font-mono);
  box-shadow: 0 0 0 2px var(--bg);
}
.notif__panel { width: 320px; padding: 0; overflow: hidden; }
.notif__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.menu__panel .notif__settings {
  display: inline-flex; width: auto; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line-2); color: var(--text-2);
}
.menu__panel .notif__settings .icon { width: 13px; height: 13px; }
.notif__list { max-height: 360px; overflow-y: auto; padding: 6px; }
.menu__panel .notif__item { display: grid; gap: 2px; align-items: start; padding: 10px 10px; border-radius: var(--radius-sm); }
.notif__item strong { font-size: 13.5px; color: var(--text); font-weight: 550; }
.notif__item span { font-size: 12.5px; color: var(--text-3); }
.notif__empty { padding: 18px 10px; text-align: center; color: var(--text-3); font-size: 13.5px; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 290px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8); animation: pop .18s var(--ease);
}
.menu__head { display: grid; gap: 3px; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__clearance { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-3); }
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm);
  background: none; border: 0; text-align: left; font-size: 14px; color: var(--text-2); cursor: pointer;
}
.menu__panel a:hover, .menu__panel button:hover { background: var(--surface-2); color: var(--text); }
.menu__panel a[aria-current="page"] { color: var(--text); background: var(--accent-soft); }
.menu__panel a small { margin-left: auto; font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.menu__panel a .count { margin-left: auto; }
.menu__panel form { margin: 0; }
/* ——— Website ——— : a heading on a rule, splitting the menu into what's for everyone and what's staff only. */
.menu__section { display: flex; align-items: center; gap: 10px; padding: 10px 10px 4px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.menu__section::before, .menu__section::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.menu__section::before { flex: 0 0 12px; }
.menu__foot { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); }
.menu__head .menu__signin { justify-content: center; margin-top: 10px; background: #5865f2; color: #fff; font-weight: 600; }
.menu__head .menu__signin:hover { background: #4752c4; color: #fff; }

/* The mark: the server logo, masked from the real artwork in two layers -
   the ring and plate in white, and the A cut out of the plate, in violet. */
.mark { position: relative; display: inline-block; width: 30px; height: 30px; flex: none; transition: filter .3s; }
.mark__frame, .mark__a { position: absolute; inset: 0; }
.mark__frame {
  background: linear-gradient(160deg, #f4f6f8, #b9c0c9);
  -webkit-mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat; mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat;
}
.mark__a {
  background: linear-gradient(160deg, #9bc9ff, #2f6fed);
  -webkit-mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat; mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat;
}
.brand:hover .mark { filter: drop-shadow(0 0 6px rgb(47 111 237 / 0.84)); }

/* ── The opening sequence, on the first page of a visit ───────────────
   The ship's computer coming up (partials/intro.html). 0.1s the ring draws
   and the log starts its checks, 0.3s a sweep draws the frame, 0.5s the name
   decodes, 1.0s the A drops in, 2.15s the sync completes with every node lit,
   2.2s it reports ready, 2.8s the jump to the page. A returning visitor gets
   it in under a second (data-intro="warm"). It is all CSS, so it plays out and
   gets out of the way with no script at all; intro.js, when it runs, takes
   over the exit (html.intro-js): a jump to lightspeed, the emblem flying up
   into the header, whenever the timeline ends or a click or key skips it. */
@property --intro-sweep { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --intro-sync { syntax: "<integer>"; inherits: true; initial-value: 0; }
.intro { display: none; }
html[data-intro] { --intro-length: 2.8s; }
html[data-intro="warm"] { --intro-length: .95s; }
:is(.intro, .intro-fx) { --intro-a: #2f6fed; --intro-b: #b8d7ff; --intro-c: #4d8dff; --intro-glyph: linear-gradient(160deg, #b8d7ff, #4d8dff 55%, #2f6fed); }
html[data-season="halloween"] :is(.intro, .intro-fx) { --intro-a: #ff7a00; --intro-b: #ffd0a1; --intro-c: #ff9a3d; --intro-glyph: linear-gradient(160deg, #ffc46b, #ff7a00 55%, #c24e00); }
html[data-season="christmas"] :is(.intro, .intro-fx) { --intro-a: #2fbf71; --intro-b: #e8fff1; --intro-c: #ff4d5e; }
html[data-season="newyear"] :is(.intro, .intro-fx) { --intro-a: #e0a800; --intro-b: #fff3c4; --intro-c: #ffd166; }
html[data-season="winter"] :is(.intro, .intro-fx) { --intro-a: #3aa0ff; --intro-b: #e3f4ff; --intro-c: #9fd8ff; }
html[data-season="valentine"] :is(.intro, .intro-fx) { --intro-a: #e0245e; --intro-b: #ffd6e5; --intro-c: #ff6fae; --intro-glyph: linear-gradient(160deg, #ffd6e5, #ff6fae 55%, #e0245e); }
html[data-season="easter"] :is(.intro, .intro-fx) { --intro-a: #6bc0ff; --intro-b: #fff3a8; --intro-c: #a8e6cf; --intro-glyph: linear-gradient(160deg, #fff3a8, #ffb3cf 50%, #b6e5ff); }
html[data-season="aprilfools"] :is(.intro, .intro-fx) { --intro-a: #3ddc97; --intro-b: #fff3a8; --intro-c: #ffd166; }
html[data-intro] .intro {
  display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: auto; user-select: none;
  background: #050507;
  animation: intro-leave .6s ease var(--intro-length) forwards, intro-gone 0s linear calc(var(--intro-length) + .6s) forwards;
}
html.intro-done .intro { display: none; }
/* The landing (intro-landing.js) is a canvas over the whole screen, and so is the short
   one, which is the landing's ending on its own. The boot's parts are
   hidden for it, only the skip hint staying. If intro.js never runs, the screen is a dark
   one that clears itself after 5s; when it does, it holds the screen for as long as the
   landing plays and takes it away itself (a jump, or a skip). */
.landing { display: none; }
html[data-intro-scene="landing"] { --intro-length: 5s; }
html[data-intro-scene="port"] { --intro-length: 3s; }   /* the short one: only the landing's ending, the port's hologram */
html[data-intro-scene] .landing { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-intro-scene] .intro > :not(.landing):not(.intro__skip) { display: none; }
html.intro-js:not(.intro-out)[data-intro-scene] .intro { animation: intro-gone 0s linear 25s forwards; }  /* beats the 8s one below, until the jump */
html[data-intro-scene] .intro__skip { animation-delay: 1.2s; }
html[data-intro-scene="port"] .intro__skip { animation-delay: .5s; }
/* Scanlines and a vignette over everything. */
.intro::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.025) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 45%, rgb(0 0 0 / 0.75)); }
.intro__glow { position: absolute; left: 50%; top: 46%; width: 1000px; height: 1000px; translate: -50% -50%; background: radial-gradient(circle, color-mix(in srgb, var(--intro-a) 20%, transparent), transparent 58%); animation: intro-in 1.2s ease .15s both; }
.intro__lattice { position: absolute; inset: -20%; opacity: .15; animation: intro-in 1.3s ease both;
  -webkit-mask: radial-gradient(circle at 50% 47%, #000, rgb(0 0 0 / 0.45) 18%, transparent 40%); mask: radial-gradient(circle at 50% 47%, #000, rgb(0 0 0 / 0.45) 18%, transparent 40%); }
.intro__lattice i { position: absolute; inset: 0; background: var(--intro-a); -webkit-mask: var(--hex) 0 0 / 60px 34.641px; mask: var(--hex) 0 0 / 60px 34.641px; }

/* Corners and readouts. */
.intro__corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--intro-c); opacity: .65; animation: intro-corner .6s cubic-bezier(.2, .8, .2, 1) .1s both; }
.intro__corner--tl { top: 18px; left: 18px; border-width: 1.5px 0 0 1.5px; --from: 12px 12px; }
.intro__corner--tr { top: 18px; right: 18px; border-width: 1.5px 1.5px 0 0; --from: -12px 12px; }
.intro__corner--bl { bottom: 18px; left: 18px; border-width: 0 0 1.5px 1.5px; --from: 12px -12px; }
.intro__corner--br { bottom: 18px; right: 18px; border-width: 0 1.5px 1.5px 0; --from: -12px -12px; }
.intro__hud { position: absolute; top: 28px; display: grid; gap: 3px; font-size: 10.5px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); animation: intro-in .5s ease .2s both; }
.intro__hud b { color: var(--text-2); font-weight: 600; }
.intro__hud--tl { left: 56px; }
.intro__hud--tr { right: 56px; justify-items: end; }
.intro__signal { display: inline-flex; align-items: flex-end; gap: 2px; }
.intro__signal span { margin-right: 6px; }
.intro__signal i { width: 3px; height: calc(4px + var(--n) * 2px); background: rgb(255 255 255 / 0.12); animation: intro-lit 0s linear var(--at) forwards; }

/* The log: each check spins, then reports. */
.intro__log { position: absolute; left: 56px; bottom: 44px; width: min(420px, calc(100vw - 112px)); margin: 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.95; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.intro__log li { display: flex; gap: 8px; align-items: baseline; animation: intro-line .22s ease var(--at) both; }
.intro__log li::before { content: ">"; color: var(--intro-c); }
.intro__label { color: var(--text-2); white-space: nowrap; }
.intro__lead { flex: 1; min-width: 14px; border-bottom: 1px dotted rgb(255 255 255 / 0.16); translate: 0 -4px; }
.intro__result { display: grid; justify-items: end; white-space: nowrap; }
.intro__result > * { grid-area: 1 / 1; }
.intro__result i { width: 9px; height: 9px; align-self: center; border: 1.5px solid var(--text-3); border-right-color: transparent; border-radius: 50%;
  animation: intro-spin .6s linear infinite, intro-hide 0s linear calc(var(--at) + var(--wait)) forwards; }
.intro__result b { font-weight: 500; visibility: hidden; animation: intro-show 0s linear calc(var(--at) + var(--wait)) forwards; }
.intro__result .is-ok { color: var(--ok); }
.intro__result .is-warn { color: var(--warn); }
.intro__result .is-season { color: var(--intro-c); }
.intro__result :is(.is-visitor, .is-cleared) { padding: 0 7px; border-radius: 3px; color: var(--text); background: rgb(255 255 255 / 0.08); }
.intro__result .is-cleared { color: #fff; background: var(--intro-a); box-shadow: 0 0 14px color-mix(in srgb, var(--intro-a) 60%, transparent); }
.intro__skip { position: absolute; right: 56px; bottom: 44px; font-size: 10.5px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); animation: intro-in .5s ease .9s both; }
.intro__skip kbd { font: inherit; margin-left: 6px; padding: 4px 7px; border: 1px solid rgb(255 255 255 / 0.14); border-bottom-width: 2px; border-radius: 4px; color: var(--text-2); }
.intro__skip-tap { display: none; }
@media (hover: none) { .intro__skip-key { display: none; } .intro__skip-tap { display: inline; } }
html:not(.intro-js) .intro__skip { display: none; }

/* The centre: the emblem in its ring, the name, the status and the sync. */
.intro__core { position: absolute; left: 50%; top: 46%; translate: -50% -50%; display: grid; justify-items: center; gap: 18px; width: max-content; max-width: calc(100vw - 32px); }
.intro__emblem { position: relative; width: 210px; height: 210px; display: grid; place-items: center; margin-bottom: 4px; }
.intro__emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.intro__ticks { stroke: var(--intro-c); stroke-width: 3; stroke-dasharray: .5 5.5; opacity: .45; animation: intro-in .6s ease .15s both, intro-spin 30s linear infinite; }
.intro__ring circle { stroke-width: 1.2; stroke: rgb(255 255 255 / 0.06); }
.intro__ring circle + circle { stroke: var(--intro-c); stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 4px var(--intro-a));
  animation: intro-ring .9s cubic-bezier(.6, 0, .2, 1) .15s forwards; }
.intro__node { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #050507;
  border: 1.5px solid color-mix(in srgb, var(--intro-c) 55%, transparent); transform: rotate(calc(var(--k) * 60deg - 90deg)) translateX(96.6px);
  animation: intro-in .3s ease .15s both, intro-node .2s ease var(--at) forwards; }
.intro__mark { position: relative; width: 118px; height: 118px; filter: drop-shadow(0 0 18px var(--intro-a));
  animation: intro-sweep .8s cubic-bezier(.6, 0, .2, 1) .32s both, intro-pulse .55s ease-out 2.2s; }
:is(.intro, .intro-fx) :is(.intro__sweep, .intro__frame, .intro__edge, .intro__a) { position: absolute; inset: 0; }
.intro__sweep { -webkit-mask: conic-gradient(#000 var(--intro-sweep), transparent 0); mask: conic-gradient(#000 var(--intro-sweep), transparent 0); }
.intro__frame, .intro__edge { -webkit-mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat; mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat; }
.intro__frame { background: linear-gradient(160deg, #f4f6f8, #b9c0c9); }
/* A glint riding the sweep's leading edge. */
.intro__edge { background: conic-gradient(from calc(var(--intro-sweep) - 50deg), transparent, var(--intro-b) 50deg, transparent 50.5deg); opacity: 0; animation: intro-edge .9s linear .32s; }
.intro__a { background: var(--intro-glyph); -webkit-mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat; mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat; }
.intro .intro__a { opacity: 0; translate: 0 -24px; scale: .7; animation: intro-drop .5s cubic-bezier(.3, 1.6, .5, 1) 1s forwards; }
/* As it lands, a red and a cyan copy tear across it. */
.intro .intro__a--r, .intro .intro__a--c { translate: none; scale: none; mix-blend-mode: screen; animation: intro-glitch .42s steps(1) 1.22s; }
.intro .intro__a--r { background: #ff2a6d; }
.intro .intro__a--c { background: #00e5ff; --dir: -1; }
.intro__word { display: flex; gap: .5em; font: 700 clamp(24px, 4.2vw, 40px)/1 var(--font-display); text-transform: uppercase; color: #f4f6f8; }
.intro__word span { display: flex; }
.intro__word span + span { color: var(--intro-c); }
.intro__word i { display: inline-block; width: .82em; font-style: normal; text-align: center; animation: intro-char .3s ease calc(.48s + var(--i) * 16ms) both; }
.intro__word i.is-scrambled { color: var(--intro-c); opacity: .55; }
.intro__status { display: grid; justify-items: center; height: 1.3em; font-size: 11.5px; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.intro__status > * { grid-area: 1 / 1; }
.intro__typed { overflow: hidden; white-space: nowrap; width: 0; border-right: 1px solid var(--intro-c);
  animation: intro-type .7s steps(var(--chars, 20)) .82s forwards, intro-caret .5s step-end .82s 4, intro-leave .25s ease 2.2s forwards; }
.intro__ready { max-width: min(560px, calc(100vw - 48px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--intro-c); animation: intro-in .35s ease 2.25s both; }
/* One season line in the status and the log, the plain one otherwise. */
html:is([data-season="halloween"], [data-season="christmas"], [data-season="newyear"], [data-season="winter"], [data-season="valentine"], [data-season="easter"], [data-season="aprilfools"]) .intro__typed:not([data-season-text]),
html:not([data-season="halloween"]) .intro [data-season-text="halloween"], html:not([data-season="christmas"]) .intro [data-season-text="christmas"],
html:not([data-season="newyear"]) .intro [data-season-text="newyear"], html:not([data-season="winter"]) .intro [data-season-text="winter"],
html:not([data-season="valentine"]) .intro [data-season-text="valentine"], html:not([data-season="easter"]) .intro [data-season-text="easter"],
html:not([data-season="aprilfools"]) .intro [data-season-text="aprilfools"] { display: none; }
/* The sync: 24 segments and a count, rushing and stalling the way loading does. */
.intro__bar { display: flex; align-items: center; gap: 12px; width: min(320px, 76vw); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--intro-a) 60%, transparent));
  animation: intro-in .5s ease .3s both, intro-sync 2.15s ease-in-out forwards; }
.intro__segs { position: relative; flex: 1; height: 6px; background: rgb(255 255 255 / 0.08);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 24 - 3px), transparent 0 calc(100% / 24)); mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 24 - 3px), transparent 0 calc(100% / 24)); }
.intro__segs i { position: absolute; inset: 0 auto 0 0; width: calc(var(--intro-sync) * 1%); background: var(--intro-c); }
@supports (width: round(down, 5px, 2px)) { .intro__segs i { width: calc(round(down, var(--intro-sync) * .24, 1) / 24 * 100%); } }
.intro__pct { min-width: 9.5ch; text-align: right; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; letter-spacing: .12em; color: var(--text-2); counter-reset: intro-sync var(--intro-sync); }
.intro__pct::before { content: "SYNC " counter(intro-sync) "%"; }

/* The short boot: no log, everything at once. */
html[data-intro="warm"] :is(.intro__log, .intro__skip, .intro__typed, .intro__a--r, .intro__a--c) { display: none; }
html[data-intro="warm"] .intro__ring circle + circle { animation-duration: .45s; animation-delay: 0s; }
html[data-intro="warm"] .intro__node { animation-delay: 0s, calc(.08s + var(--k) * 60ms); }
html[data-intro="warm"] .intro__signal i { animation-delay: calc(.05s + var(--n) * 70ms); }
html[data-intro="warm"] .intro__mark { animation-duration: .4s, .55s; animation-delay: 0s, .5s; }
html[data-intro="warm"] .intro__edge { animation-duration: .45s; animation-delay: 0s; }
html[data-intro="warm"] .intro .intro__a { animation-duration: .3s; animation-delay: .12s; }
html[data-intro="warm"] .intro__word i { animation-delay: calc(var(--i) * 8ms); }
html[data-intro="warm"] .intro__ready { animation-delay: .1s; }
html[data-intro="warm"] .intro__bar { animation-duration: .3s, .48s; animation-delay: 0s; }

/* With no script the centre rushes forward as the screen fades. intro.js
   takes the exit over (a failsafe still clears the screen should it stall),
   and holds the scroll until then. */
html[data-intro] .intro__core { animation: intro-rush .45s cubic-bezier(.5, 0, .75, 0) var(--intro-length) forwards; }
html.intro-js[data-intro] .intro { animation: intro-gone 0s linear 8s forwards; }
html.intro-js[data-intro] .intro__core { animation: none; }
html.intro-js:not(.intro-out) body { overflow: hidden; }
html.intro-js.intro-out .intro { animation: intro-leave .6s ease .2s forwards, intro-gone 0s linear .8s forwards; }
html.intro-js.intro-out .intro__core { animation: intro-rush .45s cubic-bezier(.5, 0, .75, 0) forwards; }
html.intro-js.intro-out .intro__lattice { animation: intro-lattice-out .8s cubic-bezier(.5, 0, .2, 1) forwards; }
html.intro-js.intro-out :is(.intro__hud, .intro__log, .intro__corner, .intro__skip) { animation: intro-leave .2s ease forwards; }
/* The jump, laid over the page as the screen fades (intro.js). */
.intro-fx { position: fixed; z-index: 201; pointer-events: none; }
.intro-warp { inset: 0; width: 100%; height: 100%; }
.intro-flash { width: 150vmax; height: 150vmax; translate: -50% -50%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--intro-b) 75%, transparent), color-mix(in srgb, var(--intro-a) 30%, transparent) 22%, transparent 50%); }
.intro-flyer { z-index: 202; transform-origin: 0 0; }
.intro-ping { z-index: 202; border: 1.5px solid var(--intro-c); border-radius: 50%; }

@media (max-width: 640px) {
  .intro__hud--tr { display: none; }
  .intro__hud--tl, .intro__log { left: 28px; }
  .intro__log { bottom: 30px; width: calc(100vw - 56px); font-size: 10px; }
  .intro__skip { top: 30px; bottom: auto; right: 28px; }
  .intro__core { top: 40%; gap: 14px; }
  .intro__glow { top: 40%; }
  .intro__emblem { width: 170px; height: 170px; }
  .intro__node { transform: rotate(calc(var(--k) * 60deg - 90deg)) translateX(78px); }
  .intro__mark { width: 96px; height: 96px; }
}
@media (max-height: 560px) { .intro__log { display: none; } }

@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-leave { to { opacity: 0; } }
@keyframes intro-gone { to { visibility: hidden; pointer-events: none; } }
@keyframes intro-corner { from { opacity: 0; translate: var(--from); } }
@keyframes intro-lit { to { background-color: var(--intro-c); } }
@keyframes intro-line { from { opacity: 0; translate: -6px 0; } }
@keyframes intro-spin { to { rotate: 1turn; } }
@keyframes intro-show { to { visibility: visible; } }
@keyframes intro-hide { to { visibility: hidden; } }
@keyframes intro-ring { to { stroke-dashoffset: 0; } }
@keyframes intro-node { to { background: var(--intro-b); border-color: var(--intro-b); box-shadow: 0 0 10px 2px var(--intro-a); } }
@keyframes intro-sweep { from { --intro-sweep: 0deg; } to { --intro-sweep: 360deg; } }
@keyframes intro-edge { 10%, 80% { opacity: 1; } }
@keyframes intro-drop { to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes intro-glitch {
  0% { opacity: .85; translate: calc(-7px * var(--dir, 1)) 0; clip-path: inset(8% 0 62% 0); }
  20% { translate: calc(5px * var(--dir, 1)) 0; clip-path: inset(48% 0 22% 0); }
  40% { translate: calc(-3px * var(--dir, 1)) 0; clip-path: inset(28% 0 44% 0); }
  60% { translate: calc(4px * var(--dir, 1)) 0; clip-path: inset(70% 0 6% 0); }
  80% { opacity: .5; translate: calc(-2px * var(--dir, 1)) 0; clip-path: inset(15% 0 70% 0); }
  100% { opacity: 0; }
}
@keyframes intro-pulse { 45% { filter: drop-shadow(0 0 42px var(--intro-c)) brightness(1.7); } }
@keyframes intro-char { from { opacity: 0; translate: 0 .3em; filter: blur(4px); } }
@keyframes intro-type { to { width: calc(var(--chars, 20) * (1ch + .2em) + 1ch); } }
@keyframes intro-caret { 50% { border-color: transparent; } }
@keyframes intro-sync { 11.6% { --intro-sync: 6; } 30.2% { --intro-sync: 29; } 39.5% { --intro-sync: 33; } 58.1% { --intro-sync: 61; } 69.8% { --intro-sync: 64; } 90.7% { --intro-sync: 93; } to { --intro-sync: 100; } }
@keyframes intro-rush { to { opacity: 0; scale: 1.5; filter: blur(6px); } }
@keyframes intro-lattice-out { to { opacity: 0; scale: 2.4; } }

/* Every visit: the headline cascades in letter by letter, and the emblem
   powers up - after the opening when there is one. With intro.js running,
   the page holds its entrance until the jump, however soon that comes. */
.page-home { --enter: .15s; }
html[data-intro] .page-home { --enter: calc(var(--intro-length) + .3s); }
html[data-intro] :is(.hero, .page-head, main > .section:first-of-type) [data-reveal] { transition-delay: calc(var(--delay, 0ms) + var(--intro-length) + .3s); }
html.intro-js[data-intro] .page-home { --enter: .25s; }
html.intro-js[data-intro] :is(.hero, .page-head, main > .section:first-of-type) [data-reveal] { transition-delay: calc(var(--delay, 0ms) + .25s); }
html.intro-js:not(.intro-out) :is(.hero__title .char, .page-home .emblem, .page-home .emblem__ring) { animation-play-state: paused; }
html.intro-js:not(.intro-out) :is(.hero, .page-head, main > .section:first-of-type) [data-reveal].is-in { opacity: 0; transform: translateY(14px); }
.hero__title .word { display: inline-block; white-space: nowrap; }
.hero__title .char { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(6px);
  animation: char-in .7s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--enter) + .25s + var(--i) * 24ms); }
@keyframes char-in { to { opacity: 1; transform: none; filter: blur(0); } }
/* On a phone the letters rise without the blur, which is the costly part. */
@media (max-width: 760px) { .hero__title .char { filter: none; animation-name: char-in-lite; } }
@keyframes char-in-lite { to { opacity: 1; transform: none; } }
.page-home .emblem { animation: emblem-boot 1.3s cubic-bezier(.2, .8, .2, 1) var(--enter) both; }
.page-home .emblem__ring { animation: ring-spin-up 1.6s cubic-bezier(.2, .8, .2, 1) var(--enter) both; }
@keyframes emblem-boot { 0% { opacity: 0; scale: .7; filter: brightness(3) blur(8px); } 60% { opacity: 1; filter: brightness(1.4) blur(0); } 100% { opacity: 1; scale: 1; filter: none; } }
@keyframes ring-spin-up { from { rotate: -140deg; opacity: 0; } to { rotate: 0deg; opacity: 1; } }

/* Right now at the studio: a grid of tiles in mixed sizes (a "bento" grid). Tiles that
   belong to a project glow in its colour, --accent-project, from its picture. */
.section--bento { padding-bottom: 24px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); gap: 14px; }
.bento__tile {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-width: 0;
  padding: 22px; border: 1px solid var(--line-2); border-radius: 22px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); color: var(--text);
  transition: border-color .25s, transform .35s var(--ease);
}
a.bento__tile:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.bento__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.bento__tile--stat strong { font: 700 clamp(40px, 4.4vw, 58px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bento__tile--stat > span:last-child { font-size: 13px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.bento__tile--stat > span:last-child .icon { width: 14px; }
.bento__tile--discord { border-color: rgb(88 101 242 / 0.4); background: linear-gradient(160deg, rgb(88 101 242 / 0.18), var(--surface)); }
.bento__tile--discord .bento__label { color: #9aa4ff; }
.bento__tile--asteri strong { color: var(--accent-2); }
.bento__tile--now {
  grid-column: span 2; grid-row: span 2; justify-content: flex-end; padding: 0; min-height: 360px;
  border-color: color-mix(in srgb, var(--accent-project) 40%, transparent);
  background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--accent-project) 22%, transparent), transparent 70%), var(--surface);
}
.bento__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bento__tile--now:hover .bento__shot { transform: scale(1.03); }
.bento__tile--now::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(5 6 8 / 0.95), rgb(5 6 8 / 0.15) 58%, transparent); pointer-events: none; }
.bento__logo { position: absolute; left: 50%; top: 42%; width: 42%; max-width: 220px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent-project) 60%, transparent)); }
.bento__now-copy { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: start; padding: 24px; }
.bento__pill { padding: 5px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  background: color-mix(in srgb, var(--accent-project) 20%, transparent); color: color-mix(in srgb, var(--accent-project) 70%, white); }
.bento__now-title { font: 700 clamp(28px, 3vw, 36px)/1.05 var(--font-display); }
.bento__now-text { font-size: 15px; color: var(--text-2); max-width: 46ch; }
.bento__tile--video { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; padding: 16px; }
.bento__video-thumb { position: relative; flex: 0 0 min(46%, 260px); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; }
.bento__video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento__video-thumb .icon { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; padding: 11px; transform: translate(-50%, -50%); border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; }
.bento__video-copy { display: grid; gap: 8px; min-width: 0; }
.bento__video-copy strong { font: 700 22px/1.15 var(--font-display); }
.bento__tile--tools { grid-column: span 2; justify-content: flex-start; }
.bento__tools { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__tile--now, .bento__tile--video, .bento__tile--tools { grid-column: auto; }
  .bento__tile--video { flex-direction: column; align-items: stretch; }
  .bento__video-thumb { flex-basis: auto; }
}

/* The projects: a full-width band each, lit in the project's own colour. */
.section--bands { padding-bottom: 32px; }
.section--bands .section__head { margin-bottom: 26px; }
.band {
  border-top: 1px solid color-mix(in srgb, var(--accent-project) 28%, transparent);
  background: radial-gradient(1000px 420px at 22% 50%, color-mix(in srgb, var(--accent-project) 17%, transparent), transparent 70%), var(--bg);
}
.band--shot { background: radial-gradient(1100px 440px at 78% 50%, color-mix(in srgb, var(--accent-project) 19%, transparent), transparent 70%), var(--bg); }
.band:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--accent-project) 28%, transparent); }
.band__inner { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px); padding-block: clamp(36px, 5vw, 56px); }
.band__logo { flex: 0 0 180px; display: grid; place-items: center; }
.band__logo img { width: 160px; height: 160px; object-fit: contain; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent-project) 55%, transparent)); transition: transform .8s var(--ease); }
.band:hover .band__logo img { transform: scale(1.05) rotate(-2deg); }
.band__copy { flex: 999 1 420px; min-width: 0; display: grid; gap: 14px; justify-items: start; }
.band__kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-project) 70%, white); }
.band__title { margin: 0; font: 700 clamp(36px, 4.4vw, 52px)/1 var(--font-display); }
.band__title a:hover { color: color-mix(in srgb, var(--accent-project) 60%, white); }
.band__text { margin: 0; max-width: 58ch; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.band__on { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.band__store { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.band__store .icon { width: 16px; }
.band__store--curseforge { background: #f16436; color: #fff; }
.band__store--curseforge:hover { background: #ff7a4d; color: #fff; }
.band__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: color-mix(in srgb, var(--accent-project) 70%, white); }
.band__more .icon { width: 16px; transition: transform .25s var(--ease); }
.band__more:hover .icon { transform: translateX(3px); }
.band__shot { flex: 1 1 420px; border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent-project) 30%, transparent); box-shadow: 0 30px 80px rgb(0 0 0 / .5); }
.band__shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .8s var(--ease); }
.band:hover .band__shot img { transform: scale(1.02); }
.section--bands + .container .cat-chips { margin-top: 0; }

/* The hero's link to the mod updated last. */
.hero__release {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 4px; padding: 8px 16px 8px 8px;
  border: 1px solid var(--line-2); border-radius: 14px; background: rgb(16 19 23 / 0.8); transition: border-color .2s, background-color .2s;
}
.hero__release:hover { border-color: var(--accent-line); background: var(--surface-2); }
.hero__release img, .hero__release-glyph { flex: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.hero__release-glyph { display: grid; place-items: center; background: var(--surface-3); color: var(--accent); }
.hero__release-text { display: grid; gap: 3px; min-width: 0; line-height: 1.3; }
.hero__release-text small { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hero__release-text strong { font-size: 14px; font-weight: 550; }
.hero__release > .icon { flex: none; width: 16px; color: var(--text-3); transition: transform .25s var(--ease), color .2s; }
.hero__release:hover > .icon { color: var(--text); transform: translateX(3px); }

/* Every category, with how much is in it, under the selected work. */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cat-chips a { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 14px; font-weight: 550; transition: border-color .2s, background-color .2s; }
.cat-chips a:hover { border-color: var(--accent-line); background: var(--surface-2); }
.cat-chips .icon { width: 16px; height: 16px; color: var(--accent); }
.cat-chips b { font: 500 12px var(--font-mono); color: var(--accent-2); }

/* The network, in one panel: the jump itself is on /network. */
.network-teaser {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 32px;
  padding: clamp(26px, 4vw, 48px); border: 1px solid rgb(77 141 255 / .28); border-radius: var(--radius-lg); background: #05040a; overflow: hidden;
  transition: border-color .3s;
}
.network-teaser:hover { border-color: var(--accent-line); }
.network-teaser__sky { position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: radial-gradient(1px 1px at 24px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 150px 110px, rgb(255 255 255 / .6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 220px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90px 260px, rgb(180 227 255 / .6) 50%, transparent 51%),
    radial-gradient(1px 1px at 300px 30px, rgb(255 230 200 / .7) 50%, transparent 51%), radial-gradient(ellipse at 80% 50%, rgb(47 111 237 / .16), transparent 60%);
  background-size: 320px 300px, 320px 300px, 320px 300px, 320px 300px, 320px 300px, 100% 100%; }
.network-teaser__copy { position: relative; display: grid; gap: 14px; justify-items: start; }
.network-teaser__title { font: 600 clamp(28px, 3.4vw, 40px)/1.08 var(--font-display); letter-spacing: -0.01em; }
.network-teaser__copy .muted { max-width: 54ch; }
.network-teaser__corps { display: flex; gap: 10px; }
.network-teaser__corps img { width: 36px; height: 36px; border-radius: 9px; }
.network-teaser__go { margin-top: 6px; pointer-events: none; }
.network-teaser:hover .network-teaser__go { background: var(--accent-fill-2); }
.network-teaser__system { position: relative; height: 240px; }
.network-teaser__orbit { position: absolute; left: 50%; top: 46%; width: 150px; height: 150px; translate: -50% -50%; border: 1px solid rgb(77 141 255 / .3); border-radius: 50%; }
.network-teaser__orbit--outer { width: 230px; height: 230px; border-style: dashed; border-color: rgb(77 141 255 / .35); animation: network-orbit 120s linear infinite; }
.network-teaser__star { position: absolute; left: 50%; top: 46%; width: 54px; height: 54px; translate: -50% -50%; border-radius: 50%; background: #fff8e8; box-shadow: 0 0 50px 14px rgb(255 240 210 / .35); }
.network-teaser__readout { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 760px) {
  .network-teaser { grid-template-columns: 1fr; }
  .network-teaser__system { height: 200px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .network-teaser__orbit--outer { animation: none; } }

/* The Discord's member count, beside its invite. */
.discord-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .06em; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) {
  .hero__title .char { animation: none; opacity: 1; transform: none; filter: none; }
  .page-home .emblem, .page-home .emblem__ring { animation: none; }
}

/* ── Toasts ───────────────────────────────────────────────────────────── */
.toast {
  position: fixed; z-index: 60; left: 50%; top: calc(var(--nav-h) + 14px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(560px, calc(100vw - 32px));
  padding: 11px 12px 11px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.9); font-size: 14px; animation: toast-in .35s var(--ease);
}
.toast--ok .icon:first-child { color: var(--ok); }
.toast--warn .icon:first-child { color: var(--accent); }
.toast--bad .icon:first-child { color: var(--bad); }
.toast__close { background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 2px; margin-left: 4px; }
.toast.is-leaving { opacity: 0; transform: translate(-50%, -8px); transition: .3s; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
/* Deep space behind the lattice: two layers of stars drifting up at different
   speeds. Each moves exactly one tile and starts over, so the loop never shows,
   and only transforms change, so the browser never repaints them. */
.hero::before, .hero::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  animation: hero-stars var(--drift) linear infinite;
}
.hero::before {
  --tile: 260px; --drift: 70s; bottom: -260px; opacity: .45;
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent), radial-gradient(1px 1px at 97px 173px, #fff, transparent),
    radial-gradient(1.5px 1.5px at 151px 63px, #b8d7ff, transparent), radial-gradient(1px 1px at 211px 219px, #fff, transparent),
    radial-gradient(1px 1px at 60px 230px, #fff, transparent), radial-gradient(1.5px 1.5px at 240px 120px, #fff, transparent),
    radial-gradient(1px 1px at 130px 12px, #a6d3ff, transparent);
  background-size: 260px 260px;
}
.hero::after {
  --tile: 410px; --drift: 150s; bottom: -410px; opacity: .3;
  background-image:
    radial-gradient(2px 2px at 70px 90px, #fff, transparent), radial-gradient(1.5px 1.5px at 300px 40px, #d4e9ff, transparent),
    radial-gradient(2px 2px at 220px 330px, #fff, transparent), radial-gradient(1.5px 1.5px at 380px 210px, #82afff, transparent);
  background-size: 410px 410px;
}
@keyframes hero-stars { to { transform: translateY(calc(-1 * var(--tile))); } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }
.hero__lattice { position: absolute; inset: 0; pointer-events: none; }
.hero__lattice::before, .hero__lattice::after {
  content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 60px 34.641px;
}
.hero__lattice::before { opacity: .07; -webkit-mask: linear-gradient(180deg, #000 20%, transparent 95%); mask: linear-gradient(180deg, #000 20%, transparent 95%); }
.hero__lattice::after {
  opacity: .5; transition: opacity .6s;
  -webkit-mask: radial-gradient(circle 240px at var(--mx, 70%) var(--my, 40%), #000, transparent 70%);
  mask: radial-gradient(circle 240px at var(--mx, 70%) var(--my, 40%), #000, transparent 70%);
}
/* The avatar walking the header's bottom edge (static/js/avatar.js). The
   canvas covers the whole header, so he can be carried right up to the top bar,
   and sits in front of the text, but takes no clicks: the script hit-tests him. */
.hero__avatar { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__avatar canvas, .avatar-stage canvas { display: block; width: 100%; height: 100%; }
[data-avatar-area].is-over-avatar { cursor: grab; }
[data-avatar-area].is-carrying-avatar, [data-avatar-area].is-carrying-avatar * { cursor: grabbing !important; user-select: none; }
/* His own stage on other pages: the support desk beside the heading, and the 404's floor. */
.avatar-stage { position: relative; width: 100%; height: 250px; }
.page-head .avatar-stage--desk { position: absolute; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 0; width: 440px; height: 100%; min-height: 240px; z-index: 2; }
.avatar-stage--lost { max-width: 620px; height: 230px; margin: 0 auto -12px; }
@media (max-width: 1020px) { .page-head .avatar-stage--desk { display: none; } }
/* Visiting another page: the whole title area is his, in front of its text. */
.avatar-stage--visit { display: none; }
.page-head > .avatar-stage--visit { display: block; position: absolute; inset: 0; z-index: 2; height: auto; pointer-events: none; }
.avatar-stage--visit .avatar-deaths { display: none; }
@media (max-width: 760px) { .page-head > .avatar-stage--visit { display: none; } }
/* The shared count of how many times he's been killed, live. */
.avatar-deaths {
  position: absolute; left: 18px; bottom: 14px; font: 500 11px/1 var(--font-mono); letter-spacing: .06em;
  color: var(--text-3); opacity: 0; transition: opacity .4s; pointer-events: none;
}
.avatar-deaths b { color: var(--accent); font-weight: 600; }
.avatar-deaths { text-shadow: 0 1px 6px rgb(0 0 0 / 0.85); }  /* readable over the season's fog */
.avatar-deaths.is-shown { opacity: 1; }
.avatar-bubble {
  position: absolute; left: 0; top: 0; max-width: 230px; padding: 8px 12px; border-radius: 14px; background: #ffffff; color: #11171c;
  font: 600 13px/1.35 var(--font-body); text-align: center; box-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.7);
  transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .25s; pointer-events: none; width: max-content;
}
.avatar-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: inherit; transform: rotate(45deg); }
.avatar-bubble.is-shown { opacity: 1; }
/* Asteri's settings on a screen too narrow for him: there, but greyed out. */
.settings-card.is-unavailable .settings-group--sound { opacity: .45; }
.settings-card__note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); color: var(--text-2); font-size: 14px; }
.settings-card__note .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.settings-card__note[hidden] { display: none; }
/* The speaker in the header's corner: Asteri's sound and voice, off or on. */
.avatar-mute {
  position: absolute; right: 18px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 999px; background: rgb(8 9 11 / 0.6); color: var(--text-3);
  cursor: pointer; transition: color .2s, border-color .2s;
}
.avatar-mute:hover, .avatar-mute:focus-visible { color: var(--text); border-color: var(--accent); }
.avatar-mute .icon { width: 15px; height: 15px; }
.avatar-mute .avatar-mute__off, .avatar-mute[aria-pressed="true"] .avatar-mute__on { display: none; }
.avatar-mute[aria-pressed="true"] .avatar-mute__off { display: block; }
.avatar-mute[hidden] { display: none; }
@media (max-width: 760px) { .avatar-mute { display: none; } }
/* A lit creeper's hiss, over its head. */
.avatar-hiss {
  position: absolute; left: 0; top: 0; padding: 4px 9px; border-radius: 10px; background: #0d8a0b; color: #eaffe6;
  font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; white-space: nowrap;
  transform: translate(-50%, calc(-100% - 8px)); opacity: 0; transition: opacity .15s; pointer-events: none;
}
.avatar-hiss.is-shown { opacity: 1; }
/* With its health bar showing, the hiss sits above it. */
.avatar-hiss.is-raised { transform: translate(-50%, calc(-100% - 22px)); }
.avatar-health.avatar-health--creeper { width: 50px; }
/* The overhead health bar, green over red, shown once he's hurt. */
.avatar-health {
  position: absolute; left: 0; top: 0; width: 58px; height: 7px; border-radius: 4px; overflow: hidden;
  background: #b3261e; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.65), 0 4px 10px -4px rgb(0 0 0 / 0.8);
  transform: translate(-50%, -100%); opacity: 0; transition: opacity .3s; pointer-events: none;
}
.avatar-health.is-shown { opacity: 1; }
.avatar-health__fill { display: block; width: 100%; height: 100%; background: #3ddc5f; transition: width .25s ease, background-color .25s; }
.avatar-health.is-low .avatar-health__fill { background: #f0b429; }
.avatar-health.is-critical .avatar-health__fill { background: #ff6a3d; }
/* With the bar showing, the speech bubble sits above it. */
[data-avatar-stage].has-health .avatar-bubble { transform: translate(-50%, calc(-100% - 24px)); }
/* The page breaking under him (static/js/wreckage.js): shattered glass and scorch
   marks behind him, the pieces in flight on a canvas of their own. */
.wreck-glass, .wreck-fx, .wreck-scan { position: absolute; pointer-events: none; }
.wreck-fx, .wreck-scan { inset: 0; }
.wreck-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Put back: the marks flicker out like a bad signal. */
.is-wreck-gone { animation: wreck-out .45s steps(6, end) forwards; }
@keyframes wreck-out {
  0% { opacity: 1; }
  20% { opacity: .25; translate: 5px 0; }
  40% { opacity: .9; translate: -4px 0; clip-path: inset(25% 0 35% 0); }
  60% { opacity: .4; translate: 2px 0; clip-path: inset(0 0 55% 0); }
  80% { opacity: .7; translate: 0 0; clip-path: inset(60% 0 0 0); }
  100% { opacity: 0; }
}
/* The rewind: the page flickers out of register, with scanlines rolling over it. */
.wreck-scan { opacity: 0; background: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px); }
[data-avatar-area].is-rewinding .wreck-scan { animation: wreck-scan 1.15s steps(9) both; }
[data-avatar-area].is-rewinding .hero__grid, [data-avatar-area].is-rewinding > .container { animation: wreck-rgb 1.15s steps(1) both; }
@keyframes wreck-scan { 0% { opacity: .9; background-position: 0 0; } 60% { opacity: .5; background-position: 0 48px; } 100% { opacity: 0; background-position: 0 96px; } }
@keyframes wreck-rgb { 0%, 18%, 36%, 61%, 82% { filter: url(#wreck-rgb); } 9%, 27%, 48%, 70%, 100% { filter: none; } }
/* A creeper going off: a flash where it was, and the whole screen glitching. */
.wreck-flash {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y), rgb(255 236 200 / 0.7), rgb(255 140 40 / 0.3) 16%, transparent 50%);
  animation: wreck-flash .65s ease-out forwards;
}
@keyframes wreck-flash { to { opacity: 0; } }
html.wreck-glitch :is(.nav, main) { animation: wreck-jitter .7s steps(1) both; }
@keyframes wreck-jitter {
  0% { translate: 7px 0; filter: url(#wreck-rgb); }
  14% { translate: -8px 2px; }
  28% { translate: 3px -2px; filter: none; }
  42% { translate: -4px 0; filter: url(#wreck-rgb); clip-path: inset(8% 0 0 0); }
  57% { translate: 2px 1px; clip-path: none; }
  71% { translate: -1px 0; filter: none; }
  100% { translate: 0 0; }
}
/* A hole broken through the header's top or bottom edge. On the page itself, so it
   straddles the line, above the sticky top bar (50) and under toasts (60). */
.edge-damage { position: absolute; z-index: 55; pointer-events: none; transition: opacity 2.2s ease; }
.edge-damage.is-fading { opacity: 0; }
/* --shake and --shake-time are set by the script from how hard he hit. */
@keyframes hero-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(calc(var(--shake) * -1), calc(var(--shake) * 0.4)); }
  30% { transform: translate(var(--shake), calc(var(--shake) * -0.6)); }
  45% { transform: translate(calc(var(--shake) * -0.7), calc(var(--shake) * 0.5)); }
  60% { transform: translate(calc(var(--shake) * 0.5), calc(var(--shake) * -0.3)); }
  80% { transform: translate(calc(var(--shake) * -0.25), calc(var(--shake) * 0.15)); }
}
.hero.is-shaken .hero__grid, .page-head.is-shaken > .container { animation: hero-shake var(--shake-time, .36s) linear; }
/* Knocked one way by a hit, then springing back past centre and settling. */
@keyframes hero-jolt {
  0%, 100% { transform: none; }
  12% { transform: translate(var(--jolt-x), var(--jolt-y)) rotate(var(--jolt-r)); }
  30% { transform: translate(calc(var(--jolt-x) * -0.55), calc(var(--jolt-y) * -0.55)) rotate(calc(var(--jolt-r) * -0.55)); }
  50% { transform: translate(calc(var(--jolt-x) * 0.3), calc(var(--jolt-y) * 0.3)) rotate(calc(var(--jolt-r) * 0.3)); }
  70% { transform: translate(calc(var(--jolt-x) * -0.14), calc(var(--jolt-y) * -0.14)) rotate(calc(var(--jolt-r) * -0.14)); }
  86% { transform: translate(calc(var(--jolt-x) * 0.05), calc(var(--jolt-y) * 0.05)); }
}
.hero.is-jolted .hero__grid, .page-head.is-jolted > .container { animation: hero-jolt var(--shake-time, .4s) cubic-bezier(.2, .7, .3, 1); }
@media (max-width: 760px) { .hero__avatar, .avatar-stage { display: none; } }
.hero__grid {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center;
  gap: clamp(24px, 5vw, 72px); padding: clamp(56px, 9vw, 120px) 0 clamp(56px, 8vw, 104px);
}
.hero__copy { display: grid; gap: 24px; justify-items: start; }
.hero__title { max-width: 14ch; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* The emblem: the server logo, lit. The frame catches a travelling band of
   light under a bezel of ticks; the A switches on like a tube lamp, and a
   light in each of the ring's three openings pulses in turn. */
.emblem { position: relative; width: min(470px, 100%); aspect-ratio: 1; justify-self: center; animation: emblem-in 1.2s var(--ease) both; }
.emblem__stage {
  position: absolute; inset: 0;
  transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .8s var(--ease);
}
.emblem__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 255 255 / 0.22) 0deg 0.5deg, transparent 0.5deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 64.5%, #000 65%, #000 67.5%, transparent 68%);
  mask: radial-gradient(circle, transparent 64.5%, #000 65%, #000 67.5%, transparent 68%);
  animation: spin 120s linear infinite;
}
.emblem__ring::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent) 0deg 2deg, transparent 2deg 360deg);
  animation: spin 8s linear infinite reverse;
}
.emblem__halo { position: absolute; inset: 13%; filter: drop-shadow(0 0 2px rgb(47 111 237 / 0.98)) drop-shadow(0 0 26px rgb(47 111 237 / 0.63)); animation: breathe 6s ease-in-out infinite; }
.emblem__halo--a {
  filter: drop-shadow(0 0 3px rgb(160 200 255 / 0.9)) drop-shadow(0 0 34px rgb(47 111 237 / 0.77));
  animation: ignite 1.3s linear .5s both, breathe 5s ease-in-out 1.8s infinite;
}
.emblem__frame, .emblem__a, .emblem__sweep { position: absolute; inset: 0; }
.emblem__frame {
  background: linear-gradient(160deg, #fafbfc 0%, #d8dce2 46%, #9ea6b1 100%);
  -webkit-mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat;
  mask: url("../brand/frame-640.png?v=hex3") center / contain no-repeat;
}
.emblem__a {
  background: linear-gradient(165deg, #d2e6ff 0%, #4d8dff 50%, #2f6fed 100%);
  -webkit-mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat;
  mask: url("../brand/logo-a-640.png?v=hex3") center / contain no-repeat;
}
/* The band of light crosses the whole logo, A included. */
.emblem__sweep {
  inset: 13%;
  background: linear-gradient(105deg, transparent 42%, rgb(220 236 255 / 0.95) 50%, transparent 58%) no-repeat;
  background-size: 320% 100%; animation: sweep 7s cubic-bezier(.5, 0, .2, 1) infinite;
  -webkit-mask: url("../brand/logo-640.png?v=hex3") center / contain no-repeat;
  mask: url("../brand/logo-640.png?v=hex3") center / contain no-repeat;
}
/* A light in each of the ring's three openings, top and lower corners.
   Positions are the openings' centres (branding/logo/make_logo.py, opening_centres),
   mapped into the 13% inset. */
.emblem__node { position: absolute; width: 1.6%; height: 1.6%; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px 2px rgb(47 111 237 / 1.00); transform: translate(-50%, -50%); animation: node 3.6s ease-in-out infinite; }
.emblem__node--top { left: 50%; top: 20.09%; }
.emblem__node--right { left: 75.9%; top: 64.96%; animation-delay: 1.2s; }
.emblem__node--left { left: 24.1%; top: 64.96%; animation-delay: 2.4s; }
.emblem__readout {
  position: absolute; left: 50%; bottom: -2%; transform: translateX(-50%); display: flex; gap: 14px;
  font-size: 11px; letter-spacing: .12em; color: var(--text-3);
}
.emblem__readout span:last-child { color: var(--accent); min-width: 6.5ch; text-align: right; }

@keyframes spin { to { transform: rotate(360deg); } }
/* A tube lamp catching: two stutters, then on. */
@keyframes ignite { 0% { opacity: 0; } 10% { opacity: .85; } 14% { opacity: .1; } 24% { opacity: .9; } 29% { opacity: .25; } 42%, 100% { opacity: 1; } }
@keyframes sweep { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
@keyframes breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes node { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes emblem-in { from { opacity: 0; transform: scale(.94); } }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* ── Sections ─────────────────────────────────────────────────────────── */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section--tight { padding-top: 0; }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.section__head > div { display: grid; gap: 14px; }
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
  background: radial-gradient(900px 340px at 18% 0%, rgb(47 111 237 / 0.13), transparent 72%); }
.page-head::after { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 60px 34.641px; opacity: .05; -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.page-head .container { position: relative; z-index: 1; display: grid; gap: 16px; }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.crumbs a:hover { color: var(--text); }
.crumbs .icon { width: 14px; }

/* Portfolio cards */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card {
  display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s;
}
.work-card:hover { border-color: var(--line-3); transform: translateY(-3px); box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.9); }
/* A card that knows its project's colour glows in it. */
.work-card[style*="--accent-project"]:hover {
  border-color: color-mix(in srgb, var(--accent-project) 55%, transparent);
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.9), 0 0 40px -12px color-mix(in srgb, var(--accent-project) 45%, transparent);
}

/* The portfolio's engine tiles: one per category, to jump straight to its work. */
.engine-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 28px; margin-bottom: 8px; }
.engine-tile {
  display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface);
  transition: border-color .25s, transform .35s var(--ease), box-shadow .35s;
}
.engine-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-project) 60%, transparent);
  box-shadow: 0 0 40px -14px color-mix(in srgb, var(--accent-project) 55%, transparent); }
.engine-tile img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.engine-tile__glyph { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--surface-2); color: var(--accent); }
.engine-tile__glyph .icon { width: 34px; height: 34px; }
.engine-tile__name { padding: 13px 15px 2px; font-weight: 600; font-size: 15px; }
.engine-tile__count { padding: 0 15px 14px; font-size: 12px; color: var(--text-3); }
/* A HUD's corner brackets lock on to a card under the pointer. */
.work-card { position: relative; }
.work-card::after {
  content: ""; position: absolute; inset: 8px; pointer-events: none; opacity: 0; transform: scale(1.04);
  transition: opacity .25s, transform .35s var(--ease);
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 16px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1.5px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 16px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1.5px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 16px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 1.5px 16px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 16px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1.5px 16px no-repeat;
}
.work-card:hover::after, .work-card:focus-within::after { opacity: 1; transform: none; }
.work-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.work-card:hover .work-card__media img { transform: scale(1.04); }
.work-card__media .work-card__thumb { scale: 1.12; } /* past YouTube's letterbox bars */
/* A category's card: what's inside it, side by side. */
.work-card__collage { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 2px; background: var(--line); }
.work-card__collage--2 { --n: 2; }
.work-card__collage--3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.work-card__collage--3 > :first-child { grid-row: span 2; }
.work-card__tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface-2); }
.work-card__tile img { position: absolute; left: 0; top: 0; }
.work-card__tile.is-logo { background: radial-gradient(circle at 50% 120%, rgb(47 111 237 / 0.22), transparent 60%), var(--surface-2); }
.work-card__tile.is-logo img { object-fit: contain; padding: 14%; }
/* YouTube's stills are 4:3 with the 16:9 picture between black bars: the
   picture is stretched over a box a third taller, so the bars fall outside. */
.work-card__tile.is-video img { top: -16.7%; height: 133.4%; }
/* Hovered (or tabbed to), a category's card lists what's inside it. */
.work-card__inside {
  position: absolute; inset: 0; z-index: 2; display: grid; align-content: end; gap: 6px; padding: 16px 18px;
  background: linear-gradient(180deg, rgb(8 9 11 / 0.55), rgb(8 9 11 / 0.92) 40%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .3s var(--ease); pointer-events: none;
}
.work-card__inside-head { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.work-card__inside-row {
  display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; font-weight: 550; color: var(--text);
  opacity: 0; translate: 0 8px; transition: opacity .3s var(--ease), translate .35s var(--ease); transition-delay: calc(var(--i, 0) * 45ms);
}
/* Two lines, so names that differ only at the end ("... development 1", "... 2") stay apart. */
.work-card__inside-row > span { flex: 1; min-width: 0; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.work-card__media .work-card__inside-row img, .work-card__inside-row > i {
  flex: none; width: 28px; height: 28px; border-radius: 7px; object-fit: cover; border: 1px solid var(--line-2); background: var(--surface-3); transform: none;
}
.work-card__media .work-card__inside-row img.is-logo { object-fit: contain; }
.work-card:hover .work-card__media .work-card__inside-row img { transform: none; }
.work-card__inside-row > i { display: grid; place-items: center; color: var(--accent); }
.work-card__inside-row > i .icon { width: 14px; height: 14px; }
.work-card__inside-row em { flex: none; font: normal 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.work-card__inside-more { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.work-card:focus-visible .work-card__inside, .work-card:focus-visible .work-card__inside-row { opacity: 1; translate: none; }
@media (hover: hover) {
  .work-card:hover .work-card__inside, .work-card:hover .work-card__inside-row { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) { .work-card__inside-row { translate: none; transition-delay: 0s; } }
.work-card__media--blank { display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, rgb(47 111 237 / 0.22), transparent 60%), var(--surface-2); }
.work-card__media--blank::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 60px 34.641px; opacity: .12; }
.work-card__glyph { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; border: 1px solid var(--accent-line); background: rgb(8 9 11 / 0.6); color: var(--accent); }
.work-card__glyph .icon { width: 28px; height: 28px; stroke-width: 1.6; }
.work-card__draft { position: absolute; top: 12px; left: 12px; padding: 4px 9px; border-radius: 999px; background: rgb(0 0 0 / 0.7); border: 1px solid var(--line-3); font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.work-card__body { display: grid; gap: 10px; padding: 20px 22px 22px; flex: 1; align-content: start; }
.work-card__body p { color: var(--text-2); font-size: 14.5px; }
.work-card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--text-3); transition: color .2s; }
.work-card:hover .work-card__more { color: var(--accent); }
.work-card__more .icon { width: 15px; transition: transform .25s var(--ease); }
.work-card:hover .work-card__more .icon { transform: translateX(3px); }

.chip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 13.5px; transition: .2s; }
.chip:hover { color: var(--text); border-color: var(--line-3); }
.chip[aria-current="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Project page */
/* The whole cover, at its own shape: cropping cut the top off tall images. */
.project-hero { display: grid; place-items: center; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.project-hero img { width: auto; max-width: 100%; height: auto; max-height: min(72vh, 760px); }
.project-video { margin-top: 36px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #000; }
.project-video--short { aspect-ratio: 9 / 16; width: min(100%, 420px); margin-inline: auto; }
.project-video iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Showcase videos: a row to scroll sideways, the one playing above outlined. */
.showcases { margin-top: 22px; }
.showcases__title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0 0 10px; }
.showcases__title .faint { font-weight: 500; }
.showcases__row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity;
  scrollbar-width: thin; }
.showcase { flex: 0 0 220px; scroll-snap-align: start; color: inherit; text-decoration: none; }
.showcase__thumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--line); background: #000; transition: border-color .15s, transform .15s; }
.showcase__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.showcase__thumb .icon { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; padding: 8px;
  transform: translate(-50%, -50%); border-radius: 50%; background: rgb(0 0 0 / .6); color: #fff; }
.showcase:hover .showcase__thumb { transform: translateY(-2px); border-color: var(--accent-line); }
.showcase.is-playing .showcase__thumb { border-color: var(--accent); }
.showcase__label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 6px; font-size: 13px; line-height: 1.35; }
.picture-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, 2fr) 72px auto; gap: 8px; align-items: center; }
.picture-row + .picture-row { margin-top: 8px; }
.picture-row img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.picture-row--new { grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr); }
.picture-row--new .field__hint { grid-column: 1 / -1; }
.picture-row--new .field__hint:empty { display: none; }
@media (max-width: 760px) { .picture-row, .picture-row--new { grid-template-columns: minmax(0, 1fr); } }
/* A project's pictures tool by tool, with an arrow wherever the work moved on */
.journey { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.journey__group { flex: var(--n, 1) 1 0; min-width: 0; display: grid; gap: 10px; }
.journey__tool { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); font: 500 12px/1.3 var(--font-mono); letter-spacing: .04em; color: var(--text); }
.journey__tool .icon { width: 14px; height: 14px; }
.journey__shots { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 10px; }
.journey__shot { margin: 0; display: grid; align-content: start; gap: 7px; }
.journey__shot .memory__image { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--radius); }
.journey__shot .memory__image img { height: 100%; object-fit: contain; }
.journey__shot figcaption { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.journey__arrow { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.journey__arrow .icon { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .journey { flex-direction: column; align-items: stretch; }
  .journey__arrow { align-self: center; transform: rotate(90deg); }
  .journey__shots { grid-template-columns: minmax(0, 1fr); }
}
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; padding: 48px 0 96px; }
.prose { font-size: 16px; line-height: 1.75; color: #d6dade; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.6em; color: var(--text); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-line); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-2); border: 1px solid var(--line); padding: .1em .4em; border-radius: 5px; }
.prose pre { background: var(--surface); border: 1px solid var(--line); padding: 16px; border-radius: var(--radius); overflow-x: auto; }
.prose blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--accent); color: var(--text-2); }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.meta-card { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
/* A project page is lit in its project's colour: a glow behind the title, the download button. */
.page-head--project { background: radial-gradient(900px 380px at 30% 0%, color-mix(in srgb, var(--accent-project) 16%, transparent), transparent 72%); }
.meta-card { border-color: color-mix(in srgb, var(--accent-project, var(--line)) 22%, var(--line)); }
.meta-card__store { border: 1px solid var(--line-2); }
.meta-card__store--main { background: var(--accent-project); border-color: transparent; color: #080e12; font-weight: 700; }
.meta-card__store--main:hover { background: color-mix(in srgb, var(--accent-project) 82%, white); color: #080e12; }
.meta-card__store + .meta-card__store { margin-top: -8px; }
.meta-card dl { margin: 0; display: grid; gap: 14px; }
.meta-card dt { font: 500 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin-bottom: 6px; }
.meta-card dd { margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.tag .icon { width: 13px; height: 13px; color: var(--text); }
.link-list { display: grid; gap: 6px; }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); transition: .2s; font-size: 14px; }
.link-list a:hover { border-color: var(--accent-line); color: var(--accent); }

/* Portfolio sections by stage */
.work-sections { display: grid; gap: clamp(52px, 7vw, 88px); padding: clamp(44px, 6vw, 72px) 0 clamp(64px, 9vw, 112px); }
.work-section .section__head { margin-bottom: 28px; }
.work-section .section__head p { max-width: 60ch; }
.work-section--discontinued .eyebrow .dot { background: var(--text-3); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.04); }
.work-card__stage {
  position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: rgb(0 0 0 / 0.72); border: 1px solid var(--line-3); color: var(--text-2);
  backdrop-filter: blur(6px);
}
.work-card__stage--development { color: var(--accent); border-color: var(--accent-line); }
/* A category card: a small stack, with a count of what is inside. */
.work-card--category { --stack: 0 -8px 0 -3px var(--surface-2), 0 -8px 0 -2px var(--line-2), 0 -16px 0 -7px var(--surface), 0 -16px 0 -6px var(--line-2); box-shadow: var(--stack); margin-top: 10px; }
.work-card--category:hover { box-shadow: var(--stack), 0 30px 60px -36px rgb(0 0 0 / 0.9); }
.work-card__count {
  position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px;
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  background: rgb(0 0 0 / 0.72); border: 1px solid var(--accent-line); color: var(--accent); backdrop-filter: blur(6px);
}
.category-intro { padding-top: clamp(32px, 4vw, 44px); max-width: 72ch; }

/* A heading with a picture behind it: blurred, faint, fading into the page. */
.page-head__backdrop {
  position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover;
  opacity: .26; filter: blur(30px) saturate(1.2); pointer-events: none;
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent);
}
.page-head--backdrop { padding-top: clamp(64px, 9vw, 120px); }
/* A heading's numbers, in a line under it. */
.head-figures { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.head-figures span { display: inline-flex; align-items: baseline; gap: 7px; }
.head-figures b { font: 700 22px/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); font-variant-numeric: tabular-nums; }
.page-head--project .head-figures b { color: color-mix(in srgb, var(--accent-project) 55%, white); }
.stack--xl { gap: clamp(44px, 6vw, 72px); }

/* The videos page leads with the newest one, big, over its own blurred picture. */
.feature { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); background: #050608; }
.feature__backdrop { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; opacity: .38; filter: blur(40px) saturate(1.3); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 6 8 / 0.92) 25%, rgb(5 6 8 / 0.35)), linear-gradient(0deg, var(--bg), transparent 40%); }
.feature__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.feature__copy { display: grid; gap: 18px; justify-items: start; }
.feature__title { margin: 0; font: 700 clamp(30px, 3.8vw, 50px)/1.05 var(--font-display); }
.feature__meta { margin: 0; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.feature__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-3); background: #000;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.95), 0 0 80px -30px rgb(255 0 51 / 0.35); }
.feature__screen--short { aspect-ratio: 9 / 16; width: min(100%, 360px); justify-self: center; }
.feature__screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.feature__poster { all: unset; position: absolute; inset: 0; cursor: pointer; }
/* YouTube's still is 4:3 with the picture between black bars: stretched a third taller, the bars fall outside. */
.feature__poster img { position: absolute; left: 0; top: -16.7%; width: 100%; height: 133.4%; object-fit: cover; transition: transform .8s var(--ease); }
.feature__screen--short .feature__poster img { top: 0; height: 100%; }
.feature__poster:hover img { transform: scale(1.03); }
.feature__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; transform: translate(-50%, -50%);
  border-radius: 50%; background: #ff0033; color: #fff; box-shadow: 0 0 0 10px rgb(255 0 51 / 0.2); transition: transform .3s var(--ease), box-shadow .3s; }
.feature__play .icon { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; }
.feature__poster:hover .feature__play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 16px rgb(255 0 51 / 0.18); }
.feature__poster:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.btn--youtube { background: #ff0033; color: #fff; }
.btn--youtube:hover { background: #ff2a55; color: #fff; }
/* Shelves: a heading and a row, the way the big video sites lay out a channel. */
.shelf__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.shelf__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(22px, 2.4vw, 28px); }
.shelf__head h2 .icon { width: 22px; height: 22px; color: var(--accent); }
.shelf__head h2 .faint { font-size: .6em; font-weight: 500; }
.shelf__row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.short-card { flex: 0 0 190px; scroll-snap-align: start; display: grid; gap: 8px; align-content: start; }
.short-card__thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.short-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.short-card:hover .short-card__thumb img { transform: scale(1.05); }
.short-card:hover .short-card__thumb { border-color: var(--accent-line); }
.short-card__title { font-size: 14px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.short-card__views { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 900px) { .feature__inner { grid-template-columns: minmax(0, 1fr); } .feature__screen { order: -1; } }

/* Memories: a gallery, the first album big, each a picture with its name laid over it. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 260px; gap: 14px; }
.gallery__tile {
  position: relative; display: flex; align-items: flex-end; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-2);
  background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--accent-project) 30%, transparent), transparent 60%), var(--surface-2);
  transition: border-color .25s, transform .35s var(--ease), box-shadow .35s;
}
.gallery__tile--big { grid-column: span 2; grid-row: span 2; }
/* One or two albums: side by side across the whole width, taller. */
.gallery--few { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: clamp(300px, 34vw, 420px); }
.gallery--few .gallery__title { font-size: clamp(26px, 2.6vw, 34px); }
.gallery__tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-project) 60%, transparent);
  box-shadow: 0 30px 60px -36px rgb(0 0 0 / 0.9), 0 0 40px -12px color-mix(in srgb, var(--accent-project) 50%, transparent); }
.gallery__tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery__tile > img.is-video { top: -16.7%; height: 133.4%; }
.gallery__tile:hover > img { transform: scale(1.04); }
.gallery__tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(5 6 8 / 0.94), rgb(5 6 8 / 0.2) 55%, transparent); pointer-events: none; }
.gallery__glyph { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); color: var(--accent); }
.gallery__glyph .icon { width: 40px; height: 40px; }
.gallery__copy { position: relative; z-index: 1; display: grid; gap: 6px; padding: 22px; max-width: 60ch; }
.gallery__count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-project) 60%, white); }
.gallery__title { font: 700 22px/1.1 var(--font-display); }
.gallery__tile--big .gallery__title { font-size: clamp(28px, 3vw, 40px); }
.gallery__text { font-size: 14px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery__go { position: absolute; z-index: 1; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: rgb(5 6 8 / 0.6); border: 1px solid var(--line-3); backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: .3s var(--ease); }
.gallery__go .icon { width: 16px; height: 16px; }
.gallery__tile:hover .gallery__go, .gallery__tile:focus-visible .gallery__go { opacity: 1; transform: none; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; } .gallery__tile--big { grid-column: auto; grid-row: span 1; } }

/* Rules: docs-style, the contents down the side following you. */
.docs { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); padding-block: clamp(40px, 6vw, 72px) clamp(64px, 9vw, 112px); }
.docs__nav { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 2px; }
.docs__nav-head { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 10px; }
.docs__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border-left: 2px solid transparent; font-size: 14px; color: var(--text-2); transition: color .2s, background .2s, border-color .2s; }
.docs__nav a .icon { width: 15px; height: 15px; flex: none; }
.docs__nav a:hover { color: var(--text); background: var(--surface); }
.docs__nav a[aria-current="true"] { color: var(--text); background: var(--accent-soft); border-left-color: var(--accent); border-radius: 0 10px 10px 0; }
.docs__nav a[aria-current="true"] .icon { color: var(--accent); }
.docs__nav .docs__nav-cta { margin-top: 14px; border: 1px solid var(--line-2); }
.docs__nav-cta .icon:last-child { margin-left: auto; }
.docs__nav .docs__nav-cta:hover { border-color: var(--accent-line); }
.docs__body { display: grid; gap: clamp(56px, 7vw, 88px); min-width: 0; }
.docs__section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.docs__section .section__head { margin-bottom: 0; }
.docs .rule { scroll-margin-top: calc(var(--nav-h) + 24px); }
.docs .rule:target { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 40px -14px var(--accent); }
.rule h3 a.mono:hover { color: var(--accent); }
#choices { scroll-margin-top: calc(var(--nav-h) + 24px); }
@media (max-width: 1020px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__nav { position: sticky; top: var(--nav-h); z-index: 5; display: flex; gap: 4px; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter);
    background: rgb(8 9 11 / 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .docs__nav-head { display: none; }
  .docs__nav a { flex: none; white-space: nowrap; border-left: 0; }
  .docs__nav a[aria-current="true"] { border-radius: 10px; }
  .docs__nav .docs__nav-cta { margin-top: 0; }
}
/* Memories: a wall of screenshots at their own shapes (no cropping), each
   opening full size. Columns keep tall and wide images packed together. */
.memory-wall { columns: 3 300px; column-gap: 20px; }
.memory { break-inside: avoid; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.memory__image { display: block; width: 100%; padding: 0; border: 0; background: var(--surface-2); cursor: zoom-in; overflow: hidden; }
.memory__image img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.memory__image:hover img { transform: scale(1.02); }
.memory__image:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.memory figcaption { display: grid; gap: 4px; padding: 14px 16px 16px; }
/* A clip plays where it is; a note is just words. */
.memory__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border: 0; }
div.memory__video iframe { display: block; width: 100%; height: 100%; border: 0; }
.memory__note { display: grid; gap: 8px; padding: 18px 18px 20px; background: linear-gradient(160deg, rgb(47 111 237 / 0.12), transparent 70%); }
.memory__note > .icon { width: 18px; height: 18px; color: var(--accent); }
.memory__note strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.25; }
.memory__note p { margin: 0; color: var(--text-2); white-space: pre-line; line-height: 1.6; }
.memory-more { border: 1px dashed var(--line); border-radius: var(--radius); padding: 10px 14px; }
.memory-more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-2); font-size: 14px; }
.memory-more summary .icon { width: 15px; height: 15px; }
.memory-more__forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 14px; }
.memory-more__forms strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.memory-more__forms strong .icon { width: 16px; height: 16px; color: var(--accent); }
.memory-row video, .memory-row__glyph { width: 140px; height: 100px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.memory-row video { object-fit: cover; background: #000; }
.memory-row__glyph { display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.memory figcaption strong { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.25; }
.memory figcaption span { color: var(--text-2); font-size: 14px; line-height: 1.55; }
.map-data .section__head { flex-wrap: wrap; }
.map-picker { display: grid; gap: 6px; min-width: min(280px, 100%); }
.map-version__note { color: var(--text-2); margin: -12px 0 20px; max-width: 72ch; }
.memory-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding-top: 14px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 20px); }
.memory-row img { width: 140px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.memory-row__fields { display: grid; gap: 8px; }
.memory-row__fields .textarea { min-height: 64px; }
.memory-row__actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.icon--flip { transform: rotate(180deg); }
.icon-btn:disabled { opacity: .3; cursor: default; background: none; }
.icon-btn.is-busy { opacity: .4; pointer-events: none; }
.icon-btn--danger:hover { color: #ff9a9d; background: rgb(239 90 95 / 0.12); }

/* A mod's logo, from CurseForge: square, so shown whole rather than cropped. */
.work-card__media--logo .work-card__logo { position: absolute; inset: 0; margin: auto; width: auto; height: 74%; aspect-ratio: 1; object-fit: contain; border-radius: 18px; box-shadow: 0 22px 44px -22px rgb(0 0 0 / 0.95), 0 0 0 1px var(--line-2); }
.work-card__stats { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--text-3); }
.project-title { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 24px); }
.project-logo { width: clamp(64px, 8vw, 88px); height: auto; aspect-ratio: 1; border-radius: 20px; box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -20px rgb(0 0 0 / 0.9); flex: none; }
.sync-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sync-bar > div { display: grid; gap: 3px; font-size: 14px; }
.sync-bar strong { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; }
.sync-bar strong .icon { width: 16px; height: 16px; color: var(--accent); }
.sync-bar form { margin: 0; flex: none; }
.meta-card__link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.meta-card__link .icon { width: 14px; }
.table td.nested { padding-left: 34px; }
/* A finished chapter reads as one: colour drains from its art until it is pointed at. */
.work-card--discontinued .work-card__media img { filter: grayscale(1) brightness(.8); transition: transform .8s var(--ease), filter .5s; }
.work-card--discontinued:hover .work-card__media img { filter: grayscale(.35) brightness(.95); }
.work-card--discontinued .work-card__media--blank { background: radial-gradient(circle at 50% 120%, rgb(255 255 255 / 0.06), transparent 60%), var(--surface-2); }
.work-card--discontinued .work-card__glyph { color: var(--text-3); border-color: var(--line-3); }
.work-card--discontinued:hover .work-card__more { color: var(--text); }
.stage-note {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--bg-raise); color: var(--text-2); font-size: 14.5px; line-height: 1.55;
}
.stage-note .icon { margin-top: 3px; color: var(--text-3); }
.stage-note--development { border-color: var(--accent-line); background: var(--accent-soft); color: #cce2ff; }
.stage-note--development .icon { color: var(--accent); }

/* Videos */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.video-card { display: grid; gap: 10px; align-content: start; }
.video-card__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s; filter: saturate(.9); }
.video-card:hover .video-card__thumb img { transform: scale(1.04); filter: saturate(1.05); }
.video-card__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: rgb(8 9 11 / 0.72); border: 1px solid rgb(255 255 255 / 0.18); backdrop-filter: blur(6px); transform: scale(.9); opacity: 0; transition: .3s var(--ease); }
.video-card__play .icon { width: 20px; fill: currentColor; margin-left: 2px; }
.video-card:hover .video-card__play { opacity: 1; transform: none; }
.video-card__tag { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: #ff0033; color: #fff; font: 600 11px/1.2 var(--font-mono); letter-spacing: .06em; }
.video-card h3 { font: 500 15.5px/1.4 var(--font-body); letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Community + support split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { position: relative; display: grid; gap: 16px; align-content: start; padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.panel--community::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgb(88 101 242 / 0.16), transparent 65%); pointer-events: none; }
.panel--support::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgb(47 111 237 / 0.17), transparent 65%); pointer-events: none; }
.panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.ladder__step { display: grid; justify-items: center; gap: 8px; padding: 14px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raise); font-size: 13px; color: var(--text-2); text-align: center; }

/* Tiles: the enforcement emoji, as the bot draws them in Discord */
.tile { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; border: 1px solid; }
.tile .icon { width: 19px; height: 19px; stroke-width: 2; }
.tile--warn { color: var(--warn); border-color: rgb(230 126 34 / 0.35); background: rgb(230 126 34 / 0.1); }
.tile--bad { color: var(--bad); border-color: rgb(239 90 95 / 0.35); background: rgb(239 90 95 / 0.1); }
.tile--ok { color: var(--ok); border-color: rgb(61 220 151 / 0.3); background: rgb(61 220 151 / 0.08); }
.tile--accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.tile--muted { color: var(--text-2); border-color: var(--line-2); background: var(--surface-2); }
.tile--lg { width: 48px; height: 48px; border-radius: 14px; }
.tile--lg .icon { width: 23px; height: 23px; }

/* Pills and clearance */
.pill { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; border: 1px solid var(--line-2); color: var(--text-2); }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--ok { color: var(--ok); border-color: rgb(61 220 151 / 0.3); background: rgb(61 220 151 / 0.07); }
.pill--bad { color: #ff8589; border-color: rgb(239 90 95 / 0.35); background: rgb(239 90 95 / 0.08); }
.pill--warn { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill--info { color: var(--info); border-color: rgb(90 169 255 / 0.32); background: rgb(90 169 255 / 0.08); }
.pill--muted i { background: var(--text-3); }
.clearance { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 500 11.5px/1.3 var(--font-mono); letter-spacing: .04em; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.clearance .icon { width: 13px; height: 13px; }
.clearance--owner { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.clearance--admin { color: #ff9a9d; border-color: rgb(239 90 95 / 0.35); background: rgb(239 90 95 / 0.07); }
.clearance--staff { color: var(--info); border-color: rgb(90 169 255 / 0.32); background: rgb(90 169 255 / 0.07); }

/* ── Cards, forms ─────────────────────────────────────────────────────── */
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.card__pad { padding: clamp(20px, 3vw, 28px); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.card__head h2, .card__head h3 { font-size: 19px; }
.stack { display: grid; gap: 16px; }
.stack--lg { gap: 28px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.row--between { justify-content: space-between; }

.field { display: grid; gap: 8px; }
.field > label, .field__label { font-weight: 550; font-size: 14px; }
.field__hint { font-size: 13px; color: var(--text-3); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--bg-raise); color: var(--text);
  transition: border-color .2s, box-shadow .2s; font-size: 14.5px;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2369717c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input:disabled, .select:disabled, .textarea:disabled { opacity: .5; cursor: not-allowed; background: var(--surface-2); border-color: var(--line-2); }
/* On a field that fills itself in - a synced mod's, from CurseForge. */
.synced-tag { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgb(90 169 255 / 0.3); background: rgb(90 169 255 / 0.07); color: #bcdcff; font: 500 11px/1.4 var(--font-mono); vertical-align: 1px; }
.synced-tag .icon { width: 11px; height: 11px; }
.work-card__media.is-synced { opacity: .6; }
.counter { font: 12px var(--font-mono); color: var(--text-3); justify-self: end; }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; margin: 2px 0 0; border-radius: 5px; border: 1px solid var(--line-3); background: var(--bg-raise); flex: none; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--accent); border-color: var(--accent); }
.check input:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--accent-ink); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.segmented { justify-self: start; display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-raise); gap: 2px; flex-wrap: wrap; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: .2s; }
.segmented input:checked + span { background: var(--surface-3); color: var(--text); }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius); border: 1px solid; font-size: 14px; }
.alert .icon { margin-top: 2px; }
.alert--bad { border-color: rgb(239 90 95 / 0.35); background: rgb(239 90 95 / 0.08); color: #ffb3b5; }
.alert--warn { border-color: var(--accent-line); background: var(--accent-soft); color: #cce2ff; }
.alert--info { border-color: rgb(90 169 255 / 0.3); background: rgb(90 169 255 / 0.07); color: #bcdcff; }
.alert--ok { border-color: rgb(61 220 151 / 0.35); background: rgb(61 220 151 / 0.08); color: #b5f5d8; }
.verify-layout { padding-bottom: 96px; }
.verify-layout > * { max-width: 560px; }
.dropzone { display: grid; gap: 10px; padding: 16px; border: 1px dashed var(--line-3); border-radius: var(--radius); background: var(--bg-raise); transition: .2s; }
.dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-3); }
.file-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; padding: 5px 6px 5px 10px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-2); font-size: 12.5px; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { background: none; border: 0; color: var(--text-3); cursor: pointer; display: grid; padding: 2px; }
.file-chip button:hover { color: var(--text); }
.captcha { min-height: 70px; }

/* ── Support ──────────────────────────────────────────────────────────── */
.support-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; padding: 36px 0 96px; align-items: start; }
.support-side { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 18px; }
.account { display: grid; gap: 18px; }
.account__top { display: flex; align-items: center; gap: 14px; }
.account__avatar { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-3); }
.account__name { display: grid; gap: 3px; min-width: 0; }
.account__name strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kv { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.kv > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* The "what the site keeps" table on /rules: a name, then what it is and for how long, as a left-aligned block. */
.data-keeps .kv > div { align-items: flex-start; gap: 28px; padding: 16px 0; }
.data-keeps .kv dt { flex: 0 0 190px; color: var(--text); font-weight: 600; }
.data-keeps .kv dd { flex: 1; display: grid; gap: 6px; text-align: left; color: var(--text-2); line-height: 1.55; }
.data-keeps .kv dd small { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; font-size: 13px; color: var(--text-3); }
.data-keeps .kv dd small b { font-weight: 500; color: var(--text-2); }
.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.choices li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.choices .icon { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--ok); }
@media (max-width: 720px) { .data-keeps .kv > div { flex-direction: column; gap: 6px; } .data-keeps .kv dt { flex: none; } .data-keeps .kv dd small { grid-template-columns: 1fr; gap: 2px; } }
.copy { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--text); font: inherit; }
.copy .icon { width: 13px; color: var(--text-3); }
.copy:hover .icon { color: var(--accent); }
.copy.mono { font-family: var(--font-mono); }
.copy--quiet { color: var(--text-3); }
.copy--quiet:hover { color: var(--text); }
.copy .icon, .copy.is-copied .icon { transition: color .2s; }
.copy.is-copied, .copy.is-copied .icon { color: var(--ok); }
/* The bubble over something just clicked: "Copied!" */
.tip {
  position: absolute; z-index: 90; padding: 6px 11px; border-radius: 8px; pointer-events: none; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line-3); color: var(--text); font: 500 12.5px/1.3 var(--font-body);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.9); animation: tip-in .18s var(--ease);
}
.tip::after {
  content: ""; position: absolute; top: 100%; left: var(--arrow, 50%); width: 8px; height: 8px;
  background: inherit; border: inherit; border-top: 0; border-left: 0; transform: translate(-50%, -4px) rotate(45deg);
}
.tip--below::after { top: auto; bottom: 100%; transform: translate(-50%, 4px) rotate(225deg); }
.tip--ok { color: #7ff0bf; border-color: rgb(61 220 151 / 0.4); }
.tip--bad { color: #ffb3b5; border-color: rgb(239 90 95 / 0.45); }
.tip.is-leaving { opacity: 0; transition: opacity .2s; }
.standing { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--bg-raise); }
.standing strong { display: block; font-size: 15px; }
.standing span { font-size: 13.5px; color: var(--text-2); }

.case { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s; }
.case:hover { border-color: var(--line-2); }
.case--overturned { opacity: .72; }
.case__body { display: grid; gap: 10px; min-width: 0; }
.case__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.case__head h3 { font-size: 18px; }
.case__id { color: var(--text-3); font-size: 13px; font-weight: 400; }
.case__reason { color: var(--text-2); font-size: 14.5px; overflow-wrap: anywhere; }
.case__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 0; font-size: 13px; }
.case__meta div { display: flex; gap: 7px; }
.case__meta dt { color: var(--text-3); }
.case__meta dd { margin: 0; color: var(--text-2); }
.case__action { align-self: center; }
.case__locked { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-3); max-width: 24ch; text-align: right; }
.case__locked .icon { width: 14px; flex: none; }
.case__evidence summary { cursor: pointer; font-size: 13px; color: var(--text-3); }
.case__evidence pre { margin: 8px 0 0; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-raise); border: 1px solid var(--line); font: 12.5px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); max-height: 260px; overflow: auto; }
.case__note { font-size: 13px; display: flex; gap: 7px; align-items: center; }
.case__note .icon { width: 14px; }

.list { display: grid; }
.list-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid var(--line); transition: background .15s; }
.list-row:first-child { border-top: 0; }
a.list-row:hover { background: var(--surface-2); }
.list-row__main { display: grid; gap: 3px; min-width: 0; }
.list-row__main strong { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row__main span { font-size: 13px; color: var(--text-3); }
.list-row__end { display: flex; align-items: center; gap: 10px; }
.unread { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.empty { display: grid; justify-items: center; gap: 8px; padding: 44px 24px; text-align: center; }
.empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); margin-bottom: 6px; }
.empty__icon .icon { width: 24px; height: 24px; }
.empty strong { font-size: 16px; }
.empty p { color: var(--text-2); max-width: 44ch; font-size: 14px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: step; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.step { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px; background: var(--surface); }
.step + .step { border-left: 1px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); font: 500 12px/1 var(--font-mono); color: var(--accent); letter-spacing: .1em; }
.step h3 { font-size: 17px; }
.step p { font-size: 13.5px; color: var(--text-2); }
.signin-card { display: grid; gap: 18px; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--surface), var(--bg-raise)); position: relative; overflow: hidden; }
.signin-card::before { content: ""; position: absolute; inset: 0; background: var(--hex); background-size: 60px 34.641px; opacity: .05; pointer-events: none; }
.signin-card > * { position: relative; }
.signin-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.signin-card li { display: flex; gap: 10px; font-size: 14px; color: var(--text-2); }
.signin-card li .icon { color: var(--ok); margin-top: 3px; }

/* The thread */
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding: 28px 0 80px; align-items: start; }
.statement { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); }
.statement h3 { font: 500 11.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.statement p { white-space: pre-wrap; overflow-wrap: anywhere; color: #d9dde2; }
.thread { display: grid; gap: 2px; margin-top: 18px; }
.msg { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 16px 4px; }
.msg + .msg:not(.msg--system) { border-top: 1px solid var(--line); }
.msg__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text-3); }
.msg__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 5px; }
.msg__head strong { font-weight: 600; font-size: 14.5px; }
.msg__head time { font-size: 12.5px; color: var(--text-3); }
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; color: #d9dde2; font-size: 14.5px; line-height: 1.6; }
.msg__body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.msg--staff .msg__avatar { border-color: var(--accent-line); }
.msg--internal { margin: 6px 0; padding: 14px; border: 1px dashed var(--accent-line); border-radius: var(--radius); background: rgb(47 111 237 / 0.06); }
.msg--internal + .msg { border-top: 0 !important; }
.internal-tag { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.internal-tag .icon { width: 12px; }
/* "Sent" / "Seen by staff" under the latest message, in line with its text. */
.receipt { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0 4px 4px 56px; font-size: 12.5px; color: var(--text-3); }
.receipt .icon { width: 14px; height: 14px; }
.receipt--seen .icon { color: var(--ok); }
.receipt time { color: inherit; }
.msg--system { display: flex; justify-content: center; padding: 10px 0; }
.msg--system .msg__sys { display: inline-flex; gap: 9px; align-items: flex-start; max-width: 620px; padding: 9px 14px; border-radius: var(--radius); background: var(--bg-raise); border: 1px solid var(--line); font-size: 13.5px; color: var(--text-2); white-space: pre-wrap; }
.msg--system .icon { color: var(--text-3); margin-top: 3px; width: 15px; }
.attachments { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; max-width: 620px; }
.attachment { border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; background: var(--bg-raise); }
.attachment img, .attachment video { width: 100%; max-height: 260px; object-fit: cover; cursor: zoom-in; background: #000; }
.attachment video { cursor: auto; object-fit: contain; }
.attachment--file a { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: 13.5px; }
.attachment--file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer { position: sticky; bottom: 16px; margin-top: 18px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: rgb(16 19 23 / 0.94); backdrop-filter: blur(10px); box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.95); transition: border-color .2s, box-shadow .2s; }
.composer:focus-within { border-color: var(--line-3); }
.composer.is-internal { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.composer.is-over { border-color: var(--accent); }
.composer textarea { width: 100%; min-height: 52px; max-height: 280px; padding: 15px 16px 6px; border: 0; background: none; resize: none; outline: none; font-size: 14.5px; line-height: 1.55; }
.composer__files { padding: 0 12px; }
.composer__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px 12px; }
.composer__error { padding: 0 16px 8px; color: #ff9a9d; font-size: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; color: var(--text-2); cursor: pointer; transition: .2s; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; }
.toggle input { appearance: none; width: 30px; height: 18px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-3); position: relative; cursor: pointer; transition: .2s; }
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-2); transition: .2s var(--ease); }
.toggle input:checked { background: var(--accent-soft); border-color: var(--accent); }
.toggle input:checked::after { transform: translateX(12px); background: var(--accent); }
.hint-keys { font: 11.5px var(--font-mono); color: var(--text-3); margin-left: auto; margin-right: 6px; }
/* "New message" - on a ticket, when a reply lands while you're reading further up. */
.jump {
  position: fixed; z-index: 40; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); font: 600 13.5px/1 var(--font-body);
  box-shadow: 0 12px 30px -10px rgb(47 111 237 / 0.84); animation: toast-in .3s var(--ease);
}
/* Up to the top or down to the end of a long page, each shown once you're a
   little way from that end (site.js). */
.scroll-jumps { position: fixed; z-index: 40; right: 20px; bottom: 24px; display: grid; gap: 8px; }
/* On a ticket narrow enough for its message box to run the full width, above that. */
@media (max-width: 1020px) { body:has(.composer) .scroll-jumps { bottom: 136px; } }
.to-top {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-3); background: rgb(16 19 23 / 0.92); color: var(--text); backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.8); transition: border-color .2s, color .2s; animation: pop .2s var(--ease);
}
.to-top:hover { border-color: var(--accent-line); color: var(--accent-2); }
.to-top .icon { width: 20px; height: 20px; }
/* Who's here: under the profile on a ticket. */
.presence { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--text-2); }
.presence i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--text-3); }
.presence--online i { background: var(--ok); }
/* The site open only in a background tab: a hollow light. */
.presence--away i { background: transparent; box-shadow: inset 0 0 0 2px var(--ok); opacity: 0.75; }
.presence--viewing i { background: var(--ok); box-shadow: 0 0 0 0 rgb(61 220 151 / 0.6); animation: presence-pulse 1.8s ease-out infinite; }
.presence--viewing { color: var(--text); }
.presence time { color: inherit; }
@keyframes presence-pulse { 70% { box-shadow: 0 0 0 7px rgb(61 220 151 / 0); } 100% { box-shadow: 0 0 0 0 rgb(61 220 151 / 0); } }
.lookup-presence { margin: 12px 0 2px; }
.lookup-presence:empty { display: none; }
/* "Asteri is typing…", above the composer. */
.typing { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 0 4px 0 56px; min-height: 20px; font-size: 13px; color: var(--text-2); }
.typing[hidden] { display: flex !important; visibility: hidden; }
.typing__dots { display: inline-flex; gap: 3px; }
.typing__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); animation: typing-dot 1.2s ease-in-out infinite; }
.typing__dots i:nth-child(2) { animation-delay: .15s; }
.typing__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .presence--viewing i, .typing__dots i { animation: none; } }
.push-offer { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--accent-line); background: var(--accent-soft); animation: pop .25s var(--ease); }
.push-offer__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.push-offer__text span { color: var(--text-2); }
.push-offer__text span.is-warning { color: var(--warn); }
.push-offer__actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 560px) { .push-offer { flex-wrap: wrap; } .push-offer__actions { width: 100%; justify-content: flex-end; } }
.closed-note { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 16px 18px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--bg-raise); color: var(--text-2); font-size: 14px; }

dialog.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: 0 40px 100px -30px rgb(0 0 0 / 0.95); }
dialog.modal::backdrop { background: rgb(4 5 6 / 0.72); backdrop-filter: blur(4px); }
dialog.modal[open] { animation: pop .2s var(--ease); }
.modal__body { display: grid; gap: 16px; padding: 24px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }
dialog.lightbox { max-width: 94vw; max-height: 92vh; padding: 0; border: 0; background: none; }
dialog.lightbox::backdrop { background: rgb(0 0 0 / 0.86); }
dialog.lightbox img { max-width: 94vw; max-height: 92vh; border-radius: var(--radius); }
dialog.lightbox figure { margin: 0; display: grid; gap: 12px; justify-items: center; }
.lightbox--captioned img { max-height: 80vh; }
dialog.lightbox figcaption { display: grid; gap: 3px; max-width: 70ch; text-align: center; color: var(--text); }
dialog.lightbox figcaption strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
dialog.lightbox figcaption span { color: var(--text-2); font-size: 14.5px; }
dialog.lightbox figcaption strong:empty, dialog.lightbox figcaption span:empty { display: none; }
dialog.lightbox figcaption .lightbox__count { font: 12px var(--font-mono); font-style: normal; color: var(--text-3); }
dialog.lightbox figcaption .lightbox__count:empty { display: none; }
.lightbox__step, .lightbox__close {
  position: fixed; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line-2); background: rgb(12 14 17 / 0.72); color: var(--text); transition: background .2s, border-color .2s;
}
.lightbox__step:hover, .lightbox__close:hover { background: var(--surface-3); border-color: var(--line-3); }
.lightbox__step { top: 50%; margin-top: -23px; }
.lightbox__step--prev { left: 16px; }
.lightbox__step--next { right: 16px; }
.lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; }
.lightbox__step .icon, .lightbox__close .icon { width: 20px; height: 20px; }

/* Staff */
/* Sideways scroll on a narrow screen, never up and down: the active underline hangs 1px below the strip, which
   would otherwise give it a little vertical scrollbar. */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; }
.tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: 14px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent); }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; min-width: 220px; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); width: 16px; }
.search .input { padding-left: 36px; min-height: 38px; }
.queue-row { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) auto; }
.queue-row img { width: 34px; height: 34px; border-radius: 50%; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.stat span { font: 500 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }
.stat strong { font: 600 34px/1 var(--font-display); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font: 500 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); padding: 12px 20px; border-bottom: 1px solid var(--line); }
.table td { padding: 13px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--surface-2); }
.admin-nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* Rules */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.rule h3 { font-size: 17px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.rule h3 .mono { color: var(--text-3); font-size: 12px; font-weight: 400; }
.rule p { color: var(--text-2); font-size: 14px; margin-top: 5px; }
.enforce { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.enforce__step { display: grid; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.enforce__step .mono { color: var(--text-3); font-size: 11.5px; letter-spacing: .12em; }
.enforce__step p { color: var(--text-2); font-size: 14px; }

/* Login + errors */
.center-page { min-height: calc(100vh - var(--nav-h) - 280px); display: grid; place-items: center; padding: 64px 0; }
.login { width: min(440px, 100%); display: grid; gap: 22px; padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: center; position: relative; overflow: hidden; }
.login::before { content: ""; position: absolute; left: 50%; top: -180px; width: 420px; height: 320px; margin-left: -210px; background: radial-gradient(circle, rgb(47 111 237 / 0.22), transparent 65%); pointer-events: none; }
.login > * { position: relative; }
.login .mark { width: 64px; height: 64px; margin: 0 auto; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font: 11px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.error-code { font: 700 clamp(88px, 16vw, 160px)/0.9 var(--font-display); letter-spacing: -0.03em; background: linear-gradient(180deg, var(--text), var(--line-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Footer */
.footer { border-top: 1px solid var(--line); background: var(--bg-raise); margin-top: auto; }
.footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 32px; padding: 36px 0 40px; }
.footer__grid h4 { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); margin-bottom: 16px; }
.footer__grid > div { display: grid; gap: 10px; align-content: start; font-size: 14px; }
.footer__grid a:not(.brand) { color: var(--text-2); transition: color .2s; width: fit-content; }
.footer__grid a:not(.brand):hover { color: var(--text); }
.footer__brand p { font-size: 14px; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 44px 0 36px; border-bottom: 1px solid var(--line); }
.footer__brand { display: grid; gap: 8px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgb(255 255 255 / 0.02); font-size: 14px; font-weight: 550; color: var(--text); transition: border-color .2s, background-color .2s; }
.footer__link:hover { border-color: var(--line-3); background: rgb(255 255 255 / 0.05); }
.footer__link .icon { width: 17px; height: 17px; }
.footer__link--discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.footer__link--discord:hover { background: #6b77ff; border-color: #6b77ff; }
.footer__link--donate { border-color: var(--accent-line); color: var(--accent-2); }
.footer__link--donate:hover { background: var(--accent-soft); border-color: var(--accent); }
.footer__base { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-3); }

/* Scroll reveal */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--delay, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
/* Settings: sections down the side, one card per section, a row per setting. */
.settings { padding-top: 32px; }
.settings__layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.settings__nav { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 2px; }
.settings__nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 14px; }
.settings__nav a:hover { background: var(--surface-2); color: var(--text); }
.settings__nav a[aria-current="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.settings__nav .icon { width: 16px; height: 16px; }
.settings__main { display: grid; gap: 24px; max-width: 760px; }
.settings-card { overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 24px); }
.settings-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.settings-card__head h2 { font-size: 22px; }
.settings-card__head p { margin-top: 4px; font-size: 14px; }
.settings__status { font: 12.5px var(--font-mono); color: var(--text-3); white-space: nowrap; }
.settings__status[data-tone="ok"] { color: var(--ok); }
.settings__status[data-tone="bad"] { color: var(--bad); white-space: normal; text-align: right; max-width: 28ch; }
.settings-group { padding: 6px 24px 10px; }
.settings-group + .settings-group { border-top: 1px solid var(--line); }
.settings-group__title { margin: 16px 0 2px; font: 600 11.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; transition: opacity .2s; }
.setting + .setting { border-top: 1px dashed var(--line); }
.setting.is-off { opacity: .45; }
.setting__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; cursor: pointer; }
div.setting__text { cursor: default; }
.setting__text strong { font-size: 15px; font-weight: 550; color: var(--text); }
.setting__text span { font-size: 13.5px; color: var(--text-2); max-width: 54ch; }
.setting__text span.is-warning { color: var(--warn); }
.setting__control { display: flex; align-items: center; gap: 14px; }
.settings-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); }
.settings-card__foot p { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; max-width: 60ch; }
.settings-card__foot .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.switch { appearance: none; flex: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-3); position: relative; cursor: pointer; transition: .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-2); transition: .2s var(--ease); }
.switch:checked { background: var(--accent-soft); border-color: var(--accent); }
.switch:checked::after { transform: translateX(18px); background: var(--accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch:disabled { opacity: .4; cursor: not-allowed; }
.range { appearance: none; -webkit-appearance: none; width: 170px; height: 4px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--surface-3) var(--fill, 50%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.range::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--text); border: 3px solid var(--accent); }
.range:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; }
  .emblem { width: min(340px, 78%); margin-top: 8px; }
  .work-grid, .video-grid { grid-template-columns: repeat(2, 1fr); }
  .support-layout, .ticket-layout, .project-layout { grid-template-columns: 1fr; }
  .support-side, .meta-card { position: static; }
  .ticket-layout aside { order: -1; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); }
  .enforce, .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .settings__layout { grid-template-columns: 1fr; }
  .settings__nav { position: static; display: flex; overflow-x: auto; }
  .settings-card__head, .settings-group, .settings-card__foot { padding-inline: 18px; }
  .setting--wide { flex-wrap: wrap; }
  .memory-row { grid-template-columns: 1fr; }
  .memory-row img, .memory-row video, .memory-row__glyph { width: 100%; height: auto; max-height: 220px; }
  .memory-row__glyph { height: 90px; }
  .memory-row__actions { justify-content: flex-start; }
  .settings-card__foot { flex-direction: column; align-items: stretch; }
  :root { --nav-h: 58px; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto; flex-direction: column; gap: 0; margin: 0; padding: 8px var(--gutter) 16px;
    background: rgb(8 9 11 / 0.97); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .25s var(--ease);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding: 13px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav__links a[aria-current="page"]::after { left: auto; right: 4px; top: 50%; bottom: auto; margin: -2px 0 0; }
  .nav__toggle { display: inline-grid; }
  .user-chip__name, .user-chip__caret { display: none; }
  .user-chip { padding: 0 4px; }
  .brand__word { font-size: 14px; }
  .work-grid, .video-grid, .split, .rules, .enforce, .steps, .stats { grid-template-columns: 1fr; }
  .step + .step { border-left: 0; border-top: 1px solid var(--line); }
  .case { grid-template-columns: auto minmax(0, 1fr); }
  .case__action { grid-column: 1 / -1; justify-self: start; }
  .case__locked { text-align: left; max-width: none; }
  .ladder { grid-template-columns: repeat(2, 1fr); }
  .section__head { flex-direction: column; align-items: start; }
  .queue-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .queue-row .queue-row__case { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; }
  .hint-keys { display: none; }
  .table th:nth-child(n+4), .table td:nth-child(n+4) { display: none; }
  .login { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── Seasons: boot.js sets <html data-season> from the visitor's date ─── */
/* Halloween: the logo goes pumpkin orange, and a spider dangles from it. */
html[data-season="halloween"] .brand__word b { color: #ff8a1f; }
html[data-season="halloween"] .nav .mark__a { background: linear-gradient(160deg, #ffc46b, #ff7a00 55%, #c24e00); }
html[data-season="halloween"] .nav .mark { filter: drop-shadow(0 0 6px rgb(255 122 0 / 0.55)); }
html[data-season="halloween"] .nav .brand { position: relative; }
html[data-season="halloween"] .nav .brand::after {
  content: ""; position: absolute; left: 8px; top: 62%; width: 14px; height: 30px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30'%3E %3Cline x1='7' y1='0' x2='7' y2='20' stroke='white' stroke-opacity='0.45' stroke-width='0.7'/%3E %3Cg stroke='%23d9cfe8' stroke-width='0.9' stroke-linecap='round' fill='none'%3E %3Cpath d='M5.5 21 L1.5 18.5 M5.5 22.5 L1 22.5 M5.5 24 L1.5 26.5 M6 25 L3.5 29'/%3E %3Cpath d='M8.5 21 L12.5 18.5 M8.5 22.5 L13 22.5 M8.5 24 L12.5 26.5 M8 25 L10.5 29'/%3E %3C/g%3E %3Cellipse cx='7' cy='23' rx='2.6' ry='3.1' fill='%23d9cfe8'/%3E %3Ccircle cx='7' cy='19.6' r='1.6' fill='%23d9cfe8'/%3E %3Ccircle cx='6.3' cy='19.4' r='0.4' fill='%23ff7a00'/%3E%3Ccircle cx='7.7' cy='19.4' r='0.4' fill='%23ff7a00'/%3E %3C/svg%3E") no-repeat top center / 14px 30px;
  transform-origin: top center; animation: spider-dangle 3.4s ease-in-out infinite;
}
@keyframes spider-dangle {
  0%, 100% { transform: translateY(-9px) rotate(-4deg); }
  50% { transform: translateY(3px) rotate(4deg); }
}
/* Winter (Christmas too): a little snow settled on the flat top edge of the
   logo's hexagon, a frosty STUDIOS, and a couple of flakes drifting past. */
html:is([data-season="christmas"], [data-season="winter"]) .brand__word b { color: #9fd8ff; text-shadow: 0 0 10px rgb(159 216 255 / 0.45); }
html:is([data-season="christmas"], [data-season="winter"]) .nav .mark { filter: drop-shadow(0 0 6px rgb(159 216 255 / 0.45)); }
html:is([data-season="christmas"], [data-season="winter"]) .nav .mark::before {
  /* The frame's top edge runs from 29% to 71% across, 8% down. */
  content: ""; position: absolute; left: 25%; right: 25%; top: -2px; height: 6px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10' preserveAspectRatio='none'%3E%3Cpath d='M0 9.5 C1.5 6 4.5 4 8.5 4.4 C11.5 1.6 15.5 0.8 18.5 2.6 C21.5 0.9 25.5 1.4 27.8 4 C31 3.6 34.3 5.8 36 9.5 C33 10.2 29 9.6 26 10 C22 9.4 14 10.2 10 9.6 C6 10.2 3 9.8 0 9.5Z' fill='%23f4f8ff'/%3E%3Cpath d='M2 9.2 C8 8.4 28 8.4 34 9.2 C30 9.9 6 9.9 2 9.2Z' fill='%23bcdcff' opacity='0.8'/%3E%3Cpath d='M24 9.6 C24.6 9.6 25 10 24.8 10 Z' fill='%23f4f8ff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
html:is([data-season="christmas"], [data-season="winter"]) .nav .brand { position: relative; }
html:is([data-season="christmas"], [data-season="winter"]) .nav .brand::before,
html:is([data-season="christmas"], [data-season="winter"]) .nav .brand::after {
  content: ""; position: absolute; top: -6px; width: 7px; height: 7px; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg stroke='%23e8f6ff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M10 2v16M3.1 6l13.8 8M3.1 14l13.8-8'/%3E%3Cpath d='M8 3.5l2 2 2-2M8 16.5l2-2 2 2' fill='none'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; animation: flake-fall 5s linear infinite;
}
html:is([data-season="christmas"], [data-season="winter"]) .nav .brand::before { left: 3px; }
html:is([data-season="christmas"], [data-season="winter"]) .nav .brand::after { left: 26px; width: 5px; height: 5px; animation-delay: 2.5s; animation-duration: 6s; }
@keyframes flake-fall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  15% { opacity: .9; }
  50% { transform: translate(4px, 16px) rotate(90deg); }
  85% { opacity: .6; }
  100% { transform: translate(-2px, 32px) rotate(180deg); opacity: 0; }
}
/* New Year: fireworks going off around the logo, and STUDIOS shimmering gold. */
html[data-season="newyear"] .brand__word b {
  background: linear-gradient(90deg, #ffd166, #fff3c4, #ffd166, #4d8dff, #ffd166); background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: gold-shimmer 5s linear infinite;
}
@keyframes gold-shimmer { to { background-position: -300% 0; } }
html[data-season="newyear"] .nav .brand { position: relative; }
html[data-season="newyear"] .nav .brand::before, html[data-season="newyear"] .nav .brand::after {
  content: ""; position: absolute; width: 36px; height: 36px; pointer-events: none; opacity: 0;
  animation: firework 2.8s ease-out infinite;
}
html[data-season="newyear"] .nav .brand::before { left: -16px; top: -12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23ffd166' fill='%23ffd166' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='25.0' y1='20.0' x2='35.0' y2='20.0'/%3E%3Ccircle cx='38.0' cy='20.0' r='1.3'/%3E%3Cline x1='24.3' y1='22.5' x2='33.0' y2='27.5'/%3E%3Ccircle cx='35.6' cy='29.0' r='1.3'/%3E%3Cline x1='22.5' y1='24.3' x2='27.5' y2='33.0'/%3E%3Ccircle cx='29.0' cy='35.6' r='1.3'/%3E%3Cline x1='20.0' y1='25.0' x2='20.0' y2='35.0'/%3E%3Ccircle cx='20.0' cy='38.0' r='1.3'/%3E%3Cline x1='17.5' y1='24.3' x2='12.5' y2='33.0'/%3E%3Ccircle cx='11.0' cy='35.6' r='1.3'/%3E%3Cline x1='15.7' y1='22.5' x2='7.0' y2='27.5'/%3E%3Ccircle cx='4.4' cy='29.0' r='1.3'/%3E%3Cline x1='15.0' y1='20.0' x2='5.0' y2='20.0'/%3E%3Ccircle cx='2.0' cy='20.0' r='1.3'/%3E%3Cline x1='15.7' y1='17.5' x2='7.0' y2='12.5'/%3E%3Ccircle cx='4.4' cy='11.0' r='1.3'/%3E%3Cline x1='17.5' y1='15.7' x2='12.5' y2='7.0'/%3E%3Ccircle cx='11.0' cy='4.4' r='1.3'/%3E%3Cline x1='20.0' y1='15.0' x2='20.0' y2='5.0'/%3E%3Ccircle cx='20.0' cy='2.0' r='1.3'/%3E%3Cline x1='22.5' y1='15.7' x2='27.5' y2='7.0'/%3E%3Ccircle cx='29.0' cy='4.4' r='1.3'/%3E%3Cline x1='24.3' y1='17.5' x2='33.0' y2='12.5'/%3E%3Ccircle cx='35.6' cy='11.0' r='1.3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; }
html[data-season="newyear"] .nav .brand::after { left: 20px; top: -16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23c88bff' fill='%23c88bff' stroke-width='1.4' stroke-linecap='round'%3E%3Cline x1='25.0' y1='20.0' x2='35.0' y2='20.0'/%3E%3Ccircle cx='38.0' cy='20.0' r='1.3'/%3E%3Cline x1='24.3' y1='22.5' x2='33.0' y2='27.5'/%3E%3Ccircle cx='35.6' cy='29.0' r='1.3'/%3E%3Cline x1='22.5' y1='24.3' x2='27.5' y2='33.0'/%3E%3Ccircle cx='29.0' cy='35.6' r='1.3'/%3E%3Cline x1='20.0' y1='25.0' x2='20.0' y2='35.0'/%3E%3Ccircle cx='20.0' cy='38.0' r='1.3'/%3E%3Cline x1='17.5' y1='24.3' x2='12.5' y2='33.0'/%3E%3Ccircle cx='11.0' cy='35.6' r='1.3'/%3E%3Cline x1='15.7' y1='22.5' x2='7.0' y2='27.5'/%3E%3Ccircle cx='4.4' cy='29.0' r='1.3'/%3E%3Cline x1='15.0' y1='20.0' x2='5.0' y2='20.0'/%3E%3Ccircle cx='2.0' cy='20.0' r='1.3'/%3E%3Cline x1='15.7' y1='17.5' x2='7.0' y2='12.5'/%3E%3Ccircle cx='4.4' cy='11.0' r='1.3'/%3E%3Cline x1='17.5' y1='15.7' x2='12.5' y2='7.0'/%3E%3Ccircle cx='11.0' cy='4.4' r='1.3'/%3E%3Cline x1='20.0' y1='15.0' x2='20.0' y2='5.0'/%3E%3Ccircle cx='20.0' cy='2.0' r='1.3'/%3E%3Cline x1='22.5' y1='15.7' x2='27.5' y2='7.0'/%3E%3Ccircle cx='29.0' cy='4.4' r='1.3'/%3E%3Cline x1='24.3' y1='17.5' x2='33.0' y2='12.5'/%3E%3Ccircle cx='35.6' cy='11.0' r='1.3'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain; animation-delay: 1.4s; }
@keyframes firework {
  0% { transform: scale(0.15); opacity: 0; }
  12% { opacity: 1; }
  65% { transform: scale(1); opacity: 0.85; }
  100% { transform: scale(1.15); opacity: 0; }
}
/* Valentine's Day: a pink STUDIOS, and a heart beating over the logo. */
html[data-season="valentine"] .brand__word b { color: #ff6fae; }
html[data-season="valentine"] .nav .mark { filter: drop-shadow(0 0 6px rgb(255 111 174 / 0.55)); }
html[data-season="valentine"] .nav .brand { position: relative; }
html[data-season="valentine"] .nav .brand::after {
  content: ""; position: absolute; left: 22px; top: -6px; width: 13px; height: 13px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 28C4 20 0 12 6 6c5-5 10-1 10 3 0-4 5-8 10-3 6 6 2 14-10 22z' fill='%23ff6fae'/%3E%3C/svg%3E") no-repeat center / contain; animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } }
/* Easter: a pastel STUDIOS, and an egg sat by the logo, now and then wobbling. */
html[data-season="easter"] .brand__word b {
  background: linear-gradient(90deg, #ffb3cf, #fff3a8 35%, #a8e6cf 65%, #b6e5ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-season="easter"] .nav .mark { filter: drop-shadow(0 0 6px rgb(182 229 255 / 0.5)); }
html[data-season="easter"] .nav .brand { position: relative; }
html[data-season="easter"] .nav .brand::after {
  content: ""; position: absolute; left: 24px; top: 58%; width: 11px; height: 14px; pointer-events: none; transform-origin: 50% 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 28'%3E%3Cpath d='M11 1C5.5 1 1 10 1 17a10 10 0 0 0 20 0C21 10 16.5 1 11 1Z' fill='%23ffb3cf'/%3E%3Cpath d='M1.6 14.5 5 12l3.4 2.5L11 12l2.6 2.5L17 12l3.4 2.5' fill='none' stroke='%23ff6fae' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / contain;
  animation: egg-wobble 4s ease-in-out infinite;
}
@keyframes egg-wobble { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(12deg); } 92% { transform: rotate(-7deg); } 96% { transform: rotate(4deg); } }
/* April Fools' Day: STUDIOS upside down, and the emblem too. Nobody mention it. */
html[data-season="aprilfools"] .brand__word b { display: inline-block; rotate: 180deg; }

/* The home emblem takes the season's colour: a flickering jack-o'-lantern
   orange, frost blue, gold, or pink. */
/* The colour is a still filter, drawn once; the flicker is opacity, which costs nothing to animate. */
html[data-season="halloween"] .emblem__stage { filter: hue-rotate(118deg) saturate(1.4); animation: lantern 3.4s ease-in-out infinite; }
@keyframes lantern { 0%, 100% { opacity: 1; } 44% { opacity: .8; } 50% { opacity: 1; } 56% { opacity: .88; } }
html:is([data-season="christmas"], [data-season="winter"]) .emblem__stage { filter: hue-rotate(-70deg) saturate(1.1); }
html[data-season="newyear"] .emblem__stage { filter: hue-rotate(135deg) saturate(1.25) brightness(1.05); }
html[data-season="valentine"] .emblem__stage { filter: hue-rotate(60deg) saturate(1.2); }
html[data-season="easter"] .emblem__stage { filter: hue-rotate(35deg) saturate(.55) brightness(1.2); }
html[data-season="aprilfools"] .emblem__stage { scale: 1 -1; }

/* Halloween: cobwebs in the corners of the header areas, fog along their floor. */
.season-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.season-decor__web { position: absolute; top: 0; left: 0; width: 160px; height: 160px; opacity: .28; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Cpath d='M0 0 L149.6 10.5 M0 0 L141.0 51.3 M0 0 L119.8 90.3 M0 0 L88.2 121.4 M0 0 L51.3 141.0 M0 0 L10.5 149.6 M20.0 1.4 Q16.8 3.6 18.8 6.8 M18.8 6.8 Q15.1 8.2 16.0 12.0 M16.0 12.0 Q12.1 12.3 11.8 16.2 M11.8 16.2 Q8.1 15.2 6.8 18.8 M6.8 18.8 Q3.6 16.8 1.4 20.0 M41.9 2.9 Q35.3 7.5 39.5 14.4 M39.5 14.4 Q31.7 17.2 33.5 25.3 M33.5 25.3 Q25.3 25.8 24.7 34.0 M24.7 34.0 Q17.0 31.9 14.4 39.5 M14.4 39.5 Q7.5 35.3 2.9 41.9 M65.8 4.6 Q55.5 11.8 62.0 22.6 M62.0 22.6 Q49.9 27.1 52.7 39.7 M52.7 39.7 Q39.8 40.5 38.8 53.4 M38.8 53.4 Q26.6 50.1 22.6 62.0 M22.6 62.0 Q11.8 55.5 4.6 65.8 M91.8 6.4 Q77.4 16.4 86.5 31.5 M86.5 31.5 Q69.5 37.8 73.5 55.4 M73.5 55.4 Q55.5 56.4 54.1 74.4 M54.1 74.4 Q37.1 69.9 31.5 86.5 M31.5 86.5 Q16.4 77.4 6.4 91.8 M119.7 8.4 Q100.9 21.5 112.8 41.0 M112.8 41.0 Q90.7 49.2 95.8 72.2 M95.8 72.2 Q72.3 73.6 70.5 97.1 M70.5 97.1 Q48.4 91.1 41.0 112.8 M41.0 112.8 Q21.5 100.9 8.4 119.7' fill='none' stroke='%23ffffff' stroke-width='0.9' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat top left / contain; }
.season-decor__web--right { left: auto; right: 0; width: 120px; height: 120px; transform: scaleX(-1); opacity: .22; }
.season-decor__fog {
  position: absolute; left: 0; bottom: -12px; width: 200%; height: 60%;
  /* Each blob fades out (at 70% of its radius) well inside its tile, so the
     repeats join without a seam. */
  background-image: linear-gradient(to top, rgb(178 205 228 / 0.07), transparent 38%),
                    radial-gradient(22% 45% at 18% 100%, rgb(178 205 228 / 0.12), transparent 70%),
                    radial-gradient(20% 38% at 50% 100%, rgb(178 205 228 / 0.10), transparent 70%),
                    radial-gradient(22% 48% at 82% 100%, rgb(178 205 228 / 0.12), transparent 70%);
  background-size: 50% 100%; background-repeat: repeat-x; animation: fog-drift 46s linear infinite;
}
.season-decor__fog { will-change: transform; }
@media (max-width: 760px) { .season-decor__fog--b { display: none; } }  /* one layer of fog is plenty on a phone */
.season-decor__fog--b { bottom: -30px; opacity: .75; animation-duration: 70s; animation-direction: reverse; background-position: 25% 0; }
@keyframes fog-drift { to { transform: translateX(-50%); } }

/* Christmas: coloured lights strung under the menu bar. Winter: icicles. */
.season-lights { position: absolute; left: 0; right: 0; top: 100%; height: 16px; display: flex; justify-content: space-around; pointer-events: none; }
.season-lights::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: #1e2a20; }
.season-lights i { position: relative; width: 7px; height: 10px; margin-top: 4px; border-radius: 50% 50% 45% 45%; background: var(--bulb); box-shadow: 0 0 8px 2px var(--bulb); animation: twinkle 2.4s ease-in-out infinite; animation-delay: var(--d); }
.season-lights i::before { content: ""; position: absolute; top: -3px; left: 1.5px; width: 4px; height: 4px; border-radius: 1px; background: #2a2f2a; }
.season-lights i:nth-child(5n+1) { --bulb: #ff4d5e; }
.season-lights i:nth-child(5n+2) { --bulb: #ffd166; }
.season-lights i:nth-child(5n+3) { --bulb: #3ddc97; }
.season-lights i:nth-child(5n+4) { --bulb: #4db8ff; }
.season-lights i:nth-child(5n) { --bulb: #7aabff; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }  /* opacity alone: no repaint */
.season-icicles { position: absolute; left: 0; right: 0; top: 100%; height: 12px; pointer-events: none; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e8f6ff'/%3E%3Cstop offset='1' stop-color='%239fd8ff' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-0.4 0 L2.0 7 L4.4 0Z M6.6 0 L9.0 12 L11.4 0Z M13.6 0 L16.0 5 L18.4 0Z M19.6 0 L22.0 10 L24.4 0Z M27.6 0 L30.0 6 L32.4 0Z M34.6 0 L37.0 11 L39.4 0Z M42.6 0 L45.0 7 L47.4 0Z M49.6 0 L52.0 9 L54.4 0Z' fill='url(%23i)'/%3E%3Crect width='60' height='1.6' fill='%23e8f6ff'/%3E%3C/svg%3E") repeat-x top left / 60px 12px; }

/* New Year: a countdown to midnight on the home page, and confetti. */
.season-countdown { display: inline-flex; width: fit-content; padding: 6px 12px; border: 1px solid rgb(255 209 102 / 0.35); border-radius: 999px; background: rgb(255 209 102 / 0.06); color: #ffd166; font-size: 13px; letter-spacing: .06em; }
.confetti { position: fixed; inset: 0; z-index: 150; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: confetti-fall var(--t) cubic-bezier(.25, .6, .4, 1) var(--d) forwards; }
@keyframes confetti-fall { 90% { opacity: 1; } to { transform: translate(var(--dx), 105vh) rotate(calc(var(--r) + 720deg)); opacity: 0; } }

/* Easter: an egg perched on something on the page, found with a click. */
.easter-egg {
  position: absolute; z-index: 30; width: 22px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 100%; animation: egg-wobble 5s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgb(0 0 0 / 0.5));
}
.easter-egg svg { display: block; width: 100%; height: 100%; }
.easter-egg:hover, .easter-egg:focus-visible { animation-duration: 1.2s; }
.easter-egg.is-found { animation: none; cursor: default; }
.easter-egg.is-found svg { animation: egg-found .6s cubic-bezier(.2, .9, .3, 1.2) forwards; }
@keyframes egg-found { 40% { transform: translateY(-14px) scale(1.25); } to { transform: translateY(-22px) scale(.2); opacity: 0; } }
.easter-egg__note {
  position: absolute; left: 50%; bottom: 100%; translate: -50% -4px; white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  background: rgb(12 17 22 / 0.92); border: 1px solid rgb(182 229 255 / 0.45); color: #fff3a8; font-size: 12px;
  animation: egg-note 1.8s ease forwards;
}
@keyframes egg-note { 0% { opacity: 0; translate: -50% 4px; } 15%, 75% { opacity: 1; translate: -50% -4px; } to { opacity: 0; translate: -50% -12px; } }
@media (prefers-reduced-motion: reduce) { .easter-egg, html[data-season="easter"] .nav .brand::after { animation: none; } }

/* April Fools' Day: the update everyone has been waiting for. */
.fools-update { gap: 12px; }
.fools-update__icon { width: 20px; height: 20px; flex: none; background: #3ddc97; -webkit-mask: url("/static/icons/sparkles.svg") center / contain no-repeat; mask: url("/static/icons/sparkles.svg") center / contain no-repeat; }
.fools-update.is-fooled .fools-update__icon { background: #ffd166; -webkit-mask-image: url("/static/icons/fish.svg"); mask-image: url("/static/icons/fish.svg"); }
.fools-update .btn { flex: none; }

/* Badges: a hexagon tile with the badge's icon, in a pop-up and in Settings. */
.badge-tile { display: grid; place-items: center; width: 46px; height: 46px; flex: none;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(160deg, #7aabff, #2f6fed 55%, #0a317d); }
/* A seasonal badge wears its season's colours. */
.badge-tile--halloween { background: linear-gradient(160deg, #ffc46b, #ff7a00 55%, #8a3200); }
.badge-tile--christmas { background: linear-gradient(160deg, #ff8a95, #c8102e 55%, #1f6e3f); }
.badge-tile--newyear { background: linear-gradient(160deg, #fff3c4, #e0a800 55%, #6b4a00); }
.badge-tile--winter { background: linear-gradient(160deg, #e3f4ff, #3aa0ff 55%, #124a85); }
.badge-tile--valentine { background: linear-gradient(160deg, #ffd6e5, #ff6fae 50%, #a8173f); }
.badge-tile--aprilfools { background: linear-gradient(160deg, #fff3a8, #3ddc97 55%, #156b48); }
.badge-tile--easter { background: linear-gradient(160deg, #fff3a8, #ffb3cf 45%, #6bc0ff); }
.badge-tile i { width: 22px; height: 22px; background: #ffffff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
/* The corner they stack in: newest at the bottom, the stack growing upward. */
.badge-stack { position: fixed; right: 20px; bottom: 20px; z-index: 65; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.badge-toast {
  display: flex; align-items: center; gap: 14px; max-height: 140px; overflow: hidden;
  max-width: min(360px, calc(100vw - 40px)); padding: 14px 18px 14px 14px; border: 1px solid rgb(77 141 255 / 0.4); border-radius: 14px;
  background: rgb(12 17 22 / 0.95); box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.85);
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.2), opacity .3s, max-height .4s ease .1s, padding .4s ease .1s, margin .4s ease .1s, border-width .4s ease .1s;
}
.badge-toast.is-shown { opacity: 1; transform: none; }
/* Clearing off: it slides out sideways and folds away, and the ones below close up. */
.badge-toast.is-shown.is-leaving { opacity: 0; transform: translateX(40px); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: -10px; border-width: 0; }
.badge-toast .badge-tile { width: 52px; height: 52px; animation: badge-pop .6s cubic-bezier(.2, .9, .3, 1.4) .15s both; }
@keyframes badge-pop { from { transform: scale(.4) rotate(-25deg); } to { transform: none; } }
.badge-toast__text { display: grid; gap: 2px; }
.badge-toast__text small { font: 600 11px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #7aabff; }
.badge-toast__text strong { font-family: var(--font-display); font-size: 19px; line-height: 1.15; }
.badge-toast__text > span { font-size: 13px; color: var(--text-2); }
.badge-count { margin-left: 8px; font: 500 12px/1 var(--font-mono); color: var(--text-3); letter-spacing: .04em; }
.badge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.badge-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.badge-item > span { display: grid; gap: 2px; min-width: 0; }
.badge-item strong { font-size: 14px; }
.badge-item small { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.badge-item em { font: normal 11px/1.2 var(--font-mono); color: #7aabff; }
.badge-item .badge-item__season { font: normal 11px/1.3 var(--font-mono); color: var(--text-3); }
.badge-item .badge-item__season.is-now { color: #3ddc97; }
.badge-item:not(.is-earned) .badge-tile { background: var(--surface-2); }
.badge-item:not(.is-earned) .badge-tile i { background: var(--text-3); }
.badge-item:not(.is-earned) strong { color: var(--text-3); }
.badge-item.is-earned { border-color: rgb(77 141 255 / 0.35); background: linear-gradient(160deg, rgb(47 111 237 / 0.08), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .badge-toast, .badge-toast .badge-tile { transition: none; animation: none; } }

/* Halloween's ghost says Boo in a bubble of its own. */
.avatar-hiss.avatar-hiss--boo { background: #f4f0ff; color: #1d2d3d; }

@media (prefers-reduced-motion: reduce) {
  html[data-season] .nav .brand::before, html[data-season] .nav .brand::after, html[data-season] .brand__word b { animation: none; }
  html[data-season] .emblem__stage, .season-decor__fog, .season-lights i { animation: none; }
  .confetti { display: none; }
}

/* ── The Asterion network: the setting the games share ────────────────
   A slow orbital map (the two allied corporations circling Asterion) in a
   HUD frame, the three groups beside it, and the possible next game. The
   orbits only turn transforms, so they cost nothing to draw. */
.network__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.network__map {
  position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; margin: 0 auto;
  background:
    radial-gradient(circle, rgb(47 111 237 / .2), transparent 58%),
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--line), var(--line)) center / 100% 1px no-repeat;
}
.network__map::before {
  content: ""; position: absolute; inset: -10px; pointer-events: none; opacity: .8;
  background:
    linear-gradient(var(--accent), var(--accent)) top left / 22px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 1px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 22px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 1px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 22px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 1px 22px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 22px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 1px 22px no-repeat;
}
.network__orbit { position: absolute; border: 1px dashed rgb(77 141 255 / .38); border-radius: 50%; animation: network-orbit var(--period) linear infinite; }
.network__orbit--inner { inset: 21%; --period: 70s; }
.network__orbit--outer { inset: 4%; --period: 120s; animation-direction: reverse; animation-delay: -50s; }
.network__body {
  position: absolute; top: -26px; left: 50%; width: 52px; height: 52px; margin-left: -26px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--accent-line); background: #000;
  box-shadow: 0 0 22px rgb(47 111 237 / .45); animation: network-orbit var(--period) linear infinite reverse;
}
.network__orbit--outer .network__body { animation-direction: normal; animation-delay: -50s; }
.network__body img, .network__core img { width: 100%; height: 100%; display: block; }
.network__core { position: absolute; inset: 37%; border-radius: 22px; overflow: hidden; border: 1px solid var(--accent-line); box-shadow: 0 0 70px rgb(47 111 237 / .55); }
.network__readout { position: absolute; left: 0; right: 0; bottom: -34px; display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
@keyframes network-orbit { to { transform: rotate(360deg); } }

.network__lore .lead { margin: 0; }
.corp-list { display: grid; gap: 12px; margin-top: 28px; }
.corp {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  transition: border-color .2s, transform .2s var(--ease);
}
a.corp:hover { border-color: var(--accent-line); transform: translateX(4px); }
.corp img { width: 56px; height: 56px; border-radius: 12px; background: #000; }
.corp small { display: block; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.corp strong { display: block; margin: 7px 0 4px; font: 600 19px/1.15 var(--font-display); color: var(--text); }
/* A smaller word beside a corporation's name: here, that it is the studio. */
.corp .corp__aka { margin-left: 8px; font: 500 11px/1 var(--font-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.corp > span > span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.corp > .icon { width: 18px; height: 18px; color: var(--text-3); }

.network__next {
  position: relative; overflow: hidden; margin-top: clamp(56px, 7vw, 80px); padding: clamp(24px, 4vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
  border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
  background: linear-gradient(115deg, rgb(47 111 237 / .16), transparent 55%), var(--bg-raise);
}
/* A planet's horizon, glowing at the edge. */
.network__next::after {
  content: ""; position: absolute; right: -12%; bottom: -170%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, #142742, #070e16 70%);
  box-shadow: 0 0 0 1px rgb(130 175 255 / .35), 0 -6px 40px rgb(47 111 237 / .45), inset 0 14px 30px rgb(122 171 255 / .35);
}
.network__next > * { position: relative; z-index: 1; }
.network__next { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(24px, 4vw, 48px); }
.network__next h3 { margin: 12px 0 8px; font: 700 clamp(24px, 3vw, 32px)/1.1 var(--font-display); }
.network__next-note { margin-top: 14px !important; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.network__next-actions { margin-top: 20px; }
/* The facility, from above: core, walls with four gates, the docking ring. */
.schematic { margin: 0; display: grid; gap: 12px; justify-items: center; }
.schematic svg { width: 100%; max-width: 300px; height: auto; display: block; }
.schematic__ring { fill: none; stroke: rgb(47 111 237 / .14); stroke-width: 28; }
.schematic__pads rect { fill: #0c131a; stroke: rgb(130 175 255 / .6); stroke-width: 1.2; }
.schematic__pads circle { fill: none; stroke: rgb(130 175 255 / .5); stroke-width: 1; }
.schematic__pad--busy rect { fill: rgb(47 111 237 / .35); stroke: #b8d7ff; animation: schematic-land 3.2s ease-in-out infinite; }
.schematic__spokes path { stroke: rgb(130 175 255 / .28); stroke-width: 6; stroke-linecap: square; }
.schematic__wall { fill: none; stroke: #4a5c70; stroke-width: 5; }
.schematic__core { fill: #121b25; stroke: var(--accent); stroke-width: 1.5; }
.schematic__domes circle { fill: #1e2b3a; stroke: rgb(130 175 255 / .55); stroke-width: 1; }
.schematic__sweep { transform-box: view-box; transform-origin: 130px 130px; animation: network-orbit 7s linear infinite; }
@keyframes schematic-land { 50% { fill: rgb(77 141 255 / .7); } }
.schematic figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.schematic figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.schematic__key { width: 10px; height: 10px; border-radius: 2px; }
.schematic__key--core { background: #121b25; border: 1px solid var(--accent); border-radius: 50%; }
.schematic__key--wall { background: #4a5c70; }
.schematic__key--pad { background: #0c131a; border: 1px solid rgb(130 175 255 / .6); }
.network__next p { margin: 0; max-width: 60ch; }
.network__next-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.network__flag { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--warn); }
.network__flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); animation: network-blink 1.6s steps(2, jump-none) infinite; }
@keyframes network-blink { 50% { opacity: .2; } }

/* The donate page: the form, and a checkout-style summary beside it that stays in view. */
.page-head--donate { background: radial-gradient(900px 340px at 18% 0%, rgb(236 72 153 / 0.14), transparent 72%); }
.donate { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.amount { position: relative; }
.amount input { position: absolute; opacity: 0; pointer-events: none; }
.amount span {
  display: grid; place-items: center; min-height: 84px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--bg-raise);
  font: 700 28px/1 var(--font-display); color: var(--text-2); cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .25s var(--ease);
}
.amount span:hover { border-color: var(--line-3); color: var(--text); transform: translateY(-2px); }
.amount input:checked + span { border-color: var(--accent); color: var(--text); background: radial-gradient(120% 120% at 50% 0%, var(--accent-soft), transparent 70%), var(--bg-raise);
  box-shadow: 0 0 0 1px var(--accent), 0 0 30px -10px var(--accent); }
.amount input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.input--lg { height: 52px; font-size: 18px; }
.donate__summary { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: 12px; }
.donate__total { font: 700 54px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.donate__points { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.donate__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.donate__points .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
@media (max-width: 900px) { .donate { grid-template-columns: minmax(0, 1fr); } .donate__summary { position: static; } }

@media (max-width: 900px) {
  .network__grid { grid-template-columns: 1fr; }
  .network__map { max-width: 340px; margin-bottom: 34px; }
  .network__next { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .corp { grid-template-columns: 48px minmax(0, 1fr); }
  .corp img { width: 48px; height: 48px; }
  .corp > .icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network__orbit, .network__body, .network__flag i, .schematic__sweep, .schematic__pad--busy rect { animation: none; }
}

/* ── Deep space: the page drops out of the site into HIP 109614 ──────────
   The section fades in from the page's own dark to space, with stars and a
   faint nebula, and fades back out at the bottom. At its top, a scene held in
   place while you scroll plays the jump: the drive charges, hyperspace
   streaks past, and the system's white star swells as its ringed gas giant -
   where Atlas Scientific Corp orbits - drifts in. site.js sets --jump and
   --arrive from the scroll; only transforms and opacity change. */
.deep-space { position: relative; isolation: isolate; background: #030208; overflow-x: clip; }  /* the orbits would widen a phone's page */
.deep-space::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg), transparent 420px),
    linear-gradient(0deg, var(--bg), transparent 420px),
    radial-gradient(ellipse 55% 30% at 82% 38%, rgb(47 111 237 / .14), transparent 70%),
    radial-gradient(ellipse 45% 26% at 12% 72%, rgb(70 100 230 / .1), transparent 70%);
}
.deep-space > .section { position: relative; }

.approach { --jump: 0; --arrive: 1; position: relative; height: 220vh; }
.approach__view { position: sticky; top: 0; height: 100vh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 99%); mask-image: linear-gradient(180deg, #000 66%, transparent 99%); }
.approach__streaks {
  position: absolute; inset: -60%; opacity: var(--jump);
  background: repeating-conic-gradient(from 3deg, transparent 0deg 2.4deg, rgb(205 230 255 / .5) 2.5deg 2.62deg);
  -webkit-mask: radial-gradient(circle, transparent 6%, #000 22%, transparent 62%); mask: radial-gradient(circle, transparent 6%, #000 22%, transparent 62%);
  transform: scale(calc(.5 + var(--jump) * 1.6)) rotate(calc(var(--jump) * 25deg));
}
.approach__star {
  position: absolute; left: 34%; top: 44%; width: min(52vmin, 520px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 34%, #fff6e0 42%, rgb(255 236 196 / .6) 50%, rgb(255 214 160 / .16) 60%, transparent 70%);
  transform: translate(-50%, -50%) scale(calc(.025 + var(--arrive) * .975)); opacity: calc(.45 + var(--arrive) * .55);
}
.approach__flare { position: absolute; left: 50%; top: 50%; width: 320%; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgb(255 240 214 / .85) 45% 55%, transparent); }
.approach__planet {
  position: absolute; right: -8vmin; bottom: -18vmin; width: min(66vmin, 640px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 26% 30%, transparent 0 34%, rgb(4 2 8 / .55) 60%, rgb(4 2 8 / .92) 76%),
    repeating-linear-gradient(-14deg, #d9b48c 0 16px, #c79e76 16px 27px, #e5c8a2 27px 41px, #b48965 41px 49px, #d3ab83 49px 63px);
  opacity: var(--arrive); transform: translate(calc((1 - var(--arrive)) * 36vmin), calc((1 - var(--arrive)) * 26vmin));
}
.approach__rings { position: absolute; inset: 40% -38%; border-radius: 50%; transform: rotate(-17deg);
  border: min(1.2vmin, 12px) solid rgb(236 220 196 / .42); box-shadow: 0 0 0 min(1.6vmin, 16px) rgb(214 192 168 / .16); }
.approach__station {
  position: absolute; right: 30%; bottom: 36%; width: 9px; height: 9px; background: #d6e8ff; transform: rotate(45deg);
  box-shadow: 0 0 12px 3px rgb(77 141 255 / .9); opacity: var(--arrive); animation: approach-blink 1.8s ease-in-out infinite;
}
@keyframes approach-blink { 50% { box-shadow: 0 0 4px 1px rgb(77 141 255 / .6); } }
.approach__hud { position: absolute; inset: 0; pointer-events: none; color: #dceeff; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.approach__reticle {
  position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  border: 1px solid rgb(130 175 255 / .35); opacity: calc(1 - var(--arrive) * .7);
  background: repeating-conic-gradient(rgb(130 175 255 / .7) 0deg 1.5deg, transparent 1.5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 55px); mask: radial-gradient(circle, transparent 54px, #000 55px);
}
.approach__target { position: absolute; right: calc(30% - 4px); bottom: calc(36% + 22px); display: grid; gap: 3px; justify-items: end;
  padding-right: 18px; border-right: 1px solid rgb(130 175 255 / .6); opacity: var(--arrive); text-align: right; }
.approach__target small { color: #93aec4; letter-spacing: .12em; }
.approach__readout { position: absolute; left: 50%; top: 14vh; transform: translateX(-50%); display: grid; text-align: center; white-space: nowrap; }
.approach__readout span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity .4s; }
.approach__readout b { color: #fff; font-weight: 600; }
.approach__readout i { width: 7px; height: 7px; border-radius: 50%; background: #4d8dff; box-shadow: 0 0 10px #4d8dff; animation: network-blink 1.2s steps(2, jump-none) infinite; }
.approach[data-stage="0"] [data-for="0"], .approach[data-stage="1"] [data-for="1"], .approach[data-stage="2"] [data-for="2"],
.departure[data-stage="0"] [data-for="0"], .departure[data-stage="1"] [data-for="1"], .departure[data-stage="2"] [data-for="2"] { opacity: 1; }

/* The home system: its map, its facts, its worth, its stations. */
.homesys { margin-top: clamp(64px, 8vw, 96px); padding: clamp(22px, 3.5vw, 36px); border: 1px solid rgb(77 141 255 / .3); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(47 111 237 / .08), transparent 40%), rgb(6 4 12 / .72); }
.homesys__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; }
.homesys__head h3 { margin: 10px 0 8px; font: 700 clamp(30px, 4vw, 46px)/1 var(--font-display); letter-spacing: .02em; }
.homesys__head p { margin: 0; max-width: 62ch; }
.sysmap { margin: 24px 0 0; padding: 10px; overflow-x: auto; border-radius: var(--radius); border: 1px solid rgb(77 141 255 / .2);
  background: radial-gradient(ellipse 40% 60% at 7% 36%, rgb(255 243 214 / .07), transparent 70%), #04020a; }
.sysmap__svg { display: block; width: 100%; min-width: 760px; height: auto; }
.sysmap text { font-family: var(--font-mono); }
.sysmap__name { fill: #eaf6ff; font-size: 12px; font-weight: 500; }
.sysmap__type { fill: #8d849c; font-size: 9.5px; letter-spacing: .03em; }
.sysmap__station-name { fill: #c2dfff; font-size: 10.5px; font-weight: 600; }
.sysmap__orbit, .sysmap__moonpath { fill: none; stroke: rgb(77 141 255 / .3); stroke-dasharray: 3 5; }
.sysmap__moon { fill: #948aa0; }
.sysmap__star { filter: drop-shadow(0 0 10px rgb(255 238 205 / .55)); }
.sysmap__rings { fill: none; stroke: rgb(222 238 255 / .55); stroke-width: 2; }
.sysmap__terraform { fill: none; stroke: #5fe0a8; stroke-width: 1.2; stroke-dasharray: 2 3; }
.sysmap__station { fill: #4d8dff; filter: drop-shadow(0 0 4px rgb(77 141 255 / .9)); }
.sysmap__station--building { fill: none; stroke: #9bc7ff; stroke-width: 1.5; stroke-dasharray: 2 2; }
.sysmap__gap { stroke: rgb(77 141 255 / .3); stroke-dasharray: 4 8; }
.sysmap__sweep { stroke: #9bc7ff; stroke-width: 2; opacity: 0; }
.sysmap.is-in .sysmap__sweep, .sysmap.is-rescanning .sysmap__sweep { animation: sysmap-sweep 2.4s cubic-bezier(.4, 0, .2, 1) both; }
.sysmap.is-in .sysmap__body, .sysmap.is-rescanning .sysmap__body { animation: sysmap-in .6s ease both; animation-delay: var(--d); }
.sysmap.is-armed:not(.is-in):not(.is-rescanning) .sysmap__body { opacity: 0; }
@keyframes sysmap-sweep { 0% { opacity: .9; transform: translateX(0); } 100% { opacity: 0; transform: translateX(1000px); } }
@keyframes sysmap-in { from { opacity: 0; } }
.homesys__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: 22px; }
.homesys__grid > * { padding: 18px 20px; border: 1px solid rgb(77 141 255 / .18); border-radius: var(--radius); background: rgb(4 2 10 / .6); }
.homesys__facts { margin: 0; display: grid; gap: 0; border-top: 2px solid #2f6fed; }
.homesys__facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid rgb(77 141 255 / .1); }
.homesys__facts div:last-child { border-bottom: 0; }
.homesys__facts dt { font: 500 11px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: #8d849c; }
.homesys__facts dd { margin: 0; font: 500 14px/1.5 var(--font-mono); text-transform: uppercase; color: #eaf6ff; }
.homesys__label { display: block; margin-bottom: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.homesys__value strong { display: block; font: 700 34px/1.05 var(--font-display); color: #fff; }
.homesys__value strong small { font-size: 16px; color: var(--text-2); }
.homesys__value ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.homesys__value li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; font-size: 13px; align-items: baseline; }
.homesys__value li span { font-family: var(--font-mono); color: #eaf6ff; }
.homesys__value li em { font-style: normal; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homesys__value li b { font: 500 12px var(--font-mono); color: #c2dfff; }
.homesys__notable { margin: 14px 0 0; font-size: 13px; color: var(--text-2); }
.homesys__stations { display: grid; gap: 10px; align-content: start; }
.homesys__station { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; }
.homesys__station i { width: 10px; height: 10px; margin-top: 5px; transform: rotate(45deg); background: #4d8dff; box-shadow: 0 0 8px rgb(77 141 255 / .8); }
.homesys__station.is-building i { background: none; border: 1.5px dashed #9bc7ff; box-shadow: none; }
.homesys__station strong { display: block; font: 600 16px/1.2 var(--font-display); color: #fff; }
.homesys__station span { font-size: 12.5px; color: var(--text-2); }
.homesys__source { margin: 16px 0 0; font-size: 10.5px; letter-spacing: .08em; color: var(--text-3); }
.homesys__source a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }
.network__pillars { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.network__pillars li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgb(77 141 255 / .35); border-radius: 999px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #d2eaff; background: rgb(47 111 237 / .1); }
.network__pillars .icon { width: 14px; height: 14px; color: var(--accent); }
.network__next .muted + .muted { margin-top: 10px; }


@media (max-width: 760px) {
  .approach { height: 170vh; }
  .approach__star { left: 40%; top: 40%; }
  .approach__target { display: none; }
  .homesys__grid { grid-template-columns: 1fr; }
  .homesys__facts div { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .approach { height: auto; }
  .approach__view { position: relative; height: 70vh; }
  .approach__station, .approach__readout i { animation: none; }
  .sysmap .sysmap__body, .sysmap .sysmap__sweep { animation: none !important; }
}

/* The sky over deep space. Each layer holds stars of a few classes in their
   true colours - B and A blue-white, F white, G yellow, K orange, M red - at
   their own brightness, and fades in and out on its own clock, so the field
   twinkles without any one rhythm. It's sticky and a screen high, so it costs
   five small layers, not five as tall as the page. */
.starfield-track { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.starfield { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* Each layer is a tile taller than the screen, so site.js can slide it up
   by anything short of a tile and loop it without a seam. */
.starfield i { position: absolute; left: 0; right: 0; top: 0; height: calc(100% + var(--tile)); will-change: transform;
  animation: star-twinkle var(--t) ease-in-out var(--o) infinite alternate; }
.starfield i:nth-child(1) { --tile: 211px; --t: 3.3s; --o: -1.2s; --low: .25; background-size: 211px 211px; background-image:
  radial-gradient(1px 1px at 17px 43px, #fff1d8, transparent), radial-gradient(1px 1px at 131px 19px, #fbf8ff, transparent),
  radial-gradient(1px 1px at 88px 160px, #ffd09a, transparent), radial-gradient(1px 1px at 190px 121px, #fbf8ff, transparent); }
.starfield i:nth-child(2) { --tile: 293px; --t: 4.7s; --o: -3.1s; --low: .35; background-size: 293px 293px; background-image:
  radial-gradient(1.2px 1.2px at 40px 230px, #d5e0ff, transparent), radial-gradient(1px 1px at 211px 77px, #ffad7a, transparent),
  radial-gradient(1px 1px at 270px 190px, #fff1d8, transparent), radial-gradient(1.4px 1.4px at 120px 120px, #fbf8ff, transparent); }
.starfield i:nth-child(3) { --tile: 367px; --t: 6.1s; --o: -.7s; --low: .3; background-size: 367px 367px; background-image:
  radial-gradient(1.6px 1.6px at 300px 41px, #a8bfff, transparent), radial-gradient(1px 1px at 61px 299px, #ffd09a, transparent),
  radial-gradient(1px 1px at 180px 210px, #fbf8ff, transparent), radial-gradient(1.2px 1.2px at 333px 330px, #ffad7a, transparent); }
.starfield i:nth-child(4) { --tile: 433px; --t: 2.6s; --o: -2s; --low: .2; background-size: 433px 433px; background-image:
  radial-gradient(1.8px 1.8px at 99px 51px, #fff1d8, transparent), radial-gradient(1.4px 1.4px at 380px 260px, #d5e0ff, transparent),
  radial-gradient(1px 1px at 240px 400px, #ffd09a, transparent); }
.starfield i:nth-child(5) { --tile: 557px; --t: 8.3s; --o: -5s; --low: .6; background-size: 557px 557px; background-image:
  radial-gradient(2.2px 2.2px at 300px 200px, #fbf8ff, rgb(251 248 255 / .25) 2.6px, transparent 6px),
  radial-gradient(2px 2px at 60px 470px, #ffd09a, rgb(255 208 154 / .2) 2.4px, transparent 5px),
  radial-gradient(2px 2px at 500px 90px, #a8bfff, rgb(168 191 255 / .25) 2.4px, transparent 6px); }
/* The galaxy's band, faint, across the sky. */
.starfield::before { content: ""; position: absolute; left: -25%; right: -25%; top: 22%; height: 46%; transform: translateY(var(--band, 0px)) rotate(-14deg);
  background: radial-gradient(ellipse 50% 40% at 50% 50%, rgb(190 233 255 / .07), rgb(47 111 237 / .035) 55%, transparent 75%); }
.starfield::after { content: ""; position: absolute; left: -25%; right: -25%; top: 30%; height: 30%; transform: translateY(var(--band, 0px)) rotate(-14deg); opacity: .55;
  background-size: 61px 61px, 89px 89px; background-image:
    radial-gradient(.7px .7px at 13px 21px, #fff, transparent), radial-gradient(.7px .7px at 47px 70px, #dcf2ff, transparent);
  -webkit-mask: radial-gradient(ellipse 48% 50% at 50% 50%, #000, transparent); mask: radial-gradient(ellipse 48% 50% at 50% 50%, #000, transparent); }
/* A few bright stars, with the spikes a telescope's struts give them. */
.starfield i:nth-child(6) { --tile: 640px; --t: 3.7s; --o: -1.5s; --low: .55; background-size: 640px 640px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Ccircle cx='90' cy='120' r='5.0' fill='%23cad7ff' opacity='.18'/%3E%3Cpath d='M74.0 120H106.0M90 104.0V136.0' stroke='%23cad7ff' stroke-width='.6' opacity='.35'/%3E%3Cpath d='M81.0 120H99.0M90 111.0V129.0' stroke='%23cad7ff' stroke-width='.9' opacity='.7'/%3E%3Ccircle cx='90' cy='120' r='1.6' fill='%23fff'/%3E%3Ccircle cx='470' cy='300' r='5.8' fill='%23fff1d8' opacity='.18'/%3E%3Cpath d='M451.6 300H488.4M470 281.6V318.4' stroke='%23fff1d8' stroke-width='.6' opacity='.35'/%3E%3Cpath d='M459.65 300H480.35M470 289.65V310.35' stroke='%23fff1d8' stroke-width='.9' opacity='.7'/%3E%3Ccircle cx='470' cy='300' r='1.8' fill='%23fff'/%3E%3Ccircle cx='300' cy='560' r='4.2' fill='%23ffd09a' opacity='.18'/%3E%3Cpath d='M286.4 560H313.6M300 546.4V573.6' stroke='%23ffd09a' stroke-width='.6' opacity='.35'/%3E%3Cpath d='M292.35 560H307.65M300 552.35V567.65' stroke='%23ffd09a' stroke-width='.9' opacity='.7'/%3E%3Ccircle cx='300' cy='560' r='1.4' fill='%23fff'/%3E%3Ccircle cx='590' cy='40' r='3.8' fill='%23a8bfff' opacity='.18'/%3E%3Cpath d='M578.0 40H602.0M590 28.0V52.0' stroke='%23a8bfff' stroke-width='.6' opacity='.35'/%3E%3Cpath d='M583.25 40H596.75M590 33.25V46.75' stroke='%23a8bfff' stroke-width='.9' opacity='.7'/%3E%3Ccircle cx='590' cy='40' r='1.2' fill='%23fff'/%3E%3Ccircle cx='40' cy='430' r='3.5' fill='%23ffad7a' opacity='.18'/%3E%3Cpath d='M28.8 430H51.2M40 418.8V441.2' stroke='%23ffad7a' stroke-width='.6' opacity='.35'/%3E%3Cpath d='M33.7 430H46.3M40 423.7V436.3' stroke='%23ffad7a' stroke-width='.9' opacity='.7'/%3E%3Ccircle cx='40' cy='430' r='1.1' fill='%23fff'/%3E%3C/svg%3E"); }
.starfield i.starfield__rush { --tile: 720px; animation: none; opacity: 0; background-size: 360px 720px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='720'%3E%3Cdefs%3E%3ClinearGradient id='s0' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23ffffff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23e6dcff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23e6dcff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23e6dcff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cad7ff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23cad7ff' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23cad7ff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s3' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1d8' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23fff1d8' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23fff1d8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s4' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd09a' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%23ffd09a' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23ffd09a' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='169' y='154' width='1.4' height='90' fill='url%28%23s0%29'/%3E%3Crect x='41' y='548' width='1' height='52' fill='url%28%23s4%29'/%3E%3Crect x='33' y='519' width='1' height='67' fill='url%28%23s0%29'/%3E%3Crect x='226' y='428' width='1' height='48' fill='url%28%23s0%29'/%3E%3Crect x='286' y='434' width='1.4' height='47' fill='url%28%23s0%29'/%3E%3Crect x='118' y='645' width='1.4' height='120' fill='url%28%23s0%29'/%3E%3Crect x='299' y='599' width='1' height='90' fill='url%28%23s1%29'/%3E%3Crect x='27' y='570' width='1' height='149' fill='url%28%23s2%29'/%3E%3Crect x='218' y='147' width='1' height='109' fill='url%28%23s4%29'/%3E%3Crect x='161' y='573' width='1.4' height='144' fill='url%28%23s1%29'/%3E%3Crect x='56' y='595' width='1.4' height='113' fill='url%28%23s1%29'/%3E%3Crect x='194' y='99' width='1.4' height='110' fill='url%28%23s0%29'/%3E%3Crect x='292' y='61' width='1' height='119' fill='url%28%23s3%29'/%3E%3Crect x='352' y='544' width='1' height='94' fill='url%28%23s3%29'/%3E%3Crect x='303' y='464' width='1' height='86' fill='url%28%23s1%29'/%3E%3Crect x='96' y='249' width='1.4' height='50' fill='url%28%23s2%29'/%3E%3C/svg%3E"); }
@keyframes star-twinkle { to { opacity: var(--low, .4); } }

/* The jump back out: the star falls away, hyperspace, then the page again. */
.departure { --jump: 0; --leave: 0; --land: 0; position: relative; height: 200vh; }
.departure__view { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.departure__star { position: absolute; left: 50%; top: 48%; width: min(30vmin, 300px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, #fff6e0 40%, rgb(255 236 196 / .45) 50%, transparent 70%);
  transform: translate(-50%, -50%) scale(calc(1 - var(--leave) * .96)); opacity: calc(1 - var(--leave) * .85); }
.departure__fade { position: absolute; inset: 0; background: var(--bg); opacity: var(--land); }

/* The soundtrack's chip: what's playing, and a way to stop it - or to start
   it, where the browser waits for a tap before it will play anything. */
.music-chip { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 14px; border: 1px solid rgb(77 141 255 / .4); border-radius: 999px; background: rgb(8 5 16 / .82);
  backdrop-filter: blur(8px); color: #d2eaff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  animation: pop .3s var(--ease); }
.music-chip button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(47 111 237 / .3); color: #fff; cursor: pointer; }
.music-chip button:hover { background: rgb(47 111 237 / .55); }
.music-chip .icon { width: 16px; height: 16px; }
.music-chip .music-chip__off, .music-chip.is-muted .music-chip__on, .music-chip.is-blocked .music-chip__on { display: none; }
.music-chip.is-muted .music-chip__off, .music-chip.is-blocked .music-chip__off { display: block; }
.music-chip__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.music-chip__bars i { width: 3px; height: 30%; background: #4d8dff; border-radius: 1px; }
.music-chip.is-playing .music-chip__bars i { animation: music-bar .9s ease-in-out infinite alternate; }
.music-chip.is-playing .music-chip__bars i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.music-chip.is-playing .music-chip__bars i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.music-chip.is-blocked { cursor: pointer; border-color: #4d8dff; }
@keyframes music-bar { to { height: 100%; } }

@media (max-width: 760px) { .departure { height: 150vh; } }
@media (prefers-reduced-motion: reduce) {
  .starfield i { animation: none; }
  .departure { height: auto; }
  .departure__view { position: relative; height: 40vh; }
  .music-chip, .music-chip.is-playing .music-chip__bars i { animation: none; }
}