/* ==========================================================================
   After Hours — shared stylesheet

   Design lane: the avatar's own world. A city after midnight, a ferris wheel
   turning behind him, neon doing the work the sun isn't. Violet-black ground,
   ember and magenta signage, periwinkle haze where paper used to be.

   This replaced a truck-art / risograph poster lane. The translation that
   mattered was not the palette but the DEVICES: offset shadows and taped tilts
   are how ink sits on paper, and neither means anything at night. They became
   glow and alignment. The halftone dot field became the ferris wheel.

   The one deliberate exception: the Discord mockups on the landing page keep
   real Discord greys. The contrast is the point — a lit street wrapped around
   a pristine screenshot-accurate card reads as "proof".
   ========================================================================== */

:root {
  /* ── After Hours ──────────────────────────────────────────────────────────
     Every value below is sampled from the avatar, so the site and the profile
     picture are the same place: a city at night, a ferris wheel behind him,
     neon holding the dark up.

     The base is violet-black, NOT neutral black — the avatar's night has a
     purple cast and a grey-black next to it reads as dead. */
  --night: #0a0710;
  --night-deep: #06040b;
  --night-raise: #17111f;
  --night-raise-hi: #221a2d;

  /* The pale "AFTER" lettering. Stands in for what used to be newsprint —
     there is no paper in a night scene, so the light value is haze. */
  --haze: #bacafc;
  --haze-dim: #8f9ac9;

  --edge: #2a2038;
  --edge-hi: #3d2f52;

  --text: #e4e6f5;
  --text-muted: #8b86a0;

  /* The orange "HOURS" lettering. Matches ROKDA_GOLD (0xfd8547) in
     lib/embeds.js, so an embed and the site are literally the same orange. */
  --ember: #fd8547;
  --ember-hi: #ffa877;
  --ember-deep: #c25f2c;
  /* The ferris wheel behind him. */
  --neon: #d6336c;
  /* His jacket. */
  --deep-blue: #0c4275;

  --ember-rgb: 253, 133, 71;
  --neon-rgb: 214, 51, 108;
  --deep-blue-rgb: 12, 66, 117;
  --haze-rgb: 186, 202, 252;

  /* ── Names the rest of the sheet already uses ──────────────────────────────
     1,900 lines and four pages reference the old truck-art names. Repointing
     them here retones the whole site from one block, instead of a rename that
     would touch every rule and every page for no visual difference. */
  --ink: var(--night);
  --ink-deep: var(--night-deep);
  --ink-raise: var(--night-raise);
  --ink-raise-hi: var(--night-raise-hi);
  --paper: var(--haze);
  --paper-dim: var(--haze-dim);
  --rule: var(--edge);
  --rule-hi: var(--edge-hi);

  --gold: var(--ember);
  --gold-hi: var(--ember-hi);
  --gold-deep: var(--ember-deep);
  --vermilion: var(--neon);
  --marigold: var(--ember-hi);
  --peacock: var(--deep-blue);

  --gold-rgb: var(--ember-rgb);
  --vermilion-rgb: var(--neon-rgb);
  --marigold-rgb: var(--ember-rgb);
  --peacock-rgb: var(--deep-blue-rgb);

  /* Legacy aliases — commands.html / testers.html markup still asks for these. */
  --accent: var(--gold);
  --accent-hover: var(--gold-hi);
  --accent-rgb: var(--gold-rgb);
  --success: var(--peacock);
  --warning: var(--vermilion);
  --success-rgb: var(--peacock-rgb);
  --warning-rgb: var(--vermilion-rgb);
  --surface: var(--ink-raise);
  --surface-hi: var(--ink-raise-hi);
  --border: var(--rule);
  --border-hi: var(--rule-hi);
  --bg: var(--ink);
  --bg-deep: var(--ink-deep);

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-heading: "Archivo", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --content-width: 1040px;
  --radius: 4px;
  --radius-lg: 6px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 140ms var(--ease);
  --t-med: 260ms var(--ease);

  /* Hard offset shadows are a PRINT device — ink sitting proud of paper. This
     page is lit signage now, so depth comes from glow and falloff instead.
     Same variable names, so every card and button converts at once. */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.62);
  --shadow-gold: 0 0 24px rgba(var(--ember-rgb), 0.34);
  --shadow-neon: 0 0 26px rgba(var(--neon-rgb), 0.3);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ── The ferris wheel ───────────────────────────────────────────────────────
   The structure standing behind him in the avatar, rebuilt in CSS and parked
   behind the hero so the page opens on the same view the profile picture does.

   This replaces a halftone dot field, which was the right texture for a
   newsprint poster and means nothing at night. Spokes are a repeating conic
   gradient, the rims are ring stops in a radial gradient, and the whole thing
   is masked to fade out well before it reaches any text.

   No image, no markup, no animation — it is scenery, and a background that
   moves would fight the content for attention. */
