/* ═══════════════════════════════════════════════════════════════════════════
 * Stellar Market — terminal theme
 * Monochrome, one monospace family (400 / 500), emphasis by inversion, weight and
 * opacity only. Type scale: 11 (labels) · 14 (body) · 20 (titles) · 40 (hero).
 * Motion lives in motion.js; this file holds every resting state.
 *
 *   1. Tokens            5. Homepage            9. Product page
 *   2. Base              6. Pages (shared)     10. Cart, toasts, modals
 *   3. Primitives        7. FAQ / docs / text  11. Stock templates + portal
 *   4. Shell             8. Products / status  12. Reduced motion
 * ═════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg: #000000;
  --fg: #FFFFFF;
  --fg-dim: rgba(255, 255, 255, 0.55);   /* secondary text, 6.6:1 on black */
  --fg-faint: rgba(255, 255, 255, 0.18); /* borders, grid lines */
  --fg-ghost: rgba(255, 255, 255, 0.06); /* hover fills, background grid */
  --fg-text: rgba(255, 255, 255, 0.8);   /* long-form reading text: calmer than fg, clearer than dim */
  --accent: #FFFFFF;                     /* accent = inversion, not a hue */
  --prose: 68ch;
  /* the only hues on the site: product state */
  --ok: #4ade80;     /* undetected */
  --warn: #fbbf24;   /* updating, use at own risk */
  --bad: #f87171;    /* detected */
  /* docs only: calm tints for guide steps */
  --doc-step: #9ec5e8;   /* main steps (01 Preparing your computer) */
  --doc-sub: #b9abe6;    /* sub-steps (STEP 1 — …) */

  --ff: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --fs-label: 11px;
  --fs-body: 14px;
  --fs-title: 20px;
  --fs-hero: 40px;
  --fs-page: 28px;
  --track: 0.08em;

  --side-w: 190px;
  --bar-h: 48px;
  --measure: 680px;
  --page-max: 1040px;

  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);    /* entrances */
  --ease-out: cubic-bezier(0.7, 0, 0.84, 0);   /* exits */
  --t-hover: 120ms;
  --t-ui: 240ms;
  --t-reveal: 480ms;

  /* stock Tailwind utilities read these (rgb triplets) */
  --cl-background: 0, 0, 0;
  --cl-surface: 0, 0, 0;
  --cl-surface-raised: 0, 0, 0;
  --cl-t-primary: 255, 255, 255;
  --cl-t-muted: 140, 140, 140;
  --cl-border: rgba(255, 255, 255, 0.18);
  --cl-accent: 255, 255, 255;
  --cl-on-accent: 0, 0, 0;
  --cl-success: 255, 255, 255;
  --cl-warning: 255, 255, 255;
  --cl-error: 255, 255, 255;
  --cl-overlay: rgba(0, 0, 0, 0.85);
}

/* Light theme: the exact inverse */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --fg: #000000;
  --fg-dim: rgba(0, 0, 0, 0.55);        /* 4.7:1 on white */
  --fg-faint: rgba(0, 0, 0, 0.18);
  --fg-ghost: rgba(0, 0, 0, 0.06);
  --fg-text: rgba(0, 0, 0, 0.8);
  --accent: #000000;
  --ok: #15803d;
  --warn: #b45309;
  --bad: #b91c1c;
  --doc-step: #2f628f;
  --doc-sub: #6650a0;

  --cl-background: 255, 255, 255;
  --cl-surface: 255, 255, 255;
  --cl-surface-raised: 255, 255, 255;
  --cl-t-primary: 0, 0, 0;
  --cl-t-muted: 115, 115, 115;
  --cl-border: rgba(0, 0, 0, 0.18);
  --cl-accent: 0, 0, 0;
  --cl-on-accent: 255, 255, 255;
  --cl-success: 0, 0, 0;
  --cl-warning: 0, 0, 0;
  --cl-error: 0, 0, 0;
  --cl-overlay: rgba(255, 255, 255, 0.85);
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
html { font-size: 14px; background: var(--bg); scrollbar-color: var(--fg-faint) transparent; scrollbar-width: thin; }
body.t-body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.t-body h1, body.t-body h2, body.t-body h3, body.t-body h4, body.t-body h5, body.t-body h6 { font-family: var(--ff); font-weight: 500; letter-spacing: 0; }
body.t-body b, body.t-body strong { font-weight: 500; }
::selection { background: var(--fg); color: var(--bg); }

/* No rounded UI, no shadows, no glass — anywhere, including stock templates */
*, *::before, *::after { border-radius: 0 !important; }
body.t-body * { box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-shadow: none !important; }
i[class*="fa-"] { display: none !important; } /* icon fonts are not loaded */
[x-cloak] { display: none !important; }

/* Focus: 1px solid fg, offset 3px — never the default ring */
body.t-body :focus { outline: none; }
body.t-body :focus-visible { outline: 1px solid var(--fg) !important; outline-offset: 3px; }
body.t-body .focus\:ring-2:focus, body.t-body [class*="focus:ring"]:focus { --tw-ring-shadow: 0 0 #0000 !important; }

main:focus { outline: none; }
html.t-lock, html.t-lock body { overflow: hidden; }

/* ── 3. Primitives ──────────────────────────────────────────────────────── */
.t-num { font-variant-numeric: tabular-nums; }
.t-dim { color: var(--fg-dim); }

/* Labels / metadata: 11px uppercase, tracked, dim */
.t-label, .dm-mono {
  font-family: var(--ff);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* Text links: underline, brighten nothing (already full) */
.t-link { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); }
.t-link:hover { text-decoration-color: var(--fg); }

/* Buttons: bracketed text; hover = inversion block, active = 1px down */
.t-btn, .dm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--fg);
  font: 500 var(--fs-label)/1.2 var(--ff);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* hover: a faint tint — no white blocks */
.t-btn, .dm-btn { transition: background-color var(--t-hover) var(--ease-in); }
.dm-btn:hover, .dm-btn:focus-visible { background: var(--fg-ghost); }
.t-btn:active, .dm-btn:active { transform: translateY(1px); }
.t-btn:disabled, .dm-btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--fg); }
.t-btn--block { display: flex; width: 100%; min-height: 40px; }
/* The one primary action per screen is a solid block; hover hollows it */
/* the main action per screen (cart checkout, empty-cart link): an outline, never a white fill */
.t-btn--solid { padding: 4px 12px; border: 1px solid var(--fg); background: transparent; color: var(--fg); }
.t-btn--solid:hover, .t-btn--solid:focus-visible { background: var(--fg-ghost); }
/* Cart button inverts while the cart has items */
.t-btn.has-items { background: var(--fg); color: var(--bg); }

/* Step label (product page: 01 choose a plan → 02 pay) */
.t-step { margin: 24px 0 8px; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-step b { color: var(--fg); font-weight: 500; }
/* legacy buttons carry plain labels + an arrow icon: bracket them, drop the icon */
.dm-btn::before { content: '[\00a0'; }
.dm-btn::after { content: '\00a0]'; }
.dm-btn svg { display: none; }

/* Bracketed status tag: [undetected] */
.t-tag {
  font-size: var(--fs-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.t-tag::before { content: '['; color: var(--fg-dim); }
.t-tag::after { content: ']'; color: var(--fg-dim); }
/* product state colours: green = undetected, red = detected, orange = updating / risky */
[data-state="undetected"] { color: var(--ok) !important; }
[data-state="detected"] { color: var(--bad) !important; }
[data-state="updating"], [data-state="use at own risk"], [data-state="maintenance"] { color: var(--warn) !important; }
.t-state[data-state]::before { content: '\25CF\00a0'; }   /* a small dot before the label in the status summary */

/* Section header:  > 02 / WORK ───────────────  (rule is a flex child, not characters) */
.t-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 8px;
}
.t-head__title { margin: 0; font-size: var(--fs-title); font-weight: 500; line-height: 1.3; white-space: nowrap; }
.t-head__title > span[aria-hidden] { color: var(--fg-dim); }
.t-head__rule { flex: 1; min-width: 24px; height: 0; border-top: 1px solid var(--fg-faint); transform-origin: left; }
.t-head__meta { flex: none; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }

/* Table rows: number · name · —— · description · →  (the whole row is the link) */
.t-rows { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--fg-faint); }
.t-rows > li { border-bottom: 1px solid var(--fg-faint); }
.t-rows > li.t-row { border-bottom: 1px solid var(--fg-faint); }
.t-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(140px, 220px) 128px minmax(0, 1fr) 24px; /* fixed widths: every row is its own grid, columns must still align */
  align-items: baseline;
  column-gap: 16px;
  padding: 12px 8px;
  color: var(--fg);
  text-decoration: none;
}
.t-row__a { color: var(--fg-dim); }
.t-row__b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-row__c { color: var(--fg-dim); white-space: nowrap; }
.t-row__d { min-width: 0; color: var(--fg-dim); }
.t-row__go { justify-self: end; color: var(--fg-dim); }
/* Hover = "target lock": four thin corner marks close in from just outside the
   element to frame it, and a block cursor lands after the name. No fills.
   The corners are one pseudo-element (8 gradient strokes) scaled from 1.04 → 1,
   so only opacity + transform animate. Shared by rows, buttons and plan cells. */
:is(.t-lock, a.t-row, a.t-card, .dm-faq__q, .dm-variant), :is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme) { position: relative; }
:is(.t-lock, a.t-row, a.t-card, .dm-faq__q, .dm-variant)::after, :is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme)::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --c: var(--fg);
  --l: 8px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right top / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--l),
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--l),
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 1px,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--l);
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04, 1.4);
  transition: opacity var(--t-ui) var(--ease-in), transform var(--t-ui) var(--ease-in);
}
:is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme)::after { --l: 5px; transform: scale(1.18, 1.5); }
:is(.t-lock, a.t-row, a.t-card, .dm-faq__q, .dm-variant):hover::after, :is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme):hover::after, :is(.t-lock, a.t-row, a.t-card, .dm-faq__q, .dm-variant):focus-visible::after, :is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme):focus-visible::after { opacity: 1; transform: none; }
:is(.t-lock, a.t-row, .dm-faq__q, .dm-variant):focus-visible, :is(.t-btn:not(.t-btn--solid), .t-chip, .t-tab, .dm-docs__tab, .t-theme):focus-visible { outline: none !important; }
a.t-row { cursor: pointer; }

/* the cursor lands after the product name */
a.t-row .t-row__b::after {
  content: '';
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 6px;
  vertical-align: -2px;
  background: var(--fg);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-hover) var(--ease-in), transform var(--t-ui) var(--ease-in);
}
a.t-row:hover .t-row__b::after, a.t-row:focus-visible .t-row__b::after { opacity: 1; transform: none; animation: t-blink 1.1s steps(1) 0.4s infinite; }

/* details brighten, the arrow nudges, the rest of the list steps back a little */
.t-row__d, .t-row__go, a.t-row > * { transition: color var(--t-ui) var(--ease-in), opacity var(--t-ui) var(--ease-in), transform var(--t-ui) var(--ease-in); }
a.t-row:hover .t-row__d, a.t-row:focus-visible .t-row__d { color: var(--fg); }
a.t-row:hover .t-row__go, a.t-row:focus-visible .t-row__go { color: var(--fg); transform: translateX(4px); }
/* Focus: while a row is hovered, everything else in the content blurs and fades
   (motion.js marks the siblings along the path from the row up to <main>). */
.t-blurrable { transition: filter 280ms var(--ease-in), opacity 280ms var(--ease-in); }
.t-blur { filter: blur(1.5px); opacity: 0.6; }

/* Column header over a table of rows */
.t-rows__head { display: grid; grid-template-columns: 40px minmax(140px, 220px) 128px minmax(0, 1fr) 24px; column-gap: 16px; padding: 16px 8px 6px; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-rows__head + .t-rows { margin-top: 0; }
.t-rows--static .t-row { grid-template-columns: 40px minmax(140px, 220px) 128px minmax(0, 1fr); }

/* Tabs (game filter, docs): plain words, current one inverted */
.t-tabs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 24px 0 0; }
.t-tab {
  padding: 2px 6px;
  color: var(--fg-dim);
  font-size: var(--fs-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
}
.t-tab:hover { color: var(--fg); }
.t-tab.is-active { color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.t-empty { margin: 40px 0; color: var(--fg-dim); }
.t-empty p { margin: 0 0 16px; }

/* Block caret (blinks in motion.js; solid at rest) */
.t-caret {
  display: inline-block;
  width: 0.62em;
  height: 1.15em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--fg);
}

/* ── 4. Shell: one centered terminal window ─────────────────────────────── */
/* Desktop: status bar (top), menu pane (left), key bar (bottom) are fixed and
   framed by .t-win; the content scrolls with the page inside the frame. The
   gaps around the window are masked by the bars so content never shows there. */
:root {
  --gap: 16px;          /* space around the window */
  --win-max: 1440px;
  --top-h: 0px;          /* no top bar: the brand sits on the frame line (.t-ft) */
  --keys-h: 0px;         /* the key-hint bar was removed; the window runs to the bottom gap */
  --win-l: max(var(--gap), calc((100% - var(--win-max)) / 2));   /* window's left edge (fixed context) */
}
.t-skip { position: fixed; left: 16px; top: -64px; z-index: 100; padding: 8px 12px; background: var(--fg); color: var(--bg); text-decoration: none; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; }
.t-skip:focus { top: 16px; }

body.t-body .t-win, body.t-body .t-top, body.t-body .t-side, body.t-body .t-keys { position: fixed; } /* beats the builder preview's `.builder .component` */
.t-win {
  inset: var(--gap);
  z-index: 36;
  max-width: var(--win-max);
  margin-inline: auto;
  border: 1px solid var(--fg-faint);
  pointer-events: none;
}

.t-top { top: 0; left: 0; right: 0; z-index: 35; height: calc(var(--gap) + var(--top-h)); padding-top: var(--gap); background: var(--bg); }
.t-top__in {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) auto;
  align-items: center;
  height: var(--top-h);
  max-width: var(--win-max);
  margin: 0 var(--gap);
  border-bottom: 1px solid var(--fg-faint);
}
@media (min-width: 1472px) { .t-top .t-top__in, .t-keys .t-keys__in { margin-inline: auto; } }
.t-top__name { justify-self: start; margin-left: 14px; padding: 2px 6px; font-weight: 500; color: var(--fg); text-decoration: none; }
.t-top__name:hover { background: var(--fg-ghost); }
.t-top__path { padding-left: 24px; font-size: var(--fs-label); color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-top__path a { color: var(--fg-dim); text-decoration: none; }
.t-top__path a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.t-top__path span:last-child { color: var(--fg); }
/* the in-page path line repeats the top bar on desktop; phones keep it */
@media (min-width: 860px) { .t-page__path, .sa-breadcrumbs { display: none !important; } }
.t-top__status { padding: 0 16px; font-size: var(--fs-label); color: var(--fg-dim); }

.t-side {
  top: calc(var(--gap) + var(--top-h));
  bottom: calc(var(--gap) + var(--keys-h));
  left: var(--win-l);
  z-index: 30;
  width: var(--side-w);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid var(--fg-faint);
  background: var(--bg);
  overflow-y: auto;
  scrollbar-width: none;
  transform-origin: top;
}

.t-keys { bottom: 0; left: 0; right: 0; z-index: 35; height: calc(var(--gap) + var(--keys-h)); padding-bottom: var(--gap); background: var(--bg); }
.t-keys__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--keys-h);
  max-width: var(--win-max);
  margin: 0 var(--gap);
  padding: 0 12px 0 20px;
  border-top: 1px solid var(--fg-faint);
}
.t-keys__hints { display: flex; gap: 20px; margin: 0; font-size: var(--fs-label); color: var(--fg-dim); }
.t-keys__hints b { font-weight: 500; color: var(--fg); margin-right: 4px; }
.t-keys__right { display: flex; align-items: center; gap: 16px; }
.t-keys__sys { margin: 0; font-size: var(--fs-label); color: var(--fg-dim); }

