:root{color-scheme:light;--ground:#F5F7FB;--surface:#FFFFFF;--surface-2:#EEF1F6;--rule:#E3E8EE;--rule-strong:#8A93A3;--ink:#0E1116;--ink-2:#5B6472;--ink-3:#667085;--subject-blue:#2E55F5;--subject-forest:#2F6B3A;--subject-oxblood:#8C2F39;--subject-marine:#0B5CAD;--subject-teal:#1F6F78;--subject-slate:#3B465E;--on-subject:#FFFFFF;--subject-plum:#6B3E8C;--subject-amber:#8A5A00;--brand-navy:#031439;--brand-blue:#2E55F5;--accent:#2E55F5;--accent-bright:#1F3FD6;--accent-wash:rgba(46,85,245,.08);--on-accent:#FFFFFF;--marker:#FFE14D;--on-marker:#0E1116;--edge-blue:#1A33B5;--edge-white:#D3DAE6;--edge-marker:#C9A200;--good:#127556;--warn:#8A5A00;--bad:#A93C0A;--good-wash:rgba(18,117,86,.11);--warn-wash:rgba(138,90,0,.14);--bad-wash:rgba(169,60,10,.10);--shadow:0 1px 2px rgba(30,44,110,.04), 0 18px 40px -24px rgba(30,44,110,.28);--r-s:10px;--r:16px;--r-l:28px;--r-xl:36px;--f-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--f-serif:"Instrument Serif",Georgia,serif;--f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
:root[data-theme="dark"]{color-scheme:dark;--ground:#031439;--surface:#0A1E4A;--surface-2:#12295E;--rule:#20386F;--rule-strong:#6A80B3;--ink:#F0F4FC;--ink-2:#BCC8E6;--ink-3:#93A2C9;--subject-blue:#8098F9;--subject-forest:#7FC48C;--subject-oxblood:#F09AA3;--subject-marine:#7DB4F0;--subject-teal:#6FC6CE;--subject-slate:#B4BFD8;--on-subject:#031439;--subject-plum:#C9A6E8;--subject-amber:#E3B45C;--brand-navy:#031439;--brand-blue:#2E55F5;--accent:#8098F9;--accent-bright:#A8B8FB;--accent-wash:rgba(128,152,249,.16);--on-accent:#031439;--marker:#FFE14D;--on-marker:#0E1116;--edge-blue:#4A65D7;--edge-white:#20386F;--edge-marker:#C9A200;--good:#5CD3A0;--warn:#E0B040;--bad:#F4917A;--good-wash:rgba(92,211,160,.16);--warn-wash:rgba(224,176,64,.16);--bad-wash:rgba(244,145,122,.15);--shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -22px rgba(0,0,0,.8);}
*{box-sizing:border-box}html,body{margin:0}body{font:14px system-ui}img{max-width:100%}[hidden]{display:none!important}

/* Self-hosted OFL fonts (decisions 135/139/141/145; the faces are decision 1114's). No Google Fonts
   hot-link at runtime — apps/web serves these files itself (server.ts's /fonts route, the same
   validated-filename pattern as /brand/mark.*). font-display:swap avoids FOIT; the fallback stacks in
   the tokens are the real page fonts until each face loads. ONE BRAND ON EVERY SURFACE (decision 1114):
   Inter Tight for headings, Inter for text, Instrument Serif for a heading's one closing phrase. Each is
   the Latin subset, which covers NL, FR, DE and the euro; --f-mono is the system's, for inline code. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/inter/inter-var.woff2") format("woff2-variations")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fonts/inter-tight/inter-tight-var.woff2") format("woff2-variations")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/instrument-serif/instrument-serif-regular.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/fonts/instrument-serif/instrument-serif-italic.woff2") format("woff2")}


*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* The app runs edge to edge (`viewport-fit=cover`, apps/client/capacitor.config.ts): the ground
   reaches under the status bar and the home indicator, and the page keeps clear of them. A page
   without `viewport-fit=cover` — every web page — reads every inset as 0, so this is inert there. */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:3px}

.wrap{max-width:1400px;margin:0 auto;padding:clamp(1rem,3vw,2.5rem)}
.head{max-width:46rem;margin-bottom:1.8rem}
.eyebrow{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin:0 0 .8rem}
/* An eyebrow that is a link (the exam date above the exam's name, which opens the date) keeps the
   eyebrow's colour; its underline is what says it can be tapped. Without this it was browser blue. */
.eyebrow a,.eyebrow a:visited{color:inherit}
/* THE EXAM'S NAME IS HOW IT IS CHANGED, in the app (decision 1016): the page's title in its own ink,
   a chevron after it saying it opens something — a title that can be tapped, not a hyperlink. */
.head-switch{color:inherit;text-decoration:none}
.head-switch::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.35em;
  border-right:.11em solid var(--ink-3);border-bottom:.11em solid var(--ink-3);transform:translateY(-.22em) rotate(45deg)}
h1{font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;letter-spacing:-.025em;margin:0 0 .7rem;text-wrap:balance}
.sub{color:var(--ink-2);font-size:1.02rem;margin:0;max-width:38rem}

.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;align-items:start}
@media (min-width:1000px){.layout{grid-template-columns:20rem minmax(0,1fr)}}

/* The section nav as the rail.
   Added FROM the application, the way the skip link was: apps/web has seven destinations and the
   prototype's rail was drawn with controls in it. On a phone they stay the horizontal scrolling
   strip; from 1000px they become the rail, which is the column .layout was already reserving and
   which nothing was filling.
   Written as a descendant of .layout so a navstrip used anywhere else keeps its strip behaviour. */
@media (min-width:1000px){
  .layout > .navstrip{
    flex-direction:column;overflow-x:visible;margin:0;
    border-bottom:0;border-right:1px solid var(--rule);padding-right:1rem;
    position:sticky;top:1.5rem;
  }
  .layout > .navstrip a{padding:.45rem .6rem;border-radius:.35rem}
  .layout > .navstrip a[aria-current=page]{background:var(--surface-2)}
}

/* Measure. .wrap caps the PAGE at 1400px; running text still has to stop at something a person
   can read across. Without this the dashboard's prose ran the full width of the content column on
   a wide monitor — the failure the 44rem inline style on <body> had been hiding, and taking the
   whole responsive layout down with it.

   BOTH shells, because there are two. App screens put <main> inside .layout beside the rail;
   the public /examens/ pages have no rail and sit directly in .wrap. Scoping this to .layout
   alone fixed the dashboard and left the public pages running 1320px of prose at 2560 — the
   same defect, moved rather than removed. Only the railless one centres: beside a rail, centring
   would push the text away from the navigation it belongs to. */
.layout > main{max-width:46rem;min-width:0}
.wrap > main{max-width:46rem;min-width:0;margin-inline:auto}
/* THE STOREFRONT IS NOT A READING PAGE (owner, 8 September: «why is the page width not used
   completely?»). 46rem is the measure a syllabus chapter needs and it was capping the shop
   window too, so a 2000px screen showed a column of copy with the right half empty. A page that
   holds a hero, a catalogue grid and three method columns needs the width; the PARAGRAPHS inside
   it keep their own max-width, which is where the measure actually belongs. Browsers without
   :has() fall back to the 46rem column — the old layout, not a broken one. */
.wrap > main:has(> .sw){max-width:none}
/* ONE COLUMN, NOT TWO LEFT EDGES (decision 1005's UX pass). The app's <main> is the centred 46rem
   column above, but the page title (.head) and the four places (.navstrip) sat at the page's left
   edge — the title 200px left of the text it heads on a desktop. They share the column now. The
   storefront has neither, so it is unaffected. */
.wrap > .head,.wrap > .navstrip{max-width:46rem;margin-inline:auto}
.wrap > .head{margin-bottom:1.4rem}

/* control rail */
.rail{display:flex;flex-direction:column;gap:1rem}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:1rem 1.1rem 1.15rem}
/* A list of cards — the review of a mock handed in, one question per card — keeps them apart. */
.card + .card{margin-top:.9rem}
/* A glossary term in a question, and its definition opening where the word is (audit update B-4). The
   definition is hidden until it is opened: as a popover on the web — where a browser has none, the
   :popover-open rule below is dropped whole and it stays hidden — and in place in the app (.open). */
.gloss{color:inherit;text-decoration:underline dotted;text-underline-offset:.18em;cursor:pointer;background:none;border:0;padding:0;font:inherit}
.glossdef{display:none}
.glossdef:popover-open{display:block;max-width:min(26rem,calc(100vw - 2rem));margin:auto;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:var(--r-l);background:var(--surface);color:var(--ink);font-family:var(--f-body);font-size:1rem;font-weight:400;line-height:1.5}
.glossdef.open{display:block;margin:.45rem 0 .2rem;padding:.65rem .8rem;border-left:2px solid var(--accent-bright);background:var(--accent-wash);font-family:var(--f-body);font-size:.95rem;font-weight:400;line-height:1.5}
.card h3{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);margin:0 0 .8rem;font-weight:700}
/* Skip link. Added 1 September 2026 FROM the application rather than to it: apps/web had a
   working skip link and the prototype had none, so the design was missing something the product
   already did. Visible only on focus — it must not be furniture for people who do not need it. */
.saut{position:absolute;left:-9999px;top:0;padding:.6rem 1rem;background:var(--surface);
  color:var(--ink);border:1px solid var(--rule-strong);border-radius:.4rem;z-index:99}
.saut:focus{left:.5rem;top:.5rem}
.screens{display:flex;flex-direction:column;gap:.15rem}
.screens button{
  display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:none;border:none;
  border-left:2px solid var(--rule);padding:.5rem .6rem .5rem .7rem;cursor:pointer;
  font-family:var(--f-display);font-size:.85rem;font-weight:500;color:var(--ink-2);border-radius:0 3px 3px 0;
}
.screens button:hover{background:var(--accent-wash);color:var(--ink)}
.screens button[aria-current="true"]{border-left-color:var(--accent-bright);color:var(--ink);font-weight:600;background:var(--accent-wash)}
.screens button[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.screens button[aria-disabled="true"]:hover{background:none;color:var(--ink-2)}
.screens .n{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);min-width:1.1rem}
.locknote{font-size:.78rem;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--rule);margin:.8rem 0 0;padding-top:.7rem}
.locknote b{font-family:var(--f-display);font-weight:600}

.opt{display:flex;flex-direction:column;gap:.85rem}
.opt label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;font-size:.85rem;line-height:1.4}
.opt input{margin-top:.22rem;width:17px;height:17px;accent-color:var(--accent-bright);flex:none;cursor:pointer}
.opt b{font-family:var(--f-display);font-weight:600;display:block;font-size:.87rem}
.opt span{color:var(--ink-2);font-size:.8rem}
.opt label > span{display:flex;flex-direction:column;gap:.28rem}
.opt .rec{align-self:flex-start;font-family:var(--f-body);font-weight:700;font-size:.82rem;
  color:var(--accent-bright);border:1px solid var(--rule-strong);
  border-radius:var(--r-s);padding:.14rem .4rem;margin:.15rem 0 0;line-height:1.35}
.rec-note{font-size:.78rem;line-height:1.5;color:var(--ink-2);border-top:1px solid var(--rule);
  margin:.9rem 0 0;padding-top:.75rem}
.rec-note b{font-family:var(--f-display);font-weight:600}

.note{font-size:.82rem;line-height:1.5;color:var(--ink-2);margin:0}
.note + .note{margin-top:.6rem}
.note code{font-family:var(--f-mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--rule);border-radius:2px;padding:.05em .28em}

/* account.ts — a compact h2 that is neither h2.s nor h2.band, an inline muted aside, an inline
   form (a POST button sitting mid-sentence, not a block), a quoted consent and its orange note. */
h2.subhead{font-size:1rem;margin-top:1.4rem}
h2.subhead-lg{font-size:1.1rem}
.muted{color:var(--ink-2)}
.inline-form{display:inline}
.quote{border-left:3px solid var(--ink-2);padding-left:.8rem}
.warn-note{color:var(--warn)}

/* live facts about the selected exam — designer chrome, always French */
.facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem .8rem;margin:0;font-size:.8rem}
.facts dt{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);padding-top:.18rem}
.facts dd{margin:0;color:var(--ink-2);line-height:1.45}
.facts dd b{font-family:var(--f-display);color:var(--ink);font-weight:600}
.facts dd .flip{color:var(--bad);font-weight:600}
/* The facts as a page's own block, not a rail's aside: the mock's three rules (decision 1012). */
.facts.sheet{margin:1rem 0 1.1rem;padding:.85rem 1rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);font-size:.95rem;gap:.55rem 1rem}
.facts.sheet dt{font-size:.9rem;padding-top:.05rem}

/* phone */
.stage{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.phone{
  width:100%;max-width:400px;background:var(--surface);border:1px solid var(--rule-strong);
  border-radius:22px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
  min-height:720px;
}
.statusbar{
  display:flex;justify-content:space-between;align-items:center;padding:.55rem 1.1rem .3rem;
  font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);
}
.appbar{
  display:flex;align-items:center;gap:.7rem;padding:.5rem 1.1rem .8rem;border-bottom:1px solid var(--rule);
}
.appbar .back{font-family:var(--f-body);font-size:1rem;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:.3rem;min-width:34px}
.appbar .title{font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.appbar .right{margin-left:auto;font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3)}
/* THE NAVIGATION, added 1 September 2026.
   The prototype never had one: it is a single-screen mock with a back button, so `.appbar` covers
   a title and a back arrow and nothing else. The real product is eight destinations, and it was
   rendering them as a row of default-blue underlined links separated by middots — the browser's
   own styling, in the middle of a designed product.

   A scrolling tab strip rather than a wrapped list, because on a phone eight labels wrap to three
   ragged lines and the page starts with a paragraph of links instead of its heading. The current
   destination is marked with aria-current, which is what a screen reader announces AND what the
   style hangs off, so the two cannot disagree. */
/* WCAG 2.2 SC 2.5.8, target size. A link that stands ALONE — an eyebrow, a breadcrumb — is a
   target and must reach 24x24 CSS px. Links inline in a sentence are exempt, and are deliberately
   left alone: padding them out to 24px would wreck the line spacing of running text to satisfy a
   criterion that explicitly excludes them.
   Measured, not assumed: the branch page's back-link came out at 206x13. */
.lbl a, .breadcrumb a{
  display:inline-block;min-height:24px;line-height:24px;padding:0 .15rem;margin-left:-.15rem;
}

.navstrip{
  display:flex;gap:.1rem;overflow-x:auto;margin:0 0 1.25rem;padding:0;
  border-bottom:1px solid var(--rule);scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.navstrip::-webkit-scrollbar{display:none}
.navstrip a{
  flex:none;font-family:var(--f-display);font-size:.82rem;font-weight:600;letter-spacing:-.005em;
  color:var(--ink-3);text-decoration:none;white-space:nowrap;
  padding:.5rem .7rem .45rem;border-bottom:2px solid transparent;
}
.navstrip a:hover{color:var(--ink-2)}
/* The current page. Colour AND a rule, so it is not carried by hue alone. */
.navstrip a[aria-current="page"]{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}
.navstrip a:focus-visible{outline:2px solid var(--accent-bright);outline-offset:-3px;border-radius:3px}
/* THE BOTTOM TAB BAR (decision 1006, direction C1). On a phone the four places leave the top of
   the page for a white bar along the bottom — an icon above each label, the current one in the
   accent — where a thumb reaches them. Above the phone width the icons are not drawn and the bar is
   the tab strip above. The page keeps room at its foot for the bar, except while a question is in
   progress (.qtop), when the bar steps aside. */
.navstrip svg{display:none}
@media (max-width:700px){
  .wrap > .navstrip{position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:none;margin:0;
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;overflow:visible;
    background:var(--surface);border-top:1px solid var(--rule);border-bottom:0;
    padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom))}
  .wrap > .navstrip a{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.2rem;min-height:54px;padding:.2rem;border-bottom:0;font-family:var(--f-body);
    font-size:.8125rem;font-weight:600;color:var(--ink-2);white-space:nowrap}
  .wrap > .navstrip a[aria-current="page"]{color:var(--accent);font-weight:700;border-bottom-color:transparent}
  .wrap > .navstrip svg{display:block;width:24px;height:24px}
  body:has(.wrap > .navstrip):not(:has(.qtop)){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* WCAG 2.2 SC 2.4.13, focus appearance. The browser default is a thin ring that all but vanishes
   against this dark ground, and only the nav strip had been given one — so a keyboard user could
   tab through the whole product without knowing where they were. Two pixels, offset so it sits
   outside the control rather than eating into it, in the accent that already carries emphasis. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:3px;
}
.choice:focus-visible{outline-offset:-2px}

/* The exam being prepared, above the strip: which product you are in, and how long is left. */
.appstrip{
  display:flex;align-items:baseline;gap:.6rem;padding:.1rem 0 .55rem;flex-wrap:wrap;
}
.appstrip .who{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink)}
.appstrip .when{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);margin-left:auto}

.screen{padding:1.1rem 1.15rem 1.4rem;flex:1;display:none;flex-direction:column}
.screen[data-active="true"]{display:flex}

h2.s{font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.2;letter-spacing:-.015em;margin:0 0 .5rem;text-wrap:balance}
/* The second language, on its own line. Widened 1 September 2026 from `h2.s .alt` because the
   door — the one screen where the visitor's language is not yet known, so everything is said
   twice — needs it on its h1 and on its body copy too. Scoped to `.s` rather than made global:
   Then widened again, to any `.alt`: it turned out to be used in .pickstate and .pickhint as
   well, and scoping it to .s was me guessing at the pattern's edges instead of looking. The
   pattern is "the same thing in the other language, on its own line", wherever that happens.
   Found by rendering it: the two languages ran together as "geen puntLes examens qui...". */
.alt{display:block;font-weight:500;color:var(--ink-3);margin-top:.15rem}
h2.s .alt,h1.s .alt{font-size:1.02rem}
p.s .alt{font-size:.95rem;margin-top:.4rem}
.pickstate .alt,.pickhint .alt{font-size:.9rem;margin-top:.1rem}
p.s{font-size:.95rem;line-height:1.55;color:var(--ink-2);margin:0 0 1rem}
/* A SECOND SECTION ON A PAGE THAT ALREADY HAS A SUBJECT — «Sessions réelles» and «Vorige
   examens» on Proefexamens, where the mock runner is the page and each of these opens a band
   underneath it. Smaller than `h2.s`, because it is not a second subject; spaced above,
   because the thing it separates is the thing above it. It replaces the one inline style that
   said exactly this in two places and could not be found from here (#447 lane 2). */
/* `band` is also the readiness pill's class (.band below: a border, padding, a small bold face),
   and a section heading was drawn as a button-shaped pill. The heading undoes what it inherits. */
h2.band{display:block;border:0;padding:0;background:none;color:var(--ink);
  font-family:var(--f-display);font-weight:600;font-size:1.1rem;line-height:1.25;
  margin:2rem 0 .5rem}
.lbl{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin:0 0 .5rem}
.lbl.mid{margin-top:.35rem}

.btn{
  display:block;width:100%;min-height:52px;border-radius:var(--r);border:1px solid var(--accent);
  background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-weight:700;font-size:1.05rem;
  cursor:pointer;padding:.7rem 1rem;margin-top:auto;
}
/* A .btn that is a LINK. The prototype only ever put this class on <button>, because in a
   single-page mock every action was a script. In the real application the primary action on a page
   is usually a navigation — "réviser maintenant", "question suivante" — and an <a> is the correct
   element for it: it is what makes middle-click, back and "open in new tab" work. Without this it
   rendered as a blue underlined link sitting inside a filled button.
   Found by rendering the dashboard. */
a.btn{text-align:center;text-decoration:none;box-sizing:border-box}
a.btn:visited{color:var(--on-accent)}
.btn.ghost{background:none;color:var(--accent);border-color:var(--rule-strong);margin-top:.55rem}
/* A variant with a text colour of its own keeps it once visited: a.btn:visited outranks the variant,
   and turned a visited ghost or quiet link white on its own pale ground. */
a.btn.ghost:visited{color:var(--accent)}
/* Hover (decision 1005): the filled button darkens to --accent-bright, as .sw-cta already did; a
   ghost button takes the wash, as every other hoverable control here does. */
.btn:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.btn.ghost:hover{background:var(--accent-wash);border-color:var(--accent-bright)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-inline{margin-top:1rem}

/* choice list */
.choices{display:flex;flex-direction:column;gap:.6rem;margin:0 0 1rem}
.choice{
  display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;
  min-height:60px;padding:.75rem 1rem;border:1.5px solid var(--rule-strong);border-radius:var(--r);
  background:var(--surface);cursor:pointer;font-family:var(--f-body);font-size:1.1rem;line-height:1.45;color:var(--ink);
}
.choice:hover{border-color:var(--accent-bright);background:var(--accent-wash)}
.choice .key{
  font-family:var(--f-body);font-size:.82rem;font-weight:600;color:var(--ink-3);
  border:1px solid var(--rule-strong);border-radius:var(--r-s);min-width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;flex:none;margin-top:.1rem;
}
.choice[data-state="correct"]{border:2.5px solid var(--good);background:var(--surface)}
.choice[data-state="correct"] .key{border-color:var(--good);color:var(--good)}
/* DIRECTION C1 (decision 1006): the learner's wrong answer is struck through on a dashed outline,
   not filled red — the correction is about the answer, and red fill on a wrong answer is also the
   one state colour alone would carry. */
.choice[data-state="wrong"]{border:1.5px dashed var(--bad);background:none;color:var(--ink-2)}
.choice[data-state="wrong"] .key{border-color:var(--bad);color:var(--bad)}
.choice[data-state="wrong"] .key + span{text-decoration:line-through;text-decoration-color:var(--bad)}
/* CHOOSE, THEN CHECK (C1). An option is a label around a radio drawn as C1's ring: a 26px circle
   that fills to a thick accent ring when chosen, and the chosen option's outline turns accent. */
label.choice{align-items:center}
.choice input[type="radio"]{-webkit-appearance:none;appearance:none;flex:none;width:26px;height:26px;
  margin:0;border:2px solid var(--rule-strong);border-radius:50%;background:var(--surface);cursor:pointer}
.choice input[type="radio"]:checked{border:7px solid var(--accent)}
label.choice:has(input:checked){border:2.5px solid var(--accent);font-weight:600}
label.choice:has(input:focus-visible){outline:2px solid var(--accent-bright);outline-offset:2px}
.choice input[type="radio"]:focus-visible{outline:none}
/* «Weet ik niet»: the second action, quiet under «Controleer mijn antwoord». */
.btn.quiet{background:none;border-color:transparent;color:var(--ink-2);font-family:var(--f-body);font-weight:600;margin-top:.3rem}
a.btn.quiet:visited{color:var(--ink-2)}
.btn.quiet:hover{background:var(--accent-wash);border-color:transparent}
.choice .mark{margin-left:auto;font-family:var(--f-body);font-size:.8rem;font-weight:600;flex:none;padding-left:.4rem}
.choice[data-state="correct"] .mark{color:var(--good)}
.choice[data-state="wrong"] .mark{color:var(--bad)}
.choice[aria-pressed="true"]{border-color:var(--accent-bright);background:var(--accent-wash)}
.peer{margin-left:auto;font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);flex:none;padding-left:.4rem}

/* exam picker — same choice chrome, two extra slots */
.pick{align-items:center}
.pickname{display:flex;flex-direction:column;gap:.16rem;min-width:0;font-size:.98rem;line-height:1.28}
.pickname b{font-family:var(--f-display);font-weight:600;letter-spacing:-.005em}
.pickmeta{font-size:.775rem;line-height:1.4;color:var(--ink-2)}
.pickreq{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3)}
.picklang{margin-left:auto;align-self:center;flex:none;font-family:var(--f-body);font-size:.82rem;
  color:var(--ink-3);border:1px solid var(--rule);border-radius:var(--r-s);padding:.1rem .34rem}
.pick[aria-pressed="true"] .picklang{color:var(--accent-bright);border-color:var(--accent-bright)}
/* THE LANGUAGE CHOICE ON A CARD (decision 1011): where an exam is sold in two languages the card
   ends in a button per language, each one tap; one language, and the card itself is the button. */
.choice.pick:has(.picklangs){flex-wrap:wrap;cursor:default}
.choice.pick:has(.picklangs):hover{border-color:var(--rule-strong);background:var(--surface)}
.picklangs{display:flex;gap:.5rem;flex-basis:100%;margin-top:.35rem}
.picklangs .btn{flex:1;width:auto;min-height:44px;margin:0}
.ladder{display:flex;flex-direction:column;gap:.5rem;margin:0 0 .9rem}
.sidebranch{margin:0 0 1rem}
.rung[data-held="true"]{opacity:.6;border-style:dashed}
.rung[data-held="true"] .key{color:var(--good);border-color:var(--good)}
.pickhint{font-size:.84rem;line-height:1.5;color:var(--ink-2);margin:0 0 .6rem}
.pickstate{border:1px solid var(--rule-strong);border-left:3px solid var(--warn);background:var(--warn-wash);
  border-radius:0 var(--r) var(--r) 0;padding:.7rem .85rem;margin:.2rem 0 .9rem;font-size:.86rem;line-height:1.5}
