/* Forthsay. Layout language from lotmara (bold Geist, pill nav, rounded borderless panels, one dark hero card).
   Colour: ink and grey with one muted accent, stamp-pad violet: the ink of a dated stamp on a receipt.
   Why: docs/HANDOFF.md "Colour". No green, no gradients, no glass, no decorative dots. One exception, asked for by the
   owner (7 Nov): the shader veil over a free account's locked parts, which draws the answer grid's own squares. */
@font-face { font-family: Geist; src: url(/fonts/geist-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Geist; src: url(/fonts/geist-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(/fonts/geist-mono-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --canvas: #e9e8ec; --panel: #fbfbfc; --panel-2: #f1f0f4; --ink: #16151b; --muted: #63616d; --line: #e0dfe5;
  --hero: #16151b; --hero-ink: #eeedf2; --hero-muted: #928f9e; --accent: #5b4fa8; --chip: #ebe8f5; --chip-ink: #463c8a;
  --hi: #b8aef0; --warn: #a4461b; --warn-bg: #f6e6dc;
  --mono: 'Geist Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--canvas); color: var(--ink); font: 500 16px/1.5 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
code { font: 600 0.9em var(--mono); overflow-wrap: anywhere; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 1360px; }
main.wrap { padding-top: 12px; padding-bottom: 36px; }
@media (min-width: 760px) { .wrap.wide { padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1100px) { .wrap.wide { padding-left: 32px; padding-right: 32px; } }
[hidden] { display: none !important; }

/* Top bar. Below 980 px the pills drop to a second row inside the bar (the bar is the same width on every page). */
.top { padding-top: 14px; }
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--panel); border-radius: 18px; padding: 8px 8px 8px 10px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -0.01em; text-decoration: none; margin-right: auto; }
.logo .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--hero); color: #fff; display: grid; place-items: center; }
.mark-i { width: 22px; height: 22px; }
.pills { display: flex; gap: 4px; }
.pills a { font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.pills a:hover { color: var(--ink); background: var(--panel-2); }
.pills a[aria-current] { background: var(--hero); color: #fff; }
.bar-cta { font: 700 15px Geist, sans-serif; border: 0; border-radius: 999px; padding: 9px 16px; margin-left: auto; background: var(--hero); color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 979px) {
  .pills { order: 3; flex-basis: 100%; flex-wrap: wrap; gap: 2px; padding-top: 6px; border-top: 1px solid var(--line); }
  .pills a { padding: 6px 10px; font-size: 14px; }
}
.crumbs { font-size: 14px; color: var(--muted); margin-top: 12px; }
.crumbs a { color: var(--muted); }

main { display: flex; flex-direction: column; gap: 12px; }
.intro { margin-bottom: 12px; }
.intro h1 { font-size: clamp(34px, 6.6vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; margin-top: 24px; text-wrap: balance; }
.intro h1 span { color: var(--muted); }
.lede { font-size: 17px; color: var(--muted); margin-top: 14px; max-width: 36em; }
.lede a { color: var(--ink); }
.card { background: var(--panel); border-radius: 22px; padding: 20px 22px; min-width: 0; }
.card h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.card h3 { font-size: 15px; font-weight: 700; margin-top: 18px; }
.card p { margin-top: 8px; color: var(--muted); }
.card p a, .card li a { color: var(--ink); }
.card p b { color: var(--ink); }
.hero { background: var(--hero); color: var(--hero-ink); }
.hero p { color: var(--hero-muted); }
.row { display: flex; align-items: center; gap: 8px; }
.k { font-size: 14px; font-weight: 600; color: var(--muted); }
.hero .k { color: var(--hero-muted); }
.chip { margin-left: auto; font: 600 12px var(--mono); background: var(--chip); color: var(--chip-ink); border-radius: 7px; padding: 3px 8px; white-space: nowrap; }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.quiet { background: var(--panel-2); color: var(--muted); }
.foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(127,127,127,.25); font-size: 14px; color: var(--muted); }
.hero .foot { color: var(--hero-muted); }
.note { font-size: 14px; color: var(--muted); margin-top: 8px; }
.small { font-size: 14px; color: var(--muted); margin-top: 12px; }
.small a { color: var(--muted); }
.checked { font: 600 13px var(--mono); color: var(--muted); margin-top: 12px; }
.date { font: 600 13px var(--mono); color: var(--chip-ink); margin-right: 6px; }

/* Buttons and fields */
.ghost, .primary, .light { font: 700 15px Geist, sans-serif; border: 0; border-radius: 12px; padding: 10px 16px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ghost { background: var(--panel-2); color: var(--ink); }
.primary { background: var(--hero); color: #fff; font-size: 16px; padding: 13px 20px; border-radius: 14px; }
.light { background: var(--hero-ink); color: var(--hero); font-size: 16px; padding: 13px 20px; border-radius: 14px; }
.primary:disabled, .light:disabled, .ghost:disabled { opacity: .5; cursor: progress; }
.ghost-l { display: inline-flex; align-items: center; font: 700 16px Geist, sans-serif; padding: 13px 20px; border-radius: 14px; background: var(--panel); color: var(--ink); text-decoration: none; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
label { display: block; font-weight: 700; font-size: 15px; }
input[type=text], input[type=number], input[type=date], input:not([type]), textarea, select {
  width: 100%; min-width: 0; font: 600 16px Geist, sans-serif; padding: 11px 13px; margin-top: 6px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); }
textarea { font: 500 15px/1.45 Geist, sans-serif; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
.field { display: flex; gap: 8px; margin-top: 6px; }
.field input { margin-top: 0; font-size: 17px; }
.field button { flex: none; font: 700 16px Geist, sans-serif; padding: 0 18px; border: 0; border-radius: 14px; background: var(--hero); color: #fff; cursor: pointer; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack > .primary { align-self: flex-start; }
.grid2 { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
fieldset { border: 0; }
legend { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.pair { display: grid; gap: 10px; }
.pair label { font-weight: 600; font-size: 14px; color: var(--muted); }
.msg { margin-top: 10px; font-weight: 600; color: var(--ink); }
.msg.warn { color: var(--warn); }
.tick { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; font-weight: 700; cursor: pointer; }
.tick input { width: 20px; height: 20px; accent-color: var(--hero); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; font-weight: 700; font-size: 15px; padding: 8px 14px; border-radius: 999px; background: var(--panel-2); color: var(--ink); }
.seg input:checked + span { background: var(--hero); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Lists without bullet dots: rows split by lines (owner rule). */
.plainlist { list-style: none; margin-top: 8px; }
.plainlist li { padding: 9px 0; border-top: 1px solid var(--line); color: var(--muted); }
.plainlist li:first-child { border-top: 0; }
.plainlist b { color: var(--ink); }
.plainlist.cols { display: grid; column-gap: 28px; }
@media (min-width: 700px) { .plainlist.cols { grid-template-columns: 1fr 1fr; } .plainlist.cols li:nth-child(2) { border-top: 0; } }
.reqs { list-style: none; margin-top: 8px; }
.reqs li { padding: 12px 0; border-top: 1px solid var(--line); }
.reqs li:first-child { border-top: 0; }
.req-h b { font-weight: 800; }
.reqs p { margin-top: 4px; font-size: 15px; }
.steps { margin: 8px 0 0 20px; color: var(--muted); }
.steps li { padding: 4px 0; }
.rows { list-style: none; margin-top: 8px; }
.rows li { padding: 11px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.rows li:first-child { border-top: 0; }
.rows a, .rows b { font-weight: 700; text-decoration: none; }
.rows a:hover { text-decoration: underline; }
.rows span { color: var(--muted); font-size: 15px; }
.facts div, .disclose div { display: contents; }
.disclose { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 14px; font-size: 14px; margin-top: 10px; }
.disclose dt { color: var(--muted); font-weight: 600; }
.agree { margin-top: 4px; }
.agree h3 { margin-top: 0; }
.agree-tick { align-items: flex-start; font-weight: 600; font-size: 15px; line-height: 1.45; margin-top: 14px; }
.agree-tick input { flex: none; margin-top: 2px; }
@media (max-width: 480px) { .disclose { grid-template-columns: 1fr; gap: 2px; } .disclose dd { margin-bottom: 8px; } }
.code { margin-top: 12px; background: var(--hero); color: var(--hero-ink); border-radius: 14px; padding: 14px 16px; overflow-x: auto; font: 600 13px/1.55 var(--mono); }
.faq dt { font-weight: 800; margin-top: 16px; }
.faq dt:first-child { margin-top: 8px; }
.faq dd { color: var(--muted); margin-top: 4px; }
.ours { border-left: 4px solid var(--accent); padding-left: 12px; }
.limit { border-left: 6px solid var(--accent); }

/* Home */
.hero-a { display: grid; gap: 22px; }
.hero-a .intro { margin: 0; }
.receipt .q { margin-top: 12px; color: var(--hero-ink); font-weight: 700; font-size: 17px; }
.receipt .ans { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(127,127,127,.14); font-size: 15px; }
.receipt .ans p { margin: 0; color: var(--hero-muted); }
.receipt .ans p + p { margin-top: 6px; }
.receipt mark { background: none; color: var(--hero-ink); box-shadow: inset 0 -0.5em 0 rgba(184,174,240,.32); padding: 0 1px; }
.verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.verdicts div { display: flex; flex-direction: column; background: rgba(127,127,127,.14); border-radius: 12px; padding: 8px 10px; }
.verdicts dt { font-size: 13px; color: var(--hero-muted); font-weight: 600; }
.verdicts dd { font: 600 14px var(--mono); }
.verdicts .yes { color: var(--hi); }
.verdicts .no { color: var(--hero-ink); }
.verdicts .warn { color: #f1b394; }
.sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.more { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--chip-ink); text-decoration: none; white-space: nowrap; }
.ar { width: 14px; height: 14px; flex: none; }
.prom { display: grid; gap: 16px; margin-top: 12px; }
.prom div { display: flex; flex-direction: column; }
.prom b { font-weight: 800; font-size: 17px; }
.prom span { color: var(--muted); font-size: 15px; }
.prom .num { font: 600 13px var(--mono); color: var(--chip-ink); }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tile { background: var(--panel-2); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: background .2s ease; }
.tile:hover { background: var(--chip); }
.tile .art { display: grid; place-items: center; width: 56px; height: 56px; flex: none; margin-bottom: 8px; color: var(--ink); background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--line); }
.tile .art svg { display: block; width: 32px; height: 32px; }
.tile .ac { stroke: var(--accent); }
.tile .f { fill: var(--chip); }
.tile b { font-weight: 800; line-height: 1.25; }
.tile span:last-child { color: var(--muted); font-size: 14px; }
.bento .tile.t0 { grid-column: span 2; display: grid; grid-template-columns: 56px 1fr; gap: 2px 14px; align-items: center; }
.bento .tile.t0 .art { grid-row: span 2; margin: 0; }
.vs { margin-top: 12px; }
.vs-h, .vs-r { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.vs-h { border-top: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.vs-r span:first-child { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(99,97,109,.45); }
.vs-r span:last-child { font-weight: 600; }
.two { display: grid; gap: 12px; }
@media (max-width: 560px) { .vs-h { display: none; } .vs-r { grid-template-columns: 1fr; gap: 2px; } }
@media (min-width: 700px) { .prom { grid-template-columns: 1fr 1fr; gap: 18px 28px; } }
@media (min-width: 900px) {
  .hero-a { grid-template-columns: 1fr 1fr; align-items: center; margin: 12px 0 8px; }
  .prom.four { grid-template-columns: repeat(4, 1fr); }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .tile { grid-column: span 2; }
  .bento .tile.t0, .bento .tile.t1 { grid-column: span 3; display: grid; grid-template-columns: 56px 1fr; gap: 2px 14px; align-items: center; }
  .bento .tile.t0 .art, .bento .tile.t1 .art { grid-row: span 2; margin: 0; }
  .bento.three .tile, .bento.three .tile.t0, .bento.three .tile.t1 { grid-column: span 2; display: flex; }
  .bento.three .tile .art { margin-bottom: 8px; }
  .two { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Pricing */
.plans { display: grid; gap: 12px; }
@media (min-width: 860px) { .plans { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }
.plan { display: flex; flex-direction: column; }
.plan h2 { font-size: 20px; }
.plan .price { margin-top: 10px; color: var(--ink); }
.plan .price b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.plan.hero .price, .plan.hero .price b { color: var(--hero-ink); }
.plan .per { margin-top: 0; font-size: 14px; }
.plan .plainlist { flex: 1; }
.plan.hero .plainlist li { border-color: rgba(127,127,127,.25); color: var(--hero-muted); }
.plan.hero .plainlist b { color: var(--hero-ink); }
.plan button { margin-top: 14px; justify-content: center; }

/* Tool output */
.out { display: flex; flex-direction: column; gap: 12px; }
.out:empty { display: none; }
.verdict { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.hero .verdict { color: var(--hero-ink); }
.table-wrap { overflow-x: auto; margin-top: 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl thead th { border-top: 0; font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tbl .num { font: 600 14px var(--mono); white-space: nowrap; }
.tbl td.wrap-any { overflow-wrap: anywhere; }
.flag { font: 700 13px var(--mono); white-space: nowrap; }
.flag.ok { color: var(--chip-ink); }
.flag.warn { color: var(--warn); }
.flag.quiet { color: var(--muted); }
.pre { margin-top: 10px; background: var(--panel-2); border-radius: 14px; padding: 12px 14px; max-height: 420px; overflow: auto; font: 600 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tabs button { font: 700 14px Geist, sans-serif; border: 0; border-radius: 999px; padding: 7px 13px; background: var(--panel-2); color: var(--ink); cursor: pointer; }
.tabs button[aria-selected=true] { background: var(--hero); color: #fff; }
.factrow { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.factrow:first-child { border-top: 0; }
@media (min-width: 700px) { .factrow { grid-template-columns: 1fr 1.4fr .8fr; } .factrow .wide { grid-column: 1 / 3; } }
.factrow input, .factrow select { margin-top: 0; font-size: 15px; padding: 9px 11px; }
.factrow .rm { justify-self: start; }
.preview { background: var(--panel-2); border-radius: 14px; padding: 12px 14px; }
.preview ol { margin: 6px 0 0 20px; }
.preview li { padding: 3px 0; }
.preview .chip { margin-left: 6px; }
.turnstile:empty { display: none; }
.quote { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--ink); font-size: 15px; }

/* Numbers with a range: share, then a bar with the 95% range drawn as a band. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.stat { background: var(--panel-2); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; font: inherit; color: inherit; }
button.stat { cursor: pointer; }
button.stat:hover { background: var(--chip); }
.stat dt, .stat .lab { font-size: 13px; font-weight: 700; color: var(--muted); }
.stat .big { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.stat .sub { font: 600 12px var(--mono); color: var(--muted); }
.stat.dark { background: var(--hero); color: var(--hero-ink); }
.stat.dark .lab, .stat.dark .sub { color: var(--hero-muted); }
.rng { position: relative; height: 8px; border-radius: 8px; background: rgba(127,127,127,.18); margin: 8px 0 4px; }
.rng i { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: rgba(91,79,168,.35); }
.rng b { position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); margin-left: -1px; }
.stat.dark .rng i { background: rgba(184,174,240,.35); }
.stat.dark .rng b { background: var(--hi); }

/* Report and app */
.report { display: flex; flex-direction: column; gap: 12px; }
.banner { background: var(--chip); color: var(--chip-ink); border-radius: 14px; padding: 10px 14px; font-weight: 600; font-size: 14px; }
.trend { display: block; width: 100%; height: auto; margin-top: 12px; }
.trend .axis { stroke: var(--line); }
.trend .band { fill: rgba(91,79,168,.16); }
.trend .line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.trend .pt { fill: var(--accent); }
.trend .chg { stroke: var(--ink); stroke-dasharray: 3 3; }
.trend text { fill: var(--muted); font: 600 11px var(--mono); }
.trend .chg-t { fill: var(--ink); font: 700 11px Geist, sans-serif; }
.answers { list-style: none; }
.answers > li { padding: 12px 0; border-top: 1px solid var(--line); }
.answers > li:first-child { border-top: 0; }
.answers .meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 600 12px var(--mono); color: var(--muted); }
.answers .meta .chip { margin-left: 0; }
.answers details { margin-top: 6px; }
.answers summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--chip-ink); }
.answers .text { margin-top: 8px; white-space: pre-wrap; font-size: 15px; color: var(--ink); }
.answers .src { margin-top: 6px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.answers .src a { color: var(--muted); }
.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 10px; }
.inline > * { flex: 1 1 200px; }
.inline > button { flex: 0 0 auto; }
.list-x { list-style: none; margin-top: 8px; }
.list-x li { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.list-x li:first-child { border-top: 0; }
.x { flex: none; font: 700 13px Geist, sans-serif; border: 0; border-radius: 8px; padding: 5px 9px; background: var(--panel-2); color: var(--muted); cursor: pointer; }
.x:hover { color: var(--warn); }

/* Shown only after ?nocount=1 or ?nocount=0 (public/track.js). */
.optout-banner { background: var(--chip); color: var(--chip-ink); text-align: center; font-weight: 600; padding: 6px 16px; font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Home hero, 6 Nov (session 3). Rival trackers open with a live-looking dashboard and the engines they ask; this is
   ours: a headline that names each engine in turn, a domain box that answers as you type, and a sample dashboard
   (trend with its 95% band, engine rows, a receipt being written). Data: public/herodata.js. Motion: public/home.js. */
.em { display: block; width: 18px; height: 18px; flex: none; }
.intro h1 .cyc, .intro h1 .cyc span { color: var(--accent); }
.cyc { white-space: nowrap; }
.cyc-in { display: inline-grid; text-align: left; }
.cyc-w { grid-area: 1 / 1; justify-self: start; white-space: nowrap; }
/* Live: the engine name sits on a violet slot and rolls up to the next one (owner, 6 Nov: "after a bit it visually
   rotates to gpt and etc"). The leaving name is .gone, not .out: .out is the results box and would make it a block. */
.cyc.live .cyc-in { background: var(--chip); border-radius: .2em; padding: 0 .16em 0 .12em; box-sizing: content-box; overflow: hidden; vertical-align: bottom; transition: width .55s cubic-bezier(.65,0,.35,1); }
.cyc.live .cyc-w { opacity: 0; transform: translateY(100%); transition: opacity .35s ease, transform .55s cubic-bezier(.65,0,.35,1); }
.cyc.live .cyc-w.on { opacity: 1; transform: translateY(0); }
.cyc.live .cyc-w.gone { opacity: 0; transform: translateY(-100%); }
.cm { display: inline-block; width: .74em; height: .74em; vertical-align: -0.04em; margin-right: .12em; }

.hero-check { margin-top: 22px; max-width: 34em; }
.field.big { background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 5px; margin-top: 0; transition: border-color .2s ease; }
.field.big input { border: 0; margin: 0; padding: 10px 10px; font-size: 18px; background: transparent; }
.field.big:focus-within { border-color: var(--accent); }
.hero-check.ok .field.big { border-color: var(--accent); }
.hero-check.bad .field.big { border-color: var(--warn); }
.field.big button { min-height: 48px; border-radius: 13px; }
.hint { font-size: 14px; color: var(--muted); margin-top: 8px; min-height: 1.5em; }
.hint code { color: var(--ink); }
.hero-check.ok .hint b { color: var(--accent); }
.hero-check.bad .hint { color: var(--warn); }
@media (max-width: 520px) { .field.big { flex-wrap: wrap; } .field.big input { flex: 1 1 100%; } .field.big button { flex: 1 1 100%; } }

.engines { margin-top: 24px; }
.epills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.epills li { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 999px; padding: 7px 14px 7px 10px; font-weight: 700; font-size: 15px; }
.epills .em { width: 19px; height: 19px; }
.models { font-size: 12px; color: var(--muted); margin-top: 8px; }
.models code { font-size: 12px; }

/* The dashboard card */
.dash { display: flex; flex-direction: column; gap: 10px; }
.dh { flex-wrap: wrap; }
.dash p { margin-top: 0; }
.dash .foot { margin-top: 2px; }
.dash .foot a { color: var(--hero-ink); }
.mtabs { display: flex; gap: 4px; align-self: flex-start; background: rgba(127,127,127,.16); border-radius: 999px; padding: 4px; }
.mtabs button { font: 700 14px Geist, sans-serif; border: 0; background: none; color: var(--hero-muted); padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mtabs button:hover:not([aria-selected=true]) { color: var(--hero-ink); }
.mtabs button[aria-selected=true] { background: var(--hero-ink); color: var(--hero); }
.mtabs button:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
#d-panel { display: flex; flex-direction: column; gap: 10px; }
.hl { display: flex; align-items: flex-end; gap: 14px; }
.hl-big { font-size: 50px; font-weight: 800; letter-spacing: -0.04em; line-height: .95; font-variant-numeric: tabular-nums; color: var(--hero-ink); min-width: 2.2em; }
.hl-s { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; min-width: 0; }
.hl-s b { color: var(--hero-ink); font-weight: 700; font-size: 15px; }
.hl-s span { font: 600 12px var(--mono); color: var(--hero-muted); }
.hchart { display: block; width: 100%; height: auto; overflow: visible; }
.hchart .g { stroke: rgba(238,237,242,.10); }
.hchart .ax { fill: var(--hero-muted); font: 600 10.5px var(--mono); }
.hchart .chg { stroke: var(--hero-muted); stroke-dasharray: 3 4; }
.hchart .chg-t { fill: var(--hero-ink); font: 700 11px Geist, sans-serif; }
.hchart .rv { fill: none; stroke: rgba(238,237,242,.34); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hchart .rv1 { stroke: rgba(238,237,242,.2); }
.hchart .lbl { font: 700 11px Geist, sans-serif; }
.hchart .rvl { fill: var(--hero-muted); }
.hchart .youl { fill: var(--hi); }
.hchart .band { fill: rgba(184,174,240,.17); }
.hchart .you { fill: none; stroke: var(--hi); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.hchart .pt { fill: var(--hero); stroke: var(--hi); stroke-width: 2; }
.hchart .pt:hover { fill: var(--hi); }
.d-move { font: 600 12.5px/1.45 var(--mono); color: var(--hi) !important; }

.erows { list-style: none; display: grid; gap: 2px; }
.erow { display: grid; grid-template-columns: 26px minmax(0, 9.4em) minmax(40px, 1fr) 4.4em; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 12px; cursor: pointer; transition: background .2s ease; }
.erow:hover { background: rgba(127,127,127,.12); }
.erow.on { background: rgba(184,174,240,.15); }
.erow:focus-visible { outline: 2px solid var(--hi); }
.emk { width: 26px; height: 26px; border-radius: 8px; background: var(--hero-ink); color: var(--hero); display: grid; place-items: center; flex: none; }
.emk .em { width: 16px; height: 16px; }
.enm { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.enm b { font-size: 14px; color: var(--hero-ink); }
/* Model names wrap at their hyphens rather than being cut off with an ellipsis (scripts/ui-check.mjs, 6 Nov). */
.enm code { font-size: 11px; line-height: 1.25; color: var(--hero-muted); overflow-wrap: anywhere; }
.erow .rng { margin: 0; background: rgba(238,237,242,.12); }
.erow .rng i { background: rgba(184,174,240,.38); transition: left .6s ease, right .6s ease; }
.erow .rng b { background: var(--hi); transition: left .6s ease; }
.ek { font: 600 12px var(--mono); color: var(--hero-muted); text-align: right; white-space: nowrap; }

.rc { background: rgba(127,127,127,.13); border-radius: 16px; padding: 12px 14px; }
.rc-h { display: flex; align-items: center; gap: 8px; }
.rc-h .emk { width: 22px; height: 22px; border-radius: 7px; }
.rc-h .emk .em { width: 14px; height: 14px; }
.rc-h b { color: var(--hero-ink); font-size: 14px; }
.rc-run { margin-left: auto; font: 600 11.5px var(--mono); color: var(--hero-muted); text-align: right; }
.rc .rc-q { margin-top: 8px; color: var(--hero-ink); font-weight: 700; font-size: 15px; }
.rc .rc-a { margin-top: 6px; font-size: 14.5px; color: var(--hero-muted); min-height: 3em; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--hi); vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.rc.done .caret { display: none; }
.rc-v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
@media (min-width: 560px) { .rc-v { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rc-v div { background: rgba(127,127,127,.14); border-radius: 10px; padding: 6px 9px; display: flex; flex-direction: column; min-width: 0; }
.rc-v dt { font-size: 12px; color: var(--hero-muted); font-weight: 600; }
.rc-v dd { font: 600 12.5px var(--mono); color: var(--hero-ink); }
.rc-v dd.yes { color: var(--hi); }
.rc-v dd.warn { color: #f1b394; }
@media (min-width: 900px) { .hero-a { grid-template-columns: 1fr 1.08fr; } }
@media (max-width: 420px) { .card.dash { padding: 16px 14px; } .hl-s b { font-size: 14px; } .erow { grid-template-columns: 26px minmax(0, 7em) minmax(30px, 1fr) 4.2em; gap: 8px; padding: 6px 4px; } .hl-big { font-size: 46px; } }

/* Motion, only for people who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .epills li { animation: rise .5s ease both; }
  .epills li:nth-child(2) { animation-delay: .08s; }
  .epills li:nth-child(3) { animation-delay: .16s; }
  .epills li:nth-child(4) { animation-delay: .24s; }
  .d-chart.run .you, .d-chart.run .rv { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.3,.7,.3,1) forwards; }
  .d-chart.run .rv { animation-duration: 1s; }
  .d-chart.run .band { opacity: 0; animation: fade .8s .6s forwards; }
  .d-chart.run .pt { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot .35s calc(.12s * var(--i) + .2s) forwards; }
  .d-chart.run .lbl, .d-chart.run .chg-t { opacity: 0; animation: fade .5s 1.1s forwards; }
  .rc.in { animation: rise .4s ease; }
  .rc.in .rc-v div { opacity: 0; animation: rise .35s ease forwards; animation-delay: calc(1.2s + .12s * var(--i)); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes dot { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* Feedback after every input, all pages (public/feel.js). */
input[data-state=ok] { border-color: var(--accent); padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b4fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
textarea[data-state=ok], select[data-state=ok] { border-color: var(--accent); }
input[data-state=bad], textarea[data-state=bad] { border-color: var(--warn); background-color: #fffaf7; }
input[data-state]:focus, textarea[data-state]:focus { border-color: var(--accent); }
input[data-state=bad]:focus, textarea[data-state=bad]:focus { border-color: var(--warn); }
button.is-busy { cursor: progress; }
button.is-busy:disabled { opacity: .85; }
button.is-busy::before { content: ''; display: inline-block; flex: none; width: .95em; height: .95em; margin-right: 8px; vertical-align: -0.12em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
button.copied { background: var(--accent); color: #fff; }
.toasts { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 50; pointer-events: none; width: max-content; max-width: calc(100% - 32px); }
.toast { background: var(--hero); color: var(--hero-ink); font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 14px; box-shadow: 0 8px 28px rgba(22,21,27,.2); transition: opacity .4s ease, transform .4s ease; }
.toast.warn { background: var(--warn); color: #fff; }
.toast.bye { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: rise .3s ease; }
  .tickin { animation: tickin .35s ease; }
  .shake { animation: shake .4s ease; }
  .pop { animation: pop .3s ease; }
  .press { animation: press .18s ease; }
  .done { animation: done .7s ease; }
  .flash { animation: flash .6s ease; }
  .flip { animation: flash .35s ease; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tickin { 0% { background-size: 0; } 60% { background-size: 22px; } 100% { background-size: 18px; } }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes pop { 50% { transform: scale(1.03); } }
@keyframes press { 50% { transform: scale(.97); } }
@keyframes done { from { box-shadow: 0 0 0 0 rgba(91,79,168,.55); } to { box-shadow: 0 0 0 10px rgba(91,79,168,0); } }
@keyframes flash { from { opacity: .25; } to { opacity: 1; } }
/* ---------- Free brand check, "Split desk" (owner picked A, 6 Nov). Pitch left, dark panel right; running, the panel is a
   live grid; done, a dark summary, a row per engine and every answer as a matrix. Classes are ck- so nothing site-wide
   (.out, .on, .stat) leaks in. Verdict squares: recommended violet, named lilac, not named grey, no answer dashed. */
.ck-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; padding-top: 24px; }
.ck-eyebrow { font: 600 13px/1 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.ck-pitch h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.03; margin-top: 14px; text-wrap: balance; }
.ck-pitch .lede { font-size: 18px; }
.ck-get { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.ck-get li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.ck-get li::before { content: '\2713'; color: var(--accent); font-weight: 800; flex: none; }
.ck-k { font-size: 14px; color: var(--muted); }
.ck-pitch .ck-k { margin-top: 26px; }
.ck-mono { font: 600 12px/1.4 var(--mono); color: var(--muted); }
.ck-panel, .ck-dark { background: var(--hero); color: var(--hero-ink); border-radius: 28px; padding: 28px; min-width: 0; }
.ck-panel .ck-k, .ck-panel .ck-mono, .ck-dark .ck-k, .ck-dark .ck-mono { color: var(--hero-muted); }
.ck-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ck-head h2, .ck-dark h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; }
.ck-form label { margin-top: 14px; font-size: 14px; color: var(--hero-ink); }
.ck-form input:not([type]) { background-color: #24232b; border-color: #36343f; color: var(--hero-ink); font-weight: 500; padding: 13px 15px; }
.ck-form input:not([type])::placeholder { color: #6f6c7a; }
.ck-form input:not([type]):focus { border-color: var(--hi); }
.ck-panel input[data-state=ok] { background-color: #24232b; border-color: var(--hi); padding-right: 42px; }
.ck-panel input[data-state=bad] { background-color: #2a2126; border-color: #d0835f; }
.ck-two { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }
.ck-qs { margin-top: 16px; background: #1f1e25; border-radius: 16px; padding: 14px 16px; font-size: 14px; }
.ck-qs ol { list-style: none; display: grid; gap: 8px; margin-top: 8px; counter-reset: q; }
.ck-qs li { display: flex; gap: 10px; justify-content: space-between; align-items: center; counter-increment: q; }
.ck-qs li > span:first-child::before { content: counter(q) '. '; color: var(--hero-muted); }
.ck-tag { flex: none; font: 600 11px/1 var(--mono); border-radius: 999px; padding: 4px 8px; white-space: nowrap; background: var(--chip); color: var(--chip-ink); }
.ck-tag.branded { background: var(--panel-2); color: var(--muted); }
.ck-panel .ck-tag.unbranded { background: #6a62a3; color: #fff; }
.ck-panel .ck-tag.branded { background: #2b2a33; color: var(--hero-muted); }
.ck-form .turnstile { margin-top: 14px; }
.ck-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px/1 Geist, sans-serif; border: 0; border-radius: 999px; padding: 16px 26px; background: var(--accent); color: #fff; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ck-go:hover { background: #4d4291; }
.ck-form .ck-go { width: 100%; margin-top: 18px; }
.ck-go:disabled { opacity: .7; cursor: progress; }
.ck-ghost { display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 Geist, sans-serif; border-radius: 999px; padding: 15px 22px; color: var(--hero-ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px #3c3a46; white-space: nowrap; }
.ck-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--hi); }
.ck-foot { display: flex; justify-content: space-between; gap: 6px 12px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; color: var(--hero-muted); }
.ck-panel .msg { color: var(--hero-ink); }
.ck-panel .msg.warn { color: #f0a483; }

/* Verdict squares */
.ck-v { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 9px; border: 0; padding: 0; background: #2b2a33; vertical-align: middle; }
.ck-v.v-r { background: var(--hi); }
.ck-v.v-n { background: #6a62a3; }
.ck-v.v-x { background: #34333d; }
.ck-v.v-m { background: transparent; border: 1.5px dashed #4a4855; }
.ck-v.wait { background: transparent; box-shadow: inset 0 0 0 1.5px #34323d; }
.ck-v.asking { background: transparent; box-shadow: inset 0 0 0 1.5px var(--hi); position: relative; }
.ck-v.asking::after { content: ''; position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #4a4855; border-top-color: var(--hi); animation: spin .8s linear infinite; }
.ck-light .ck-v.v-r, .ck-light .ck-pill.v-r { background: var(--accent); color: #fff; }
.ck-light .ck-v.v-n, .ck-light .ck-pill.v-n { background: var(--hi); color: var(--ink); }
.ck-light .ck-v.v-x, .ck-light .ck-pill.v-x { background: #e2e1e7; color: var(--muted); }
.ck-light .ck-v.v-x { box-shadow: inset 0 0 0 1px #cfcdd6; }
.ck-light .ck-v.v-m, .ck-light .ck-pill.v-m { background: transparent; border-color: #c9c7d0; color: var(--muted); }
.ck-legend { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.ck-dark .ck-legend, .ck-live .ck-legend { color: var(--hero-muted); }
.ck-legend span { display: inline-flex; gap: 7px; align-items: center; }
.ck-legend .ck-v { width: 16px; height: 16px; border-radius: 5px; }

/* Running */
.ck-prog { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.ck-what { font-weight: 700; margin-top: 4px; overflow-wrap: anywhere; }
.ck-prog b { font: 800 40px/1 Geist, sans-serif; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-of { color: var(--hero-muted); font-size: 22px; }
.ck-bar { display: block; height: 6px; border-radius: 99px; background: #2b2a33; position: relative; overflow: hidden; margin-top: 14px; }
.ck-bar > i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--hi); border-radius: 99px; transition: width .6s cubic-bezier(.3,.7,.4,1); }
.ck-bar.light { background: var(--panel-2); margin-top: 6px; }
.ck-bar.light > i { background: var(--accent); }
.ck-grid { display: grid; grid-template-columns: 128px repeat(var(--q, 4), minmax(0, 1fr)); gap: 8px 10px; align-items: center; margin-top: 20px; }
.ck-h { font: 600 12px/1 var(--mono); color: var(--hero-muted); text-align: center; }
.ck-e { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; min-width: 0; }
.ck-c { display: flex; gap: 6px; justify-content: center; }
.ck-line { margin-top: 18px; background: #1f1e25; border-radius: 16px; padding: 14px 16px; font-size: 14px; min-height: 92px; }
.ck-line .ck-mono { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.ck-line .ck-mono .em { width: 15px; height: 15px; }
.ck-line .ck-v { width: 14px; height: 14px; border-radius: 4px; }
.ck-vl { color: var(--hero-ink); }
.ck-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #4a4855; border-top-color: var(--hi); animation: spin .8s linear infinite; flex: none; }
.ck-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; margin-left: 1px; animation: blink 1s steps(1) infinite; }
.ck-live .ck-legend { margin-top: 14px; }
.ck-key { list-style: none; margin-top: 12px; display: grid; gap: 4px; font-size: 13px; color: var(--hero-muted); }
.ck-key b { font: 600 12px var(--mono); color: var(--hero-ink); margin-right: 4px; }

/* Done */
.ck-out:empty { display: none; }
.ck-out { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }
.ck-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; align-items: end; }
.ck-sum h2 { font-size: 34px; margin-top: 8px; overflow-wrap: anywhere; }
.ck-sum .ck-k { margin-top: 8px; }
.ck-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ck-big { font: 800 52px/1 Geist, sans-serif; letter-spacing: -0.035em; margin: 6px 0; }
.ck-sub { font-size: 13px; color: var(--hero-muted); margin-top: 4px; }
.ck-ci { display: block; position: relative; height: 10px; margin-top: 10px; }
.ck-ci::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: #2f2e37; }
.ck-ci b { position: absolute; top: 2px; height: 6px; background: #5d5687; border-radius: 3px; }
.ck-ci i { position: absolute; top: 0; width: 3px; height: 10px; background: var(--hi); border-radius: 2px; }
.ck-light { background: var(--panel); border-radius: 24px; padding: 24px; min-width: 0; }
.ck-light h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ck-light > .ck-k { margin-top: 4px; }
.ck-eng { display: grid; gap: 14px; margin-top: 16px; }
.ck-er { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: center; }
.ck-en { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 700; min-width: 0; }
.ck-meter { display: grid; min-width: 0; }
.ck-mxh { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ck-mx { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--e, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ck-mx > div { padding: 12px 8px; border-bottom: 1px solid var(--line); min-width: 0; }
.ck-mxe { font-weight: 700; font-size: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.ck-mxq { font-weight: 600; font-size: 15px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.ck-mx .ck-c { align-items: center; }
.ck-mx .ck-v { width: 30px; height: 30px; }
.ck-mx button.ck-v { cursor: pointer; transition: transform .15s ease; }
.ck-mx button.ck-v:hover { transform: scale(1.1); }
.ck-mx button.ck-v.sel { outline: 2.5px solid var(--ink); outline-offset: 2px; }
.ck-open:empty { display: none; }
.ck-open { margin-top: 16px; background: var(--panel-2); border-radius: 18px; padding: 18px 20px; }
.ck-ot { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.ck-ot .em { width: 18px; height: 18px; }
.ck-pill { font: 600 12px/1 var(--mono); border-radius: 999px; padding: 6px 10px; white-space: nowrap; border: 1.5px solid transparent; }
.ck-pill.v-m { border-style: dashed; }
.ck-pill.cited { background: var(--chip); color: var(--chip-ink); }
.ck-oq { font-weight: 700; margin-top: 12px; }
.ck-otext { margin-top: 8px; font-size: 16px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.ck-otext mark, .answers mark { background: var(--chip); color: var(--chip-ink); padding: 0 3px; border-radius: 4px; font-weight: 700; }
.ck-src { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck-src a { font: 600 12px/1 var(--mono); background: var(--panel); border-radius: 8px; padding: 7px 9px; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
.ck-src a.me { background: var(--chip); color: var(--chip-ink); }
.ck-src a:hover { color: var(--ink); }
.ck-all { margin-top: 16px; }
.ck-all summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--chip-ink); }
.ck-all .answers { margin-top: 8px; }
.ck-next { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.ck-next h2 { font-size: 24px; }
.ck-next .ck-k { margin-top: 6px; }
.ck-acts { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.ck-fine { font-size: 13px; color: var(--muted); max-width: 60em; }
.ck-more { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
@media (prefers-reduced-motion: no-preference) {
  .ck-pop { animation: ckpop .45s cubic-bezier(.3,1.6,.5,1); }
  .ck-live:not([hidden]) { animation: rise .4s ease both; }
  .ck-out > * { animation: rise .45s ease both; }
  .ck-out > :nth-child(2) { animation-delay: .06s; } .ck-out > :nth-child(3) { animation-delay: .12s; } .ck-out > :nth-child(4) { animation-delay: .18s; }
}
@keyframes ckpop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 899px) {
  .ck-top { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 10px; }
  .ck-top.run .ck-pitch { display: none; }
  .ck-sum { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ck-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ck-pitch h1 { font-size: 36px; }
  .ck-pitch .lede { font-size: 16px; }
  .ck-get { display: none; }
  .ck-panel, .ck-dark { padding: 20px; border-radius: 22px; }
  .ck-light { padding: 18px; border-radius: 20px; }
  .ck-head h2, .ck-dark h2 { font-size: 22px; }
  .ck-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ck-qs li { align-items: flex-start; }
  .ck-prog b { font-size: 32px; }
  .ck-grid { grid-template-columns: 30px repeat(var(--q, 4), minmax(0, 1fr)); gap: 8px 4px; }
  .ck-e span { display: none; }
  .ck-c { gap: 3px; }
  .ck-grid .ck-v { width: 24px; height: 24px; border-radius: 7px; }
  .ck-sum h2 { font-size: 28px; }
  .ck-stats { gap: 10px; }
  .ck-big { font-size: 30px; }
  .ck-stats .ck-mono { font-size: 11px; }
  .ck-er { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; }
  .ck-en { grid-column: 1 / -1; }
  .ck-mx { grid-template-columns: repeat(var(--e, 4), minmax(0, 1fr)); }
  .ck-corner { display: none; }
  .ck-mxe span { display: none; }
  .ck-mx > .ck-mxq { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; font-size: 14px; align-items: flex-start; }
  .ck-mx .ck-v { width: 28px; height: 28px; }
  .ck-next { flex-direction: column; align-items: stretch; }
  .ck-acts .ck-go, .ck-acts .ck-ghost { flex: 1 1 100%; }
  .ck-open { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* Tools index: every tile the same size (the old stray rule made the first tile span two cells on a phone only). */
.bento.all .tile, .bento.all .tile.t0, .bento.all .tile.t1 { grid-column: auto; display: flex; align-items: flex-start; text-align: left; }
.bento.all .tile .art, .bento.all .tile.t0 .art, .bento.all .tile.t1 .art { grid-row: auto; margin: 0 0 8px; }
@media (min-width: 900px) { .bento.all { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1150px) { .bento.all { grid-template-columns: repeat(4, 1fr); } }

/* Wide screens: the intro splits, headline left and its paragraph right, so the paragraph does not hang off one side. */
@media (min-width: 1000px) {
  main.wide > .intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 56px; align-items: end; }
  main.wide > .intro > h1 { grid-column: 1; grid-row: 1 / span 6; }
  main.wide > .intro > :not(h1) { grid-column: 2; }
  main.wide > .intro .lede { max-width: none; }
}

/* Reading pages (method, risks, developers, facts, what's new): cards flow in two columns on a wide screen. */
@media (min-width: 1000px) {
  main.cols { display: block; columns: 2; column-gap: 12px; }
  main.cols > * { break-inside: avoid; margin-bottom: 12px; }
  main.cols > .crumbs, main.cols > .intro { column-span: all; }
  main.cols > .crumbs { margin-bottom: 0; }
}

/* Tool pages: the tool and its result on the left, what it cannot tell you and how it works on the right. */
.tool-desk, .tool-main, .tool-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1000px) {
  .tool-desk { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
  .tool-side { position: sticky; top: 12px; }
}
.bento.three .tile, .bento.three .tile.t0, .bento.three .tile.t1 { align-items: flex-start; text-align: left; }

/* /sample/ "Try this" buttons, and the column a report sits in. */
.try { margin-top: 18px; }
.try-h { font: 600 12px var(--mono); color: var(--muted); }
.try-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.try-b button { font: 500 14.5px Geist, sans-serif; color: var(--ink); background: var(--panel); border: 0; border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: background .2s ease; text-align: left; }
.try-b button:hover { background: var(--chip); }
.try-b b { font-weight: 800; }
.report { display: flex; flex-direction: column; gap: 12px; }
/* ---------- The report desk (public/desk.js): /sample/, /app/ and /share/. Owner, 7 Nov: "a proper dashboard ... multiple
   pages, something like in this screenshot" (a retail dashboard: pill nav, KPI tiles with one dark tile, a dial, hatched
   week bars, a this-period line over the period before, a card board, a floating icon rail, a dark theme). Ours stays
   near-monochrome: violet only in chips, the dial and the squares that mean "recommended". No gradients, no glass, no dots.
   The dark theme swaps the desk's tokens and the site's, so the forms and tables reused inside follow it. */
.dk { --dk-bg: var(--canvas); --dk-card: var(--panel); --dk-2: var(--panel-2); --dk-ink: var(--ink); --dk-mute: var(--muted); --dk-line: var(--line);
  --dk-dark: #16151b; --dk-dark-ink: #eeedf2; --dk-dark-mute: #928f9e; --dk-chip: var(--chip); --dk-chip-ink: var(--chip-ink);
  --dk-acc: var(--accent); --dk-acc-ink: var(--accent); --dk-x: var(--hi); --dk-x2: rgba(184,174,240,.26); --dk-o1: rgba(255,255,255,.08); --dk-o2: rgba(255,255,255,.16);
  --dk-bar: #dcdae2; --dk-hatch: #bdb9c9; --dk-sq-x: #e2e1e7; --dk-sq-xl: #cfcdd6; --dk-sq-m: #c9c7d0;
  background: var(--dk-bg); color: var(--dk-ink); border-radius: 30px; padding: 10px; margin: 0 -10px; display: flex; flex-direction: column; gap: 12px; }
.dk[data-theme=dark] { --canvas: #0f0e13; --panel: #1b1a21; --panel-2: #26252e; --ink: #eeedf2; --muted: #9c99a8; --line: #312f39;
  --chip: #2d2946; --chip-ink: #d6cffc; --warn: #f2a985; --warn-bg: #3b261d;
  --dk-dark: #eeedf2; --dk-dark-ink: #16151b; --dk-dark-mute: #5f5d69; --dk-acc: #8a7fe0; --dk-acc-ink: var(--hi);
  --dk-x: #5b4fa8; --dk-x2: rgba(91,79,168,.2); --dk-o1: rgba(22,21,27,.07); --dk-o2: rgba(22,21,27,.15);
  --dk-bar: #2b2a33; --dk-hatch: #4a4855; --dk-sq-x: #34333d; --dk-sq-xl: #34333d; --dk-sq-m: #4a4855; }
.dk[data-theme=dark] :is(input, textarea, select) { background: #121117; color: var(--ink); border-color: var(--line); }
.dk[data-theme=dark] .primary { background: var(--hi); color: #16151b; }
.dk-ic { width: 20px; height: 20px; flex: none; }
.dk-em { width: 16px; height: 16px; flex: none; }

/* Top bar: who, the pages, the end */
.dk-bar { display: flex; align-items: center; gap: 10px; background: var(--dk-card); border-radius: 22px; padding: 8px; min-width: 0; }
.dk-brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto; }
.dk-logo { width: 40px; height: 40px; border-radius: 13px; background: var(--dk-dark); color: var(--dk-dark-ink); display: grid; place-items: center; font: 800 18px Geist, sans-serif; flex: none; }
.dk-bn { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.dk-bn b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.dk-bn span { font: 600 12px var(--mono); color: var(--dk-mute); overflow-wrap: anywhere; }
.dk-add { width: 30px; height: 30px; border-radius: 10px; border: 0; background: var(--dk-2); color: var(--dk-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.dk-add .dk-ic { width: 16px; height: 16px; }
.dk-sites { position: relative; }
.dk-sites > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; border-radius: 14px; padding-right: 6px; }
.dk-sites > summary::-webkit-details-marker { display: none; }
.dk-sites > summary > .dk-ic { width: 16px; height: 16px; color: var(--dk-mute); }
.dk-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; background: var(--dk-card); border-radius: 18px; padding: 6px; min-width: 240px; box-shadow: 0 14px 36px rgba(22,21,27,.16); display: flex; flex-direction: column; gap: 2px; }
.dk-menu button { display: flex; flex-direction: column; align-items: flex-start; border: 0; background: none; color: var(--dk-ink); text-align: left; padding: 8px 10px; border-radius: 12px; cursor: pointer; font: inherit; }
.dk-menu button:hover, .dk-menu button[aria-current=true] { background: var(--dk-2); }
.dk-menu b { font-size: 14px; }
.dk-menu span { font: 600 12px var(--mono); color: var(--dk-mute); }
.dk-nav { display: flex; gap: 2px; background: var(--dk-2); border-radius: 999px; padding: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.dk-nav::-webkit-scrollbar { display: none; }
.dk-nav a { font: 700 14.5px Geist, sans-serif; color: var(--dk-mute); text-decoration: none; padding: 8px 15px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: background .2s ease, color .2s ease; }
.dk-nav a:hover { color: var(--dk-ink); }
.dk-nav a[aria-current=page] { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-n { font: 600 11px/1 var(--mono); background: var(--dk-chip); color: var(--dk-chip-ink); border-radius: 999px; padding: 3px 6px; }
.dk-nav a[aria-current=page] .dk-n, .dk-seg button[aria-pressed=true] .dk-n { background: var(--dk-o2); color: inherit; }
.dk-end { display: flex; align-items: center; gap: 8px; flex: none; }
.dk-end:empty { display: none; }
.dk-chip { font: 600 12px var(--mono); background: var(--dk-chip); color: var(--dk-chip-ink); border-radius: 999px; padding: 7px 11px; white-space: nowrap; }
.dk-av { width: 40px; height: 40px; border-radius: 50%; background: var(--dk-2); display: grid; place-items: center; font-weight: 800; text-decoration: none; }

/* The floating rail of tools, and the page beside it */
.dk-main { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
.dk-rail { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--dk-dark); border-radius: 22px; padding: 8px; z-index: 4; }
.dk-rb { width: 40px; height: 40px; border-radius: 14px; border: 0; background: transparent; color: var(--dk-dark-mute); display: grid; place-items: center; cursor: pointer; position: relative; text-decoration: none; transition: background .2s ease, color .2s ease; }
.dk-rb:hover { background: var(--dk-o1); color: var(--dk-dark-ink); }
.dk-rl { display: none; }
.dk-rb::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: var(--dk-dark); color: var(--dk-dark-ink); font: 600 12.5px Geist, sans-serif; padding: 7px 10px; border-radius: 10px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.dk-rb:hover::after, .dk-rb:focus-visible::after { opacity: 1; }
.dk-page { display: flex; flex-direction: column; gap: 12px; min-width: 0; outline: none; }
.dk-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 16px; flex-wrap: wrap; padding: 8px 4px 0; }
.dk-title h2 { font-size: clamp(28px, 3.3vw, 38px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.dk-title p { color: var(--dk-mute); margin-top: 6px; max-width: 46em; }
.dk-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--dk-card); border-radius: 999px; padding: 9px 15px; font: 600 13px Geist, sans-serif; color: var(--dk-mute); }
.dk-pill .dk-ic { width: 16px; height: 16px; }
.dk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dk-acts { display: flex; gap: 8px 12px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.dk-seg { display: flex; gap: 2px; background: var(--dk-card); border-radius: 999px; padding: 4px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.dk-seg::-webkit-scrollbar { display: none; }
.dk-card .dk-seg { background: var(--dk-2); }
.dk-seg button { font: 700 14px Geist, sans-serif; border: 0; background: none; color: var(--dk-mute); padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.dk-seg button:hover { color: var(--dk-ink); }
.dk-seg button[aria-pressed=true] { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-seg.sm button { font-size: 13px; padding: 6px 11px; }
.dk-btn { font: 700 14px Geist, sans-serif; border: 0; border-radius: 999px; padding: 10px 16px; background: var(--dk-card); color: var(--dk-ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dk-btn:hover { background: var(--dk-2); }
.dk-card .dk-btn, .dk-bc .dk-btn { background: var(--dk-2); }
.dk-btn.dark, .dk-card .dk-btn.dark { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-btn .dk-ic { width: 17px; height: 17px; }
.dk-btn.sm { font-size: 13px; padding: 7px 12px; }
.dk-switch { display: inline-flex; align-items: center; gap: 8px; font: 700 13.5px Geist, sans-serif; color: var(--dk-mute); cursor: pointer; white-space: nowrap; position: relative; }
.dk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dk-switch span { width: 34px; height: 20px; border-radius: 999px; background: var(--dk-hatch); position: relative; transition: background .2s ease; flex: none; }
.dk-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--dk-card); transition: transform .2s ease; }
.dk-switch input:checked + span { background: var(--dk-dark); }
.dk-switch input:checked + span::after { transform: translateX(14px); }
.dk-switch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.dk-switch input:disabled + span { opacity: .4; }

/* Cards and tiles */
.dk-grid { display: grid; gap: 12px; }
.g-ov { grid-template-columns: minmax(0, .92fr) minmax(0, 1.65fr); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-an { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
.g-ans { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.g-21 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.dk-grid:empty { display: none; }
.dk-card { background: var(--dk-card); border-radius: 24px; padding: 18px 20px; min-width: 0; }
.dk-card.dark { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-ch { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dk-ch h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.dk-ch .dk-mono { display: block; margin-top: 2px; }
.dk-mono { font: 600 12px/1.45 var(--mono); color: var(--dk-mute); }
.dk-card.dark .dk-mono, .dk-card.dark p { color: var(--dk-dark-mute); }
.dk-card.dark p b { color: var(--dk-dark-ink); }
.dk-mute { color: var(--dk-mute); font-size: 14px; margin-top: 10px; }
.dk-mute a, .dk-card p a { color: var(--dk-ink); }
.dk-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 700 13.5px Geist, sans-serif; color: var(--dk-ink); text-decoration: none; }
.dk-more .dk-ic, .dk-kl .dk-ic { width: 15px; height: 15px; }
.dk-none h3 { font-size: 18px; font-weight: 800; }
.dk-none p { color: var(--dk-mute); margin-top: 6px; }
.dk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dk-kpis.k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dk-kpi { background: var(--dk-card); border-radius: 24px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dk-kpi.dark { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-kpi.sel { box-shadow: inset 0 0 0 2px var(--dk-acc); }
.dk-kh { font-weight: 700; font-size: 14px; color: var(--dk-mute); }
.dk-kv { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; min-height: 50px; }
.dk-kv b { font: 800 42px/1 Geist, sans-serif; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dk-kv small { font-size: 16px; font-weight: 700; color: var(--dk-mute); letter-spacing: 0; }
.dk-kd { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: 13px; color: var(--dk-mute); }
.dk-kn { font: 600 12px/1.45 var(--mono); color: var(--dk-mute); }
.dk-kpi.dark .dk-kh, .dk-kpi.dark .dk-kn, .dk-kpi.dark .dk-kd, .dk-kpi.dark small { color: var(--dk-dark-mute); }
.dk-kl { margin-top: auto; align-self: flex-start; font: 700 13px Geist, sans-serif; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; background: var(--dk-2); border: 0; border-radius: 999px; padding: 7px 12px; cursor: pointer; }
.dk-kpi.dark .dk-kl { background: var(--dk-o1); }
.dk-ls { display: none; }
.dk-kpi > .dk-spark, .dk-kpi > .dk-mbars { width: 100%; height: 40px; }
.dk-d { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--mono); border-radius: 999px; padding: 5px 8px; background: var(--dk-2); color: var(--dk-mute); white-space: nowrap; }
.dk-d.up { background: var(--dk-chip); color: var(--dk-chip-ink); }
.dk-d.down { background: var(--warn-bg); color: var(--warn); }
.dk-d.none { background: transparent; padding-left: 0; padding-right: 0; }
.dk-kpi.dark .dk-d:not(.none), .dk-card.dark .dk-d:not(.none) { background: var(--dk-o1); color: var(--dk-dark-ink); }
.dk-kpi.dark .dk-d.up, .dk-card.dark .dk-d.up { background: var(--dk-x); color: #16151b; }
.dk[data-theme=dark] .dk-kpi.dark .dk-d.up, .dk[data-theme=dark] .dk-card.dark .dk-d.up { color: #fff; }
.dk-tri { width: 8px; height: 8px; fill: currentColor; flex: none; }
.dk-spark { width: 120px; height: 42px; flex: none; overflow: visible; }
.dk-spark path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dk-spark circle { fill: var(--dk-acc); }
.dk-mbars { width: 66px; height: 44px; flex: none; }
.dk-mbars rect { fill: var(--dk-bar); }
.dk-mbars rect.on { fill: var(--dk-acc); }
.dk-kpi.dark .dk-mbars rect { fill: var(--dk-o2); }
.dk-kpi.dark .dk-mbars rect.on { fill: var(--dk-x); }
.dk-ring { width: 54px; height: 54px; flex: none; }
.dk-ring .bg { fill: none; stroke: var(--dk-2); stroke-width: 7; }
.dk-ring .fg { fill: none; stroke: var(--dk-acc); stroke-width: 7; stroke-linecap: round; }
.dk-ring text { font: 700 12px var(--mono); fill: var(--dk-ink); }
.dk-card.dark .dk-ring .bg { stroke: var(--dk-o1); }
.dk-card.dark .dk-ring .fg { stroke: var(--dk-x); }
.dk-card.dark .dk-ring text { fill: var(--dk-dark-ink); }

/* Overview: the dial */
.dk-gauge { display: flex; flex-direction: column; }
.dk-gwrap { position: relative; width: 100%; max-width: 310px; margin: 4px auto 18px; }
.dk-gsvg { display: block; width: 100%; height: auto; overflow: visible; }
.dk-gsvg .g-track { fill: none; stroke: var(--dk-o1); stroke-width: 14; stroke-linecap: round; }
.dk-gsvg .g-band { fill: none; stroke: var(--dk-x2); stroke-width: 22; }
.dk-gsvg .g-val { fill: none; stroke: var(--dk-x); stroke-width: 14; stroke-linecap: round; }
.dk-gsvg line { stroke: var(--dk-o2); stroke-width: 2; stroke-linecap: round; }
.dk-gsvg line.on { stroke: var(--dk-dark-ink); opacity: .55; }
.dk-gsvg .g-knob { fill: var(--dk-dark-ink); stroke: var(--dk-dark); stroke-width: 4; }
.dk-gnum { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
.dk-gnum b { font: 800 50px/1 Geist, sans-serif; letter-spacing: -0.045em; }
.dk-gnum > span { font: 600 12px var(--mono); color: var(--dk-dark-mute); }
.dk-g0, .dk-g1 { position: absolute; bottom: -18px; font: 600 11px var(--mono); color: var(--dk-dark-mute); }
.dk-g0 { left: 2%; }
.dk-g1 { right: 0; }
.dk-g-say { font-size: 14px; margin-top: auto; }
.dk-g-rank { font-size: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dk-o1); }

/* Overview: week bars, and the analytics line */
.dk-chart { position: relative; min-height: 200px; }
.dk-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.dk-svg .g { stroke: var(--dk-line); stroke-dasharray: 2 5; }
.dk-svg .ax { fill: var(--dk-mute); font: 600 11px var(--mono); }
.dk-svg .ax.on { fill: var(--dk-ink); font-weight: 700; }
.dk-svg .hk-b { fill: var(--dk-2); }
.dk-svg .hk-l { stroke: var(--dk-hatch); stroke-width: 2.6; }
.dk-svg .br { fill: url(#dkh); }
.dk-svg .br-hov { fill: url(#dkh); stroke: var(--dk-ink); stroke-width: 1.5; }
.dk-svg .br-on { fill: var(--dk-dark); }
.dk-svg .br-none { fill: var(--dk-line); }
.dk-svg .avg { stroke: var(--dk-acc); stroke-width: 1.5; stroke-dasharray: 5 5; }
.dk-svg .avg-t { fill: var(--dk-acc-ink); font: 700 11px var(--mono); }
.dk-svg .avg-t, .dk-svg .br-val { paint-order: stroke; stroke: var(--dk-card); stroke-width: 4px; stroke-linejoin: round; }
.dk-svg .br-val { fill: var(--dk-ink); font: 800 13px Geist, sans-serif; }
.dk-wk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0 0 10px; font: 600 12px/1.5 var(--mono); color: var(--dk-mute); }
.dk-wk > b { font: 800 13.5px Geist, sans-serif; color: var(--dk-ink); }
.dk-wk span b { color: var(--dk-ink); }
.dk-wkc { display: inline-flex; align-items: center; gap: 6px; }
.dk-wk .dk-tag { font-family: var(--mono); }
.dk-svg .chg { stroke: var(--dk-mute); stroke-width: 1.5; }
.dk-svg .chg-b { fill: var(--dk-chip); }
.dk-svg .chg-t { fill: var(--dk-chip-ink); font: 700 10.5px var(--mono); }
.dk-svg .hit { fill: transparent; cursor: pointer; }
.dk-svg .band { fill: var(--dk-chip); }
.dk-svg .cur { fill: none; stroke: var(--dk-ink); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.dk-svg .prev { fill: none; stroke: var(--dk-mute); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.dk-svg .pt { fill: var(--dk-card); stroke: var(--dk-ink); stroke-width: 2; }
.dk-svg .pt.on { fill: var(--dk-acc); stroke: var(--dk-acc); }
.dk-svg .guide { stroke: var(--dk-mute); stroke-dasharray: 3 4; }
.dk-tip { position: absolute; z-index: 3; background: var(--dk-dark); color: var(--dk-dark-ink); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; min-width: 160px; max-width: 240px; box-shadow: 0 10px 28px rgba(22,21,27,.18); }
.dk-tip > b { font-size: 13.5px; font-weight: 800; }
.dk-tip > span { color: var(--dk-dark-mute); font: 600 12px/1.45 var(--mono); }
.dk-tip > span b { color: var(--dk-dark-ink); }
.dk-tip .dk-d { background: var(--dk-o1); color: var(--dk-dark-ink); }
.dk-tip .dk-d.up { background: var(--dk-x); color: #16151b; }
.dk-tip-c, .dk-tip-p { color: var(--dk-dark-ink) !important; }
.dk-big { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.dk-big b { font: 800 38px/1 Geist, sans-serif; letter-spacing: -0.045em; }
.dk-legend { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dk-lgs { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: flex-end; }
.dk-lg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dk-mute); }
.dk-lg i { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--dk-ink); }
.dk-lg i.lg-dash { border-top: 2px dashed var(--dk-mute); }
.dk-lg i.lg-band { height: 10px; border: 0; border-radius: 3px; background: var(--dk-chip); }

/* Rows: engines, rivals, findings */
.dk-erows { list-style: none; display: grid; gap: 2px; }
.dk-erow { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 8em) minmax(28px, 1fr) auto 2.8em; gap: 10px; align-items: center; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 7px 8px; border-radius: 14px; cursor: pointer; transition: background .2s ease; }
.dk-erow:hover { background: var(--dk-2); }
.dk-erow.on { background: var(--dk-chip); }
.dk-emk { width: 30px; height: 30px; border-radius: 10px; background: var(--dk-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.dk-erow.on .dk-emk { background: var(--dk-card); }
.dk-enm { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.dk-enm b { font-size: 14px; }
.dk-enm code { font-size: 11px; color: var(--dk-mute); overflow-wrap: anywhere; }
.dk-erow .rng, .dk-board .rng, .dk-ba .rng { margin: 0; }
.dk-ek { font: 600 12px var(--mono); color: var(--dk-mute); white-space: nowrap; }
.dk-ep { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dk-hbars { list-style: none; display: grid; gap: 12px; }
.dk-hbars li { display: grid; grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 3em; gap: 10px; align-items: center; }
.dk-hbars.wide li { grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 3em; }
.dk-hn { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.dk-hb { height: 12px; border-radius: 6px; background: var(--dk-2); overflow: hidden; }
.dk-hb i { display: block; height: 100%; border-radius: 6px; background: var(--dk-hatch); transition: width .5s ease; }
.dk-hbars li.me .dk-hb i { background: var(--dk-acc); }
.dk-hp { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dk-mini { list-style: none; display: grid; gap: 8px; }
.dk-mini li { display: grid; gap: 4px; padding: 10px 12px; background: var(--dk-2); border-radius: 16px; min-width: 0; }
.dk-mini li b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.dk-tag { justify-self: start; display: inline-flex; align-items: center; font: 600 11px/1 var(--mono); border-radius: 999px; padding: 4px 8px; background: var(--dk-2); color: var(--dk-mute); white-space: nowrap; }
.dk-mini .dk-tag { background: var(--dk-card); }
.dk-tag.t-facts { background: var(--warn-bg); color: var(--warn); }
.dk-tag.t-engine, .dk-tag.t-question, .dk-tag.t-source, .dk-tag.t-unbranded, .dk-tag.t-cited { background: var(--dk-chip); color: var(--dk-chip-ink); }
.dk-tag.t-page { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-tag.v-r { background: var(--accent); color: #fff; }
.dk-tag.v-n { background: var(--hi); color: #16151b; }
.dk-tag.v-x { background: var(--dk-sq-x); color: var(--dk-mute); }
.dk-tag.v-m { background: transparent; box-shadow: inset 0 0 0 1px var(--dk-sq-m); }

/* Answers: squares, the grid, the reader */
.dk-sq { display: inline-block; flex: none; width: 24px; height: 24px; border-radius: 7px; border: 0; padding: 0; background: var(--dk-sq-x); vertical-align: middle; }
button.dk-sq { cursor: pointer; transition: transform .15s ease, opacity .2s ease; }
button.dk-sq:hover { transform: scale(1.12); }
.dk-sq.v-r { background: var(--accent); }
.dk-sq.v-n { background: var(--hi); }
.dk-sq.v-x { background: var(--dk-sq-x); box-shadow: inset 0 0 0 1px var(--dk-sq-xl); }
.dk-sq.v-m { background: transparent; border: 1.5px dashed var(--dk-sq-m); }
.dk-sq.dim { opacity: .16; }
.dk-sq.sel { outline: 2.5px solid var(--dk-ink); outline-offset: 2px; }
.dk-sq.gone { opacity: .5; }
.dk-seg .dk-sq, .dk-legend2 .dk-sq { width: 12px; height: 12px; border-radius: 4px; }
.dk-mxc { overflow-x: auto; }
.dk-mx { display: grid; grid-template-columns: minmax(13em, 1.7fr) repeat(var(--e), minmax(78px, 1fr)); gap: 0 10px; align-items: stretch; min-width: 600px; }
.dk-mxe { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; font: 700 12.5px Geist, sans-serif; color: var(--dk-mute); padding-bottom: 8px; }
.dk-mxe .dk-em { width: 20px; height: 20px; color: var(--dk-ink); }
.dk-mxq { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; justify-content: center; font-size: 13.5px; line-height: 1.3; padding: 10px 0; border-top: 1px solid var(--dk-line); }
.dk-mxq b { font: 600 12px var(--mono); color: var(--dk-acc-ink); margin-right: 2px; }
.dk-mxcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 0; border-top: 1px solid var(--dk-line); }
.dk-sqs { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.dk-mxnote { margin-top: 12px; }
.dk-reader { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.dk-rh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-rh .dk-em { width: 20px; height: 20px; }
.dk-rq { font-weight: 800; font-size: 16px; line-height: 1.35; }
.dk-rv { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.dk-ev { font-size: 14px; color: var(--dk-mute); border-left: 3px solid var(--dk-chip); padding-left: 10px; }
.dk-rt { white-space: pre-wrap; font-size: 15px; line-height: 1.55; background: var(--dk-2); border-radius: 16px; padding: 12px 14px; overflow-wrap: anywhere; }
.dk-rt mark { background: var(--dk-chip); color: var(--dk-chip-ink); border-radius: 4px; padding: 0 2px; }
.dk-src { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dk-src a { font: 600 12px var(--mono); background: var(--dk-2); border-radius: 999px; padding: 6px 10px; text-decoration: none; overflow-wrap: anywhere; }
.dk-src a.me { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-claim { justify-self: start; background: var(--warn-bg); color: var(--warn); font-size: 14px; border-radius: 10px; padding: 5px 10px; }
.dk-q { overflow-wrap: anywhere; }
.dk-rc > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.dk-rc > summary::-webkit-details-marker { display: none; }
.dk-rc > summary h3 { font-size: 17px; font-weight: 800; }
.dk-rc > summary h3::after { content: ' +'; color: var(--dk-mute); }
.dk-rc[open] > summary h3::after { content: ' −'; }
.dk-rc .answers { margin-top: 8px; }

/* Analytics: where the picks came from, the raw table */
.dk-split { display: flex; gap: 3px; height: 36px; border-radius: 12px; overflow: hidden; }
.dk-split i { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; font: 700 12px Geist, sans-serif; font-style: normal; white-space: nowrap; overflow: hidden; min-width: 4px; }
.dk-split .dk-em { width: 14px; height: 14px; flex: none; }
.dk-split .s0 { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-split .s1 { background: #6f6c7a; color: #fff; }
.dk-split .s2 { background: #aeabb9; color: #16151b; }
.dk-split .s3 { background: var(--dk-2); color: var(--dk-ink); }
.dk-srows { list-style: none; margin-top: 12px; }
.dk-srows li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--dk-line); }
.dk-srows li:first-child { border-top: 0; }
.dk-sv { display: flex; align-items: center; gap: 8px; }
.dk-sv b { font-weight: 800; font-variant-numeric: tabular-nums; }
.dk-tbl thead th[colspan] { text-align: center; color: var(--dk-ink); font-weight: 700; }
.dk-tbl th, .dk-qtbl th { font-weight: 700; }
.dk-rngc { color: var(--dk-mute); }
.dk-hand { margin-top: 14px; }
.dk-hand summary { font-weight: 700; cursor: pointer; }
.dk-hand .dk-mono { margin-top: 6px; color: var(--dk-ink); font-size: 13px; overflow-wrap: anywhere; }

/* Rivals */
.dk-board { list-style: none; display: grid; gap: 2px; }
.dk-board li { display: grid; grid-template-columns: 1.6em minmax(0, 9em) minmax(40px, 1fr) auto 3.2em; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; }
.dk-board li.me { background: var(--dk-chip); }
.dk-board b { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.dk-board .dk-tag { margin-left: 4px; background: var(--dk-card); }
.dk-pos { font: 700 13px var(--mono); color: var(--dk-mute); }
.dk-lead h3 { font-size: 14px; color: var(--dk-dark-mute); font-weight: 700; }
.dk-lead-n { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--dk-dark-ink) !important; margin-top: 4px; line-height: 1.1; overflow-wrap: anywhere; }
.dk-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.dk-vs div { background: var(--dk-o1); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dk-vs b { font: 800 32px/1 Geist, sans-serif; letter-spacing: -0.04em; }
.dk-vs span { font: 600 12px var(--mono); color: var(--dk-dark-mute); overflow-wrap: anywhere; }
.dk-lead > p { margin-top: 14px; font-size: 14px; }
.dk-h2h { list-style: none; display: grid; gap: 18px; }
.dk-h2h-h { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dk-stack { display: flex; height: 26px; border-radius: 9px; overflow: hidden; gap: 2px; margin-top: 8px; }
.dk-stack i { display: flex; align-items: center; justify-content: center; min-width: 3px; font: 700 12px var(--mono); font-style: normal; overflow: hidden; }
.dk-stack .p-you { background: var(--accent); color: #fff; }
.dk-stack .p-both { background: #8d8a99; color: #fff; }
.dk-stack .p-them { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-stack .p-neither { background: var(--dk-2); color: var(--dk-mute); }
.dk-stack-l { display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: 6px; font: 600 12px var(--mono); color: var(--dk-mute); }
.dk-stack-l b { color: var(--dk-ink); }

/* Changes: the board */
.dk-bhead { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.dk-bhead > div:first-child { margin-right: auto; }
.dk-bhead b { font-size: 17px; font-weight: 800; }
.dk-bstat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dk-mute); }
.dk-bstat b { font-size: 14px; color: var(--dk-ink); }
.dk-bstat .dk-ring { width: 48px; height: 48px; }
.dk-hint { margin-top: 0; max-width: 22em; }
.dk-cform { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
.dk-cform label { font-size: 13px; }
.dk-cform .msg { grid-column: 1 / -1; margin: 0; }
.dk-boardc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dk-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dk-colh { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: var(--dk-card); border-radius: 999px; }
.dk-colh b { font-size: 15px; font-weight: 800; }
.dk-cards { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.dk-bc { background: var(--dk-card); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dk-bc > b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.dk-bc .dk-mono, .dk-bc .dk-mute { margin: 0; overflow-wrap: anywhere; }
.dk-bc.v-up { box-shadow: inset 0 0 0 2px var(--accent); }
.dk-bch { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.dk-bcf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.dk-quote { font-size: 14px; border-left: 3px solid var(--dk-line); padding-left: 10px; color: var(--dk-ink); overflow-wrap: anywhere; }
.dk-prog { display: grid; gap: 6px; font: 600 12px var(--mono); color: var(--dk-mute); }
.dk-pbar { height: 7px; border-radius: 7px; background: var(--dk-2); overflow: hidden; }
.dk-pbar i { display: block; height: 100%; background: var(--dk-dark); border-radius: 7px; }
.dk-due { display: inline-flex; gap: 6px; align-items: center; font: 600 12px var(--mono); background: var(--dk-2); border-radius: 999px; padding: 6px 10px; }
.dk-due .dk-ic { width: 14px; height: 14px; }
.dk-pillv { font: 600 11.5px/1 var(--mono); border-radius: 999px; padding: 5px 9px; background: var(--dk-2); color: var(--dk-mute); white-space: nowrap; }
.dk-pillv.up { background: var(--accent); color: #fff; }
.dk-pillv.down { background: var(--warn-bg); color: var(--warn); }
.dk-ba { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: 4px 10px; align-items: center; font-size: 13px; font-weight: 700; }
.dk-ba > .dk-mono { grid-column: 2; margin-top: -2px; }
.dk-x { font: 700 12.5px Geist, sans-serif; border: 0; border-radius: 9px; padding: 6px 10px; background: var(--dk-2); color: var(--dk-mute); cursor: pointer; }
.dk-x:hover { color: var(--warn); }
.dk-empty { border: 1.5px dashed var(--dk-line); border-radius: 20px; padding: 16px; color: var(--dk-mute); font-size: 14px; }
.dk-bnote { padding: 0 6px; margin-top: 0; }

/* Questions and settings */
.dk-qtbl th:first-child { min-width: 17em; }
.dk-qtbl td { text-align: center; vertical-align: middle; }
.dk-qtbl tbody th { font-weight: 600; font-size: 14px; }
.dk-qtbl .dk-sqs { gap: 3px; flex-wrap: nowrap; }
.dk-qtbl .dk-sq { width: 14px; height: 14px; border-radius: 4px; }
.dk-qtbl thead th { white-space: nowrap; }
.dk-qtbl thead .dk-em { vertical-align: -3px; }
.dk-qn { font: 600 12px var(--mono); color: var(--dk-acc-ink); margin-right: 4px; }
.dk-legend2 { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--dk-mute); }
.dk-legend2 span { display: inline-flex; gap: 6px; align-items: center; }
.dk-log { list-style: none; }
.dk-log li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--dk-line); font-size: 14px; }
.dk-log.stack li { display: block; }
.dk-log.stack .dk-mono { display: block; margin-bottom: 3px; }
.dk-log li:first-child { border-top: 0; }
.dk-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.dk-set > .wide { grid-column: 1 / -1; }
.dk-set .card, .dk-qedit .card { border-radius: 24px; }
.dk-qedit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dk .card { background: var(--dk-card); }
.dk-extra:empty { display: none; }
.dk-extra .card { border-radius: 24px; }

/* A free account's dashboard: the locked parts. Owner, 7 Nov: "most of the things and pages should be locked with a
   shader covering the asset". Under each lock is the public sample, blurred (.dk-lockbody, inert); over it the veil
   (public/veil.js), the answer grid's own squares drifting; on top, what a plan adds there. */
.dk-lock { --veil-ink: #dddce3; --veil-mid: #b8aef0; --veil-hi: #5b4fa8; --veil-base: #e9e8ec; --veil-wash: .58; --veil-size: .45;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: var(--dk-card); display: grid; place-items: center; padding: 28px 20px; min-width: 0; }
.dk[data-theme=dark] .dk-lock { --veil-ink: #09080c; --veil-mid: #494376; --veil-hi: #8a7fe0; --veil-base: #09080c; --veil-wash: .42; --veil-size: 1; }
.dk-lock.page { min-height: clamp(540px, 72vh, 760px); }
.dk-lock.fit { min-height: 330px; }
.dk-lock.mid { min-height: 440px; }
.dk-lockbody { position: absolute; inset: 0; overflow: hidden; padding: 14px; filter: blur(5px) saturate(.8); opacity: .92; pointer-events: none; user-select: none; }
.dk-lockbody > .dk-ghost, .dk-lockbody > .dk-qedit, .dk-lockbody > .dk-set { width: 100%; }
.dk-lockbody .dk-card, .dk-lockbody .card { box-shadow: none; }
canvas.dk-veil { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; cursor: default; touch-action: manipulation; }
.dk-lockcard { position: relative; z-index: 2; width: 100%; max-width: 440px; background: var(--dk-card); color: var(--dk-ink); border-radius: 24px; padding: 22px 24px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-shadow: 0 0 0 1px rgba(22,21,27,.06), 0 22px 60px rgba(22,21,27,.22); }
.dk-lockic { width: 42px; height: 42px; border-radius: 14px; background: var(--dk-dark); color: var(--dk-dark-ink); display: grid; place-items: center; margin-bottom: 4px; }
.dk-lockic .dk-ic { width: 20px; height: 20px; }
.dk-lockk { font: 600 12px var(--mono); color: var(--dk-acc-ink); letter-spacing: .02em; }
.dk-lockcard h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.dk-lockp { color: var(--dk-mute); font-size: 15px; }
.dk-lockacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dk-lockcard .dk-btn { background: var(--dk-2); }
.dk-lockcard .dk-btn.dark { background: var(--dk-dark); color: var(--dk-dark-ink); }
.dk-locknote { font: 600 11.5px/1.5 var(--mono); color: var(--dk-mute); margin-top: 4px; }
.dk-nav a.lk { color: var(--dk-mute); }
.dk-nl { width: 13px; height: 13px; flex: none; opacity: .75; }
.dk-rb.lk { color: var(--dk-dark-mute); }
.dk-rlk { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; padding: 2px; border-radius: 5px; background: var(--dk-x); color: var(--dk-dark); stroke-width: 2.6; }
.dk-btn.lk { opacity: .82; }
.dk-up { flex: none; }
.dk-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; border: 2px solid var(--dk-x2); }
.dk-notice p { color: var(--dk-ink); font-weight: 600; }
.dk-start { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px; }
.dk-start h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: var(--dk-dark-ink); }
.dk-start .dk-pbar { width: min(100%, 420px); background: var(--dk-o1); }
.dk-start .dk-pbar i { background: var(--dk-x); transition: width .6s ease; }
.dk-start [data-run-n] { display: inline-block; }
.dk-start .dk-btn { background: var(--dk-dark-ink); color: var(--dk-dark); }
.dk-start .dk-btn.ghost { background: var(--dk-o1); color: var(--dk-dark-ink); }
@media (prefers-reduced-motion: no-preference) {
  .nudge { animation: nudge .5s cubic-bezier(.3, 1.4, .5, 1); }
  .dk-lockcard { animation: rise .35s ease both; }
}
@keyframes nudge { 30% { transform: translateY(-4px) scale(1.012); } 60% { transform: translateY(1px); } }

@media (max-width: 1240px) {
  .dk-kpis.k5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-3 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .dk-main { grid-template-columns: minmax(0, 1fr); }
  .dk-rail { position: static; flex-direction: row; justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; padding: 5px; }
  .dk-rb { width: auto; height: 36px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; white-space: nowrap; }
  .dk-rb .dk-ic { width: 17px; height: 17px; }
  .dk-rl { display: inline; font: 700 13px Geist, sans-serif; }
  .dk-rlk { position: static; order: 1; margin-left: -2px; }
  .dk-rb::after { display: none; }
  .g-ov, .g-an, .g-ans, .g-21 { grid-template-columns: minmax(0, 1fr); }
  .dk-reader { position: static; max-height: none; }
  .dk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dk-bar { flex-wrap: wrap; }
  .dk-nav { order: 3; flex-basis: 100%; margin: 0; }
  .dk-end { margin-left: auto; }
  .dk-boardc, .g-3, .g-2, .dk-set, .dk-qedit { grid-template-columns: minmax(0, 1fr); }
  .g-3 > :last-child { grid-column: auto; }
  .dk-cform { grid-template-columns: minmax(0, 1fr); }
  .dk-cform button { justify-self: start; }
  .dk-legend { align-items: flex-start; }
  .dk-lgs { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .dk { padding: 6px; margin: 0 -6px; border-radius: 26px; gap: 10px; }
  .dk-lock { padding: 18px 12px; border-radius: 20px; }
  .dk-lock.page { min-height: 560px; }
  .dk-lockcard { padding: 18px 18px 16px; }
  .dk-lockcard h3 { font-size: 20px; }
  .dk-kpis, .dk-kpis.k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dk-kpi { padding: 14px; border-radius: 20px; }
  .dk-kv { min-height: 40px; }
  .dk-kv b { font-size: 31px; }
  .dk-kv small { font-size: 13px; }
  .dk-kv .dk-spark { display: none; }
  .dk-kv .dk-ring { width: 40px; height: 40px; }
  .dk-kv .dk-mbars { width: 48px; height: 36px; }
  .dk-card { padding: 16px; border-radius: 22px; }
  .dk-title h2 { font-size: 28px; }
  .dk-acts { margin-left: 0; }
  .dk-erow { grid-template-columns: 30px minmax(0, 1fr) auto 2.6em; }
  .dk-erow .rng { display: none; }
  .dk-hbars li, .dk-hbars.wide li { grid-template-columns: minmax(0, 1fr) 3em; gap: 4px 10px; }
  .dk-hbars .dk-hb { grid-column: 1 / -1; grid-row: 2; }
  .dk-board li { grid-template-columns: 1.4em minmax(0, 1fr) auto; gap: 4px 10px; }
  .dk-board .rng { grid-column: 2 / -1; grid-row: 2; }
  .dk-board .dk-mono { grid-column: 2; grid-row: 3; }
  .dk-board b { grid-column: 3; grid-row: 1; }
  .dk-gnum b { font-size: 42px; }
  .dk-vs b { font-size: 26px; }
  .dk-sq { width: 22px; height: 22px; border-radius: 6px; }
  .dk-ll { display: none; }
  .dk-ls { display: inline; }
  .dk-log li { grid-template-columns: minmax(0, 1fr); }
}

/* Sign-in (/signin/) and the account box in /app/. */
.auth { max-width: 460px; display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; }
.auth .seg label { flex: 1; }
.auth .seg span { text-align: center; }
.auth .stack { gap: 6px; }
.auth .stack label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.auth .stack .primary { align-self: stretch; justify-content: center; margin-top: 12px; padding: 13px 16px; font-size: 16px; }
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 16px Geist, sans-serif; color: var(--ink); background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 11px 16px; text-decoration: none; transition: border-color .2s ease; }
.google-btn:hover { border-color: var(--ink); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.kv { display: grid; gap: 8px; margin: 12px 0 4px; }
.kv div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
.kv dt { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.kv dd { font-weight: 700; overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 520px) { .kv div { grid-template-columns: 1fr; } }
.acct h3 { font-size: 16px; margin-top: 22px; }
.acct .field input { font: 600 14px var(--mono); }
.danger { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.danger summary { cursor: pointer; font-weight: 700; color: var(--warn); }
.danger p { margin-top: 8px; }
#state .cta { margin-top: 14px; }

/* Copy-a-prompt rows (developers page): title and line, the button, and the prompt to read first. */
.prompts { display: grid; gap: 12px; margin-top: 14px; }
.prompt-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.prompt-row > div { display: grid; gap: 2px; min-width: 0; }
.prompt-row > div span { color: var(--muted); font-size: 14px; }
.prompt-row details { grid-column: 1 / -1; }
.prompt-row summary { cursor: pointer; font-size: 14px; color: var(--muted); }
.code.wrap { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 340px; overflow-y: auto; font-weight: 500; font-size: 12.5px; }
@media (max-width: 520px) { .prompt-row { grid-template-columns: 1fr; } .prompt-row > button { justify-self: start; } }

/* Search setup check rows: name, flag, line, steps. */
.rows.setup li { gap: 6px; }
.rows.setup .flag { align-self: flex-start; }
.rows.setup .steps { margin-top: 4px; }
.rows .steps li { display: list-item; padding: 3px 0; border-top: 0; }

/* ---- Visual pass, 7 Nov (owner picked A, with B's report spread and C's matrix and questions) ---- */
/* Footer (A): dark, columns, the engines, the wordmark faded into the panel. */
.site-foot { background: var(--hero); color: var(--hero-ink); margin-top: 28px; padding: 52px 0 26px; border-radius: 28px 28px 0 0; overflow: hidden; }
.sf-top { display: grid; gap: 28px; grid-template-columns: 1fr 1fr; }
.sf-brand { grid-column: 1 / -1; }
.sf-brand .logo { color: var(--hero-ink); }
.sf-brand .logo .mark { background: #2a2931; }
.sf-brand > p:not(.k) { color: var(--hero-muted); margin: 12px 0 20px; max-width: 300px; }
.sf-brand .k { color: var(--hero-muted); font-size: 13px; }
.sf-eng { list-style: none; display: flex; gap: 8px; margin-top: 8px; }
.sf-eng li { width: 34px; height: 34px; border-radius: 10px; background: #24232b; display: grid; place-items: center; color: var(--hero-ink); }
.sf-eng .em { width: 18px; height: 18px; }
.sf-col { display: grid; gap: 9px; align-content: start; }
.sf-col h2 { font: 600 12px var(--mono); color: var(--hero-muted); margin-bottom: 4px; }
.sf-col a { color: var(--hero-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.sf-col a:hover { text-decoration: underline; }
.sf-word { font: 800 clamp(84px, 19vw, 260px)/0.8 Geist, sans-serif; letter-spacing: -0.06em; color: #222128; margin: 36px 0 0 -0.04em; white-space: nowrap; user-select: none; }
.sf-legal { display: grid; gap: 6px; color: var(--hero-muted); font-size: 13px; border-top: 1px solid #2c2b33; padding-top: 16px; position: relative; }
@media (min-width: 900px) { .sf-top { grid-template-columns: 1.6fr repeat(4, 1fr); } .sf-brand { grid-column: auto; } .sf-legal { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: -28px; } }

/* Sign-in (A): the form on a light panel, our founder's real chart on a dark one. */
.auth-split { display: grid; gap: 12px; margin-top: 12px; }
.auth-side { background: var(--panel); border-radius: 24px; display: grid; place-items: center; padding: 30px 20px; }
.auth-box { width: 100%; max-width: 410px; display: flex; flex-direction: column; gap: 14px; }
.auth-box .logo { margin-right: 0; align-self: flex-start; }
.auth-box h1 { font-size: clamp(34px, 5vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin-top: 18px; }
.auth-sub { color: var(--muted); margin-top: -4px; }
.auth-box .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--panel-2); border-radius: 14px; padding: 4px; }
.auth-box .seg span { text-align: center; background: transparent; color: var(--muted); border-radius: 11px; padding: 9px; }
.auth-box .seg input:checked + span { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.auth-box .stack { display: flex; flex-direction: column; gap: 6px; }
.auth-box .stack label { font-weight: 700; font-size: 14px; margin-top: 8px; }
.auth-box .stack input { height: 50px; border-radius: 14px; border: 1px solid #cfcdd6; background: #fff; padding: 0 14px; font: 500 16px Geist, sans-serif; color: var(--ink); }
.auth-box .stack input:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.auth-box .stack .primary { justify-content: center; margin-top: 12px; height: 52px; align-self: stretch; width: 100%; }
.auth-box .google-btn { height: 50px; border-radius: 14px; border: 1px solid #cfcdd6; }
.auth-box > .note { font-size: 13px; }
.auth-art { border-radius: 24px; padding: 28px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.auth-art h2 { color: var(--hero-ink); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; max-width: 520px; }
.auth-art .case-fig { background: #1f1e25; border-radius: 18px; padding: 14px 12px 10px; }
.auth-ev { list-style: none; display: grid; gap: 8px; }
.auth-ev li { color: var(--hero-muted); font-size: 14.5px; }
.hero .date { color: var(--hi); }
.auth-cap { color: var(--hero-muted); font-size: 13.5px; margin-top: auto; }
.auth-cap a { color: var(--hero-ink); }
@media (min-width: 900px) { .auth-split { grid-template-columns: 1fr 1.08fr; min-height: 720px; } .auth-side { padding: 48px 32px; } .auth-art { padding: 36px 38px; } }

/* The case chart (public/cases.js): light on a panel, violet on the dark ones. */
.case-fig { margin: 0; }
.case-chart { width: 100%; height: auto; display: block; overflow: visible; }
.case-chart .g { stroke: var(--line); }
.case-chart .ax { fill: var(--muted); font: 600 10.5px var(--mono); }
.case-chart .b { fill: var(--accent); transition: opacity .15s ease; cursor: pointer; }
.case-chart .b.off { opacity: .4; }
.case-chart .b.on { fill: var(--ink); opacity: 1; }
.case-chart .band rect { fill: var(--panel-2); }
.case-chart .bl, .case-chart .gl, .case-chart .el { font: 600 10.5px var(--mono); fill: var(--muted); }
.case-chart .gap rect { fill: var(--muted); opacity: .35; }
.case-chart .ev line { stroke: var(--chip-ink); stroke-dasharray: 3 3; }
.case-chart .ev circle { fill: var(--chip-ink); }
.case-chart .el { fill: var(--chip-ink); }
.hero .case-chart .g { stroke: rgba(238,237,242,.08); }
.hero .case-chart .ax, .hero .case-chart .bl, .hero .case-chart .gl { fill: var(--hero-muted); }
.hero .case-chart .b { fill: var(--hi); }
.hero .case-chart .b.on { fill: #fff; }
.hero .case-chart .band rect { fill: rgba(238,237,242,.05); }
.hero .case-chart .gap rect { fill: var(--hero-muted); }
.hero .case-chart .ev line { stroke: var(--hi); }
.hero .case-chart .ev circle, .hero .case-chart .el { fill: var(--hi); }
.case-read { font-size: 13.5px; color: var(--muted); margin-top: 8px; min-height: 2.8em; }
.hero .case-read { color: var(--hero-muted); }

/* A heading that sits on the canvas between card groups. */
.band-h { padding: 26px 4px 4px; }
.band-h h2 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
.band-h p { color: var(--muted); font-size: 17px; margin-top: 8px; max-width: 46em; }

/* Pricing: B's report spread. */
.spread { display: grid; gap: 12px; }
.spread .card { display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.spread h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 0; }
.spread .card > p { margin-top: 2px; }
.sp-pile { display: grid; gap: 12px; margin-top: 16px; }
.sp-pile .dash { padding: 12px; }
.sp-img { margin-top: 16px; padding: 14px; }
@media (min-width: 900px) { .spread { grid-template-columns: 1.15fr 1fr; } .sp-1 { grid-row: span 2; } .sp-img { margin-top: auto; } }

/* Pricing: C's grouped tick matrix. */
.matrix { padding: 6px 22px 10px; }
.mx-scroll { overflow-x: auto; }
.matrix table { width: 100%; border-collapse: collapse; min-width: 560px; }
.matrix thead th { text-align: left; padding: 20px 12px 14px; border-bottom: 2px solid var(--ink); }
.matrix thead td { border-bottom: 2px solid var(--ink); }
.matrix thead b { display: block; font-size: 22px; font-weight: 800; }
.matrix thead span { color: var(--muted); font-weight: 600; font-size: 14px; }
.matrix tbody th, .matrix tbody td { padding: 12px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px; text-align: left; }
.matrix tbody th[scope=row] { width: 46%; }
.matrix .rl { display: inline-flex; align-items: center; gap: 10px; }
.matrix .ic { width: 20px; height: 20px; color: var(--accent); flex: none; }
.matrix td.ck svg { width: 18px; height: 18px; color: var(--accent); display: block; }
.matrix tr.grp th { font: 600 12px var(--mono); color: var(--muted); background: var(--panel-2); border: 0; padding: 9px 12px; }

/* Pricing: A's "why fewer" with the range figure. */
.why { display: grid; gap: 20px; align-items: center; }
.why h2 { font-size: 26px; letter-spacing: -0.02em; }
@media (min-width: 900px) { .why { grid-template-columns: .9fr 1.1fr; gap: 40px; padding: 30px 32px; } }
.rf { margin: 0; background: var(--panel-2); border-radius: 18px; padding: 16px 20px; }
.card .rf { margin-top: 14px; }
.why .rf { margin-top: 0; }
.rf-row { display: grid; grid-template-columns: minmax(80px, 150px) 1fr 76px; gap: 12px; align-items: center; padding: 8px 0; }
.rf-l { font-weight: 700; font-size: 14px; }
.rf-r { font: 600 12.5px var(--mono); color: var(--muted); text-align: right; }
.rf-bar { position: relative; height: 12px; border-radius: 999px; background: var(--canvas); }
.rf-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--hi); }
.rf-bar b { position: absolute; top: -4px; width: 3px; height: 20px; border-radius: 2px; background: var(--ink); transform: translateX(-1px); }
.rf figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* Questions: C's split, accordion on the right. */
.faq-split { display: grid; gap: 16px; margin-top: 18px; align-items: start; }
.fs-l h2 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.fs-l p { color: var(--muted); font-size: 17px; margin: 12px 0 18px; }
.fs-l .primary { display: inline-flex; }
.fs-r { padding: 4px 24px; }
.fs-r details + details { border-top: 1px solid var(--line); }
details > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; padding: 16px 0; }
details > summary::-webkit-details-marker { display: none; }
.pm { width: 28px; height: 28px; border-radius: 50%; background: var(--panel-2); position: relative; flex: none; }
.pm::before, .pm::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--ink); }
.pm::after { transform: rotate(90deg); transition: transform .2s ease; }
details[open] .pm::after { transform: rotate(0deg); }
.fs-r details p { padding: 0 40px 16px 0; margin-top: -6px; }
@media (min-width: 900px) { .faq-split { grid-template-columns: .8fr 1.2fr; gap: 32px; } }

/* A's dark closing panel. */
.closer { display: grid; gap: 24px; overflow: hidden; padding: 30px 24px; margin-top: 12px; }
.closer h2 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; color: var(--hero-ink); }
.closer .cl-t > p { margin: 10px 0 18px; }
.cl-img { position: relative; }
.cl-img .tilt { background: #1f1e25; box-shadow: 0 0 0 1px #2c2b33; }
@media (min-width: 900px) { .closer { grid-template-columns: 1fr 1fr; padding: 44px; min-height: 340px; } .cl-img .tilt { position: absolute; left: 10px; top: 0; width: 560px; max-width: none; transform: rotate(-4deg); } }

/* Method: A's rules with a live "try the rules" box. */
.m-top { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1000px) { .m-top { grid-template-columns: 1.5fr 1fr; } .try { position: sticky; top: 14px; } }
.rules > p { margin-bottom: 8px; }
.rule { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); }
.rule-t { display: grid; gap: 4px; align-content: start; }
.rule-t span { color: var(--muted); font-size: 14.5px; }
.rule-ex { background: var(--panel-2); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; justify-items: start; }
.rule-ex p { margin: 0; color: var(--ink); }
.rule-ex mark { background: #e3defa; color: inherit; border-radius: 4px; padding: 0 3px; }
.rule-ex mark.rec { background: #d8d0fb; }
.rule-ex mark.warn { background: var(--warn-bg); color: var(--warn); }
.tag { font: 600 12.5px var(--mono); background: var(--chip); color: var(--chip-ink); border-radius: 7px; padding: 3px 8px; }
@media (min-width: 700px) { .rule { grid-template-columns: .8fr 1.2fr; gap: 20px; } }
.try { display: flex; flex-direction: column; gap: 12px; }
.try h3 { color: var(--hero-ink); font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.try textarea { width: 100%; resize: vertical; background: #24232b; color: var(--hero-ink); border: 1px solid #34333c; border-radius: 14px; padding: 12px 14px; font: 500 15px/1.5 Geist, sans-serif; }
.try-in { display: flex; align-items: center; gap: 10px; background: #24232b; border-radius: 12px; padding: 6px 6px 6px 14px; }
.try-in label { color: var(--hero-muted); font-weight: 600; font-size: 14px; white-space: nowrap; }
.try-in input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--hero-ink); font: 700 15px Geist, sans-serif; padding: 8px; text-align: right; }
.try textarea:focus, .try-in input:focus { outline: 2px solid var(--hi); outline-offset: 1px; }
.try-v { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.try-v div { background: rgba(127,127,127,.14); border-radius: 12px; padding: 8px 12px; }
.try-v dt { font-size: 13px; color: var(--hero-muted); font-weight: 600; }
.try-v dd { font: 600 15px var(--mono); color: var(--hero-ink); }
.try-v dd.yes { color: var(--hi); }
.try-why { font-size: 14px; color: var(--hero-muted); min-height: 2.6em; }
.try-go { color: var(--hi); font-weight: 700; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }

/* Method: our own sites. */
.own { display: grid; gap: 14px; padding: 24px; }
.own-h { display: grid; gap: 16px; }
.own-h h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.025em; line-height: 1.1; margin-top: 4px; max-width: 640px; }
.own-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-self: end; }
.own-n div { background: var(--panel-2); border-radius: 14px; padding: 10px 14px; }
.own-n dt { font: 600 12px var(--mono); color: var(--muted); }
.own-n dd { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.own-n dd span { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.own-notes { list-style: none; display: grid; gap: 8px; }
.own-notes li { font-size: 14.5px; color: var(--muted); }
.own-notes li.off .date, .own-notes li.gap .date { color: var(--muted); }
@media (min-width: 1000px) { .own-h { grid-template-columns: 1.3fr 1fr; align-items: end; } .own-notes { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.lessons { display: grid; gap: 12px; }
.lesson { display: flex; flex-direction: column; }
.lesson .num { font: 600 13px var(--mono); color: var(--accent); }
.lesson h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; margin-top: 6px; }
.lesson .where { font: 600 12.5px var(--mono); color: var(--chip-ink); margin-top: 4px; }
.lesson .so { margin-top: auto; padding-top: 12px; color: var(--ink); font-weight: 600; }
@media (min-width: 700px) { .lessons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .lessons { grid-template-columns: repeat(3, 1fr); } }
.m-rest { display: grid; gap: 12px; }
@media (min-width: 900px) { .m-rest { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Home: case cards. */
.cases-d { color: var(--muted); margin-top: 6px; max-width: 46em; }
.tl { list-style: none; display: grid; gap: 8px; }
.tl li { display: grid; grid-template-columns: 5.6em 1fr; column-gap: 10px; font-size: 14px; }
.tl li .date { grid-row: span 2; }
.tl li b { font-size: 14.5px; }
.tl li span:last-child { color: var(--muted); }
.ph .ghost { align-self: flex-start; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
#ph-out .steps { display: none; }
#ph-out .verdict { font-size: 18px; }
@media (min-width: 1000px) { .cases-g { grid-template-columns: 1fr 1.15fr 1fr; } }
/* The Makerfern chart in three drawing widths (src/render.mjs chartSet), so its labels stay readable. */
.cc-w, .cc-n { display: none; }
@media (min-width: 600px) { .cc-n { display: block; } .cc-p { display: none; } }
@media (min-width: 900px) { .cc-w { display: block; } .cc-n { display: none; } }
.auth-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.auth-n div { background: #1f1e25; border-radius: 14px; padding: 10px 14px; }
.auth-n dt { font: 600 12px var(--mono); color: var(--hero-muted); }
.auth-n dd { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; color: var(--hero-ink); }

/* ---- Our own sites as a bento, and a case page per site (owner, 7 Nov: "more visual and graph like and eye catching,
   it can have their logos and custom name page"). Each logo is the site's own; everything else stays in Forthsay's
   ink, grey and violet. The squares are the answer grid's own: violet, lavender, grey. ---- */
.cases-b { display: grid; gap: 12px; margin-top: 16px; }
@media (min-width: 1000px) { .cases-b { grid-template-columns: 1.12fr 1fr; } .cz.mf { grid-column: 1 / -1; } }
.cz { background: var(--panel-2); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cz.hero { background: var(--hero); padding: 22px 24px; }
.cz-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cz-logo { width: 46px; height: 46px; flex: none; border-radius: 13px; overflow: hidden; box-shadow: 0 0 0 1px rgba(22,21,27,.08); }
.cz-logo svg { display: block; width: 100%; height: 100%; }
.cz-id { display: grid; min-width: 0; }
.cz-id b { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.cz-id span { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.hero .cz-id span { color: var(--hero-muted); }
.cz-site { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 12.5px var(--mono); color: var(--chip-ink); text-decoration: none; background: var(--panel); border-radius: 999px; padding: 6px 10px; white-space: nowrap; transition: background .15s ease; }
.cz-site:hover { background: var(--chip); }
.hero .cz-site { background: rgba(238,237,242,.08); color: var(--hi); }
.hero .cz-site:hover { background: rgba(238,237,242,.14); }
.cz-big { display: flex; align-items: center; gap: 12px; line-height: .92; margin: 0 !important; }
.cz-big b { font-size: clamp(58px, 7.2vw, 92px); font-weight: 800; letter-spacing: -0.05em; color: var(--ink); }
.cz-big b.up { color: var(--accent); }
.hero .cz-big b { color: var(--hero-ink); }
.hero .cz-big b.up { color: var(--hi); }
.cz-ar { width: 40px; flex: none; color: var(--muted); }
.hero .cz-ar { color: var(--hero-muted); }
.cz-cap { font-size: 14.5px; color: var(--muted); margin: 0 !important; }
.cz-cap b { color: var(--ink); }
.nw { white-space: nowrap; }
.hero .cz-cap { color: var(--hero-muted); }
.hero .cz-cap b { color: var(--hero-ink); }
.cz-st { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cz-st div { background: rgba(238,237,242,.06); border-radius: 14px; padding: 10px 12px; }
.cz-st dt { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; color: var(--hero-ink); line-height: 1.1; }
.cz-st dd { font-size: 12.5px; color: var(--hero-muted); line-height: 1.4; }
.cz-mf { display: grid; gap: 18px; }
@media (min-width: 1100px) { .cz-mf { grid-template-columns: minmax(280px, 350px) 1fr; align-items: center; gap: 28px; } }
.cz-l { display: grid; gap: 12px; align-content: start; min-width: 0; }
.cz-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: 700 15px Geist, sans-serif; border-radius: 12px; padding: 10px 16px; background: var(--ink); color: var(--panel); text-decoration: none; }
.hero .cz-go { background: var(--hero-ink); color: var(--hero); }
.cz-go .ar { transition: transform .2s ease; }
.cz-go:hover .ar { transform: translateX(3px); }
.cz-src { display: grid; grid-template-columns: minmax(118px, 168px) minmax(0, 1fr); grid-template-areas: "w l" "w k"; gap: 12px 18px; align-items: center; }
.cz-src > .cz-waffle { grid-area: w; }
.cz-src > .cz-l { grid-area: l; align-self: end; }
.cz-src > .cz-key { grid-area: k; align-self: start; }
.cz-waffle { width: 100%; height: auto; display: block; }
.cz-waffle rect { transform-box: fill-box; transform-origin: center; }
.cz-waffle .w-a rect { fill: var(--accent); }
.cz-waffle .w-h rect { fill: var(--hi); }
.cz-waffle .w-x rect { fill: #d6d4dd; }
.cz-key { list-style: none; display: grid; gap: 6px; }
.cz-key li { display: grid; grid-template-columns: 12px 3.1em 1fr; gap: 8px; align-items: baseline; font-size: 13px; color: var(--muted); line-height: 1.35; }
.cz-key i { width: 12px; height: 12px; border-radius: 3px; align-self: start; margin-top: 3px; }
.cz-key i.w-a { background: var(--accent); }
.cz-key i.w-h { background: var(--hi); }
.cz-key i.w-x { background: #d6d4dd; }
.cz-key b { font: 700 14px var(--mono); color: var(--ink); }
.cz-tl { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cz-tl li { background: var(--panel); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; align-content: start; }
.cz-tl .date { margin: 0; font-size: 12px; }
.cz-tl b { font-size: 14px; line-height: 1.25; }
.cz-twist { background: var(--panel); border-radius: 14px; padding: 12px 14px; font-size: 14px; color: var(--muted); margin: 0 !important; }
.cz-twist b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
.ph h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.cz-score { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cz-score li { background: var(--panel); border-radius: 14px; padding: 12px; display: grid; gap: 4px; align-content: start; }
.cz-score b { font-size: 44px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.cz-score li:first-child b { color: var(--accent); }
.cz-score span { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cz-score small { font-size: 12px; color: var(--muted); line-height: 1.35; }
@media (max-width: 560px) {
  .cz, .cz.hero { padding: 16px; }
  .cz-h { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px 12px; }
  .cz-site { grid-column: 2; justify-self: start; margin-left: 0; }
  .cz-tl { grid-template-columns: 1fr 1fr; }
  .cz-src { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "w l" "k k"; gap: 14px; }
  .cz-src > .cz-l { align-self: center; }
  .cz-score { grid-template-columns: 1fr; }
  .cz-score li { grid-template-columns: 64px 1fr; column-gap: 12px; }
  .cz-score b { grid-row: span 2; font-size: 38px; }
}

/* Case pages: /cases/makerfern/ and /cases/cuescribe/. */
.cs-hero { padding: 28px 24px; display: grid; gap: 14px; }
.cs-id { display: flex; align-items: center; gap: 14px; }
.cs-id .cz-logo { width: 64px; height: 64px; border-radius: 17px; box-shadow: none; }
.cs-id .k { margin: 0; }
.cs-name { font-size: 28px; font-weight: 800; letter-spacing: -0.025em; color: var(--hero-ink) !important; margin: 0 !important; line-height: 1.1; }
.cs-what { margin: 3px 0 0 !important; font-size: 14px; }
.cs-hero .cs-what a { color: var(--hi); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.cs-hero .cs-what a:hover { text-decoration: underline; }
.cs-hero h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; color: var(--hero-ink); max-width: 21em; text-wrap: balance; margin-top: 8px; }
.cs-hero .lede { color: var(--hero-muted); margin-top: 0; max-width: 44em; }
.cs-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.cs-kpi div { background: rgba(238,237,242,.06); border-radius: 16px; padding: 14px 16px; }
.cs-kpi dt { font-size: clamp(32px, 3.8vw, 48px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--hero-ink); }
.cs-kpi div:first-child dt { color: var(--hi); }
.cs-kpi dd { font-size: 13px; color: var(--hero-muted); margin-top: 8px; line-height: 1.4; }
.cs-sec { padding: 24px; display: grid; gap: 16px; }
.cs-sec > .k { margin: 0; font: 600 13px var(--mono); color: var(--chip-ink); }
.cs-sec > h2 { font-size: clamp(23px, 2.8vw, 31px); letter-spacing: -0.025em; line-height: 1.12; margin-top: -8px; }
.cs-sec > p { margin-top: -8px; max-width: 48em; }
.cs-sec > .note { margin-top: 0; }
.cs-two { display: grid; gap: 18px; }
@media (min-width: 900px) { .cs-two { grid-template-columns: minmax(340px, 1fr) 1.25fr; align-items: start; } }
.cs-two .cz-src { background: var(--panel-2); border-radius: 18px; padding: 16px; }
.cs-two .cz-l .k { font: 600 12.5px var(--mono); color: var(--chip-ink); margin: 0; }
.cs-two .note { margin-top: 0; }
.cs-tl li { padding-top: 8px; border-top: 1px solid var(--line); }
.cs-tl li:first-child { padding-top: 0; border-top: 0; }
.cs-tl li.off b { color: var(--warn); }
.cs-grid { display: grid; }
.cs-gr { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 92px); gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cs-gh { border-top: 0; padding-top: 0; font: 600 12px var(--mono); color: var(--muted); }
.cs-ge { display: flex; align-items: center; gap: 6px; color: var(--ink); font: 700 13px Geist, sans-serif; min-width: 0; }
.cs-ge .em { width: 16px; height: 16px; }
.cs-gq { display: flex; gap: 10px; align-items: baseline; font-size: 15px; font-weight: 600; min-width: 0; }
.cs-gq b { font: 600 12px var(--mono); color: var(--chip-ink); flex: none; }
.cs-gc { display: flex; gap: 6px; }
.cs-sq { position: relative; display: inline-block; width: 28px; height: 28px; border-radius: 8px; background: #e2e1e7; flex: none; transition: transform .15s ease; }
.cs-sq.v-r { background: var(--accent); }
.cs-sq.v-n { background: var(--hi); }
.cs-sq.v-m { background: transparent; outline: 1.5px dashed var(--muted); outline-offset: -2px; }
.cs-sq.c { box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px var(--panel); }
.cs-gc .cs-sq:hover { transform: scale(1.12); }
.cs-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.cs-legend li { display: inline-flex; align-items: center; gap: 7px; }
.cs-legend .cs-sq { width: 16px; height: 16px; border-radius: 5px; }
.cs-legend .cs-sq.c { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 3.5px var(--panel); }
.cs-eng { list-style: none; display: grid; gap: 8px; }
.cs-eng li { display: grid; grid-template-columns: 190px 1fr 1fr; gap: 10px 22px; align-items: center; background: var(--panel-2); border-radius: 16px; padding: 14px 16px; }
.cs-en { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-en b { font-size: 16px; }
.cs-en code { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.cs-m p { margin: 0 0 6px !important; font-size: 13.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.cs-m p b { font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.cs-m p span { font: 600 11.5px var(--mono); margin-left: auto; }
.cs-meter { position: relative; display: block; height: 14px; }
.cs-meter::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--line); }
.cs-meter i { position: absolute; left: var(--a); right: calc(100% - var(--z)); top: 3px; bottom: 3px; border-radius: 4px; background: var(--hi); opacity: .75; }
.cs-meter b { position: absolute; left: calc(var(--p) - 2px); width: 4px; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); }
.cs-inst { grid-column: 1 / -1; margin: 0 !important; font: 600 12.5px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.cs-inst span { margin-right: 8px; font: 700 13px Geist, sans-serif; color: var(--ink); }
.cs-inst b { color: var(--ink); }
.cs-picks { display: grid; gap: 8px; }
@media (min-width: 900px) { .cs-picks { grid-template-columns: 1fr 1fr; } }
.cs-pick { margin: 0; background: var(--chip); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; align-content: space-between; }
.cs-pick blockquote { font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.cs-pick blockquote::before { content: '“'; }
.cs-pick blockquote::after { content: '”'; }
.cs-pick figcaption { font: 600 12px var(--mono); color: var(--chip-ink); }
.cs-lo { font-size: 14.5px; }
.cs-why { background: var(--panel-2); border-radius: 16px; padding: 16px 18px; }
.cs-why h3 { margin: 0; font-size: 16px; }
.cs-plan { list-style: none; display: grid; gap: 10px; }
@media (min-width: 900px) { .cs-plan { grid-template-columns: 1fr 1fr; } .cs-plan li:first-child { grid-column: 1 / -1; } }
.cs-plan li { display: grid; grid-template-columns: auto 1fr; gap: 14px; background: var(--panel-2); border-radius: 18px; padding: 16px 18px; }
.cs-pn { font: 700 13px var(--mono); color: var(--chip-ink); background: var(--chip); border-radius: 11px; width: 38px; height: 38px; display: grid; place-items: center; }
.cs-plan .k { font: 600 12px var(--mono); color: var(--chip-ink); margin: 0; }
.cs-plan h3 { margin: 2px 0 0; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.cs-plan p { margin-top: 6px; }
.cs-plan .more { margin-top: 10px; }
@media (max-width: 760px) {
  .cs-kpi { grid-template-columns: 1fr 1fr; }
  .cs-eng li { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cs-hero, .cs-sec { padding: 18px 16px; }
  .cs-id .cz-logo { width: 52px; height: 52px; border-radius: 14px; }
  .cs-name { font-size: 23px; }
  .cs-gr { grid-template-columns: repeat(4, 1fr); gap: 8px 6px; }
  .cs-gr .cs-gq { grid-column: 1 / -1; font-size: 14.5px; }
  .cs-gh .cs-gq { display: none; }
  .cs-ge { font-size: 12px; gap: 4px; }
  .cs-gc { gap: 4px; }
  .cs-sq { width: 30px; height: 30px; }
  .cs-plan li { grid-template-columns: 1fr; gap: 8px; }
}
/* The squares fill in once, in order, the first time they scroll into view (public/cases-view.js adds the classes, so
   with no script, in print or with less motion they are simply there). */
@media screen and (prefers-reduced-motion: no-preference) {
  .sq-wait rect, .sq-wait .cs-sq { opacity: 0; }
  .sq-in rect { animation: sqin .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 8ms); }
  .sq-in .cs-sq { animation: sqin .4s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i, 0) * 26ms); }
}
@keyframes sqin { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }

/* ---------- Sign-in feedback (public/signin.js). Owner, 7 Nov: "user feedback/animations should be made every time a
   user gives an imput, this includes the login page". The switch's mark slides and the heading and button say which form
   it is; the email ticks once it is an address; the password has an eye, a length bar for a new one and a Caps Lock
   note; the button spins while it works and ticks when done; a refused field is marked and shakes. The Makerfern panel
   rises in, its bars grow and its numbers count, once. These rules sit after .auth-box .stack input so they win. */
.auth-box .seg { position: relative; }
.auth-box .seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 6px); border-radius: 11px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); pointer-events: none; }
.auth-box .seg.ready .seg-thumb { transition: transform .32s cubic-bezier(.3, 1.25, .5, 1); }
.auth-box .seg[data-mode=new] .seg-thumb, .auth-box .seg:has(input[value=new]:checked) .seg-thumb { transform: translateX(calc(100% + 4px)); }
.auth-box .seg label { z-index: 1; }
.auth-box .seg span { transition: color .2s ease; }
.auth-box .seg input:checked + span { background: transparent; box-shadow: none; }
.auth-box .stack label { transition: color .2s ease; }
.auth-box .stack label:has(+ input:focus), .auth-box .stack label:has(+ .pw-wrap input:focus) { color: var(--accent); }
.auth-box .stack input[data-state=ok] { border-color: var(--accent); padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b4fa8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.auth-box .stack input[data-state=bad] { border-color: var(--warn); background-color: #fffaf7; }
.auth-box .stack input[data-state=bad]:focus { outline-color: var(--warn); }
.pw-wrap { position: relative; }
.auth-box .pw-wrap input { width: 100%; padding-right: 54px; }
.auth-box .pw-wrap input[data-state=ok] { padding-right: 84px; background-position: right 54px center; }
.pw-eye { position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: grid; place-items: center; cursor: pointer; transition: background .2s ease, color .2s ease; }
.pw-eye:hover { background: var(--panel-2); color: var(--ink); }
.pw-eye[aria-pressed=true] { color: var(--accent); }
.pw-eye:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.pw-eye .off, .pw-eye[aria-pressed=true] .on { display: none; }
.pw-eye[aria-pressed=true] .off { display: block; }
.caps { color: var(--warn); font-weight: 700; font-size: 13px; }
.pw-note { display: grid; gap: 7px; }
.pw-bar { display: block; height: 5px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.pw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--muted); transition: width .25s ease, background-color .25s ease; }
.pw-note[data-level=ok] .pw-bar i, .pw-note[data-level=long] .pw-bar i { background: var(--accent); }
.primary.is-done, .primary.is-done:disabled { opacity: 1; background: var(--accent); cursor: default; }
.ok-tick { width: 18px; height: 18px; flex: none; }
.google-btn.going { pointer-events: none; color: var(--muted); }
.google-btn.going svg { display: none; }
.google-btn.going::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@media screen and (prefers-reduced-motion: no-preference) {
  .enter > * { animation: enter .5s cubic-bezier(.3, .8, .3, 1) backwards; }
  .enter > :nth-child(2) { animation-delay: .06s; }
  .enter > :nth-child(3) { animation-delay: .12s; }
  .enter > :nth-child(4) { animation-delay: .18s; }
  .enter > :nth-child(5) { animation-delay: .24s; }
  .enter > :nth-child(6) { animation-delay: .3s; }
  .enter > :nth-child(n+7) { animation-delay: .36s; }
  .reword { animation: reword .28s ease; }
  .ok-tick path { stroke-dasharray: 21; animation: tick .3s ease backwards; }
  .art-wait .case-chart .b, .art-in .case-chart .b { transform-box: fill-box; transform-origin: 50% 100%; }
  .art-wait .case-chart .b { transform: scaleY(0); }
  .art-in .case-chart .b { animation: grow .6s cubic-bezier(.3, .8, .3, 1) backwards; animation-delay: calc(.15s + var(--i, 0) * 14ms); }
  .art-wait .auth-n dd { opacity: 0; }
}
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
@keyframes reword { from { opacity: 0; transform: translateY(5px); } }
@keyframes tick { from { stroke-dashoffset: 21; } }
@keyframes grow { from { transform: scaleY(0); } }

/* ---------- Dashboard motion (public/desk-motion.js). The picked mark of a switch or of the page nav is drawn for a moment
   as one .dk-glide that slides from the old pick to the new; bars grow from their axis; another site's row spins while the
   page dims until the new one is drawn. */
.dk-seg, .dk-nav { position: relative; }
.dk-seg > button, .dk-nav > a { position: relative; z-index: 1; }
.dk-glide { position: absolute; z-index: 0; background: var(--dk-dark); border-radius: 999px; pointer-events: none; }
.dk-svg rect[data-i], .dk-mbars rect { transform-box: fill-box; transform-origin: 50% 100%; }
.dk-svg circle.pt, .dk-gsvg .g-knob { transform-box: fill-box; transform-origin: center; }
.dk-page.dk-wait { opacity: .45; pointer-events: none; transition: opacity .2s ease; }
.dk-menu button { position: relative; }
.dk-menu button.dk-going { padding-right: 34px; }
.dk-menu button.dk-going::after { content: ''; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }