/* jarrodbrake.com homepage: the check-up.
   The page is a chart. Pencil = not known yet, ink = told or measured, pen = Jarrod's judgement.
   Newsreader = Jarrod talking. Geist = interface. Geist Mono = anything measured.
   Square corners, 1px hairlines, flat colour. Motion only on transform, opacity, clip-path, stroke-dashoffset. */

:root {
  --paper: #FFFFFF;
  --panel: #F5F7F9;
  --rule: #DDE2E7;
  --pencil: #8A96A3;
  --ink: #12151B;
  --dim: #5B6570;
  --pen: #1F3FD1;
  --good: #14795B;
  --bad: #B42318;
  --on-ink: #FFFFFF;

  --voice: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
  --ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --e-out: cubic-bezier(.2, .8, .2, 1);
  --e-in: cubic-bezier(.4, 0, 1, 1);
  --e-move: cubic-bezier(.65, 0, .35, 1);
  --e-pen: cubic-bezier(.45, .05, .25, 1);
  --e-spring: var(--e-out);

  --gut: 20px;
  --maxw: 1320px;
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    --e-spring: linear(0, .126, .372, .612, .798, .920, .989, 1.020, 1.028, 1.026, 1.019,
      1.012, 1.006, 1.003, 1.001, 1, .999, .999, .999, 1, 1, 1, 1, 1, 1);
  }
}
@media (min-width: 960px) { :root { --gut: 48px; } }

/* Lightbox tokens, swapped in for the score moment only */
[data-mode="lightbox"] {
  --paper: var(--s-paper); --panel: var(--s-panel); --rule: var(--s-rule); --pencil: var(--s-pencil);
  --ink: var(--s-ink); --dim: var(--s-dim); --pen: var(--s-pen); --good: var(--s-good); --bad: var(--s-bad); --on-ink: var(--s-on-ink);
}

/* ===== colour directions (html[data-theme]). Surfaces = the opening, the score moment, the dark sample section. ===== */
:root, html[data-theme="blueprint"] {
  /* Blueprint: the chart drawn on a cobalt blueprint. Jarrod's colour is the pen. */
  --pen-base: #2340E0;
  --s-paper: #2443E6; --s-panel: #2E4DEE; --s-rule: #5470F2; --s-pencil: #A9B8FF; --s-grid: #4864F0;
  --s-ink: #FFFFFF; --s-dim: #DCE3FF; --s-pen: #EAFF62; --s-good: #B8FFD9; --s-bad: #FFD0C8; --s-on-ink: #1E37C8;
  --s-glow: rgba(234, 255, 98, .18);
}
html[data-theme="theatre"] {
  /* Theatre: pale surgical sage, green-black ink, ballpoint pen, highlighter marks. */
  --s-paper: #E3EDE8; --s-panel: #F5F9F7; --s-rule: #C6D6CD; --s-pencil: #7F948A; --s-grid: #CBDAD2;
  --s-ink: #0E1A17; --s-dim: #4C5D56; --s-pen: #1F3FD1; --s-good: #0F7A5A; --s-bad: #B42318; --s-on-ink: #FFFFFF;
  --s-glow: rgba(31, 63, 209, .10);
}
html[data-theme="lightbox"] {
  /* Lightbox: a lit-up ice panel, graphite ink, ballpoint pen. */
  --s-paper: #E8F0F9; --s-panel: #FFFFFF; --s-rule: #C8D5E4; --s-pencil: #8494A6; --s-grid: #CFDBE8;
  --s-ink: #12151B; --s-dim: #4F5B69; --s-pen: #2340E0; --s-good: #12805C; --s-bad: #B42318; --s-on-ink: #FFFFFF;
  --s-glow: rgba(35, 64, 224, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--ui); font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (min-width: 960px) { body { font-size: 18px; } }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pen); }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
[hidden] { display: none !important; }

/* ---------- masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 30; background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.mast__in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mast__id { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.mast__mark {
  width: 32px; height: 32px; flex: none; background: var(--ink); color: var(--on-ink);
  font: 600 13px/32px var(--ui); text-align: center; letter-spacing: .02em;
}
.mast__name { font-weight: 600; font-size: 16px; line-height: 1.15; }
.mast__place { display: block; font-size: 13px; color: var(--dim); font-weight: 400; }
.mast__nav { display: none; gap: 28px; font-size: 15px; align-items: center; }
.mast__nav a { text-decoration: none; color: var(--dim); }
.mast__nav a:hover { color: var(--ink); }
.mast__nav .mono { color: var(--ink); }
.mast__quiz { display: flex; align-items: center; gap: 4px; }
@media (min-width: 960px) { .mast__nav { display: flex; } }

/* ---------- layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.stage { display: grid; gap: 32px; padding-block: 28px 56px; }
@media (min-width: 960px) {
  .stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; padding-block: 64px 96px; align-items: start; }
  .stage__side { position: sticky; top: 88px; }
}
.convo { min-width: 0; max-width: 680px; }

/* ---------- opening ---------- */
.intro { font-size: 16px; line-height: 1.55; color: var(--dim); max-width: 34em; margin: 0 0 28px; font-weight: 400; }
.intro b { color: var(--ink); font-weight: 600; }
@media (min-width: 960px) { .intro { font-size: 19px; margin-bottom: 44px; } }
.voice { font-family: var(--voice); font-weight: 400; font-optical-sizing: auto; text-wrap: balance; }
.hello { font-size: 36px; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 22px; display: block; }
@media (min-width: 960px) { .hello { font-size: 64px; margin-bottom: 32px; } }

.namefield { display: flex; align-items: stretch; border-bottom: 1px solid var(--ink); max-width: 560px; }
.namefield input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 0; height: 56px;
  font-size: 20px; outline: none; border-radius: 0;
}
@media (min-width: 960px) { .namefield input { font-size: 22px; } }
.namefield input::placeholder { color: var(--pencil); }
.sq {
  width: 56px; height: 56px; flex: none; border: 0; background: var(--ink); color: var(--on-ink);
  display: grid; place-items: center; transition: opacity 120ms var(--e-out);
}
.sq:disabled { opacity: .35; cursor: default; }
.sq svg { width: 22px; height: 22px; }
.fine { font-size: 13px; line-height: 1.5; color: var(--dim); margin: 10px 0 0; max-width: 40em; }
.fine a { color: var(--dim); }
.textlink {
  border: 0; background: none; padding: 8px 0; min-height: 44px; color: var(--dim);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: 15px;
}
.textlink:hover { color: var(--ink); }