.pickstate b{font-family:var(--f-display);display:block;margin-bottom:.2rem}

.stem{font-family:var(--f-display);font-size:1.45rem;line-height:1.28;margin:.4rem 0 1.4rem;font-weight:600;letter-spacing:-.01em;text-wrap:pretty}
/* The picture a question is about — a statutory plate, a species photograph — shown above the
   stem at its own size, never wider than the column. White behind it in both themes: the plates
   are the examiner's PNGs and several are transparent, so a dark ground would invert a sign. */
/* MATCHING (ADR-0066): a set's pairs, prompts left and answers right; tap one of each to pair them.
   A tile picked waits in the accent wash; a wrong pairing takes the wrong answer's dashed outline
   until the next tap; a matched pair settles into the good colour and steps back. */
.match{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 1rem}
.match-col{display:grid;grid-auto-rows:1fr;gap:.6rem;min-width:0}
.match-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  min-height:60px;padding:.6rem .7rem;border:1.5px solid var(--rule-strong);border-radius:var(--r);
  background:var(--surface);cursor:pointer;font-family:var(--f-body);font-size:1rem;line-height:1.35;
  color:var(--ink);text-align:center;overflow-wrap:anywhere}
.match-tile:hover{border-color:var(--accent-bright);background:var(--accent-wash)}
.match-tile:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}
.match-tile[aria-pressed="true"]{border:2.5px solid var(--accent);background:var(--accent-wash);font-weight:600}
.match-tile[data-state="wrong"]{border:1.5px dashed var(--bad);background:none;color:var(--ink-2)}
.match-tile[data-state="done"]{border:1.5px solid var(--good);background:none;color:var(--ink-3);cursor:default}
.match-tile:disabled:hover{border-color:var(--good);background:none}
/* On the web the tiles are labels round a radio (no script needed to pick one): the radio is hidden,
   and a picked tile takes the same accent as a pressed one. */
.match-tile{position:relative}
.match-tile input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
label.match-tile:has(input:checked){border:2.5px solid var(--accent);background:var(--accent-wash);font-weight:600}
label.match-tile:has(input:focus-visible){outline:2px solid var(--accent-bright);outline-offset:2px}
.match-pic{display:block;max-width:100%;max-height:22vh;height:auto;background:#fff;border-radius:var(--r-s)}
.match-missed{margin:0 0 1rem;padding-left:1.1rem;line-height:1.5}
.stimulus{margin:0 0 1rem}
.stimulus img{display:block;max-width:100%;max-height:60vh;height:auto;padding:.4rem;background:#fff;border:1px solid var(--rule);border-radius:var(--r)}
/* A picture's credit (title, author, licence) under it: owed wherever a CC BY picture is shown. */
.stimulus figcaption{font-family:var(--f-body);font-size:.82rem;line-height:1.45;color:var(--ink-3);margin:.35rem 0 0}
.qmeta{display:flex;gap:.5rem;align-items:center;margin:0 0 .9rem;flex-wrap:wrap}
.tag{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);border:1px solid var(--rule);border-radius:var(--r-s);padding:.15rem .38rem}

.explain{border-left:2px solid var(--accent-bright);background:var(--accent-wash);padding:.8rem .9rem;border-radius:0 var(--r) var(--r) 0;margin:0 0 1rem}
.explain h4{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);margin:0 0 .45rem;font-weight:700}
.explain p{margin:0 0 .55rem;font-size:.9rem;line-height:1.5}
.explain p:last-child{margin:0}
.explain .why{color:var(--ink-2);font-size:.86rem}
.explain .cite{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3)}
/* WHAT THE ANSWER IS WORTH ON THE EXAM (mobile-learn-fit-gap §1): «+1 point», «−0.5 point», «0 points
   on the exam», by the exam's own marking — said beside the verdict, in its colour, never alone. */
.exampoints{font-family:var(--f-body);font-weight:700;font-size:.86rem;color:var(--ink-2)}
.exampoints[data-sign="plus"]{color:var(--good)}
.exampoints[data-sign="minus"]{color:var(--bad)}

/* THE SESSION RECAP'S THREE FIGURES (mobile-learn-fit-gap §1, «Lesson recap»): right answers, net points
   on the exam's marking, study days this week — never a streak. Three cards in a row at any width. */
.recap-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1rem 0 1.4rem}
.recap-tile{display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.8rem .5rem;text-align:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.recap-tile b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;line-height:1.1}
.recap-tile span{font-size:.78rem;color:var(--ink-2)}

/* «YOUR PLAN»'S WEEK (mobile-learn-fit-gap §1): Monday to Sunday, a day studied filled in the accent,
   today ringed, the days ahead faint. Neutral: a day not studied is plain, never red. */
.weekstrip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.35rem;list-style:none;margin:.4rem 0 1.4rem;padding:0}
.weekstrip li{display:flex;flex-direction:column;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;color:var(--ink-2)}
.weekday{display:flex;align-items:center;justify-content:center;width:100%;max-width:40px;aspect-ratio:1;box-sizing:border-box;
  border-radius:var(--r-s);background:var(--surface-2);color:var(--on-accent);font-weight:800}
.weekstrip li[data-state="studied"] .weekday{background:var(--accent)}
.weekstrip li[data-state="today"] .weekday{background:var(--surface);box-shadow:inset 0 0 0 2px var(--ink)}
.weekstrip li[data-state="ahead"] .weekday{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}

/* marking advice — advice, not a settings row */
.advice{border:1px solid var(--rule-strong);border-left:3px solid var(--warn);background:var(--warn-wash);
  border-radius:0 var(--r) var(--r) 0;padding:.85rem .9rem;margin:0 0 1rem}
.advice h4{font-family:var(--f-display);font-size:.98rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .4rem}
.advice p{margin:0 0 .55rem;font-size:.9rem;line-height:1.55;color:var(--ink)}
.advice .cite{font-family:var(--f-body);font-size:.82rem;line-height:1.45;color:var(--ink-3);margin:0}

.conf{display:flex;gap:.5rem;margin:0 0 1rem}
.conf button{
  flex:1;min-height:44px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);
  font-family:var(--f-display);font-weight:500;font-size:.85rem;color:var(--ink-2);cursor:pointer;
}
.conf button[aria-pressed="true"]{border-color:var(--accent-bright);background:var(--accent-wash);color:var(--ink);font-weight:600}
.conf button:disabled{opacity:.4;cursor:not-allowed}

.progressline{height:4px;background:var(--rule);border-radius:2px;overflow:hidden;margin:0 0 .9rem}
.progressline i{display:block;height:100%;background:var(--accent-bright)}
/* THE FOCUS ROW (C1): out, progress, count. Where it is on the page, the page is a question in
   progress — the header, the four places, the page title and the footer step aside until it is
   answered and left. Browsers without :has() keep them, which is the old page, not a broken one. */
.qtop{display:flex;align-items:center;gap:.75rem;margin:0 0 1.4rem}
.qtop .progressline{flex:1;height:8px;border-radius:4px;margin:0}
.qtop .progressline i{border-radius:4px;background:var(--accent)}
.qclose{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
  margin-left:-10px;border-radius:50%;font-size:1.7rem;line-height:1;color:var(--ink);text-decoration:none}
.qclose:hover{background:var(--accent-wash)}
.qcount{margin-left:auto;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.wrap:has(.qtop) > .chrome,.wrap:has(.qtop) > .appstrip,.wrap:has(.qtop) > .navstrip,.wrap:has(.qtop) > .head,
.wrap:has(.qtop) > .foot{display:none}

/* results */
.scorebig{font-family:var(--f-display);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.03em;margin:0}
.scoresub{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);margin:.3rem 0 0}
.bars{display:flex;flex-direction:column;gap:.75rem;margin:1.2rem 0}
.bar b{font-family:var(--f-display);font-size:.85rem;font-weight:600;display:block;margin-bottom:.28rem}
.bar .track{position:relative;height:22px;background:var(--surface-2);border:1px solid var(--rule);border-radius:var(--r-s);overflow:hidden}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent-bright);opacity:.75}
.bar .fill.ok{background:var(--good)}
.bar .fill.no{background:var(--bad)}
.bar .thresh{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.85}
.bar .cap{display:flex;justify-content:space-between;gap:.6rem;font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);margin-top:.22rem}
.bar .cap .binding{color:var(--bad);font-weight:600}
.bar .cap .n{color:var(--ink-3);opacity:.8}
.bar .track.thin .fill{opacity:.4}
.bar .track.under{border-color:var(--bad)}
.caveat{font-size:.82rem;line-height:1.5;color:var(--ink-2);border-left:2px solid var(--rule-strong);
  padding-left:.7rem;margin:0 0 1.1rem}

.planbox{border:1px solid var(--rule);border-radius:var(--r);padding:.85rem .9rem;background:var(--surface-2);margin:0 0 1rem}
.planbox p{margin:0;font-size:.9rem;line-height:1.5}
.planbox b{font-family:var(--f-display)}

.field{margin:0 0 .8rem}
.field label{display:block;font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin-bottom:.35rem}
.field input{width:100%;min-height:48px;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);padding:.6rem .75rem;font-family:var(--f-body);font-size:1rem;color:var(--ink)}
.check{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;line-height:1.45;color:var(--ink-2);margin:0 0 1rem}
.check input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--accent-bright)}

.paywall{border:1px solid var(--rule-strong);border-radius:var(--r-l);padding:1rem;background:var(--surface-2)}
.price{font-family:var(--f-display);font-weight:700;font-size:1.8rem;letter-spacing:-.02em;margin:0}
.price.unset{font-size:1.25rem;color:var(--ink-2)}
.pricesub{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);margin:.2rem 0 .8rem}
.ticks{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.ticks li{font-size:.87rem;padding-left:1.1rem;position:relative;color:var(--ink-2)}
.ticks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-family:var(--f-body);font-size:.85em}
.pay{display:flex;gap:.4rem;align-items:center;font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);margin-top:.7rem;flex-wrap:wrap}
.pay span{border:1px solid var(--rule);border-radius:var(--r-s);padding:.12rem .35rem}

/* today */
.today-hero{border:1px solid var(--rule);border-radius:var(--r-l);padding:.95rem 1rem;background:var(--surface-2);margin:0 0 1rem}
.countdown{font-family:var(--f-display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin:0}
.band{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-body);font-size:.82rem;font-weight:700;padding:.2rem .45rem;border-radius:var(--r-s);border:1px solid;margin-top:.55rem}
.band.mid{color:var(--warn);background:var(--warn-wash);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}
.bandcap{font-size:.83rem;line-height:1.5;color:var(--ink-2);margin:.5rem 0 0}
.rowlink{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;min-height:56px;padding:.7rem .85rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);cursor:pointer;margin-bottom:.55rem;font-family:var(--f-body)}
.rowlink:hover{border-color:var(--accent-bright);background:var(--accent-wash)}
.rowlink b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;color:var(--ink)}
.rowlink span{display:block;font-size:.82rem;color:var(--ink-2)}
.rowlink .chev{margin-left:auto;color:var(--ink-3);font-family:var(--f-body)}
/* THE LEARN PATH (docs/design/learn-path.md): a subject in its own colour (D7) — the catalogue's
   presentation/subject-colours.json names the token, `data-colour` carries it, and a subject with
   none is drawn in the accent. Its chapters, and in each the lessons: a node per lesson, filled once
   done, ringed in the accent where START is. The review bar sits above it all. */
.path-subject{--subj:var(--accent);margin:0 0 1.4rem}
.path-subject[data-colour="blue"]{--subj:var(--subject-blue)}
.path-subject[data-colour="forest"]{--subj:var(--subject-forest)}
.path-subject[data-colour="oxblood"]{--subj:var(--subject-oxblood)}
.path-subject[data-colour="marine"]{--subj:var(--subject-marine)}
.path-subject[data-colour="teal"]{--subj:var(--subject-teal)}
.path-subject[data-colour="slate"]{--subj:var(--subject-slate)}
.path-head{display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:baseline;margin:0 0 .35rem;padding:.6rem .85rem;
  border-radius:var(--r);background:var(--subj);color:var(--on-subject);font-family:var(--f-display);font-size:1.05rem;font-weight:600}
.path-head span:first-child{font-family:var(--f-body);font-size:.82rem;font-weight:700}
.path{list-style:none;margin:0;padding:0}
.path-chapter{margin:.85rem 0 0}
.path-chapter .lbl{margin:0 0 .2rem}
.lesson{display:flex;align-items:center;gap:.75rem;min-height:52px;padding:.4rem .55rem;border-radius:var(--r);color:var(--ink);text-decoration:none}
.lesson:hover{background:var(--accent-wash)}
.lesson b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;color:var(--subj)}
.lesson small{display:block;font-size:.82rem;color:var(--ink-2)}
.lesson-node{flex:0 0 auto;width:28px;height:28px;box-sizing:border-box;border-radius:50%;border:2px solid var(--rule-strong);background:var(--surface)}
.lesson[data-kind="match"] .lesson-node{border-radius:8px}
.lesson[data-state="done"] .lesson-node{background:var(--subj);border-color:var(--subj)}
.lesson[data-state="now"] .lesson-node{width:34px;height:34px;background:var(--subj);border-color:var(--subj);outline:3px solid var(--accent);outline-offset:3px}
.reviewbar{border-color:var(--accent-bright)}
/* «THE SHORT VERSION» (D10): a missed section's summary, as the factory marked it, above the question
   where practice in its part is not working — the book's own words, in a card, the chapter a tap away. */
.short-version{margin:.4rem 0 1rem;padding:.8rem 1rem;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.short-version .lbl{margin:0 0 .2rem}
.short-version .note{margin:0 0 .4rem}
.short-version ul{margin:.2rem 0 .4rem;padding-left:1.2rem}
.short-version p:last-child{margin:0}
/* THE SUBJECTS SHEET (mobile-learn-fit-gap §1): each subject against its own minimum, opened from Learn
   and leading down to that subject on the path. A <details>, so it opens with no script on the web. */
.subjects-sheet{margin:0 0 1rem}
.subjects-sheet > summary{list-style:none}
.subjects-sheet > summary::-webkit-details-marker{display:none}
.subjects-sheet[open] > summary .chev{transform:rotate(90deg)}
.subject-rows{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.subject-row{--subj:var(--accent);display:flex;align-items:center;gap:.75rem;padding:.6rem;border:2px solid var(--rule);
  border-radius:var(--r);background:var(--surface);color:var(--ink);text-decoration:none}
.subject-row[aria-current]{border-color:var(--ink)}
.subject-row[data-colour="blue"]{--subj:var(--subject-blue)}
.subject-row[data-colour="forest"]{--subj:var(--subject-forest)}
.subject-row[data-colour="oxblood"]{--subj:var(--subject-oxblood)}
.subject-row[data-colour="marine"]{--subj:var(--subject-marine)}
.subject-row[data-colour="teal"]{--subj:var(--subject-teal)}
.subject-row[data-colour="slate"]{--subj:var(--subject-slate)}
.subject-badge{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;
  background:var(--subj);color:var(--on-subject);font-family:var(--f-display);font-weight:700}
.subject-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.subject-line{display:flex;justify-content:space-between;gap:.5rem;font-size:.95rem}
.subject-line b{font-family:var(--f-display);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subject-line span{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.subject-row[data-below] .subject-line span{color:var(--bad)}
.subject-track{position:relative;display:block;height:8px;border-radius:999px;background:var(--surface-2)}
.subject-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--subj)}
.subject-min{position:absolute;top:-3px;width:2px;height:14px;background:var(--ink)}
.subject-body small{font-size:.8rem;color:var(--ink-2)}
/* THE EXAM SWITCHER (mobile-learn-fit-gap §1): the exam's name on Learn opens the learner's exams, each
   with its date and pace, the one being prepared ticked, and «Add an exam». A <details>, as above. */
/* AN EXAM FAMILY'S TILE (D9): its line icon on its colour — the catalogue's family names the colour
   (packages/content/presentation/family-identity.json), the icon is drawn in currentColor. */
.exam-icon{--fam:var(--accent);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  box-sizing:border-box;border-radius:9px;background:var(--fam);color:var(--on-subject)}
.exam-icon svg{width:22px;height:22px}
.exam-row .exam-icon{width:44px;height:44px;border-radius:12px}
.exam-row .exam-icon svg{width:28px;height:28px}
.exam-icon[data-colour="blue"]{--fam:var(--subject-blue)}
.exam-icon[data-colour="forest"]{--fam:var(--subject-forest)}
.exam-icon[data-colour="oxblood"]{--fam:var(--subject-oxblood)}
.exam-icon[data-colour="marine"]{--fam:var(--subject-marine)}
.exam-icon[data-colour="teal"]{--fam:var(--subject-teal)}
.exam-icon[data-colour="slate"]{--fam:var(--subject-slate)}
.exam-icon[data-colour="plum"]{--fam:var(--subject-plum)}
.exam-icon[data-colour="amber"]{--fam:var(--subject-amber)}
.exams-sheet{margin:0 0 .6rem}
.exams-sheet > summary{list-style:none;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;cursor:pointer;
  font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--ink)}
.exams-sheet > summary::-webkit-details-marker{display:none}
.exams-sheet > summary .chev{color:var(--ink-3)}
.exams-sheet[open] > summary .chev{transform:rotate(180deg)}
.exam-rows{display:flex;flex-direction:column;gap:.45rem;margin:.3rem 0 .9rem}
.exam-rows h2{margin:0 0 .1rem;font-family:var(--f-display);font-size:1.15rem}
.exam-rows form{margin:0}
.exam-row{display:flex;align-items:center;gap:.75rem;width:100%;box-sizing:border-box;min-height:56px;margin:0;padding:.7rem .85rem;
  border:2px solid var(--rule);border-radius:var(--r);background:var(--surface);color:var(--ink);text-align:left;
  font:inherit;text-decoration:none;cursor:pointer}
.exam-row:hover{border-color:var(--accent-bright)}
.exam-row[aria-current]{border-color:var(--ink);cursor:default}
.exam-row b{display:block;font-family:var(--f-display);font-weight:700;font-size:1rem}
.exam-row small{display:block;font-size:.82rem;color:var(--ink-2)}
.exam-row .tick{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:800}
.exam-row.add{border-style:dashed;color:var(--ink-2)}

/* A MOCK THAT MAY BE GONE BACK THROUGH (D6; docs/design/mock-navigation.md §2): the paper's questions as
   a strip — the reglement's «inhoudstafel» — answered filled, blank dashed, flagged with a corner of the marker's yellow;
   previous, next and the hand-in in a row; the flag under the answer. 44px targets throughout. */
.papernav ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:1.2rem 0 .6rem;padding:0}
.papernav-q{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;
  box-sizing:border-box;border:2px solid var(--rule-strong);border-radius:var(--r-s);background:var(--surface);
  color:var(--ink);font-family:var(--f-body);font-weight:700;font-size:.9rem;text-decoration:none}
.papernav-q:hover{background:var(--accent-wash)}
.papernav-q[data-state="answered"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.papernav-q[data-state="blank"]{border-style:dashed}
.papernav-q[data-flagged]::after{content:"";position:absolute;top:-2px;right:-2px;width:12px;height:12px;
  border-radius:0 var(--r-s) 0 6px;background:var(--marker);box-shadow:0 0 0 2px var(--ink)}
.papernav-q[aria-current="step"]{outline:3px solid var(--ink);outline-offset:2px}
.papersteps{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.papersteps .btn{display:flex;align-items:center;justify-content:center;flex:1 1 0;width:auto;min-width:6.5rem;margin-top:0;
  border-color:var(--rule-strong)}
.papernav + .note{margin:0 0 1rem}
.paperflag{margin:.4rem 0 0}
.paperflag .btn[aria-pressed="true"]{background:var(--marker);color:var(--on-marker)}

/* THE NEXT STEP (decision 1010): the first thing on the home screen, one card with one primary
   button and at most one quieter alternative under it (C1's white card). */
.nextstep{display:flex;flex-direction:column;gap:.45rem;margin:0 0 1.6rem;padding:1.2rem 1.25rem 1.3rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l)}
.nextstep .lbl{margin:0;color:var(--accent-bright)}
.nextstep h2.s{margin:0;font-size:1.45rem;line-height:1.2}
.nextstep p.s{margin:0 0 .35rem}
.nextstep .btn{margin-top:.2rem}
.nextstep .btn.ghost{margin-top:.1rem}
.queue{font-family:var(--f-body);font-size:.82rem;color:var(--ink-2);margin:.9rem 0 0}
.queue b{color:var(--good)}

/* callouts under phone */
.decision{max-width:400px;width:100%;font-size:.82rem;line-height:1.5;color:var(--ink-2);background:var(--surface);border:1px solid var(--rule);border-left:2px solid var(--accent-bright);border-radius:0 var(--r) var(--r) 0;padding:.75rem .9rem}
.decision b{font-family:var(--f-display);color:var(--ink);display:block;margin-bottom:.25rem;font-size:.85rem}

.placeholder{font-family:var(--f-body);font-size:.82rem;line-height:1.55;color:var(--ink-3);text-align:center;margin:.4rem 0 0}
.placeholder.left{text-align:left}

/* ─────────────────────────────────────────────────────────────────────────────
   STRUCTURE v3 (issue #440, decision 132). Added, never altered: every rule below
   introduces a class the design had no opinion about. Nothing above this comment
   changed value, because apps/web serves this file as its stylesheet.

   What needed new rules: the header chrome (brand, exam switcher, avatar menu),
   the public shop window and catalogue, and the PLAN — the syllabus spine that
   became the exam centre's home surface when «Vandaag» stopped being a place.
   ───────────────────────────────────────────────────────────────────────────── */

/* The chrome. Ten of ten benchmarked products keep the account out of the primary
   bar and behind a corner control; the exam being prepared is a switcher here, not
   a tab. Both menus are the same panel, opened from different corners. */
.chrome{display:flex;align-items:center;gap:.8rem;padding:.6rem 0 .7rem;border-bottom:1px solid var(--rule);margin:0 0 1.1rem;flex-wrap:wrap}
.chrome-brand{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.chrome-logo{height:2rem;display:block}
/* decision 271: the wordmark's navy letters vanish on the dark ground, so the header carries a
   white-lettered copy and each theme shows its own. Only when both exist (chrome.ts). */
.chrome-logo-dark{display:none}
:root[data-theme="dark"] .chrome-logo-light{display:none}
:root[data-theme="dark"] .chrome-logo-dark{display:block}
.chrome-slot{position:relative;display:inline-flex}
.chrome-slot + .chrome-slot{margin-left:.4rem}
.chrome-exam{display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:.3rem .6rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);font-family:var(--f-display);font-weight:600;font-size:.84rem;color:var(--ink);cursor:pointer}
.chrome-exam:hover{border-color:var(--accent-bright);background:var(--accent-wash)}
/* The public header: one button and one link (decision 1012). */
.chrome-link{display:inline-flex;align-items:center;min-height:44px;padding:0 .45rem;font-family:var(--f-display);font-weight:600;font-size:.88rem;color:var(--ink);text-decoration:none}
.chrome-link:hover{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}
.chrome-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 .9rem;border:1px solid var(--accent);border-radius:var(--r);background:var(--accent);font-family:var(--f-display);font-weight:700;font-size:.88rem;color:var(--on-accent);text-decoration:none;white-space:nowrap}
.chrome-cta:visited{color:var(--on-accent)}
.chrome-cta:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
/* On a phone the pair stays on the logo's row: tighter type, and the link wraps before it overflows. */
@media (max-width:600px){
  .chrome:has(.chrome-cta){flex-wrap:nowrap;gap:.5rem}
  .chrome:has(.chrome-cta) .chrome-brand{flex-shrink:0}
  .chrome:has(.chrome-cta) .chrome-logo{height:1.6rem}
  .chrome:has(.chrome-cta) .chrome-right{flex-wrap:nowrap;gap:.15rem}
  .chrome-link{font-size:.8rem;padding:0 .35rem;line-height:1.15;text-align:right;min-width:0}
  .chrome-cta{font-size:.8rem;padding:0 .7rem}
}
/* THE SITE'S PAGES, IN THE BAR (decision 1020). Beside the wordmark; on a phone, behind the burger (./site.css, at
   860px). They had a row of their own under the wordmark at 900px and below, which the burger replaced: between the
   two the menu kept its place at the end of the row without the row, after «Sign in» and «Get the app». */