body::before {
  content: "";
  position: fixed;
  top: -30vmax;
  left: 50%;
  width: 96vmax;
  height: 96vmax;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-conic-gradient(
      from 0deg,
      rgba(var(--neon-rgb), 0.19) 0deg 0.32deg,
      transparent 0.32deg 7.5deg
    ),
    radial-gradient(
      circle,
      transparent 0 29.6%,
      rgba(var(--neon-rgb), 0.17) 29.6% 30%,
      transparent 30% 45.6%,
      rgba(var(--neon-rgb), 0.13) 45.6% 46%,
      transparent 46% 61.6%,
      rgba(var(--neon-rgb), 0.09) 61.6% 62%,
      transparent 62%
    );
  -webkit-mask-image: radial-gradient(circle at 50% 32%, #000 6%, transparent 58%);
  mask-image: radial-gradient(circle at 50% 32%, #000 6%, transparent 58%);
  opacity: 0.9;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * {
  position: relative;
  z-index: 1;
}

::selection {
  background: var(--vermilion);
  color: #fff;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-hi) transparent;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--ink-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--rule-hi);
  border: 3px solid var(--ink-deep);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-deep);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em 0;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1em 0;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--gold-hi);
}

:focus-visible {
  outline: 2px dashed var(--marigold);
  outline-offset: 3px;
}

code, .mono {
  font-family: var(--font-mono);
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ────────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 2px solid var(--rule);
  background: rgba(16, 13, 10, 0.86);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: border-color var(--t-med), background var(--t-med);
}

.site-header.scrolled {
  background: rgba(16, 13, 10, 0.96);
  border-bottom-color: var(--gold-deep);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
}

.site-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-logo:hover {
  color: var(--gold);
}

.logo-img {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border: 2px solid var(--gold);
  transition: transform var(--t-med) var(--ease-out);
}

.site-logo:hover .logo-img {
  transform: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--gold);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: 13px 26px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast),
    color var(--t-fast), border-color var(--t-fast);
}

/* Hard offset shadow, no blur — screen-print, not drop-shadow. */
.btn-primary {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  color: var(--ink);
  background: var(--gold-hi);
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.6);
}

.btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.btn-secondary {
  background: transparent;
  border-color: var(--rule-hi);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--vermilion);
  color: var(--vermilion);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5);
}

.btn-secondary:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  padding: 84px 0 56px;
  text-align: center;
  position: relative;
}

/* Round, because the art is already a circular badge and squaring it off cropped
   the ring he was drawn inside. It sits at the hub of the ferris wheel behind
   it, so the page opens on the same composition as the avatar itself. */
.hero-avatar {
  width: 112px;
  height: 112px;
  display: block;
  margin: 0 auto 20px;
  border: 2px solid rgba(var(--haze-rgb), 0.45);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(var(--neon-rgb), 0.09),
    0 0 38px rgba(var(--neon-rgb), 0.34),
    var(--shadow-lg);
  transform: none;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--vermilion);
  padding: 5px 14px;
  margin-bottom: 22px;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  animation: blink 1.4s steps(1) infinite;
}