/* Nav list: "01  PRODUCTS"; one block cursor travels between items */
.t-nav { position: relative; list-style: none; margin: 0; padding: 0 0 0 20px; }
.t-nav__link {
  display: grid;
  grid-template-columns: 28px auto;
  align-items: center;
  height: 32px;
  color: var(--fg-dim);
  font-size: var(--fs-body);
  letter-spacing: var(--track);
  text-decoration: none;
  white-space: pre;
  transition: color var(--t-hover) var(--ease-in);
}
.t-nav__n { font-size: var(--fs-label); color: var(--fg-dim); letter-spacing: 0; }
.t-nav__label { display: inline-block; transition: transform var(--t-ui) var(--ease-in); }
.t-nav__link:hover, .t-nav__link:focus-visible, .t-nav__link.is-active { color: var(--fg); }
.t-nav__link:hover .t-nav__label { transform: translateX(3px); }
.t-nav__link:focus-visible { outline-offset: 2px; }
.t-nav__cursor {
  position: absolute;
  left: 0;
  top: 0;
  height: 32px;
  display: flex;
  align-items: center;
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--fg);
  opacity: 0;           /* shown once motion.js has placed it */
  pointer-events: none;
}
.t-nav__cursor.is-placed { opacity: 1; }
/* without JS (or before placement) the active item keeps a static marker */
.t-nav:not(:has(.t-nav__cursor.is-placed)) .t-nav__link.is-active::before { content: '\2588'; position: absolute; left: 0; }
.t-nav--big .t-nav__link.is-active::before { content: none !important; }

.t-side__spacer { flex: 1; min-height: 24px; }
.t-side__actions { display: flex; flex-direction: column; gap: 8px; }
/* Cart / sign in: twin slots (navbar.njk twinSlots; design: sidebar-cart-signin.html).
   Two dashed squares side by side, pixel icon over the label. Hover: white, sign in
   goes green like the ~$ prompt. Cart with items: pink/cyan icon + pink count badge,
   and the icon hops when an item is added (motion.js cartState()). Label 11px, a
   step above the design's 10px like the page slots. */