.chrome-nav{display:flex;align-items:center;gap:.15rem;margin-left:1.1rem}
.chrome-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .65rem;border-radius:var(--r-s);font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--ink-2);text-decoration:none}
.chrome-nav a:hover{color:var(--ink);background:var(--accent-wash)}
.chrome-nav a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
/* WHO IS SIGNED IN, at the head of the account menu (decision 1020). */
.chrome-menu-who{margin:0;padding:.45rem .55rem;font-family:var(--f-display);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.chrome-menu-who small{display:block;font-family:var(--f-body);font-size:.82rem;font-weight:400;color:var(--ink-3)}
.theme-toggle{display:inline-flex;align-items:center;min-height:34px;padding:.2rem .55rem;margin-right:.3rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);font-family:var(--f-body);font-size:.82rem;color:var(--ink-2);text-decoration:none}
.theme-toggle:hover{background:var(--accent-wash);color:var(--ink)}
.chrome-user{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--rule-strong);border-radius:50%;background:var(--surface-2);font-family:var(--f-body);font-size:.82rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.chrome-user:hover{border-color:var(--accent-bright);color:var(--ink)}
.chrome-user{width:44px;height:44px;color:var(--ink-2)}
.chrome-user svg{display:block}
.chrome-menu{position:absolute;top:calc(100% + .35rem);right:0;z-index:20;min-width:15rem;background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:.35rem;display:flex;flex-direction:column;gap:.05rem}
.chrome-menu a{display:block;min-height:36px;padding:.45rem .55rem;border-radius:var(--r-s);font-family:var(--f-display);font-size:.86rem;color:var(--ink);text-decoration:none;line-height:1.35}
.chrome-menu a:hover{background:var(--accent-wash)}
/* Signing out is a form in the menu (decision 1012): its button reads as the rows above it. */
.chrome-menu form{margin:0}
.chrome-menu button{display:block;width:100%;min-height:36px;padding:.45rem .55rem;border:0;border-radius:var(--r-s);
  background:none;font-family:var(--f-display);font-size:.86rem;color:var(--ink);text-align:left;cursor:pointer}
.chrome-menu button:hover{background:var(--accent-wash)}
.chrome-menu a[aria-current="true"]{background:var(--surface-2);font-weight:600}
.chrome-menu a small{display:block;font-family:var(--f-body);font-size:.82rem;color:var(--ink-3)}
.chrome-sep{border-top:1px solid var(--rule);margin:.3rem .2rem}
/* WRAPS AT 390px. Four controls in a row overflowed the phone, and a page that scrolls
   sideways is the first thing an owner sees on a phone. */
.chrome-right{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.4rem;min-width:0}

/* The public surface. Two controls, never three: the benchmark's four readable
   analogues carry exactly two, and our pair merges the log-in into its destination. */
.hero{border:1px solid var(--rule);border-radius:var(--r-l);background:var(--surface-2);padding:clamp(1.1rem,3vw,1.9rem);margin:0 0 1.5rem}
.hero .sub{margin-top:.6rem}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}
.actions .btn{width:auto;min-width:14rem;margin-top:0}
.actions .btn.ghost{margin-top:0}

/* Catalogue. One column on a phone, two from 700px — an exam is a paragraph of
   facts, not a thumbnail, so the tile never gets narrower than reading width. */
.tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;margin:0 0 1.6rem}
@media (min-width:700px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;gap:.4rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:.95rem 1rem 1.05rem}
.tile[data-state="soon"]{background:var(--surface-2);border-style:dashed}
.tilename{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;margin:0}
.tilename a{color:var(--ink);text-decoration:none}
.tilename a:hover{color:var(--accent-bright)}
.tilemeta{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);margin:0}
.tile p{margin:0;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.tile .btn{margin-top:.7rem}
.cardname{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;margin:0 0 .5rem}

/* «In voorbereiding». A waitlist is marketing: demand measured, no content promised. */
.soon{list-style:none;margin:0 0 1rem;padding:0;display:flex;flex-direction:column;gap:.45rem}
.soonrow{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;border:1px dashed var(--rule-strong);border-radius:var(--r);padding:.6rem .8rem;font-size:.88rem;color:var(--ink-2);background:var(--surface-2)}
.soonrow b{font-family:var(--f-display);color:var(--ink);font-weight:600}
.soonrow .btn{width:auto;margin:0 0 0 auto;min-height:36px;padding:.35rem .7rem;font-size:.82rem}

/* THE PLAN — the exam centre's home. Duolingo's lesson path, our syllabus spine:
   the whole is visible, today's work is marked in place, and it cannot go empty. */
.spine{list-style:none;margin:1rem 0 0;padding:0 0 0 1.6rem;position:relative;display:flex;flex-direction:column;gap:.55rem}
.spine::before{content:"";position:absolute;left:.55rem;top:.6rem;bottom:.6rem;width:2px;background:var(--rule)}
.step{position:relative;display:flex;gap:.75rem;align-items:flex-start;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);padding:.7rem .85rem;min-height:56px}
.step::before{content:"";position:absolute;left:-1.32rem;top:1.15rem;width:10px;height:10px;border-radius:50%;background:var(--rule-strong);border:2px solid var(--ground)}
.step[data-state="done"]::before{background:var(--good)}
.step[data-state="now"]::before{background:var(--accent-bright)}
.step[data-state="now"]{border-color:var(--accent-bright);background:var(--accent-wash)}
.step[data-state="locked"]{opacity:.62;border-style:dashed}
.stepnum{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;color:var(--ink-3);min-width:1.6rem;padding-top:.2rem;flex:none}
.stepbody{min-width:0;flex:1}
.stepbody b{display:block;font-family:var(--f-display);font-size:.95rem;font-weight:600;color:var(--ink)}
/* THE CARD IS THE LINK (decision 1005's UX pass). Twenty-one underlined blue titles in a column
   read as a page of links, and the target was the title text alone. The title's link now covers
   its card, with the card's own hover and focus. */
.stepbody b a{color:inherit;text-decoration:none}
.stepbody b a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.step:has(a:hover){border-color:var(--accent-bright)}
.step:has(a:focus-visible){outline:2px solid var(--accent-bright);outline-offset:2px}
.stepbody b a:focus-visible{outline:none}
.stepbody span{display:block;font-size:.82rem;line-height:1.45;color:var(--ink-2)}
/* «Vandaag» on the spine is a chip in the one blue that acts (decision 1114): the thing to do now.
   Written as `.stepbody .stepnow` because the chip sits inside .stepbody, whose `span` rule
   (display:block, its own size and colour) otherwise outranks a single class and stretches the
   chip across the card. */
.stepbody .stepnow{display:inline-block;font-family:var(--f-body);font-size:.82rem;font-weight:700;color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);border-radius:var(--r-s);padding:.1rem .4rem;margin-bottom:.25rem}
.lockrow{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin-left:auto;flex:none;align-self:center}
/* On a phone «na aankoop» took a column of its own and squeezed every title to four lines; it
   goes under the title there, in the title's column. */
@media (max-width:600px){
  .step{flex-wrap:wrap}
  .lockrow{flex-basis:100%;margin-left:0;padding-left:calc(1.6rem + .75rem);align-self:flex-start}
}
/* THE CONTENTS (/centrum/studie). An <ol> numbered every chapter whose title already says
   «Hoofdstuk 1»; it is a list of rows now, without the second number. */
.toc{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.toc li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;padding:.6rem .85rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.toc li .note{margin:0}
/* A citation's number is a link and a tap target; a little room either side of it. */
article sup a{padding:0 .12em}

/* Readiness carries a verdict, so the band needs the other two states the bars have. */
.band.ok{color:var(--good);background:var(--good-wash);border-color:color-mix(in srgb,var(--good) 35%,transparent)}
.band.no{color:var(--bad);background:var(--bad-wash);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}

/* A .rowlink that is a LINK, for the same reason a.btn exists. */
a.rowlink{text-decoration:none;color:var(--ink)}
a.rowlink:visited{color:var(--ink)}

/* Two columns where a wide screen would otherwise stretch one. */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;align-items:start}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}

/* The purchase step, stated as three moves — the middle one is not ours. */
.flowsteps{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0}
.flowstep{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);border:1px solid var(--rule);border-radius:var(--r-s);padding:.22rem .45rem}
.flowstep[aria-current="step"]{color:var(--accent-bright);border-color:var(--accent-bright)}

.foot{border-top:1px solid var(--rule);margin-top:2rem;padding-top:.9rem;font-size:.8rem;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:.9rem}
.foot a{color:var(--ink-2)}

/* A bar's fill and a threshold's position are DATA, and a static design page cannot compute
   them. The application sets them inline today — that is what the design:inline-styles ratchet
   counts. A declared ladder lets a static page carry no style attribute at
   all, and lets the application shed those inline widths whenever someone gets to it.
   data-fill = the percentage a fill covers; data-at = where a marker sits. */
[data-fill="0"]{width:0%}[data-fill="1"]{width:1%}[data-fill="2"]{width:2%}[data-fill="3"]{width:3%}[data-fill="4"]{width:4%}[data-fill="5"]{width:5%}[data-fill="6"]{width:6%}[data-fill="7"]{width:7%}[data-fill="8"]{width:8%}[data-fill="9"]{width:9%}
[data-fill="10"]{width:10%}[data-fill="11"]{width:11%}[data-fill="12"]{width:12%}[data-fill="13"]{width:13%}[data-fill="14"]{width:14%}[data-fill="15"]{width:15%}[data-fill="16"]{width:16%}[data-fill="17"]{width:17%}[data-fill="18"]{width:18%}[data-fill="19"]{width:19%}
[data-fill="20"]{width:20%}[data-fill="21"]{width:21%}[data-fill="22"]{width:22%}[data-fill="23"]{width:23%}[data-fill="24"]{width:24%}[data-fill="25"]{width:25%}[data-fill="26"]{width:26%}[data-fill="27"]{width:27%}[data-fill="28"]{width:28%}[data-fill="29"]{width:29%}
[data-fill="30"]{width:30%}[data-fill="31"]{width:31%}[data-fill="32"]{width:32%}[data-fill="33"]{width:33%}[data-fill="34"]{width:34%}[data-fill="35"]{width:35%}[data-fill="36"]{width:36%}[data-fill="37"]{width:37%}[data-fill="38"]{width:38%}[data-fill="39"]{width:39%}
[data-fill="40"]{width:40%}[data-fill="41"]{width:41%}[data-fill="42"]{width:42%}[data-fill="43"]{width:43%}[data-fill="44"]{width:44%}[data-fill="45"]{width:45%}[data-fill="46"]{width:46%}[data-fill="47"]{width:47%}[data-fill="48"]{width:48%}[data-fill="49"]{width:49%}
[data-fill="50"]{width:50%}[data-fill="51"]{width:51%}[data-fill="52"]{width:52%}[data-fill="53"]{width:53%}[data-fill="54"]{width:54%}[data-fill="55"]{width:55%}[data-fill="56"]{width:56%}[data-fill="57"]{width:57%}[data-fill="58"]{width:58%}[data-fill="59"]{width:59%}
[data-fill="60"]{width:60%}[data-fill="61"]{width:61%}[data-fill="62"]{width:62%}[data-fill="63"]{width:63%}[data-fill="64"]{width:64%}[data-fill="65"]{width:65%}[data-fill="66"]{width:66%}[data-fill="67"]{width:67%}[data-fill="68"]{width:68%}[data-fill="69"]{width:69%}
[data-fill="70"]{width:70%}[data-fill="71"]{width:71%}[data-fill="72"]{width:72%}[data-fill="73"]{width:73%}[data-fill="74"]{width:74%}[data-fill="75"]{width:75%}[data-fill="76"]{width:76%}[data-fill="77"]{width:77%}[data-fill="78"]{width:78%}[data-fill="79"]{width:79%}
[data-fill="80"]{width:80%}[data-fill="81"]{width:81%}[data-fill="82"]{width:82%}[data-fill="83"]{width:83%}[data-fill="84"]{width:84%}[data-fill="85"]{width:85%}[data-fill="86"]{width:86%}[data-fill="87"]{width:87%}[data-fill="88"]{width:88%}[data-fill="89"]{width:89%}
[data-fill="90"]{width:90%}[data-fill="91"]{width:91%}[data-fill="92"]{width:92%}[data-fill="93"]{width:93%}[data-fill="94"]{width:94%}[data-fill="95"]{width:95%}[data-fill="96"]{width:96%}[data-fill="97"]{width:97%}[data-fill="98"]{width:98%}[data-fill="99"]{width:99%}
[data-fill="100"]{width:100%}
[data-at="0"]{left:0%}[data-at="1"]{left:1%}[data-at="2"]{left:2%}[data-at="3"]{left:3%}[data-at="4"]{left:4%}[data-at="5"]{left:5%}[data-at="6"]{left:6%}[data-at="7"]{left:7%}[data-at="8"]{left:8%}[data-at="9"]{left:9%}
[data-at="10"]{left:10%}[data-at="11"]{left:11%}[data-at="12"]{left:12%}[data-at="13"]{left:13%}[data-at="14"]{left:14%}[data-at="15"]{left:15%}[data-at="16"]{left:16%}[data-at="17"]{left:17%}[data-at="18"]{left:18%}[data-at="19"]{left:19%}
[data-at="20"]{left:20%}[data-at="21"]{left:21%}[data-at="22"]{left:22%}[data-at="23"]{left:23%}[data-at="24"]{left:24%}[data-at="25"]{left:25%}[data-at="26"]{left:26%}[data-at="27"]{left:27%}[data-at="28"]{left:28%}[data-at="29"]{left:29%}
[data-at="30"]{left:30%}[data-at="31"]{left:31%}[data-at="32"]{left:32%}[data-at="33"]{left:33%}[data-at="34"]{left:34%}[data-at="35"]{left:35%}[data-at="36"]{left:36%}[data-at="37"]{left:37%}[data-at="38"]{left:38%}[data-at="39"]{left:39%}
[data-at="40"]{left:40%}[data-at="41"]{left:41%}[data-at="42"]{left:42%}[data-at="43"]{left:43%}[data-at="44"]{left:44%}[data-at="45"]{left:45%}[data-at="46"]{left:46%}[data-at="47"]{left:47%}[data-at="48"]{left:48%}[data-at="49"]{left:49%}
[data-at="50"]{left:50%}[data-at="51"]{left:51%}[data-at="52"]{left:52%}[data-at="53"]{left:53%}[data-at="54"]{left:54%}[data-at="55"]{left:55%}[data-at="56"]{left:56%}[data-at="57"]{left:57%}[data-at="58"]{left:58%}[data-at="59"]{left:59%}
[data-at="60"]{left:60%}[data-at="61"]{left:61%}[data-at="62"]{left:62%}[data-at="63"]{left:63%}[data-at="64"]{left:64%}[data-at="65"]{left:65%}[data-at="66"]{left:66%}[data-at="67"]{left:67%}[data-at="68"]{left:68%}[data-at="69"]{left:69%}
[data-at="70"]{left:70%}[data-at="71"]{left:71%}[data-at="72"]{left:72%}[data-at="73"]{left:73%}[data-at="74"]{left:74%}[data-at="75"]{left:75%}[data-at="76"]{left:76%}[data-at="77"]{left:77%}[data-at="78"]{left:78%}[data-at="79"]{left:79%}
[data-at="80"]{left:80%}[data-at="81"]{left:81%}[data-at="82"]{left:82%}[data-at="83"]{left:83%}[data-at="84"]{left:84%}[data-at="85"]{left:85%}[data-at="86"]{left:86%}[data-at="87"]{left:87%}[data-at="88"]{left:88%}[data-at="89"]{left:89%}
[data-at="90"]{left:90%}[data-at="91"]{left:91%}[data-at="92"]{left:92%}[data-at="93"]{left:93%}[data-at="94"]{left:94%}[data-at="95"]{left:95%}[data-at="96"]{left:96%}[data-at="97"]{left:97%}[data-at="98"]{left:98%}[data-at="99"]{left:99%}
[data-at="100"]{left:100%}

/* ==========================================================================
   THE SHOP WINDOW — decision 135.

   WHY THESE RULES LIVE HERE. apps/web serves this file verbatim (apps/web/src/design.ts), and
   tools/gates/design-check.mjs refuses any class the file does not define. A storefront with its own stylesheet would be a second design, drifting from the
   first the week after it shipped — which is the arrangement this whole file exists to prevent.
   Nothing above this line is changed: these are additions.

   LIGHT, AND THAT IS A CHOICE. The palette is packages/content/presentation/tokens.json — since decision 1005 the
   brand sheet's: the logo navy as ink on a ground of the logo blue at 6%. The storefront is read
   once, by a stranger, in daylight, on a phone or an office monitor, and the audience runs from
   18 to 70: a light page with navy text is the most legible thing we can put in front of them.
   The dark tokens apply to these tokens too, so a reader who asks for dark still
   gets a coherent page — but the designed object is the light one.

   THE TYPEFACES ARE SELF-HOSTED, NOT FETCHED. --f-display / --f-body / --f-serif name Inter Tight,
   Inter and Instrument Serif (decision 1114), served from apps/web/public/fonts/. The
   application does not link Google Fonts (see apps/web/src/server.ts): a font from this site is
   one request fewer to another, and sends no visitor's address to a third party without consent.
   ========================================================================== */

.sw{max-width:76rem;margin:0 auto}
.sw-hero{padding:clamp(2rem,6vw,4rem) 0 clamp(1.4rem,4vw,2.4rem)}
.sw-eyebrow{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin:0 0 1.1rem}
.sw-eyebrow a{color:var(--ink-3)}
.sw-thesis{font-family:var(--f-display);font-weight:800;font-size:clamp(2.1rem,6.4vw,3.8rem);line-height:1;letter-spacing:-.035em;margin:0 0 1.1rem;max-width:15em;text-wrap:balance}
.sw-lede{font-family:var(--f-body);font-size:clamp(1.02rem,2.1vw,1.2rem);line-height:1.55;color:var(--ink-2);margin:0 0 1.8rem;max-width:34rem}
.sw-ctarow{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin:0 0 .8rem}
.sw-cta{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.85rem 1.6rem;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-decoration:none}
.sw-cta:hover{background:var(--accent-bright);border-color:var(--accent-bright)}
.sw-quiet{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:.85rem 1.6rem;border-radius:var(--r);border:1px solid var(--rule-strong);background:none;color:var(--accent);font-family:var(--f-display);font-weight:700;font-size:1.05rem;text-decoration:none}
.sw-quiet:hover{background:var(--accent-wash);border-color:var(--accent-bright)}
.sw-ctanote{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);margin:0}

.sw-sect{padding:clamp(2rem,5.5vw,3.2rem) 0;border-top:1px solid var(--rule)}
.sw-lbl{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin:0 0 .8rem}
.sw-h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 .9rem;max-width:20em;text-wrap:balance}
.sw-h3{font-family:var(--f-display);font-weight:600;font-size:1.06rem;letter-spacing:-.012em;margin:0 0 .4rem}
.sw-lead{font-family:var(--f-body);font-size:1.02rem;line-height:1.6;color:var(--ink-2);margin:0 0 1rem;max-width:38rem}
.sw-body{font-family:var(--f-body);font-size:.96rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:38rem}

.sw-moves{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem;margin:1.4rem 0 0}
@media (min-width:820px){.sw-moves{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem}}
.sw-move{display:flex;flex-direction:column;gap:.5rem}
.sw-step{font-family:var(--f-body);font-size:.82rem;color:var(--accent-bright);border:1px solid var(--accent-bright);border-radius:var(--r-s);padding:.1rem .4rem;margin:0;align-self:flex-start}

.sw-fig{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:1rem;margin:.4rem 0 0;overflow-x:auto}
.sw-fig svg{display:block;width:100%;height:auto}
.sw-figcap{font-family:var(--f-body);font-size:.82rem;line-height:1.55;color:var(--ink-3);margin:.6rem 0 0;max-width:44rem}
.sw-track{fill:var(--surface-2);stroke:var(--rule);stroke-width:1}
.sw-bar{fill:var(--good);opacity:.8}
.sw-barlow{fill:var(--bad);opacity:.85}
.sw-mark{fill:var(--ink)}
.sw-dot{fill:var(--rule-strong)}
.sw-dotnow{fill:var(--accent-bright)}
.sw-t{fill:var(--ink);font-family:var(--f-display);font-size:13px;font-weight:600}
.sw-s{fill:var(--ink-3);font-family:var(--f-body);font-size:12px}
.sw-v{fill:var(--ink-2);font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:500}

.sw-honest{border-left:3px solid var(--accent-bright);padding:.2rem 0 .2rem 1.1rem;margin:1.8rem 0 0;max-width:38rem}

/* Decision 140 — the catalogue is grouped by family, then the exam. */
.sw-fam{margin:1.4rem 0 0}
.sw-famname{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--ink);margin:0;padding:0 0 .5rem;border-bottom:1px solid var(--rule)}
/* Registered and not built (decision 121): a card with no link, no price and no hover. */
.sw-soon{display:flex;flex-direction:column;gap:.35rem;background:none;border:1px dashed var(--rule-strong);border-radius:var(--r-l);padding:1rem;color:var(--ink-2)}
.sw-soontag{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin-top:.2rem}
/* Decision 139 — the literature the method section links, inside the method section. */
.sw-srcs{border-top:1px solid var(--rule);margin:1.8rem 0 0;padding:1.4rem 0 0;max-width:44rem}
.sw-srclist{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.55rem}
.sw-src{font-family:var(--f-body);font-size:.82rem;line-height:1.55;color:var(--ink-3)}
.sw-src a{color:var(--ink-2)}
.sw-strip{display:grid;grid-template-columns:minmax(0,1fr);gap:.8rem;margin:1.2rem 0 0}
@media (min-width:700px){.sw-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.sw-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sw-card{display:flex;flex-direction:column;gap:.35rem;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:1rem;text-decoration:none;color:var(--ink)}
.sw-card:hover{border-color:var(--accent-bright);background:var(--accent-wash)}
.sw-cardname{font-family:var(--f-display);font-weight:600;font-size:1.02rem;letter-spacing:-.012em;color:var(--ink);margin:0}
.sw-cardmeta{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3)}
.sw-cardbody{font-family:var(--f-body);font-size:.9rem;color:var(--ink-2)}
.sw-price{font-family:var(--f-display);font-weight:700;font-size:1.1rem;color:var(--ink);margin-top:.2rem}
.sw-priceunset{font-family:var(--f-body);font-size:.82rem;color:var(--warn);margin:.2rem 0 0}

.sw-pricecard{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-l);padding:clamp(1.1rem,3vw,1.7rem);max-width:34rem;box-shadow:var(--shadow);margin:0 0 1.6rem}
.sw-priceamount{font-family:var(--f-display);font-weight:700;font-size:2.8rem;line-height:1;letter-spacing:-.03em;margin:0}
.sw-pricesub{font-family:var(--f-body);font-variant-numeric:tabular-nums;font-size:.82rem;line-height:1.55;color:var(--ink-3);margin:.5rem 0 0}
.sw-freelist{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.5rem;max-width:38rem;font-family:var(--f-body);font-size:.96rem;color:var(--ink-2)}
.sw-freelist li{border-left:2px solid var(--rule-strong);padding-left:.7rem}

.sw-foot{border-top:1px solid var(--rule);padding:2rem 0 2.4rem;max-width:44rem}
.sw-legal{font-family:var(--f-body);font-size:.82rem;line-height:1.7;color:var(--ink-3);margin:.7rem 0 0}

/* ==========================================================================
   THE STOREFRONT'S PICTURES — owner, 8 September: «the page is very boring without any visuals».
   Every one of them is the product's own content: our line drawings out of figures/, the
   per-domain readiness readout, the three method figures. No stock photography, no icon set.
   ========================================================================== */

/* The hero: copy left, a question right, from 960px. One column below it, copy first. */
.sw-herogrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vw,2.8rem);align-items:start}
@media (min-width:960px){.sw-herogrid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}}
.sw-herocopy{min-width:0}

/* THE PLATE. These drawings are black line art with no background of their own, so on the dark
   theme they would be a black shape on a near-black panel. They therefore always sit on a light
   card, in both themes — the same decision .stimulus already takes on the question screen. */