@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.15; }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.6rem, 12vw, 7.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 0.18em;
  color: var(--paper);
  /* Layered offset prints — the cheap-poster misregistration look. */
  text-shadow:
    3px 3px 0 var(--vermilion),
    6px 6px 0 var(--gold-deep);
}

.hero .tagline {
  color: var(--text-muted);
  font-size: 1.16rem;
  max-width: 560px;
  margin: 0 auto 2em;
  line-height: 1.55;
}

.hero .tagline strong {
  color: var(--paper);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Marquee ticker ────────────────────────────────────────────────────── */

.ticker {
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  background: var(--gold);
  color: var(--ink);
  overflow: hidden;
  padding: 0;
  margin: 44px 0 0;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  animation: scroll-left 34s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker-track {
  animation-play-state: paused;
}

.ticker span {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 0;
}

.ticker .sep {
  padding: 0 18px;
  color: var(--vermilion);
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Stat strip ────────────────────────────────────────────────────────── */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 2px solid var(--rule);
  background: var(--ink-raise);
  margin: 0;
  box-shadow: var(--shadow-md);
}

.stat-strip div {
  padding: 20px 16px;
  text-align: center;
  border-right: 2px solid var(--rule);
}

.stat-strip div:last-child {
  border-right: none;
}

.stat-strip .n {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 6px;
}

.stat-strip .l {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

/* ── Sections ──────────────────────────────────────────────────────────── */

section {
  padding: 60px 0;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 8px;
}

.section-head .num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--vermilion);
  letter-spacing: 0.06em;
  flex: none;
}

section > .container > h2,
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--paper);
  margin: 0;
}

.section-intro {
  color: var(--text-muted);
  max-width: 620px;
  margin-bottom: 32px;
}

/* Torn-edge rule under a section head */
.rule-torn {
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold) 0 14px,
    transparent 14px 22px,
    var(--vermilion) 22px 30px,
    transparent 30px 38px
  );
  margin: 12px 0 26px;
}

/* ── Compliance notice ─────────────────────────────────────────────────── */

.compliance {
  padding: 8px 0 0;
}

.compliance .container {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--vermilion);
  padding: 18px 22px;
  max-width: calc(var(--content-width) - 48px);
  box-shadow: var(--shadow-sm);
}

.compliance p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.compliance strong {
  color: var(--gold);
}

/* ── Proof: Discord Components V2 mockups ──────────────────────────────────
   Rebuilt in pure HTML/CSS from lib/components.js rokdaContainer(): accent bar
   on the left, `## title` heading, description, optional thumbnail, a divider
   before fields, `**name**` + value blocks, and `-# footer` subtext.
   Deliberately uses Discord's own greys, not the site palette. */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  align-items: start;
}

.proof-item > figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 9px;
  letter-spacing: 0.02em;
}

.proof-item > figcaption b {
  color: var(--gold);
  font-weight: 500;
}

.proof-item {
  margin: 0;
}

.dc {
  background: #313338;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: "gg sans", "Inter", sans-serif;
  font-size: 0.9rem;
  line-height: 1.42;
  color: #dbdee1;
  box-shadow: var(--shadow-md);
}

.dc-msg {
  display: flex;
  gap: 12px;
}

.dc-pfp {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
}

.dc-body {
  min-width: 0;
  flex: 1;
}

.dc-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.dc-name {
  font-weight: 600;
  color: #f2f3f5;
  font-size: 0.94rem;
}

.dc-tag {
  background: #5865f2;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dc-time {
  font-size: 0.7rem;
  color: #949ba4;
}

/* The container itself — accent bar is the left border. */
.dc-card {
  background: #2b2d31;
  border-left: 4px solid var(--gold);
  border-radius: 4px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}

.dc-card.red {
  border-left-color: var(--vermilion);
}

.dc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.dc-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #f2f3f5;
  margin: 0 0 4px;
  font-family: "gg sans", "Inter", sans-serif;
  line-height: 1.3;
}

.dc-desc {
  margin: 0;
  color: #dbdee1;
}

