/* DJ back 2 back: the one stylesheet for every page (@Mat #364, #369). A festival at night: one
   typeface (Archivo, condensed to expanded), black and paper, one neon accent for everything you
   press, stage light (white, amber and the neon) in the imagery only, heavy section breaks, no cards.
   The tokens come first; every page's rules follow, by page. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-wdth-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('fonts/archivo-latin-ext-wdth-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;
  --ink: #060608;          /* the night */
  --ink-2: #111114;        /* fields, quiet panels */
  --paper: #f4f1ea;        /* type */
  --dim: #a19d93;          /* secondary type */
  --rule: #2c2c30;         /* thin rules */
  --neon: #c6ff00;         /* THE accent: buttons, labels, numbers, lasers */
  --acid: var(--neon);     /* the old name, for pages written before #369 */
  --bad: #ff5d4d;          /* errors only */
  /* Stage light, imagery only (never a button or a word). */
  --light-white: rgba(244, 241, 234, 0.2);
  --light-amber: rgba(255, 138, 40, 0.24);
  --light-neon: rgba(198, 255, 0, 0.2);
  --font: 'Archivo', system-ui, -apple-system, sans-serif;
  --gutter: 1.25rem;
  --max: 80rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html:not([data-auth='in']) .when-in, html[data-auth='in'] .when-out { display: none !important; }
/* The FAQ is held (404) until support@ has a mailbox: every link to it hides. Delete this rule to turn it on. */
.needs-faq { display: none !important; }
/* The stage light is wider than the page and sways: never let it make the page scroll sideways. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
main { overflow-x: clip; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--paper);
  background: var(--ink);
  font: 400 1.0625rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--neon); }
p { margin: 0 0 0.9rem; }
strong, b { font-weight: 700; }
::selection { color: var(--ink); background: var(--neon); }
:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
/* The first thing a keyboard reaches: straight to the page, past the bar. Hidden until focused. */
.skip { position: absolute; z-index: 10; left: var(--gutter); top: -4rem; padding: 0.7rem 1rem; font-weight: 800; color: var(--ink); background: var(--neon); }
.skip:focus { top: 0.75rem; }
::placeholder { color: var(--dim); opacity: 1; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 48rem; }
.measure { max-width: 40rem; }

