/* 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; }
html:not([data-admin='yes']) .when-admin { display: none !important; }
/* The download page shows one machine's download, the visitor's own (site.js sets html[data-os], the Mac's
   when it can't tell), with a line to switch; with no script it shows both, with no switch line. */
html[data-os='mac'] #windows, html[data-os='windows'] #mac { display: none; }
.os-switch { display: none; margin: 1.25rem 0 0; }
html[data-os] .os-switch { display: block; }
/* 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; }
/* The launch banner (#400, banner.ts): lime on black across the top. Closed, it stays closed (site.js). */
.launch-banner { position: relative; z-index: 3; color: var(--neon); background: var(--ink); border-bottom: 1px solid var(--neon); }
.launch-banner .wrap { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.launch-banner p { flex: 1; margin: 0; font-weight: 700; font-size: 0.9rem; line-height: 1.35; }
.banner-close { flex: none; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--neon); background: transparent; cursor: pointer; }
html[data-banner-closed] .launch-banner { display: none; }
::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;
}
/* Sized so the longest page heading ("Set a new password.") fits one line at every width; a heading that
   still wraps does so in even lines, and no heading carries a forced break but the approved ones. */
h1 { font-size: clamp(2rem, 11.6vw - 0.3rem, 9rem); }
h1, h2, .display { text-wrap: balance; }
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-family: inherit; 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; }
/* The header's logo (#436): the d|b mark and the DJB2B wordmark, as in docs/brand/LOGO_BACK_TO_BACK.dc.html. */
.bar .mark { display: flex; align-items: center; gap: 0.6rem; font-stretch: 100%; font-size: 1.15rem; letter-spacing: 0.22em; }
.bar .mark img { width: auto; height: 1.9rem; }
.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); }
/* Narrow screens: the bar stays one line, and the links sit behind a Menu button (<details>, no script). */
.menu { display: none; position: relative; }
.menu summary {
  padding: 0.55rem 0.9rem;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
  border: 2px solid var(--paper);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ' +'; color: var(--neon); }
.menu[open] summary::after { content: ' −'; }
.menu nav {
  position: absolute;
  z-index: 20;
  right: 0;
  top: calc(100% + 0.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 15rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--ink);
  border: 2px solid var(--paper);
}
.menu nav a { padding: 0.55rem 0; font-stretch: 125%; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.menu nav a[aria-current='page'] { color: var(--neon); }
.menu nav a.btn { margin-top: 0.5rem; padding: 0.8rem 1rem; }
@media (max-width: 60rem) {
  .bar { flex-wrap: nowrap; }
  .bar > .nav { display: none; }
  .menu { display: block; }
}
.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; }
.beta-line { margin: 0 0 0.4rem; font-weight: 700; color: var(--neon); }
/* The login page has no footer: only its legal links, under the form. */
.legal-line { margin: 0 0 3rem; }
/* The footer's links in four groups (#396): Help, Company, Legal, Safety. */
.foot-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.75rem 2rem; margin: 1.5rem 0 2.25rem; }
.foot-groups .foot-links { flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0; }
.foot-head { margin: 0 0 0.35rem; font-stretch: 125%; font-weight: 800; font-size: 0.72rem; line-height: 1.3; letter-spacing: 0.16em; 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); }
/* The Cookies page's long button (S-3): on a phone it wraps inside the column rather than run past it. */
@media (max-width: 40rem) {
  #banner-again { max-width: 100%; white-space: normal; line-height: 1.35; text-align: center; }
}
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']):not([type='radio']), textarea, select {
  display: block;
  width: 100%;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: var(--paper);
  background: var(--ink-2);
  /* --dim, not --rule: a field's edge needs 3:1 against the page (WCAG 1.4.11, STYLE.md). */
  border: 2px solid var(--dim);
  border-radius: 0;
}
textarea { min-height: 7rem; resize: vertical; }
/* Fields keep the site's focus ring (:focus-visible above) and light their border too; this selector is
   more specific than the field rule above, so the border wins (#396). */
input:not([type='checkbox']):not([type='radio']):focus, textarea:focus, select:focus { border-color: var(--neon); }
input[type='checkbox'], input[type='radio'] { 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); }
/* The one dialog for what shouldn't happen (site.js oops, #416), as STYLE.md draws it: the Menu panel's
   ink and 2px paper border, the sentence, the code as a label, the beta line, then Report and Cancel. */