/* ---------- the chart ---------- */
.chart {
  position: relative; background: var(--paper); border: 1px solid var(--ink);
  font-size: 14px; line-height: 1.4; container-type: inline-size;
}
.chart__head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.chart__for { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart__for b { font-weight: 600; }
.chart__biz { font-family: var(--mono); }
.chart__biz.is-blank { color: var(--pencil); letter-spacing: .25em; }
.chart__sub { display: block; color: var(--dim); font-size: 13px; }
.chart__date { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: right; white-space: nowrap; }
.chart__sec { padding: 10px 16px 12px; border-bottom: 1px solid var(--rule); }
.chart__sec:last-child { border-bottom: 0; }
.chart__label { font-size: 12px; color: var(--dim); margin: 0 0 6px; }
.chart__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.row { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr) 30px; gap: 12px; align-items: center; position: relative; }
.row__name { font-size: 13px; min-width: 0; }
.row__val { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.row__val.is-hidden { color: var(--pencil); letter-spacing: .1em; }
.track { position: relative; height: 14px; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 1px dashed var(--pencil); }
.row[data-state="ink"] .track::before { border-top-style: solid; border-top-color: var(--rule); }
.rail { position: absolute; inset: 0; transform: translateX(var(--x, 50%)); transition: transform 520ms var(--e-spring); }
.dot {
  position: absolute; left: -5px; top: 2px; width: 10px; height: 10px;
  transition: opacity 160ms var(--e-out), transform 280ms var(--e-spring);
}
.dot--pencil { border: 1px dashed var(--pencil); background: var(--paper); }
.dot--ink { background: var(--ink); opacity: 0; transform: scale(.6); }
.row[data-state="none"] .dot { opacity: 0; transform: scale(.6); }
.row[data-state="ink"] .dot--ink { opacity: 1; transform: none; }
.row[data-state="ink"] .dot--pencil { opacity: 0; }
.want { position: absolute; top: -1px; height: 16px; border-left: 1.75px solid var(--pen); border-right: 1.75px solid var(--pen); opacity: 0; transition: opacity 300ms var(--e-out); }
.chart.is-marked .want { opacity: 1; }
.entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.entries li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
.entries .k { color: var(--dim); }
.entries .v { font-family: var(--mono); overflow-wrap: anywhere; }
.entries .v s { color: var(--dim); text-decoration-color: var(--pen); text-decoration-thickness: 1.5px; }
.entries li.is-new { animation: write 260ms linear both; }
@keyframes write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.entries .blank { color: var(--pencil); letter-spacing: .2em; }
.notes { display: grid; gap: 4px; }
.note { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 16px; line-height: 1.35; }
.greek { display: block; height: 10px; }
.pen-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pen-layer path { fill: none; stroke: var(--pen); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* chart sizes */
.chart--peek .chart__sec--entries, .chart--peek .chart__sec--notes { display: none; }
.peekwrap { margin-top: 36px; position: relative; max-width: 480px; }
.peeknote { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 4px; }
.peeknote svg { width: 46px; height: 28px; overflow: visible; transform: scaleY(-1) translateY(-10px); }
@media (min-width: 960px) { .peekwrap { display: none; } }

/* mobile strip */
.strip {
  position: sticky; top: 56px; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--rule);
  padding: 8px var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center;
}
.strip__for { font-size: 13px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__for b { font-weight: 600; }
.strip__last { font: 400 13px/1.4 var(--mono); grid-column: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip__last.is-new { animation: write 260ms linear both; }
.strip__dots { grid-column: 2; grid-row: 2; display: flex; gap: 5px; }
.strip__dots i { width: 8px; height: 8px; border: 1px dashed var(--pencil); }
.strip__dots i.on { background: var(--ink); border: 0; }
.strip__btn { grid-column: 2; grid-row: 1; border: 0; background: none; padding: 6px 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; min-height: 32px; }
@media (min-width: 960px) { .strip { display: none; } }

/* chart dialog (mobile "See chart") */
.sheetdlg { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--paper); }
.sheetdlg::backdrop { background: rgba(11, 27, 43, .4); }
.sheetdlg__in { padding: 16px var(--gut) 32px; display: grid; gap: 16px; }
.sheetdlg__bar { display: flex; justify-content: space-between; align-items: center; }

/* ---------- quiz screen ---------- */
.qbar { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 0 0 12px; }
.qbar button { border: 0; background: none; padding: 8px 0; font-size: 15px; color: var(--dim); display: flex; align-items: center; gap: 6px; min-height: 44px; }
.qbar button:hover { color: var(--ink); }
.qbar svg { width: 16px; height: 16px; }
.screen { view-transition-name: screen; }
.chap { margin: 4px 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.chap__n { font: 400 13px/1 var(--mono); color: var(--dim); display: block; margin-bottom: 8px; }
.chap__name { font-size: 26px; line-height: 1.2; margin: 0 0 6px; display: block; }
.chap__why { font-size: 15px; color: var(--dim); margin: 0; }
.micro { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; margin: 0 0 18px; }
.micro svg { width: 18px; height: 18px; margin-top: 3px; overflow: visible; }
.micro p { margin: 0; font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 19px; line-height: 1.4; animation: write 300ms linear both; }
@media (min-width: 960px) { .micro p { font-size: 22px; } }
.reflect { font-size: 15px; color: var(--dim); margin: 0 0 6px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.qtext { font-size: 28px; line-height: 1.15; margin: 0 0 8px; padding: 0; display: block; }
@media (min-width: 960px) { .qtext { font-size: 44px; } }
.qtext:focus { outline: none; }
.why { font-size: 14px; color: var(--dim); margin: 0 0 18px; max-width: 40em; }
.opts { display: grid; gap: 8px; margin: 18px 0 0; }
.opt {
  position: relative; display: block; width: 100%; text-align: left; min-height: 60px;
  padding: 16px 48px 16px 18px; background: var(--paper); border: 1px solid var(--rule);
  font-size: 17px; line-height: 1.35; overflow: hidden; isolation: isolate;
}
.opt::before {
  content: ""; position: absolute; inset: 0; background: var(--ink); z-index: -1;
  transform: scaleX(0); transform-origin: var(--ox, 0%) 50%; transition: transform 120ms var(--e-out);
}
.opt[aria-pressed="true"]::before, .opt[aria-checked="true"]::before { transform: scaleX(1); }
.opt[aria-pressed="true"], .opt[aria-checked="true"] { color: var(--on-ink); border-color: var(--ink); transition: color 0ms 60ms; }
.opt__desc { display: block; font-size: 14px; color: var(--dim); margin-top: 3px; }
.opt[aria-pressed="true"] .opt__desc, .opt[aria-checked="true"] .opt__desc { color: inherit; opacity: .8; }
.opt__key { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 400 13px/1 var(--mono); color: var(--pencil); display: none; }
@media (pointer: fine) and (min-width: 960px) { .opt__key { display: block; } }
@media (hover: hover) { .opt:hover { border-color: var(--ink); } }
.opts--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.opts--chips .opt { width: auto; min-height: 48px; padding: 11px 16px; font-size: 16px; }
.opts--states { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.opts--states .opt { min-height: 48px; padding: 10px 0; text-align: center; font-family: var(--mono); font-size: 15px; }
.row2 { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.row2[hidden] { display: none; }
.row2 .rowq { font-family: var(--voice); font-size: 22px; line-height: 1.25; margin: 0 0 4px; }
@media (min-width: 960px) { .row2 .rowq { font-size: 26px; } }
.field { display: grid; gap: 6px; margin: 0 0 16px; }
.field label { font-size: 14px; color: var(--dim); }
.field input, .field textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid var(--rule); background: var(--paper);
  font-size: 18px; border-radius: 0; outline: none;
}
.field textarea { min-height: 112px; resize: vertical; line-height: 1.45; }
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--pencil); }
.field .err { font-size: 14px; color: var(--bad); margin: 0; }
.otherfield { margin-top: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; min-height: 44px; padding: 10px 0; font-size: 15px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); flex: none; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 24px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 16px; text-decoration: none;
}
.btn:hover { color: var(--on-ink); }
.btn--line { background: var(--paper); color: var(--ink); }
.btn--line:hover { color: var(--ink); background: var(--panel); }
.btn--wide { width: 100%; }
.btn:disabled { opacity: .35; cursor: default; }
.btn .sending { display: block; height: 1px; width: 40px; background: currentColor; transform-origin: 0 50%; animation: sweep 900ms linear 3; }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* progress ruler */
.ruler { margin-top: 36px; }
.ruler__label { font-size: 13px; color: var(--dim); margin: 0 0 8px; display: flex; justify-content: space-between; gap: 12px; }
.ruler__scan { font-family: var(--mono); color: var(--dim); }
.ruler__bar { position: relative; height: 12px; }
.ruler__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; border-top: 1px dashed var(--pencil); }
.ruler__fill { position: absolute; left: 0; top: 6px; right: 0; border-top: 1px solid var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 220ms var(--e-out); }
.ruler__tick { position: absolute; top: 0; width: 1px; height: 12px; background: var(--pencil); }
.ruler__tick.done { background: var(--ink); }
.ruler__now { position: absolute; top: 1px; width: 3px; height: 10px; background: var(--ink); margin-left: -1px; left: 0; transform: translateX(var(--px, 0)); transition: transform 220ms var(--e-out); }

/* ---------- analysing ---------- */
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font: 400 14px/1.45 var(--mono); }
.checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--dim); }
.checks li.done { color: var(--ink); }
.checks svg { width: 16px; height: 16px; margin-top: 2px; overflow: visible; }

/* ---------- gate ---------- */
.gate { max-width: 520px; }
.gate h2 { font-size: 30px; line-height: 1.15; margin: 0 0 6px; }
@media (min-width: 960px) { .gate h2 { font-size: 40px; } }
.gate .where { font-family: var(--voice); font-size: 22px; margin: 18px 0 14px; }
.gate .top { font-size: 16px; color: var(--dim); margin: 0; }

/* ---------- reveal (lightbox) ---------- */
.lightbox { background: var(--paper); color: var(--ink); min-height: 100svh; display: grid; align-items: center; }
.lightbox__in { max-width: var(--maxw); margin: 0 auto; padding: 72px var(--gut); width: 100%; display: grid; gap: 40px; }
@media (min-width: 960px) { .lightbox__in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 64px; align-items: center; } }
.lb__line { font-size: 26px; line-height: 1.2; margin: 0; }
@media (min-width: 960px) { .lb__line { font-size: 36px; } }
.score { font: 400 112px/1 var(--mono); letter-spacing: -.04em; margin: 18px 0 8px; font-variant-numeric: tabular-nums; }
@media (min-width: 960px) { .score { font-size: 176px; } }
.gauge { position: relative; height: 40px; max-width: 520px; margin-bottom: 26px; }
.gauge__line { position: absolute; left: 0; right: 0; top: 14px; border-top: 1px solid var(--dim); }
.gauge__tick { position: absolute; top: 9px; width: 1px; height: 10px; background: var(--dim); }
.gauge__tick.big { top: 5px; height: 18px; }
.gauge__lbl { position: absolute; top: 26px; font: 400 12px/1 var(--mono); color: var(--dim); transform: translateX(-50%); }
.gauge__rail { position: absolute; inset: 0; transition: transform 900ms cubic-bezier(.25, 1, .5, 1); transform: translateX(0); }
.gauge__needle { position: absolute; left: -1px; top: 0; width: 3px; height: 28px; background: var(--ink); }
.gauge__want { position: absolute; top: 3px; height: 22px; border-left: 1.75px solid var(--pen); border-right: 1.75px solid var(--pen); opacity: 0; transition: opacity 320ms var(--e-out); }
.gauge__want.on { opacity: 1; }
.gauge__wantlbl { position: absolute; top: -20px; font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 15px; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity 300ms var(--e-out); }
.gauge__wantlbl.on { opacity: 1; }
.band { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 30px; line-height: 1.1; margin: 0 0 10px; clip-path: inset(0 100% 0 0); transition: clip-path 420ms var(--e-pen); }
.band.on { clip-path: inset(0 0 0 0); }
@media (min-width: 960px) { .band { font-size: 44px; } }
.bandline { color: var(--dim); max-width: 32em; margin: 0 0 24px; opacity: 0; transition: opacity 200ms var(--e-out); }
.bandline.on { opacity: 1; }
.lb__more { opacity: 0; transition: opacity 200ms var(--e-out); }
.lb__more.on { opacity: 1; }
.lightbox .btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ---------- report ---------- */
.report { padding-block: 56px 32px; }
.repgrid { display: grid; gap: 32px; }
@media (min-width: 1100px) { .repgrid { grid-template-columns: 180px minmax(0, 1fr) 300px; gap: 48px; } }
.repidx { display: none; }
@media (min-width: 1100px) {
  .repidx { display: block; position: sticky; top: 88px; align-self: start; font-size: 14px; }
  .repidx ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .repidx a { text-decoration: none; color: var(--dim); display: flex; gap: 10px; }
  .repidx a.on { color: var(--ink); }
  .repidx .mono { color: var(--pencil); }
}
.repmain { min-width: 0; display: grid; gap: 56px; }
.repsec h2 { font-family: var(--voice); font-weight: 400; font-size: 30px; line-height: 1.2; margin: 0 0 18px; text-wrap: balance; }
@media (min-width: 960px) { .repsec h2 { font-size: 36px; } }
.quote { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 22px; line-height: 1.35; margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--rule); padding: 6px 10px; font-size: 14px; }
.scorecard .row { grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: "name val" "track track"; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.scorecard .row__name { grid-area: name; font-size: 16px; }
.scorecard .row__val { grid-area: val; font-size: 16px; }
.scorecard .track { grid-area: track; }
@media (min-width: 760px) {
  .scorecard .row { grid-template-columns: 240px minmax(0, 1fr) 48px; grid-template-areas: "name track val"; }
}
.scorecard .rownote { grid-column: 1 / -1; font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 15px; margin: 0; }
.measured { font: 400 13px/1.5 var(--mono); color: var(--dim); margin: 14px 0 0; }
.finding { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--ink); }
.finding + .finding { margin-top: 36px; }
.finding__n { display: flex; align-items: baseline; gap: 12px; }
.finding__n svg { width: 26px; height: 32px; flex: none; overflow: visible; }
.finding h3 { font-family: var(--voice); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0; text-wrap: balance; }
@media (min-width: 960px) { .finding h3 { font-size: 28px; } }
.finding p { margin: 0; max-width: 62ch; }
.finding .cost { font-family: var(--mono); font-size: 15px; }
.plan { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 1px solid var(--ink); display: grid; gap: 14px; }
.plan li { display: grid; gap: 2px; }
.plan .do { font-weight: 600; }
.plan .when { font: 400 13px/1.4 var(--mono); color: var(--dim); }
.order { font-family: var(--voice); font-size: 26px; line-height: 1.3; margin: 0; max-width: 30em; text-wrap: balance; }
.totals { font-family: var(--mono); font-size: 16px; }
details.how { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px; }
details.how summary { cursor: pointer; font-size: 15px; color: var(--dim); min-height: 44px; display: flex; align-items: center; }
details.how ul { margin: 6px 0 0; padding-left: 18px; font-size: 15px; color: var(--dim); display: grid; gap: 6px; }
.aside { font-size: 16px; color: var(--dim); max-width: 62ch; margin: 0; }
.aside b { color: var(--ink); font-weight: 600; }
.repmargin { display: none; }
@media (min-width: 1100px) { .repmargin { display: block; position: sticky; top: 88px; align-self: start; } }