.t-twins { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.t-twin {
  --a: var(--tw-a); --b: var(--tw-b); --c: var(--tw-c);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 62px;
  padding: 0;
  border: 1px dashed var(--tw-line);
  background: transparent;
  color: var(--tw-text);
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.t-twin svg { display: block; width: 20px; height: 20px; }
.t-twin .a { fill: var(--a); } .t-twin .b { fill: var(--b); } .t-twin .c { fill: var(--c); }
.t-twin .a, .t-twin .b, .t-twin .c { transition: fill 150ms; }
.t-twin:hover, .t-twin:focus-visible, .t-twin.is-current { --a: var(--tw-a-hi); --b: var(--tw-b-hi); --c: var(--tw-c-hi); color: var(--fg); border-color: var(--tw-line-hi); }
.t-twin:focus-visible { outline: 1px dashed var(--tw-line-hi); outline-offset: 2px; }
.t-twin--user:hover, .t-twin--user:focus-visible, .t-twin--user.is-current { --a: #39ff7a; --b: var(--tw-b-hi); --c: #14702f; }
.t-twin--cart.has-items { --a: #ff2bd6; --b: #00e5ff; --c: #7d1468; color: var(--fg); }
.t-twin__badge { position: absolute; top: 6px; right: 8px; display: none; padding: 0 4px; background: #ff2bd6; color: #000; font-size: 10px; line-height: 1.3; letter-spacing: 0; }
.t-twin--cart.has-items .t-twin__badge { display: block; }
.t-twin__icon.is-bump { animation: t-twin-bump 0.35s steps(3); }
@keyframes t-twin-bump { 40% { transform: translateY(-4px); } }
.t-side { --tw-a: #4a4a4a; --tw-b: #777; --tw-c: #222; --tw-a-hi: #ddd; --tw-b-hi: #fff; --tw-c-hi: #555; --tw-line: #1e1e1e; --tw-line-hi: #333; --tw-text: #888; }
:root[data-theme="light"] .t-side { --tw-a: #bbb; --tw-b: #8a8a8a; --tw-c: #ddd; --tw-a-hi: #444; --tw-b-hi: #000; --tw-c-hi: #999; --tw-line: #d6d6d6; --tw-line-hi: #999; --tw-text: #777; }

/* Stacked slots, "bracket pointer" (navbar.njk slotList; design: sidebar-slots.html).
   No boxes: a pixel icon over its label. Grey at rest, white on hover; the current
   page lights up in its own colours (--hc accent, --hb highlight, --hd shade), the
   label gets [ ] in the accent and a ▸ pointer bobs on the left. Text is a step
   larger than the design (13px label, 14px pointer, 30px icon, 78px slots 14px apart). */
.t-side {
  --sl-a: #3e3e3e; --sl-b: #6a6a6a; --sl-c: #1c1c1c; --sl-text: #5a5a5a;
  --sl-a-hi: #bdbdbd; --sl-b-hi: #fff; --sl-c-hi: #4a4a4a; --sl-text-hi: #ddd;
  --sl-dash: #2a2a2a; --sl-dash-hi: #666; --sl-bot: #ccc;
}
:root[data-theme="light"] .t-side {
  --sl-a: #c4c4c4; --sl-b: #9a9a9a; --sl-c: #e2e2e2; --sl-text: #8a8a8a;
  --sl-a-hi: #555; --sl-b-hi: #000; --sl-c-hi: #9a9a9a; --sl-text-hi: #222;
  --sl-dash: #d0d0d0; --sl-dash-hi: #888; --sl-bot: #333;
}
.t-slots { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
/* centred vertically in the space above cart / sign in: equal auto margins, and the
   spacer keeps only its 24px minimum gap so it doesn't eat the free height */
.t-side .t-slots { margin-block: auto; }
.t-side .t-side__spacer { flex: 0 0 24px; }
.t-slot {
  --a: var(--sl-a); --b: var(--sl-b); --c: var(--sl-c);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  height: 78px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--sl-text);
  text-decoration: none;
  user-select: none;
  background: transparent;
  transition: color 150ms;
}
.t-slot svg { display: block; width: 30px; height: 30px; }
.t-slot .a { fill: var(--a); } .t-slot .b { fill: var(--b); } .t-slot .c { fill: var(--c); }
.t-slot .a, .t-slot .b, .t-slot .c { transition: fill 150ms; }
.t-slot__arrow { position: absolute; left: 4px; top: 50%; margin-top: -9px; font-size: 14px; color: var(--hc); opacity: 0; }
.t-slot:hover, .t-slot:focus-visible { --a: var(--sl-a-hi); --b: var(--sl-b-hi); --c: var(--sl-c-hi); color: var(--sl-text-hi); }
.t-slot:focus-visible { outline: 1px dashed var(--sl-dash-hi); outline-offset: -1px; }
.t-slot.is-active { --a: var(--hc); --b: var(--hb); --c: var(--hd); color: var(--fg); }
.t-slot.is-active .t-slot__label::before { content: '[ '; color: var(--hc); }
.t-slot.is-active .t-slot__label::after { content: ' ]'; color: var(--hc); }
.t-slot.is-active .t-slot__arrow { opacity: 1; animation: t-slot-bob 0.7s steps(2) infinite; }
@keyframes t-slot-bob { 50% { transform: translateX(3px); } }

/* Theme toggle: [ DARK / light ] — current mode uppercase */
.t-theme {
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--fg-dim);
  font: 400 var(--fs-label)/1.2 var(--ff);
  letter-spacing: var(--track);
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-in);
}

.t-theme__opt { text-transform: lowercase; }
:root:not([data-theme="light"]) .t-theme__opt[data-t-theme-opt="dark"],
:root[data-theme="light"] .t-theme__opt[data-t-theme-opt="light"] { text-transform: uppercase; color: var(--fg); font-weight: 500; }

/* Content: inside the window, right of the menu pane; faint dot grid */
/* the dot grid is pinned to the screen like the window frame, so it doesn't slide when the page scrolls */
body.t-body { background-image: radial-gradient(circle at 1px 1px, var(--fg-ghost) 1px, transparent 0); background-size: 24px 24px; background-attachment: fixed; }
.t-content {
  position: relative;
  width: min(var(--win-max), 100% - 2 * var(--gap));
  min-height: 100vh;
  margin: 0 auto;
  /* equal gutters on both sides of the content (left one measured from the menu pane) */
  padding: calc(var(--gap) + var(--top-h) + 56px) 56px calc(var(--gap) + var(--keys-h) + 40px) calc(var(--side-w) + 56px);
  display: flex;
  flex-direction: column;
  background: var(--bg);   /* inside the window is plain; the dot grid stays on the page around it */
}
/* the column is centred between the menu pane and the window's right edge */
.t-content > main { flex: 1; width: 100%; max-width: var(--page-max); margin-inline: auto; }
.sa-tpl-product .t-content > main { max-width: none; }   /* product page: the viewer gets all the room there is */
@media (min-width: 1100px) { .sa-tpl-product .t-content { padding-left: calc(var(--side-w) + 40px); padding-right: 32px; } }
.t-body--bare .t-content { padding: 64px 24px; }

/* Footer: one comment line at the end of the content */
.t-foot { width: 100%; max-width: var(--page-max); margin-inline: auto; margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--fg-faint); }
.t-foot__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; font-size: var(--fs-label); color: var(--fg-dim); }
.t-foot__row a { color: var(--fg-dim); text-decoration: none; }
.t-foot__row a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Mobile bar + full-screen menu */
.t-bar { display: none; }

@media (max-width: 1099.98px) {
  /* the menu pane keeps its 190px (the stacked slots are sized for it) */
  .t-content { padding-left: calc(var(--side-w) + 32px); padding-right: 32px; }
  .t-keys__hints span:nth-child(n+2) { display: none; }
}

@media (max-width: 859.98px) {
  body.t-body .t-win, body.t-body .t-top, body.t-body .t-side, body.t-body .t-keys { display: none; }
  body.t-body { background-image: none; }
  .t-bar { display: block; }
  .t-bar__row {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    height: var(--bar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--fg-faint);
  }
  .t-bar__name { font-weight: 500; color: var(--fg); text-decoration: none; }
  .t-menu {
    position: fixed;
    inset: var(--bar-h) 0 0 0;
    z-index: 39;
    display: flex;
    flex-direction: column;
    padding: 24px 16px;
    background: var(--bg);
    overflow-y: auto;
  }
  .t-menu__path { margin: 0 0 20px; font-size: var(--fs-label); color: var(--fg-dim); }
  .t-nav--big { padding-left: 0; }
  .t-nav--big .t-nav__link { grid-template-columns: 24px 40px auto; height: 48px; font-size: var(--fs-title); }
  .t-nav--big .t-nav__link::before { content: ''; }
  .t-nav--big .t-nav__link.is-active::before { content: '\2588' !important; position: static !important; font-size: var(--fs-body); }
  .t-menu__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 32px; }
  .t-menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: auto; padding-top: 32px; }
  .t-content { width: auto; margin: 0; padding: calc(var(--bar-h) + 32px) 16px 24px; }
  .t-foot { margin-top: 64px; }
}
/* ── 5. Homepage ────────────────────────────────────────────────────────── */
/* Hero: CLI banner logo (ANSI Shadow, 76 columns) sized to the hero's width, then
   the tagline as the h1. Blocks bright, box-line shadow dim (spans added by
   motion.js logo()); a light band sweeps the shadow now and then. */
.t-hero { container-type: inline-size; padding: 16px 0 0; }
/* The hero fills the first screen, so the tutorial starts below the fold
   (desktop: inside the window, between the top bar and the key bar; phones:
   under the 48px top bar) */
/* minus the content's top padding and the 64px gap to the tutorial, plus ~24px
   so the tutorial sits just under the fold */
.t-hero { min-height: calc(100svh - var(--bar-h) - 64px); }
@media (min-width: 860px) { .t-hero { min-height: calc(100svh - 2 * var(--gap) - var(--top-h) - var(--keys-h) - 96px); } }
.t-hero + .t-sec { margin-top: 64px; }
.t-hero > :not(.t-logo) { max-width: var(--measure); }
/* The web font has no box-drawing glyphs, and mixing fonts breaks the columns: the
   whole banner uses one system mono that has them all. */
.t-logo { margin: 0 0 32px; font-family: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, 'DejaVu Sans Mono', 'Liberation Mono', monospace; font-weight: 400; line-height: 1; letter-spacing: 0; white-space: pre; color: var(--fg); overflow: hidden; user-select: none; }
/* 76 columns at ~0.55–0.6em each */
.t-logo--lg { font-size: 10px; }
@container (min-width: 700px) { .t-logo--lg { font-size: 15px; } }
@container (min-width: 940px) { .t-logo--lg { font-size: 20px; } }
.t-logo--sm { display: none; font-size: 15px; }
.t-logo .s { color: var(--fg-dim); }
.t-logo .b { display: inline-block; width: 1ch; height: 1em; vertical-align: top; background: var(--fg); color: transparent; }
.t-logo .g { color: var(--fg-dim); }   /* a glyph still scrambling */
.t-logo.is-sweep .s { animation: t-sweep 1.4s var(--ease-in) both; animation-delay: calc(var(--x) * 14ms); }
@keyframes t-sweep { 0%, 100% { color: var(--fg-dim); } 30% { color: var(--fg); } }
.t-logo + .t-hero__title { font-size: var(--fs-page); }
@media (max-width: 639.98px) {
  .t-logo--lg { display: none; }
  .t-logo--sm { display: block; margin-bottom: 24px; }
}
.t-hero__title { margin: 0; font-size: var(--fs-hero); font-weight: 500; line-height: 1.15; }
.t-hero__title > span[aria-hidden] { color: var(--ok); }
.t-hero__intro { margin: 24px 0 0; max-width: var(--measure); }
/* Ticker under the intro: key points scroll right to left, magenta diamonds
   between them; fades at both ends, pauses on hover */
.t-hero > .t-ticker { max-width: none; }
.t-ticker {
  margin: 32px 0 0;
  padding: 11px 0;
  border-block: 1px solid var(--fg-faint);
  overflow: hidden;
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  color: var(--fg-dim);
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.t-ticker__track { display: flex; width: max-content; animation: t-ticker 60s linear infinite; }
.t-ticker:hover .t-ticker__track { animation-play-state: paused; }
.t-ticker__set { display: flex; align-items: center; }
.t-ticker__set i { padding: 0 22px; font-style: normal; font-size: 9px; color: #ff2bd6; }
@keyframes t-ticker { to { transform: translateX(-50%); } }
.t-hero__actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 28px 0 0 -6px; }

.t-sec { margin-top: 112px; }
.t-sec__lead { margin: 0; font-size: var(--fs-label); color: var(--fg-dim); }

/* Get started: `stellar-market install` session (motion.js install()). Steps fade in
   as they run; the mark spins, then turns into a green ✓. Hidden states only
   apply from the first paint (.t-js, set in <head>) unless motion.js never
   starts (.t-nomotion), so there's no flash and no JS = everything visible. */
.t-inst.t-term { max-width: none; margin-top: 0; }
/* spacing rhythm: bar → 32 → prompt → 32 → step 01 → 48 → step 02 …, sides 32 */
.t-inst .t-term__bar { min-height: 44px; padding: 0 16px 0 20px; font-size: 13px; }
.t-term .t-inst__body { display: grid; gap: 48px; padding: 32px 32px 40px; }
.t-inst p { margin: 0; }
.t-inst__cmd { margin-bottom: -16px !important; font-size: 15px; color: var(--fg-dim); }
.t-inst__ps1 { color: var(--ok); }
.t-inst__head { display: flex; align-items: baseline; gap: 12px; font-size: 22px; font-weight: 500; }
.t-inst__mark { width: 1ch; flex: none; color: var(--fg-dim); }
.t-inst__step.is-done .t-inst__mark { color: var(--ok); }
.t-inst__n { color: var(--fg-dim); font-weight: 400; }
.t-inst__line, .t-inst__pick, .t-inst__done, .t-keyfx { margin-left: calc(1ch + 12px) !important; }
.t-inst__line { margin-top: 12px !important; font-size: 16px; }
.t-inst__dim { color: var(--fg-text); }
.t-inst__pick { list-style: none; margin-top: 16px !important; padding: 0; }
.t-opt { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto 2ch; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 19px; color: var(--fg-text); text-decoration: none; transition: color var(--t-hover) var(--ease-in); }
.t-opt__cur { visibility: hidden; color: var(--ok); }
.t-opt__price { text-align: right; font-size: 17px; }
.t-opt__price small { font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-opt__go { text-align: right; transition: transform var(--t-ui) var(--ease-in); }
.t-opt.is-sel { color: var(--fg); }
.t-opt.is-sel .t-opt__cur { visibility: visible; }
.t-opt.is-sel .t-opt__name { font-weight: 500; }
.t-opt.is-sel .t-opt__go { transform: translateX(4px); }
.t-opt:focus-visible { outline: none; }
.t-inst__foot { justify-content: flex-end; }
.t-inst__bar { display: inline-block; width: 48ch; max-width: 60vw; height: 10px; vertical-align: -1px; border: 1px solid var(--fg-faint); }
.t-inst__bar i { display: block; height: 100%; width: var(--p, 100%); background: repeating-linear-gradient(90deg, var(--fg) 0 5px, transparent 5px 7px); }
.t-inst__done { margin-top: 18px !important; font-size: 16px; color: var(--ok); }

/* Key delivery (motion.js keyFx): log lines with a dotted leader that fills,
   then a framed key that decrypts; locked characters bright, scrambling ones green. */
.t-keyfx { max-width: 560px; margin-top: 20px; font-size: 14px; }
.t-keyfx__log { display: flex; align-items: baseline; gap: 10px; margin-top: 6px !important; color: var(--fg-dim); }
.t-keyfx__log i { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--fg-faint); transform-origin: left; }
.t-keyfx__log b { font-weight: 500; color: var(--ok); }
.t-keyfx__box { display: grid; gap: 10px; margin-top: 18px; padding: 18px 20px 20px; border: 1px solid var(--fg-faint); transition: border-color 600ms var(--ease-in); }
.t-keyfx__label { font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-keyfx__code { font-size: 26px; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; }
.t-keyfx__code .x { color: var(--ok); opacity: .7; }
.t-keyfx__sent { margin-top: 12px !important; font-size: 13px; color: var(--fg-dim); }
.t-keyfx.is-locked .t-keyfx__box { border-color: var(--ok); }
/* before / while it runs (only with JS) */
.t-js:not(.t-nomotion) .t-keyfx:not(.is-on) .t-keyfx__log, .t-js:not(.t-nomotion) .t-keyfx:not(.is-on) .t-keyfx__box, .t-js:not(.t-nomotion) .t-keyfx:not(.is-on) .t-keyfx__sent { opacity: 0; }
.t-keyfx .t-keyfx__log, .t-keyfx .t-keyfx__box, .t-keyfx .t-keyfx__sent { transition: opacity 400ms var(--ease-in); }
.t-js:not(.t-nomotion) .t-keyfx .is-wait { opacity: 0; }
.t-js:not(.t-nomotion) .t-keyfx .t-keyfx__log.is-busy b { opacity: 0; }
.t-js:not(.t-nomotion) .t-keyfx .t-keyfx__log.is-busy i { animation: t-leader 700ms var(--ease-in) both; }
@keyframes t-leader { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.t-js:not(.t-nomotion) .t-inst__step { opacity: 0; transform: translateY(10px); transition: opacity 700ms var(--ease-in), transform 700ms var(--ease-in); }
.t-js:not(.t-nomotion) .t-inst__step.is-run { opacity: 1; transform: none; }
.t-js:not(.t-nomotion) .t-inst__step:not(.is-done) .t-inst__done { opacity: 0; }
/* the command and the step counter stay blank until motion.js has reset them */
.t-js:not(.t-nomotion) .t-inst:not(.is-armed) :is([data-t-inst-cmd], [data-t-inst-count]) { visibility: hidden; }
@media (max-width: 639.98px) {
  .t-term .t-inst__body { gap: 36px; padding: 20px 16px 28px; }
  .t-inst__cmd { margin-bottom: -16px !important; font-size: 13px; }
  .t-inst__head { font-size: 19px; }
  .t-opt { gap: 10px; font-size: 17px; }
  .t-opt__price { font-size: 15px; }
  .t-keyfx__box { padding: 14px 14px 16px; }
  .t-keyfx__code { font-size: 17px; letter-spacing: 0.04em; }
}

/* Community showcase: four perk panels in a 2×2 grid sharing their borders,
   each with a fixed-height looping demo (motion.js perks()), then a big join. */
.t-perks.t-term { max-width: none; margin-top: 0; }
.t-perks .t-term__bar { min-height: 44px; padding: 0 16px 0 20px; font-size: 13px; }
.t-perks p { margin: 0; }
.t-perks__live::before { content: '\25CF\00a0'; color: var(--ok); }
.t-perks__live { color: var(--fg-dim); }
.t-perks__head { padding: 40px 32px 32px; }
.t-perks__title { margin: 0; font-size: var(--fs-page); font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
.t-perks__lead { margin-top: 10px !important; font-size: 16px; color: var(--fg-text); }
.t-perks__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fg-faint); }
.t-perk { display: grid; grid-template-rows: auto 150px auto; align-content: start; gap: 18px; padding: 28px 32px 32px; border-bottom: 1px solid var(--fg-faint); }
.t-perk:nth-child(odd) { border-right: 1px solid var(--fg-faint); }
.t-perk__title { margin: 0; display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.t-perk__n { font-size: 12px; color: var(--fg-dim); font-weight: 400; }
.t-perk__text { font-size: 16px; color: var(--fg-text); }
.t-perk__demo { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; padding: 18px 20px; border: 1px dashed var(--fg-faint); font-size: 15px; overflow: hidden; }
/* 01 status */
.t-pk-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 500; }
.t-pk-row .t-state { font-size: 14px; font-weight: 400; transition: color 300ms var(--ease-in); }
.t-pk-note { font-size: 13px; color: var(--fg-dim); transition: opacity 300ms var(--ease-in); }
.t-pk-note.is-alert { color: var(--warn); }
.t-pk-note.is-ok { color: var(--ok); }
/* 02 support */
.t-pk-who { display: inline-block; min-width: 6ch; margin-right: 10px; font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-pk-a .t-pk-who { color: var(--ok); }
.t-pk-q, .t-pk-a { min-height: 1.6em; }
.t-pk-typing { font-size: 13px; color: var(--fg-dim); opacity: 0; transition: opacity 250ms var(--ease-in); }
.t-pk-typing.is-on { opacity: 1; }
/* 03 new release */
.t-pk-label { font-size: 12px; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-pk-new { display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 500; }
.t-pk-new [data-pk-new] .x { color: var(--fg-dim); }
.t-pk-badge { padding: 1px 8px; border: 1px solid var(--ok); font-size: 11px; font-weight: 500; letter-spacing: var(--track); color: var(--ok); transition: opacity 300ms var(--ease-in), transform 300ms var(--ease-in); }
.t-pk-badge.is-off { opacity: 0; transform: scale(.8); }
/* 04 chat: lines slide up */
.t-pk-chat { list-style: none; justify-content: flex-end; gap: 8px; }
.t-pk-chat li { color: var(--fg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-pk-chat li.is-new { animation: t-pk-in 450ms var(--ease-in) both; }
@keyframes t-pk-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* join */
.t-perks__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px 44px; }
.t-perks__btn { padding: 14px 28px !important; font-size: 15px !important; letter-spacing: 0.1em; border: 1px solid var(--fg) !important; }
.t-perks__fine { font-size: 12px; color: var(--fg-dim); }
@media (max-width: 899.98px) {
  .t-perks__grid { grid-template-columns: minmax(0, 1fr); }
  .t-perk:nth-child(odd) { border-right: 0; }
}
@media (max-width: 639.98px) {
  .t-perks__head { padding: 28px 16px 24px; }
  .t-perk { padding: 22px 16px 24px; grid-template-rows: auto 180px auto; }
  .t-perk__demo { padding: 14px 16px; font-size: 14px; }
  .t-perk__title { font-size: 18px; }
  .t-pk-row { font-size: 16px; }
  .t-pk-new { font-size: 18px; }
}

/* Connect Discord page: one window whose main content is a very large outlined
   button. A light band slides along its bottom edge every few seconds to draw the
   eye; on hover the border and arrow turn green and the corners lock on. */
.t-connect { margin-top: 40px; }
.t-connect__win.t-term { max-width: none; margin-top: 0; }
.t-connect__win .t-term__bar { min-height: 44px; padding: 0 16px 0 20px; font-size: 13px; }
.t-connect__safe { color: var(--fg-dim); }
.t-connect__safe::before { content: '\25CF\00a0'; color: var(--ok); }
.t-connect__body { display: grid; gap: 28px; padding: 40px 40px 36px; }
.t-connect__body p { margin: 0; }
.t-connect__lead { max-width: 60ch; font-size: 17px; line-height: 1.7; color: var(--fg-text); }
.t-connect__steps { display: flex; flex-wrap: wrap; gap: 12px 32px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--fg-dim); }
.t-connect__steps span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1px solid var(--fg-faint); font-size: 12px; color: var(--fg); }
.t-connect__btn {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 132px; padding: 0 40px; border: 2px solid var(--fg); color: var(--fg); text-decoration: none; overflow: hidden;
  transition: border-color var(--t-ui) var(--ease-in), background-color var(--t-ui) var(--ease-in);
}
.t-connect__label { font-size: clamp(22px, 3.2vw, 40px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; }
.t-connect__arrow { font-size: clamp(28px, 4vw, 52px); line-height: 1; transition: transform var(--t-ui) var(--ease-in), color var(--t-ui) var(--ease-in); }
.t-connect__btn::before { content: ''; position: absolute; left: 0; bottom: 0; width: 30%; height: 2px; background: var(--ok); transform: translateX(-110%); animation: t-connect-band 3.6s var(--ease-in) 1s infinite; }
@keyframes t-connect-band { 0% { transform: translateX(-110%); } 45%, 100% { transform: translateX(360%); } }
.t-connect__btn:hover, .t-connect__btn:focus-visible { border-color: var(--ok); outline: none; }
.t-connect__btn:hover .t-connect__arrow, .t-connect__btn:focus-visible .t-connect__arrow { color: var(--ok); transform: translateX(10px); }
.t-connect__fine { font-size: 13px; line-height: 1.7; color: var(--fg-dim); }
.t-connect__faq { margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { .t-connect__btn::before { animation: none; } }
@media (max-width: 639.98px) {
  .t-connect__body { gap: 22px; padding: 24px 16px 24px; }
  .t-connect__lead { font-size: 15px; }
  .t-connect__steps { flex-direction: column; gap: 10px; }
  .t-connect__btn { min-height: 96px; padding: 0 20px; }
  .t-connect__safe { display: none; }
}

/* Terminal window shared by the homepage TUTORIAL / COMMUNITY windows and the
   connect page: title bar · body · status bar; the only rules are the bars' borders. */
.t-term { max-width: var(--measure); margin-top: 32px; border: 1px solid var(--fg-faint); background: var(--bg); }
.t-term__bar, .t-term__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 14px; min-height: 36px; font-size: var(--fs-label); letter-spacing: 0.02em; color: var(--fg-dim); }
.t-term__bar { border-bottom: 1px solid var(--fg-faint); color: var(--fg); }
.t-term__foot { border-top: 1px solid var(--fg-faint); }
.t-term__foot b { color: var(--fg); font-weight: 500; }
.t-term__body { padding: 14px 14px 10px; }
/* ── 6. Pages (shared header) ───────────────────────────────────────────── */
.t-page__head { margin-bottom: 40px; }
.t-page__path { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: var(--fs-label); color: var(--fg-dim); letter-spacing: 0.02em; text-transform: none; }
.t-page__path a { color: var(--fg-dim); text-decoration: none; }
.t-page__path a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.t-page__title { margin: 0; font-size: var(--fs-page); font-weight: 500; line-height: 1.3; }
.t-page__title > span[aria-hidden] { color: var(--ok); }
.t-page__lead { margin: 8px 0 0; max-width: var(--measure); color: var(--fg-dim); }
.t-page .t-head { margin-top: 48px; }
.t-group + .t-group { margin-top: 0; }
.t-pages { margin-top: 32px; }

/* Status page: big plain counts, then line-free rows (name · coloured state) */
.t-sum { display: flex; flex-wrap: wrap; gap: 24px 64px; margin: 0; }
.t-sum > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.t-sum dd { margin: 0; font-size: var(--fs-hero); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.t-sum dt { font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-sum + .t-group { margin-top: 48px; }
.sa-page-status .t-rows { margin-top: 0; border-top: 0; max-width: 720px; }
.sa-page-status .t-rows > li { border-bottom: 0; }
.sa-page-status .t-row { grid-template-columns: 40px minmax(0, 1fr) auto 24px; padding: 14px 8px; }
.sa-page-status .t-row__d .t-state { font-size: 13px; letter-spacing: 0.02em; }
.sa-page-status .t-head { margin: 48px 0 8px; }

/* Products page: a grid of small terminal windows. The image is a 1-bit dither
   (canvas, drawn by motion.js ditherCards) over the real image; on hover the
   dither dissolves pixel by pixel into colour. Without JS: greyscale → colour. */
.sa-page-products .t-head { margin: 48px 0 16px; gap: 12px; align-items: baseline; }
.sa-page-products .t-head__title { font-size: 16px; }
.t-cards { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.t-cards > li { display: flex; min-width: 0; }
.t-card { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--fg-faint); color: var(--fg); text-decoration: none; transition: border-color var(--t-ui) var(--ease-in); }
.t-card:hover, .t-card:focus-visible { border-color: var(--fg-dim); outline: none; }
.t-card::after { inset: -7px !important; }
.t-card__img { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg); }
.t-card__img img, .t-card__img canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-card__img img { filter: grayscale(1) contrast(1.1); transition: filter 480ms var(--ease-in), opacity 480ms var(--ease-in); }
.t-card:hover .t-card__img img, .t-card:focus-visible .t-card__img img { filter: none; }
.t-card__img canvas { image-rendering: pixelated; }
.t-card__none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-faint); font-size: var(--fs-title); }
.t-card__body { display: grid; gap: 10px; padding: 16px 12px 14px; }
.t-card__name { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: var(--track); }
.t-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* state stays quiet: grey label, only the small dot carries the colour */
.t-card__meta .t-state { font-size: 10px; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim) !important; }
.t-card__meta .t-state[data-state="undetected"]::before { color: var(--ok); }
.t-card__meta .t-state[data-state="detected"]::before { color: var(--bad); }
.t-card__meta .t-state:is([data-state="updating"], [data-state="use at own risk"], [data-state="maintenance"])::before { color: var(--warn); }
.t-card__price { font-size: 15px; font-weight: 500; white-space: nowrap; }
.t-card__price small { font-size: 10px; font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.t-card.is-out .t-card__price { color: var(--fg-dim); font-weight: 400; font-size: 11px; letter-spacing: var(--track); text-transform: uppercase; }
.t-card.is-out .t-card__img { opacity: .45; }
/* home "top rated": rating in place of the state label */
.t-card__rate { font-size: var(--fs-label); letter-spacing: var(--track); color: var(--fg); white-space: nowrap; }
.t-card__rate small { font-size: 10px; color: var(--fg-dim); }
#top-rated .t-cards { margin-top: 24px; }

/* Legacy wrappers inside the content column carry no width or padding of their own */
.t-content .dm-wrap, .t-content .wrap { width: 100%; max-width: none; margin: 0; padding-inline: 0; }
.t-content .py-section { padding-top: 0; padding-bottom: 0; }

/* ── 7. FAQ, docs, connect-discord, legal text ──────────────────────────── */
/* Title block ("Questions / answered") → one line:  > questions answered */
.dm-faq-hero { padding: 0; }
.dm-faq-hero__title { margin: 0; font-size: var(--fs-page); font-weight: 500; line-height: 1.3; text-transform: lowercase; }
.dm-faq-hero__title::before { content: '~$ '; color: var(--ok); }
.dm-faq-hero__title > span { display: inline; }
.dm-faq-hero__title > span + span::before { content: ' '; }
.dm-faq-hero__hollow { color: var(--fg); }

.dm-section { padding: 0; margin-top: 40px; }
.dm-split { display: grid; gap: 24px; }
.dm-split__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: var(--measure); }
.dm-split__title { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.dm-split__text { margin: 0; color: var(--fg-dim); }
.dm-split__text--small { font-size: var(--fs-label); }
.dm-split__meta { margin-top: 4px; }
.dm-split__cta { margin: 8px 0 0 -6px; }

.dm-faq__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg-faint); max-width: 880px; }
.dm-faq__item { border-bottom: 1px solid var(--fg-faint); }
.dm-faq__h { margin: 0; font: inherit; }
.dm-faq__q {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 32px;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 12px 8px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dm-faq__n { font-size: var(--fs-body); letter-spacing: 0; text-transform: none; }
.dm-faq__text { font-weight: 500; }
.dm-faq__icon { justify-self: end; color: var(--fg-dim); }
.dm-faq__icon::before { content: '[+]'; }
.dm-faq__item.is-open .dm-faq__icon::before { content: '[-]'; color: var(--fg); }
.dm-faq__a { display: none; }
.dm-faq__item.is-open .dm-faq__a { display: block; }
.dm-faq__a-inner { padding: 0 8px 16px calc(40px + 16px + 8px); }
.dm-faq__a-inner > p { margin: 0 0 10px; max-width: var(--measure); color: var(--fg-dim); }
.dm-faq__link { display: inline-block; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); font-size: var(--fs-label); }
.dm-faq__link::after { content: ' \2192'; }
.dm-faq__link svg { display: none; }

.dm-faq-end { margin-top: 64px; }
.dm-faq-end__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.dm-faq-end__title { margin: 0; font-size: var(--fs-body); font-weight: 500; text-transform: lowercase; }
.dm-faq-end__title::before { content: '// '; color: var(--fg-dim); }

/* Docs: product tabs + guide text */
.dm-docs__tabs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 32px; }
.dm-docs__tab { padding: 2px 6px; border: 0; background: none; color: var(--fg-dim); font: 400 var(--fs-label)/1.6 var(--ff); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.dm-docs__tab:hover { color: var(--fg); }
.dm-docs__tab.is-active { color: var(--fg); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.dm-docs__panel + .dm-docs__panel { margin-top: 64px; }
.t-js .dm-docs__panel { margin-top: 0; }
.t-js .dm-docs__panel:not(.is-active) { display: none; }
/* each guide's product name (Fortnite Internal, Valorant…) in orange */
/* same palette on FAQ and connect-Discord (they share the dm-faq accordion) */
.dm-faq .dm-split__title { color: var(--warn); }
.dm-faq .dm-faq__text { color: var(--doc-step); }
.dm-faq .dm-faq__n { color: var(--doc-step); opacity: .6; }
.dm-faq .dm-doc h4, .dm-faq .dm-faq__a-inner h4 { color: var(--doc-sub); }
/* FAQ / Discord answers have no sub-steps: their links ("see the live status →") take the third colour */
.dm-faq:not(.dm-docs) .dm-faq__a a { color: var(--doc-sub); text-decoration-color: currentColor; }
.dm-faq .dm-split__meta { display: none; }   /* no "03 steps" / "06 questions" counters */
/* "You need" + "Keys": one outlined box, two columns, no rules between items */
.dm-docs__needs {
  margin-top: 24px; width: 100%; max-width: var(--measure);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  grid-auto-flow: column; gap: 0 48px;
  padding: 20px 24px; border: 1px solid var(--fg-faint);
}
.dm-docs__needs p { margin: 0 0 12px; font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim); }
.dm-docs__needs ul { list-style: none; margin: 0; padding: 0; border: 0; display: grid; gap: 10px; align-content: start; }
.dm-docs__needs li { padding: 0 0 0 18px; border: 0; position: relative; color: var(--fg-text); line-height: 1.5; }
.dm-docs__needs li::before { content: '›'; position: absolute; left: 0; color: var(--fg-dim); }
.dm-docs__keys li { padding-left: 0; white-space: nowrap; }
.dm-docs__needs .dm-docs__keys li { color: var(--fg-dim) !important; }
.dm-docs__keys li::before { content: none; }
.dm-docs__keys kbd {
  display: inline-block; min-width: 64px; margin-right: 10px; padding: 1px 7px;
  border: 1px solid var(--fg-faint); border-bottom-width: 2px;
  font: 500 12px/1.5 var(--ff); color: var(--fg); text-align: center;
}
@media (max-width: 639.98px) {
  .dm-docs__needs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; padding: 16px; }
  .dm-docs__needs ul + p { margin-top: 24px; }
}

.dm-doc { max-width: var(--measure); color: var(--fg-dim); }
.dm-doc > :first-child { margin-top: 0; }
.dm-doc > :last-child { margin-bottom: 0; }
.dm-doc p { margin: 0 0 12px; }
.dm-doc strong { color: var(--fg); }
.dm-doc a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.dm-doc h3 { margin: 28px 0 8px; color: var(--fg); font-size: var(--fs-body); }
.dm-doc h3::before { content: '## '; color: var(--fg-dim); }
.dm-doc h4 { margin: 24px 0 6px; color: var(--fg-dim); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; }
.dm-doc ol, .dm-doc ul { margin: 0 0 12px; padding-left: 24px; }
.dm-doc ol { list-style: decimal-leading-zero; }
.dm-doc ul { list-style: none; padding-left: 16px; }
.dm-doc ul > li::before { content: '- '; margin-left: -16px; }
.dm-doc li { margin: 4px 0; }
.dm-doc li::marker { color: var(--fg-dim); }
.dm-doc blockquote { margin: 16px 0; padding: 0 0 0 16px; border-left: 1px solid var(--fg); color: var(--fg); }
.dm-doc code { font-family: var(--ff); color: var(--fg); }
.dm-doc pre { margin: 12px 0 16px; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--fg-faint); background: var(--bg); color: var(--fg); font-size: 13px; }
.dm-doc pre code { white-space: pre; }
.dm-doc__scroll { margin: 12px 0 16px; overflow-x: auto; }
.dm-doc table { border-collapse: collapse; text-align: left; }
.dm-doc th { padding: 0 24px 8px 0; color: var(--fg-dim); font-size: var(--fs-label); font-weight: 400; letter-spacing: var(--track); text-transform: uppercase; border-bottom: 1px solid var(--fg-faint); }
.dm-doc td { padding: 8px 24px 8px 0; border-bottom: 1px solid var(--fg-faint); color: var(--fg); }
.dm-doc__tick::before { content: '[x]'; color: var(--fg); }
.dm-doc__tick { background: none !important; width: auto !important; height: auto !important; }
.dm-doc img { display: block; max-width: 100%; height: auto; margin: 16px 0; border: 1px solid var(--fg-faint); }
.dm-doc__code { position: relative; margin: 12px 0 16px; }
.dm-doc__code pre { margin: 0; padding-right: 84px; }
.dm-doc__copy { position: absolute; top: 6px; right: 6px; padding: 4px 6px; border: 0; background: var(--bg); color: var(--fg-dim); font: 400 var(--fs-label)/1.2 var(--ff); letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
.dm-doc__copy:hover, .dm-doc__copy.is-done { background: var(--fg-ghost); color: var(--fg); }

/* Legal pages (terms, privacy, refunds) */
.sa-page-terms-body { max-width: var(--measure); color: var(--fg-dim); }
.sa-page-terms-body h1, .sa-page-terms-body h2, .sa-page-terms-body h3 { margin: 32px 0 8px; color: var(--fg); font-size: var(--fs-body); font-weight: 500; }
.sa-page-terms-body h2::before, .sa-page-terms-body h3::before { content: '## '; color: var(--fg-dim); }
.sa-page-terms-body > :first-child { margin-top: 0; }
.sa-page-terms-body p { margin: 0 0 12px; }
.sa-page-terms-body ul, .sa-page-terms-body ol { margin: 0 0 12px; padding-left: 24px; }
.sa-page-terms-body ul { list-style: square; }
.sa-page-terms-body ol { list-style: decimal; }
.sa-page-terms-body strong { color: var(--fg); }
.sa-page-terms-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Reading comfort where there's a lot of text: brighter body tone, looser lines,
   a shorter measure, and more air between paragraphs, list items and steps. */
.dm-doc, .dm-faq__a-inner > p, .sa-page-terms-body, .dm-sc__text, .t-rows--static .t-row__d, .dm-split__text, .t-page__lead, .t-hero__intro, .dm-docs__needs li, .dm-spec__desc, .t-legend dd, .dm-dash__text, .sa-customer-header-subtitle {
  color: var(--fg-text) !important;
  line-height: 1.75;
}
.dm-doc, .dm-faq__a-inner > p, .sa-page-terms-body, .dm-split__text, .t-page__lead { max-width: var(--prose); }
.dm-doc p, .sa-page-terms-body p { margin-bottom: 16px; }
.dm-doc li, .sa-page-terms-body li { margin: 8px 0; padding-left: 4px; }
.dm-doc ol, .dm-doc ul { margin-bottom: 18px; }
/* step labels in guides: brighter, with a rule above to split long guides into chunks */
.dm-doc h4 { margin: 36px 0 12px; padding-top: 16px; border-top: 1px solid var(--fg-faint); color: var(--fg); font-weight: 500; }
.dm-doc > h4:first-child { border-top: 0; padding-top: 0; }
.dm-doc h3 { margin-top: 32px; }
/* notes stand apart from the steps */
.dm-doc blockquote { margin: 20px 0; padding: 12px 16px; border: 1px solid var(--fg-faint); border-left: 2px solid var(--fg); color: var(--fg); }
.dm-doc blockquote p { margin-bottom: 8px; }
.dm-faq__a-inner { padding-top: 4px; padding-bottom: 24px; }
.dm-faq__q { padding-top: 16px; padding-bottom: 16px; }
.t-row { padding-top: 14px; padding-bottom: 14px; }
.t-rows--static .t-row { padding-top: 16px; padding-bottom: 16px; }
.dm-sc__text { padding: 20px; }
.dm-sc__text p { margin: 0 0 14px; }

/* Stock page titles (cart, reviews, legal, blog) */
h1.sa-section-title, .sa-section-title { font-size: var(--fs-page) !important; font-weight: 500 !important; line-height: 1.3 !important; text-transform: lowercase; }
h1.sa-section-title::before { content: '~$ '; color: var(--ok); }
.sa-section-eyebrow { font-size: var(--fs-label) !important; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim) !important; }
.sa-section-subtitle { color: var(--fg-dim) !important; font-size: var(--fs-body) !important; }