/* ---------- Type ---------- */
.display, h1 {
  margin: 0;
  font-stretch: 62%;
  font-weight: 900;
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
h1 { font-size: clamp(3.6rem, 12vw, 9.5rem); }
h2, h2.section { margin: 0 0 1rem; font-stretch: 70%; font-weight: 900; font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 0.92; text-transform: uppercase; }
h3 { margin: 0 0 0.4rem; font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.label, .eyebrow {
  margin: 0 0 0.75rem;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow b { color: var(--neon); font-weight: 700; }
.acid, .neon { color: var(--neon); }
.dim { color: var(--dim); }
.small { font-size: 0.9rem; }
.note { color: var(--dim); font-size: 0.92rem; }
.error { margin: 0.6rem 0 0; color: var(--bad); font-weight: 600; }
.error:empty { display: none; }
.lede { max-width: 38rem; font-size: 1.25rem; line-height: 1.45; }
code { padding: 0.05rem 0.35rem; font-size: 0.9em; background: var(--ink-2); }

/* ---------- The bar, the beta tag and the footer ---------- */
.bar, .top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brandline { display: flex; align-items: center; gap: 0.7rem; }
.mark, .brand {
  margin: 0;
  font-stretch: 62%;
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand a { text-decoration: none; }
.brand svg { display: none; }
.mark b, .two { color: var(--neon); font-weight: 900; }
.beta {
  padding: 0.22rem 0.45rem 0.18rem;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--neon);
}
.nav, .account { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.3rem; }
.nav a {
  padding: 0.35rem 0; /* a tap target of at least 24 px */
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a[aria-current='page'] { color: var(--neon); }
.nav a.btn[aria-current='page'] { color: var(--ink); }
.foot { margin-top: 3rem; padding: 3rem 0 3.5rem; border-top: 3px solid var(--paper); }
.foot .mark { font-size: clamp(3rem, 10vw, 6.5rem); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 1.5rem 0; }
.foot-links a { padding: 0.35rem 0; font-stretch: 125%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.foot-links small { color: var(--dim); font-weight: 600; letter-spacing: 0.08em; }
.beta-line { margin: 0 0 0.4rem; font-weight: 700; color: var(--neon); }

/* ---------- Controls ---------- */
button, .btn, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.35rem;
  font: 700 0.8rem/1 var(--font);
  font-stretch: 125%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--paper);
  background: transparent;
  border: 2px solid var(--paper);
  border-radius: 0;
  cursor: pointer;
}
button:hover, .btn:hover, .button:hover { color: var(--ink); background: var(--paper); }
button.go, .btn.go, button.primary, .button.primary {
  color: var(--ink);
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 0 28px rgba(198, 255, 0, 0.35);
}
button.go:hover, .btn.go:hover, button.primary:hover, .button.primary:hover { background: var(--paper); border-color: var(--paper); box-shadow: none; }
button.quiet, .btn.quiet, .button.quiet, .nav .btn { padding: 0.55rem 0.85rem; font-size: 0.68rem; box-shadow: none; }
button.danger { color: var(--bad); border-color: var(--bad); }
button.danger:hover { color: var(--ink); background: var(--bad); }
button:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
button:disabled:hover { color: var(--paper); background: transparent; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
label { display: block; margin: 0 0 1rem; }
label > span:first-child {
  display: block;
  margin-bottom: 0.35rem;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
input:not([type='checkbox']), textarea {
  display: block;
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink-2);
  border: 2px solid var(--rule);
  border-radius: 0;
}
textarea { min-height: 7rem; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--neon); }
input[type='checkbox'] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--neon); }
.check { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0; }
.say:empty { display: none; }
.say { margin: 0.75rem 0 0; font-weight: 600; }
.say.bad { color: var(--bad); }
.say.ok { color: var(--neon); }
.form { max-width: 30rem; }

/* ---------- Stage light: the landing's hero (.stage) and every page's head band (.head) ---------- */
/* Beams are conic wedges from lamps above the frame, haze a soft glow: drawn here, no images. */
.stage, .head { position: relative; isolation: isolate; }
.stage::before, .head::before, .stage::after, .head::after {
  content: '';
  position: absolute;
  z-index: -1;
  /* From above the bar, so the light falls on it too. */
  top: -7rem;
  left: 50%;
  width: 100vw;
  height: calc(100% + 7rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.stage::before, .head::before {
  background:
    conic-gradient(from 168deg at 18% -12%, transparent 0deg, var(--light-white) 5deg, transparent 11deg, transparent 22deg, var(--light-amber) 27deg, transparent 34deg),
    conic-gradient(from 156deg at 82% -12%, transparent 0deg, var(--light-amber) 6deg, transparent 13deg, transparent 26deg, var(--light-white) 31deg, transparent 37deg),
    conic-gradient(from 172deg at 50% -18%, transparent 0deg, var(--light-neon) 4deg, transparent 8deg, transparent 12deg, var(--light-neon) 16deg, transparent 20deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
  filter: blur(2px);
  transform-origin: 50% 0;
  animation: sweep 14s ease-in-out infinite alternate;
}
.stage::after, .head::after {
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(255, 138, 40, 0.16), transparent 70%),
    radial-gradient(40% 50% at 15% 10%, rgba(244, 241, 234, 0.08), transparent 70%),
    radial-gradient(40% 50% at 85% 10%, rgba(198, 255, 0, 0.08), transparent 70%);
}
@keyframes sweep {
  from { transform: translateX(-50%) skewX(-4deg); }
  to { transform: translateX(-50%) skewX(4deg); }
}
.head { padding-top: 3rem; padding-bottom: 3.5rem; }
.head h1 { margin: 0.5rem 0 1rem; overflow-wrap: anywhere; }

/* The crowd stands against the glow of the stage front, so it reads as a silhouette. */
.stage {
  min-height: min(calc(100svh - 4.5rem), 60rem);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(75% 38% at 50% 100%, rgba(255, 138, 40, 0.34), rgba(198, 255, 0, 0.1) 45%, transparent 75%);
}
.stage .lasers { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none; }
.stage .lasers g { transform-origin: 50% 0; transform-box: view-box; animation: lasers 9s ease-in-out infinite alternate; }
@keyframes lasers {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}
.stage .crowd { position: absolute; z-index: 0; left: 50%; bottom: -1px; width: 100vw; height: clamp(7rem, 18vw, 14rem); transform: translateX(-50%); pointer-events: none; }
.stage-copy { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 1.5rem; padding-bottom: clamp(7rem, 15vw, 11rem); }
.stage-copy h1 { margin: 0.75rem 0 1.5rem; font-size: clamp(4rem, 13.5vw, 11rem); text-shadow: 0 0 60px rgba(6, 6, 8, 0.8); }
.stage-copy .lede { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.stage-copy .row { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) {
  .stage::before, .head::before, .stage .lasers g, .ticker span { animation: none; }
}

/* ---------- Section breaks ---------- */
.block { padding-top: 4rem; padding-bottom: 4rem; border-top: 3px solid var(--paper); }
.block.thin { border-top-width: 1px; border-top-color: var(--rule); }
.split { display: grid; gap: 2rem 4rem; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 5fr 7fr; }
  .split.flip { grid-template-columns: 7fr 5fr; }
}
/* A ticker of huge outlined words between sections. */
.ticker { overflow: hidden; padding: 1.1rem 0; border-top: 3px solid var(--paper); border-bottom: 3px solid var(--paper); white-space: nowrap; }
.ticker span {
  display: inline-block;
  padding-left: 100%;
  font-stretch: 62%;
  font-weight: 900;
  font-size: clamp(2.6rem, 8vw, 6rem);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon);
  animation: ticker 28s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ---------- The landing ---------- */
.timeline { margin: 1rem 0 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: minmax(5.5rem, 17rem) 1fr; gap: 0 2rem; align-items: start; padding: 2rem 0; border-top: 1px solid var(--rule); }
.timeline .n { font-stretch: 62%; font-weight: 900; line-height: 0.8; font-size: clamp(5.5rem, 15vw, 12rem); color: transparent; -webkit-text-stroke: 2px var(--neon); }
.timeline h3 { margin: 0.4rem 0 0.75rem; font-size: clamp(2.4rem, 6vw, 4.4rem); }
.timeline p { max-width: 34rem; color: var(--dim); font-size: 1.15rem; }
.timeline li.hot { margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); color: var(--ink); background: var(--neon); border-top: 0; box-shadow: 0 0 80px rgba(198, 255, 0, 0.25); }
.timeline li.hot .n { -webkit-text-stroke-color: var(--ink); }
.timeline li.hot p { color: var(--ink); }
@media (max-width: 40rem) { .timeline li { grid-template-columns: 1fr; } }
.route { margin: 1.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.route li { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.route b { padding-top: 0.25rem; font-stretch: 125%; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.route .never { color: var(--dim); }
.door-big { margin: 0.5rem 0 2.5rem; font-size: clamp(3.8rem, 14vw, 11rem); }
.door-info { display: grid; margin: 0 0 0 auto; max-width: 56rem; }
.door-info div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.door-info dt { padding-top: 0.25rem; font-stretch: 125%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon); }
.door-info dd { margin: 0; font-size: 1.15rem; }
.example { margin: 0.5rem; padding: 1.5rem; border: 2px solid var(--paper); transform: rotate(1.2deg); }
.example .label { display: flex; justify-content: space-between; }
.example strong { display: block; font-stretch: 70%; font-weight: 900; font-size: 2.6rem; line-height: 1; text-transform: uppercase; }
.example .pct { color: var(--neon); }
.example p { margin: 0.6rem 0 1rem; color: var(--dim); }
.cta .display { margin-bottom: 2rem; font-size: clamp(3.8rem, 14vw, 10rem); }

/* ---------- Sign up, log in, forgot, reset, confirm ---------- */
.auth h1 { margin: 0.5rem 0 1.5rem; }
.perks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.perks li { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); font-size: 1.1rem; }
.perks li::before { content: '+ '; color: var(--neon); font-weight: 900; }
.auth .form button { width: 100%; margin-top: 0.5rem; }

/* ---------- Account ---------- */
.big { margin: 0; font-stretch: 62%; font-weight: 900; font-size: clamp(7rem, 22vw, 14rem); line-height: 0.8; color: var(--neon); text-shadow: 0 0 60px rgba(198, 255, 0, 0.3); }
.big.word { font-size: clamp(4rem, 12vw, 8rem); }
.big-word { margin: 0.5rem 0 0; font-stretch: 70%; font-weight: 900; font-size: 1.8rem; text-transform: uppercase; }
.tag { margin-left: 0.5rem; padding: 0.15rem 0.45rem; color: var(--ink); background: var(--neon); }
.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border: 2px dashed var(--neon); }
.confirm p { margin: 0; }
.confirm .say { flex-basis: 100%; }
.history { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.history li { display: grid; grid-template-columns: 9rem 1fr 11rem 12rem; gap: 0.25rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.history .when { color: var(--dim); }
.history .partner { font-weight: 700; }
.history .status { text-align: right; }
.history .status.played { color: var(--neon); }
.history .status.missed { color: var(--dim); }
@media (max-width: 48rem) {
  .history li { grid-template-columns: 1fr auto; }
  .history .when { grid-column: 1 / -1; font-size: 0.85rem; }
  .history .length { color: var(--dim); }
  .history .status { grid-column: 1 / -1; text-align: left; }
}
.genres { margin: 0 0 1rem; padding: 0; list-style: none; }
.genres li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr 3rem; gap: 0.75rem; align-items: center; padding: 0.3rem 0; }
.genres .track { display: block; background: var(--ink-2); }
.genres .bar { display: block; height: 0.8rem; background: var(--neon); }
.genres .pct { text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.best { margin: 0 0 1rem; padding: 0; list-style: none; }
.best li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--rule); font-weight: 700; }
.best span { color: var(--neon); }
#delete .check { margin: 0.5rem 0 1rem; }

/* ---------- Find a partner, and lists anyone can use (.list, .rows) ---------- */
.list, .rows { margin: 1rem 0 0; padding: 0; list-style: none; }
.list li, .rows li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 1rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--rule); }
.list li:last-child, .rows li:last-child { border-bottom: 1px solid var(--rule); }
.list li strong { font-stretch: 70%; font-weight: 900; font-size: 1.7rem; line-height: 1; text-transform: uppercase; }
.list li small, .rows li small { grid-column: 1 / -1; color: var(--dim); font-size: 0.9rem; }
.list li small.sent-note { color: var(--neon); font-weight: 600; }
.list li small:empty { display: none; }
#incoming li { grid-template-columns: 1fr auto auto; }
#incoming li span { font-weight: 700; font-size: 1.15rem; }
.sent li { display: block; color: var(--dim); }
.code { margin: 1.25rem 0 0.5rem; font-weight: 900; font-size: clamp(2.6rem, 9vw, 4.6rem); letter-spacing: 0.18em; color: var(--neon); text-shadow: 0 0 40px rgba(198, 255, 0, 0.35); }
.join { margin-top: 2rem; }
.join input { width: 9rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
@media (max-width: 30rem) { #incoming li { grid-template-columns: 1fr 1fr; } #incoming li span { grid-column: 1 / -1; } }

/* ---------- Download ---------- */
.unfinished { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 2px dashed var(--neon); }
.unfinished p { margin: 0; }
.specs { margin: 0; border-top: 1px solid var(--rule); }
.specs div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.specs dt { padding-top: 0.2rem; font-stretch: 125%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon); }
.specs dd { margin: 0; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); font-size: 1.1rem; counter-increment: step; }
.steps li::before { content: counter(step); font-stretch: 62%; font-weight: 900; font-size: 2.8rem; line-height: 0.9; color: var(--neon); }

