html:is([data-l-app=qz-night],[data-l-app=fc-night],[data-l-app=mg-night],[data-l-app=ck-night],[data-l-app=wg-night]):not(#_){color-scheme:dark;--bg:#0D0F17;--surface:#161A25;--sunk-0:#1F2431;--line-0:#2B3242;--edge:#6E7890;--ink:#EEF1F7;--ink-2:#AEB6C6;--good:#5DD286;--warn:#EDBE4F;--bad:#FF8080;--accent:var(--a-d);--on-accent:#0D0F17}
html:is([data-l-app=qz-night],[data-l-app=fc-night],[data-l-app=mg-night],[data-l-app=ck-night],[data-l-app=wg-night]):not(#_) [data-accent]{--accent:var(--a-d)}

/* ---- quiz ---- */
/* the first screen (#start) becomes one grid of four blocks: c = title copy + Start, p = the sample question, t = topics, r = your record (the .hero and .below
   wrappers step aside with display:contents); the question screen (#play) becomes a grid of hud (position + score), bar, topic, q, hint, opts, fb, act */
html[data-l-app^=qz-] #start{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "p" "t" "r";gap:var(--s-6) var(--s-7);align-items:start}
html[data-l-app^=qz-] #start :is(.hero,.below){display:contents}
html[data-l-app^=qz-] #start .hero-copy{grid-area:c;min-width:0}
html[data-l-app^=qz-] #start .preview{grid-area:p;min-width:0}
html[data-l-app^=qz-] #start #topics-sec{grid-area:t;min-width:0}
html[data-l-app^=qz-] #start .below > section:last-child{grid-area:r;min-width:0}
html[data-l-app^=qz-] #play .progress-row{grid-area:hud}
html[data-l-app^=qz-] #play #bar{grid-area:bar}
html[data-l-app^=qz-] #play .q-topic{grid-area:topic}
html[data-l-app^=qz-] #play .question{grid-area:q}
html[data-l-app^=qz-] #play .hint{grid-area:hint}
html[data-l-app^=qz-] #play .options{grid-area:opts}
html[data-l-app^=qz-] #play .feedback{grid-area:fb}
html[data-l-app^=qz-] #play .actions{grid-area:act}
/* a side scoreboard card (the layouts that move the HUD beside the question) */
html:is([data-l-app=qz-flip],[data-l-app=qz-rail],[data-l-app=qz-split]) #play .progress-row{flex-direction:column;align-self:start;gap:var(--s-2);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);font:700 var(--t-lg)/1.2 var(--serif);color:var(--ink)}
/* two-by-two answers (centre, night, cards) and four across (wide) */
html:is([data-l-app=qz-center],[data-l-app=qz-night],[data-l-app=qz-cards]) #play .options{grid-template-columns:repeat(2,minmax(0,1fr))}
html:is([data-l-app=qz-center],[data-l-app=qz-night],[data-l-app=qz-cards]) #play .option{height:100%;min-height:64px}
@media (min-width:880px){
/* flip: the sample question on the left, the copy on the right, record before topics; the scoreboard beside the question on the right */
html[data-l-app=qz-flip] #start{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"p c" "r t";align-items:center}
html[data-l-app=qz-flip] #start .below > section{padding-top:var(--s-5);border-top:1px solid var(--line)}
html[data-l-app=qz-flip] #play{max-width:1080px;display:grid;grid-template-columns:minmax(0,1fr) 280px;column-gap:var(--s-8);grid-template-areas:"topic hud" "q hud" "hint bar" "opts ." "fb ." "act ."}
/* centre: one centred column (copy, then the sample), topics and record side by side under it; answers two by two */
html[data-l-app=qz-center] #start{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "p p" "t r";justify-items:center}
html[data-l-app=qz-center] #start .preview{width:min(620px,100%)}
html[data-l-app=qz-center] #start #topics-sec,html[data-l-app=qz-center] #start .below > section:last-child{justify-self:stretch}
/* rail: topics and record in a left rail with a rule, the copy and the sample stacked in the main column; the scoreboard in the same left rail on the question screen */
html[data-l-app=qz-rail] #start{grid-template-columns:280px minmax(0,1fr);grid-template-areas:"t c" "r c" "r p";grid-template-rows:auto auto 1fr}
html[data-l-app=qz-rail] #start :is(#topics-sec,.below > section:last-child){padding-right:var(--s-6);border-right:1px solid var(--line)}
html[data-l-app=qz-rail] #start .facts{grid-template-columns:minmax(0,1fr)}
html[data-l-app=qz-rail] #play{max-width:1080px;display:grid;grid-template-columns:260px minmax(0,1fr);column-gap:var(--s-8);grid-template-areas:"hud topic" "hud q" "bar hint" ". opts" ". fb" ". act"}
/* night: a dark stage, the copy centred across the top, the sample, topics and record as three panels under it; answers two by two */
html[data-l-app=qz-night] #start{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"c c c" "p t r"}
html[data-l-app=qz-night] #start .below > section{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);align-self:stretch}
html[data-l-app=qz-night] #play{max-width:1120px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5);grid-template-areas:"topic topic" "q q" "hint hint" "opts opts" "fb fb" "act hud" "bar bar"}
html[data-l-app=qz-night] #play .option{min-height:112px;font-size:var(--t-lg)}
html[data-l-app=qz-night] #play .progress-row{align-self:center;justify-content:flex-end;gap:var(--s-6);font:700 var(--t-2xl)/1 var(--serif);color:var(--ink)}
html[data-l-app=qz-night] #play #bar{margin-top:var(--s-5)}
/* board: a bento of three tiles across (the copy, the sample, then topics over record); the question screen in three columns too (question | answers | scoreboard, feedback, controls) */
html[data-l-app=qz-board] #start{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.85fr);grid-template-areas:"c p t" "c p r";grid-template-rows:auto 1fr;gap:var(--s-4)}
html[data-l-app=qz-board] #start :is(.hero-copy,#topics-sec,.below > section:last-child){padding:var(--s-6);border-radius:var(--r-card);background:var(--sunk);align-self:stretch}
html[data-l-app=qz-board] #start .preview{align-self:stretch}
html[data-l-app=qz-board] #play{max-width:1180px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);grid-template-areas:"hud topic topic" "hud q q" "hud hint hint" "bar bar bar" "opts opts fb" "opts opts act";grid-template-rows:auto auto auto auto auto 1fr}
html[data-l-app=qz-board] #play .progress-row{flex-direction:column;justify-content:center;gap:var(--s-2);padding:var(--s-5);border-radius:var(--r-card);background:var(--sunk);font:700 var(--t-xl)/1.2 var(--serif);color:var(--ink)}
html[data-l-app=qz-board] #play :is(.q-topic,.question,.hint){margin:0;max-width:none;padding-inline:var(--s-5);background:var(--sunk)}
html[data-l-app=qz-board] #play .q-topic{padding-top:var(--s-5);border-radius:var(--r-card) var(--r-card) 0 0}
html[data-l-app=qz-board] #play .hint{padding-bottom:var(--s-5);border-radius:0 0 var(--r-card) var(--r-card)}
html[data-l-app=qz-board] #play{row-gap:0}
html[data-l-app=qz-board] #play :is(#bar,.options,.feedback,.actions){margin-top:var(--s-4)}
html[data-l-app=qz-board] #play .options{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-l-app=qz-board] #play .option{height:100%;min-height:88px}
html[data-l-app=qz-board] #play .feedback{margin-bottom:0;padding:var(--s-4);border-radius:var(--r-card);background:var(--sunk)}
html[data-l-app=qz-board] #play .feedback:empty{padding:0;background:none}
/* banner: the copy in an accent band across the page, the sample left with record and topics stacked right; the scoreboard in an accent strip, feedback and controls in a column left of the answers */
html[data-l-app=qz-banner] #start{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"c c" "p r" "p t"}
html[data-l-app=qz-banner] #play{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.8fr);column-gap:var(--s-7);grid-template-areas:"hud hud" "topic topic" "q q" "hint hint" "bar bar" "act opts" "fb opts";grid-template-rows:auto auto auto auto auto auto 1fr}
html[data-l-app=qz-banner] #play .feedback{margin-top:0}
html[data-l-app=qz-banner] #play{row-gap:0}
html[data-l-app=qz-banner] #play :is(.progress-row,.q-topic,.question,.hint){margin:0;max-width:none;padding:var(--s-2) clamp(20px,4vw,48px);background:var(--accent);color:var(--on-accent)}
html[data-l-app=qz-banner] #play .progress-row{padding-top:var(--s-5);border-radius:var(--r-card) var(--r-card) 0 0}
html[data-l-app=qz-banner] #play .hint{padding-bottom:var(--s-6);border-radius:0 0 var(--r-card) var(--r-card);max-width:none}
html[data-l-app=qz-banner] #play .question{font-size:var(--t-3xl)}
html[data-l-app=qz-banner] #play #bar{margin-block:var(--s-4) var(--s-5)}
html[data-l-app=qz-banner] #play .actions{margin-top:0;align-self:start}
/* wide: the record as a strip on top, the copy beside a larger sample, topics full width under them; four answers in a row */
html[data-l-app=qz-wide] #start{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"r r" "c p" "t t";align-items:center}
html[data-l-app=qz-wide] #start .below > section:last-child{padding-bottom:var(--s-5);border-bottom:1px solid var(--line)}
html[data-l-app=qz-wide] #start .below > section:last-child .sub{display:none}
html[data-l-app=qz-wide] #play{max-width:1120px}
html[data-l-app=qz-wide] #play .options{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
html[data-l-app=qz-wide] #play .option{height:100%;min-height:96px;align-items:flex-start;flex-direction:column;justify-content:space-between;padding:var(--s-4)}
/* cards: the sample question first and large, the copy and the record/topics as cards under it; the question screen in one raised card */
html[data-l-app=qz-cards] #start{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"p p" "c t" "c r"}
html[data-l-app=qz-cards] #start .preview{padding:var(--s-7);box-shadow:var(--shadow-pop)}
html[data-l-app=qz-cards] #start .preview .pv-q{font-size:var(--t-2xl)}
html[data-l-app=qz-cards] #start .preview .pv-options{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-l-app=qz-cards] #start :is(.hero-copy,#topics-sec,.below > section:last-child){padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-pop);align-self:stretch}
html[data-l-app=qz-cards] #play{max-width:880px}
/* split: the copy in a full-height tinted panel on the left, the sample, topics and record stacked on the right; the question in a tinted panel left, the answers right */
html[data-l-app=qz-split] #start{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c p" "c t" "c r";grid-template-rows:auto auto 1fr;column-gap:var(--s-8)}
html[data-l-app=qz-split] #start .hero-copy{align-self:stretch;padding:var(--s-8) var(--s-7)}
html[data-l-app=qz-split] #play{max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-8);grid-template-areas:"topic hud" "q opts" "hint opts" "bar opts" "fb opts" "act opts";grid-template-rows:auto auto auto auto auto 1fr}
html[data-l-app=qz-split] #play :is(.q-topic,.question,.hint,#bar){margin-inline:0}
html[data-l-app=qz-split] #play .progress-row{flex-direction:row;justify-self:end}
}
/* phone and desktop: the centred copy, the accent band, the cards' raised question, the night stage's big type */
html[data-l-app=qz-center] #start .hero-copy{text-align:center;justify-self:center;max-width:760px}
html[data-l-app=qz-center] #start .hero-copy :is(.meta,.actions){justify-content:center}
html[data-l-app=qz-center] #start .hero-copy > *{margin-inline:auto}
html[data-l-app=qz-center] #play{text-align:center}
html[data-l-app=qz-center] #play :is(.actions,.progress-row){justify-content:center;gap:var(--s-5)}
html[data-l-app=qz-center] #play .hint{margin-inline:auto}
html[data-l-app=qz-night] #start .hero-copy{text-align:center;justify-self:center;max-width:880px;padding-block:var(--s-5)}
html[data-l-app=qz-night] #start .hero-copy h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);letter-spacing:-.03em}
html[data-l-app=qz-night] #start .hero-copy :is(.meta,.actions){justify-content:center}
html[data-l-app=qz-night] #start .hero-copy > *{margin-inline:auto}
html[data-l-app=qz-night] #play .question{font-size:var(--t-3xl);text-align:center}
html[data-l-app=qz-night] #play .q-topic{text-align:center}
html[data-l-app=qz-night] #play .hint{text-align:center;margin-inline:auto}
html[data-l-app=qz-banner] #start .hero-copy{padding:clamp(24px,5vw,64px);border-radius:var(--r-card);background:var(--accent);color:var(--on-accent)}
html[data-l-app=qz-banner] #start .hero-copy :is(.kicker,.lede,.meta,.meta b){color:inherit}
html[data-l-app=qz-banner] #start .hero-copy .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* the kicker chip on the accent banner: see-through, a thin ring (its --wash tint carried the on-accent text at 1.1:1) */
html[data-l-app=qz-banner] #start .hero-copy .btn-primary{background:var(--on-accent);color:var(--accent)}
html[data-l-app=qz-banner] #start .hero-copy .btn-primary:hover:not(:disabled){background:color-mix(in oklab,var(--on-accent) 88%,var(--accent))}
@media (max-width:879px){html[data-l-app=qz-banner] #play .progress-row{margin-bottom:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-weight:650}}
html[data-l-app=qz-cards] #play{padding:clamp(16px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-pop)}
html[data-l-app=qz-split] #start .hero-copy{border-radius:var(--r-card);background:var(--wash)}
@media (max-width:879px){html[data-l-app=qz-split] #start .hero-copy{padding:var(--s-6)}}
html[data-l-app=qz-split] #play .question{padding:var(--s-5);border-radius:var(--r-card);background:var(--wash)}
@media (max-width:879px){html[data-l-app=qz-wide] #start{grid-template-areas:"r" "c" "p" "t"}}

/* ---- flashcards ---- */
/* the decks screen (#home) becomes a grid of hh (its heading), note, decks, empty, form; the study screen (#study-v) a grid of sh (deck name), hud (card n of m +
   known / still learning), bar, card (the flip card), hint, act (show / knew / still / end). The header (.top) is the page title block. */
html[data-l-app^=fc-] #home{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"hh" "note" "decks" "empty" "form";column-gap:var(--s-7);align-items:start}
html[data-l-app^=fc-] #home > .sec-h{grid-area:hh}
html[data-l-app^=fc-] #home > .note{grid-area:note}
html[data-l-app^=fc-] #home > .decks{grid-area:decks;min-width:0}
html[data-l-app^=fc-] #home > .empty{grid-area:empty}
html[data-l-app^=fc-] #home > .add{grid-area:form;min-width:0}
html[data-l-app^=fc-] #study-v{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"sh" "hud" "bar" "card" "hint" "act";column-gap:var(--s-7);align-items:start}
html[data-l-app^=fc-] #study-v > .sec-h{grid-area:sh}
html[data-l-app^=fc-] #study-v > .progress-row{grid-area:hud}
html[data-l-app^=fc-] #study-v > .progress{grid-area:bar}
html[data-l-app^=fc-] #study-v > .flash{grid-area:card;min-width:0}
html[data-l-app^=fc-] #study-v > .hint{grid-area:hint}
html[data-l-app^=fc-] #study-v > .actions{grid-area:act}
/* the wider pages */
html:is([data-l-app=fc-wide],[data-l-app=fc-night],[data-l-app=fc-shelf],[data-l-app=fc-banner],[data-l-app=fc-split],[data-l-app=fc-tiles],[data-l-app=fc-top]) :is(.top,main.wrap){max-width:1120px}
html[data-l-app=fc-rail] :is(.top,main.wrap){max-width:none}
html[data-l-app=fc-center] :is(.top,main.wrap){max-width:820px}
/* a side scoreboard card */
html:is([data-l-app=fc-shelf],[data-l-app=fc-split]) #study-v > .progress-row{flex-direction:column;align-self:start;gap:var(--s-2);margin:0;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);font:700 var(--t-lg)/1.25 var(--serif);color:var(--ink)}
@media (min-width:900px){
/* wide: the heading and note as a side heading left of three decks across, the add-deck form full width under; the study card full width and taller, the controls centred under it */
html[data-l-app=fc-wide] #home{grid-template-columns:260px minmax(0,1fr);grid-template-areas:"hh decks" "note decks" ". empty" "form form";grid-template-rows:auto 1fr auto auto}
html[data-l-app=fc-wide] #home > .sec-h{font-size:var(--t-2xl)}
html[data-l-app=fc-wide] #home > .decks{margin-top:0}
html[data-l-app=fc-wide] #home > .decks{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-l-app=fc-wide] #study-v .face{min-height:360px}
html[data-l-app=fc-wide] #study-v > .actions{justify-content:center}
/* rail: the title block in a left rail, the decks two across beside it */
html[data-l-app=fc-rail] body{display:grid;grid-template-columns:320px minmax(0,1fr);align-items:start}
html[data-l-app=fc-rail] body > .top{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;min-height:100vh;margin:0;padding:var(--s-8) var(--s-6);border-bottom:0;border-right:1px solid var(--line);background:var(--surface)}
html[data-l-app=fc-rail] body > main{grid-column:2;grid-row:1;width:100%;padding-inline:var(--s-7)}
html[data-l-app=fc-rail] #home > .decks{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-l-app=fc-rail] #study-v .face{min-height:320px}
/* night: a dark stage, a big centred title, decks three across; a large card centred with the score in big type under it */
html[data-l-app=fc-night] #home > .decks{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-l-app=fc-night] #study-v{grid-template-areas:"sh" "card" "hint" "act" "hud" "bar";justify-items:center;text-align:center}
html[data-l-app=fc-night] #study-v > .flash{width:min(860px,100%)}
html[data-l-app=fc-night] #study-v .face{min-height:320px}
html[data-l-app=fc-night] #study-v > .progress-row{width:min(860px,100%);margin-top:var(--s-6);font:700 var(--t-2xl)/1 var(--serif);color:var(--ink)}
html[data-l-app=fc-night] #study-v > .progress{width:min(860px,100%)}
/* shelf: decks two across with the add-deck form in a tinted side column; the card left with the scoreboard and controls in a right column */
html[data-l-app=fc-shelf] #home{grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"hh form" "note form" "decks form" "empty form"}
html[data-l-app=fc-shelf] #home > .decks{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-l-app=fc-shelf] #home > .add{margin-top:0;padding:var(--s-5);border:0;border-radius:var(--r-card);background:var(--sunk)}
html[data-l-app=fc-shelf] #study-v{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"sh sh" "card hud" "card bar" "card act" "hint act";grid-template-rows:auto auto auto auto 1fr}
html[data-l-app=fc-shelf] #study-v > .flash{margin-top:0}
html[data-l-app=fc-shelf] #study-v .face{min-height:340px}
html[data-l-app=fc-shelf] #study-v > .actions{flex-direction:column;align-items:stretch}
/* banner: the title in an accent band, four decks across; the card beside a tinted note column (hint), the controls under the card */
html[data-l-app=fc-banner] #home > .decks{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-l-app=fc-banner] #study-v{grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"sh sh" "hud hud" "bar bar" "card hint" "act hint"}
html[data-l-app=fc-banner] #study-v > .hint{align-self:stretch;margin:var(--s-5) 0 0;padding:var(--s-5);border-radius:var(--r-card);background:var(--wash);color:var(--ink);font-size:var(--t-md)}
/* split: the add-deck form in a left column, the decks two across right; the scoreboard in a left column beside the card */
html[data-l-app=fc-split] #home{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"form hh" "form note" "form decks" "form empty";grid-template-rows:auto auto auto 1fr}
html[data-l-app=fc-split] #home > .add{margin-top:var(--s-3);padding:0 var(--s-6) 0 0;border-top:0;border-right:1px solid var(--line);position:sticky;top:16px}
html[data-l-app=fc-split] #home > .decks{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-l-app=fc-split] #study-v{grid-template-columns:280px minmax(0,1fr);grid-template-areas:"hud sh" "hud card" "bar card" ". hint" ". act";grid-template-rows:auto auto 1fr auto auto}
html[data-l-app=fc-split] #study-v > .progress{align-self:start;margin-top:var(--s-3)}
html[data-l-app=fc-split] #study-v .face{min-height:320px}
/* tiles: a two-column title (headline left, lede right), decks as big two-across tiles; the card with a stacked-deck edge, full-width equal controls */
html[data-l-app=fc-tiles] .top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:var(--s-7);align-items:end}
html[data-l-app=fc-tiles] .top > :not(.lede){grid-column:1}
html[data-l-app=fc-tiles] .top > .lede{grid-column:2;grid-row:1 / span 2;margin:0}
html[data-l-app=fc-tiles] #home > .decks{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
html[data-l-app=fc-tiles] #home .deck{min-height:200px;padding:var(--s-6)}
html[data-l-app=fc-tiles] #home .deck h3{font-size:var(--t-2xl)}
html[data-l-app=fc-tiles] #study-v > .flash,html[data-l-app=fc-tiles] #study-v > :is(.progress-row,.progress,.hint,.actions,.sec-h){width:min(760px,100%);justify-self:center}
html[data-l-app=fc-tiles] #study-v .face{min-height:300px;box-shadow:8px 8px 0 -1px var(--surface),8px 8px 0 0 var(--line),16px 16px 0 -1px var(--surface),16px 16px 0 0 var(--line)}
/* top: the add-deck form first as a tinted band, three decks across; the controls above the card */
html[data-l-app=fc-top] #home{grid-template-areas:"form" "hh" "note" "decks" "empty"}
html[data-l-app=fc-top] #home > .add{margin:0 0 var(--s-6);padding:var(--s-5);border:0;border-radius:var(--r-card);background:var(--sunk)}
html[data-l-app=fc-top] #home > .decks{grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-l-app=fc-top] #study-v{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"sh hud" "bar bar" "act act" "card card" "hint hint"}
html[data-l-app=fc-top] #study-v > .progress-row{align-self:end;justify-content:flex-end;gap:var(--s-5);font:700 var(--t-lg)/1.2 var(--serif);color:var(--ink)}
html[data-l-app=fc-top] #study-v > .actions{padding:var(--s-3);border-radius:var(--r-card);background:var(--sunk)}
html[data-l-app=fc-top] #study-v .face{min-height:340px}
}
/* phone and desktop: the centred page, the night title, the accent band, the controls row of tiles */
html[data-l-app=fc-center] .top{text-align:center}
html[data-l-app=fc-center] .top > *{margin-inline:auto}
html[data-l-app=fc-center] #home > :is(.sec-h,.note){text-align:center;margin-inline:auto}
html[data-l-app=fc-center] #home > .decks{grid-template-columns:minmax(0,1fr)}
html[data-l-app=fc-center] #home .deck{grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-4);align-items:center}
html[data-l-app=fc-center] #home .deck > :not(.actions){grid-column:1}
html[data-l-app=fc-center] #home .deck > .actions{grid-column:2;grid-row:1 / span 3;margin:0}
html[data-l-app=fc-center] #study-v{justify-items:center;text-align:center}
html[data-l-app=fc-center] #study-v > :is(.flash,.progress-row,.progress){width:min(560px,100%)}
html[data-l-app=fc-center] #study-v > :is(.actions,.progress-row){justify-content:center}
html[data-l-app=fc-night] .top{text-align:center;border-bottom:0}
html[data-l-app=fc-night] .top > *{margin-inline:auto}
html[data-l-app=fc-night] .top h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.6rem);letter-spacing:-.03em}
html[data-l-app=fc-night] #study-v > .actions{justify-content:center}
html[data-l-app=fc-banner] .top{margin-top:var(--s-5);padding:clamp(24px,5vw,56px);border:0;border-radius:var(--r-card);background:var(--accent);color:var(--on-accent)}
html[data-l-app=fc-banner] .top :is(.kicker,.lede){color:inherit}
html[data-l-app=fc-banner] .top .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* the kicker chip on the accent banner: see-through, a thin ring (its --wash tint carried the on-accent text at 1.1:1) */
html[data-l-app=fc-banner] #study-v > .progress-row{padding:var(--s-2) var(--s-4);border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-weight:650}
@media (max-width:899px){html[data-l-app=fc-banner] .top{margin-inline:var(--gutter)}html[data-l-app=fc-top] #home{grid-template-areas:"form" "hh" "note" "decks" "empty"}html[data-l-app=fc-top] #study-v{grid-template-areas:"sh" "hud" "bar" "act" "card" "hint"}}

/* ---- memory_game ---- */
/* the page: .top (title block) over main.game, whose parts are .head (status + the pairs / moves / time HUD), .board (the cards; its size is the engine's),
   .win (the cleared message) and .ctl (difficulty + New game + best). The base (r2 app.css) puts the board left and head / ctl / win right from 1000px. */
html[data-l-app^=mg-] .board{justify-self:center}
html:is([data-l-app=mg-night],[data-l-app=mg-center]) .top{text-align:center}
html:is([data-l-app=mg-night],[data-l-app=mg-center]) .top > *{margin-inline:auto}
html[data-l-app=mg-night] .top h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);letter-spacing:-.03em}
html:is([data-l-app=mg-night],[data-l-app=mg-center]) .top{border-bottom:0}
html[data-l-app=mg-banner] .top{margin-top:var(--s-5);padding:clamp(24px,5vw,56px);border:0;border-radius:var(--r-card);background:var(--accent);color:var(--on-accent)}
html[data-l-app=mg-banner] .top :is(.kicker,.lede){color:inherit}
html[data-l-app=mg-banner] .top .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* the kicker chip on the accent banner: see-through, a thin ring (its --wash tint carried the on-accent text at 1.1:1) */
@media (max-width:999px){html[data-l-app=mg-banner] .top{margin-inline:var(--gutter)}}
html[data-l-app=mg-table] .board{box-shadow:0 0 0 clamp(10px,2vw,24px) var(--sunk);border-radius:2px;margin-block:clamp(10px,2vw,24px)}
html[data-l-app=mg-night] .hud dd{font-size:var(--t-3xl)}
@media (min-width:1000px){
html[data-l-app^=mg-] .game{column-gap:var(--s-7)}
/* flip: the board on the right, the status, HUD and controls on the left */
html[data-l-app=mg-flip] .game{grid-template-columns:minmax(260px,1fr) minmax(0,auto);grid-template-areas:"head board" "ctl board" "win board"}
/* centre: one centred column -- the HUD as a row over the board, the controls in a row under it */
html[data-l-app=mg-center] .game{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "board" "ctl" "win";grid-template-rows:none;justify-items:center;max-width:860px}
html[data-l-app=mg-center] .head{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:end;column-gap:var(--s-6);width:100%}
html[data-l-app=mg-center] :is(.ctl,.win){width:100%;justify-items:center;text-align:center}
html[data-l-app=mg-center] .row{justify-content:center}
/* night: a dark page, the board centred under a big title, the scoreboard in big type under the board, the controls beside it */
html[data-l-app=mg-night] .game{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"board board" "head ctl" "win win";grid-template-rows:none;max-width:1000px}
html[data-l-app=mg-night] .ctl{align-self:end;justify-items:end}
/* top: the HUD and the controls together in one tinted toolbar under the title, the board under it with the cleared message beside it */
html[data-l-app=mg-top] .game{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"head ctl" "board win";grid-template-rows:none;row-gap:var(--s-6);column-gap:0}
html[data-l-app=mg-top] :is(.head,.ctl){align-self:stretch;padding:var(--s-4) var(--s-5);background:var(--sunk)}
html[data-l-app=mg-top] .head{border-radius:var(--r-card) 0 0 var(--r-card)}
html[data-l-app=mg-top] .ctl{border-radius:0 var(--r-card) var(--r-card) 0;align-content:center}
html[data-l-app=mg-top] .board{justify-self:start}
html[data-l-app=mg-top] .win{margin-left:var(--s-7)}
/* banner: the title in an accent band; three columns under it: the HUD, the board, the controls */
html[data-l-app=mg-banner] .game{max-width:1200px;grid-template-columns:minmax(200px,1fr) auto minmax(220px,1fr);grid-template-areas:"head board ctl" "win board ctl";grid-template-rows:auto 1fr}
html[data-l-app=mg-banner] .hud{grid-template-columns:minmax(0,1fr)}
/* bottom: the board first and centred, a strip of three under it: status + HUD, controls, the cleared message */
html[data-l-app=mg-bottom] .game{max-width:1200px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"board board board" "head ctl win";grid-template-rows:none;row-gap:var(--s-6)}
html[data-l-app=mg-bottom] :is(.head,.ctl,.win){align-self:stretch;padding-top:var(--s-4);border-top:2px solid var(--ink)}
html[data-l-app=mg-bottom] .win{border-bottom:0}
/* rail, split, table: the title joins the side column (body grid; main steps aside with display:contents) */
html:is([data-l-app=mg-rail],[data-l-app=mg-split],[data-l-app=mg-table]) body{display:grid;column-gap:var(--s-7);align-items:start;max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
html:is([data-l-app=mg-rail],[data-l-app=mg-split],[data-l-app=mg-table]) main.game{display:contents}
html:is([data-l-app=mg-rail],[data-l-app=mg-split],[data-l-app=mg-table]) .top{max-width:none;margin:0;padding-inline:0}
/* rail: a left rail (title, status + HUD, controls, cleared) with a rule, the board in the wide right column */
html[data-l-app=mg-rail] body{grid-template-columns:320px minmax(0,1fr);grid-template-areas:"top board" "head board" "ctl board" "win board";grid-template-rows:auto auto auto 1fr}
html[data-l-app=mg-rail] :is(.top,.head,.ctl,.win){padding-right:var(--s-6);border-right:1px solid var(--line)}
html[data-l-app=mg-rail] .top{grid-area:top;border-bottom:0}
html[data-l-app=mg-rail] .board{margin-top:var(--s-7)}
/* split: the page in two halves, a tinted left half holding the title, HUD and controls, the board centred in the right half */
html[data-l-app=mg-split] body{max-width:none;padding:0;column-gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top board" "head board" "ctl board" "win board";grid-template-rows:auto auto auto 1fr;min-height:100vh}
html[data-l-app=mg-split] body{background:linear-gradient(90deg,var(--wash) 50%,var(--bg) 50%)}
html[data-l-app=mg-split] :is(.top,.head,.ctl,.win){padding-inline:max(var(--s-7),calc(50vw - 560px)) var(--s-7)}
html[data-l-app=mg-split] .top{grid-area:top;padding-top:var(--s-8);border-bottom:0}
html[data-l-app=mg-split] .head{padding-block:var(--s-6) var(--s-4)}
html[data-l-app=mg-split] .ctl{padding-bottom:var(--s-6)}
html[data-l-app=mg-split] .win{border:0;padding-bottom:var(--s-8)}
html[data-l-app=mg-split] .board{align-self:center;margin:var(--s-7)}
/* table: the board on a framed table at the left, the title, HUD and controls stacked on the right */
html[data-l-app=mg-table] body{grid-template-columns:auto minmax(280px,1fr);grid-template-areas:"board top" "board head" "board ctl" "board win";grid-template-rows:auto auto auto 1fr;padding-top:var(--s-7)}
html[data-l-app=mg-table] .top{grid-area:top;padding-top:0}
html[data-l-app=mg-table] .board{margin:clamp(10px,2vw,24px)}
}

/* ---- clicker ---- */
/* the page: .top (title block) over main.game: .play (the HUD, the away note and the big tap target), .shop (upgrades) and .goals (milestones + Start over).
   The base puts play and goals left, the shop right from 860px. */
html:is([data-l-app=ck-center],[data-l-app=ck-night]) .top{text-align:center;border-bottom:0}
html:is([data-l-app=ck-center],[data-l-app=ck-night]) .top > *{margin-inline:auto}
html[data-l-app=ck-night] .top h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4.4rem);letter-spacing:-.03em}
html[data-l-app=ck-center] .play .hud{text-align:center}
html[data-l-app=ck-banner] .top{margin-top:var(--s-5);padding:clamp(24px,5vw,56px);border:0;border-radius:var(--r-card);background:var(--accent);color:var(--on-accent)}
html[data-l-app=ck-banner] .top :is(.kicker,.lede){color:inherit}
html[data-l-app=ck-banner] .top .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* the kicker chip on the accent banner: see-through, a thin ring (its --wash tint carried the on-accent text at 1.1:1) */
@media (max-width:859px){html[data-l-app=ck-banner] .top{margin-inline:var(--gutter)}}
html[data-l-app=ck-night] .play{order:-1}
html[data-l-app=ck-night] .play .stage{order:-1}
html[data-l-app=ck-night] .hud .big{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem)}
@media (min-width:860px){
html[data-l-app^=ck-] .game{column-gap:var(--s-7)}
/* flip: the shop on the left, the tap target and milestones on the right */
html[data-l-app=ck-flip] .game{grid-template-areas:"shop play" "shop goals"}
/* centre: the HUD and the tap target centred across the page, the shop and milestones side by side under them */
html[data-l-app=ck-center] .game{grid-template-areas:"play play" "shop goals"}
html[data-l-app=ck-center] .play{justify-self:center;width:min(760px,100%)}
/* three: milestones | tap target | shop */
html[data-l-app=ck-three] .wrap{max-width:1240px}
html[data-l-app=ck-three] .game{grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"goals play shop"}
html[data-l-app=ck-three] .goals{padding-right:var(--s-6);border-right:1px solid var(--line)}
/* night: a dark page, the tap target first and big with the HUD under it, the shop two across, milestones last */
html[data-l-app=ck-night] .game{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"play play" "shop shop" "goals goals"}
html[data-l-app=ck-night] .play{justify-self:center;width:min(720px,100%)}
html[data-l-app=ck-night] .shop .list{grid-template-columns:repeat(2,minmax(0,1fr))}
/* rail: the title and milestones in a left rail, the tap target and the shop in two columns beside it */
html[data-l-app=ck-rail] body{display:grid;grid-template-columns:300px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top play shop" "goals play shop";grid-template-rows:auto 1fr;column-gap:var(--s-7);max-width:1320px;margin-inline:auto;padding-inline:var(--gutter)}
html[data-l-app=ck-rail] main.game{display:contents}
html[data-l-app=ck-rail] .top{grid-area:top;max-width:none;margin:0;padding-inline:0 var(--s-5);border-bottom:0}
html[data-l-app=ck-rail] :is(.top,.goals){padding-right:var(--s-5);border-right:1px solid var(--line)}
html[data-l-app=ck-rail] :is(.play,.shop){padding-top:var(--s-6)}
html[data-l-app=ck-rail] .goals{padding-bottom:var(--s-8)}
/* banner: the title in an accent band, the shop as a row of upgrade cards across the page, the tap target and milestones under it */
html[data-l-app=ck-banner] .game{grid-template-areas:"shop shop" "play goals"}
html[data-l-app=ck-banner] .shop .list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* split: the tap target on a tall tinted panel on the left, the HUD under it; the shop and milestones stacked right */
html[data-l-app=ck-split] .game{grid-template-areas:"play shop" "play goals"}
html[data-l-app=ck-split] .play{align-self:stretch;padding:var(--s-6);border-radius:var(--r-card);background:var(--wash);align-content:start}
html[data-l-app=ck-split] .play .stage{order:-1;padding-block:var(--s-5) var(--s-3)}
/* cards: one wide card with the tap target left and the HUD stacked right, the shop and milestones as cards under it */
html[data-l-app=ck-cards] .game{grid-template-areas:"play play" "shop goals"}
html[data-l-app=ck-cards] .play{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:var(--s-7)}
html[data-l-app=ck-cards] .play .stage{grid-column:1;grid-row:1 / span 2}
html[data-l-app=ck-cards] .play .hud{grid-column:2;grid-template-columns:minmax(0,1fr)}
html[data-l-app=ck-cards] :is(.play,.shop,.goals){padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-pop)}
/* strip: the HUD as a column of big numbers left of the tap target across the page, the shop three across, milestones last */
html[data-l-app=ck-strip] .game{grid-template-areas:"play play" "shop shop" "goals goals"}
html[data-l-app=ck-strip] .play{grid-template-columns:260px minmax(0,1fr);align-items:center;column-gap:var(--s-7);padding-block:var(--s-5);border-block:1px solid var(--line)}
html[data-l-app=ck-strip] .play .hud{grid-column:1;grid-row:1 / span 2;grid-template-columns:minmax(0,1fr)}
html[data-l-app=ck-strip] .play :is(.away,.stage){grid-column:2}
html[data-l-app=ck-strip] .shop .list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- word_game (typing test) ---- */
/* the page: a nav (brand + test-length modes), main > .stage (.stage-head = title + .live WPM / accuracy / time, .passage-wrap, .type-row input + Restart,
   .hint, .result) and .history (past runs table + chart), a footer. The base stacks the stage over the history. */
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .stage-head{display:contents}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "live" "pass" "type" "hint" "res"}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .stage-head > :first-child{grid-area:title;min-width:0}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .live{grid-area:live}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .passage-wrap{grid-area:pass;min-width:0}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .type-row{grid-area:type}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .hint{grid-area:hint}
html:is([data-l-app=wg-center],[data-l-app=wg-rail],[data-l-app=wg-night],[data-l-app=wg-top],[data-l-app=wg-tiles],[data-l-app=wg-bottom]) .result{grid-area:res}
/* centre: the title and the live figures centred, the passage and input in a centred column */
html[data-l-app=wg-center] .stage{justify-items:center;text-align:center}
html[data-l-app=wg-center] .stage > *{width:min(820px,100%)}
html[data-l-app=wg-center] .live{justify-content:center;width:auto}
html[data-l-app=wg-center] .passage{text-align:left}
/* night: a dark page, a big centred title, a larger passage, the live figures in big type under the input */
html[data-l-app=wg-night] .stage{grid-template-areas:"title" "pass" "type" "live" "hint" "res";justify-items:center}
html[data-l-app=wg-night] .stage > *{width:min(900px,100%)}
html[data-l-app=wg-night] .stage-head > :first-child{text-align:center}
html[data-l-app=wg-night] .stage-head h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem)}
html[data-l-app=wg-night] .passage{font-size:var(--t-xl)}
html[data-l-app=wg-night] .live{justify-content:space-around;padding-block:var(--s-4);border-block:1px solid var(--line)}
html[data-l-app=wg-night] .stat b{font-size:var(--t-3xl)}
/* top: the input first under the title, the passage under it, the live figures right of the title */
html[data-l-app=wg-top] .stage{grid-template-areas:"title" "live" "type" "pass" "hint" "res"}
@media (min-width:600px){html[data-l-app=wg-top] .stage{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title live" "type type" "pass pass" "hint hint" "res res";align-items:end}}
html[data-l-app=wg-top] .type-row{padding:var(--s-3);border-radius:var(--r-card);background:var(--sunk)}
/* tiles: the live figures as three big tiles across under the title */
html[data-l-app=wg-tiles] .live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
html[data-l-app=wg-tiles] .stat{justify-items:start;padding:var(--s-4);border-radius:var(--r-card);background:var(--wash)}
html[data-l-app=wg-tiles] .stat b{font-size:var(--t-3xl)}
/* bottom: the live figures in a band under the input */
html[data-l-app=wg-bottom] .stage{grid-template-areas:"title" "pass" "type" "live" "hint" "res"}
html[data-l-app=wg-bottom] .live{justify-content:flex-start;gap:var(--s-7);padding:var(--s-4) var(--s-5);border-radius:var(--r-card);background:var(--ink);color:var(--bg)}
html[data-l-app=wg-bottom] .stat{justify-items:start}
html[data-l-app=wg-bottom] .stat span{color:inherit;opacity:.75}
/* banner: the whole stage on an accent band (the passage stays on its card) */
html[data-l-app=wg-banner] .stage{padding:clamp(20px,4vw,48px);border-radius:var(--r-card);background:var(--accent);color:var(--on-accent)}
html[data-l-app=wg-banner] .stage :is(.kicker,.hint,.stat span){color:inherit}
html[data-l-app=wg-banner] .stage .kicker{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 45%,transparent)} /* the kicker chip on the accent banner: see-through, a thin ring (its --wash tint carried the on-accent text at 1.1:1) */
html[data-l-app=wg-banner] .stage .btn-primary{background:var(--on-accent);color:var(--accent)}
html[data-l-app=wg-banner] .stage .result{color:var(--ink)}
html[data-l-app=wg-banner] .stage .result .btn-primary{background:var(--accent);color:var(--on-accent)}
/* wide: the passage on a tinted band across the page */
html[data-l-app=wg-wide] .passage-wrap{padding-block:var(--s-6);background:var(--sunk);box-shadow:0 0 0 100vmax var(--sunk);clip-path:inset(0 -100vmax)}
html[data-l-app=wg-wide] .passage{font-size:var(--t-xl)}
@media (min-width:960px){
/* side: the test left, past runs in a right column */
html[data-l-app=wg-side] main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start;column-gap:var(--s-7)}
html[data-l-app=wg-side] .history{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-card);position:sticky;top:16px}
html[data-l-app=wg-side] main:not(:has(.history tbody tr,.history li)){grid-template-columns:minmax(0,1fr)} /* no past runs yet: stack, no empty side column (game_06) */
html[data-l-app=wg-side] main:not(:has(.history tbody tr,.history li)) .history{position:static}
/* rail: the live figures as a vertical column left of the passage and input */
html[data-l-app=wg-rail] .stage{grid-template-columns:200px minmax(0,1fr);column-gap:var(--s-7);grid-template-areas:"title title" "live pass" "live type" "live hint" "res res";align-items:start}
html[data-l-app=wg-rail] .live{flex-direction:column;gap:var(--s-5);padding-right:var(--s-5);border-right:1px solid var(--line)}
html[data-l-app=wg-rail] .stat{justify-items:start}
/* wide: the history as a table beside its chart */
html[data-l-app=wg-wide] .history{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s-7);align-items:start}
html[data-l-app=wg-wide] .hist-head{grid-column:1 / -1}
}