/* ── 8. Products / status extras ────────────────────────────────────────── */
.t-row .t-tag { font-size: var(--fs-label); }

/* ── 9. Product page ────────────────────────────────────────────────────── */

.dm-sc__text { position: absolute; inset: 0; overflow-y: auto; padding: 20px; color: var(--fg-text); scrollbar-width: thin; }
.dm-sc__text > :first-child { margin-top: 0; }

/* STELLAR product page — split showcase (design: C:\claude\stellar_product_page_layouts.html, a).
   Media + thumbnails left, buy column right, content tabs underneath. The game's colour (--sp-g)
   marks what's chosen; everything else is dashed hairlines. Canvases: product.js. */
.sp { --sp-g: #7b86ff; --sp-g-rgb: 123, 134, 255; --sp-ok: #39ff7a; --sp-line: var(--fg-faint); }   /* --sp-g / --sp-g-rgb: the game colour, set inline by page-product.njk */
.sp-crumb { margin: 0; font-size: var(--fs-label); color: var(--fg-dim); letter-spacing: 0.02em; }
.sp-crumb a { color: inherit; text-decoration: none; }
.sp-crumb a:hover { color: var(--fg); }
.sp-crumb .sp-crumb__game { color: var(--sp-g); }
.sp-crumb b { font-weight: 400; color: var(--fg-text); }

.sp-top { display: grid; gap: 32px; margin-top: 20px; }
@media (min-width: 980px) {
  .sp-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .sp-top--solo { grid-template-columns: minmax(0, 560px); }   /* no images: the buy column alone */
}

/* media window: one image at a time, click to zoom 2.5× */
.sp-gallery { min-width: 0; }
.sp-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px dashed var(--sp-line); background: var(--bg); cursor: zoom-in; touch-action: pan-y; }
.sp-media.is-zoomed { cursor: zoom-out; touch-action: none; }
.sp-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none; user-select: none;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: opacity var(--t-ui) var(--ease-in), transform 320ms var(--ease-in);
}
.sp-media img.is-on { opacity: 1; }
.sp-media.is-zoomed img.is-on { transform: scale(2.5); transition: opacity var(--t-ui) var(--ease-in), transform 320ms var(--ease-in), transform-origin 80ms linear; }
.sp-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }   /* five slots, more wrap */
.sp-th {
  position: relative; height: 60px; padding: 6px; border: 1px dashed var(--sp-line);
  background: var(--bg) center / cover no-repeat; color: var(--fg-dim);
  font: 400 9px/1 var(--ff); letter-spacing: 0.14em; text-transform: uppercase;
  display: flex; align-items: flex-end; cursor: pointer; transition: border-color var(--t-hover) var(--ease-in);
}
.sp-th[style]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.25) 60%); transition: opacity var(--t-hover) var(--ease-in); }
.sp-th span { position: relative; }
.sp-th:hover { border-color: var(--fg-dim); }
.sp-th.is-on { border: 1px solid var(--sp-g); color: #fff; }
.sp-th.is-on[style]::before { opacity: 0.4; }

/* buy column */
.sp-info { min-width: 0; }
.sp-gm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.sp-gm__game { color: var(--sp-g); }
.sp-gm__st { padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); color: var(--sc); text-decoration: none; cursor: help; }
.sp-gm__st:hover { border-color: var(--sc); }
.sp-title { margin: 12px 0 0; font-size: 30px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: 0.03em; color: var(--fg); }
.sp-desc { margin: 12px 0 0; max-width: 46ch; font-size: 12px; line-height: 1.85; color: var(--fg-dim); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sp-lab { margin: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); }

/* the SellAuth form inside: only the rows, total and buttons show; its own labels,
   rules and the quantity stepper are hidden (licences are bought one at a time) */
.sp-form { margin-top: 26px; }
.sp-form form .border-b { border: 0 !important; padding-bottom: 0 !important; }
.sp-form form > div > div:has(> .op) { margin-bottom: 0 !important; }
.sp-form form > div > div:has(> .op) > label { display: none; }
.sp-form form > div > div:has(.input-stepper) { display: none; }

/* orbit plan picker (product.js draws the canvas; the radios are hidden but real) */
.op { position: relative; margin-top: 10px; }
.op-canvas { display: block; width: 100%; height: 240px; }
@media (max-width: 639.98px) { .op-canvas { height: 200px; } }
.op:has(input:focus-visible) .op-canvas {   /* keyboard only, not after a click */ outline: 1px dashed var(--fg-faint); outline-offset: 4px; }
.op-options { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.op-readout { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 12px; }
.op-price { font-size: 32px !important; font-weight: 400 !important; line-height: 1.1; color: var(--fg) !important; font-variant-numeric: tabular-nums; }
.op-len { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sp-g); }

.sp-tot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.sp-price { font-size: 32px !important; font-weight: 400 !important; line-height: 1.1; color: var(--fg) !important; font-variant-numeric: tabular-nums; }

.sp-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sp-buy, .sp-add { font-family: var(--ff); text-transform: uppercase; user-select: none; cursor: pointer; }
.sp-buy {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 58px; padding: 0 22px; overflow: hidden;
  border: 1px solid var(--sp-g); background: none; color: var(--fg);
  font-size: 14px; letter-spacing: 0.16em;
}
.sp-buy canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sp-buy > span { position: relative; z-index: 1; }
.sp-buy__ar { transition: transform 300ms steps(3); }
.sp-buy:hover:enabled .sp-buy__ar { transform: translateX(6px); }
.sp-buy:disabled { cursor: not-allowed; opacity: 0.35; }
.sp-add {
  --a: var(--fg-dim); --b: var(--fg-text); --c: var(--fg-faint);
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px;
  border: 1px dashed var(--fg-faint); background: none; color: var(--fg-text);
  font-size: 12px; letter-spacing: 0.14em; transition: border-color var(--t-hover), color var(--t-hover);
}
.sp-add .sp-px { width: 18px; height: 18px; }
.sp-add:hover:enabled { border-color: var(--fg-dim); color: var(--fg); --a: var(--fg-text); --b: var(--fg); }
.sp-add.is-ok { border: 1px solid var(--sp-ok); color: var(--sp-ok); --a: var(--sp-ok); --b: #fff; --c: #14702f; }
.sp-add:disabled { cursor: not-allowed; opacity: 0.35; }
.sp-form .bg-error\/10 { margin-top: 14px; }

.sp-px { display: block; flex: none; }
.sp-px .a { fill: var(--a, currentColor); }
.sp-px .b { fill: var(--b, currentColor); }
.sp-px .c { fill: var(--c, currentColor); }

.sp-restock { display: block; margin-top: 14px; font-size: var(--fs-label); color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); }
.sp-notes { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 0; font-size: 11px; color: var(--fg-dim); }
.sp-notes li { display: flex; align-items: center; gap: 10px; }
.sp-notes .sp-px { width: 13px; height: 13px; }
.sp-notes a { color: inherit; text-decoration: none; }
.sp-notes a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* content tabs */
.sp-more { margin-top: 46px; }
.sp-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px dashed var(--sp-line); }
.sp-tabs button { position: relative; padding: 0 0 12px; border: 0; background: none; color: var(--fg-dim); font: 400 11px/1.4 var(--ff); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: color var(--t-hover) var(--ease-in); }
.sp-tabs button:hover { color: var(--fg); }
.sp-tabs button.is-on { color: var(--fg); }
.sp-tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--sp-g); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-in); }
.sp-tabs button.is-on::after { transform: scaleX(1); }
.sp-panes .dm-sc__text { position: static; inset: auto; overflow: visible; padding: 20px 0 0; max-width: 72ch; font-size: 13px; }
.sp-panes .dm-sc__text.dm-spec, .sp-panes .sp-steps { max-width: none; }
.sp-panes a:not(.sp-guide) { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); }
.sp-guide { color: var(--sp-g); text-decoration: none; }
.sp-guide:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Content panes: one colour, the game's, for structure (labels, numbers, the lead
   line, markers); white for what matters; dim for the rest. No icons. */