/* ---------- next steps ---------- */
.next { display: grid; gap: 28px; padding-top: 28px; border-top: 1px solid var(--ink); }
@media (min-width: 960px) { .next { grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; } }
.exam { display: grid; gap: 4px; }
.exam__by { font-size: 13px; color: var(--dim); }
.exam__sig { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 34px; line-height: 1.1; }
.exam__who { font-size: 15px; }
.promise { font-family: var(--voice); font-style: italic; font-size: 22px; line-height: 1.35; margin: 18px 0 0; max-width: 26em; }
.ctas { display: grid; gap: 10px; }
.ctas .sub { font-size: 14px; color: var(--dim); margin: -2px 0 6px; }
.ctas .tot { font: 400 14px/1.4 var(--mono); color: var(--dim); margin: -2px 0 6px; }
.splitpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; }
.splitpick .opt { min-height: 52px; padding: 10px 12px; font-size: 15px; text-align: center; }
.panel { border: 1px solid var(--rule); padding: 16px; display: grid; gap: 4px; animation: rise 160ms var(--e-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.slots { display: grid; gap: 14px; max-height: 360px; overflow-y: auto; }
.slots__day { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.slots__row { display: flex; flex-wrap: wrap; gap: 6px; }
.slots__row .opt { width: auto; min-height: 44px; padding: 8px 12px; font: 400 14px/1 var(--mono); }
.done { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 20px; line-height: 1.4; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.done svg { width: 20px; height: 20px; margin-top: 4px; overflow: visible; }

/* ---------- below the fold ---------- */
.sec { padding-block: 64px; border-top: 1px solid var(--rule); }
@media (min-width: 960px) { .sec { padding-block: 104px; } }
.sec h2 { font-family: var(--voice); font-weight: 400; font-size: 30px; line-height: 1.15; margin: 0 0 12px; text-wrap: balance; }
@media (min-width: 960px) { .sec h2 { font-size: 44px; } }
.sec .lede { font-size: 17px; color: var(--dim); max-width: 38em; margin: 0 0 36px; }
.sample { display: grid; gap: 28px; }
@media (min-width: 960px) { .sample { grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr); gap: 32px; align-items: center; } }
.callouts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.callouts li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; font-size: 16px; }
.callouts .n { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 20px; line-height: 1.2; }
.callouts .n svg { width: 22px; height: 26px; overflow: visible; }
.register { border-top: 1px solid var(--ink); }
.entry { display: grid; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 960px) { .entry { grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 32px; } }
.entry__meta { font: 400 13px/1.5 var(--mono); color: var(--dim); }
.entry__meta b { display: block; font: 600 15px/1.4 var(--ui); color: var(--ink); }
.entry__found { font-family: var(--voice); font-size: 21px; line-height: 1.35; margin: 0; }
.entry__changed { margin: 6px 0 0; font-size: 16px; }
.entry__src { font: 400 12px/1.5 var(--mono); color: var(--dim); }
.who { display: grid; gap: 32px; }
@media (min-width: 960px) { .who { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } }
.who__card { border: 1px solid var(--ink); padding: 22px; display: grid; gap: 14px; }
.who__mark { width: 64px; height: 64px; background: var(--ink); color: var(--on-ink); font: 600 22px/64px var(--ui); text-align: center; }
.who__cred { font: 400 13px/1.6 var(--mono); color: var(--dim); }
.who__badges { display: flex; gap: 16px; align-items: center; }
.who__text p { font-family: var(--voice); font-size: 20px; line-height: 1.5; margin: 0 0 16px; max-width: 34em; }
@media (min-width: 960px) { .who__text p { font-size: 22px; } }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; border-left: 1px solid var(--ink); }
.timeline li { position: relative; display: grid; gap: 2px; }
.timeline li::before { content: ""; position: absolute; left: -22px; top: 6px; width: 9px; height: 9px; background: var(--ink); }
.timeline .d { font: 400 13px/1.4 var(--mono); color: var(--dim); }
.timeline .t { font-size: 17px; max-width: 30em; }
@media (min-width: 960px) {
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-left: 0; padding-top: 26px; }
  .timeline::before { left: 0; right: 0; top: 4px; bottom: auto; border-left: 0; border-top: 1px solid var(--ink); }
  .timeline li::before { left: 0; top: -26px; }
}
.closing { display: grid; gap: 28px; }
@media (min-width: 960px) { .closing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; } }

/* footer */
.foot { border-top: 1px solid var(--rule); padding-block: 0 48px; font-size: 14px; color: var(--dim); }
.foot__ticks { height: 8px; margin-bottom: 40px; }
.foot__row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 10px; }
.foot__row b { color: var(--ink); font-weight: 600; }
.foot a { color: var(--dim); }

/* motion off */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
::view-transition-old(screen) { animation: vt-out 160ms var(--e-in) both; }
::view-transition-new(screen) { animation: vt-in 220ms var(--e-out) both; }
html[data-dir="back"]::view-transition-old(screen) { animation-name: vt-out-back; }
html[data-dir="back"]::view-transition-new(screen) { animation-name: vt-in-back; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(24px); } }
@keyframes vt-out-back { to { opacity: 0; transform: translateX(24px); } }
@keyframes vt-in-back { from { opacity: 0; transform: translateX(-24px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(screen), ::view-transition-new(screen) { animation: none; }
}

/* phases */
body[data-phase="quiz"] .below, body[data-phase="analysing"] .below, body[data-phase="gate"] .below { display: none; }
@media (max-width: 959px) {
  .stage__side { display: none; }
  body[data-phase="analysing"] .stage__side, body[data-phase="gate"] .stage__side { display: block; order: -1; }
  body[data-phase="gate"] .stage__side .chart { transform-origin: 50% 0; }
}
@media (min-width: 960px) {
  .stage__side .chart { font-size: 15px; }
  .stage__side .row__name { font-size: 14.5px; }
  .stage__side .chart__rows { gap: 14px; }
  .stage__side .chart__sec { padding: 14px 20px 16px; }
  .stage__side .chart__head { padding: 16px 20px; }
  .stage__side .entries { font-size: 14px; }
  .sidenote { margin: 0 0 12px 4px; }
}
.sidenote { display: none; }
@media (min-width: 960px) { .sidenote { display: flex; } }
/* long business names wrap on the full sheet; only the small peek truncates */
.chart:not(.chart--peek) .chart__for { white-space: normal; }
@media (max-width: 959px) {
  body[data-phase="analysing"] .stage__side .chart__sec--entries,
  body[data-phase="gate"] .stage__side .chart__sec--entries { display: none; }
  body[data-phase="gate"] .stage, body[data-phase="analysing"] .stage { gap: 20px; padding-top: 16px; }
}

/* ===== energy pass: the lightbox opening, the scan beam, live readouts ===== */
/* The opening is the empty chart held up to the light. It flips to paper the moment the check-up starts. */
body[data-phase="intro"] .mast, body[data-phase="intro"] .heroband {
  --paper: var(--s-paper); --panel: var(--s-panel); --rule: var(--s-rule); --pencil: var(--s-pencil);
  --ink: var(--s-ink); --dim: var(--s-dim); --pen: var(--s-pen); --good: var(--s-good); --bad: var(--s-bad); --on-ink: var(--s-on-ink);
}
.heroband { background: var(--paper); color: var(--ink); transition: background-color 380ms var(--e-move), color 380ms var(--e-move); position: relative; overflow: hidden; }
.mast { transition: background-color 380ms var(--e-move); }
body[data-phase="intro"] .heroband .stage { padding-block: 40px 72px; }
@media (min-width: 960px) { body[data-phase="intro"] .heroband .stage { padding-block: 88px 120px; min-height: calc(100svh - 56px); align-items: center; } }
/* fine measuring grid behind the opening, like a light table (1px dots, very low contrast) */
body[data-phase="intro"] .heroband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, var(--s-grid) 1px, transparent 1.2px);
  background-size: 24px 24px;
}
.heroband .wrap { position: relative; }
body[data-phase="intro"] .namefield input { color: var(--ink); }
body[data-phase="intro"] .namefield { border-bottom-color: var(--ink); }