.dc-thumb {
  width: 72px;
  height: 72px;
  border-radius: 6px;
  flex: none;
  object-fit: cover;
}

.dc-div {
  height: 1px;
  background: #3f4147;
  border: 0;
  margin: 12px 0;
}

.dc-field {
  margin-bottom: 11px;
}

.dc-field:last-child {
  margin-bottom: 0;
}

.dc-field b {
  display: block;
  color: #f2f3f5;
  font-weight: 700;
  margin-bottom: 1px;
}

.dc-foot {
  font-size: 0.75rem;
  color: #949ba4;
  margin: 11px 0 0;
}

.dc-btns {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.dc-btn {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 3px;
  color: #fff;
  background: #4e5058;
}

.dc-btn.green { background: #248046; }
.dc-btn.red { background: #da373c; }

.dc-mono {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  background: #1e1f22;
  border-radius: 4px;
  padding: 9px 11px;
  color: #c9cdd3;
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}

.dc-gold { color: var(--gold); }

/* ── Feature cards ─────────────────────────────────────────────────────── */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-card {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  padding: 24px 22px 22px;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med),
    box-shadow var(--t-med), background var(--t-med);
}

/* Strip of tape across the top-left corner. */
.feature-card::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 18px;
  width: 62px;
  height: 20px;
  background: rgba(244, 237, 224, 0.16);
  border-left: 1px dashed rgba(244, 237, 224, 0.3);
  border-right: 1px dashed rgba(244, 237, 224, 0.3);
  transform: none;
  pointer-events: none;
}

.feature-card:nth-child(even)::before {
  left: auto;
  right: 18px;
  transform: none;
}

.feature-card:hover {
  transform: translate(-3px, -3px);
  border-color: var(--gold-deep);
  background: var(--ink-raise-hi);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.6);
}

.feature-card .icon {
  font-size: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  background: var(--ink-deep);
  border: 2px solid var(--gold-deep);
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med);
}

.feature-card:hover .icon {
  transform: scale(1.06);
  border-color: var(--vermilion);
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--paper);
  margin-bottom: 0.45em;
}

.feature-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Steps ─────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.steps li {
  counter-increment: step;
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  padding: 46px 20px 20px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), box-shadow var(--t-med);
}

.steps li:hover {
  transform: translate(-2px, -2px);
  border-color: var(--gold-deep);
  box-shadow: var(--shadow-md);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -2px;
  left: -2px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  background: var(--gold);
}

.steps code {
  background: var(--ink-deep);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.88rem;
  color: var(--gold);
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 2px solid var(--rule);
  padding: 30px 0;
  margin-top: 30px;
}

.site-footer .container {
  color: var(--text-muted);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.site-footer a {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
}

.site-footer a:hover {
  color: var(--gold);
}

/* ── Scroll reveal ─────────────────────────────────────────────────────────
   Hidden state is scoped under .js-reveal, which script.js only adds once it
   has confirmed it can run the animation — so a JS failure degrades to "no
   animation" rather than "blank page". */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}

.js-reveal [data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   commands.html
   ========================================================================== */

.commands-page {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 40px;
  align-items: start;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.build-note {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-size: 0.86rem;
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--marigold);
  padding: 12px 16px;
  margin-bottom: 10px;
}

.legend {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  border: 2px solid var(--rule);
  padding: 13px 17px;
  margin-bottom: 10px;
}

.legend .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-bar {
  grid-column: 1 / -1;
  margin-bottom: 10px;
  position: relative;
}

.filter-bar input {
  width: 100%;
  padding: 13px 92px 13px 42px;
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.94rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}

/* Magnifier drawn in CSS — no extra markup, no network request. */
.filter-bar::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  pointer-events: none;
  transition: border-color var(--t-fast);
}

.filter-bar::after {
  content: "";
  position: absolute;
  left: 26px;
  top: 50%;
  width: 6px;
  height: 2px;
  margin-top: 3px;
  background: var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
  transition: background var(--t-fast);
}