dialog.oops {
  width: min(30rem, calc(100vw - 2 * var(--gutter)));
  margin: auto;
  padding: var(--gutter);
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--paper);
  border-radius: 0;
}
dialog.oops::backdrop { background: rgba(6, 6, 8, 0.8); }
.oops-what { margin: 0 0 0.75rem; }
dialog.oops .note { margin: 0; }
dialog.oops .row { gap: 0.75rem; margin-top: 1.5rem; }
.form { max-width: 30rem; }
/* The small links under a form (Forgot your password?, Log in, Sign up free): a target at least 24px tall (WCAG 2.5.8). */
.form .small a { display: inline-block; padding: 0.3rem 0; }

/* /session's one connection light (Mat #424): lime when it's good, the grey for some trouble, red for gaps; its
   words say which, so the colour is never the only sign. */
.link-light { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.9rem; }
.link-light .dot { flex: none; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--dim); }
.link-light[data-link='good'] .dot { background: var(--neon); }
.link-light[data-link='poor'] .dot { background: var(--bad); }

/* ---------- 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 landing's stage: a real crowd photograph (img/, see LICENSES.md), darkened on the side the type
   sits and tinted to the site's light, with the drawn beams and lasers over it. */
.stage { min-height: min(calc(100svh - 4.5rem), 60rem); display: flex; flex-direction: column; }
.stage .photo { position: absolute; z-index: -2; top: -7rem; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none; }
.stage .photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 65%; filter: brightness(0.7) contrast(1.15); }
.stage .photo::before, .stage .photo::after { content: ''; position: absolute; inset: 0; }
.stage .photo::before { background: linear-gradient(115deg, rgba(198, 255, 0, 0.5), rgba(255, 138, 40, 0.55)); mix-blend-mode: color; opacity: 0.45; }
.stage .photo::after {
  background:
    linear-gradient(90deg, rgba(6, 6, 8, 0.9) 0%, rgba(6, 6, 8, 0.6) 40%, rgba(6, 6, 8, 0.15) 75%, rgba(6, 6, 8, 0.05) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(6, 6, 8, 0) 30%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(6, 6, 8, 0) 18%);
}
@media (max-width: 40rem) {
  .stage .photo img { object-position: 62% 100%; filter: brightness(0.85) contrast(1.1); }
  .stage .photo::before { opacity: 0.3; }
  .stage .photo::after {
    background: linear-gradient(to bottom, rgba(6, 6, 8, 0.8) 0%, rgba(6, 6, 8, 0.7) 30%, rgba(6, 6, 8, 0.7) 62%, rgba(6, 6, 8, 0.35) 82%, rgba(6, 6, 8, 0.55) 100%);
  }
  .stage .lasers { opacity: 0.35; }
  .stage-copy .label, .stage-copy .lede { text-shadow: 0 0 14px rgba(6, 6, 8, 0.95), 0 0 2px rgba(6, 6, 8, 0.9); }
}
.stage .lasers { position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none; opacity: 0.55; }
/* The photo has its own beams: the drawn ones only add colour here. */
.stage::before { opacity: 0.6; }
.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-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(6rem, 13vw, 10rem); }
.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; }
/* Over the photo the label is paper, not dim, and the outlined button keeps a solid ground. */
.stage-copy .label { color: var(--paper); }
.stage-copy .btn:not(.go):not(:hover) { background: var(--ink); }

/* ---------- 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 page head's label and heading run across both columns, so the heading reads on one line; the rest of
     its first column sits under it, and the form or text beside it. */
  .head .split { grid-template-rows: auto auto auto 1fr; row-gap: 0; }
  .head .split > div:first-child { display: contents; }
  .head .split > div:first-child > :is(.label, h1) { grid-column: 1 / -1; }
  .head .split > div:first-child > :not(.label, h1) { grid-column: 1; }
  .head .split > :not(:first-child) { grid-column: 2; grid-row: 3 / -1; }
}
/* A ticker of huge outlined words between sections. */
.ticker { position: relative; 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%); }
}
/* Pause motion (S-N16): a small quiet outline under the strip's right end, clear of the words at every width;
   paper while pressed, since the page's one lime is its main button. */