.sw-plate{display:block;background:#FFFFFF;border:1px solid var(--rule-strong);border-radius:var(--r);padding:.9rem;margin:0 0 1rem;max-width:260px}
.sw-plate svg{display:block;width:100%;max-width:190px;height:auto;margin:0 auto}

/* The sample question, in the shape the practice screen uses. */
.sw-qcard{background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-l);box-shadow:var(--shadow);padding:clamp(1rem,2.6vw,1.5rem);margin:0;min-width:0}
.sw-qlabel{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);margin:0 0 .9rem}
.sw-qstem{font-family:var(--f-body);font-size:1rem;line-height:1.5;color:var(--ink);margin:0 0 .9rem;max-width:34rem}
.sw-qopts{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.sw-qopt{display:flex;align-items:baseline;gap:.6rem;border:1px solid var(--rule);border-radius:var(--r);padding:.55rem .7rem;font-family:var(--f-body);font-size:.92rem;line-height:1.45;color:var(--ink-2)}
.sw-qopton{border-color:var(--good);background:var(--good-wash);color:var(--ink)}
.sw-qletter{font-family:var(--f-body);font-size:.82rem;color:var(--ink-3);flex:0 0 auto}
.sw-qtext{min-width:0}
.sw-qmark{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--good);margin-left:auto;flex:0 0 auto}
.sw-qwhy{font-family:var(--f-body);font-size:.88rem;line-height:1.55;color:var(--ink-2);margin:.9rem 0 0;border-left:2px solid var(--accent-bright);padding-left:.7rem}

/* The family's own drawing beside its name, in the catalogue. */
.sw-famhead{display:flex;align-items:center;gap:.7rem;padding:0 0 .5rem;border-bottom:1px solid var(--rule)}
.sw-famhead .sw-famname{border-bottom:none;padding:0;min-width:0}
.sw-famthumb{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;background:#FFFFFF;border:1px solid var(--rule-strong);border-radius:var(--r);padding:3px}
.sw-famthumb svg{display:block;width:100%;height:100%}

/* The readiness band, as a labelled example. */

/* ---------- /prijzen — one table, every sellable exam (decisions 120, 123) ---------- */
.sw-tblwrap{overflow-x:auto;margin:1.2rem 0 0;border:1px solid var(--rule);border-radius:var(--r-l)}
.sw-tbl{width:100%;border-collapse:collapse;font-family:var(--f-body);font-size:.92rem;min-width:36rem}
.sw-tbl th{font-family:var(--f-body);font-weight:700;font-size:.82rem;color:var(--ink-3);text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule-strong);white-space:nowrap}
.sw-tbl td{padding:.8rem .9rem;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.sw-tbl tr:last-child td{border-bottom:none}
.sw-tblname{font-family:var(--f-display);font-weight:600;color:var(--ink)}
.sw-tblprice{font-family:var(--f-display);font-weight:700;color:var(--ink);white-space:nowrap}

/* ---------- the language selector (decision 134) ---------- */
.langsel{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--rule-strong);border-radius:var(--r);background:var(--surface);overflow:hidden;margin-right:.3rem}
.langsel a{display:inline-flex;align-items:center;min-height:34px;padding:.2rem .55rem;font-family:var(--f-body);font-size:.82rem;color:var(--ink-2);text-decoration:none}
.langsel a:hover{background:var(--accent-wash);color:var(--ink)}
.langsel-on{display:inline-flex;align-items:center;min-height:34px;padding:.2rem .55rem;font-family:var(--f-body);font-size:.82rem;font-weight:600;color:var(--ink);background:var(--surface-2)}
/* THE SETTINGS AT THE FOOT (decision 1009). Language and theme are chosen once, so they left the
   header bar for the account menu and for here, the end of the footer. */
.foot-prefs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-left:auto}
.foot-prefs .langsel,.foot-prefs .theme-toggle{margin-right:0}
/* The exam being prepared, stated in its menu rather than linked: ticked, not clickable. */
.chrome-menu-now{margin:0;padding:.45rem .55rem;border-radius:var(--r-s);background:var(--surface-2);
  font-family:var(--f-display);font-size:.86rem;font-weight:600;color:var(--ink);line-height:1.35}
.chrome-menu-now small{display:block;font-family:var(--f-body);font-size:.82rem;font-weight:400;color:var(--ink-3)}
/* THE APP HEADER ON A PHONE (decisions 1006 and 1010). The wordmark and the account, on one row —
   language and theme are settings (1009), and the exam is named on the page, not switched from the
   bar (1010). The four places are the tab bar at the foot. */
@media (max-width:700px){
  .chrome:has(.chrome-user){padding-bottom:.5rem}
  .chrome:has(.chrome-user) .chrome-logo{height:1.75rem}
}

/* ---------- Content the pages write without a class (decision 1005's design pass) ----------
   Tables. The exam page's structure table, the account's purchases and access, the legal pages,
   the passkey list and every table in a syllabus chapter are plain <table>s, and none had a rule:
   they rendered as the browser's grid of bare text, the one place the product still looked
   unstyled. `:not([class])`, so a designed table (.sw-tbl) keeps its own rules. The wrapping
   <div> a syllabus table comes in scrolls sideways on a phone instead of the page. */
table:not([class]){width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);margin:1rem 0 1.4rem;font-size:.95rem;line-height:1.45}
table:not([class]) caption{caption-side:top;text-align:left;font-weight:700;font-size:.82rem;
  color:var(--ink-3);padding:0 0 .45rem}
table:not([class]) th,table:not([class]) td{padding:.6rem .85rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
table:not([class]) td{color:var(--ink-2);font-variant-numeric:tabular-nums}
table:not([class]) thead th{font-weight:700;font-size:.82rem;color:var(--ink-3);background:var(--surface-2)}
table:not([class]) thead tr:first-child > :first-child{border-top-left-radius:var(--r)}
table:not([class]) thead tr:first-child > :last-child{border-top-right-radius:var(--r)}
table:not([class]) tbody th{font-weight:600;color:var(--ink)}
table:not([class]) tr:last-child > *{border-bottom:none}
div:has(> table:not([class])){overflow-x:auto}
/* A question and its answer (the exam page's FAQ). The answer was a .note — the size of an aside,
   .82rem — for the one paragraph on the page a visitor came to read. */
h3.s{font-family:var(--f-display);font-weight:700;font-size:1.08rem;line-height:1.3;
  letter-spacing:-.01em;margin:1.3rem 0 .3rem;text-wrap:balance}
h3.s + p.note,[data-exam-content] h2.s + p.note{font-size:.98rem;line-height:1.55;color:var(--ink-2)}
/* A new section after a table or an answer starts with air, not flush against it. */
table + h2.s,p.note + h2.s,[data-exam-content] + .split{margin-top:2.2rem}
/* Form controls the pages write bare — the purchase step's e-mail address, the free test's exam
   date, the sign-in code. They were the browser's own 1px boxes at 13px. One base look: the height
   of a touch target, the control boundary --rule-strong (3:1 on --surface, 1.4.11), the brand's
   corner. Inside :where(), so these weigh nothing: `.field input`, `.check input` and `.opt input`
   keep their own rules, which come earlier in this file and would otherwise lose on order. */
:where(input[type="email"],input[type="text"],input[type="date"],input[type="number"],input[type="tel"],
input:not([type]),select,textarea){min-height:44px;padding:.5rem .7rem;border:1px solid var(--rule-strong);
  border-radius:var(--r);background:var(--surface);color:var(--ink);font-family:var(--f-body);
  font-size:1rem;line-height:1.4;max-width:100%}
:where(input[type="email"],input[type="text"],input[type="date"],input[type="number"],input[type="tel"],
input:not([type]),select,textarea):focus-visible{border-color:var(--accent-bright)}
:where(input[type="checkbox"],input[type="radio"]){accent-color:var(--accent);width:18px;height:18px;
  vertical-align:-.2em;margin:0 .45rem 0 0}

/* ==========================================================================
   THE WEBSITE'S LOOK (decision 1092), drawn on the canvas «licento.com — website design».

   A LAYER, NOT A REWRITE. ./style.css is the design every page's markup was written against, and
   apps/web/test holds rules in it; this file comes after it (./design.ts) and restyles the same
   classes. Nothing here introduces a page; it changes how the existing ones are drawn:
   - type: Inter Tight for headings, Inter for text, Instrument Serif for one closing phrase;
   - colour: a cool white ground, ink near black, one blue (#2E55F5) for action;
   - shape: a floating pill header that turns frosted once the page scrolls, gradient headers that
     run edge to edge with a rounded foot, white cards on 28px corners, pill buttons that press in 3D.

   THE TOKENS ARE THE BRAND'S. Since decision 1114 the website's type, palette and radii are
   packages/content/presentation/tokens.json's, shared with the app, the back office and the mails;
   what stays here is the website's own: the hero gradient behind a page's header.
   ========================================================================== */

:root{
  --hero:radial-gradient(40% 60% at 12% 8%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
         radial-gradient(38% 50% at 88% 4%,rgba(255,255,255,.75),rgba(255,255,255,0) 64%),
         radial-gradient(44% 70% at 18% 40%,rgba(201,186,255,.55),rgba(201,186,255,0) 70%),
         radial-gradient(40% 60% at 78% 36%,rgba(170,198,255,.6),rgba(170,198,255,0) 70%),
         linear-gradient(180deg,var(--hero-top) 0%,#E9EEFB 60%,#F5F7FB 100%);
  --hero-top:#C9D5FF;
}
:root[data-theme="dark"]{
  --hero:radial-gradient(40% 60% at 12% 8%,rgba(128,152,249,.22),rgba(128,152,249,0) 70%),
         radial-gradient(44% 70% at 80% 30%,rgba(150,120,255,.2),rgba(150,120,255,0) 70%),
         linear-gradient(180deg,var(--hero-top) 0%,#031439 100%);
  --hero-top:#0A1E4A;
}

/* The page's frame. The gradient bands below are full width, wider than .wrap; clipping, not hiding,
   keeps the sticky header working. */
html,body{overflow-x:clip}
body{background:var(--ground);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6}
/* THE BAND REACHES UNDER THE STATUS BAR (owner, on staging in iOS Safari: «the background in the header
   should continue»). Safari tints the strip above the page from the page's own background, which was the
   ground: a grey strip over a blue band. The root takes the band's top colour, the body keeps the ground
   and is at least a screen tall, so the colour shows only above the page (and in an overscroll). An
   exam's page gives the root its family's colour (.ex-hero below). No theme-color: one colour in the
   shell would be wrong on every exam's page, and the Safaris before 26 sample the page's top anyway. */
html{background:var(--hero-top)}
body{min-height:100vh}
.wrap{position:relative;isolation:isolate;max-width:1240px;padding:14px clamp(16px,4vw,40px) clamp(1.5rem,4vw,3rem)}
/* THE HEADER BAND, behind every page's head: edge to edge, a rounded foot. The storefront's hero
   draws a taller one of its own (.sw-hero below), so this one steps aside where there is one. */
.wrap::before{content:"";position:absolute;z-index:-1;top:0;left:50%;width:100vw;height:360px;
  transform:translateX(-50%);border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--hero)}
.wrap:has(.sw-hero)::before{display:none}

h1,.sw-thesis{font-family:var(--f-display);font-weight:700;letter-spacing:-.035em;line-height:1.04;color:var(--ink)}
h1{font-size:clamp(2.4rem,5vw,3.75rem)}
h2.s,h2.band,.sw-h2,h3.s,.sw-h3,.ct,.cardname,.tilename,.sw-cardname,.sw-famname{font-family:var(--f-display);letter-spacing:-.025em;color:var(--ink)}
/* The one closing phrase a heading may carry in the serif (the style guide's first rule). */
.it,em.it{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:-.01em;font-size:1.08em}
:root[data-theme="dark"] .it{color:#A8B8FB}
/* The marker: body text only, one per section. */
mark,.mk{color:#0E1116;background:linear-gradient(100deg,rgba(255,225,77,0) 1%,var(--marker) 3%,#FFE45C 95%,rgba(255,225,77,0) 98%) 0 84%/100% 44% no-repeat;padding:0 .05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* On the dark ground the marker takes the whole letter: half of a dark letter on navy cannot be read. */
:root[data-theme="dark"] :is(mark,.mk){background-position:0 55%;background-size:100% 96%}

/* ---------- The header: a floating pill, clear at the top, frosted once the page scrolls ---------- */
.chrome{position:sticky;top:14px;z-index:40;gap:20px;margin:0 0 1.75rem;padding:8px 8px 8px 22px;
  border:1px solid transparent;border-radius:999px;background:transparent;flex-wrap:nowrap;
  transition:background .25s,box-shadow .25s,border-color .25s}
.chrome[data-scrolled]{background:rgba(255,255,255,.78);border-color:rgba(227,232,238,.9);
  box-shadow:0 10px 30px rgba(30,44,110,.10);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-theme="dark"] .chrome[data-scrolled]{background:rgba(10,30,74,.8);border-color:rgba(32,56,111,.9)}
.chrome-nav{flex:1;justify-content:center;gap:26px;margin:0}
.chrome-nav a{min-height:44px;padding:0;border-radius:0;font-family:var(--f-body);font-weight:500;font-size:15px;color:var(--ink);opacity:.82;background:none}
.chrome-nav a:hover{opacity:1;background:none;color:var(--ink)}
.chrome-nav a[aria-current="page"]{opacity:1;box-shadow:none;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.chrome-right{margin-left:auto;gap:18px;flex-wrap:nowrap}
.chrome-link{min-height:44px;padding:0;font-family:var(--f-body);font-weight:500;font-size:15px;color:var(--ink);opacity:.82}
.chrome-link:hover{opacity:1;text-decoration:none;color:var(--ink)}
.chrome-cta svg{flex:none;width:22px;height:22px;margin:0 8px 0 -6px}

/* THE LOGO'S HAT HOPS ON THE «o» (owner, on the canvas): the wordmark is drawn twice — the letters
   and «o» once, the mortarboard once over it, cut along the gap between them — and on hover the hat
   jumps and lands. The logo is a PNG, so the cut is a traced outline, in percent of its 1321x355. */
.chrome-brand{position:relative;display:inline-flex;flex:none;line-height:0}
.chrome-logo{height:26px}
.chrome-brand:has(.chrome-logo) .chrome-logo{clip-path:polygon(0% 0%,78.35% 0%,78.35% 16.9%,79.49% 28.17%,82.21% 28.45%,84.63% 27.32%,87.66% 29.01%,90.69% 34.37%,93.19% 42.25%,95.53% 36.06%,95.53% 60.56%,100% 60.56%,100% 100%,0% 100%)}
.chrome-brand:has(.chrome-logo)::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:url("/brand/logo.png") left center/auto 100% no-repeat;transform-origin:89% 28%;
  clip-path:polygon(78.35% 0%,100% 0%,100% 60.56%,95.53% 60.56%,95.53% 36.06%,93.19% 42.25%,90.69% 34.37%,87.66% 29.01%,84.63% 27.32%,82.21% 28.45%,79.49% 28.17%,78.35% 16.9%)}
:root[data-theme="dark"] .chrome-brand:has(.chrome-logo-dark)::after{background-image:url("/brand/logo-dark.png")}
.chrome-brand:hover::after,.chrome-brand:focus-visible::after{animation:hop .8s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{transform:none}12%{transform:translateY(4%) scaleY(.92)}38%{transform:translateY(-38%) rotate(-12deg)}60%{transform:translateY(0) rotate(3deg)}72%{transform:translateY(-9%) rotate(-2deg)}86%,100%{transform:none}}
/* THE «o» WINKS (owner: «on hover on the logo, also make a face in the last letter, o, that winks»): two
   eyes and a smile in the hole of the «o», in the logo's own blue, while the logo is pointed at; the right
   eye closes once, as the hat lands. Drawn in the logo's own 1321x355 frame, so it sits in the hole at
   any size. A reader who asked for reduced motion gets the face without the wink. */
.chrome-brand:has(.chrome-logo)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%230149F4'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%230149F4'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%230149F4' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;transform-origin:84.67% 63.24%}
.chrome-brand:hover::before,.chrome-brand:focus-visible::before{animation:facepop .7s both,wink 1.3s .55s,giggle .7s 1.7s}
/* The face pops out of the «o»: from nothing, spun a little, it overshoots and settles; it winks; then it
   gives a small happy wobble. */
@keyframes facepop{0%{opacity:0;transform:scale(.15) rotate(-30deg);animation-timing-function:cubic-bezier(.2,.7,.3,1)}50%{opacity:1;transform:scale(1.16) rotate(8deg);animation-timing-function:ease-in-out}75%{transform:scale(.95) rotate(-3deg);animation-timing-function:ease-out}100%{opacity:1;transform:none}}
@keyframes giggle{0%,100%{transform:none}25%{transform:rotate(-9deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes wink{0%,38%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%230149F4'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%230149F4'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%230149F4' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}40%,62%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%230149F4'/%3E%3Cpath d='M1129 209 Q1140 199 1151 209' fill='none' stroke='%230149F4' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%230149F4' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}64%,100%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%230149F4'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%230149F4'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%230149F4' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}}
:root[data-theme="dark"] .chrome-brand:has(.chrome-logo-dark)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%236E9BFF' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .chrome-brand:has(.chrome-logo-dark):hover::before{animation-name:facepop,wink-dark,giggle}
@keyframes wink-dark{0%,38%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%236E9BFF' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}40%,62%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Cpath d='M1129 209 Q1140 199 1151 209' fill='none' stroke='%236E9BFF' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%236E9BFF' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}64%,100%{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1321 355'%3E%3Ccircle cx='1097' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Ccircle cx='1140' cy='207' r='9.5' fill='%236E9BFF'/%3E%3Cpath d='M1092 236 Q1118.5 264 1145 236' fill='none' stroke='%236E9BFF' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E")}}

/* ---------- Buttons: pills that press in 3D ---------- */
.btn,.sw-cta,.sw-quiet,.chrome-cta{border-radius:999px;font-family:var(--f-body);font-weight:600;
  transition:transform .15s ease,box-shadow .15s ease,background .2s,border-color .2s}
.btn,.chrome-cta{position:relative;border:0;background:var(--accent);color:var(--on-accent);
  box-shadow:0 4px 0 var(--edge-blue),0 10px 22px rgba(46,85,245,.28)}
.btn{min-height:52px;font-size:16px;padding:.7rem 1.5rem}
.chrome-cta{min-height:44px;padding:0 20px;font-size:15px}
.btn:hover,.chrome-cta:hover{background:#3A60FF;border-color:transparent;color:var(--on-accent);transform:translateY(-2px);
  box-shadow:0 6px 0 var(--edge-blue),0 16px 30px rgba(46,85,245,.38)}
.btn:active,.chrome-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge-blue),0 4px 10px rgba(46,85,245,.25)}
/* IN THE BAR THE BUTTON IS FLAT until it is pointed at (owner, on staging: «this does not look good»):
   a 4px edge under a 44px pill inside a 60px bar sat heavy against the bar's own edge. It rises onto a
   thin edge on hover and presses down on a click. */
.chrome-cta{box-shadow:0 1px 2px rgba(30,44,110,.16)}
.chrome-cta:hover{transform:translateY(-1px);box-shadow:0 3px 0 var(--edge-blue),0 8px 18px rgba(46,85,245,.3)}
.chrome-cta:active{transform:translateY(1px);box-shadow:0 1px 0 var(--edge-blue)}
.btn.ghost,.sw-quiet{background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  box-shadow:0 4px 0 var(--edge-white),0 10px 22px rgba(30,44,110,.08)}
a.btn.ghost:visited{color:var(--ink)}
.btn.ghost:hover,.sw-quiet:hover{background:var(--surface);color:var(--ink);border-color:#C9D2E0;transform:translateY(-2px);
  box-shadow:0 6px 0 var(--edge-white),0 16px 30px rgba(30,44,110,.12)}
.btn.ghost:active,.sw-quiet:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge-white),0 4px 10px rgba(30,44,110,.08)}
.btn.quiet,.btn.quiet:hover{box-shadow:none;transform:none;background:none}
/* The storefront's first action: the marker's yellow, dark text, a gold edge. */
.sw-cta{background:var(--marker);color:#0E1116;border:0;min-height:54px;padding:0 1.6rem;
  box-shadow:0 4px 0 var(--edge-marker),0 10px 22px rgba(201,162,0,.28)}
.sw-cta:hover{background:#FFE866;border-color:transparent;color:#0E1116;transform:translateY(-2px);
  box-shadow:0 6px 0 var(--edge-marker),0 16px 30px rgba(201,162,0,.36)}
.sw-cta:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge-marker),0 4px 10px rgba(201,162,0,.25)}
.sw-quiet{min-height:54px;padding:0 1.6rem}
.btn:disabled,.btn:disabled:hover{transform:none;box-shadow:none}

/* ---------- Cards and surfaces ---------- */
.card,.tile,.sw-card,.sw-qcard,.sw-pricecard,.sw-fig,.nextstep,.paywall,.hero,.panel,.rowlink,.step,.toc li,.planbox,.today-hero{
  border-color:var(--rule);border-radius:var(--r-l);background:var(--surface);box-shadow:none}
.card,.tile,.sw-card,.nextstep,.paywall,.sw-pricecard{padding:clamp(1.25rem,2.6vw,2rem)}
.sw-card{transition:transform .2s,border-color .2s,box-shadow .2s}
.sw-card:hover{background:var(--surface);border-color:#C9D2E0;transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(30,44,110,.35)}
.sw-qcard,.sw-pricecard{box-shadow:0 30px 60px -30px rgba(30,44,110,.3)}
.sw-soon,.tile[data-state="soon"]{border-radius:var(--r-l);background:transparent}
.sw-plate{border-radius:var(--r);border-color:var(--rule)}
.sw-qopt{border-radius:14px}
:root:not([data-theme="dark"]) .sw-qopton{border-color:#2E9E5B;background:#E7F6EC}
table:not([class]),.sw-tblwrap{border-radius:var(--r-l);border-color:var(--rule)}
.sw-tbl th{font-family:var(--f-body);color:var(--ink-3)}
.sw-tblname,.sw-tblprice{font-family:var(--f-display);letter-spacing:-.01em}

/* ---------- The storefront ---------- */
.sw{max-width:none}
.sw-hero{position:relative;padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2.5rem,6vw,4.5rem)}
/* The hero's own band, behind the header too, drifting very slowly (owner: «make the background
   feel a bit alive»). It stops for a reader who asked the device to reduce motion. */
.sw-hero::before{content:"";position:absolute;z-index:-1;top:-260px;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);border-radius:0 0 var(--r-xl) var(--r-xl);background:var(--hero);
  background-size:140% 140%,140% 140%,160% 160%,160% 160%,100% 100%;animation:aura 26s ease-in-out infinite alternate}
@keyframes aura{0%{background-position:0% 0%,100% 0%,0% 50%,100% 40%,0 0}100%{background-position:12% 10%,86% 12%,14% 36%,84% 54%,0 0}}
.sw-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--rule);font-size:14px;font-weight:500;color:var(--ink)}
.sw-eyebrow a{color:var(--ink);text-decoration:none}
.sw-thesis{font-size:clamp(2.75rem,6.2vw,5.25rem);max-width:15ch}
/* Beside the sample question the thesis has half the width, and it is a long sentence. */
.sw-herogrid .sw-thesis{font-size:clamp(2.4rem,4.2vw,3.9rem);max-width:17ch}
.sw-lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:46ch}
.sw-ctarow{gap:14px}
.sw-ctanote{color:var(--ink-2);font-size:14px}
.sw-herogrid{gap:clamp(2rem,5vw,4rem)}
.sw-sect{border-top:0;padding:clamp(3.5rem,8vw,6.5rem) 0 0}
.sw-lbl{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .9rem}
.sw-h2{font-weight:700;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.06;max-width:22ch}
.sw-h3{font-weight:600;font-size:1.25rem}
.sw-lead{font-size:1.12rem;color:var(--ink-2);max-width:52ch}
.sw-body{font-size:1rem;color:var(--ink-2)}
.sw-step{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--rule);
  background:var(--surface);font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--accent)}