.filter-bar:focus-within::before { border-color: var(--gold); }
.filter-bar:focus-within::after { background: var(--gold); }

.filter-bar input:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-raise-hi);
}

.filter-bar input::placeholder {
  color: var(--text-muted);
}

/* "/" hint + live result count, both injected by script.js */
.filter-hint {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 2px 7px;
  pointer-events: none;
  transition: opacity var(--t-fast);
}

.filter-bar:focus-within .filter-hint {
  opacity: 0;
}

.result-count {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: -2px 0 10px;
  min-height: 1.2em;
}

.result-count b {
  color: var(--gold);
  font-weight: 500;
}

.sidebar {
  position: sticky;
  top: 82px;
  align-self: start;
}

.sidebar h4 {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vermilion);
  margin-bottom: 0.9em;
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 2px solid var(--rule);
}

.sidebar a {
  color: var(--text-muted);
  font-size: 0.86rem;
  display: block;
  padding: 5px 0 5px 13px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);
}

.sidebar a:hover {
  color: var(--gold);
  padding-left: 17px;
}

.sidebar a.active {
  color: var(--gold);
  border-left-color: var(--gold);
  font-weight: 600;
}

.mobile-nav-toggle {
  display: none;
}

.command-main {
  min-width: 0;
}

.command-category {
  margin-bottom: 46px;
  scroll-margin-top: 82px;
}

.command-category h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--paper);
  border-bottom: 3px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 8px;
}

.category-note {
  color: var(--text-muted);
  font-size: 0.86rem;
  margin-bottom: 16px;
}

.command-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.command-card {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  padding: 15px 17px;
  position: relative;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast),
    background var(--t-fast), box-shadow var(--t-fast);
}

.command-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--gold-deep);
  background: var(--ink-raise-hi);
  box-shadow: var(--shadow-md);
}

.command-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.command-card code {
  color: var(--gold);
  font-size: 0.94rem;
  /* Long choice lists like /fun <8ball|joke|pickup|…> have no natural break
     opportunity and blow past the viewport on narrow screens. */
  overflow-wrap: anywhere;
}

.command-card .desc {
  margin: 0;
  font-size: 0.92rem;
}

.command-card .note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.83rem;
}

/* Copy-to-clipboard button, injected by script.js */
.copy-cmd {
  position: absolute;
  top: 11px;
  right: 11px;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: var(--ink-deep);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.command-card:hover .copy-cmd,
.copy-cmd:focus-visible {
  opacity: 1;
}

.copy-cmd:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.copy-cmd.done {
  opacity: 1;
  color: var(--peacock);
  border-color: var(--peacock);
}

.badge {
  font-family: var(--font-heading);
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 3px 8px;
  border-radius: 2px;
  white-space: nowrap;
}

.badge-soon {
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold);
  border: 1px solid var(--gold-deep);
}

.badge-issue {
  background: rgba(var(--vermilion-rgb), 0.14);
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
}

.no-results {
  display: none;
  color: var(--text-muted);
  padding: 40px 0;
  text-align: center;
}

/* ==========================================================================
   testers.html
   ========================================================================== */

.testers-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 24px 96px;
}

.alpha-banner {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--gold);
  padding: 22px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}

.alpha-banner h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.8rem;
  text-transform: uppercase;
  margin-bottom: 0.4em;
  color: var(--gold);
}

.alpha-banner p {
  margin: 0;
  font-size: 0.94rem;
}

.report-bug {
  background: var(--ink-raise);
  border: 2px solid var(--vermilion);
  border-left: 6px solid var(--vermilion);
  padding: 22px 26px;
  margin-bottom: 38px;
  box-shadow: var(--shadow-md);
}

.report-bug h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin-bottom: 0.45em;
  color: var(--vermilion);
}

.report-bug p {
  margin: 0 0 0.6em;
  font-size: 0.94rem;
}

.report-bug p:last-child {
  margin-bottom: 0;
}