/* ---------- Copyright ---------- */
.owners { display: grid; gap: 2rem 4rem; }
@media (min-width: 56rem) { .owners { grid-template-columns: 7fr 5fr; align-items: end; } }
.big-line { margin: 0; font-stretch: 85%; font-weight: 800; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.12; }
.warn { margin: 0; padding: 1.25rem 1.4rem; font-size: 1.15rem; font-weight: 600; border: 2px solid var(--bad); transform: rotate(-1deg); }
.mix { margin-bottom: 2.5rem; font-size: clamp(2.6rem, 7.5vw, 6rem); }
.rules { margin: 0; padding: 0; list-style: none; counter-reset: rule; }
.rules li { display: grid; grid-template-columns: minmax(4rem, 9rem) 1fr; gap: 0 1.5rem; align-items: start; padding: 1.4rem 0; border-top: 1px solid var(--rule); font-size: 1.2rem; counter-increment: rule; }
.rules li::before { content: counter(rule); font-stretch: 62%; font-weight: 900; font-size: clamp(4rem, 9vw, 7rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 2px var(--neon); }
.rules b { display: block; margin-bottom: 0.3rem; font-stretch: 85%; font-weight: 900; font-size: 1.5rem; text-transform: uppercase; }
.rules li.why { margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); color: var(--ink); background: var(--neon); border-top: 0; }
.rules li.why::before { -webkit-text-stroke-color: var(--ink); }
.live { margin: 0; max-width: 48rem; font-size: 1.3rem; font-weight: 700; }