/* the scan beam */
.beam { position: absolute; left: -1px; right: -1px; top: 0; height: 1px; background: var(--pen); pointer-events: none; opacity: 0; z-index: 2; will-change: transform; }
.beam::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 64px; background: linear-gradient(to top, var(--s-glow), transparent); }
.beam::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 5px; background: var(--pen); opacity: .25; filter: none; }
.chart.is-scanning .beam { animation: beam 3.2s cubic-bezier(.45, .05, .25, 1) infinite; }
.chart.is-sweep .beam { animation: beam 1.1s cubic-bezier(.45, .05, .25, 1) 1; }
@keyframes beam { 0% { transform: translateY(0); opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(var(--h, 300px)); opacity: 0; } }
.chart { overflow: hidden; }
[data-mode="lightbox"] .chart, body[data-phase="intro"] .chart { background: var(--panel); border-color: var(--rule); }
/* ruler edge along the top of the chart: it's an instrument */
.chart__ruler { display: block; height: 7px; border-bottom: 1px solid var(--rule); background-image: repeating-linear-gradient(to right, var(--pencil) 0 1px, transparent 1px 8px); background-size: 100% 4px; background-repeat: no-repeat; background-position: 0 0; opacity: .7; }

/* live readout under the opening chart */
.readout { font: 400 12.5px/1.5 var(--mono); color: var(--dim); margin: 12px 2px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.readout .live { width: 7px; height: 7px; background: var(--pen); animation: blink 1.6s steps(1) infinite; flex: none; }
.readout .cur { display: inline-block; width: 7px; height: 13px; background: var(--dim); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.readout b { color: var(--ink); font-weight: 400; }

/* answer ink fill gets a pen-blue leading edge as it sweeps */
.opt::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; left: var(--ox, 0%); background: var(--pen); opacity: 0; }
.opt[aria-pressed="true"]::after { animation: edge 260ms var(--e-out) 1; }
@keyframes edge { 0% { opacity: 1; transform: scaleY(.3); } 100% { opacity: 0; transform: scaleY(1); } }

/* the ruler's current tick breathes so it reads as live */
.ruler__now { animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }

/* proof: number-first register with count-ups */
.entry__big { font: 400 40px/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.entry__big .from { color: var(--pencil); text-decoration: line-through; text-decoration-color: var(--pen); text-decoration-thickness: 2px; font-size: 26px; }
.entry__big .arr { color: var(--pen); font-size: 22px; }
@media (min-width: 960px) { .entry__big { font-size: 52px; } .entry__big .from { font-size: 32px; } }

/* sample chart section sits on a lightbox panel too */
.sec--dark { --paper: var(--s-paper); --panel: var(--s-panel); --rule: var(--s-rule); --pencil: var(--s-pencil); --ink: var(--s-ink); --dim: var(--s-dim); --pen: var(--s-pen); --good: var(--s-good); --bad: var(--s-bad); --on-ink: var(--s-on-ink); background: var(--paper); color: var(--ink); border-top: 0; }
.sec--dark .fine { color: var(--dim); }
.mast { color: var(--ink); }
.readout { flex-wrap: nowrap; align-items: flex-start; }
.readout > span:nth-child(2) { min-width: 0; }
.readout .live { margin-top: 5px; }
.readout .cur { flex: none; margin-top: 2px; }
body[data-phase="intro"] .heroband::before { opacity: 1; background-image: radial-gradient(circle at 1px 1px, var(--s-grid) 1px, transparent 1.3px); }
.readout { display: none; }
body[data-phase="intro"] .readout { display: flex; }
@media (max-width: 959px) {
  body[data-phase="gate"] .stage__side { order: 0; }
}
.chart { overflow: visible; }
.beamwrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.entry__changed { margin: 0 0 8px; font-size: 17px; color: var(--ink); }
.entry__found { font-size: 18px; color: var(--dim); }
@media (min-width: 960px) { .entry__found { font-size: 19px; } }
.sumcard { border: 1px solid var(--ink); padding: 20px; display: grid; gap: 2px; background: var(--paper); }
.sum__lbl { font-size: 12px; color: var(--dim); }
.sum__score { font-size: 56px; line-height: 1; letter-spacing: -.03em; }
.sum__score small { font-size: 18px; color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.sum__band { font-family: var(--voice); font-style: italic; color: var(--pen); font-size: 20px; }
.sum__fix { font-family: var(--voice); font-size: 19px; line-height: 1.3; }
.chart__sec--entries:has(.blank) { display: none; }
#liveChart .chart__sec--entries:has(.blank), #sampleChart .chart__sec--entries:has(.blank) { display: block; }
.repmain .next { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.repmain .exam { grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: end; }
.repmain .exam .promise { grid-column: 1 / -1; margin-top: 10px; }
.repmain .exam__by { grid-column: 1 / -1; }
.repmain .ctas { max-width: 520px; }

/* The chart stays on its light-table through the whole check-up */
body:not([data-phase="intro"]):not([data-phase="result"]) .stage__side,
.strip {
  --paper: var(--s-paper); --panel: var(--s-panel); --rule: var(--s-rule); --pencil: var(--s-pencil);
  --ink: var(--s-ink); --dim: var(--s-dim); --pen: var(--s-pen); --good: var(--s-good); --bad: var(--s-bad); --on-ink: var(--s-on-ink);
  background: var(--paper); color: var(--ink);
}
@media (min-width: 960px) {
  body:not([data-phase="intro"]):not([data-phase="result"]) .stage__side { padding: 28px; position: sticky; top: 80px; }
  body:not([data-phase="intro"]):not([data-phase="result"]) .stage__side::before {
    content: "Your chart, written as you answer"; display: block; font: 400 12.5px/1.4 var(--mono); color: var(--dim); margin: 0 0 12px;
  }
}
@media (max-width: 959px) {
  body[data-phase="analysing"] .stage__side, body[data-phase="gate"] .stage__side { padding: 16px; margin-inline: calc(var(--gut) * -1); }
}
.strip { border-bottom-color: var(--rule); }
.strip__dots i { border-color: var(--pencil); }
.strip__dots i.on { background: var(--ink); }
.micro p { color: var(--pen); }
@media (hover: hover) { .opt:hover { border-color: var(--pen); } }

/* ===== non-blue directions (19/10: no blue, Yvette uses blue) ===== */
html[data-theme="theatre"] {
  --pen: #D6461A; --ink: #0E1A17; --dim: #4C5D56; --rule: #DCE5E0; --pencil: #8A9A93; --panel: #F2F6F4;
  --s-paper: #E3EDE8; --s-panel: #F5F9F7; --s-rule: #C6D6CD; --s-pencil: #7F948A; --s-grid: #C9D9D0;
  --s-ink: #0E1A17; --s-dim: #4C5D56; --s-pen: #D6461A; --s-good: #0F7A5A; --s-bad: #B42318; --s-on-ink: #FFFFFF;
  --s-glow: rgba(214, 70, 26, .12);
}
html[data-theme="signal"] {
  --pen: #E5531A; --ink: #141414; --dim: #5A5A57; --rule: #E2E2DE; --pencil: #95958F; --panel: #F4F4F2;
  --s-paper: #FF6A2B; --s-panel: #FF8247; --s-rule: #FFA272; --s-pencil: #7A2E0E; --s-grid: #FF8A55;
  --s-ink: #141414; --s-dim: #3B1A0B; --s-pen: #141414; --s-good: #0B3D2A; --s-bad: #3B0A00; --s-on-ink: #FF6A2B;
  --s-glow: rgba(20, 20, 20, .10);
}
html[data-theme="mint"] {
  --pen: #E0442E; --ink: #0B2E28; --dim: #4A625C; --rule: #D8E8E2; --pencil: #85A097; --panel: #F1F8F5;
  --s-paper: #DDF3EA; --s-panel: #F4FBF8; --s-rule: #BFE0D3; --s-pencil: #7C9B91; --s-grid: #C4E5D8;
  --s-ink: #0B2E28; --s-dim: #3F5F57; --s-pen: #E0442E; --s-good: #0F7A5A; --s-bad: #B42318; --s-on-ink: #FFFFFF;
  --s-glow: rgba(224, 68, 46, .12);
}
.sheetdlg {
  --paper: var(--s-paper); --panel: var(--s-panel); --rule: var(--s-rule); --pencil: var(--s-pencil);
  --ink: var(--s-ink); --dim: var(--s-dim); --pen: var(--s-pen); --on-ink: var(--s-on-ink);
  background: var(--paper); color: var(--ink);
}
html[data-theme="legalpad"] {
  --pen: #D7261E; --ink: #1A1A17; --dim: #57564F; --rule: #E4E2D8; --pencil: #96948A; --panel: #F6F5EF;
  --s-paper: #FFE45C; --s-panel: #FFEE8F; --s-rule: #E9C93A; --s-pencil: #8A7414; --s-grid: #F2D23F;
  --s-ink: #1A1A17; --s-dim: #4A4318; --s-pen: #D7261E; --s-good: #145A32; --s-bad: #9B1B14; --s-on-ink: #FFE45C;
  --s-glow: rgba(215, 38, 30, .14);
}
html[data-theme="highlighter"] {
  --pen: #1C6B3A; --ink: #161A14; --dim: #535A4E; --rule: #E1E6DA; --pencil: #929A8C; --panel: #F4F7F0;
  --s-paper: #E3F86B; --s-panel: #EEFB9F; --s-rule: #C7DE45; --s-pencil: #5E6B1C; --s-grid: #D3EC52;
  --s-ink: #161A14; --s-dim: #3C4517; --s-pen: #1C6B3A; --s-good: #145A32; --s-bad: #9B1B14; --s-on-ink: #E3F86B;
  --s-glow: rgba(28, 107, 58, .14);
}
html[data-theme="flamingo"] {
  --pen: #E0471F; --ink: #1C1216; --dim: #5E4B53; --rule: #EBDDE2; --pencil: #A08D95; --panel: #FBF3F6;
  --s-paper: #FF9EC4; --s-panel: #FFB9D4; --s-rule: #F57FAE; --s-pencil: #7A2E4C; --s-grid: #FB8DB8;
  --s-ink: #1C1216; --s-dim: #4E2335; --s-pen: #1C1216; --s-good: #0F4A2E; --s-bad: #7A0E0E; --s-on-ink: #FF9EC4;
  --s-glow: rgba(28, 18, 22, .10);
}
html[data-theme="lavender"] {
  --pen: #E8711C; --ink: #24142F; --dim: #5C5066; --rule: #E4DEEB; --pencil: #998FA3; --panel: #F6F3F9;
  --s-paper: #E6DDF6; --s-panel: #F5F0FC; --s-rule: #CDBFE6; --s-pencil: #7D6E96; --s-grid: #D7CBEE;
  --s-ink: #24142F; --s-dim: #4F3E61; --s-pen: #E8711C; --s-good: #0F6A4A; --s-bad: #A8241A; --s-on-ink: #FFFFFF;
  --s-glow: rgba(232, 113, 28, .14);
}
html[data-theme="graphite"] {
  --pen: #111111; --ink: #111111; --dim: #55554F; --rule: #E2E2DD; --pencil: #96968F; --panel: #F4F4F1;
  --s-paper: #E9E8E3; --s-panel: #F6F5F2; --s-rule: #CFCEC7; --s-pencil: #8C8B84; --s-grid: #D7D6D0;
  --s-ink: #111111; --s-dim: #4E4D48; --s-pen: #111111; --s-good: #145A32; --s-bad: #9B1B14; --s-on-ink: #F2FF4D;
  --s-glow: rgba(242, 255, 77, .5);
}
/* graphite: the highlighter does the marking */
html[data-theme="graphite"] .sq, html[data-theme="graphite"] .readout .live { background: #111111; }
html[data-theme="graphite"] .beam { background: #D9EC1F; }
html[data-theme="graphite"] .pen-layer path { stroke: #C8DB10; stroke-width: 5; opacity: .75; }

/* ===== 15 more directions (19/10, round 3) ===== */
html[data-theme="eucalyptus"] { --pen: #D9541E; --ink: #14231B; --s-paper: #C9D9CD; --s-panel: #E3ECE5; --s-rule: #A9C1AF; --s-pencil: #6E8A76; --s-grid: #B6CBBB; --s-ink: #14231B; --s-dim: color-mix(in srgb, #14231B 74%, #C9D9CD); --s-pen: #D9541E; --s-good: #14231B; --s-bad: #14231B; --s-on-ink: #C9D9CD; --s-glow: rgba(217,84,30,.18); }
html[data-theme="wattle"] { --pen: #B3261E; --ink: #1D1A10; --s-paper: #F7CF3B; --s-panel: #FBE07A; --s-rule: #DDB321; --s-pencil: #7A6514; --s-grid: #ECC02C; --s-ink: #1D1A10; --s-dim: color-mix(in srgb, #1D1A10 74%, #F7CF3B); --s-pen: #B3261E; --s-good: #1D1A10; --s-bad: #1D1A10; --s-on-ink: #F7CF3B; --s-glow: rgba(179,38,30,.18); }
html[data-theme="peach"] { --pen: #D6331F; --ink: #2A160C; --s-paper: #FFC7A6; --s-panel: #FFDCC6; --s-rule: #F2A982; --s-pencil: #9A5A3C; --s-grid: #F7B793; --s-ink: #2A160C; --s-dim: color-mix(in srgb, #2A160C 74%, #FFC7A6); --s-pen: #D6331F; --s-good: #2A160C; --s-bad: #2A160C; --s-on-ink: #FFC7A6; --s-glow: rgba(214,51,31,.16); }
html[data-theme="watermelon"] { --pen: #D93A2B; --ink: #1E0F0D; --s-paper: #FF6F61; --s-panel: #FF8D82; --s-rule: #E85547; --s-pencil: #7A221A; --s-grid: #F7625A; --s-ink: #1E0F0D; --s-dim: color-mix(in srgb, #1E0F0D 74%, #FF6F61); --s-pen: #1E0F0D; --s-good: #1E0F0D; --s-bad: #1E0F0D; --s-on-ink: #FF6F61; --s-glow: rgba(30,15,13,.14); }
html[data-theme="matcha"] { --pen: #E2532B; --ink: #1F2A12; --s-paper: #D6E3B3; --s-panel: #E6EFCF; --s-rule: #BCCD8E; --s-pencil: #6E7D45; --s-grid: #C6D69C; --s-ink: #1F2A12; --s-dim: color-mix(in srgb, #1F2A12 74%, #D6E3B3); --s-pen: #E2532B; --s-good: #1F2A12; --s-bad: #1F2A12; --s-on-ink: #D6E3B3; --s-glow: rgba(226,83,43,.18); }
html[data-theme="pistachio"] { --pen: #E5432F; --ink: #12301E; --s-paper: #CDEBC5; --s-panel: #E2F4DD; --s-rule: #A9D79D; --s-pencil: #5E8A5A; --s-grid: #B9E0AF; --s-ink: #12301E; --s-dim: color-mix(in srgb, #12301E 74%, #CDEBC5); --s-pen: #E5432F; --s-good: #12301E; --s-bad: #12301E; --s-on-ink: #CDEBC5; --s-glow: rgba(229,67,47,.16); }
html[data-theme="seafoam"] { --pen: #FF5A36; --ink: #0E3326; --s-paper: #BFE6D3; --s-panel: #D9F1E5; --s-rule: #94D2B5; --s-pencil: #4E8A70; --s-grid: #A8DCC3; --s-ink: #0E3326; --s-dim: color-mix(in srgb, #0E3326 74%, #BFE6D3); --s-pen: #FF5A36; --s-good: #0E3326; --s-bad: #0E3326; --s-on-ink: #BFE6D3; --s-glow: rgba(255,90,54,.18); }
html[data-theme="lemon"] { --pen: #D9411C; --ink: #1C1A0E; --s-paper: #FFF27A; --s-panel: #FFF7AE; --s-rule: #E9D84C; --s-pencil: #7F7320; --s-grid: #F4E55D; --s-ink: #1C1A0E; --s-dim: color-mix(in srgb, #1C1A0E 74%, #FFF27A); --s-pen: #E0471F; --s-good: #1C1A0E; --s-bad: #1C1A0E; --s-on-ink: #FFF27A; --s-glow: rgba(224,71,31,.18); }
html[data-theme="blush"] { --pen: #C2185B; --ink: #2B1416; --s-paper: #F6D3D1; --s-panel: #FBE6E5; --s-rule: #E7B0AD; --s-pencil: #9A6764; --s-grid: #EFC2BF; --s-ink: #2B1416; --s-dim: color-mix(in srgb, #2B1416 74%, #F6D3D1); --s-pen: #C2185B; --s-good: #2B1416; --s-bad: #2B1416; --s-on-ink: #F6D3D1; --s-glow: rgba(194,24,91,.16); }
html[data-theme="tangerine"] { --pen: #D9531A; --ink: #1A0E05; --s-paper: #FF8A3D; --s-panel: #FFA566; --s-rule: #F0711F; --s-pencil: #7A3A0E; --s-grid: #F97E30; --s-ink: #1A0E05; --s-dim: color-mix(in srgb, #1A0E05 74%, #FF8A3D); --s-pen: #1A0E05; --s-good: #1A0E05; --s-bad: #1A0E05; --s-on-ink: #FF8A3D; --s-glow: rgba(26,14,5,.12); }
html[data-theme="olive"] { --pen: #C2410C; --ink: #1F2210; --s-paper: #BCC28C; --s-panel: #D2D6AE; --s-rule: #9FA66B; --s-pencil: #5F6436; --s-grid: #AEB57C; --s-ink: #1F2210; --s-dim: color-mix(in srgb, #1F2210 74%, #BCC28C); --s-pen: #C2410C; --s-good: #1F2210; --s-bad: #1F2210; --s-on-ink: #BCC28C; --s-glow: rgba(194,65,12,.18); }
html[data-theme="stone"] { --pen: #E04E1B; --ink: #1E1B16; --s-paper: #D8D2C7; --s-panel: #E7E2DA; --s-rule: #BDB5A7; --s-pencil: #827A6C; --s-grid: #CBC4B8; --s-ink: #1E1B16; --s-dim: color-mix(in srgb, #1E1B16 74%, #D8D2C7); --s-pen: #E04E1B; --s-good: #1E1B16; --s-bad: #1E1B16; --s-on-ink: #D8D2C7; --s-glow: rgba(224,78,27,.18); }
html[data-theme="chilli"] { --pen: #D7261E; --ink: #141414; --s-paper: #E63B2E; --s-panel: #EC5B50; --s-rule: #F07C73; --s-pencil: #FFC2BD; --s-grid: #EE5247; --s-ink: #FFFFFF; --s-dim: color-mix(in srgb, #FFFFFF 74%, #E63B2E); --s-pen: #FFE14D; --s-good: #FFFFFF; --s-bad: #FFFFFF; --s-on-ink: #E63B2E; --s-glow: rgba(255,225,77,.25); }
html[data-theme="forest"] { --pen: #C2410C; --ink: #141414; --s-paper: #1F3D2B; --s-panel: #29503A; --s-rule: #3F6A50; --s-pencil: #8FB39C; --s-grid: #2C4E39; --s-ink: #F1F5EE; --s-dim: color-mix(in srgb, #F1F5EE 74%, #1F3D2B); --s-pen: #FFB547; --s-good: #F1F5EE; --s-bad: #F1F5EE; --s-on-ink: #1F3D2B; --s-glow: rgba(255,181,71,.22); }
html[data-theme="charcoal"] { --pen: #FF6A2B; --ink: #141414; --s-paper: #2A2A28; --s-panel: #363633; --s-rule: #4A4A46; --s-pencil: #9C9C95; --s-grid: #3A3A37; --s-ink: #F4F4F0; --s-dim: color-mix(in srgb, #F4F4F0 74%, #2A2A28); --s-pen: #FF6A2B; --s-good: #F4F4F0; --s-bad: #F4F4F0; --s-on-ink: #2A2A28; --s-glow: rgba(255,106,43,.22); }

/* ===== night / neon directions (19/10, round 4) ===== */
html[data-theme="tokyotaxi"] { --pen: #C9A100; --ink: #141414; --s-paper: #151515; --s-panel: #1F1F1E; --s-rule: #34332F; --s-pencil: #7C7A70; --s-grid: #34332F; --s-ink: #F4F2EA; --s-dim: color-mix(in srgb, #F4F2EA 70%, #151515); --s-pen: #FFC400; --s-good: #FFC400; --s-bad: #FFC400; --s-on-ink: #151515; --s-glow: #FFC40033; --neon: #FFC400; }
html[data-theme="shinjuku"] { --pen: #C9A100; --ink: #141414; --s-paper: #0E0E12; --s-panel: #18181E; --s-rule: #2C2C35; --s-pencil: #76767F; --s-grid: #2C2C35; --s-ink: #F2F2F2; --s-dim: color-mix(in srgb, #F2F2F2 70%, #0E0E12); --s-pen: #FFE600; --s-good: #FFE600; --s-bad: #FFE600; --s-on-ink: #0E0E12; --s-glow: #FFE60033; --neon: #FFE600; }
html[data-theme="vending"] { --pen: #C9A100; --ink: #141414; --s-paper: #2A0A0E; --s-panel: #3A1015; --s-rule: #5A1C23; --s-pencil: #B5797F; --s-grid: #5A1C23; --s-ink: #FFF3E6; --s-dim: color-mix(in srgb, #FFF3E6 70%, #2A0A0E); --s-pen: #FFD60A; --s-good: #FFD60A; --s-bad: #FFD60A; --s-on-ink: #2A0A0E; --s-glow: #FFD60A33; --neon: #FFD60A; }
html[data-theme="akihabara"] { --pen: #C9A100; --ink: #141414; --s-paper: #0B0B0F; --s-panel: #16161C; --s-rule: #2A2A33; --s-pencil: #7D7D88; --s-grid: #2A2A33; --s-ink: #F5F5F7; --s-dim: color-mix(in srgb, #F5F5F7 70%, #0B0B0F); --s-pen: #FF2E88; --s-good: #FF2E88; --s-bad: #FF2E88; --s-on-ink: #0B0B0F; --s-glow: #FF2E8833; --neon: #FF2E88; }
html[data-theme="kabukicho"] { --pen: #C9A100; --ink: #141414; --s-paper: #1A0F1F; --s-panel: #26162D; --s-rule: #3E2648; --s-pencil: #9B7FA6; --s-grid: #3E2648; --s-ink: #FBEFFA; --s-dim: color-mix(in srgb, #FBEFFA 70%, #1A0F1F); --s-pen: #FF3EA5; --s-good: #FF3EA5; --s-bad: #FF3EA5; --s-on-ink: #1A0F1F; --s-glow: #FF3EA533; --neon: #FF3EA5; }
html[data-theme="ginza"] { --pen: #C9A100; --ink: #141414; --s-paper: #111111; --s-panel: #1C1B19; --s-rule: #33312B; --s-pencil: #8C8775; --s-grid: #33312B; --s-ink: #F3EFE4; --s-dim: color-mix(in srgb, #F3EFE4 70%, #111111); --s-pen: #E8C547; --s-good: #E8C547; --s-bad: #E8C547; --s-on-ink: #111111; --s-glow: #E8C54733; --neon: #E8C547; }
html[data-theme="neonlime"] { --pen: #C9A100; --ink: #141414; --s-paper: #0D110C; --s-panel: #161C14; --s-rule: #2A3326; --s-pencil: #7A8A72; --s-grid: #2A3326; --s-ink: #EEF5EA; --s-dim: color-mix(in srgb, #EEF5EA 70%, #0D110C); --s-pen: #C6FF3D; --s-good: #C6FF3D; --s-bad: #C6FF3D; --s-on-ink: #0D110C; --s-glow: #C6FF3D33; --neon: #C6FF3D; }
html[data-theme="arcade"] { --pen: #C9A100; --ink: #141414; --s-paper: #160F24; --s-panel: #211833; --s-rule: #3A2D55; --s-pencil: #9087A8; --s-grid: #3A2D55; --s-ink: #F4EEFF; --s-dim: color-mix(in srgb, #F4EEFF 70%, #160F24); --s-pen: #FFE14D; --s-good: #FFE14D; --s-bad: #FFE14D; --s-on-ink: #160F24; --s-glow: #FFE14D33; --neon: #FFE14D; }
html[data-theme="ramen"] { --pen: #C9A100; --ink: #141414; --s-paper: #1B1410; --s-panel: #271D17; --s-rule: #423228; --s-pencil: #9E8B7C; --s-grid: #423228; --s-ink: #FBF1E8; --s-dim: color-mix(in srgb, #FBF1E8 70%, #1B1410); --s-pen: #FF7A1A; --s-good: #FF7A1A; --s-bad: #FF7A1A; --s-on-ink: #1B1410; --s-glow: #FF7A1A33; --neon: #FF7A1A; }
html[data-theme="sakura"] { --pen: #C9A100; --ink: #141414; --s-paper: #121012; --s-panel: #1D1A1D; --s-rule: #352F35; --s-pencil: #8F858F; --s-grid: #352F35; --s-ink: #F7F0F2; --s-dim: color-mix(in srgb, #F7F0F2 70%, #121012); --s-pen: #FFB7C5; --s-good: #FFB7C5; --s-bad: #FFB7C5; --s-on-ink: #121012; --s-glow: #FFB7C533; --neon: #FFB7C5; }
html[data-theme="bullet"] { --pen: #C9A100; --ink: #141414; --s-paper: #202020; --s-panel: #2B2B2A; --s-rule: #444442; --s-pencil: #8F8F8B; --s-grid: #444442; --s-ink: #F5F5F3; --s-dim: color-mix(in srgb, #F5F5F3 70%, #202020); --s-pen: #FF3B30; --s-good: #FF3B30; --s-bad: #FF3B30; --s-on-ink: #202020; --s-glow: #FF3B3033; --neon: #FF3B30; }
html[data-theme="matrix"] { --pen: #C9A100; --ink: #141414; --s-paper: #07110B; --s-panel: #0E1C14; --s-rule: #1F3528; --s-pencil: #6E9A80; --s-grid: #1F3528; --s-ink: #E8F7EE; --s-dim: color-mix(in srgb, #E8F7EE 70%, #07110B); --s-pen: #39FF88; --s-good: #39FF88; --s-bad: #39FF88; --s-on-ink: #07110B; --s-glow: #39FF8833; --neon: #39FF88; }
html[data-theme="ember"] { --pen: #C9A100; --ink: #141414; --s-paper: #160B07; --s-panel: #22130D; --s-rule: #3E2419; --s-pencil: #A07B6C; --s-grid: #3E2419; --s-ink: #FDEFE7; --s-dim: color-mix(in srgb, #FDEFE7 70%, #160B07); --s-pen: #FF5A1F; --s-good: #FF5A1F; --s-bad: #FF5A1F; --s-on-ink: #160B07; --s-glow: #FF5A1F33; --neon: #FF5A1F; }
html[data-theme="yellowline"] { --pen: #C9A100; --ink: #141414; --s-paper: #1A1A18; --s-panel: #252522; --s-rule: #3D3D39; --s-pencil: #8E8E86; --s-grid: #3D3D39; --s-ink: #FAFAF5; --s-dim: color-mix(in srgb, #FAFAF5 70%, #1A1A18); --s-pen: #FAFF00; --s-good: #FAFF00; --s-bad: #FAFF00; --s-on-ink: #1A1A18; --s-glow: #FAFF0033; --neon: #FAFF00; }
html[data-theme="ultraviolet"] { --pen: #C9A100; --ink: #141414; --s-paper: #120A1C; --s-panel: #1C1229; --s-rule: #352548; --s-pencil: #8B7CA3; --s-grid: #352548; --s-ink: #F3ECFF; --s-dim: color-mix(in srgb, #F3ECFF 70%, #120A1C); --s-pen: #D6FF00; --s-good: #D6FF00; --s-bad: #D6FF00; --s-on-ink: #120A1C; --s-glow: #D6FF0033; --neon: #D6FF00; }
html[data-neon] .heroband .note, html[data-neon] .lightbox .band, html[data-neon] .lightbox .gauge__wantlbl, html[data-neon] .sec--dark .note { text-shadow: 0 0 10px var(--neon); }
html[data-neon] .beam { box-shadow: 0 0 14px 2px var(--neon); }
html[data-neon] .heroband .pen-layer path, html[data-neon] .lightbox .pen-layer path, html[data-neon] .stage__side .pen-layer path, html[data-neon] .sec--dark .pen-layer path { filter: drop-shadow(0 0 3px var(--neon)); }
html[data-neon] .readout .live { box-shadow: 0 0 8px var(--neon); background: var(--neon); }
html[data-neon] body[data-phase="intro"] .sq:not(:disabled) { box-shadow: 0 0 18px var(--s-glow); }
html[data-neon] .lightbox .gauge__needle { box-shadow: 0 0 10px var(--neon); }
html[data-neon] .heroband .want, html[data-neon] .lightbox .want, html[data-neon] .gauge__want { box-shadow: 0 0 8px var(--neon); }
.who__photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border: 1px solid var(--ink); }
@media (min-width: 960px) { .who__photo { max-height: 520px; } }
/* neon themes: the yellow (or neon) does the calls to action */
html[data-neon] body[data-phase="intro"] .sq { background: var(--s-pen); color: var(--s-paper); }
html[data-neon] body[data-phase="intro"] .sq:disabled { opacity: .55; }
html[data-neon] body[data-phase="intro"] .intro b { color: var(--s-pen); }
html[data-neon] .lightbox .score { color: var(--s-pen); text-shadow: 0 0 28px color-mix(in srgb, var(--s-pen) 45%, transparent); }
html[data-neon] .lightbox .gauge__needle { background: var(--s-pen); }
html[data-neon] .sec--dark .callouts .n svg path { stroke: var(--s-pen); }
html[data-neon] .entry__big .arr { color: var(--pen); }

/* =====================================================================================================
   "White Signal" (19/10, round 5): one white world, graphite ink, electric yellow only where it rewards.
   ===================================================================================================== */
html[data-theme="white"] {
  --paper: #FFFFFF; --panel: #F6F6F3; --rule: #E6E6E1; --pencil: #B3B3AC; --ink: #0E0E10; --dim: #64645F;
  --pen: #0E0E10; --good: #0F7A4F; --bad: #C2261C; --on-ink: #FFFFFF; --accent: #FFE135; --accent-deep: #F5C800;
  --s-paper: #FFFFFF; --s-panel: #FAFAF8; --s-rule: #E6E6E1; --s-pencil: #B3B3AC; --s-grid: #E2E2DC;
  --s-ink: #0E0E10; --s-dim: #64645F; --s-pen: #0E0E10; --s-good: #0F7A4F; --s-bad: #C2261C; --s-on-ink: #FFFFFF;
  --s-glow: rgba(255, 225, 53, .45);
}
html[data-theme="white"] body[data-phase="intro"] .heroband::before { display: none; }
html[data-theme="white"] .heroband { background: transparent; }
html[data-theme="white"] .mast { background: rgba(255,255,255,.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
html[data-theme="white"] .chart { border-color: var(--ink); background: #fff; box-shadow: 0 1px 0 var(--rule), 0 24px 48px -28px rgba(14,14,16,.25); }
html[data-theme="white"] .beam { background: var(--accent-deep); height: 2px; }
html[data-theme="white"] .beam::after { background: linear-gradient(to top, rgba(255,225,53,.35), rgba(255,225,53,0)); height: 72px; }
html[data-theme="white"] .readout .live { background: var(--accent-deep); }
html[data-theme="white"] .want { border-color: var(--accent-deep); border-width: 2.5px; }
html[data-theme="white"] .gauge__want { border-color: var(--accent-deep); border-width: 2.5px; }
/* yellow does the rewarding */
html[data-theme="white"] .intro b { background: linear-gradient(transparent 58%, var(--accent) 58%); color: var(--ink); }
html[data-theme="white"] .sq { background: var(--ink); color: #fff; }
html[data-theme="white"] .sq:not(:disabled) { background: var(--accent); color: var(--ink); box-shadow: 0 0 0 0 rgba(255,225,53,.6); animation: ready 1.6s ease-out 1; }
@keyframes ready { 0% { box-shadow: 0 0 0 0 rgba(245,200,0,.55); } 100% { box-shadow: 0 0 0 16px rgba(245,200,0,0); } }
html[data-theme="white"] .opt::before { background: var(--accent); }
html[data-theme="white"] .opt[aria-pressed="true"], html[data-theme="white"] .opt[aria-checked="true"] { color: var(--ink); border-color: var(--ink); }
html[data-theme="white"] .opt[aria-pressed="true"] .opt__desc { color: var(--ink); opacity: .75; }
html[data-theme="white"] .opt::after { background: var(--ink); }
html[data-theme="white"] .micro p { color: var(--ink); }
html[data-theme="white"] .note, html[data-theme="white"] .band, html[data-theme="white"] .gauge__wantlbl, html[data-theme="white"] .exam__sig { color: var(--ink); }
html[data-theme="white"] .band { background: linear-gradient(transparent 62%, var(--accent) 62%); display: inline; }
html[data-theme="white"] .lightbox { background: #fff; min-height: auto; }
html[data-theme="white"] .lightbox__in { padding-block: 56px 40px; }
html[data-theme="white"] .score { color: var(--ink); text-shadow: none; }
html[data-theme="white"] .entry__big .arr { color: var(--accent-deep); }
html[data-theme="white"] .sec--dark { border-top: 1px solid var(--rule); }
html[data-theme="white"] .btn:not(.btn--line):not(:disabled):hover { background: var(--accent); color: var(--ink); border-color: var(--ink); }
html[data-theme="white"] #qNext:not(:disabled) { background: var(--accent); color: var(--ink); border-color: var(--ink); animation: ready 1.4s ease-out 1; }
html[data-theme="white"] .strip, html[data-theme="white"] body:not([data-phase="intro"]):not([data-phase="result"]) .stage__side { background: var(--panel); }
html[data-theme="white"] .sumcard { border-color: var(--ink); }

/* ===== the reactive field behind the opening ===== */
.fxfield { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; display: block; }
.heroband .wrap { z-index: 1; }
.tilt { transition: transform 160ms var(--e-out); transform-style: preserve-3d; will-change: transform; }

/* ===== tap juice ===== */
.fxlayer { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; }
.opt:active { transform: scale(.975); }
.opt { transition: transform 120ms var(--e-out), border-color 120ms; }
.opt .tickmark { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; overflow: visible; }
.opt .tickmark path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.flydot { position: fixed; left: 0; top: 0; width: 12px; height: 12px; background: var(--accent-deep, #F5C800); border: 2px solid var(--ink); z-index: 70; pointer-events: none; will-change: transform; }
.row.landed .dot--ink, .row.landed .dot--pencil { animation: land 420ms var(--e-spring) 1; }
@keyframes land { 0% { transform: scale(2.2); } 100% { transform: scale(1); } }
.ruler__pct { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ruler__pct.bump { animation: bump 360ms var(--e-spring) 1; display: inline-block; }
@keyframes bump { 0% { transform: translateY(-4px) scale(1.18); color: var(--accent-deep); } 100% { transform: none; } }
.chapdone { display: inline-flex; gap: 8px; align-items: center; font: 400 13px/1 var(--mono); background: var(--accent); color: var(--ink); padding: 7px 10px; margin: 0 0 14px; animation: stamp 520ms var(--e-spring) 1; }
@keyframes stamp { 0% { transform: scale(.6) rotate(-4deg); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* ===== mobile thumb bar ===== */
@media (max-width: 959px) {
  .qbar--bottom { position: sticky; bottom: 0; z-index: 25; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--rule); margin: 18px calc(var(--gut) * -1) 0; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; align-items: center; }
  .qbar--bottom .btn { flex: 1; min-height: 52px; }
  .qbar--bottom .backbtn { border: 1px solid var(--rule); background: #fff; min-height: 52px; width: 52px; display: grid; place-items: center; }
  .qbar--top { display: none; }
}
@media (min-width: 960px) { .qbar--bottom .backbtn { display: none; } .qbar--bottom { display: contents; } }
.landed-pulse { animation: lpulse 520ms var(--e-out) 1; }
@keyframes lpulse { 0% { box-shadow: 0 0 0 0 rgba(245,200,0,.7), 0 24px 48px -28px rgba(14,14,16,.25); } 100% { box-shadow: 0 0 0 14px rgba(245,200,0,0), 0 24px 48px -28px rgba(14,14,16,.25); } }
html[data-theme="white"] .strip.landed-pulse { animation: spulse 520ms var(--e-out) 1; }
@keyframes spulse { 0% { background: #FFF3A6; } 100% { background: var(--panel); } }
html[data-theme="white"] .strip__dots i.on { background: var(--accent-deep); border: 1px solid var(--ink); }

/* ===================== the score moment (round 6) ===================== */
.rhero { background: #fff; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.rhero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, #E4E4DE 1px, transparent 1.3px); background-size: 24px 24px; opacity: .7; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); }
.rhero__in { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 48px var(--gut) 56px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .rhero__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; padding-block: 88px 96px; } }
.dialwrap { position: relative; width: min(100%, 360px); margin: 0 auto; aspect-ratio: 1; }
@media (min-width: 960px) { .dialwrap { width: min(100%, 440px); } }
.dial2 { width: 100%; height: 100%; overflow: visible; }
.dial2 .dt { stroke: #CFCFC8; stroke-width: 1; }
.dial2 .dt.big { stroke: var(--ink); stroke-width: 1.5; }
.dial2__track { fill: none; stroke: #EFEFEA; stroke-width: 14; }
.dial2__arc { fill: none; stroke: var(--accent-deep, #F5C800); stroke-width: 14; transform: rotate(-90deg); transform-origin: 120px 120px; stroke-linecap: butt; }
.dial2__want { fill: none; stroke: var(--ink); stroke-width: 3; transform: rotate(-90deg); transform-origin: 120px 120px; opacity: 0; transition: opacity 400ms var(--e-out) 200ms; }
.rhero.landed .dial2__want, .rhero:not(.go) .dial2__want { opacity: 1; }
.dial2__tip { fill: var(--ink); stroke: #fff; stroke-width: 3; }
.dial2__n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial2__n b { font: 400 clamp(72px, 12vw, 120px)/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dial2__n span { font: 400 13px/1.4 var(--mono); color: var(--dim); margin-top: 6px; }
.dial2__wantlbl { position: absolute; left: -2%; top: 4%; font: italic 400 14px/1.2 var(--voice); color: var(--ink); background: var(--accent); padding: 2px 6px; opacity: 0; transform: translateY(6px); transition: opacity 300ms var(--e-out) 500ms, transform 300ms var(--e-out) 500ms; }
.rhero.landed .dial2__wantlbl, .rhero:not(.go) .dial2__wantlbl { opacity: 1; transform: none; }
.rhero.landed .dialwrap { animation: dialpop 520ms var(--e-spring) 1; }
@keyframes dialpop { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
.eyebrow { font-size: 12.5px; color: var(--dim); margin: 0 0 12px; }
.rhero__band { font-size: clamp(34px, 5vw, 60px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.01em; }
.rhero__band mark { background: linear-gradient(transparent 60%, var(--accent) 60%); color: inherit; font-style: italic; padding: 0 .06em; }
.rhero__line { font-size: 18px; color: var(--dim); max-width: 34em; margin: 0 0 28px; }
.stiles { display: grid; gap: 10px; grid-template-columns: 1fr; margin-bottom: 28px; }
@media (min-width: 640px) { .stiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stile { border: 1px solid var(--ink); background: #fff; padding: 16px 16px 14px; display: grid; gap: 4px; align-content: start; position: relative; overflow: hidden; }
.stile::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--accent-deep, #F5C800); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--e-out); transition-delay: calc(var(--i) * 160ms + 300ms); }
.rhero.landed .stile::after, .rhero:not(.go) .stile::after { transform: scaleX(1); }
.stile__lbl { font-size: 12.5px; color: var(--dim); }
.stile__n { font: 400 clamp(24px, 3vw, 32px)/1.1 var(--mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.stile__sub { font-size: 13px; color: var(--dim); line-height: 1.4; }
.rhero.go .stile { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--e-out), transform 400ms var(--e-out); transition-delay: calc(var(--i) * 140ms + 150ms); }
.rhero.go.landed .stile { opacity: 1; transform: none; }
.rhero__go { gap: 10px; }

/* area bars */
.abars { display: grid; gap: 18px; margin: 8px 0 18px; }
.abar__h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.abar__name { font-size: 16px; font-weight: 600; }
.abar__tag { font: 400 11.5px/1 var(--mono); background: var(--accent); color: var(--ink); padding: 4px 6px; }
.abar__tag.ok { background: #E3F4EA; color: var(--good); }
.abar__v { margin-left: auto; font: 400 20px/1 var(--mono); font-variant-numeric: tabular-nums; }
.abar__track { position: relative; height: 12px; background: #F0F0EC; }
.abar__fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--e-out); }
.abar__fill.low { background: #E5484D; }
.abar__fill.mid { background: var(--accent-deep, #F5C800); }
.abar__fill.ok { background: #2FA36B; }
.abar__want { position: absolute; top: -4px; bottom: -4px; left: 72%; width: 18%; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }

/* fix cards */
.fcard { border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 20px; background: #fff; }
.fcard:first-of-type { border-top-color: var(--accent-deep, #F5C800); box-shadow: 0 18px 40px -30px rgba(14,14,16,.4); }
.finding + .finding { margin-top: 16px; }
.finding__n { flex-wrap: wrap; row-gap: 6px; }
.fnum { font-size: 14px; background: var(--ink); color: #fff; padding: 4px 7px; align-self: center; }
.fcost { margin-left: auto; font-size: 13px; background: #F4F4F0; padding: 5px 8px; align-self: center; }
details.fplan { border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 4px; }
details.fplan summary { cursor: pointer; font-weight: 600; font-size: 15px; min-height: 40px; display: flex; align-items: center; gap: 8px; list-style: none; }
details.fplan summary::-webkit-details-marker { display: none; }
details.fplan summary::before { content: "+"; font-family: var(--mono); width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--ink); font-size: 13px; transition: transform 200ms var(--e-out); }
details.fplan[open] summary::before { content: "\2212"; background: var(--accent); }

/* scroll reveals */
.rv { opacity: 0; transform: translateY(18px); }
.rv-in { opacity: 1; transform: none; transition: opacity 520ms var(--e-out) var(--rv, 0ms), transform 620ms var(--e-out) var(--rv, 0ms); }

/* analysing: a scanning ring */
.scanring { width: 120px; height: 120px; margin: 6px 0 4px; position: relative; }
.scanring svg { width: 100%; height: 100%; overflow: visible; }
.scanring .sr-track { fill: none; stroke: #EFEFEA; stroke-width: 8; }
.scanring .sr-arc { fill: none; stroke: var(--accent-deep, #F5C800); stroke-width: 8; stroke-dasharray: 70 300; transform-origin: 60px 60px; animation: spin 1.1s linear infinite; }
.scanring .sr-dot { fill: var(--ink); transform-origin: 60px 60px; animation: spin 2.6s linear infinite reverse; }
.scanring b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px/1 var(--mono); }
@keyframes spin { to { transform: rotate(360deg); } }

/* answer cards: a little lift */
@media (hover: hover) and (pointer: fine) {
  .opt:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(14,14,16,.45); }
}
.opt:focus-visible { outline: 3px solid var(--accent-deep, #F5C800); outline-offset: 2px; }
.scanring.landed .sr-arc { animation: none; stroke-dasharray: 400 0; transition: stroke-dasharray 300ms var(--e-out); }
.scanring.landed b { animation: dialpop 420ms var(--e-spring) 1; }
@media (max-width: 639px) {
  .rhero__in { padding-block: 28px 40px; gap: 20px; }
  .dialwrap { width: min(72vw, 270px); }
  .dial2__n b { font-size: 64px; }
  .rhero__band { font-size: 34px; }
  .rhero__line { font-size: 16px; margin-bottom: 20px; }
  .stile { padding: 12px 14px; gap: 2px; }
  .stile__n { font-size: 22px; }
}
.abar__tag { white-space: nowrap; }
.abar__h { flex-wrap: wrap; row-gap: 4px; }
.stile__n { font-size: clamp(22px, 2.1vw, 28px); }

/* intro highlighter: sits behind the lower half of the words and sweeps on like a marker */
html[data-theme="white"] .intro b {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 82% / 0% 46%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.12em;
  animation: hilite 900ms cubic-bezier(.65,0,.25,1) 700ms forwards;
}
@keyframes hilite { to { background-size: 100% 46%; } }
@media (prefers-reduced-motion: reduce) { html[data-theme="white"] .intro b { animation: none; background-size: 100% 46%; } }
html[data-motion="off"] .intro b { animation: none !important; background-size: 100% 46% !important; }

/* "Something else": the follow-up box hangs off the chosen answer so it's obviously part of it */
.otherfield { margin: -2px 0 10px; padding: 12px 14px 14px; border: 1px solid var(--ink); border-top: 0; background: #FFFBE0; }
.otherfield label { display: block; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.otherfield input { width: 100%; background: #fff; }
.otherfield:not([hidden]) { animation: otherin 220ms var(--e-out); }
@keyframes otherin { from { opacity: 0; transform: translateY(-6px); } }

/* booked confirmation */
.booked { border: 2px solid var(--ink); background: #fff; padding: 22px 20px 20px; position: relative; outline: none; animation: bookedin 420ms var(--e-spring); }
.booked::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 6px; background: var(--accent-deep, #F5C800); }
.booked__k { font-size: 12px; color: var(--dim); margin: 4px 0 6px; letter-spacing: .04em; }
.booked__h { font-family: var(--voice); font-weight: 400; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; margin: 0 0 10px; }
.booked__when { font: 400 18px/1.3 var(--mono); margin: 0 0 16px; padding: 10px 12px; background: var(--accent); display: inline-block; }
.booked__when span { font-size: 12px; color: var(--ink); opacity: .7; margin-left: 6px; }
.booked__next { margin: 0 0 18px; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
.booked__cal { display: inline-flex; }
@keyframes bookedin { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
.btn--ghost:hover { background: var(--accent); }

/* What I'd build for you */
.builds { margin-top: 28px; }
.builds__h { font-family: var(--voice); font-weight: 400; font-size: 24px; margin: 0 0 12px; }
.bcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .bcards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.bcard { border: 1px solid var(--ink); padding: 16px; background: #fff; position: relative; }
.bcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent-deep, #F5C800); }
.bcard__k { font-size: 11.5px; color: var(--dim); margin: 0 0 6px; }
.bcard h3 { font-size: 17px; margin: 0 0 6px; }
.bcard p { font-size: 15px; line-height: 1.5; margin: 0; }
.payback { margin: 4px 0 14px; padding: 10px 12px; background: var(--accent); font-size: 15px; line-height: 1.45; }

/* ===================== the hook: a want before the name (19/10) ===================== */
.hook { margin: 0 0 30px; }
.hook__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink); background: #fff; border: 1px solid var(--ink); padding: 6px 10px; margin: 0 0 18px; letter-spacing: .02em; }
.hook__dot { width: 8px; height: 8px; background: var(--accent-deep, #F5C800); box-shadow: 0 0 0 0 rgba(245,200,0,.7); animation: hookping 1.8s ease-out infinite; }
@keyframes hookping { 0% { box-shadow: 0 0 0 0 rgba(245,200,0,.7); } 70% { box-shadow: 0 0 0 8px rgba(245,200,0,0); } 100% { box-shadow: 0 0 0 0 rgba(245,200,0,0); } }
.hook__h { font-size: clamp(38px, 6.4vw, 76px); line-height: 1.02; letter-spacing: -.015em; margin: 0 0 16px; text-wrap: balance; }
.rot { position: relative; display: inline-grid; vertical-align: bottom; justify-items: start; }
.rot__w { grid-area: 1 / 1; font-style: italic; padding: 0 .08em; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 86% / 100% 42%;
  opacity: 0; transform: translateY(.35em); transition: opacity 320ms var(--e-out), transform 420ms var(--e-out); white-space: nowrap; }
.rot__w.is-on { opacity: 1; transform: none; }
.rot__w.is-off { opacity: 0; transform: translateY(-.35em); }
.hook__sub { font-size: 17px; line-height: 1.5; color: var(--dim); max-width: 34em; margin: 0 0 16px; }
@media (min-width: 960px) { .hook__sub { font-size: 19px; } }
.hook__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hook__chips li { font-size: 13.5px; padding: 6px 10px 6px 26px; border: 1px solid var(--rule); background: #fff; position: relative; }
.hook__chips li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 9px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(-45deg); }
.hello--sm { font-size: 24px; line-height: 1.2; margin: 0 0 12px; }
@media (min-width: 960px) { .hello--sm { font-size: 30px; margin-bottom: 14px; } }
@media (max-width: 639px) { .hook { margin-bottom: 22px; } .hook__chips li:nth-child(n+3) { display: none; } }
@media (prefers-reduced-motion: reduce) { .hook__dot { animation: none; } .rot__w { transition: none; } }
/* chart rails are full-width boxes slid by --x; clip them at the chart edge so a high score can't widen the page on phones */
.chart { overflow-x: clip; }