.report-bug .report-target {
  font-weight: 600;
  color: var(--paper);
  font-family: var(--font-mono);
  background: var(--ink-deep);
  border: 1px solid var(--vermilion);
  border-radius: 3px;
  padding: 2px 8px;
}

.testers-intro {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 30px;
}

.known-issues {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-left: 6px solid var(--marigold);
  padding: 22px 26px;
  margin-bottom: 38px;
}

.known-issues h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5em;
}

.known-issues p {
  margin: 0 0 0.6em;
  font-size: 0.88rem;
}

.known-issues p:last-child {
  margin-bottom: 0;
}

.known-issues ul {
  margin: 0 0 0.6em;
  padding-left: 1.3em;
  font-size: 0.88rem;
}

.known-issues code {
  background: var(--ink-deep);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.85rem;
}

.test-category {
  margin-bottom: 42px;
  scroll-margin-top: 82px;
}

.test-category h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  color: var(--paper);
  border-bottom: 3px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.test-card {
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  padding: 15px 17px;
  margin-bottom: 11px;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.test-card:hover {
  border-color: var(--gold-deep);
  background: var(--ink-raise-hi);
  box-shadow: var(--shadow-sm);
}

.test-card > h3 {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}

.test-step {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.test-step:first-of-type {
  border-top: none;
  padding-top: 0;
}

.test-step p {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.test-step p:last-child {
  margin-bottom: 0;
}

.test-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

.test-label.action {
  background: rgba(var(--gold-rgb), 0.14);
  color: var(--gold);
  border: 1px solid var(--gold-deep);
}

.test-label.expected {
  background: rgba(var(--peacock-rgb), 0.14);
  color: var(--peacock);
  border: 1px solid var(--peacock);
}

.test-label.edge {
  background: rgba(var(--vermilion-rgb), 0.14);
  color: var(--vermilion);
  border: 1px solid var(--vermilion);
}

.test-step code {
  background: var(--ink-deep);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.86rem;
  color: var(--text);
}

/* ── Back to top ───────────────────────────────────────────────────────── */

.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  border: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: var(--shadow-md);
  transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility var(--t-med),
    background var(--t-fast);
}

.to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  background: var(--gold-hi);
  transform: translate(-2px, -2px);
}

.to-top svg {
  width: 17px;
  height: 17px;
}

/* ── Mobile ────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid,
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .hero {
    padding: 56px 0 36px;
  }

  .hero .tagline {
    font-size: 1.02rem;
  }

  .hero h1 {
    text-shadow: 2px 2px 0 var(--vermilion), 4px 4px 0 var(--gold-deep);
  }

  .feature-grid,
  .steps {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip div:nth-child(2) {
    border-right: none;
  }

  .stat-strip div:nth-child(-n + 2) {
    border-bottom: 2px solid var(--rule);
  }

  .site-nav a {
    padding: 6px 9px;
    font-size: 0.74rem;
  }

  .commands-page {
    grid-template-columns: 1fr;
    padding: 24px 18px 64px;
  }

  .testers-page {
    padding: 24px 18px 64px;
  }

  .to-top {
    right: 16px;
    bottom: 16px;
  }

  .mobile-nav-toggle {
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: var(--ink-raise);
    border: 2px solid var(--rule);
    color: var(--text);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    cursor: pointer;
  }

  .sidebar {
    position: static;
    display: none;
    background: var(--ink-raise);
    border: 2px solid var(--rule);
    padding: 16px;
    margin-bottom: 10px;
    z-index: 30;
  }

  .sidebar.open {
    display: block;
  }

  .command-card header {
    flex-direction: column;
    align-items: flex-start;
  }

  .command-card:hover {
    transform: none;
  }

  /* Touch has no hover — keep copy buttons permanently visible. */
  .copy-cmd {
    opacity: 1;
    position: static;
    display: inline-block;
    margin-top: 8px;
  }

  .dc-thumb {
    width: 54px;
    height: 54px;
  }
}

/* ── Global search ─────────────────────────────────────────────────────────
   Trigger sits under the header on pages with no inline filter (index.html).
   Pages that already have a filter bar use that instead, so every page has a
   search field in the same place. */