/* ---------- Reading pages (How it works, FAQ, the legal drafts) ---------- */
.stamp { display: inline-block; margin: 0 0 1.25rem; padding: 0.4rem 0.75rem; font-stretch: 125%; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: var(--neon); }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 3rem; font-size: clamp(1.8rem, 4.5vw, 3rem); }
.prose h3 { margin-top: 2rem; }
.prose h4 { margin: 1.5rem 0 0.4rem; font-weight: 800; font-size: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: 0 0 0.5rem; }
.prose li::marker { color: var(--neon); font-weight: 800; }
.prose details { margin: 0 0 0.5rem; border-top: 1px solid var(--rule); }
.prose summary { padding: 0.9rem 0; cursor: pointer; font-weight: 700; }
.prose .limit, .prose aside { margin: 1.25rem 0; padding: 0.9rem 1.1rem; border-left: 4px solid var(--neon); background: var(--ink-2); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-weight: 800; font-size: 1.15rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--neon); font-weight: 900; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details p { max-width: 44rem; color: var(--dim); }

/* ---------- Shared patterns for other pages (the boards) ---------- */
.card { margin: 0 0 1rem; padding: 1.5rem; border: 2px solid var(--rule); }
.card h3 { margin-bottom: 1rem; }
.badge { display: inline-block; padding: 0.15rem 0.5rem; font-stretch: 125%; font-weight: 800; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--neon); vertical-align: middle; }