.sw-moves{gap:18px}
.sw-move{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:clamp(1.25rem,2.6vw,2rem)}
.sw-move .sw-fig{border:0;padding:0;background:none}
.sw-honest{border-left:0;padding:clamp(1.25rem,2.6vw,2rem);background:linear-gradient(140deg,#E3E9FF,#F4F6FD);border:1px solid #DCE3FF;border-radius:var(--r-l);max-width:none}
:root[data-theme="dark"] .sw-honest{background:var(--surface-2);border-color:var(--rule)}
.sw-bar{fill:var(--accent);opacity:.9}.sw-barlow{fill:#E08A00;opacity:1}.sw-dotnow{fill:var(--accent)}
.sw-famname{font-size:1.4rem}
.sw-famhead{border-bottom:0;padding-bottom:.9rem}
.sw-famthumb{border-radius:14px;border-color:var(--rule)}
.sw-strip{gap:14px}
.sw-cardname{font-size:1.25rem}
.sw-price{font-family:var(--f-display);font-size:1.3rem}
.sw-priceamount{font-family:var(--f-display);font-size:3.25rem;letter-spacing:-.04em}
.sw-freelist li{border-left:0;padding-left:0;display:flex;gap:10px}
.sw-freelist li::before{content:"\2713";color:var(--accent);font-weight:700}
.sw-foot{max-width:none;border-top:0}
.sw-legal{color:var(--ink-3)}

/* THE APP, ON THE HOME PAGE: real screens, floating (shop.ts `phones`). */
.sw-phones{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(.5rem,3vw,2.5rem);
  margin:clamp(2rem,5vw,3.5rem) 0 0;padding:0 0 1rem}
.sw-phone{flex:none;width:clamp(150px,22vw,270px);border-radius:clamp(30px,4vw,50px);padding:clamp(6px,.8vw,9px);background:#14161C;
  box-shadow:0 50px 90px rgba(30,44,110,.25),0 8px 20px rgba(30,44,110,.12);animation:float 8s ease-in-out infinite}
.sw-phone img{display:block;width:100%;height:auto;border-radius:clamp(24px,3.4vw,42px)}
.sw-phone:nth-child(1){transform:rotate(-6deg);animation-delay:-2s}
.sw-phone:nth-child(2){width:clamp(170px,25vw,310px);animation-delay:-5s;z-index:1}
.sw-phone:nth-child(3){transform:rotate(6deg);animation-delay:-1s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -14px}}
@media (max-width:640px){.sw-phone:nth-child(1),.sw-phone:nth-child(3){display:none}}

/* ---------- App and account pages: the same type and surfaces ---------- */
.wrap > .head{max-width:52rem;padding-top:clamp(1rem,4vw,2.5rem)}
.wrap > main{max-width:52rem}
.eyebrow{color:var(--ink-2)}
.chrome-user{background:#EAEFFF;border-color:transparent;color:var(--accent)}
.chrome-menu{border-radius:20px;border-color:var(--rule);padding:8px;box-shadow:0 24px 50px -20px rgba(30,44,110,.35)}
.chrome-menu a,.chrome-menu button{border-radius:12px;font-family:var(--f-body);font-weight:500}
.choice,.match-tile,.exam-row,.subject-row{border-radius:var(--r)}
:where(input[type="email"],input[type="text"],input[type="date"],input[type="number"],input[type="tel"],input[type="password"],
input:not([type]),select,textarea){min-height:52px;border-radius:14px;border:1.5px solid #DDE3EC;padding:.5rem 1rem}
:where(input[type="email"],input[type="text"],input[type="date"],input[type="number"],input[type="tel"],input[type="password"],
input:not([type]),select,textarea):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,85,245,.14)}
.field input{border-radius:14px;min-height:52px}
.field label{font-size:15px;font-weight:500;color:var(--ink)}
main form .btn{margin-top:.6rem}
.caveat{border-left-color:var(--accent)}

/* ---------- The footer ---------- */
.foot{margin-top:clamp(3rem,8vw,6rem);padding:2.25rem 0 0;border-top:1px solid var(--rule);gap:12px 28px;align-items:center;font-size:14px}
.foot a{color:var(--ink-2);text-decoration:none}
.foot a:hover{color:var(--ink)}
.theme-toggle,.langsel{border-radius:999px;border-color:var(--rule)}

/* ---------- On a phone: the bar is the logo, the action and a menu; the menu is a whole screen ---------- */
.chrome-burger,.chrome-sheet,.chrome-cta-phone{display:none}
@media (max-width:860px){
  .chrome{gap:10px;padding-left:16px}
  .chrome .chrome-nav,.chrome .chrome-right > .chrome-link{display:none}
  .chrome .chrome-cta-phone{display:inline-flex}
  .chrome .chrome-cta-desk{display:none}
  .chrome-burger{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;
    border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
  .chrome-sheet:not([hidden]){position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;box-sizing:border-box;
    padding:22px clamp(16px,4vw,40px) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;background:var(--ground);
    animation:sheetIn .22s ease-out}
}
/* A frosted bar is a containing block for anything fixed inside it; the open sheet must cover the
   viewport, not the bar, so the bar drops its blur while the sheet is open. */
.chrome:has(.chrome-sheet:not([hidden])){-webkit-backdrop-filter:none;backdrop-filter:none}
@keyframes sheetIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.chrome-sheet-top{display:flex;justify-content:flex-end}
.chrome-sheet-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);color:var(--ink);
  display:grid;place-items:center;cursor:pointer}
.chrome-sheet nav{display:flex;flex-direction:column;padding:20px 8px 0}
.chrome-sheet nav a{display:flex;align-items:center;justify-content:space-between;min-height:68px;border-bottom:1px solid var(--rule);
  font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.chrome-sheet nav a::after{content:"\2192";font-size:22px;font-weight:500;color:#9AA3B0}
/* HELP AND CONTACT, quiet (./chrome.ts `siteSheet`): body type, muted, side by side, no rule and no arrow — under the
   pages, never one of them. Each a full 44px to tap. */
.chrome-sheet nav.chrome-sheet-more{flex-direction:row;flex-wrap:wrap;gap:0 28px;padding:18px 8px 0}
.chrome-sheet nav.chrome-sheet-more a{min-height:44px;border-bottom:0;font-family:var(--f-body);font-size:17px;font-weight:500;
  letter-spacing:0;color:var(--ink-2)}
.chrome-sheet nav.chrome-sheet-more a::after{content:none}
.chrome-sheet nav.chrome-sheet-more a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px;
  text-decoration-thickness:2px;text-decoration-color:var(--accent)}
.chrome-sheet-actions{margin-top:auto;padding:32px 8px 0;display:flex;flex-direction:column;gap:12px}
.chrome-sheet-actions .btn{margin:0}

/* ---------- The exams menu (./exams-menu.ts; canvas «Exams mega menu», direction A) ----------
   Under the bar, the width of the bar: the filters across the top, the fields on the left, the chosen
   field's exams in the middle, the free check on the right, every exam and the exam request at the foot.
   On a phone it is a whole screen over the menu sheet: the fields, then a field's exams. */
.chrome-nav .xm-chev{margin-left:5px;transition:transform .15s}
.chrome-nav a[aria-expanded="true"]{opacity:1}
.chrome-nav a[aria-expanded="true"] .xm-chev{transform:rotate(180deg)}
.xm{position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:45;display:flex;flex-direction:column;max-height:calc(100vh - 110px);
  overflow-y:auto;background:var(--surface);border:1px solid var(--rule);border-radius:24px;text-align:left;
  box-shadow:0 1px 2px rgba(30,44,110,.05),0 30px 60px -28px rgba(30,44,110,.40);font-family:var(--f-body);color:var(--ink)}
.xm-top,.xm-title,.xm-back,.xm-go{display:none}
.xm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.xm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule)}
.xm-search{flex:1 1 240px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;
  background:var(--ground);border:1px solid var(--rule);color:var(--ink-3)}
.xm-search input{flex:1;min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  font:inherit;font-size:15px;color:var(--ink);outline:none}
.xm-search:focus-within{border-color:var(--accent)}
.xm-pickwrap{position:relative;display:inline-flex}
.xm-pick{-webkit-appearance:none;appearance:none;height:44px;min-height:0;margin:0;padding:0 38px 0 14px;border-radius:12px;border:1px solid var(--rule);
  background:var(--surface);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.xm-pick[data-on]{border-color:var(--accent);background:var(--accent-wash)}
/* The filter's icon, the row's, on the left of the box; the text steps right to make room. */
.xm-pickwrap .xm-pickico{position:absolute;left:13px;top:50%;margin-top:-7px;pointer-events:none}
.xm-pickwrap:has(.xm-pickico) .xm-pick{padding-left:36px}
.xm-pickwrap .xm-chev{position:absolute;right:13px;top:50%;margin-top:-8px;pointer-events:none;color:var(--ink-2)}
.xm-shown{margin:0}
/* Clearing is a square the dropdowns' height, drawn as they are while a filter is on. */
.xm-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0;padding:0;
  border:1px solid var(--accent);border-radius:12px;background:var(--accent-wash);color:var(--ink);cursor:pointer}