.sp-panes a:not(.sp-guide) { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--sp-g-rgb), 0.6); transition: color var(--t-hover) var(--ease-in); }
.sp-panes a:not(.sp-guide):hover { color: var(--sp-g); }
.sp-panes .editor :is(h1, h2, h3, h4) { margin: 28px 0 10px; color: var(--sp-g); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.sp-panes .editor li::marker { color: var(--sp-g); }
.sp-panes .editor :is(strong, b) { color: var(--fg); font-weight: 500; }

/* details: the first paragraph is the lead, the rest reads quieter */
.sp-details > p { color: var(--fg-dim); }
.sp-details > p:first-child { margin-bottom: 22px; padding-left: 16px; border-left: 2px solid var(--sp-g); color: var(--fg); font-size: 15px; line-height: 1.7; }

/* features: game-coloured group labels, a square marker that lights on hover */
.sp-panes .dm-spec__group + .dm-spec__group { margin-top: 36px; }
.sp-panes .dm-spec__head { padding-bottom: 8px; border-bottom: 1px solid rgba(var(--sp-g-rgb), 0.35); color: var(--sp-g); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.sp-panes .dm-spec__head > span:last-child { color: var(--fg-dim); letter-spacing: 0.08em; }
.sp-panes .dm-spec__list li { position: relative; padding: 12px 12px 12px 20px; border-bottom: 1px dashed var(--sp-line); transition: background-color var(--t-hover) var(--ease-in); }
.sp-panes .dm-spec__list li::before { content: ''; position: absolute; left: 4px; top: 19px; width: 6px; height: 6px; background: rgba(var(--sp-g-rgb), 0.45); transition: background-color var(--t-hover) var(--ease-in); }
.sp-panes .dm-spec__list li:hover { background: rgba(var(--sp-g-rgb), 0.05); }
.sp-panes .dm-spec__list li:hover::before { background: var(--sp-g); }
.sp-panes .dm-spec__name { color: var(--fg); font-weight: 500; }
.sp-panes .dm-spec__desc { margin-top: 3px; color: var(--fg-dim) !important; font-size: 12px; line-height: 1.65; }

/* requirements: label in the game's colour, value in white */
.sp-panes .dm-spec__reqs { border-top: 1px solid rgba(var(--sp-g-rgb), 0.35); }
.sp-panes .dm-spec__reqs > div { padding: 12px 0; border-bottom: 1px dashed var(--sp-line); }
.sp-panes .dm-spec__reqs dt { color: var(--sp-g); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.9; }
.sp-panes .dm-spec__reqs dd { color: var(--fg); }
.sp-panes .dm-spec__note { margin-top: 18px; padding: 10px 14px; border-left: 2px solid var(--sp-g); background: rgba(var(--sp-g-rgb), 0.05); color: var(--fg-text); }
.sp-panes .dm-spec__note:has(> a:only-child) { padding: 0; border: 0; background: none; }
.sp-panes .dm-spec__note > a:only-child { color: var(--sp-g); text-decoration: none; }
.sp-panes .dm-spec__note > a:only-child::after { content: ' \2192'; }

/* delivery: three numbered steps side by side */
.sp-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(var(--sp-g-rgb), 0.35); }
.sp-steps li { padding: 18px 20px 18px 0; }
.sp-steps li + li { padding-left: 20px; border-left: 1px dashed var(--sp-line); }
.sp-steps__n { display: block; color: var(--sp-g); font-size: 28px; line-height: 1; font-variant-numeric: tabular-nums; }
.sp-steps b { display: block; margin-top: 12px; color: var(--fg); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.sp-steps p { margin: 8px 0 0; color: var(--fg-dim); font-size: 12px; line-height: 1.75; }
.sp-panes .rounded-card.p-5 { border-style: dashed !important; }
@media (max-width: 759.98px) {
  .sp-steps ol { grid-template-columns: 1fr; }
  .sp-steps li, .sp-steps li + li { padding: 16px 0; border-left: 0; }
  .sp-steps li + li { border-top: 1px dashed var(--sp-line); }
}

@media (max-width: 639.98px) {
  .sp-title { font-size: 24px !important; }
  .sp-th { height: 48px; }
  .sp-tabs { flex-wrap: nowrap; gap: 0 20px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .sp-tabs::-webkit-scrollbar { display: none; }
  .sp-tabs button { flex: none; }
  .sp-tabs button { padding-bottom: 10px; }
  .sp-tabs button::after { bottom: 0; }   /* the scrolling bar would clip it at -1px */
}

/* Specs (features / requirements) */
.dm-spec__group + .dm-spec__group { margin-top: 24px; }
.dm-spec__head { display: flex; justify-content: space-between; margin: 0; padding-bottom: 6px; border-bottom: 1px solid var(--fg-faint); color: var(--fg); }
.dm-spec__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.dm-spec__list li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--fg-faint); }
.dm-spec__name { color: var(--fg); }
.dm-spec__desc { color: var(--fg-dim); }
.dm-spec__reqs { margin: 0; border-top: 1px solid var(--fg-faint); }
.dm-spec__reqs > div { display: grid; grid-template-columns: minmax(110px, 0.32fr) minmax(0, 1fr); gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--fg-faint); }
.dm-spec__reqs dd { margin: 0; color: var(--fg); }
.dm-spec__note { margin: 12px 0 0; color: var(--fg-dim); }
.dm-spec__note a { color: var(--fg); text-decoration: underline; }
@media (max-width: 639.98px) {
  .dm-spec__list { grid-template-columns: 1fr; }
  .dm-spec__reqs > div { grid-template-columns: 1fr; gap: 2px; }
}

/* The SellAuth form, quieted (other product layouts) */
.dm-pp form label.text-sm, .dm-pp form > div > label { font-size: var(--fs-label) !important; font-weight: 400 !important; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim) !important; }

/* Variant rows (other product layouts) */
.dm-variant { width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--fg-faint); background: transparent; text-align: left; cursor: pointer; }
.dm-variant::before { content: '[ ]'; margin-right: 8px; color: var(--fg-dim); }
.dm-variant.is-active::before { content: '[x]'; color: var(--fg); }

.dm-variant:disabled { opacity: 0.4; cursor: not-allowed; }

/* Buy buttons (other product layouts): plain text. Buy now is the outlined one with an
   arrow that slides on hover; add to cart is quieter. No fills. */
body.t-body .dm-pp .sa-add-to-cart:not(:hover) { border-color: var(--fg-faint) !important; }   /* beats the stock accent-button outline */
.dm-pp .sa-add-to-cart, .dm-pp .dm-buy-now {
  min-height: 44px;
  padding: 0 14px !important;
  justify-content: space-between !important;
  border: 1px solid var(--fg-faint) !important;
  background: transparent !important;
  color: var(--fg-dim) !important;
  font: 500 var(--fs-label)/1.2 var(--ff) !important;
  letter-spacing: var(--track) !important;
  text-transform: uppercase;
  transition: border-color var(--t-hover) var(--ease-in), color var(--t-hover) var(--ease-in);
}
.dm-pp .sa-add-to-cart svg, .dm-pp .dm-buy-now svg { display: none; }

.dm-pp .dm-buy-now::after { content: '\2192'; font-size: var(--fs-body); transition: transform var(--t-ui) var(--ease-in); }
.dm-pp .sa-add-to-cart::after { content: '+'; font-size: var(--fs-body); transition: transform var(--t-ui) var(--ease-in); }
.dm-pp .dm-buy-now:hover:enabled::after { transform: translateX(6px); }
.dm-pp .sa-add-to-cart:hover:enabled::after { transform: rotate(90deg); }
.dm-pp .sa-add-to-cart:hover:enabled { border-color: var(--fg) !important; color: var(--fg) !important; }
.dm-pp .dm-buy-now:hover:enabled { background: var(--fg-ghost) !important; }
.dm-pp .sa-add-to-cart:active:enabled, .dm-pp .dm-buy-now:active:enabled { transform: translateY(1px); }
.dm-pp .sa-add-to-cart:disabled, .dm-pp .dm-buy-now:disabled { opacity: 0.35; }

/* Quantity: label left, "−  1  +" right, no box */
.input-stepper { border: 0 !important; background: transparent !important; }
.input-stepper button { color: var(--fg-dim); }
.input-stepper button:hover:not(:disabled) { color: var(--fg); }

/* ── 10. Cart drawer, toasts, modals ────────────────────────────────────── */
.dm-cart { background: var(--bg) !important; color: var(--fg); border-inline-start: 1px solid var(--fg-faint) !important; }
.dm-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 16px 20px; border-bottom: 1px solid var(--fg-faint); }
.dm-cart__title { margin: 0; font-size: var(--fs-body); font-weight: 500; }
.dm-cart__title > span[aria-hidden] { color: var(--fg-dim); }
.dm-cart__count { color: var(--fg-dim); font-weight: 400; }
.dm-cart__body { padding: 16px 20px; }
.dm-cart__empty { padding: 32px 0; }
.dm-cart__empty-text { margin: 0 0 16px; color: var(--fg-dim); }
.dm-cart__empty .t-btn { margin-left: -6px; }
.dm-cart__item { padding: 12px 0; border-bottom: 1px solid var(--fg-faint); }
.dm-cart__foot { display: flex; flex-direction: column; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--fg-faint); }

.t-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.t-toast { pointer-events: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 12px; border: 1px solid var(--fg-faint); background: var(--bg); }
.t-toast__msg { margin: 0; }
.t-toast__tag { font-weight: 500; }
.t-toast.is-err { border-color: var(--fg); }
.t-toast.is-err .t-toast__tag { background: var(--fg); color: var(--bg); padding: 0 2px; }
.t-toast__x { flex: none; padding: 0 2px; border: 0; background: none; color: var(--fg-dim); font: inherit; cursor: pointer; }
.t-toast__x:hover { background: var(--fg-ghost); color: var(--fg); }

/* Modal panels (login, group, ticket, payout, 2FA) */
.shadow-modal, [role="dialog"] .rounded-card { background-color: var(--bg) !important; border: 1px solid var(--fg-faint) !important; }

/* ── 11. Stock templates + customer portal ──────────────────────────────── */
/* Inputs: no boxes, a 1px bottom border that brightens on focus */
body.t-body .input,
body.t-body input[type="text"], body.t-body input[type="email"], body.t-body input[type="password"],
body.t-body input[type="number"], body.t-body input[type="search"], body.t-body input[type="url"],
body.t-body select, body.t-body textarea {
  border: 0 !important;
  border-bottom: 1px solid var(--fg-faint) !important;
  background-color: transparent !important;
  color: var(--fg) !important;
  font-family: var(--ff) !important;
  caret-color: var(--fg);
}
body.t-body textarea { border: 1px solid var(--fg-faint) !important; }
body.t-body .input:focus, body.t-body input:focus, body.t-body select:focus, body.t-body textarea:focus { border-color: var(--fg) !important; outline: none !important; }
body.t-body .input-stepper input { border: 0 !important; }
body.t-body ::placeholder { color: var(--fg-dim) !important; opacity: 1; }
body.t-body select option { background: var(--bg); color: var(--fg); }

/* Filled accent buttons → outlined; hover inverts */
body.t-body .rounded-btn.bg-accent-500 { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--fg) !important; font-family: var(--ff); font-size: var(--fs-label) !important; font-weight: 500 !important; letter-spacing: var(--track); text-transform: uppercase; }
body.t-body .rounded-btn.bg-accent-500:hover:not(:disabled) { background: var(--fg-ghost) !important; }
body.t-body .rounded-btn:active:not(:disabled) { transform: translateY(1px); }

/* Badges: bracketed text, no fills */
body.t-body .rounded-badge { background: transparent !important; border: 0 !important; padding-inline: 0 !important; color: var(--fg) !important; font-size: var(--fs-label) !important; letter-spacing: var(--track); text-transform: uppercase; }
body.t-body .rounded-badge::before { content: '['; color: var(--fg-dim); }
body.t-body .rounded-badge::after { content: ']'; color: var(--fg-dim); }

/* Cards in stock pages: hairline boxes on the page background */
body.t-body .rounded-card.border { border-color: var(--fg-faint) !important; background-color: var(--bg) !important; }

/* Tinted tiles and backgrounds lose their tint */
body.t-body [class*="bg-accent-500\/"], body.t-body [class*="bg-t-primary\/"], body.t-body [class*="bg-success\/"], body.t-body [class*="bg-warning\/"], body.t-body [class*="bg-error\/"] { background-color: transparent !important; }

/* Links in stock pages */
body.t-body a.text-accent-500 { color: var(--fg) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); }

/* Breadcrumbs: a path line */
.sa-breadcrumbs { padding: 0 0 24px !important; margin: 0 !important; }
.sa-breadcrumbs ol { font-size: var(--fs-label) !important; color: var(--fg-dim) !important; }
.sa-breadcrumbs svg { display: none; }

/* Tables (portal) */
body.t-body table th { font-size: var(--fs-label) !important; font-weight: 400 !important; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim) !important; }
body.t-body table tr { border-color: var(--fg-faint) !important; }
body.t-body tbody tr:hover { background-color: var(--fg-ghost); }