.search-trigger-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 18px 24px 0;
}

.search-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.94rem;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}

.search-trigger:hover {
  border-color: var(--gold-deep);
  background: var(--ink-raise-hi);
  color: var(--text);
}

.search-trigger .mag {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
  flex: none;
}

.search-trigger .mag::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -2px;
  width: 6px;
  height: 2px;
  background: currentColor;
  transform: rotate(45deg);
  border-radius: 2px;
}

.search-trigger .grow { flex: 1; }

.search-trigger kbd,
.palette-foot kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  background: var(--ink-deep);
  border: 1px solid var(--rule-hi);
  border-radius: 3px;
  padding: 2px 6px;
}

/* Palette overlay */

.palette[hidden] { display: none; }

.palette {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(7, 6, 5, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 20px 20px;
}

.palette-box {
  width: 100%;
  max-width: 620px;
  background: var(--ink-raise);
  border: 2px solid var(--gold-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

.palette-box input {
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--rule);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.02rem;
}

.palette-box input:focus { outline: none; }
.palette-box input::placeholder { color: var(--text-muted); }

.palette-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1;
}

.palette-results li a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 3px;
  color: var(--text);
  border-left: 2px solid transparent;
}

.palette-results li a .cmd {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gold);
  flex: none;
}

.palette-results li a .cat {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex: none;
}

.palette-results li a .txt {
  color: var(--text-muted);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palette-results li[aria-selected="true"] a,
.palette-results li a:hover {
  background: var(--ink-raise-hi);
  border-left-color: var(--gold);
}

.palette-empty {
  padding: 26px 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}

.palette-foot {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 9px 14px;
  border-top: 2px solid var(--rule);
  color: var(--text-muted);
  font-size: 0.72rem;
  flex-wrap: wrap;
}

/* Sticky filter on the long testers page */
.testers-page .filter-bar {
  position: sticky;
  top: 70px;
  z-index: 15;
  background: var(--ink);
  padding: 8px 0;
  margin-bottom: 6px;
}

@media (max-width: 700px) {
  .palette { padding: 8vh 12px 12px; }
  .palette-results li a { flex-wrap: wrap; gap: 4px 10px; }
  .palette-results li a .cat { margin-left: 0; }
  .search-trigger-wrap { padding: 14px 18px 0; }
}

/* ── Leaderboard ───────────────────────────────────────────────────────── */

.board-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 34px 24px 96px;
}

.board-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.board-tab {
  font-family: var(--font-heading);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 9px 16px;
  background: var(--ink-raise);
  border: 2px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.board-tab:hover {
  color: var(--text);
  border-color: var(--rule-hi);
}

.board-tab.active {
  background: var(--gold);
  border-color: var(--gold-deep);
  color: var(--ink);
}

.board {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rule);
  background: var(--ink-raise);
  box-shadow: var(--shadow-md);
}

.board-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
}

.board-row:last-child { border-bottom: none; }

.board-rank {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-muted);
  min-width: 2.2ch;
  text-align: right;
  flex: none;
}

/* Top three get the gold treatment. */
.board-row:nth-child(1) .board-rank { color: var(--gold); }
.board-row:nth-child(2) .board-rank { color: var(--paper-dim); }
.board-row:nth-child(3) .board-rank { color: var(--vermilion); }

.board-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.board-value {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--gold);
  flex: none;
}

.board-empty {
  padding: 30px 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  list-style: none;
}

.board-note {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-top: 12px;
}

@media (max-width: 700px) {
  .board-page { padding: 24px 18px 64px; }
  .board-row { gap: 10px; padding: 11px 12px; }
  .board-value { font-size: 0.78rem; }
}

/* ── Reduced motion: kill movement, keep colour/state feedback. ────────── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .ticker-track {
    animation: none;
    transform: none;
  }

  .feature-card:hover,
  .steps li:hover,
  .command-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .to-top:hover {
    transform: none;
  }
}