.ticker-band { display: flex; flex-direction: column; align-items: flex-end; }
.ticker-band > .ticker { align-self: stretch; }
.ticker-band > button { margin: 0.75rem var(--gutter); color: var(--dim); border-color: var(--dim); }
.ticker-band > button:hover, .ticker-band > button[aria-pressed='true'] { color: var(--ink); background: var(--paper); border-color: var(--paper); }
/* After every animation it stops, so it wins for anyone whose device asks for reduced motion (#396) or who
   pressed Pause motion (html[data-still], site.js). Stopped, the words start at the strip's left edge. */
:root[data-still] .stage::before, :root[data-still] .head::before, :root[data-still] .stage .lasers g, :root[data-still] .ticker span { animation: none; }
:root[data-still] .ticker span { padding-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .stage::before, .head::before, .stage .lasers g, .ticker span { animation: none; }
  .ticker span { padding-left: 0; }
  .ticker-band > button { display: none; }
}

/* ---------- 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(--dim); }
.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; }
/* The tick on its own line, the Delete button under it. */
#delete .check { display: flex; margin: 0.5rem 0 1rem; }
/* The matching switch on its own line, clear of Save genres above it. */
#genres-shared-row { display: flex; margin-top: 1.5rem; }
#live-link-form { margin-top: 2rem; }

/* ---------- A DJ's public page, and its genre picker on the account page ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.chips li { padding: 0.4rem 0.8rem; font-stretch: 125%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; border: 2px solid var(--neon); color: var(--neon); }
#dj-mixcloud { margin-top: 1.5rem; }
.genre-pick { margin: 1.5rem 0 1rem; padding: 0; border: 0; }
.genre-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem 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; overflow-wrap: anywhere; }
/* A DJ name shows as its DJ typed it, in a heading or a list, never forced to capitals. */
.dj-name, .list li strong.dj-name { text-transform: none; }
/* A long unbroken name wraps rather than pushing the button off a phone's screen. */
.list li > * { min-width: 0; }
.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; }

/* ---------- Live link-up: the gear pick, the switch, and each DJ's Block and Report ---------- */
.gear-pick { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.gear-pick legend { width: 100%; margin-bottom: 0.6rem; }
/* A pick of one, one choice to a line (privacy-request.html). */
.choices { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.choices legend { margin-bottom: 0.6rem; }
.report-pick { flex-direction: column; flex-wrap: nowrap; }
.report-pick label:not(.check) { width: 100%; }
.live-switch { font-weight: 700; font-size: 1.15rem; }
.live-switch input[type='checkbox'] { width: 1.4rem; height: 1.4rem; }
.live-list .live-actions, .live-list .report-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.report-form label { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.report-form select { width: auto; }
.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; }
/* Once beta.3 is out, the typed code folds behind "On an older app?" (site.js). */
.older-app summary { margin-top: 2rem; cursor: pointer; font-weight: 700; }
.join input { width: 9rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.by-name, .share { margin-top: 1rem; }
.share input { flex: 1; min-width: 14rem; }
@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(--dim); }
.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; }

/* ---------- 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; }
/* A warning isn't an error, so its edge is the calm grey: red is for errors only (STYLE.md). */
.warn { margin: 0; padding: 1.25rem 1.4rem; font-size: 1.15rem; font-weight: 600; border: 2px solid var(--dim); 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); }
/* Phones: the number's column is just the number, so the words get the width. */
@media (max-width: 40rem) { .rules li { grid-template-columns: 4rem 1fr; gap: 0 1rem; } }
.live { margin: 0; max-width: 48rem; font-size: 1.3rem; font-weight: 700; }

/* ---------- Reading pages (How it works, FAQ, the legal pages) ---------- */
.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); }
.prose table { width: 100%; margin: 1.5rem 0 2rem; border-collapse: collapse; }
.prose th, .prose td { padding: 0.7rem 0.9rem 0.7rem 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.prose th:first-child, .prose td:first-child { white-space: nowrap; }
.prose th { font-weight: 800; color: var(--neon); }
/* News: newest post first, each under a rule. */
.post + .post { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.post h2 { margin-top: 0.5rem; }
.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; }