.xm-clear:hover{background:var(--surface)}
.xm-body{display:flex;min-height:0}
.xm-fields{flex:0 0 280px;box-sizing:border-box;padding:18px 14px;border-right:1px solid var(--rule)}
.xm-eyebrow{margin:0;padding:0 10px 6px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.xm-list,.xm-exams{list-style:none;margin:0;padding:0}
.xm-field{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0 0 2px;padding:6px 10px;border:0;border-radius:12px;
  background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.xm-field:hover{background:var(--ground)}
.xm-field[aria-current="true"]{background:var(--surface-2);font-weight:600}
.xm-field:disabled{opacity:.38;cursor:default;background:transparent}
.xm-field .exam-icon{width:36px;height:36px;border-radius:10px}
.xm-field .exam-icon svg{width:22px;height:22px}
.xm-fname{flex:1}
.xm-count{font-size:13px;font-weight:500;color:var(--ink-3)}
.xm-panes{flex:1 1 auto;min-width:0;padding:22px 24px}
.xm-pane{display:block}
.xm-panehead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:0 12px}
.xm-pname{margin:0;font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.xm-compare{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.xm-exam a{display:flex;align-items:center;gap:16px;padding:12px;border-radius:14px;color:var(--ink);text-decoration:none}
.xm-exam a:hover{background:var(--ground)}
.xm-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.xm-name{font-size:15px;font-weight:600;line-height:1.35}
/* Where and in what language, each by its icon, then the authority, cut short where it runs long. */
.xm-meta{display:flex;align-items:center;gap:4px 12px;min-width:0;font-size:13px;color:var(--ink-2);white-space:nowrap}
.xm-panehead + .xm-exams,.xb-head + .xm-exams{margin-top:8px}
.xm-fact{display:inline-flex;align-items:center;gap:5px;flex:none}
.xm-fact abbr{text-decoration:none;cursor:help}
.xm-ico{flex:none;color:var(--ink-3)}
.xm-auth{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink-3)}
.xm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.xm-chip{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;background:var(--surface-2);
  font-size:12px;font-weight:500;color:var(--ink-2)}
.xm-next{flex:none;width:136px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.xm-next small{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.xm-next b{font-size:14px;font-weight:600;color:var(--ink)}
.xm-none{margin:12px;font-size:15px;color:var(--ink-2)}
.xm-check{flex:0 0 232px;box-sizing:border-box;align-self:flex-start;display:flex;flex-direction:column;gap:10px;margin:14px;padding:22px;
  border-radius:18px;background:var(--accent-wash)}
.xm-check-title{margin:0;font-family:var(--f-display);font-size:19px;font-weight:700;line-height:1.25;color:var(--ink)}
.xm-check p:not(.xm-check-title){margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.xm-check .btn{margin:6px 0 0}
.xm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:4px 28px;
  border-top:1px solid var(--rule);background:var(--ground)}
.xm-all{display:inline-flex;align-items:center;gap:6px;min-height:52px;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none}
.xm-foot p{margin:0;font-size:14px;color:var(--ink-2)}
@media (max-width:1100px){.xm-check{display:none}}
@media (max-width:860px){
  .xm{position:fixed;inset:0;z-index:61;max-height:none;padding:22px clamp(16px,4vw,40px) calc(16px + env(safe-area-inset-bottom));
    border:0;border-radius:0;box-shadow:none;background:var(--ground)}
  .xm-top{display:flex;justify-content:space-between;align-items:center}
  .xm-back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;
    font:inherit;font-size:16px;font-weight:500;color:var(--accent);cursor:pointer}
  .xm-back .xm-chev{width:20px;height:20px}
  .xm-title{display:block;margin:10px 0 12px;font-family:var(--f-display);font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
  .xm-bar{padding:0;border:0;gap:8px}
  .xm-search{flex:1 1 200px;height:48px;background:var(--surface)}
  .xm-search input{font-size:16px}
  /* The search and the ✕ on one line, the two dropdowns on the next: the ✕ takes nothing from them. */
  .xm-pickwrap{order:2;flex:1 1 calc(50% - 4px);min-width:0}
  .xm-pick{width:100%;height:48px;font-size:15px}
  /* HALF A PHONE'S WIDTH EACH, so the icon and the chevron sit closer to the edge: «All languages» was cut at 375px,
     with 92px of a 166px box for 97px of words. */
  .xm-pickwrap:has(.xm-pickico) .xm-pick{padding:0 28px 0 32px}
  .xm-pickwrap .xm-pickico{left:11px}
  .xm-pickwrap .xm-chev{right:8px}
  .xm-clear{order:1;width:48px;height:48px}
  .xm-body{display:block;flex:1 0 auto}
  .xm-fields{padding:8px 0 0;border:0}
  .xm-field{min-height:58px;margin:0;padding:6px 0;border-radius:0;border-bottom:1px solid var(--rule);font-size:17px}
  .xm-field[aria-current="true"],.xm-field:hover{background:none;font-weight:500}
  .xm-field:disabled{display:none}
  .xm-go{display:block;color:#9AA3B0}
  .xm-panes{padding:0}
  .xm-panehead{flex-direction:column;align-items:flex-start;padding:0}
  .xm-pname{font-size:28px}
  .xm-exam a{flex-wrap:wrap;gap:6px 10px;padding:14px 0;border-radius:0;border-bottom:1px solid var(--rule)}
  .xm-exam a:hover{background:none}
  .xm-next{width:auto;flex-basis:100%;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:6px;text-align:left}
  .xm-foot{flex-direction:column;align-items:stretch;padding:16px 0 0;border:0;background:none}
  .xm-all{justify-content:center;border:1px solid var(--rule-strong);border-radius:999px;color:var(--ink)}
  .xm-foot p{text-align:center;padding:8px 0}
  .xm[data-view="fields"] .xm-panes{display:none}
  .xm[data-view="exams"] :is(.xm-top,.xm-title,.xm-bar,.xm-fields){display:none}
}
/* THE TWO FILTERS ON A NARROW PHONE — a 360px Android, a 320px iPhone SE: half the width is too little for «All
   languages» whatever the padding, so a row each. */
@media (max-width:370px){.xm-pickwrap{flex-basis:100%}}
.chrome:has(.xm:not([hidden])){-webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------- /exams, drawn as the exams menu is (./exams-menu.ts `examsBrowser`) ----------
   The menu's filter bar and rows in one card: the fields on the left stay in view and lead to each
   field's section; every field is on the page at once. A registered, unbuilt exam is a row that leads
   nowhere. On a phone the fields are a row of chips that scrolls sideways. */
.xb-sect{padding:0}
.xb{background:var(--surface);border:1px solid var(--rule);border-radius:24px;box-shadow:0 1px 2px rgba(30,44,110,.04),0 18px 40px -24px rgba(30,44,110,.20)}
.xb > .xm-bar{border-radius:24px 24px 0 0}
.xb-body{display:flex;align-items:flex-start}
.xb-fields{position:sticky;top:96px;flex:0 0 260px;box-sizing:border-box;padding:18px 14px}
a.xm-field{text-decoration:none}
.xb-main{flex:1 1 auto;min-width:0;padding:0 24px 12px;border-left:1px solid var(--rule)}
.xb-family{padding:14px 0 12px;border-bottom:1px solid var(--rule);scroll-margin-top:96px}
.xb-family:last-of-type{border-bottom:0}
.xb-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 12px}
.xb-head .exam-icon{width:36px;height:36px;border-radius:10px}
.xb-head .exam-icon svg{width:22px;height:22px}
.xb-fname{flex:1;margin:0;font-family:var(--f-display);font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.xm-row{display:flex;align-items:center;gap:16px;padding:12px;border-radius:14px}
.xm-soon .xm-name{color:var(--ink-2)}
.xm-soontag{border:1px dashed var(--rule-strong);background:transparent}
@media (max-width:860px){
  .xb{border-radius:20px}
  .xb > .xm-bar{padding:16px;border-bottom:1px solid var(--rule)}
  .xb-body{display:block}
  .xb-fields{position:static;padding:12px 16px 0}
  .xb-fields{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
  .xb-fields .xm-list{display:contents}
  .xb-fields li{flex:none}
  .xb-fields .xm-field{flex:none;width:auto;min-height:44px;margin:0;padding:4px 14px 4px 4px;border:1px solid var(--rule);border-radius:999px;
    font-size:15px;white-space:nowrap}
  .xb-fields .xm-field .exam-icon{width:34px;height:34px;border-radius:999px}
  .xb-fields .xm-field .exam-icon svg{width:20px;height:20px}
  .xb-main{padding:0 16px 8px;border-left:0}
  .xb-head{padding:0}
  .xb-fname{font-size:22px}
  .xm-row{padding:14px 0;border-radius:0;border-bottom:1px solid var(--rule)}
}

@media (prefers-reduced-motion:reduce){
  .sw-hero::before,.sw-phone,.chrome-brand::after,.chrome-brand::before,.chrome-sheet:not([hidden]){animation:none}
  .btn,.sw-cta,.sw-quiet,.chrome-cta,.sw-card{transition:background .2s,border-color .2s}
  .btn:hover,.btn:active,.sw-cta:hover,.sw-cta:active,.sw-quiet:hover,.sw-quiet:active,.chrome-cta:hover,.chrome-cta:active,.sw-card:hover{transform:none}
}

/* ==========================================================================
   THE HOME PAGE'S MOVING PARTS (./home.ts): the numbers band, the feature cards, the plan calendar,
   the memory curve, the readiness bars and the app's screens behind tabs — the canvas board
   R3-HomeStyled. Computed widths and positions use style.css's data-fill / data-at ladders; the
   script sets [data-reveal="pending"] on a section until it scrolls into view, so without the script
   (or with reduced motion, where it never sets it) every section is drawn finished.
   ========================================================================== */
.hm-sect{padding:clamp(3.5rem,8vw,6.5rem) 0 0;display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.75rem)}
.hm-intro{display:flex;flex-direction:column;gap:14px;max-width:44rem}
.hm-h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.06;
  letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.hm-lead{margin:0;font-size:1.12rem;color:var(--ink-2);max-width:52ch}
.hm-card{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(1.25rem,2.6vw,2rem);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-l)}
.hm-panel{padding:clamp(20px,3vw,36px);gap:clamp(18px,2.4vw,28px)}
.hm-ct{margin:0;font-family:var(--f-display);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hm-ctl{font-size:1.6rem}
.hm-cb{margin:0;color:var(--ink-2)}
.hm-caption{margin:0;font-size:13px;color:var(--ink-3)}
.hm-big{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4vw,2.75rem);letter-spacing:-.04em;line-height:1.05;
  color:var(--ink);font-variant-numeric:tabular-nums}
.hm-accent{color:var(--accent)}

/* The numbers band: counts up once, when it is seen. */
.hm-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;padding-top:clamp(2rem,5vw,3.5rem)}
.hm-stat{margin:0;display:flex;flex-direction:column;gap:6px;padding:28px 32px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l)}
.hm-num{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,6vw,4rem);letter-spacing:-.04em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.hm-stat-accent .hm-num{color:var(--accent)}
.hm-from{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.hm-statlabel{color:var(--ink-2)}

/* The feature cards, each with a small graph that loops. */
.hm-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:18px;align-items:stretch}
.hm-col{display:flex;flex-direction:column;gap:18px}
.hm-col .hm-card{flex:1}
.hm-graph{position:relative;height:96px;margin-top:auto;padding-top:14px}
.hm-graph:has(.hm-ring){display:flex;align-items:center;gap:18px}
.hm-graph:has(.hm-hb){display:flex;flex-direction:column;justify-content:center;gap:12px}
.hm-graph svg{display:block;width:100%;height:100%;overflow:visible}
.hm-spark{display:flex;align-items:flex-end;gap:5px;height:100%;margin-right:56px}
.hm-spark i{flex:1;border-radius:4px 4px 2px 2px;background:var(--accent);transform-origin:bottom;animation:hmGrowY 6s ease-in-out infinite}
.hm-spark i:nth-child(3n){background:#AFC1FF}
.hm-spark i:nth-child(1){height:34%}.hm-spark i:nth-child(2){height:40%;animation-delay:.06s}.hm-spark i:nth-child(3){height:46%;animation-delay:.12s}
.hm-spark i:nth-child(4){height:30%;animation-delay:.18s}.hm-spark i:nth-child(5){height:52%;animation-delay:.24s}.hm-spark i:nth-child(6){height:58%;animation-delay:.3s}
.hm-spark i:nth-child(7){height:44%;animation-delay:.36s}.hm-spark i:nth-child(8){height:62%;animation-delay:.42s}.hm-spark i:nth-child(9){height:68%;animation-delay:.48s}
.hm-spark i:nth-child(10){height:50%;animation-delay:.54s}.hm-spark i:nth-child(11){height:74%;animation-delay:.6s}.hm-spark i:nth-child(12){height:80%;animation-delay:.66s}
.hm-spark i:nth-child(13){height:66%;animation-delay:.72s}.hm-spark i:nth-child(14){height:88%;animation-delay:.78s}
@keyframes hmGrowY{0%,6%{transform:scaleY(0)}22%,82%{transform:scaleY(1)}96%,100%{transform:scaleY(0)}}
.hm-flag{position:absolute;right:0;top:18px;bottom:0;padding-left:8px;border-left:2px dashed var(--ink);font-size:12px;font-weight:600;line-height:1;color:var(--ink)}
.hm-decay{fill:none;stroke:var(--rule-strong);stroke-width:2;stroke-dasharray:4 5;vector-effect:non-scaling-stroke;opacity:.6}
.hm-saw{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:1;stroke-dashoffset:1;animation:hmDraw 6s ease-in-out infinite}
@keyframes hmDraw{0%{stroke-dashoffset:1}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.hm-pop{fill:var(--surface);stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;
  opacity:0;animation:hmPop 6s ease-in-out infinite}
.hm-pop:nth-of-type(2){animation-delay:.5s}.hm-pop:nth-of-type(3){animation-delay:1.1s}
@keyframes hmPop{0%,12%{opacity:0;transform:scale(.2)}18%,85%{opacity:1;transform:scale(1)}100%{opacity:0}}
.hm-graph svg.hm-ring{flex:none;width:96px;height:96px;transform:rotate(-90deg)}
.hm-ringtrack{fill:none;stroke:var(--surface-2);stroke-width:10}
.hm-ringfill{fill:none;stroke:var(--accent);stroke-width:10;stroke-linecap:round;stroke-dasharray:1 1;animation:hmRing 10s linear infinite}
@keyframes hmRing{from{stroke-dashoffset:0}to{stroke-dashoffset:-1}}
.hm-mockfacts{display:flex;flex-direction:column;gap:4px}
.hm-mocknum{font-family:var(--f-display);font-weight:700;font-size:30px;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.hm-mocknum small{font-family:var(--f-body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.hm-mockexam{font-size:12px;color:var(--ink-3)}
.hm-hb{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2)}
.hm-hb > span:first-child{flex:none;width:62px}
.hm-hbtrack{position:relative;flex:1;height:10px;border-radius:99px;background:var(--surface-2)}
.hm-hbtrack i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent);transform-origin:left;animation:hmGrowX 6s ease-in-out infinite}
.hm-hb:nth-child(2) .hm-hbtrack i{animation-delay:.15s}.hm-hb:nth-child(3) .hm-hbtrack i{animation-delay:.3s}
.hm-hbtrack b{position:absolute;top:-4px;bottom:-4px;border-left:2px dashed var(--ink)}
@keyframes hmGrowX{0%,8%{transform:scaleX(0)}40%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.hm-why{padding-bottom:0;overflow:hidden;background:linear-gradient(180deg,#E9EDFF 0%,#F4F6FD 100%);border-color:#DCE3FF}
:root[data-theme="dark"] .hm-why{background:var(--surface-2);border-color:var(--rule)}
.hm-whyphone{display:block;width:270px;max-width:100%;height:340px;margin:auto auto 0;padding:8px 8px 0;box-sizing:border-box;
  border-radius:44px 44px 0 0;background:#14161C}
.hm-whyphone img{display:block;width:100%;height:100%;object-fit:cover;object-position:bottom;border-radius:36px 36px 0 0}

/* The plan calendar: one square per day, coloured by what the day is for. */
.hm-planhead{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center}
.hm-weekslabel{display:flex;flex-direction:column;gap:2px;flex:1 1 220px;min-width:0;font-size:15px;color:var(--ink-2)}
.hm-range{position:relative;flex:2 1 300px;min-width:0;height:44px}
.hm-range::before,.hm-rangefill{content:"";position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:99px}
.hm-range::before{right:0;background:var(--surface-2)}
.hm-rangefill{background:var(--accent)}
.hm-range input{position:relative;display:block;width:100%;height:44px;margin:0;padding:0;background:transparent;border:0;cursor:pointer;
  -webkit-appearance:none;appearance:none}
.hm-range input::-webkit-slider-runnable-track{height:8px;background:transparent}
.hm-range input::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;
  background:#FFFFFF;border:3px solid var(--accent);box-shadow:0 6px 16px rgba(46,85,245,.35)}
.hm-range input::-moz-range-track{height:8px;background:transparent}
.hm-range input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#FFFFFF;border:3px solid var(--accent)}
.hm-range input:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.hm-learning{margin:0;display:flex;flex-direction:column;font-size:14px;color:var(--ink-2)}
.hm-calwrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.hm-weeks,.hm-cal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,56px);gap:5px}
.hm-weeks{height:16px;font-size:11px;color:var(--ink-3)}
.hm-weeks > span{overflow:hidden;white-space:nowrap}
.hm-wshort{display:none}
.hm-cal{grid-template-rows:repeat(7,auto);clip-path:inset(-6px);transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1)}
.hm-calwrap:has(.hm-cal[data-dense]) .hm-weeks,.hm-cal[data-dense]{gap:3px}
[data-reveal="pending"] .hm-cal{clip-path:inset(-6px 100% -6px -6px)}
.hm-day{display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:8px;font:inherit;font-size:14px;
  font-weight:700;color:var(--on-subject);background:var(--accent);cursor:pointer;transition:filter .15s}
.hm-day:hover{filter:brightness(1.08)}
.hm-day:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[data-phase="a"]{background:var(--marker);color:#0E1116}
[data-phase="p0"]{background:var(--subject-blue)}[data-phase="p1"]{background:var(--subject-forest)}
[data-phase="p2"]{background:var(--subject-oxblood)}[data-phase="p3"]{background:var(--subject-plum)}
[data-phase="p4"]{background:var(--subject-teal)}[data-phase="p5"]{background:var(--subject-amber)}
[data-phase="m"]{background:var(--ink);color:var(--surface)}
[data-phase="e"]{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.hm-day[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.hm-day[data-phase="e"][aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 2px var(--surface),0 0 0 4px var(--ink)}
.hm-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.hm-legend li{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--ground);font-size:14px;color:var(--ink)}
.hm-legend i{flex:none;width:12px;height:12px;border-radius:4px}
.hm-legendn{color:var(--ink-3)}
.hm-detail{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;min-height:26px;margin:0;padding:16px 20px;border-radius:18px;background:var(--ground)}
.hm-detail b{font-family:var(--f-display);color:var(--ink)}

/* The memory curve and the readiness bars, side by side from 960px. */
.hm-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(460px,100%),1fr));gap:18px;padding-top:18px}
.hm-seg{display:inline-flex;flex-wrap:wrap;align-self:flex-start;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2)}
.hm-seg button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:inherit;
  font-size:14px;font-weight:500;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.hm-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(30,44,110,.12)}
.hm-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hm-chart{position:relative;aspect-ratio:600/240;margin:34px 0 0 34px}
.hm-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hm-axis{position:absolute;font-size:12px;color:var(--ink-2)}
.hm-axistop{left:-34px;top:-4px}
.hm-axisbottom{left:-22px;bottom:-6px}
.hm-gridv{stroke:var(--surface-2);stroke-dasharray:3 5}
.hm-gridh{stroke:var(--surface-2)}
.hm-base{stroke:var(--rule)}
.hm-examline{stroke:var(--ink);stroke-width:2;stroke-dasharray:5 5}
.hm-stoplic{stop-color:var(--accent);stop-opacity:.38}
.hm-stoponce{stop-color:#E5484D;stop-opacity:.3}
.hm-stopend{stop-opacity:0}
.hm-area{opacity:.12;transition:opacity .5s}
.hm-areaonce{fill:url(#hm-g-once)}
.hm-arealic{fill:url(#hm-g-lic)}
.hm-mem[data-mem="once"] .hm-areaonce,.hm-mem[data-mem="lic"] .hm-arealic{opacity:1}
.hm-curve{fill:none;stroke:var(--rule-strong);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;
  opacity:.6;transition:stroke-dashoffset 1.8s ease-out,stroke .3s,stroke-width .3s,opacity .3s}
.hm-mem[data-mem="once"] .hm-once{stroke:#E5484D;stroke-width:3.5;opacity:1;filter:drop-shadow(0 6px 10px rgba(229,72,77,.35))}
.hm-mem[data-mem="lic"] .hm-lic{stroke:var(--accent);stroke-width:3.5;opacity:1;filter:drop-shadow(0 6px 10px rgba(46,85,245,.4))}
.hm-rev{fill:var(--surface);stroke:var(--accent);stroke-width:3;opacity:0;transition:opacity .35s ease}
.hm-rev:nth-of-type(2){transition-delay:.12s}.hm-rev:nth-of-type(3){transition-delay:.24s}
.hm-rev:nth-of-type(4){transition-delay:.36s}.hm-rev:nth-of-type(5){transition-delay:.48s}
.hm-mem[data-mem="lic"] .hm-rev{opacity:1}
.hm-endlic,.hm-endonce{fill:var(--rule-strong)}
.hm-mem[data-mem="lic"] .hm-endlic{fill:var(--accent)}
.hm-mem[data-mem="once"] .hm-endonce{fill:#E5484D}
.hm-head{display:none}
.hm-mem[data-mem="lic"] .hm-headlic,.hm-mem[data-mem="once"] .hm-headonce{display:inline}
.hm-headlic circle{fill:var(--accent)}
.hm-headonce circle{fill:#E5484D}
.hm-halo{opacity:.18}
.hm-headdot{stroke:#FFFFFF;stroke-width:3}
.hm-tag{position:absolute;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;color:#FFFFFF;
  transition:opacity .4s,transform .4s}
.hm-tagexam{right:0;top:-34px;transform:translateX(50%);background:var(--ink);color:var(--surface)}
.hm-taglic,.hm-tagonce{right:6%;opacity:.25;transform:translateY(4px)}
.hm-taglic{top:17%;background:var(--accent)}
.hm-tagonce{top:70%;background:#E5484D}
.hm-mem[data-mem="lic"] .hm-taglic,.hm-mem[data-mem="once"] .hm-tagonce{opacity:1;transform:none}
[data-reveal="pending"] .hm-curve{stroke-dashoffset:1}
[data-reveal="pending"] .hm-area,.hm-mem[data-reveal="pending"] .hm-rev,.hm-mem[data-reveal="pending"] .hm-tag{opacity:0}
.hm-xaxis{display:flex;justify-content:space-between;margin:0 0 0 34px;font-size:13px;color:var(--ink-2)}
.hm-note{margin:0;font-size:16px;color:var(--ink)}
.hm-mem[data-mem="lic"] .hm-noteonce,.hm-mem[data-mem="once"] .hm-notelic{display:none}
.hm-rows{display:flex;flex-direction:column;gap:22px;padding-top:8px}
.hm-row{display:flex;flex-direction:column;gap:8px}
.hm-rowhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
.hm-rowlabel{font-size:16px;font-weight:500;color:var(--ink)}
.hm-rowall .hm-rowlabel{font-size:18px;font-weight:700}
.hm-rowval{font-size:14px;color:var(--ink-2)}
.hm-pct{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--accent)}
.hm-pct[data-ok="false"]{color:var(--warn)}
.hm-track{position:relative;display:block;height:14px;border-radius:99px;background:var(--surface-2)}
.hm-rowall .hm-track{height:22px}
.hm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent);transition:width .7s cubic-bezier(.2,.8,.2,1),background .3s}
.hm-fill[data-ok="false"]{background:#E08A00}
[data-reveal="pending"] .hm-fill{width:0}
.hm-mark{position:absolute;top:-6px;bottom:-6px;border-left:2px dashed var(--ink)}
.hm-verdict{display:flex;align-items:center;gap:12px;margin:0;padding:14px 18px;border-radius:18px;font-weight:500;
  background:var(--warn-wash);color:var(--warn);transition:background .3s}
.hm-verdict[data-pass="true"]{background:var(--good-wash);color:var(--good)}
.hm-verdicticon{font-size:20px}

/* A look inside the app: tabs, and the screen they name. */
.hm-inside{flex-direction:row;flex-wrap:wrap;align-items:center;gap:56px}
.hm-insidecopy{display:flex;flex-direction:column;gap:18px;flex:1 1 420px;min-width:0}
.hm-tabs{display:flex;flex-direction:column;gap:8px;padding-top:6px}
.hm-tabs [role="tab"]{display:flex;flex-direction:column;gap:2px;width:100%;padding:16px 20px;border:1px solid transparent;border-radius:18px;
  background:transparent;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.hm-tabs [role="tab"][aria-selected="true"]{background:var(--surface);border-color:var(--rule)}
.hm-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hm-tabs b{font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;color:var(--ink)}
.hm-tabs span{font-size:15px}
.hm-tabbar{display:block;height:3px;margin-top:8px;overflow:hidden;border-radius:99px;background:var(--rule);opacity:0}
.hm-tabbar::after{content:"";display:block;width:0;height:100%;background:var(--accent)}
[data-auto] [aria-selected="true"] .hm-tabbar{opacity:1}
[data-auto] [aria-selected="true"] .hm-tabbar::after{animation:hmTab 4s linear forwards}
@keyframes hmTab{to{width:100%}}
.hm-insidephone{display:flex;justify-content:center;flex:1 1 300px;padding-block:20px}
.hm-screen{display:grid;width:min(330px,100%);padding:9px;border-radius:50px;background:#14161C;
  box-shadow:0 50px 90px rgba(30,44,110,.25),0 8px 20px rgba(30,44,110,.12)}
.hm-shot{grid-area:1/1;opacity:0;transition:opacity .5s ease}
.hm-shot[data-on]{opacity:1}
.hm-shot img{display:block;width:100%;height:auto;border-radius:42px}

@media (max-width:640px){
  .hm-wlong{display:none}
  .hm-wshort{display:inline}
  .hm-stat{padding:22px 24px}
  .hm-tagexam{transform:none}
  .hm-inside{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .hm-spark i,.hm-saw,.hm-pop,.hm-ringfill,.hm-hbtrack i{animation:none}
  .hm-saw{stroke-dashoffset:0}
  .hm-pop{opacity:1}
  .hm-cal,.hm-curve,.hm-fill,.hm-rev,.hm-area,.hm-tag,.hm-shot,.hm-seg button,.hm-verdict{transition:none}
  .hm-mem[data-mem] .hm-head{display:none}
  [data-auto] [aria-selected="true"] .hm-tabbar{opacity:0}
}

/* The rest of the canvas board (./home.ts): the centred hero with the family tiles, how it works, the
   exams as chips, the three prices and the closing band. */
.hm-hero{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
/* The heading shrinks on a phone so «Learn everywhere.», the widest of the turning words (8em), stays on one line. */
.hm-thesis{margin:0;font-family:var(--f-display);font-weight:700;font-size:min(max(3rem,6.6vw),12vw - 4px,5.25rem);line-height:1.04;
  letter-spacing:-.035em;color:var(--ink);max-width:15ch;text-wrap:balance}
.hm-thesis > span{display:block}
.hm-thesis .it{font-size:1.1em}
/* The caret the script types the hero's word behind: steady while it types, blinking while it waits. */
@keyframes hmBlink{50%{opacity:0}}
.hm-caret{display:inline-block;width:.07em;height:.82em;margin-left:.04em;vertical-align:-.06em;background:currentColor;
  animation:hmBlink 1s steps(1) infinite}
.hm-caret[data-busy]{animation:none}
.hm-herolede{margin:0;font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-2);max-width:46ch}
.hm-herocta{justify-content:center;padding-top:4px}
.hm-heronote{margin:0;font-size:14px;color:var(--ink-2)}
.hm-hero .sw-phones{width:100%;margin-top:clamp(1.5rem,4vw,3rem)}
[data-colour="blue"]{background:var(--subject-blue)}[data-colour="forest"]{background:var(--subject-forest)}
[data-colour="oxblood"]{background:var(--subject-oxblood)}[data-colour="marine"]{background:var(--subject-marine)}
[data-colour="teal"]{background:var(--subject-teal)}[data-colour="slate"]{background:var(--subject-slate)}
[data-colour="plum"]{background:var(--subject-plum)}[data-colour="amber"]{background:var(--subject-amber)}
.hm-tile{position:absolute;z-index:3;display:grid;place-items:center;width:76px;height:76px;border-radius:22px;color:var(--on-subject);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.22),0 18px 34px rgba(20,30,60,.2);animation:hmBob1 6s ease-in-out infinite}
.hm-tile svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hm-tile:nth-of-type(1){left:2%;top:6%}
.hm-tile:nth-of-type(2){right:3%;top:4%;animation-name:hmBob2;animation-duration:7s;animation-delay:-2s}
.hm-tile:nth-of-type(3){left:24%;bottom:10%;animation-name:hmBob3;animation-duration:6.5s;animation-delay:-1s}
.hm-tile:nth-of-type(4){right:23%;bottom:13%;animation-name:hmBob4;animation-duration:7.5s;animation-delay:-3s}
@keyframes hmBob1{0%,100%{transform:translateY(0) rotate(-9deg)}50%{transform:translateY(-16px) rotate(-4deg)}}
@keyframes hmBob2{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes hmBob3{0%,100%{transform:translateY(0) rotate(6deg)}50%{transform:translateY(-12px) rotate(10deg)}}
@keyframes hmBob4{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-15px) rotate(-11deg)}}
.hm-centre{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hm-centre .hm-lead{max-width:none}
.hm-band2{display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);margin-top:clamp(3.5rem,8vw,6.5rem);
  padding:clamp(48px,8vw,96px) clamp(20px,4vw,48px);border:1px solid var(--rule);border-radius:var(--r-xl);
  background:radial-gradient(50% 60% at 10% 0%,rgba(201,186,255,.45),rgba(201,186,255,0) 70%),linear-gradient(180deg,#E3E9FF 0%,#F1F4FC 100%)}
:root[data-theme="dark"] .hm-band2{background:var(--surface-2)}
.hm-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px;margin:0;padding:0;list-style:none}
.hm-stepn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule);border-radius:50%;background:var(--surface);
  font-family:var(--f-display);font-weight:700;color:var(--accent)}
.hm-exams{align-items:center;text-align:center}
.hm-exams .hm-h2{max-width:18ch}
.hm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin:0;padding:0;list-style:none}
.hm-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);font-size:15px;color:var(--ink);text-decoration:none;text-align:left}
.hm-chip:hover,.hm-chip:visited{color:var(--ink)}
.hm-chip:hover{border-color:var(--ink)}
.hm-chip i{flex:none;width:8px;height:8px;border-radius:50%}
.hm-chip i:not([data-colour]){background:var(--accent)}
.hm-chipall,.hm-chipall:visited,.hm-chipall:hover{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.hm-prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
.hm-pricecard{gap:8px}
.hm-pricecard > a{margin-top:auto}
.hm-pricemain{border:1.5px solid var(--accent);box-shadow:0 30px 60px rgba(46,85,245,.12)}
.hm-pricetop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hm-pricename{margin:0;font-family:var(--f-display);font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.hm-amount{margin:0;font-family:var(--f-display);font-size:44px;font-weight:700;line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.hm-pricesub{margin:0;font-size:14px;color:var(--ink-2)}
.hm-pricebody{margin:0;padding:10px 0 18px;color:var(--ink-2)}
.hm-badge{padding:5px 12px;border-radius:999px;background:var(--accent-wash);color:var(--accent);font-size:13px;font-weight:600;white-space:nowrap}
.hm-once{align-self:flex-start;font-size:15px;color:var(--ink)}
.hm-pen{position:relative;display:inline-block;white-space:nowrap}
.hm-pen svg{position:absolute;left:-4%;bottom:-.2em;width:108%;height:.45em;overflow:visible;pointer-events:none}
.hm-pen path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hm-dark,.hm-dark:visited{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;
  background:var(--ink);color:var(--surface);font-weight:600;font-size:16px;text-decoration:none;transition:background .2s}
.hm-dark:hover{background:var(--accent);color:var(--on-accent)}
.hm-closing{display:flex;flex-direction:column;align-items:center;gap:24px;margin-top:clamp(3.5rem,8vw,6.5rem);
  padding:clamp(64px,10vw,110px) clamp(20px,4vw,48px);border-radius:var(--r-xl);text-align:center;
  background:radial-gradient(40% 50% at 15% 10%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(40% 50% at 85% 90%,rgba(201,186,255,.55),rgba(201,186,255,0) 70%),linear-gradient(160deg,#C9D5FF 0%,#E6ECFD 100%)}
:root[data-theme="dark"] .hm-closing{background:var(--hero)}
.hm-closing .hm-h2{max-width:16ch;font-size:clamp(2.4rem,5vw,4.1rem)}
.hm-closing .hm-lead{max-width:42ch}
.hm-closingicon{width:76px;height:76px;border-radius:18px;box-shadow:0 16px 36px rgba(1,73,244,.3)}
@media (max-width:860px){.hm-tile{display:none}}
@media (prefers-reduced-motion:reduce){
  .hm-tile,.hm-tile:nth-of-type(1),.hm-tile:nth-of-type(2),.hm-tile:nth-of-type(3),.hm-tile:nth-of-type(4),.hm-caret{animation:none}
  .hm-dark{transition:none}
}

/* A large price's cents: small and raised to the top of the figures (./home.ts `priceMarkup`). The
   separator is in the text for a screen reader, hidden from the eye. */
.hm-cents{display:inline-block;margin-left:.04em;font-size:.5em;line-height:1;letter-spacing:0;vertical-align:top;
  transform:translateY(.18em)}
.hm-dec{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* THE SAMPLE QUESTIONS, ANSWERED FIRST (shop.ts `sampleQuestion`): each option is a button filling its
   row. While a question asks, the key and the explanation are hidden; once answered, the pick is marked
   against the right answer, a wrong pick is struck through (design C1), and Continue appears. After the
   last, the result card: the score, a line on the method, and the way to it or back to the start. */
.sw-qopt:has(> .sw-qpick){padding:0}
.sw-qpick{display:flex;align-items:baseline;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;border-radius:inherit;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.sw-qpick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sw-qpick[aria-disabled="true"]{cursor:default}
.sw-qfeedback{margin:.8rem 0 0;font-size:.92rem;font-weight:600;color:var(--ink)}
.sw-qitem[data-quiz="ask"] .sw-qopt.sw-qopton{border-color:var(--rule);background:none;color:var(--ink-2)}
.sw-qitem[data-quiz="ask"] .sw-qopt:hover{border-color:var(--accent)}
.sw-qitem[data-quiz="ask"] .sw-qmark,.sw-qitem[data-quiz="ask"] .sw-qwhy{display:none}
.sw-qitem[data-quiz="ask"] .sw-qfeedback{font-weight:500;color:var(--ink-3)}
.sw-qitem[data-quiz="answered"] .sw-qopt[data-picked]:not(.sw-qopton){border-color:var(--bad);background:var(--bad-wash)}
.sw-qitem[data-quiz="answered"] .sw-qopt[data-picked]:not(.sw-qopton) .sw-qtext{text-decoration:line-through}
.sw-qitem+.sw-qitem,.sw-qitem+.sw-qresult{margin-top:1.4rem}
.sw-qitem[hidden],.sw-qresult[hidden],.sw-qnext[hidden],.sw-qscore[hidden]{display:none}
.sw-qstem:focus,.sw-qresult:focus{outline:none}
.sw-qnext{min-height:44px;padding:0 1.3rem;margin-top:1rem;font-size:.95rem}
.sw-qscore{font-family:var(--f-display);font-weight:700;font-size:1.6rem;line-height:1.2;color:var(--ink);margin:0 0 .6rem}
.sw-qactions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.sw-qagain{min-height:44px;padding:0 1.3rem;font-size:.95rem;cursor:pointer}

/* ==========================================================================
   AN EXAM'S PAGE (./exam-page.ts; the canvas's «Exam page»): the header in the exam's own branding template — its
   family's colour, its line icon large and faint behind the words — and the bar above it in white until the page
   scrolls; the parts in their subjects' colours; the free part on a dark panel.
   ========================================================================== */
.ex-hero{--fam:var(--accent);color:#FFFFFF}
.ex-hero[data-colour]{background:none}
.ex-hero[data-colour="blue"]{--fam:var(--subject-blue)}.ex-hero[data-colour="forest"]{--fam:var(--subject-forest)}
.ex-hero[data-colour="oxblood"]{--fam:var(--subject-oxblood)}.ex-hero[data-colour="marine"]{--fam:var(--subject-marine)}
.ex-hero[data-colour="teal"]{--fam:var(--subject-teal)}.ex-hero[data-colour="slate"]{--fam:var(--subject-slate)}
.ex-hero[data-colour="plum"]{--fam:var(--subject-plum)}.ex-hero[data-colour="amber"]{--fam:var(--subject-amber)}
.ex-hero::before{animation:none;background:radial-gradient(55% 80% at 88% 18%,rgba(255,255,255,.16),rgba(255,255,255,0) 70%),
  linear-gradient(100deg,rgba(5,15,30,.42) 0%,rgba(5,15,30,0) 65%),var(--fam)}
/* The dark palette's subject colours are light, for text on navy; the header mixes its own down to carry white type. */
:root[data-theme="dark"] .ex-hero::before{background:radial-gradient(55% 80% at 88% 18%,rgba(255,255,255,.08),rgba(255,255,255,0) 70%),
  color-mix(in srgb,var(--fam) 34%,#031439)}
/* Above the page, its family's colour, as the band's (the root's background, under «The page's frame»). */
:root:has(.ex-hero){--bar:var(--accent);background:var(--bar)}
:root:has(.ex-hero[data-colour="blue"]){--bar:var(--subject-blue)}:root:has(.ex-hero[data-colour="forest"]){--bar:var(--subject-forest)}
:root:has(.ex-hero[data-colour="oxblood"]){--bar:var(--subject-oxblood)}:root:has(.ex-hero[data-colour="marine"]){--bar:var(--subject-marine)}
:root:has(.ex-hero[data-colour="teal"]){--bar:var(--subject-teal)}:root:has(.ex-hero[data-colour="slate"]){--bar:var(--subject-slate)}
:root:has(.ex-hero[data-colour="plum"]){--bar:var(--subject-plum)}:root:has(.ex-hero[data-colour="amber"]){--bar:var(--subject-amber)}
:root[data-theme="dark"]:has(.ex-hero){background:color-mix(in srgb,var(--bar) 34%,#031439)}
.ex-heroart{position:absolute;right:-3%;top:4%;width:min(44vw,520px);height:auto;fill:none;stroke:rgba(255,255,255,.12);
  stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ex-herogrid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:960px){.ex-herogrid{grid-template-columns:minmax(0,1.45fr) minmax(320px,.8fr);align-items:start}}
.ex-herocopy{display:flex;flex-direction:column;gap:18px;min-width:0}
.ex-crumbs{display:flex;gap:8px;align-items:center;font-size:14px}
.ex-crumbs a{color:#FFFFFF;opacity:.85;text-decoration:none}.ex-crumbs a:hover{opacity:1;color:#FFFFFF}
.ex-crumbs span{opacity:.6}
.ex-kicker{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
.ex-tile{flex:none;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--fam) 78%,#000000);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 12px 24px rgba(0,0,0,.18)}
.ex-tileicon{width:30px;height:30px;fill:none;stroke:#FFFFFF;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ex-hero .lbl{margin:0;color:rgba(255,255,255,.82);font-size:15px;font-weight:600}
.ex-hero h1.s{margin:0;color:#FFFFFF;font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,5.6vw,4.6rem);
  line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.ex-tagline{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.2;letter-spacing:-.02em}
.ex-tagline .it{color:color-mix(in srgb,var(--fam) 22%,#FFFFFF)}
.ex-lede{margin:0;font-size:18px;max-width:50ch;color:rgba(255,255,255,.88)}
.ex-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0;padding:0}
.ex-chips li{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.15);font-size:15px;font-weight:500}
.ex-pricecard{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-l);background:var(--surface);
  color:var(--ink-2);box-shadow:0 30px 70px rgba(10,30,15,.3)}
.ex-pricetop{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ex-forgood{padding:5px 12px;border-radius:999px;background:var(--accent-wash);color:var(--accent);font-size:13px;font-weight:600}
.ex-pricecard .price{margin:0;font-family:var(--f-display);font-size:3.25rem;letter-spacing:-.04em;color:var(--ink)}
.ex-pricecard .price.unset{font-size:1.4rem;color:var(--ink-2)}
.ex-pricecard .pricesub{margin:0}
.ex-pricecard .ticks{margin:.2rem 0 0}
.ex-pricecard .actions{display:flex;flex-direction:column;gap:12px;margin:.4rem 0 0}
.ex-pricecard .actions .btn{width:100%;min-width:0;margin:0}
.ex-freenote{margin:0;font-size:13px;text-align:center}
/* THE BAR OVER THE COLOUR, at the top of the page: white words and the white-lettered logo; frosted again once
   the page scrolls, where it reads as on every other page. */
.wrap:has(.ex-hero) .chrome:not([data-scrolled]){color:#FFFFFF}
.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-nav a,.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-link,
.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-burger{color:#FFFFFF}
.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-brand:has(.chrome-logo-dark) .chrome-logo-light{display:none}
.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-brand:has(.chrome-logo-dark) .chrome-logo-dark{display:block}
.wrap:has(.ex-hero) .chrome:not([data-scrolled]) .chrome-brand:has(.chrome-logo-dark)::after{background-image:url("/brand/logo-dark.png")}

.ex-glance > p.s{max-width:62ch;font-size:1.05rem;color:var(--ink-2)}
.ex-nums{display:flex;flex-wrap:wrap;gap:16px 44px;margin:1.4rem 0 1.6rem}
.ex-nums div{display:flex;flex-direction:column}
.ex-nums b.num{font-size:clamp(2.6rem,5vw,3.4rem)}
.ex-nums span{color:var(--ink-2)}
.ex-parts{display:flex;gap:6px;min-height:72px;margin:.6rem 0 1.1rem}
.ex-part{flex:1 1 auto;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:10px 14px;border-radius:14px;color:var(--on-subject)}
.ex-part:not([data-colour]){background:var(--accent);color:var(--on-accent)}
/* The part's official name, whole: it wraps rather than lose its end to an ellipsis. */
.ex-part b{font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.ex-part span{font-size:13px;opacity:.88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.ex-parts{flex-direction:column}.ex-part{width:auto}.ex-nums{gap:12px 26px}}
.ex-marks{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.ex-marks li{padding:8px 16px;border-radius:999px;background:var(--ink);color:var(--surface);font-weight:500;font-size:15px}
.ex-session{margin:1rem 0 0;color:var(--ink-2)}
.ex-structure{margin:1.6rem 0 0}
.ex-structure summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:600;color:var(--ink);list-style:none}
.ex-structure summary::-webkit-details-marker{display:none}
.ex-structure summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.ex-structure[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:16px;margin:1.6rem 0 0}
.card.ex-item{flex-direction:column;align-items:flex-start;gap:14px;color:var(--ink-2)}
.ex-n{flex:none;display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;box-sizing:border-box;border-radius:999px;
  background:var(--accent-wash);color:var(--accent);font-family:var(--f-display);font-weight:700;align-self:flex-start}
a.ex-gloss{text-decoration:none;transition:border-color .2s,transform .2s}
a.ex-gloss:hover{border-color:#C9D2E0;transform:translateY(-2px);color:var(--ink-2)}
.ex-free{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px;margin:clamp(3.5rem,8vw,6.5rem) 0 0;
  padding:clamp(2rem,5vw,3.5rem);border-radius:var(--r-xl);background:#0E1116;color:rgba(255,255,255,.82)}
.ex-free .sw-h2{color:#FFFFFF}.ex-free .it{color:#A8B8FB}.ex-free .sw-lead{color:rgba(255,255,255,.8)}
.ex-freecopy{flex:1 1 380px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ex-freelist{flex:1 1 320px}
.ex-freelist h3{margin:0 0 .6rem;font-family:var(--f-display);font-size:1.2rem;color:var(--ink)}
.ex-faq h2.s{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0 0 1.2rem}
.ex-faq h2.s + p.note{font-size:1rem;max-width:62ch}
.ex-qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:14px;margin:0 0 2.4rem}
.ex-qa .card{gap:6px}
.ex-qa h3.s{margin:0;font-size:1.1rem}
.ex-qa p.note{margin:0;font-size:1rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){a.ex-gloss{transition:none}a.ex-gloss:hover{transform:none}}

/* ==========================================================================
   THE WEBSITE'S OWN PAGES (./site-pages.ts): the app, where questions come from, about, help, legal, a family's
   hub, and the five-column footer. Drawn from the canvas «licento.com — website design», page Final, in the
   storefront's classes (./site.css) wherever one fits; these are the few it has no class for. After ./site.css.
   ========================================================================== */

.pg-hero{padding-bottom:clamp(1.5rem,4vw,2.5rem)}
.pg-hero .sw-thesis{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:18ch}
.pg-articletitle{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.pg-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--ink-2);margin:0 0 1rem}
.pg-crumbs a{color:var(--ink-2);text-decoration:none}
.pg-crumbs a:hover{color:var(--ink)}

/* Numbered steps, one card each, as many to a row as fit. */
.pg-steps{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.pg-stepcard{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);padding:clamp(1.25rem,2.6vw,2rem);
  display:flex;flex-direction:column;gap:10px}
.pg-stepcard .sw-h3{margin:0}
.pg-stepcard .sw-body{margin:0}

/* The app's page: where to get it, then its screens, full width below — three phones need the whole row. */
.pg-split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3rem)}
.pg-stack{display:flex;flex-direction:column;gap:14px;max-width:40rem}
.pg-phones{margin:0}
.pg-note{display:flex;flex-direction:column;gap:6px}
.pg-note .sw-h3,.pg-note .sw-body{margin:0}
.pg-note .sw-h3{font-size:1.25rem}
.pg-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}

/* The App Store badge: black, the store's own words. */
.pg-store{display:inline-flex;flex-direction:column;justify-content:center;min-height:56px;padding:0 22px;border-radius:16px;
  background:#0E1116;color:#FFFFFF;text-decoration:none}
.pg-store:hover{background:var(--accent);color:#FFFFFF}
.pg-store small{font-size:11px;opacity:.75;line-height:1.1}
.pg-store b{font-size:19px;font-weight:600;line-height:1.15}

/* Where a question comes from: three cards, the question, its fact, its source. */
.pg-trace{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pg-trace .card{display:flex;flex-direction:column;gap:10px}
.pg-trace .sw-lbl,.pg-trace .sw-h3,.pg-trace .sw-body{margin:0}
.pg-quote{margin:0;font-family:var(--f-display);font-size:1.15rem;line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.pg-meta{margin:0;font-size:14px;color:var(--ink-3)}

.pg-people{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pg-person{display:flex;flex-direction:column;align-items:stretch;gap:16px}
.pg-personbody{display:flex;flex-direction:column;gap:4px}
.pg-title{font-weight:600;color:var(--accent)}
.pg-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r)}
.pg-person b{display:block;margin:0}
.pg-avatar{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#EAEFFF;color:var(--accent);
  font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.pg-sitecard{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit}
.pg-more{color:var(--accent);font-weight:600;font-size:15px}

/* The help centre: a search on the band, topics in cards. */
.pg-search{display:flex;flex-wrap:wrap;gap:12px;max-width:640px;margin-top:1.5rem}
.pg-search input{flex:1 1 260px;min-height:52px;box-sizing:border-box;padding:0 1.25rem;border-radius:999px;
  border:1.5px solid #DDE3EC;background:var(--surface);color:var(--ink);font:inherit}
.pg-search input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(46,85,245,.14)}
.pg-search .btn{flex:none;width:auto;margin:0}
.pg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;padding-top:clamp(1.5rem,4vw,2.5rem)}
.pg-topic ul,.pg-related ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.pg-topic a,.pg-related a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-weight:500}
.pg-topic a:hover,.pg-related a:hover{color:var(--accent)}
.pg-topic .sw-h3,.pg-related .sw-h3{margin:0}
.pg-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pg-articlebody{display:flex;flex-direction:column;gap:12px}
.pg-articlebody p{margin:0;max-width:62ch}
@media (max-width:860px){.pg-article{grid-template-columns:1fr}}

/* Legal: the documents as cards, the company's details as a list. */
.pg-doclist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pg-doclist .sw-card{display:flex;flex-direction:column;gap:8px;height:100%;box-sizing:border-box;text-decoration:none;color:inherit}
.pg-facts{display:grid;grid-template-columns:max-content 1fr;gap:12px 28px;margin:0;max-width:44rem}
.pg-facts dt{font-weight:600;color:var(--ink)}
.pg-facts dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
@media (max-width:560px){.pg-facts{grid-template-columns:1fr;gap:2px}.pg-facts dd{margin-bottom:12px}}

/* The footer: five columns, then the settings and the copyright. */
.pg-foot{flex:1 1 100%;display:flex;flex-direction:column;align-items:stretch;gap:32px}
.pg-footcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px}
.pg-footcol{display:flex;flex-direction:column;gap:6px}
.pg-footrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--ink-3);font-size:14px}
.pg-footrow a{color:var(--ink-2)}
.pg-footrow a:hover{color:var(--ink)}
.pg-foothead{margin:0 0 4px;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.pg-footbase{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.pg-footnote{font-size:14px;color:var(--ink-3)}

/* Pricing: three columns, the free part, one exam, Premium. */
.pg-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding-top:clamp(1.5rem,4vw,2.5rem)}
.pg-plan{display:flex;flex-direction:column;gap:12px}
.pg-plan .sw-h3,.pg-plan .sw-freelist,.pg-plan .sw-ctarow{margin:0}
.pg-plan .sw-ctarow{margin-top:auto}
.pg-planlead{margin:0;color:var(--ink-2)}

/* An exam's glossary: an A–Z index on the band, the terms in cards, letter by letter. */
.pg-az{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.5rem}
.pg-az a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:12px;background:var(--surface);
  border:1px solid var(--rule);color:var(--ink);font-weight:600;text-decoration:none}
.pg-az a:hover{border-color:var(--accent);color:var(--accent)}
.pg-letter{padding-top:clamp(2rem,5vw,3rem)}
.pg-terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:1rem 0 0}
.pg-term{display:flex;flex-direction:column;gap:8px;scroll-margin-top:96px}
.pg-term dt{margin:0}
.pg-term dd{margin:0;display:flex;flex-direction:column;gap:8px}
.pg-term .sw-body,.pg-term .pg-meta{margin:0}

/* «Cookie settings» at the foot (./site-pages.ts siteFoot): a button, since it opens the banner rather than a page,
   drawn as the footer's links are. */
.pg-footbtn{appearance:none;align-self:flex-start;margin:0;padding:0;border:0;background:none;font:inherit;color:var(--ink-2);cursor:pointer;text-align:left}
.pg-footbtn:hover{color:var(--ink)}

/* THE CONSENT BANNER (./consent-banner.ts): the library's own sheet, set in the site's type and colours, both themes.
   «Accept all» and «Reject all» share one style (equalWeightButtons); «Choose» is the secondary one. */
#cc-main{--cc-font-family:var(--f-body);--cc-modal-border-radius:var(--r-l);--cc-btn-border-radius:999px;
  --cc-bg:var(--surface);--cc-primary-color:var(--ink);--cc-secondary-color:var(--ink-2);--cc-link-color:var(--accent);
  --cc-btn-primary-bg:var(--accent);--cc-btn-primary-color:var(--on-accent);--cc-btn-primary-border-color:var(--accent);
  --cc-btn-primary-hover-bg:var(--accent-bright);--cc-btn-primary-hover-color:var(--on-accent);
  --cc-btn-primary-hover-border-color:var(--accent-bright);
  --cc-btn-secondary-bg:var(--surface-2);--cc-btn-secondary-color:var(--ink);--cc-btn-secondary-border-color:var(--rule);
  --cc-btn-secondary-hover-bg:var(--accent-wash);--cc-btn-secondary-hover-color:var(--ink);
  --cc-btn-secondary-hover-border-color:var(--rule-strong);
  --cc-separator-border-color:var(--rule);--cc-toggle-on-bg:var(--accent);--cc-toggle-off-bg:var(--rule-strong);
  --cc-toggle-on-knob-bg:var(--surface);--cc-toggle-off-knob-bg:var(--surface);
  --cc-toggle-readonly-bg:var(--rule);--cc-toggle-readonly-knob-bg:var(--surface);--cc-toggle-readonly-knob-icon-color:var(--rule-strong);
  --cc-cookie-category-block-bg:var(--surface-2);--cc-cookie-category-block-border:var(--rule);
  --cc-cookie-category-block-hover-bg:var(--accent-wash);--cc-cookie-category-block-hover-border:var(--rule);
  --cc-cookie-category-expanded-block-bg:var(--surface);--cc-cookie-category-expanded-block-hover-bg:var(--surface-2);
  --cc-section-category-border:var(--rule);
  --cc-footer-bg:var(--surface-2);--cc-footer-color:var(--ink-2);--cc-footer-border-color:var(--rule);
  --cc-overlay-bg:rgba(14,17,22,.55)}
#cc-main .cm__title,#cc-main .pm__title{font-family:var(--f-display)}
/* Premium's prices, the cents small and raised (./home.ts `priceMarkup`). Line height 1, so the cents' top meets the
   figures' top rather than the top of a taller line. */
.pg-planprices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pg-planprices li{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.pg-planprices b{font-family:var(--f-display);font-size:1.4rem;line-height:1;letter-spacing:-.02em;color:var(--ink)}

/* Cards side by side in a grid: style.css's «.card + .card» space is for cards stacked in a column, and in a row it
   only pushes every card after the first down. */
.pg-two > .card,.pg-people > .card,.pg-trace > .card,.pg-topics > .card,.pg-plans > .card,.pg-article > .card,
.pg-terms > .card{margin-top:0}

/* A button after a row of cards: room between them, not touching. */
.sw-strip + .sw-ctarow{margin-top:1.5rem}

/* The store badges in the footer: black pills in the stores' own words, one column as wide as the wider, so they line
   up; Google Play's is not a link until Android ships, so it stays black and only its words are dimmed. Two classes,
   because site.css's `.foot a` grey outranks one. */
.pg-badges{display:grid;justify-content:start;gap:10px}
.pg-badges .pg-badge{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px 0 14px;border-radius:12px;
  background:#0E1116;color:#FFFFFF;text-decoration:none;line-height:1.1}
.pg-badges a.pg-badge:hover{background:var(--accent);color:#FFFFFF}
.pg-badge svg{flex:none;width:22px}
.pg-badge small{display:block;font-size:10px;opacity:.8;letter-spacing:.02em}
.pg-badge b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.pg-badgesoon > *{opacity:.6}
:root[data-theme="dark"] .pg-badges .pg-badge{background:#FFFFFF;color:#0E1116}
/* THE BRAND'S PROFILES under «About» (./site-pages.ts `socialLinks`): weighed as the links above them are — the glyph
   alone in their grey, no ring (a 44px ring each outweighed the whole column, the owner, 21 October 2026). Each keeps a
   32px square to tap, past WCAG 2.2's 24px, and the row steps left so the first glyph stands under «About». */
.pg-social{display:flex;gap:4px;margin:4px 0 0 -7px}
.pg-social a{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--ink-2)}
.pg-social a:hover{color:var(--accent)}
.pg-social svg{width:18px;height:18px}
:root[data-theme="dark"] .pg-badges a.pg-badge:hover{background:#A8B8FB;color:#0E1116}

/* /contact: the form on the left, who we are and the other ways in on the right; one column on a phone. */
.pg-contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start;padding-top:clamp(1.5rem,4vw,2.5rem)}
.pg-contact > .card{margin-top:0}
.pg-contactform form{gap:16px}
.pg-contactform select,.pg-contactform input,.pg-contactform textarea{width:100%;box-sizing:border-box;font:inherit}
.pg-contactform textarea{min-height:160px;padding:.8rem 1rem;resize:vertical}
.pg-contactform input[readonly]{background:var(--surface-2);color:var(--ink-2)}
.pg-sent{display:flex;flex-direction:column;gap:10px}
.pg-sent .sw-h3,.pg-sent .sw-body{margin:0}
@media (max-width:860px){.pg-contact{grid-template-columns:1fr}}
/* Ask for an exam (/exams/request): its form is the contact form's, the country and the language side by side. */
.pg-erpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:16px}
.pg-erpair .field{margin:0}

/* /buy/{exam-id} (R3-Buy): what you get and the two boxes on the left, the summary and the button on the right, one
   form; one column on a phone. */
.pg-buy{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;align-items:start;padding-top:clamp(1rem,3vw,2rem)}
.pg-buy > .card,.pg-buymain{margin-top:0;display:flex;flex-direction:column;gap:22px}
.pg-buyexam .sw-h3{font-size:1.6rem;letter-spacing:-.02em}
.pg-buyget{display:flex;flex-direction:column;gap:8px}
.pg-buyget .sw-h3,.pg-buysum .sw-h3{margin:0;font-size:1.15rem}
.pg-ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pg-ticks li{position:relative;padding-left:30px;color:var(--ink-2)}
.pg-ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:14px;height:7px;border-left:2.4px solid var(--accent);
  border-bottom:2.4px solid var(--accent);transform:rotate(-45deg)}
.pg-buyconsent{display:flex;flex-direction:column;gap:14px;padding-top:18px;border-top:1px solid var(--rule)}
.pg-buyconsent p{margin:0}
.pg-check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink);cursor:pointer}
.pg-check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--accent);flex:none}
.pg-buysum{display:flex;flex-direction:column;gap:14px;position:sticky;top:100px}
.pg-buysum p{margin:0}
.pg-sumrow{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.pg-sumrow span + span{color:var(--ink);white-space:nowrap}
.pg-sumtotal{padding-top:12px;border-top:1px solid var(--rule)}
.pg-amount{font-family:var(--f-display);font-size:2.1rem;letter-spacing:-.035em;line-height:1}
.pg-buysum .btn{width:100%;margin-top:0}
.pg-owned{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 26px;
  border-radius:var(--r-l);background:var(--accent-wash);border:1px solid var(--rule)}
.pg-owned p{margin:0}
@media (max-width:860px){.pg-buy{grid-template-columns:1fr}.pg-buysum{position:static}}

/* /checkout/thank-you (R3-ThankYou): the tick, centred, then what happens next. */
.pg-thanks{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.pg-thanks .sw-thesis,.pg-thanks .sw-lede{margin:0}
.pg-thanks .sw-thesis{max-width:none}
.pg-thanks .sw-ctarow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0}
.pg-thanks .sw-ctarow .btn,.pg-owned .btn{width:auto;margin:0}
.pg-tick circle{fill:var(--accent);transform-origin:center;animation:pg-tick-in .5s cubic-bezier(.2,1.4,.4,1) both}
.pg-tick path{fill:none;stroke:#FFFFFF;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;
  stroke-dashoffset:60;animation:pg-tick-draw .45s .35s ease-out forwards}
@keyframes pg-tick-in{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes pg-tick-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.pg-tick circle{animation:none}.pg-tick path{animation:none;stroke-dashoffset:0}}
.pg-thanksnext{padding-top:clamp(1.5rem,4vw,2.5rem)}
.pg-nextsteps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--ink-2)}
/* The app's QR code beside its words, for a buyer on a computer; a phone cannot scan its own screen, so none there. The
   code keeps its own white ground and quiet zone in the dark theme too: a camera needs the contrast. */
.pg-qrrow{display:flex;gap:18px;align-items:center;padding-top:14px;border-top:1px solid var(--rule)}
.pg-qrrow .sw-body{margin:0}
.pg-qr{flex:none;width:132px;margin:0;border:1px solid var(--rule);border-radius:16px;overflow:hidden;line-height:0}
.pg-qr svg{display:block;width:100%;height:auto}
@media (max-width:860px){.pg-qrrow{display:none}}

/* ==========================================================================
   THE ACCOUNT (./account.ts): the band with the page's title, the account's own list on the left and its panels
   beside it (the canvas, boards R3-Account, R3-AccountExam, R3-Purchases, R3-Premium, R3-Settings). On a phone the
   list is one row above the panels, scrolled sideways.
   ========================================================================== */
.ac-hero{padding-bottom:clamp(1.5rem,4vw,2.75rem)}
.ac-hero .sw-thesis{font-size:clamp(2.4rem,5vw,4rem);max-width:18ch}
.ac-grid{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.ac-side{flex:1 1 200px;max-width:240px;display:flex;flex-direction:column;gap:4px}
.ac-side a,.ac-side button{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid transparent;
  background:none;color:var(--ink-2);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;text-align:left;
  box-sizing:border-box;width:100%}
.ac-side a:hover,.ac-side button:hover{background:var(--surface);color:var(--ink)}
.ac-side a[aria-current="page"]{background:var(--surface);color:var(--ink);border-color:var(--rule)}
.ac-side .ac-sidegap{margin-top:16px}
.ac-side form{margin:0}
.ac-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:18px}
@media (max-width:860px){
  .ac-grid{gap:20px}
  .ac-side{flex:1 1 100%;max-width:none;flex-direction:row;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .ac-side a,.ac-side button{width:auto;white-space:nowrap;flex:none}
  .ac-side .ac-sidegap{margin-top:0;margin-left:12px}
}

.ac-panel{background:var(--surface);border:1px solid var(--rule);border-radius:24px;padding:clamp(20px,3vw,26px) clamp(18px,3vw,28px);
  display:flex;flex-direction:column;gap:14px;margin:0}
.ac-panel p{margin:0}
.ac-ct{margin:0;font-family:var(--f-display);font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.25}
.ac-small{font-size:14px;color:var(--ink-3)}
.ac-panel .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-size:15px;padding:0 20px;margin:0;width:auto;align-self:flex-start}
.ac-panel form{margin:0}

/* The panel that says what to do next: the days left, large, and the one button. */
.ac-lead{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  background:linear-gradient(140deg,var(--accent-wash),var(--surface) 70%)}
.ac-leadtext{display:flex;align-items:center;gap:22px;flex:1 1 260px;min-width:0}
.ac-leadtext > div{display:flex;flex-direction:column;gap:2px}
.ac-big{font-family:var(--f-display);font-weight:700;font-size:clamp(44px,6vw,56px);letter-spacing:-.05em;line-height:1;color:var(--ink)}
.ac-lead .btn{align-self:center}

/* A line of a list inside a panel: what it is on the left, what to do with it on the right. */
.ac-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--rule)}
.ac-panel > .ac-ct + .ac-row{margin-top:2px}
.ac-rowtop{border-top:0;padding-top:0}
.ac-rowtext{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;color:var(--ink)}
.ac-rowtext b{font-weight:600}
.ac-rowacts{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ac-rowacts .btn{align-self:center}
.ac-link{font-weight:500}
.ac-date{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ac-date:hover{color:var(--ink)}
.ac-date svg{display:inline-block;vertical-align:-2px;margin-left:5px}
.ac-rowfoot{margin:0;padding-top:12px;border-top:1px solid var(--rule)}
.ac-rowfoot a{font-weight:500}
.ac-main > .ac-rowfoot{border-top:0;padding-top:0}
.ac-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:18px}
/* Free and Premium side by side: the one held is marked, and the way to the other is at its foot. */
.ac-tier{justify-content:flex-start}
.ac-tier[data-current]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ac-current{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--accent-wash);color:var(--accent);
  font-size:13px;font-weight:600}
.ac-tier .pg-ticks{flex:1}

/* Said back after a press, and a refusal. */
.ac-said{margin:0;padding:12px 14px;border-radius:14px;background:#E7F6EC;color:#1B6B3A}
.ac-refused{margin:0;padding:12px 14px;border-radius:14px;background:#FDECEC;color:#7A1D20}
:root[data-theme="dark"] .ac-said{background:#12351F;color:#BDEBCB}
:root[data-theme="dark"] .ac-refused{background:#3A1416;color:#F6C7C9}

/* The exam date: the published sessions to pick from, and «another date». */
.ac-form{display:flex;flex-direction:column;gap:14px}
.ac-choices{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.ac-choice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:56px;padding:8px 18px;border-radius:16px;
  border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;box-sizing:border-box}
.ac-choice:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.ac-choice:has(input:focus-visible){outline:2px solid var(--accent-bright);outline-offset:2px}
.ac-choice input[type="radio"]{accent-color:var(--accent);width:18px;height:18px;margin:0;flex:none}
.ac-choice > span:first-of-type{flex:1 1 auto}
.ac-choice input[type="date"]{min-height:44px;flex:0 1 220px;min-width:0}
.ac-fld{margin:0}
.ac-fld label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500;color:var(--ink);max-width:22rem}

/* After the date: three answers as cards, and the one chosen under them. */
.ac-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:12px}
.ac-card{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:18px;border:1.5px solid var(--rule);background:var(--surface);
  color:var(--ink);text-decoration:none}
.ac-card:hover{border-color:var(--rule-strong);color:var(--ink)}
.ac-card[aria-current="true"]{border-color:var(--accent);background:var(--accent-wash)}
.ac-chosen{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:16px;background:var(--ground)}

/* Premium's two plans; a receipt's facts; the panel that erases. */
.ac-plans{display:flex;flex-wrap:wrap;gap:10px}
.ac-facts{display:grid;grid-template-columns:200px 1fr;gap:10px 20px;margin:0;font-size:15px;padding-top:14px;border-top:1px solid var(--rule)}
.ac-facts dt{color:var(--ink-3)}
.ac-facts dd{margin:0;color:var(--ink)}
@media (max-width:560px){.ac-facts{grid-template-columns:1fr;gap:2px}.ac-facts dd{margin-bottom:10px}}
.ac-danger{border-color:#F3C9CB}
.ac-danger .ac-ct{color:#A1262B}
.ac-panel .btn.ac-dangerbtn{background:#D92D33;box-shadow:none}
.ac-panel .btn.ac-dangerbtn:hover{background:#B4232A}
:root[data-theme="dark"] .ac-danger{border-color:#6B2A2D}
:root[data-theme="dark"] .ac-danger .ac-ct{color:#F6A5A8}
/* THE SIGN-IN PAGES (canvas board R3-Auth, decision 1093): /sign-in, /sign-up, /forgot-password, /reset-password,
   /confirm-email and the chooser. One white card, centred on a header band that runs the height of the screen; a
   line under the heading says where the account leads; a black pill sends the form. */
.wrap:has(.au)::before{height:clamp(560px,92vh,980px)}
.wrap > main:has(> .au){max-width:none}
.au{max-width:480px;margin:clamp(.5rem,4vw,3rem) auto 0;padding:clamp(1.5rem,4vw,2.25rem);box-sizing:border-box;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-l);box-shadow:0 30px 70px rgba(30,44,110,.12);
  display:flex;flex-direction:column;gap:18px;animation:au-pop .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes au-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.au h1{font-size:clamp(2.1rem,6vw,2.5rem);margin:0}
.au > p,.au form{margin:0}
.au form{display:flex;flex-direction:column;gap:18px}
.au .field{margin:0;display:flex;flex-direction:column;gap:6px}
.au .field label{margin:0;font-size:15px;font-weight:500;color:var(--ink)}
.au .field input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:var(--surface)}
.au-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.au-labelrow a{font-size:14px;color:var(--accent);text-decoration:none}
.au-labelrow a:hover{text-decoration:underline}
.au-hint{margin:0;font-size:13px;color:var(--ink-2)}
.au-ctx{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--accent-wash);font-size:15px;color:var(--ink)}
.au-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--accent);color:#FFFFFF;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),0 10px 22px rgba(20,30,60,.16)}
.au-ic svg{display:block}
.au-lead{color:var(--ink-2)}
.au-lead b{color:var(--ink)}
.au-small{font-size:14px;color:var(--ink-2)}
.au-small a,.au-alt a{color:var(--accent);text-decoration:none}
.au-small a:hover,.au-alt a:hover{text-decoration:underline}
.au-alt{text-align:center;font-size:15px;color:var(--ink-2)}
.au-alt a{font-weight:600}
.au-done{border-radius:14px;padding:12px 14px;background:#E7F6EC;color:#1B6B3A;font-size:15px}
:root[data-theme="dark"] .au-done{background:rgba(46,158,91,.18);color:#BDEBCF}
.au .caveat{margin:0}
.au .choices{margin:0}
/* The send button is the canvas's black pill, not the storefront's blue one: one action, already chosen. */
.au .btn.au-go,.au a.btn.au-go{width:100%;margin:0;background:var(--ink);color:var(--ground);box-shadow:none}
.au .btn.au-go:hover,.au a.btn.au-go:hover{background:var(--accent);color:#FFFFFF;transform:none;box-shadow:none}
.au .btn.au-go:active{transform:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){.au{animation:none}}

/* ==========================================================================
   AN EXAM'S BOOK (./book-pages.ts; the owner, 21 October 2026): the whole window, with no site header or footer — a bar
   with the way back, the text size and the chapter before and after; the contents along the left edge on a wide window and
   folded above the chapter on a phone; the chapter centred in the rest. Only the reader's layout is here: the book itself —
   its type, its colours, its head, sections, figures and contents — is the readers' shared stylesheet
   (packages/content/presentation/book.css, served after this one), whose colours (--bk-*) this layout wears too.
   ========================================================================== */
.bk{display:flex;flex-direction:column;gap:0;min-height:100vh}
.bk-bar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px 16px;min-height:56px;padding:0 12px 0 16px;
  background:var(--bk-paper);border-bottom:1px solid var(--bk-rule);font-family:var(--bk-sans);color:var(--bk-ink)}
.bk-back{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--bk-rule);
  background:var(--bk-ground);font-size:14px;font-weight:700;color:var(--bk-ink);text-decoration:none;white-space:nowrap}
.bk-back:hover{border-color:var(--bk-ink3)}
.bk-name{flex:1 1 12rem;min-width:0;margin:0;font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-tools{display:flex;align-items:center;gap:6px}
.bk-sizes{display:inline-flex;gap:2px;margin-right:6px}
.bk-size,.bk-turn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border-radius:12px;
  border:1px solid transparent;background:none;color:var(--bk-ink);font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer}
.bk-size:hover,a.bk-turn:hover{background:var(--bk-ground);border-color:var(--bk-rule)}
.bk-size:disabled{color:var(--bk-rule);cursor:default;background:none;border-color:transparent}
span.bk-turn{color:var(--bk-rule);cursor:default}
.bk-turn{font-size:22px;line-height:1}
.bk-count{min-width:4.5rem;text-align:center;font-size:13px;color:var(--bk-ink3);font-variant-numeric:tabular-nums}
.bk-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.bk-progressbar{display:block;height:100%;background:var(--bk-part1);transform:scaleX(0);transform-origin:left;transition:transform .15s}
/* The whole window, as the console's reader: out of the site's column (.wrap, main) and its hero's wash. */
.wrap:has(> main > .bk){max-width:none;padding:0}
.wrap:has(> main > .bk)::before{display:none}
.wrap > main:has(> .bk){max-width:none}
.bk-grid{display:grid;grid-template-columns:minmax(0,1fr);flex:1}
@media (min-width:1000px){.bk-grid{grid-template-columns:20rem minmax(0,1fr)}}
.bk-toc{align-self:start;margin:16px 16px 0;border:1px solid var(--bk-rule);border-radius:var(--r);background:var(--bk-ground)}
@media (min-width:1000px){.bk-toc{position:sticky;top:57px;height:calc(100vh - 57px);margin:0;overflow-y:auto;border:0;
  border-right:1px solid var(--bk-rule);border-radius:0}}
.bk-tocsum{cursor:pointer;padding:12px 16px;font:700 15px/1.3 var(--bk-sans);color:var(--bk-ink)}
@media (min-width:1000px){.bk-tocsum{padding:18px 16px 10px}}
.bk-tocnav{display:flex;flex-direction:column;gap:22px;padding:6px 10px 16px}
@media (min-width:1000px){.bk-tocnav{padding:6px 12px 28px}}
.bk-page{max-width:44rem;width:100%;margin:0 auto;padding:48px 16px 96px;box-sizing:border-box}
.bk-ends{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:64px;padding-top:24px;border-top:1.5px solid var(--bk-ink)}
.bk-end{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--bk-rule);border-radius:var(--r);
  background:var(--bk-paper);color:var(--bk-ink);text-decoration:none;font-family:var(--bk-sans)}
.bk-end:hover{border-color:var(--bk-ink3)}
.bk-end-next{text-align:right;grid-column:2}
.bk-endlabel{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--bk-part)}
.bk-endtitle{font:700 15px/1.35 var(--bk-serif)}
.bk-door{max-width:36rem;margin:40px auto}
@media (max-width:640px){
  .bk-bar{justify-content:space-between;padding:0 6px 0 10px}
  .bk-page{padding-top:28px}
  .bk-name,.bk-sizes{display:none}
  .bk-ends{grid-template-columns:1fr}.bk-end-next{grid-column:1}}

/* A BOOK, READ ON A SCREEN AS IT IS PRINTED (the owner, 21 October 2026: «make the preview/html look more like the pdf
   version») — the readers' shared stylesheet: the console's (apps/backoffice/web/src/BookReader.tsx, which imports it) and
   the website's (apps/web/src/book-pages.ts; apps/web/src/design.ts serves it in /style.css). The print's type, colours and
   dressing (licento-content tools/syllabus/syllabus-print-html.mjs `bookCss`), without its pages: Source Serif 4 for the
   titles and the text, Source Sans 3 for the small type, a section numbered above its title in its part's colour with a
   flag beside it, a figure with its label set apart, the contents as the print's trail. Each reader keeps its own layout
   (its bar, its columns); what is here is the book's.

   THE COLOURS ARE THE APP'S TEMPLATES' (packages/content/src/exam-looks.ts `EXAM_LOOKS`): the page is the template's surface,
   the words its inks, the four parts its four unit colours — the print's own part colours for the hunting book. A book
   wears its exam's template as its catalogue entry names it (`data-look`); one with none is Licento's. Light, and dark where
   <html data-theme="dark"> says so — the website's way, which never follows the system (decision 145); the console,
   which does, adds ./book-system-dark.css. apps/client/test/book-looks.test.ts holds every value to the app's. */

/* The fonts: SIL Open Font License 1.1 (OFL.txt beside each), the bytes licento-content's install records name
   (tools/syllabus/brand/fonts/*.json). Named for the books, so a copy installed on the reader's machine is not taken. */
@font-face{font-family:"Licento Book Serif";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("fonts/source-serif-4/SourceSerif4-Variable.ttf") format("truetype")}
@font-face{font-family:"Licento Book Serif";font-style:italic;font-weight:200 900;font-display:swap;
  src:url("fonts/source-serif-4/SourceSerif4-Italic-Variable.ttf") format("truetype")}
@font-face{font-family:"Licento Book Sans";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("fonts/source-sans-3/SourceSans3-Variable.ttf") format("truetype")}

/* GENERATED FROM exam-look.ts — keep in step (apps/client/test/book-looks.test.ts). */
.bk-look{--bk-paper:#FFFFFF;--bk-ground:#F5F7FB;--bk-ink:#0E1116;--bk-ink2:#5B6472;--bk-ink3:#667085;--bk-rule:#E3E8EE;--bk-link:#2E55F5;--bk-part1:#2E55F5;--bk-part2:#2E55F5;--bk-part3:#2E55F5;--bk-part4:#2E55F5}
:root[data-theme="dark"] .bk-look{--bk-paper:#0A1E4A;--bk-ground:#031439;--bk-ink:#F0F4FC;--bk-ink2:#BCC8E6;--bk-ink3:#93A2C9;--bk-rule:#20386F;--bk-link:#8098F9;--bk-part1:#8098F9;--bk-part2:#8098F9;--bk-part3:#8098F9;--bk-part4:#8098F9}
.bk-look[data-look="hunting"]{--bk-paper:#FFFDF7;--bk-ground:#F4F1E8;--bk-ink:#10261F;--bk-ink2:#3D4F45;--bk-ink3:#55685C;--bk-rule:#E3DECF;--bk-link:#2F6B3A;--bk-part1:#2F6B3A;--bk-part2:#9E4208;--bk-part3:#0B5CAD;--bk-part4:#A0307A}
:root[data-theme="dark"] .bk-look[data-look="hunting"]{--bk-paper:#17382D;--bk-ground:#0F2A22;--bk-ink:#F2F5EC;--bk-ink2:#C4D9CB;--bk-ink3:#A9C4B3;--bk-rule:#2C5546;--bk-link:#D9F27E;--bk-part1:#D9F27E;--bk-part2:#FFB86B;--bk-part3:#8FD3FF;--bk-part4:#F5A8D0}
.bk-look[data-look="boating"]{--bk-paper:#FFFFFF;--bk-ground:#F1F4F7;--bk-ink:#0A2540;--bk-ink2:#3A4D63;--bk-ink3:#55677C;--bk-rule:#D7DFE8;--bk-link:#0B5CAD;--bk-part1:#0B5CAD;--bk-part2:#9E4208;--bk-part3:#1A6B4F;--bk-part4:#A0307A}
:root[data-theme="dark"] .bk-look[data-look="boating"]{--bk-paper:#12355A;--bk-ground:#0A2540;--bk-ink:#EEF4FA;--bk-ink2:#C5D6E8;--bk-ink3:#9DB9D6;--bk-rule:#23507F;--bk-link:#FFC24B;--bk-part1:#FFC24B;--bk-part2:#8FD3FF;--bk-part3:#8FE3C0;--bk-part4:#F5A8D0}
.bk-look[data-look="driving"]{--bk-paper:#FDFEFE;--bk-ground:#F0F2F5;--bk-ink:#0E1825;--bk-ink2:#394960;--bk-ink3:#4B596C;--bk-rule:#D5DAE2;--bk-link:#3B465E;--bk-part1:#3B465E;--bk-part2:#0B5CAD;--bk-part3:#9E4208;--bk-part4:#1A6B4F}
:root[data-theme="dark"] .bk-look[data-look="driving"]{--bk-paper:#242A33;--bk-ground:#181E25;--bk-ink:#F0F2F5;--bk-ink2:#CED5DE;--bk-ink3:#AFBACA;--bk-rule:#38414C;--bk-link:#FFA552;--bk-part1:#FFA552;--bk-part2:#8FD3FF;--bk-part3:#F5E27A;--bk-part4:#8FE3C0}
.bk-look[data-look="drones"]{--bk-paper:#FDFDFE;--bk-ground:#EFEEF6;--bk-ink:#0F0B28;--bk-ink2:#3E3960;--bk-ink3:#504B6C;--bk-rule:#D3D1E6;--bk-link:#0149F4;--bk-part1:#0149F4;--bk-part2:#9E4208;--bk-part3:#1A6B4F;--bk-part4:#A0307A}
:root[data-theme="dark"] .bk-look[data-look="drones"]{--bk-paper:#1C1641;--bk-ground:#120E2F;--bk-ink:#EEECF9;--bk-ink2:#CAC6E7;--bk-ink3:#ACA5D4;--bk-rule:#2E275E;--bk-link:#7DE8FF;--bk-part1:#7DE8FF;--bk-part2:#D9F27E;--bk-part3:#FFB86B;--bk-part4:#F5A8D0}
.bk-look[data-look="sport"]{--bk-paper:#FEFDFE;--bk-ground:#F3EFF5;--bk-ink:#1E0E25;--bk-ink2:#543960;--bk-ink3:#624B6C;--bk-rule:#DED3E3;--bk-link:#6B3E8C;--bk-part1:#6B3E8C;--bk-part2:#2F6B3A;--bk-part3:#9E4208;--bk-part4:#0B5CAD}
:root[data-theme="dark"] .bk-look[data-look="sport"]{--bk-paper:#311D3A;--bk-ground:#23132A;--bk-ink:#F4EDF7;--bk-ink2:#DCC7E6;--bk-ink3:#C6A5D4;--bk-rule:#4A2F55;--bk-link:#A6E88A;--bk-part1:#A6E88A;--bk-part2:#FFC24B;--bk-part3:#8FD3FF;--bk-part4:#F5A8D0}
.bk-look[data-look="energy"]{--bk-paper:#FEFEFD;--bk-ground:#F7F3EE;--bk-ink:#251D0E;--bk-ink2:#605239;--bk-ink3:#6C604B;--bk-rule:#E8DFCF;--bk-link:#8A5A00;--bk-part1:#8A5A00;--bk-part2:#0B5CAD;--bk-part3:#1A6B4F;--bk-part4:#A0307A}
:root[data-theme="dark"] .bk-look[data-look="energy"]{--bk-paper:#3B301C;--bk-ground:#2B2212;--bk-ink:#F7F4ED;--bk-ink2:#E7DBC6;--bk-ink3:#D4C3A5;--bk-rule:#56482E;--bk-link:#FFE45C;--bk-part1:#FFE45C;--bk-part2:#8FD3FF;--bk-part3:#8FE3C0;--bk-part4:#F5A8D0}
.bk-look[data-look="healthcare"]{--bk-paper:#FDFDFE;--bk-ground:#EEF0F6;--bk-ink:#07102C;--bk-ink2:#394260;--bk-ink3:#4B536C;--bk-rule:#D1D6E6;--bk-link:#0149F4;--bk-part1:#0149F4;--bk-part2:#1A6B4F;--bk-part3:#9E4208;--bk-part4:#A0307A}
:root[data-theme="dark"] .bk-look[data-look="healthcare"]{--bk-paper:#0F1C47;--bk-ground:#091335;--bk-ink:#ECEFF9;--bk-ink2:#C6CDE7;--bk-ink3:#A5B0D4;--bk-rule:#1E2F66;--bk-link:#7FF0C8;--bk-part1:#7FF0C8;--bk-part2:#FFB86B;--bk-part3:#8FD3FF;--bk-part4:#F5A8D0}
/* END OF GENERATED */

.bk-look{--bk-serif:"Licento Book Serif",Georgia,serif;--bk-sans:"Licento Book Sans","Helvetica Neue",Arial,sans-serif;
  --bk-part:var(--bk-part1);background:var(--bk-paper);color:var(--bk-ink)}
.bk-look [data-part="2"],.bk-look[data-part="2"]{--bk-part:var(--bk-part2)}
.bk-look [data-part="3"],.bk-look[data-part="3"]{--bk-part:var(--bk-part3)}
.bk-look [data-part="4"],.bk-look[data-part="4"]{--bk-part:var(--bk-part4)}

/* THE CHAPTER'S HEAD, as the print's opener: «DEEL 2 · FAUNA» and «HOOFDSTUK 10» over a rule, the title in the display
   serif up to its first dash, the rest under it, then the lesson line. */
.bk-head{display:flex;flex-direction:column;gap:14px;margin:0 0 40px}
.bk-kicker{display:flex;justify-content:space-between;gap:16px;margin:0;padding-bottom:10px;border-bottom:1.5px solid var(--bk-ink);
  font:700 12px/1.3 var(--bk-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bk-part)}
.bk-kicker span:last-child{color:var(--bk-ink3)}
.bk-title{margin:6px 0 0;font:700 clamp(2.3rem,5.4vw,3.6rem)/1.02 var(--bk-serif);font-variation-settings:'opsz' 60;
  letter-spacing:-.03em;color:var(--bk-ink);text-wrap:balance}
.bk-sub{margin:0;font:italic 400 1.25rem/1.4 var(--bk-serif);color:var(--bk-ink2)}
.bk-lede{margin:8px 0 0;padding:12px 16px;border-left:4px solid var(--bk-part);background:var(--bk-ground);
  font:italic 400 1rem/1.55 var(--bk-serif);color:var(--bk-ink2)}

/* THE TEXT. Sizes are the reader's choice (data-size). */
.bk-text{font:400 1.0625rem/1.65 var(--bk-serif);color:var(--bk-ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.bk-text[data-size="sm"]{font-size:.9375rem}
.bk-text[data-size="lg"]{font-size:1.1875rem}
.bk-text[data-size="xl"]{font-size:1.375rem}
.bk-text > * + *{margin-top:1em}
.bk-text p,.bk-text ul,.bk-text ol,.bk-text blockquote,.bk-text figure{margin-bottom:0}
.bk-text strong{font-weight:700}
.bk-text a{color:var(--bk-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.bk-text sup{font:700 .62em/0 var(--bk-sans);color:var(--bk-part)}
.bk-text sup a{color:inherit;text-decoration:none;padding:0 .1em}
.bk-text [id]{scroll-margin-top:96px}
.bk-text ul,.bk-text ol{padding-left:1.4em}
.bk-text ul{list-style:disc}
.bk-text ol{list-style:decimal}
.bk-text li + li{margin-top:.3em}
.bk-text li::marker{color:var(--bk-part)}

/* A KOP 1: its number above in the part's colour, a flag beside it in the margin, the title in the serif. A KOP 2: the
   same, smaller, a stop where the flag is. */
.bk-text h3,.bk-text h4,.bk-text h5,.bk-text h6{position:relative;margin-bottom:0;color:var(--bk-ink);text-wrap:balance}
.bk-text h3{margin-top:2.2em;font:700 1.75em/1.1 var(--bk-serif);font-variation-settings:'opsz' 60;letter-spacing:-.025em}
.bk-text h4{margin-top:1.8em;font:700 1.3em/1.2 var(--bk-serif);font-variation-settings:'opsz' 32;letter-spacing:-.015em}
.bk-text h5,.bk-text h6{margin-top:1.5em;font:700 1.05em/1.3 var(--bk-sans)}
.bk-text h3 + *,.bk-text h4 + *,.bk-text h5 + *{margin-top:.6em}
.bk-num{display:block;margin-bottom:.35em;font:700 12.5px/1.2 var(--bk-sans);letter-spacing:.12em;color:var(--bk-part)}
.bk-k1::before,.bk-k2::before{content:"";position:absolute;background:var(--bk-part)}
.bk-k1::before{left:-52px;top:-2px;width:30px;height:46px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Cpath d='M9 6v70' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M12 8h40l-11 14 11 14H12z'/%3E%3Ccircle cx='9' cy='82' r='7'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92'%3E%3Cpath d='M9 6v70' stroke='%23000' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M12 8h40l-11 14 11 14H12z'/%3E%3Ccircle cx='9' cy='82' r='7'/%3E%3C/svg%3E") no-repeat center/contain}
.bk-k2::before{left:-44px;top:2px;width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 3px var(--bk-paper)}
@media (max-width:860px){.bk-k1::before,.bk-k2::before{display:none}}

/* A FIGURE: the picture, and its caption in the sans with its label in the ink; a pair of photos side by side. */
.bk-text figure{margin-left:0;margin-right:0;margin-top:1.6em}
.bk-text img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:3px;background:#FFFFFF}
/* A pair: the two photos side by side, 48% each as the print sets them; each photo's empty anchor takes no room; the captions
   under both, one to a line. */
.bk-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;row-gap:10px}
.bk-row > img{width:48%;margin:0}
.bk-row > span{width:0}
.bk-row > figcaption{flex-basis:100%}
.bk-text figcaption{margin-top:.6em;font:400 .85em/1.4 var(--bk-sans);color:var(--bk-ink2)}
.bk-text figcaption b{font-weight:700;color:var(--bk-ink)}
.bk-text figcaption sup{color:var(--bk-ink3)}

/* A TABLE: the sans, the heads in capitals in the part's colour over a rule of the ink. Under .bk-look, so a page's own
   table rules (the website's `table:not([class]) thead th`) do not dress a book's. */
.bk-look .bk-text div:has(> table){overflow-x:auto;margin-top:1.4em}
.bk-look .bk-text table{width:100%;border-collapse:collapse;font:400 .8em/1.45 var(--bk-sans);background:none}
.bk-look .bk-text th{padding:.55em .7em;text-align:left;vertical-align:bottom;border-bottom:2px solid var(--bk-ink);background:none;
  font:700 11px/1.3 var(--bk-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--bk-part)}
.bk-look .bk-text td{padding:.55em .7em;text-align:left;vertical-align:top;border-bottom:1px solid var(--bk-rule);background:none;color:var(--bk-ink)}
.bk-look .bk-text tr:last-child > td{border-bottom:1px solid var(--bk-rule)}

/* THE PROGRAMME BOX. */
.bk-text blockquote{margin-left:0;margin-right:0;margin-top:2em;padding:12px 18px;border-left:4px solid var(--bk-part);
  background:var(--bk-ground);font-size:.95em}
.bk-text blockquote > * + *{margin-top:.7em}
.bk-text blockquote h3{margin-top:0;font-size:1.15em}

/* THE CONTENTS, as the print's: a part's number small in its colour over its title, its chapters numbered stops on a
   dotted trail, the one open filled; the open chapter's sections under it. */
.bk-tocpart{display:flex;flex-direction:column;gap:2px;margin:0 0 6px;padding:0 8px}
.bk-tockick{font:700 11px/1.2 var(--bk-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bk-part)}
.bk-toctitle{font:700 1.2rem/1.2 var(--bk-serif);color:var(--bk-ink)}
.bk-toclist{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.bk-toclist::before{content:"";position:absolute;left:21px;top:14px;bottom:14px;border-left:3px dotted var(--bk-part);opacity:.55}
.bk-tocch{position:relative;display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:10px;
  font:400 14px/1.35 var(--bk-sans);color:var(--bk-ink2);text-decoration:none}
.bk-tocch:hover{background:var(--bk-ground);color:var(--bk-ink)}
.bk-tocch[aria-current="page"]{background:var(--bk-ground);color:var(--bk-ink);font-weight:700}
.bk-tocn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  border:2px solid var(--bk-part);background:var(--bk-paper);font:700 11px/1 var(--bk-sans);color:var(--bk-part);
  font-variant-numeric:tabular-nums}
.bk-tocch[aria-current="page"] .bk-tocn{background:var(--bk-part);color:var(--bk-paper)}
.bk-toctext{padding-top:4px}
.bk-tocsecs{list-style:none;margin:2px 0 8px 44px;padding:0;display:flex;flex-direction:column;gap:1px}
.bk-tocsec{display:flex;gap:8px;padding:4px 8px;border-radius:8px;font:400 13px/1.35 var(--bk-sans);color:var(--bk-ink3);text-decoration:none}
.bk-tocsec:hover{color:var(--bk-ink)}
.bk-tocsec[aria-current="location"]{color:var(--bk-part);font-weight:700}
.bk-tocsecn{flex:none;min-width:2.4em;font-variant-numeric:tabular-nums;color:var(--bk-part)}