/* Customer portal: header + dashboard blocks */
.dm-portal__head { margin-bottom: 40px; }
.dm-portal__title { margin: 0; font-size: var(--fs-page); font-weight: 500; line-height: 1.3; text-transform: lowercase; }
.dm-portal__title::before { content: '~$ '; color: var(--ok); }
.sa-customer-header-subtitle { margin-top: 6px !important; font-size: var(--fs-body) !important; color: var(--fg-dim) !important; }
.dm-portal__avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--fg-faint); font-weight: 500; text-transform: uppercase; }
/* no decorative icons: sidebar links and stat tiles are text only (menu buttons keep theirs) */
.sa-customer-sidebar-link svg,
.sa-page-customer-dashboard-item svg, .sa-page-customer-reseller-stat svg, .sa-page-customer-affiliate-item svg { display: none !important; }
.sa-page-customer-dashboard-item .bg-accent-500\/10:empty, .sa-page-customer-dashboard-item div:has(> svg:only-child) { display: none !important; }
.sa-customer-sidebar-link { background: transparent !important; color: var(--fg-dim) !important; }
.sa-customer-sidebar-link:hover { color: var(--fg) !important; }
.sa-customer-sidebar-link::before { content: '\00a0'; width: 1ch; margin-right: 8px; color: var(--fg); }
/* the current page gets the same block cursor as the main menu — no fill */
.sa-customer-sidebar-link.is-active::before { content: '\2588'; }
.sa-customer-sidebar-link.is-active { color: var(--fg) !important; font-weight: 500; }
.sa-page-customer-dashboard-item p.text-2xl, .sa-page-customer-reseller-stat p.text-2xl, .sa-page-customer-affiliate-item p.text-2xl { font-size: var(--fs-title) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.sa-page-customer-dashboard-item p.text-sm, .sa-page-customer-reseller-stat p.text-sm, .sa-page-customer-affiliate-item p.text-sm { font-size: var(--fs-label) !important; letter-spacing: var(--track); text-transform: uppercase; color: var(--fg-dim) !important; }

.dm-dash__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 32px; border-top: 1px solid var(--fg-faint); border-bottom: 1px solid var(--fg-faint); }
.dm-dash__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 0; color: var(--fg-dim); text-decoration: none; }
.dm-dash__link + .dm-dash__link { padding-left: 12px; border-left: 1px solid var(--fg-faint); }
.dm-dash__link:hover { background: var(--fg-ghost); color: var(--fg); }
.dm-dash__link svg, .dm-dash__step svg { display: none; }
.dm-dash__link::after, .dm-dash__step::after { content: '\2192'; }
.dm-dash__block { margin-top: 48px; min-width: 0; }
.dm-dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--fg-faint); }
.dm-dash__head h2 { margin: 0; color: var(--fg); }
.dm-dash__head a { color: var(--fg-dim); text-decoration: none; }
.dm-dash__head a:hover { color: var(--fg); }
.dm-dash__rows { list-style: none; margin: 0; padding: 0; }
.dm-dash__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 12px 0; border-bottom: 1px solid var(--fg-faint); }
.dm-dash__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-width: 0; }
.dm-dash__name { margin: 0; color: var(--fg); font-size: var(--fs-body); font-weight: 500; }
.dm-dash__plan { margin-left: 8px; }
.dm-dash__status i { display: none; }
.dm-dash__status::before { content: '['; color: var(--fg-dim); }
.dm-dash__status::after { content: ']'; color: var(--fg-dim); }
.dm-dash__status { color: var(--fg) !important; }
.dm-dash__acts { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dm-dash__acts a, .dm-dash__meta a, .dm-dash__empty a, .dm-dash__more { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg-dim); }
.dm-dash__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; }
.dm-dash__empty { margin: 12px 0 0; color: var(--fg-dim); }
.dm-dash__step { text-decoration: none; flex-wrap: nowrap; justify-content: flex-start; color: var(--fg-dim); }
.dm-dash__step .dm-dash__name { flex: 1; color: inherit; }
.dm-dash__step:hover { color: var(--fg); }
.dm-dash__n { width: 32px; }
.dm-dash__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.dm-dash__title { margin: 16px 0 6px; color: var(--fg); font-size: var(--fs-body); font-weight: 500; }
.dm-dash__text { margin: 0 0 16px; max-width: 420px; color: var(--fg-dim); }
.dm-dash__more { display: inline-block; margin-left: 16px; }

@media (max-width: 767.98px) {
  .dm-dash__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-dash__link:nth-child(3) { padding-left: 0; border-left: 0; }
  .dm-dash__link:nth-child(n+3) { border-top: 1px solid var(--fg-faint); }
  .dm-dash__duo { grid-template-columns: 1fr; }
}

/* Phones: rows stack (number · name · arrow, description underneath) */
@media (max-width: 639.98px) {
  :root { --fs-hero: 28px; --fs-page: 24px; }
  .t-row, .t-rows--static .t-row { grid-template-columns: 28px minmax(0, 1fr) 16px; column-gap: 10px; row-gap: 2px; padding: 10px 4px; }
  .t-row__c { display: none; }
  .t-row__c:has(.t-tag) { display: block; grid-column: 2 / 3; }   /* status stays visible on phones */
  .t-rows__head { display: none; }
  .t-row__d { grid-column: 2 / 3; }
  .t-row__go { grid-row: 1; grid-column: 3; }
  .t-rows--static .t-row__d { grid-column: 2 / 4; }
  .sa-page-status .t-row { grid-template-columns: 28px minmax(0, 1fr) auto 16px; padding: 12px 4px; }
  .sa-page-status .t-row__d { grid-column: 3; grid-row: 1; }
  .sa-page-status .t-row__go { grid-column: 4; }
  .t-sum { gap: 20px 40px; }
  .t-cards { gap: 16px; }
  .t-sum dd { font-size: var(--fs-page); }
  .t-head__title { white-space: normal; }
  .t-sec { margin-top: 80px; }
  .dm-faq__q { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 10px; }
  .dm-faq__a-inner { padding-left: calc(28px + 10px + 8px); }
}

/* ── 12. Motion states (driven by motion.js) ────────────────────────────── */
/* Section reveal: a soft fade-up (8px) when a section first comes into view.
   html.t-js is set in <head>; html.t-nomotion (set if motion.js never starts)
   shows everything. */
.t-js:not(.t-nomotion) [data-t-reveal]:not(.is-in),
.t-js:not(.t-nomotion) [data-dm-reveal]:not(.is-in) { opacity: 0; transform: translateY(8px); }
[data-t-reveal].is-in, [data-dm-reveal].is-in {
  transition: opacity 600ms var(--ease-in), transform 600ms var(--ease-in);
  transition-delay: var(--t-delay, 0ms);
}

/* Caret: hard on/off blink; solid while the visitor is typing */
.t-caret { animation: t-blink 1.1s steps(1) infinite; }
.t-caret.is-solid { animation: none; }
@keyframes t-blink { 50% { opacity: 0; } }

/* Decode-on-hover: fixed-width label so nothing shifts */
.t-nav__label { white-space: pre; }

@keyframes t-line-in { from { opacity: 0; transform: translateY(4px); } }

/* Toasts slide up */
.t-toast { animation: t-line-in var(--t-ui) var(--ease-in); }

/* Crosshair (desktop, fine pointer): two ghost lines over the content area */
.t-cross { position: fixed; top: calc(var(--gap) + var(--top-h)); bottom: calc(var(--gap) + var(--keys-h)); left: calc(var(--win-l) + var(--side-w)); right: var(--win-l); z-index: 20; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity var(--t-ui) var(--ease-in); }
.t-cross.is-on { opacity: 1; }
.t-cross__x, .t-cross__y { position: absolute; left: 0; top: 0; background: var(--fg-ghost); will-change: transform; }
.t-cross__x { width: 100%; height: 1px; }
.t-cross__y { width: 1px; height: 100%; }

/* Theme switch: circular reveal (View Transitions); the clip is animated in motion.js */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* Boot sequence (first visit per session): a black screen above everything.
   It's in the DOM only as an overlay — the page underneath is already laid out. */
.t-bootscreen { display: none; }
html.t-booting .t-bootscreen {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  cursor: default;
}
.t-bootscreen__in { position: absolute; left: calc(var(--win-l) + var(--side-w) + 64px); top: calc(var(--gap) + var(--top-h) + 56px); font-size: var(--fs-body); line-height: 1.8; }
.t-bootscreen__line { display: block; white-space: pre; }
.t-bootscreen__ts { color: var(--fg-dim); }
.t-bootscreen .t-caret { animation: none; vertical-align: -2px; }
/* after the boot the window opens from its centre line */
html.t-booting .t-win { clip-path: inset(50% 0 50% 0); }
html.t-booted .t-win { transition: clip-path 400ms var(--ease-in); }
@media (max-width: 859.98px) { .t-bootscreen__in { left: 16px; top: calc(var(--bar-h) + 32px); } }

/* ── 13. Reduced motion: everything rests; reveals become a plain fade ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .t-js:not(.t-nomotion) [data-t-reveal]:not(.is-in), .t-js:not(.t-nomotion) [data-dm-reveal]:not(.is-in) { transform: none; opacity: 0; }
  [data-t-reveal].is-in, [data-dm-reveal].is-in { animation: t-fade var(--t-ui) linear; animation-duration: var(--t-ui) !important; }
  a.t-row:hover .t-row__b, .t-nav__link:hover .t-nav__label { transform: none; }
  .t-caret { animation: none; }
  .t-cross { display: none; }
  html.t-booting .t-bootscreen { display: none; }
}
@keyframes t-fade { from { opacity: 0; } }

/* Client area + stock pages: current-page markers and headers follow the site */
.t-btn.is-current { color: var(--fg); }
.t-btn.is-current::before { content: '\2588'; margin-right: 6px; }
.sa-section-header { text-align: left !important; align-items: flex-start !important; margin-inline: 0 !important; }
/* Page titles: no subtitles, 40px between title and content on every page */
main .sa-section-header { margin-bottom: 40px !important; }
.sa-section-subtitle, .sa-customer-header-subtitle { display: none !important; }
.sa-section-header > * { margin-inline: 0 !important; }
/* review sort links: words, the current one underlined */
.sa-page-feedback-link { padding: 4px 8px !important; border: 0 !important; background: transparent !important; color: var(--fg-dim) !important; font-size: var(--fs-label) !important; font-weight: 400 !important; letter-spacing: var(--track); text-transform: uppercase; }
.sa-page-feedback-link:hover { color: var(--fg) !important; }
.sa-page-feedback-link.bg-accent-500 { color: var(--fg) !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 6px; }

/* Orbital hero buttons (assets/orbital.js draws the canvases in theme colours).
   Centred under the intro, side by side; they shrink to fit on narrow screens. */
.t-hero__actions.orb-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: none; margin: 48px 0 0; overflow-x: clip; }
.orb-btn {
  position: relative;
  display: block;
  width: min(440px, 100%);
  aspect-ratio: 320 / 250;
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* canvases bleed past the button (PX/PY in orbital.js: 100/320, 50/250) so the
   scanner tags have room; they never take clicks */
/* side by side: both shrink evenly instead of wrapping; phones stack them */
@media (min-width: 640px) { .t-hero__actions.orb-row { flex-wrap: nowrap; } .orb-btn { flex: 0 1 440px; min-width: 0; } }
.orb-btn canvas { position: absolute; top: -20%; bottom: -20%; left: -31.25%; right: -31.25%; width: 162.5%; height: 140%; pointer-events: none; }
.orb-btn .orb-front { z-index: 2; pointer-events: none; }
/* label: same type as .t-btn, a touch larger */
.orb-btn .orb-label {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--fg);
  font: 500 13px/1.2 var(--ff);
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  transition: letter-spacing var(--t-reveal) var(--ease-in);
}
.orb-btn .orb-label b { font-weight: 500; color: var(--fg-dim); transition: color var(--t-ui) var(--ease-in); }
.orb-btn:hover .orb-label, .orb-btn:focus-visible .orb-label { letter-spacing: 0.16em; }
.orb-btn:hover .orb-label b, .orb-btn:focus-visible .orb-label b { color: var(--fg); }
.orb-btn:focus-visible { outline: 1px dashed var(--fg-dim); outline-offset: 4px; }

/* ── Community: "Join the community", orbit layout ─────────────────────────
   From C:\claude\community-section.html (assets/community.js draws the moon,
   the orbit and the CTA, and runs the four card demos). Kept dark in both themes:
   it's a night-sky scene. */
/* ---------- Section ---------- */
.cm {
  --bl: #5865f2; --bl2: #a3aaff; --bl-soft: #7b86ff;
  max-width: 900px;
  margin: 0 auto;
  background: #000;
  color: #ccc;
  font-family: inherit;
}

.cm-tag { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; color: #666; letter-spacing: .08em; margin-bottom: 28px; }
.cm-tag .cm-live { color: var(--bl-soft); }
.cm-tag .cm-dot { display: inline-block; width: 6px; height: 6px; background: var(--bl); margin-right: 8px; vertical-align: 1px; animation: cm-blink 1.6s steps(1) infinite; }
@keyframes cm-blink { 50% { opacity: .25; } }

/* Orbit layout */
.cm-orbit { position: relative; display: grid; grid-template-columns: 1fr 210px 1fr; gap: 34px 20px; align-items: center; padding: 10px 0; }
.cm-orbit-path { position: absolute; left: -6px; top: -14px; width: calc(100% + 12px); height: calc(100% + 28px); pointer-events: none; display: block; }
.cm-center { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; position: relative; z-index: 1; }
.cm-center canvas { width: 210px; height: 170px; display: block; }
.cm-center h2 { margin: 0; font-size: 17px; font-weight: 500; color: #fff; letter-spacing: .06em; line-height: 1.35; text-shadow: 2px 2px 0 var(--bl); }
.cm-center p { margin: 0; font-size: 11px; color: #999; line-height: 1.7; }
.cm-center p b { color: var(--bl2); font-weight: 400; }

.cm-card { position: relative; z-index: 1; background: #000; display: flex; flex-direction: column; padding: 6px 0; }
.cm-card[data-pos="1"] { grid-column: 1; grid-row: 1; }
.cm-card[data-pos="2"] { grid-column: 3; grid-row: 1; }
.cm-card[data-pos="3"] { grid-column: 1; grid-row: 2; }
.cm-card[data-pos="4"] { grid-column: 3; grid-row: 2; }

.cm-ch { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #fff; letter-spacing: .08em; }
.cm-ch svg { width: 24px; height: 24px; display: block; }
.cm-ch .cm-num { font-size: 10px; color: #555; margin-left: auto; }
.cm svg .a { fill: var(--a); } .cm svg .b { fill: var(--b); } .cm svg .c { fill: var(--c); }

.cm-box { margin-top: 14px; height: 116px; border: 1px dashed #262626; background: #000; position: relative; overflow: hidden; font-size: 12px; padding: 12px 14px; box-sizing: border-box; }
.cm-cap { margin-top: 12px; font-size: 12px; color: #888; line-height: 1.6; }

/* 01 status */
.cm-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed #161616; }
.cm-row:last-child { border-bottom: none; }
.cm-row .cm-game { color: #ddd; transition: color .3s; }
.cm-row.is-updating .cm-game { color: #ffd23f; }
.cm-pill { font-size: 10px; padding: 1px 6px; letter-spacing: .1em; border: 1px solid #39ff7a; color: #39ff7a; }
.cm-row.is-updating .cm-pill { border-color: #ffd23f; color: #ffd23f; }

/* 02 support */
.cm-msg { margin-bottom: 8px; line-height: 1.5; }
.cm-msg .cm-who { font-size: 10px; letter-spacing: .1em; margin-right: 10px; color: #666; }
.cm-msg .cm-who.team { color: #39ff7a; }
.cm-cur { display: inline-block; width: 7px; height: 12px; background: #aaa; vertical-align: -2px; margin-left: 2px; animation: cm-blink 1s steps(1) infinite; }

/* 03 announcements */
.cm-ann-ch { font-size: 10px; color: #555; letter-spacing: .1em; }
.cm-ann-title { font-size: 20px; color: #fff; margin-top: 12px; display: flex; align-items: center; gap: 12px; transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.cm-new { font-size: 10px; color: #39ff7a; border: 1px solid #39ff7a; padding: 1px 6px; letter-spacing: .1em; animation: cm-blink 1.2s steps(1) infinite; }
.cm-ann-sub { font-size: 11px; color: #666; margin-top: 10px; }

/* 04 players */
.cm-line { position: absolute; left: 14px; right: 14px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .4s cubic-bezier(.2,.8,.2,1), opacity .4s; }
.cm-line i { display: inline-block; width: 8px; height: 8px; margin-right: 10px; }
.cm-line .cm-name { font-size: 10px; letter-spacing: .1em; color: #666; margin-right: 10px; display: inline-block; width: 42px; }
.cm-typing { position: absolute; left: 14px; bottom: 8px; font-size: 10px; color: #555; }

/* CTA: e4 rays over the horizon */
.cm-cta-wrap { padding: 56px 0 20px; display: flex; justify-content: center; }
.cm-cta { position: relative; display: block; width: 600px; max-width: 100%; height: 140px; border: 1px solid #2a2a2a; overflow: hidden; color: #fff; text-decoration: none; transition: border-color .25s; -webkit-tap-highlight-color: transparent; }
.cm-cta canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cm-cta .cm-cta-text { position: absolute; left: 26px; top: 34px; z-index: 1; font-size: 18px; letter-spacing: .14em; }
.cm-cta .cm-arrow { color: var(--bl-soft); display: inline-block; transition: transform .3s steps(3); }
.cm-cta small { display: block; font-size: 10px; color: #666; letter-spacing: .14em; margin-top: 10px; }
.cm-cta:hover, .cm-cta:focus-visible { border-color: var(--bl); }
.cm-cta:hover .cm-arrow, .cm-cta:focus-visible .cm-arrow { transform: translateX(6px); }
.cm-cta:focus-visible { outline: 1px dashed #555; outline-offset: 4px; }

@media (max-width: 820px) {
  .cm-orbit { grid-template-columns: 1fr; gap: 30px; }
  .cm-orbit-path { display: none; }
  .cm-center { grid-column: 1; grid-row: auto; }
  .cm-card[data-pos] { grid-column: 1; grid-row: auto; }
  .cm-cta .cm-cta-text { font-size: 15px; left: 18px; }
}
.cm.t-sec { margin-top: 112px; }
/* four status rows fit the 116px card: tighter rows and pills than the design */
.cm-row { padding: 3px 0; line-height: 1.4; }
.cm-pill { line-height: 1.2; }
.cm-icon { display: block; }
/* Scaled up from the design: wider section, larger moon, type, icons and cards */
.cm { max-width: 1040px; }
.cm-orbit { grid-template-columns: 1fr 260px 1fr; gap: 44px 28px; }
.cm-center canvas { width: 260px; height: 210px; }
.cm-center h2 { font-size: 22px; }
.cm-ch { font-size: 15px; gap: 14px; }
.cm-ch svg { width: 28px; height: 28px; }
.cm-ch .cm-num { font-size: 11px; }
.cm-box { height: 136px; font-size: 13px; padding: 14px 16px; }
.cm-cap { font-size: 13px; }
.cm-pill, .cm-new, .cm-ann-ch, .cm-msg .cm-who, .cm-line .cm-name, .cm-typing { font-size: 11px; }
.cm-ann-title { font-size: 24px; }
.cm-ann-sub { font-size: 12px; }
.cm-line { left: 16px; right: 16px; font-size: 13px; }
.cm-line .cm-name { width: 48px; }
.cm-typing { left: 16px; }
.cm-cta-wrap { padding-top: 64px; }
.cm-cta { width: 720px; height: 164px; }
.cm-cta .cm-cta-text { left: 30px; top: 40px; font-size: 22px; }
.cm-cta small { font-size: 11px; margin-top: 12px; }
@media (max-width: 820px) { .cm-orbit { grid-template-columns: 1fr; } .cm-cta .cm-cta-text { font-size: 17px; } }

/* ── Connect Discord page ──────────────────────────────────────────────────
   From C:\claude\connect-discord.html (snippets/connect-discord.njk; animations
   and accordion in assets/connect.js). Dark in both themes like the community
   section. */
/* ---------- Page ---------- */
.cd { --bl: #5865f2; --bl2: #a3aaff; max-width: 960px; margin: 0 auto; padding: 44px 52px 60px; box-sizing: border-box; background: #000; color: #ccc; font-family: inherit; }

.cd-title { margin: 0; font-size: 26px; font-weight: 500; color: #fff; }
.cd-title .cd-prompt { color: #39ff7a; }
.cd-title .cd-cursor { display: inline-block; width: 12px; height: 22px; background: #fff; margin-left: 8px; vertical-align: -3px; animation: cd-blink 1s steps(1) infinite; }
@keyframes cd-blink { 50% { opacity: 0; } }

/* Link scene */
.cd-scene { position: relative; margin-top: 26px; height: 220px; }
.cd-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cd-end { position: absolute; top: 150px; font-size: 10px; letter-spacing: .2em; color: #666; }
.cd-end--you { left: 2%; }
.cd-end--srv { right: 2%; }
.cd-step { position: absolute; top: 150px; transform: translateX(-50%); text-align: center; font-size: 11px; letter-spacing: .08em; color: #555; white-space: nowrap; transition: color .3s; }
.cd-step b { display: block; margin: 0 auto 8px; width: 22px; height: 22px; line-height: 20px; border: 1px solid #333; font-weight: 400; color: #666; transition: all .3s; }
.cd-step.is-on { color: #fff; }
.cd-step.is-on b { border-color: var(--bl); color: #fff; background: var(--bl); }
.cd-step.is-done b { border-color: #39ff7a; color: #39ff7a; }

/* Tide button */
.cd-btn { position: relative; display: flex; align-items: center; justify-content: space-between; margin-top: 18px; height: 92px; padding: 0 30px; box-sizing: border-box; border: 1px solid var(--bl); color: #fff; text-decoration: none; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.cd-btn canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cd-btn .cd-label { position: relative; z-index: 1; font-size: 24px; letter-spacing: .12em; transition: letter-spacing .5s cubic-bezier(.2,.8,.2,1); }
.cd-btn .cd-arrow { position: relative; z-index: 1; font-size: 26px; transition: transform .3s steps(3); }
.cd-btn:hover .cd-label, .cd-btn:focus-visible .cd-label { letter-spacing: .15em; }
.cd-btn:hover .cd-arrow, .cd-btn:focus-visible .cd-arrow { transform: translateX(8px); }
.cd-btn:focus-visible { outline: 1px dashed #555; outline-offset: 4px; }

/* Questions */
.cd-faq-head { margin: 52px 0 14px; font-size: 11px; letter-spacing: .2em; color: #555; }
.cd-faq { max-width: none; }   /* dividers run the full width; answers keep their 600px reading width */
.cd-q { cursor: pointer; user-select: none; }
.cd-q + .cd-q { border-top: 1px dashed #181818; }
.cd-qh { display: flex; align-items: center; gap: 16px; padding: 14px 0; font-size: 13px; color: #ccc; transition: color .2s; background: none; border: 0; width: 100%; text-align: left; font: inherit; font-size: 13px; cursor: pointer; }
.cd-qh svg { width: 18px; height: 18px; display: block; flex: none; }
.cd svg .a { fill: var(--a); } .cd svg .b { fill: var(--b); } .cd svg .c { fill: var(--c); }
.cd-q:hover .cd-qh, .cd-q.is-open .cd-qh { color: #fff; }
.cd-qh:focus-visible { outline: 1px dashed #555; outline-offset: 2px; }
.cd-qa { overflow: hidden; max-height: 0; transition: max-height .35s cubic-bezier(.2,.8,.2,1); }
.cd-qa div { padding: 0 0 18px 34px; font-size: 12px; line-height: 1.85; color: #999; max-width: 600px; }
.cd-qa b { color: #ddd; font-weight: 400; }

@media (max-width: 720px) {
  .cd { padding: 32px 18px 48px; }
  .cd-scene { height: 200px; }
  .cd-step { font-size: 9px; }
  .cd-btn .cd-label { font-size: 16px; }
  .cd-btn { padding: 0 20px; height: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .cd-title .cd-cursor { animation: none; }
}
/* inside the site's content column: no side padding of its own, titles line up with other pages */
.cd { padding: 0 0 40px; background: transparent; }
h2.cd-faq-head { font-weight: 400; }
.cd-qa div p { margin: 0 0 10px; }
.cd-qa div p:last-child { margin-bottom: 0; }
.cd-qa div ul { margin: 0; padding-left: 18px; }
.cd-qa div li + li { margin-top: 4px; }
.t-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* FAQ page (templates/faq.njk) reuses the Connect Discord styles */
.cd--faq .cd-faq-head:first-of-type { margin-top: 40px; }
.cd-link { color: var(--bl2); text-decoration: underline; text-decoration-color: rgba(163, 170, 255, 0.4); text-underline-offset: 3px; }
.cd-link:hover { text-decoration-color: var(--bl2); }

/* ── Docs: colour system (snippets/docs.njk) ───────────────────────────────
   Built for following long instructions. Every colour has ONE meaning:
   · step kind (--sc): prep soft sky blue · WDK install yellow · launch green · error fix rose.
     Used for the step's icon, number, sub-step headings (STEP 1 — …) and list
     numbers, so you always know which part of the guide you're in.
   · notes: warn yellow (Important / Required / Warning) · note blurple · ok green
     (Setup complete).
   · commands: green terminal text on a dark box · links: blurple · things to click,
     type or press: bright white · body text: calm light grey.
   · product tabs (--hc): Fortnite Internal pink · Fortnite External blurple ·
     Valorant rose · Escape From Tarkov yellow.
   Light mode swaps every colour for a darker version of itself. */
.dm-docs, .cd--head, .cd--end {
  --dx-text: #cfcfcf; --dx-dim: #8a8a8a; --dx-faint: #262626; --dx-line: #333;
  --dx-link: #a3aaff; --dx-warn: #ffd23f; --dx-note: #a3aaff; --dx-ok: #39ff7a;
  --dx-code: #39ff7a; --dx-codebg: #0a0a0a; --dx-on: #000;
}
.dm-docs [data-kind="prep"]   { --sc: #8ec5e6; --sd: #3d6680; }
.dm-docs [data-kind="wdk"]    { --sc: #ffd23f; --sd: #7a6315; }
.dm-docs [data-kind="launch"] { --sc: #39ff7a; --sd: #14702f; }
.dm-docs [data-kind="fix"]    { --sc: #ff5d7a; --sd: #7a1626; }
.dm-docs [data-dm-doc-tab="fortnite-internal"], .dm-docs [data-dm-doc="fortnite-internal"] { --hc: #ff2bd6; }
.dm-docs [data-dm-doc-tab="fortnite-external"], .dm-docs [data-dm-doc="fortnite-external"] { --hc: #a3aaff; }
.dm-docs [data-dm-doc-tab="valorant-external"], .dm-docs [data-dm-doc="valorant-external"] { --hc: #ff5d7a; }
.dm-docs [data-dm-doc-tab="escape-from-tarkov-internal"], .dm-docs [data-dm-doc="escape-from-tarkov-internal"] { --hc: #ffd23f; }
:root[data-theme="light"] :is(.dm-docs, .cd--head, .cd--end) {
  --dx-text: #2b2b2b; --dx-dim: #666; --dx-faint: #d9d9d9; --dx-line: #bbb;
  --dx-link: #3c46c8; --dx-warn: #8a6400; --dx-note: #3c46c8; --dx-ok: #15803d;
  --dx-code: #15803d; --dx-codebg: #f4f4f4; --dx-on: #fff;
}
:root[data-theme="light"] .dm-docs [data-kind="prep"]   { --sc: #2f6f94; --sd: #c9dfec; }
:root[data-theme="light"] .dm-docs [data-kind="wdk"]    { --sc: #8a6400; --sd: #f3e2a8; }
:root[data-theme="light"] .dm-docs [data-kind="launch"] { --sc: #15803d; --sd: #bfe8cc; }
:root[data-theme="light"] .dm-docs [data-kind="fix"]    { --sc: #be1843; --sd: #f5c2cf; }
:root[data-theme="light"] .dm-docs [data-dm-doc-tab="fortnite-internal"], :root[data-theme="light"] .dm-docs [data-dm-doc="fortnite-internal"] { --hc: #b3129a; }
:root[data-theme="light"] .dm-docs [data-dm-doc-tab="fortnite-external"], :root[data-theme="light"] .dm-docs [data-dm-doc="fortnite-external"] { --hc: #3c46c8; }
:root[data-theme="light"] .dm-docs [data-dm-doc-tab="valorant-external"], :root[data-theme="light"] .dm-docs [data-dm-doc="valorant-external"] { --hc: #be1843; }
:root[data-theme="light"] .dm-docs [data-dm-doc-tab="escape-from-tarkov-internal"], :root[data-theme="light"] .dm-docs [data-dm-doc="escape-from-tarkov-internal"] { --hc: #8a6400; }

/* title + end, from the Connect Discord page */
.cd--head { padding-bottom: 0; }
.cd--end { padding-top: 24px; }
.dm-docs.dm-section { margin-top: 32px; }

/* product tabs: dashed chips; the active one takes its product colour */
.dm-docs .dm-docs__tabs { gap: 8px; margin-bottom: 40px; }
.dm-docs .dm-docs__tab { padding: 8px 14px; border: 1px dashed var(--dx-line); color: var(--dx-dim); font-size: 12px; transition: color 150ms, border-color 150ms, background-color 150ms; }
.dm-docs .dm-docs__tab:hover { color: var(--fg); border-color: var(--hc); }
.dm-docs .dm-docs__tab.is-active { color: var(--fg); border: 1px solid var(--hc); background: color-mix(in srgb, var(--hc) 12%, transparent); text-decoration: none; font-weight: 500; }
.dm-docs .dm-docs__tab.is-active::before { content: '\25B8  '; color: var(--hc); }

/* product intro: name in the product colour, "you need" box */
.dm-docs .dm-split__title { font-size: 20px; color: var(--hc); }
.dm-docs .dm-split__text { color: var(--dx-text) !important; }
.dm-docs .dm-docs__needs { border: 1px dashed var(--dx-line); }
.dm-docs .dm-docs__needs p { color: var(--dx-dim); }
.dm-docs .dm-docs__needs li { color: var(--dx-text) !important; }
.dm-docs .dm-docs__needs li::before { color: var(--dx-ok); }
.dm-docs .dm-docs__keys kbd { border-color: var(--dx-line); color: var(--fg); }

/* steps: full-width dashed list; number box, icon, title; the open one is lit in its colour */
.dm-docs .dm-faq__list { max-width: none; border-top: 1px dashed var(--dx-faint); }
.dm-docs .dm-faq__item { border-bottom: 1px dashed var(--dx-faint); }
.dm-docs .dm-faq__item.is-open { box-shadow: inset 2px 0 0 var(--sc); }
.dm-docs .dm-faq__q { grid-template-columns: 28px 20px minmax(0, 1fr) 32px; align-items: center; gap: 14px; padding: 16px 12px; }
.dm-docs .dm-faq__n { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--dx-line); color: var(--dx-dim) !important; opacity: 1 !important; font-size: 12px; transition: all 200ms; }
.dm-docs .dx-ic svg { display: block; width: 20px; height: 20px; }
.dm-docs .dx-ic .a { fill: var(--sc); } .dm-docs .dx-ic .b { fill: var(--dx-on); } .dm-docs .dx-ic .c { fill: var(--sd); }
.dm-docs .dm-faq__text { color: var(--dx-text) !important; font-size: 15px; font-weight: 500; transition: color 150ms; }
.dm-docs .dm-faq__q:hover .dm-faq__text, .dm-docs .dm-faq__item.is-open .dm-faq__text { color: var(--fg) !important; }
.dm-docs .dm-faq__q:hover .dm-faq__n { border-color: var(--sc); color: var(--sc) !important; }
.dm-docs .dm-faq__item.is-open .dm-faq__n { border-color: var(--sc); background: var(--sc); color: var(--dx-on) !important; }
.dm-docs .dm-faq__item.is-open .dm-faq__icon::before { color: var(--sc); }
.dm-docs .dm-faq__a-inner { padding: 4px 12px 32px calc(12px + 28px + 14px + 20px + 14px); }

/* guide text */
.dm-docs .dm-doc { color: var(--dx-text) !important; max-width: 74ch; }
.dm-docs .dm-doc strong { color: var(--fg); font-weight: 600; }
.dm-docs .dm-doc a { color: var(--dx-link); text-decoration-color: color-mix(in srgb, var(--dx-link) 45%, transparent); }
.dm-docs .dm-doc a:hover { text-decoration-color: var(--dx-link); }
.dm-docs .dm-doc h3 { margin-top: 36px; color: var(--fg); font-size: 16px; }
.dm-docs .dm-doc > h3:first-child { margin-top: 0; }
.dm-docs .dm-doc h3::before { color: var(--sc); }
.dm-docs .dm-doc h4 { color: var(--sc) !important; border-top: 1px dashed var(--dx-faint); font-size: 12px; letter-spacing: 0.1em; }
.dm-docs .dm-doc h4::before { content: '\25B8  '; }
/* numbered steps: 01, 02 … in the step colour (native markers, so lists that carry on
   after a command box keep their start number) */
.dm-docs .dm-doc ol { list-style: decimal-leading-zero; padding-left: 36px; }
.dm-docs .dm-doc ol > li { padding-left: 6px; }
.dm-docs .dm-doc ol > li::marker { color: var(--sc); font-weight: 500; }
.dm-docs .dm-doc ul > li::before { content: '\203A  '; color: var(--dx-dim); }
/* commands */
.dm-docs .dm-doc code { padding: 1px 5px; border: 1px solid var(--dx-faint); background: var(--dx-codebg); color: var(--dx-code); }
.dm-docs .dm-doc pre { border: 1px dashed var(--dx-line); border-left: 2px solid var(--dx-code); background: var(--dx-codebg); color: var(--dx-code); }
.dm-docs .dm-doc pre code { padding: 0; border: 0; background: none; }
/* copy button: solid, with a soft fade so long commands slide under it cleanly */
.dm-docs .dm-doc__copy { top: 1px; right: 1px; padding: 10px 12px; line-height: 18px; background: var(--dx-codebg); box-shadow: -18px 0 14px -2px var(--dx-codebg); color: var(--dx-dim); }
.dm-docs .dm-doc__copy:hover { color: var(--fg); }
.dm-docs .dm-doc__copy.is-done { color: var(--dx-ok); }
/* notes: warn / note / ok */
.dm-docs .dm-doc blockquote { --q: var(--dx-note); padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--q) 35%, transparent); border-left: 3px solid var(--q); background: color-mix(in srgb, var(--q) 7%, transparent); color: var(--dx-text); }
.dm-docs .dm-doc blockquote.is-warn { --q: var(--dx-warn); }
.dm-docs .dm-doc blockquote.is-ok { --q: var(--dx-ok); }
.dm-docs .dm-doc blockquote > p:first-child > strong:first-child { color: var(--q); }
.dm-docs .dm-doc blockquote p:last-child { margin-bottom: 0; }
/* tables */
.dm-docs .dm-doc th { color: var(--dx-dim); border-bottom: 1px dashed var(--dx-line); }
.dm-docs .dm-doc td { color: var(--dx-text); border-bottom: 1px dashed var(--dx-faint); }
.dm-docs .dm-doc__tick::before { color: var(--dx-ok); }
.dm-docs .dm-doc img { border: 1px dashed var(--dx-line); }
@media (max-width: 639.98px) {
  .dm-docs .dm-faq__q { padding-inline: 8px; gap: 10px; }
  .dm-docs .dm-faq__a-inner { padding-left: 8px; }
}

/* ── Status page (components/page-status.njk; planet: assets/status.js) ────
   One colour per severity, everywhere on the page: ok green (undetected) ·
   warn yellow (updating, use at own risk, maintenance) · bad rose (detected).
   Same building blocks as Connect / FAQ / Docs: ~$ title, dashed lists,
   QUESTIONS-style section labels, bracket pills, the tide button. */
.st { --ok: #39ff7a; --warn: #ffd23f; --bad: #ff5d7a; --st-text: #cfcfcf; --st-dim: #8a8a8a; --st-faint: #262626; --st-line: #333; }
:root[data-theme="light"] .st { --ok: #15803d; --warn: #8a6400; --bad: #be1843; --st-text: #2b2b2b; --st-dim: #666; --st-faint: #d9d9d9; --st-line: #bbb; }
.st [data-sev="ok"], .st[data-sev="ok"] { --sv: var(--ok); }
.st [data-sev="warn"] { --sv: var(--warn); }
.st [data-sev="bad"] { --sv: var(--bad); }

.st-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.st-live { margin: 0; font-size: 12px; letter-spacing: 0.08em; color: var(--st-dim); }
.st-live__dot { display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--ok); vertical-align: 1px; animation: cm-blink 1.6s steps(1) infinite; }

/* health panel */
.st-health {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 28px;
  margin-top: 32px; padding: 20px 28px 20px 16px;
  border: 1px dashed var(--st-line); border-left: 3px solid var(--sv);
  background: color-mix(in srgb, var(--sv) 5%, transparent);
}
.st-planet { display: block; width: 150px; height: 150px; }
.st-health__kicker { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.2em; color: var(--sv); }
.st-health__title { margin: 0; font-size: 26px; font-weight: 500; line-height: 1.2; color: var(--fg); letter-spacing: 0.04em; }
.st-health__sub { margin: 10px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.7; color: var(--st-text); }
.st-counts { display: grid; gap: 10px; margin: 0; }
.st-count { display: grid; grid-template-columns: auto 48px; align-items: center; gap: 14px; justify-items: end; }
.st-count dt { font-size: 11px; letter-spacing: 0.14em; color: var(--sv); }
.st-count dd { margin: 0; font-size: 28px; font-weight: 500; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }

/* product list */
.st-group { margin-top: 8px; }
.st .cd-faq-head { margin: 48px 0 12px; }
.st-rows { list-style: none; margin: 0; padding: 0; border-top: 1px dashed var(--st-faint); }
.st-rows > li { border-bottom: 1px dashed var(--st-faint); }
.st-row {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 20px; align-items: center; gap: 16px;
  padding: 16px 12px; color: var(--st-text); text-decoration: none;
  transition: background-color 150ms, box-shadow 150ms;
}
.st-row:hover, .st-row:focus-visible { background: color-mix(in srgb, var(--sv) 6%, transparent); box-shadow: inset 2px 0 0 var(--sv); color: var(--fg); outline: none; }
.st-row__mark { width: 10px; height: 10px; background: var(--sv); }
.st-row[data-sev="warn"] .st-row__mark { animation: cm-blink 1.2s steps(1) infinite; }
.st-row[data-sev="bad"] .st-row__mark { animation: cm-blink .7s steps(1) infinite; }
.st-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; }
.st-row__go { color: var(--st-dim); transition: transform 300ms steps(3), color 150ms; }
.st-row:hover .st-row__go, .st-row:focus-visible .st-row__go { color: var(--sv); transform: translateX(4px); }
/* bracket pill, like the community status card */
.st-pill { display: inline-block; padding: 2px 8px; border: 1px solid var(--sv); color: var(--sv); font-size: 11px; letter-spacing: 0.12em; line-height: 1.4; white-space: nowrap; }
.st-row[data-sev="ok"] .st-pill { background: transparent; }
.st-row[data-sev="bad"] .st-pill { background: color-mix(in srgb, var(--sv) 14%, transparent); }

/* legend */
.st-legend { display: grid; gap: 12px; margin: 0; }
.st-legend > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: baseline; gap: 16px; }
.st-legend dt { margin: 0; }
.st-legend dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--st-text); }

/* alerts CTA */
.st-cta { padding: 0 0 8px; }
.st-cta .cd-faq-head { margin-top: 56px; }
.st-cta__fine { margin: 12px 0 0; font-size: 12px; color: var(--st-dim); }

@media (max-width: 759.98px) {
  .st-health { grid-template-columns: 96px minmax(0, 1fr); padding: 16px; gap: 16px; }
  .st-planet { width: 96px; height: 96px; }
  .st-counts { grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .st-count { justify-items: start; grid-template-columns: auto auto; justify-content: start; }
  .st-health__title { font-size: 20px; }
  .st-legend > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .st-row { gap: 10px; padding: 14px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-live__dot, .st-row__mark { animation: none !important; }
}

/* ── Products page (components/page-products.njk; drawing + filter: assets/products.js)
   From C:\claude\products-page.html. Dark in both themes, like the community
   section. Additions below the design's rules: status pill colour by severity,
   sold out, link-style selector buttons, fitting into the content column. */
/* ---------- Page ---------- */
.pp { max-width: 1000px; margin: 0 auto; padding: 44px 40px 60px; box-sizing: border-box; background: #000; color: #ccc; font-family: inherit; }

.pp-title { margin: 0; font-size: 26px; font-weight: 500; color: #fff; }
.pp-title .pp-prompt { color: #39ff7a; }
.pp-title .pp-cursor { display: inline-block; width: 12px; height: 22px; background: #fff; margin-left: 8px; vertical-align: -3px; animation: pp-blink 1s steps(1) infinite; }
@keyframes pp-blink { 50% { opacity: 0; } }
.pp-sub { font-size: 12px; color: #666; margin-top: 12px; letter-spacing: .04em; }

/* Planet selector */
.pp-sel { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 34px 0 34px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.pp-sel::-webkit-scrollbar { display: none; }
.pp-orbit { position: absolute; left: 0; top: 0; width: 100%; height: 100px; pointer-events: none; display: block; }
.pp-game { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 112px; padding: 0; background: none; border: 0; cursor: pointer; font: inherit; font-size: 10px; letter-spacing: .14em; color: #666; transition: color .2s; }
.pp-game canvas { width: 96px; height: 100px; display: block; }
.pp-game small { font-size: 9px; letter-spacing: .05em; color: #444; transition: color .2s; }
.pp-game:hover { color: #ddd; }
.pp-game.is-on { color: #fff; }
.pp-game.is-on small { color: var(--g); }
.pp-game:focus-visible { outline: 1px dashed #555; outline-offset: 4px; }

.pp-meta { display: flex; justify-content: space-between; font-size: 10px; color: #555; letter-spacing: .12em; margin-bottom: 14px; }

/* Grid + cards */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.pp-card { position: relative; display: block; border: 1px dashed #222; color: inherit; text-decoration: none; transition: border-color .2s; }
.pp-card[hidden] { display: none; }
.pp-card.is-in { animation: pp-in .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pp-in { from { opacity: 0; transform: translateY(8px); } }
.pp-card canvas { display: block; width: 100%; height: 120px; }
.pp-body { padding: 12px 14px 14px; }
.pp-name { font-size: 13px; color: #fff; letter-spacing: .06em; }
.pp-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 10px; }
.pp-tag { color: var(--g); letter-spacing: .12em; }
.pp-status { color: var(--s, #39ff7a); border: 1px solid var(--s, #39ff7a); padding: 0 5px; letter-spacing: .1em; }
.pp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 11px; }
.pp-price { color: #aaa; }
.pp-price b { color: #fff; font-weight: 400; }
.pp-view { color: #666; letter-spacing: .12em; transition: color .2s; }
.pp-view .pp-br { opacity: 0; color: var(--g); transition: opacity .2s; }
.pp-card:hover, .pp-card:focus-visible { border-color: var(--g); border-style: solid; outline: none; }
.pp-card:hover .pp-view, .pp-card:focus-visible .pp-view { color: #fff; }
.pp-card:hover .pp-br, .pp-card:focus-visible .pp-br { opacity: 1; }

.pp-empty { grid-column: 1 / -1; padding: 40px 0; text-align: center; font-size: 12px; color: #555; }

@media (max-width: 720px) {
  .pp { padding: 32px 18px 48px; }
  .pp-sel { justify-content: flex-start; }
  .pp-game { width: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-title .pp-cursor { animation: none; }
  .pp-card.is-in { animation: none; }
}
.pp { max-width: none; padding: 0 0 40px; background: transparent; }
a.pp-game { text-decoration: none; }
.pp-status[data-sev="ok"] { --s: #39ff7a; }
.pp-status[data-sev="warn"] { --s: #ffd23f; }
.pp-status[data-sev="bad"] { --s: #ff5d7a; }
.pp-card.is-out .pp-price b { color: #ff5d7a; }
.pp-card.is-out canvas { opacity: .55; }
.pp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-empty p { margin: 0 0 12px; }
/* bigger planets and labels than the design, no product counts; cards: bigger name, no status or VIEW */
.pp-sel { margin: 36px 0 40px; }
.pp-orbit { height: 130px; }
.pp-game { width: 140px; gap: 10px; font-size: 13px; letter-spacing: 0.16em; }
.pp-game canvas { width: 124px; height: 130px; }
.pp-name { font-size: 16px; letter-spacing: 0.06em; }
.pp-row { margin-top: 12px; font-size: 11px; }
.pp-foot { margin-top: 10px; font-size: 12px; }
@media (max-width: 720px) { .pp-game { width: 112px; font-size: 12px; } .pp-game canvas { width: 104px; } }

/* ── Space backdrop (layouts/master.njk; assets/space-bg.mp4, a forward-then-reverse
   loop). It fills the screen behind the window: the window's panels are 93% opaque so
   it glows faintly through them, and on screens wider than the 1440px window it shows
   fully in the strips beside it. Phones never load it. */
.t-space-tint { display: none; }
.t-space { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; display: none; }
@media (min-width: 860px) {
  .t-space { display: block; }
  body.t-body { background-image: none; }
  /* one 93% layer for the window's inside (.t-space-tint), so overlapping panels don't stack;
     the top and key bars stay solid: content scrolls under them and must not show through */
  .t-space-tint { display: block; position: fixed; z-index: 0; pointer-events: none; left: 0; right: 0; top: calc(var(--gap) + var(--top-h)); bottom: calc(var(--gap) + var(--keys-h)); width: min(var(--win-max), 100% - 2 * var(--gap)); margin-inline: auto; background: color-mix(in srgb, var(--bg) 93%, transparent); }
  body.t-body .t-content, body.t-body .t-side, .cm { background: transparent; }
  /* the top and key bars are exactly the window's width, so nothing pokes out past its
     frame; their slice of the outer gap is space-black (it hides content scrolling there),
     their row inside the frame is the theme's colour */
  body.t-body .t-top, body.t-body .t-keys { width: min(var(--win-max), 100% - 2 * var(--gap)); margin-inline: auto; }
  body.t-body .t-top { background: linear-gradient(#000, #000) top / 100% var(--gap) no-repeat, linear-gradient(var(--bg), var(--bg)) bottom / 100% var(--top-h) no-repeat; }
  body.t-body .t-keys { background: linear-gradient(#000, #000) bottom / 100% var(--gap) no-repeat, linear-gradient(var(--bg), var(--bg)) top / 100% var(--keys-h) no-repeat; }
  body.t-body .t-top .t-top__in, body.t-body .t-keys .t-keys__in { margin-inline: 0; }
}

/* ── Frame title (components/navbar.njk .t-ft; from C:\claude\topbaralt.html).
   A pixel crescent moon (assets/frame-title.js) and STELLAR sit on the window's top
   border; their black tab cuts the line. .t-top is just the black band above the
   window, raised over the frame (.t-win) so the tab covers its line. */
body.t-body .t-top { z-index: 37; overflow: visible; }
.t-ft { position: absolute; top: var(--gap); transform: translateY(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 0 12px; background: #000; line-height: 1; white-space: nowrap; text-decoration: none; }
.t-ft--l { left: 24px; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .24em; }
.t-ft--l canvas { display: block; width: 24px; height: 24px; image-rendering: pixelated; image-rendering: crisp-edges; }
.t-ft--l:focus-visible { outline: 1px dashed #555; outline-offset: 4px; }

/* ── Hero subtitle in a pixel nebula (templates/shop.njk .nb; assets/nebula.js; from
   C:\claude\nebula-subtitle.html). The band is the design's 126px, but the negative
   margins make it take only the 105px the old tagline + intro took, so the ticker,
   buttons and tutorial stay exactly where they were. */
.t-hero > .nb { max-width: none; }
.nb { position: relative; width: 100%; height: 126px; margin: -10px 0 -11px; }
.nb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.nb .nb-front { z-index: 2; }
.nb .nb-text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; margin: 0; font-family: var(--ff); font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .32em; color: #fff; white-space: nowrap; }
:root[data-theme="light"] .nb .nb-text { color: #000; }

/* ── "MARKET" tag beside the hero title (templates/shop.njk .market-tag; assets/market-tag.js;
   from C:\claude\market-tag.html). The banner and the tag share a row aligned to the
   bottom, so the caps sit on the banner's baseline. The banner's bottom margin moves
   to the row, which keeps the row exactly where the banner was: nothing below moves. */
.t-hero > .t-title-row { max-width: none; display: flex; align-items: flex-end; gap: 26px; margin: 0 0 32px; }
.t-title-row > .t-logo { flex: none; margin-bottom: 0; }
.market-tag { position: relative; display: inline-flex; align-items: center; gap: 16px; margin-bottom: 8px; font-family: var(--ff); font-size: 22px; font-weight: 300; line-height: 1; letter-spacing: .5em; color: #8c8c8c; white-space: nowrap; flex: none; user-select: none;
  transition: opacity 1s cubic-bezier(.2, .8, .2, 1), filter 1s cubic-bezier(.2, .8, .2, 1), transform 1s cubic-bezier(.2, .8, .2, 1), letter-spacing 1.2s cubic-bezier(.2, .8, .2, 1); }
.market-tag .market-dash { display: block; width: 36px; height: 1px; background: #444; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.market-tag .market-moon { position: absolute; right: -4px; top: -42px; width: 30px; height: 30px; image-rendering: pixelated; image-rendering: crisp-edges; transition: opacity .8s ease .55s, transform .9s cubic-bezier(.2, .8, .2, 1) .55s; }
/* waiting for the title: the dash draws out, the word un-blurs and closes up, then the moon drops in */
.market-tag.is-waiting { opacity: 0; filter: blur(6px); transform: translateX(-12px); letter-spacing: .9em; }
.market-tag.is-waiting .market-dash { width: 0; }
.market-tag.is-waiting .market-moon { opacity: 0; transform: translateY(-8px); }
@media (prefers-reduced-motion: reduce) { .market-tag, .market-tag .market-dash, .market-tag .market-moon { transition: none; } }
@container (max-width: 899.98px) {
  .market-tag { font-size: 16px; letter-spacing: .4em; }
  .market-tag .market-dash { width: 22px; }
  .market-tag .market-moon { width: 22px; height: 22px; top: -32px; }
}
@media (max-width: 639.98px) { .t-title-row { margin: 0; } .market-tag { display: none; } }