/* SUVAT design system.
   The rules are in layers, oldest first; the last layer ("SUVAT theme: marked work", at the end of this file)
   sets the look in use: plain paper, ink, one red for the tick in the wordmark and the marking pen.
   Type: Bricolage Grotesque (headings and the wordmark, through --serif, whose name is historical),
   Atkinson Hyperlegible (text and UI), STIX Two (maths, through --maths). No handwriting font.
   Subject colours: further maths blue, maths teal, physics plum. Module families: pure, statistics ochre,
   mechanics plum, decision teal. */

@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage.woff2?v=11f6ab2d0f") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-400.woff2?v=3201099022") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-400-italic.woff2?v=28700b8a79") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-700.woff2?v=05dadf003f") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("/assets/fonts/stix-400-normal.woff2?v=a8492f75e7") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("/assets/fonts/stix-400-italic.woff2?v=e95441c02c") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url("/assets/fonts/stix-600-normal.woff2?v=9748966246") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "STIX Two Math"; src: url("/assets/fonts/stix-math.woff2?v=1750d24071") format("woff2"); font-display: swap; }

:root {
  /* light: a drawing-office desk. Warm plain paper, white cards, a ruler along the top, pen-blue ink, red-pen marking */
  --paper: #F4F2EC;
  --grid: #DDE6F1;
  --margin: #EAA6A1;
  --card: #FFFFFF;
  --ink: #1A2131;
  --text-2: #3A4357;
  --muted: #5B6578;
  --divider: #E4E9F0;
  --line: #D2DAE5;
  --line-strong: #8590A3;
  --edge: #D7DEE8;
  --dashed: #A2ACBD;
  --link: #1D4FB8;
  --red: #C0342B;
  --fill: #1D4FB8;
  --on-fill: #FFFFFF;
  --fill-soft: #E7EEFC;
  --hl: #FFE45C;
  --sticky: #FFF3B0;
  --on-ink: #FFFFFF;
  --band: #1D4FB8;
  --on-band: #FFFFFF;
  --raise: rgba(26, 33, 49, .10);
  --pure: #2B4C7E; --pure-dark: #2B4C7E;
  --stats: #C08A2E; --stats-dark: #8A5F14;
  --mech: #6B3F69; --mech-dark: #6B3F69;
  --dec: #2F6F6A; --dec-dark: #2F6F6A;
  --opt: #7A5A2E; --opt-dark: #7A5A2E;
  --core: #1A2131; --core-dark: #1A2131;

  --serif: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; /* headings and the wordmark (the name is historical) */
  --maths: "STIX Two Text", Georgia, serif; /* letters that stand for quantities */
  --sans: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-code: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; /* codes, refs and marks use the body font, bold */
  --pen: #1E3A7B;        /* answer ink */

  --u: 19px;            /* grid unit: one square */
  --rule: 1px;
  --gutter: 19px;        /* one grid square, so page edges sit on the background grid */
  --maxw: 1140px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17181B; --grid: #212328; --margin: #5E3B3A; --card: #1F2125; --ink: #ECEAE4; --text-2: #C9C6BE; --muted: #9B9992;
    --divider: #2A2C31; --line: #32353C; --line-strong: #6E727B; --edge: #0D0E10; --dashed: #4A4D55; --link: #9EC2F7; --red: #F0948A; --on-ink: #17181B; --pen: #9EC2F7;
    --fill: #F2D46E; --on-fill: #17181B; --fill-soft: #2A2924; --hl: #D9BA45; --sticky: #3A3827; --band: #1F2125; --on-band: #ECEAE4; --raise: rgba(0, 0, 0, .45);
    --pure: #93B5E8; --pure-dark: #3B5F96; --stats: #E6BE6E; --stats-dark: #9A6C1E; --mech: #CDA2CA; --mech-dark: #7A4C77;
    --dec: #86C9B8; --dec-dark: #2F716B; --opt: #D4AE78; --opt-dark: #866435; --core: #ECEAE4; --core-dark: #3F4148;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #17181B; --grid: #212328; --margin: #5E3B3A; --card: #1F2125; --ink: #ECEAE4; --text-2: #C9C6BE; --muted: #9B9992;
    --divider: #2A2C31; --line: #32353C; --line-strong: #6E727B; --edge: #0D0E10; --dashed: #4A4D55; --link: #9EC2F7; --red: #F0948A; --on-ink: #17181B; --pen: #9EC2F7;
    --fill: #F2D46E; --on-fill: #17181B; --fill-soft: #2A2924; --hl: #D9BA45; --sticky: #3A3827; --band: #1F2125; --on-band: #ECEAE4; --raise: rgba(0, 0, 0, .45);
    --pure: #93B5E8; --pure-dark: #3B5F96; --stats: #E6BE6E; --stats-dark: #9A6C1E; --mech: #CDA2CA; --mech-dark: #7A4C77;
    --dec: #86C9B8; --dec-dark: #2F716B; --opt: #D4AE78; --opt-dark: #866435; --core: #ECEAE4; --core-dark: #3F4148;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* footer sits at the bottom of the window on short pages */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }
body {
  margin: 0; color: var(--ink); font-family: var(--sans); font-size: var(--fs-5); line-height: var(--lh-2);
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--u) var(--u);
  /* a grid line runs down the left edge of the page column (.wrap), so cards and edges line up with the squares */
  /* a grid line runs down the left edge of the text column, so text starts on a line of the squares */
  background-position: max(var(--gutter), calc(50% + var(--u) / 2 - var(--maxw) / 2 + var(--gutter))) 0;
  -webkit-font-smoothing: antialiased;
}
/* the red margin line of an exercise book, just left of the page column, behind everything */
/* the red margin sits on the grid line one square left of the text, as in an exercise book */
body::before { content: ""; position: fixed; top: 0; bottom: 0; left: max(0px, calc(50% - var(--maxw) / 2)); width: 2px; background: var(--margin); z-index: -1; pointer-events: none; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; }
p { margin: 0; }
button { font-family: var(--sans); color: inherit; }
[hidden] { display: none !important; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--fill); color: var(--on-fill); padding: var(--sp-2) var(--sp-3); }
.skip-link:focus { top: 12px; }
math { font-family: "STIX Two Math", math; }

/* ---------- type helpers (from the prototype) */
.kicker { display: block; font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); line-height: var(--u); }
.kicker-blue { color: var(--link); }
.h1 { font-size: var(--fs-12); line-height: var(--lh-5); letter-spacing: -0.01em; text-wrap: balance; }
.h2 { font-size: var(--fs-9); line-height: var(--lh-4); text-wrap: balance; }
.lede { font-size: var(--fs-5); line-height: var(--lh-2); color: var(--text-2); max-width: 60ch; text-wrap: pretty; }
.small { font-size: var(--fs-3); line-height: var(--lh-2); color: var(--text-2); }
.muted { color: var(--muted); }
.hand { font-size: var(--fs-4); font-style: italic; line-height: var(--u); color: var(--red); }
.code { font-family: var(--font-code); }
.stack { display: flex; flex-direction: column; gap: var(--u); }

/* ---------- logo */
.logo { width: 44px; height: 38px; flex: none; color: var(--ink); }
.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); }
.brand-text { display: flex; flex-direction: column; }
.brand-word { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; line-height: var(--u); letter-spacing: 0.04em; }
.brand-full { font-size: var(--fs-1); letter-spacing: 0.06em; color: var(--muted); line-height: var(--u); }
.brand:hover { color: var(--ink); }

/* ---------- header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: var(--rule) solid var(--line); }
.header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); }
.site-nav ul { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: var(--fs-4); padding: var(--sp-2) 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--ink); }
.header-tools { display: flex; }
.icon-btn { width: 44px; height: 44px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--card); }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; } :root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display: block; } :root:not([data-theme="light"]) .i-moon { display: none; } }

/* ---------- mobile tab bar */
.tabbar { display: none; }
/* the phone tab bar replaces the header nav below 720 px (the five-item nav fits from about 720 px) */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .brand-full { display: none; }
  .header-inner { padding-right: var(--sp-3); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(76px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 4px 2px calc(8px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: var(--rule) solid var(--line);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1); text-decoration: none; color: var(--muted); font-size: var(--fs-1); white-space: nowrap; }
  .tabbar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  body { padding-bottom: var(--sp-11); }
}

/* ---------- buttons */
.btn { transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 44px; padding: 0 var(--u); border: var(--rule) solid var(--line-strong); border-radius: var(--r); background: transparent; color: var(--ink); font-family: var(--sans); font-size: var(--fs-4); font-weight: 700; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--card); color: var(--ink); transform: translateY(-1px); box-shadow: var(--sh-1); }
.btn:active { transform: none; box-shadow: none; }
.btn-ink { background: var(--fill); color: var(--on-fill); }
.btn-ink:hover { background: var(--fill); color: var(--on-fill); box-shadow: var(--sh-2); }
.text-btn { border: none; background: none; color: var(--link); font-size: var(--fs-4); font-weight: 700; cursor: pointer; padding: var(--sp-2); }

/* ---------- cards and lists */
.card { background: var(--card); border: var(--rule) solid var(--line); padding: var(--u); border-radius: var(--r); }
.card-link { display: flex; align-items: center; gap: var(--u); text-decoration: none; color: var(--ink); }
.card-link:hover { color: var(--ink); background: var(--card); box-shadow: var(--sh-2); }
.rows { display: flex; flex-direction: column; gap: 1px; background: var(--divider); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.row { min-height: 57px; display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); background: var(--card); }
.row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.row-title { font-size: var(--fs-4); font-weight: 700; line-height: var(--u); }
.row-sub { font-size: var(--fs-1); line-height: var(--u); color: var(--muted); }
.row-code { font-family: var(--font-code); font-size: var(--fs-3); color: var(--text-2); white-space: nowrap; }
a.row { text-decoration: none; color: var(--ink); }
a.row:hover .row-title { text-decoration: underline; }
.sq { width: 9px; height: 9px; flex: none; background: var(--core); display: inline-block; }
.sq.pure { background: var(--pure); } .sq.stats { background: var(--stats); } .sq.mech { background: var(--mech); }
.sq.dec { background: var(--dec); } .sq.opt { background: var(--opt); } .sq.none { background: var(--divider); }
.chev { flex: none; }

/* ---------- segmented controls and option tiles */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1px; background: var(--line); border-radius: var(--r); overflow: hidden; border: var(--rule) solid var(--line); }
.seg button, .seg a { height: 57px; border: none; background: var(--card); color: var(--ink); font-size: var(--fs-4); font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; line-height: var(--u); padding: 0 var(--sp-2); text-align: center; }
.seg .seg-sub { font-size: var(--fs-1); font-weight: 400; color: var(--muted); }
.seg [aria-pressed="true"], .seg [aria-current="true"] { background: var(--fill); color: var(--on-fill); }
.seg [aria-pressed="true"] .seg-sub, .seg [aria-current="true"] .seg-sub { color: var(--on-fill); opacity: 0.8; }
.seg-small button { height: 44px; }
.tiles-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: 38px; align-items: center; }
.tiles-head span { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); }
.tiles-head span + span { padding-left: var(--sp-4); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--divider); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.tiles.cols-1 { grid-template-columns: 1fr; }
.tile { min-height: 57px; padding-top: 8px !important; padding-bottom: 8px !important; border: none; background: var(--card); color: var(--ink); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 var(--sp-4); text-align: left; cursor: pointer; }
.tile-code { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-code); font-size: var(--fs-4); font-weight: 600; line-height: var(--u); }
.tile-name { font-size: var(--fs-2); line-height: var(--u); }
.tile[aria-pressed="true"] { color: var(--on-fill); }
.tile[aria-pressed="true"] .sq { background: var(--on-fill); }
.tile.pure[aria-pressed="true"] { background: var(--pure-dark); } .tile.stats[aria-pressed="true"] { background: var(--stats-dark); }
.tile.mech[aria-pressed="true"] { background: var(--mech-dark); } .tile.dec[aria-pressed="true"] { background: var(--dec-dark); }
.tile.opt[aria-pressed="true"] { background: var(--opt-dark); } .tile.core[aria-pressed="true"] { background: var(--core-dark); }
.tile:hover:not([aria-pressed="true"]) { background: var(--paper); }
.route { display: flex; align-items: center; gap: var(--sp-4); min-height: 57px; }
.route-box { flex: none; width: 57px; height: 57px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); font-family: var(--font-code); font-size: var(--fs-10); font-weight: 600; }
.route-box.empty { background: transparent; border: var(--rule) dashed var(--dashed); color: var(--muted); }
.route-title { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--u); padding-bottom: var(--sp-2); display: block; }
.route-prompt { font-size: var(--fs-4); font-weight: 700; line-height: var(--u); display: block; }
.note-red { font-size: var(--fs-2); line-height: var(--u); color: var(--red); }

/* ---------- page layouts */
.page { padding-top: var(--sp-8); padding-bottom: var(--sp-10); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.section { display: flex; flex-direction: column; gap: var(--u); }
.page-head { display: flex; flex-direction: column; gap: var(--u); padding-bottom: var(--sp-8); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; font-size: var(--fs-2); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); }
.crumbs a { color: var(--muted); }
.head-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-3); }
@media (max-width: 860px) {
  .page-grid { grid-template-columns: 1fr; gap: var(--sp-10); }
  .page { padding-top: var(--sp-7); }
  :root { --gutter: 19px; }
}

/* ---------- map glyph card */
.fill-pure { fill: var(--pure); } .fill-stats { fill: var(--stats); } .fill-mech { fill: var(--mech); } .fill-dec { fill: var(--dec); } .fill-opt { fill: var(--opt); } .fill-core { fill: var(--muted); }

.badge-red { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--red); border: 1px solid var(--red); padding: 2px var(--sp-2); line-height: var(--lh-1); }

/* ---------- subject list (home and subjects page) */
.subject-rows .row-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; }

/* ---------- topic lists */
.toolbar { position: sticky; top: 76px; z-index: 5; background: var(--paper); padding: var(--sp-3) 0; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; border-bottom: 1px solid var(--divider); }
.toolbar .seg { min-width: 300px; }
.group { display: flex; flex-direction: column; gap: 0; margin-top: var(--sp-8); }
.group-head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.group-title { font-family: var(--serif); font-size: var(--fs-8); font-weight: 700; line-height: var(--lh-5); }
.group-note { font-size: var(--fs-2); color: var(--muted); line-height: var(--u); margin-bottom: var(--sp-3); }
.topics { display: flex; flex-direction: column; gap: 1px; background: var(--divider); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.topic { background: var(--card); }
.topic > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 18px; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); min-height: 57px; border-bottom: 1px solid var(--divider); }
.topic:not([open]) > summary { border-bottom: none; }
.topic > summary::-webkit-details-marker { display: none; }
.topic-ref { font-family: var(--font-code); font-size: var(--fs-4); font-weight: 600; }
.topic-text { display: flex; flex-direction: column; min-width: 0; }
.topic-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topic-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; line-height: var(--lh-2); }
.topic-desc { font-size: var(--fs-3); line-height: var(--lh-1); color: var(--text-2); }
.topic-body { padding-bottom: var(--sp-2); }
.topic-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--divider); }
.topic-links a { display: inline-flex; align-items: center; gap: var(--sp-2); height: 36px; padding: 0 var(--sp-4); border: var(--rule) solid var(--line); background: var(--card); color: var(--ink); font-size: var(--fs-2); font-weight: 700; text-decoration: none; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; border-radius: var(--r); }
.topic-links a:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--sh-1); }
.topic-links .tl-primary { background: var(--fill); color: var(--on-fill); }
.topic-links .tl-primary:hover { color: var(--on-fill); }
.topic-links .tl-n { font-weight: 400; opacity: 0.75; }
.topic-links .tl-soon { width: 100%; font-size: var(--fs-2); color: var(--muted); }
.lesson-topic .topic-links, .j-topic .topic-links { background: var(--card); border-top: var(--rule) solid var(--line); }
.topic-preview { font-size: var(--fs-1); line-height: var(--u); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-count { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }
.topic > summary::after { content: ""; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); justify-self: center; }
.topic[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.topic[open] .topic-preview { display: none; }
.topic > summary:hover .topic-title { text-decoration: underline; }
.points { list-style: none; margin: 0; padding: 0 var(--sp-4) var(--sp-2); }
.point { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; }
.point + .point { border-top: 1px dashed var(--divider); }
.point-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.point-ref { font-family: var(--font-code); font-size: var(--fs-3); color: var(--text-2); }
.point-title { font-size: var(--fs-4); line-height: var(--lh-1); }
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.skills li { font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); background: var(--paper); border: 1px solid var(--divider); padding: 2px var(--sp-2); }
.skills li.hit { background: var(--fill); color: var(--on-fill); border-color: var(--ink); }
.point-sub { padding: var(--sp-4) 0 var(--sp-1); font-family: var(--serif); font-size: var(--fs-5); line-height: var(--lh-2); font-weight: 700; color: var(--ink); }
.yr { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--sp-2); }
.yr::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--ink); }
.yr.y13::before { background: var(--ink); }
.yr.y1213::before { background: linear-gradient(90deg, transparent 50%, var(--ink) 50%); }
.papers-table { width: 100%; border-collapse: collapse; }

/* ---------- exam board page: course bar, toolbar, contents */
.h3 { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-3); }
.course-bar { display: flex; align-items: center; gap: var(--sp-4); justify-content: space-between; padding: 14px var(--u); }
.course-bar .route { min-height: 0; }
.course-bar .btn { white-space: nowrap; flex: none; }
.board-groups a { color: var(--ink); text-decoration: none; }
.board-groups a:hover { text-decoration: underline; }
.route-box.none { background: transparent; border: var(--rule) solid var(--divider); color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: var(--sp-2) var(--sp-8); margin: 0; }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); line-height: var(--u); }
.facts dd { margin: 0; font-size: var(--fs-5); font-weight: 700; line-height: var(--lh-2); }
.facts dd .code { font-weight: 400; color: var(--text-2); }
.course-edit { display: flex; flex-direction: column; gap: var(--u); }
.course-edit-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); }
.board-grid { margin-bottom: var(--sp-10); }
.topics-head { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 760px; }
.toolbar .filter { flex: 1 1 280px; display: flex; align-items: center; gap: var(--sp-3); height: 44px; padding: 0 var(--sp-3); background: var(--card); border: var(--rule) solid var(--line); color: var(--muted); border-radius: var(--r); }
.filter input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink); font: 400 var(--fs-5) var(--sans); outline: none; }
.filter:focus-within { outline: 2px solid var(--link); outline-offset: 2px; }
.toolbar .seg { min-width: 260px; }
.filter-status { flex-basis: 100%; }
.topics-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.toc { position: sticky; top: 196px; max-height: calc(100vh - 216px); overflow-y: auto; padding: var(--sp-8) var(--sp-1) var(--sp-5) 0; font-size: var(--fs-2); line-height: var(--lh-1); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc > ol > li { margin-top: var(--sp-3); }
.toc a { display: block; text-decoration: none; color: var(--text-2); padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }
.toc .toc-group { display: flex; align-items: center; gap: var(--sp-2); padding-left: 0; font-weight: 700; color: var(--ink); border-left: none; }
.toc .code { color: var(--muted); margin-right: var(--sp-2); font-size: var(--fs-1); }
.topics-main .group:first-child { margin-top: var(--sp-5); }
.topic { scroll-margin-top: 200px; }
.lesson-topic, .j-topic { scroll-margin-top: 100px; }
.group { scroll-margin-top: 200px; }
.filter-empty { margin-top: var(--sp-8); padding: var(--u); border: var(--rule) dashed var(--dashed); color: var(--text-2); }
.badge-ink { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--on-fill); background: var(--fill); padding: 2px var(--sp-2); line-height: var(--lh-1); }

/* ---------- subject page: one card per exam board */
.board-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); align-items: stretch; }
.board-card { display: flex; flex-direction: column; gap: var(--u); }
.board-card-head { display: flex; justify-content: space-between; align-items: flex-start; }
.board-card .btn { align-self: flex-start; margin-top: auto; }
.board-groups { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.board-groups li { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-3); line-height: var(--u); }
.board-groups .muted { font-size: var(--fs-1); }

/* ---------- homepage */
.page-home .page > * + * { margin-top: var(--sp-10); }
.h1-big { font-size: var(--fs-14); line-height: var(--lh-6); max-width: 16ch; }
.course-bar-home { padding: 14px var(--u); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
.text-link { font-size: var(--fs-4); font-weight: 700; }
.tgroup + .tgroup { margin-top: var(--sp-8); }
.tgroup-title { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-5); margin-bottom: var(--sp-3); }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }
.tcard { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); text-decoration: none; color: var(--ink); min-height: 133px; text-align: left; font: inherit; border-radius: var(--r); }
.tcard:hover { color: var(--ink); box-shadow: var(--sh-2); }
.tcard:hover .tcard-title { text-decoration: underline; }
.tcard-top { display: flex; justify-content: space-between; font-size: var(--fs-1); color: var(--muted); line-height: var(--u); }
.tcard-top .code { font-size: var(--fs-4); font-weight: 600; color: var(--ink); }
.tcard-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; line-height: var(--lh-2); }
.tcard-skills { font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.tcard-wide { min-height: 0; max-width: 760px; }
.tcard-empty { border-style: dashed; border-color: var(--dashed); background: transparent; cursor: pointer; max-width: 520px; min-height: 0; }
.home-foot { align-items: stretch; }

/* ---------- learning map */

/* ---------- search */
.search { border: var(--rule) solid var(--line); background: var(--paper); color: var(--ink); padding: 0; width: min(680px, calc(100vw - 24px)); max-height: min(80vh, 720px); margin: 10vh auto auto; border-radius: var(--r); }
.search::backdrop { background: rgba(20, 22, 28, 0.45); }
.search-inner { display: flex; flex-direction: column; max-height: inherit; }
.search-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-bottom: var(--rule) solid var(--line); background: var(--card); }
.search-bar input { flex: 1; border: none; background: transparent; color: var(--ink); font: 400 var(--fs-6) var(--sans); padding: var(--sp-3) 0; outline: none; }
.search-scope { font-size: var(--fs-1); color: var(--muted); padding: var(--sp-2) var(--sp-4) 0; }
.search-results { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-4); overflow-y: auto; }
.search-results li:not(.sr-empty) a { display: block; padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider); text-decoration: none; color: var(--ink); }
.search-results li a:hover .sr-title, .search-results li a:focus .sr-title { text-decoration: underline; }
.sr-meta { display: block; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); }
.sr-title { font-size: var(--fs-4); display: block; }
.sr-skill { display: block; font-size: var(--fs-2); color: var(--text-2); }
.sr-empty { padding: var(--sp-4) 0; color: var(--muted); font-size: var(--fs-3); }

/* ---------- worked answers: working in ink, marks in red, one continuous red margin line */
.worked { margin: 0; background: var(--card); border: var(--rule) solid var(--line); position: relative; border-radius: var(--r); overflow: hidden; }
.question { padding: var(--u); border-bottom: var(--rule) solid var(--line); display: flex; flex-direction: column; gap: var(--sp-2); }
.question-marks { align-self: flex-end; font-weight: 700; }
.ans-body, .worked .working { position: relative; }
.ans-body::after, .worked .working::after { content: ""; position: absolute; top: 0; bottom: 0; right: 64px; width: var(--rule); background: var(--red); pointer-events: none; }
.working { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.working li { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: stretch; min-height: 48px; border-bottom: 1px solid var(--divider); counter-increment: step; }
.working li:last-child { border-bottom: none; }
.step { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-3) 56px; min-width: 0; position: relative; justify-content: center; }
.ans-body .step::before { content: counter(step); position: absolute; left: var(--u); top: 13px; width: 24px; height: 24px; border: 1px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 700 var(--fs-1)/1 var(--sans); color: var(--ink); }
.mpiece { white-space: nowrap; }
.why { font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.why math { font-size: var(--fs-5); }
.working .line { color: var(--ink); font-size: var(--fs-5); line-height: 28px; overflow-wrap: anywhere; }
.working .line math { color: var(--ink); font-size: var(--fs-6); }
.working .aside { display: block; font-size: var(--fs-3); opacity: 0.85; }
.working .mark, .mark-key { color: var(--red); font-family: var(--font-code); font-weight: 600; font-size: var(--fs-5); letter-spacing: 0.02em; }
.working .mark { text-align: center; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.worked .working li > .line { padding: 12px 16px 12px var(--u); align-self: center; }
.ans-cols { display: grid; grid-template-columns: minmax(0, 1fr) 64px; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); border-bottom: 1px solid var(--divider); }
.ans-cols span { padding: 8px var(--u); }
.ans-cols span + span { padding: 8px 0; text-align: center; color: var(--red); }
.ans-part + .ans-part { border-top: var(--rule) solid var(--line); }
.ans-q { display: grid; grid-template-columns: minmax(0, 1fr) 64px; margin: 0; font: 700 var(--fs-4)/22px var(--sans); color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--divider); }
.ans-q > span:first-child { padding: 9px var(--u); }
.ans-q-marks { font-size: var(--fs-1); font-weight: 700; color: var(--muted); padding: 9px 0; text-align: center; }
.total { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin: 0; padding: 0; border-top: var(--rule) solid var(--line); font-size: var(--fs-3); font-weight: 700; min-height: 48px; }
.total > span:first-child { padding: 0 var(--sp-4); }
.total .mark { font-family: var(--font-code); font-weight: 600; color: var(--red); font-size: var(--fs-5); width: 64px; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.worked figcaption { padding: 10px var(--u) 14px; font-size: var(--fs-2); color: var(--text-2); border-top: 1px solid var(--divider); }

/* ---------- practice questions: one format for every question */
.q-list { display: flex; flex-direction: column; gap: var(--sp-7); margin-top: 0; }
.q { background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-4); align-items: start; padding: 20px var(--u) 0; }
.q-title { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-3); margin: 0; }
.q-head .lvl { margin-top: var(--sp-1); }
.q-sub { grid-column: 1 / -1; margin: 0; font-size: var(--fs-3); line-height: var(--lh-1); color: var(--text-2); }
.q-meta { color: var(--muted); white-space: nowrap; }
.lvl { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; padding: 2px var(--sp-2); border: 1px solid currentColor; line-height: var(--lh-1); white-space: nowrap; }
.lvl-easy { color: var(--dec); } .lvl-medium { color: var(--stats-dark); } .lvl-hard { color: var(--red); }
:root[data-theme="dark"] .lvl-medium { color: var(--stats); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lvl-medium { color: var(--stats); } }
.q-body { padding: 20px var(--u) 24px; display: flex; flex-direction: column; gap: var(--sp-5); font-size: var(--fs-5); line-height: var(--lh-3); }
.q-stem { margin: 0; }
.q-parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.q-parts li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; }
.q-label { font-weight: 700; }
.q-marks { font-weight: 700; white-space: nowrap; padding-left: var(--sp-2); }
.q-text { min-width: 0; overflow-wrap: anywhere; }
.q-text math[display="block"], .q-stem math[display="block"] { margin: 14px 0 6px; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.answer { border-top: 1px solid var(--divider); }
.answer > summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); width: max-content; margin: 0 0 0 auto; padding: 0 var(--u); height: 52px; cursor: pointer; font-weight: 700; font-size: var(--fs-4); color: var(--ink); }
.answer > summary::-webkit-details-marker { display: none; }
.answer > summary:hover .ans-show, .answer > summary:hover .ans-hide { text-decoration: underline; }
.ans-chev { transition: transform 0.15s; }
.answer[open] > summary .ans-chev { transform: rotate(180deg); }
.answer .ans-hide, .answer[open] .ans-show { display: none; }
.answer[open] .ans-hide { display: inline; }
.answer[open] > summary { margin-left: auto; }
.answer[open] .ans-body { border-top: var(--rule) solid var(--line); }
.q-topics { padding: 10px var(--u); border-top: 1px solid var(--divider); display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; margin: 0; }
.p-topic-note { margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4); border: var(--rule) dashed var(--dashed); font-size: var(--fs-3); }

/* "How marks work" */
.help { margin-top: var(--sp-8); padding: 0; }
.help > summary { cursor: pointer; font-weight: 700; padding: 16px var(--u); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.help > summary::-webkit-details-marker { display: none; }
.help > summary::after { content: "+"; font-size: var(--fs-7); line-height: 1; }
.help[open] > summary::after { content: "−"; }
.help[open] > summary { border-bottom: 1px solid var(--divider); }
.help-body { padding: 18px var(--u) 20px; display: flex; flex-direction: column; gap: var(--sp-5); }
.help-body > p { margin: 0; }
.levels { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; }
.levels div:not(.levels-sep) { display: contents; }
.levels dt { display: flex; }
.levels dd { margin: 0; font-size: var(--fs-3); line-height: var(--lh-1); color: var(--text-2); }
.levels .mark-key { display: inline-flex; align-items: center; justify-content: center; min-width: 80px; height: 24px; border: 1px solid var(--red); font-size: var(--fs-3); }
.levels .lvl { min-width: 80px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.levels-sep { grid-column: 1 / -1; height: 1px; background: var(--divider); }

/* ---------- shared controls: every segmented control on a row is the same size */
.controls { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.controls-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.controls .seg { width: 100%; min-width: 0; }
.controls-row-small { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.select { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.select select { height: 48px; min-width: 260px; padding: 0 40px 0 var(--sp-3); border: var(--rule) solid var(--line-strong); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); font: 400 var(--fs-5) var(--sans); appearance: none; -webkit-appearance: none; border-radius: var(--r); }
/* custom checkbox: a clean square when off, filled ink with a tick when on */
.check { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 700; cursor: pointer; min-height: 48px; user-select: none; }
.check input { appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 24px; height: 24px; border: var(--rule) solid var(--line-strong); background: var(--card); border-radius: var(--r-sm); display: grid; place-content: center; cursor: pointer; transition: background 0.12s; }
.check input::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid var(--on-fill); border-bottom: 2.5px solid var(--on-fill); transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform 0.12s; }
.check input:checked { background: var(--fill); }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 2px; }
.btn-big { height: 52px; padding: 0 var(--sp-7); font-size: var(--fs-5); }
.p-status { margin: 0 0 var(--sp-1); font-weight: 700; color: var(--text-2); }
.mixed-nav, .more-nav { display: flex; justify-content: center; margin-top: var(--sp-6); }

.f-subject { display: flex; flex-direction: column; gap: var(--sp-5); }
.f-intro { max-width: 680px; }
.f-year { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--rule) solid var(--line); }
.f-area { display: flex; flex-direction: column; gap: var(--sp-2); }
.f-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-3); }
.f-item { background: var(--card); border: var(--rule) solid var(--line); padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; border-radius: var(--r); }
.f-name { font-size: var(--fs-3); font-weight: 700; }
.f-board { font-size: var(--fs-1); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-left: var(--sp-2); }
.f-tex { font-size: var(--fs-5); min-width: 0; }
.f-tex math[display="block"] { display: inline math; margin: 4px 0; }
.f-tex { display: flex; flex-direction: column; gap: 2px; }

/* ---------- my course */
.page-narrow { max-width: 860px; }
.prefs { display: flex; flex-direction: column; gap: var(--sp-8); }
.pref-step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.step-n { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); font-family: var(--font-code); font-weight: 600; font-size: var(--fs-6); }
.pref-subject { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
.pref-name { font-weight: 700; }
.pref-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.pref-options .route { margin-top: var(--sp-4); }
[data-p-board="none"] { font-size: var(--fs-7) !important; }
.pref-opt-title { margin: 0; font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; }
.pref-done { display: flex; justify-content: flex-end; margin-left: 52px; padding-top: var(--sp-5); border-top: var(--rule) solid var(--line); }
.pref-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.pref-opt-board { font-size: var(--fs-2); color: var(--muted); }
.glossary { margin: var(--sp-4) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.glossary dt { font-weight: 700; }
.glossary dd { margin: 2px 0 0; color: var(--text-2); font-size: var(--fs-4); }

/* ---------- footer */
.site-footer { border-top: var(--rule) solid var(--line); background: var(--paper); padding: var(--sp-8) 0; }
.footer-inner { display: grid; grid-template-columns: 1.1fr 1.3fr 1.5fr; gap: var(--sp-8); align-items: start; }
.footer-links { display: flex; gap: var(--sp-8); }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-3); }
.footer-links a { color: var(--ink); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-inner { grid-template-columns: 1fr 2fr 1.2fr; }
.footer-links { flex-wrap: wrap; gap: var(--sp-5) var(--sp-8); }
.link-btn { padding: 0; border: none; background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.link-btn:hover { text-decoration: underline; }
/* cookie choice: slides up from the bottom on the first visit, dims the page around it until a choice is made */
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--band); color: var(--on-band); border-top: 4px solid var(--stats); box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25); animation: consent-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both; }
.consent-inner { display: flex; align-items: center; gap: var(--sp-4) var(--sp-7); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.consent-icon { flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; color: var(--stats); }
.consent-text { flex: 1 1 auto; max-width: 70ch; margin: 0; font-size: var(--fs-3); line-height: var(--lh-1); }
.consent-text p { margin: var(--sp-1) 0 0; opacity: 0.9; max-width: none; }
.consent-title { font-family: var(--serif); font-size: var(--fs-7); line-height: var(--lh-3); color: var(--on-fill); }
.consent-actions { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.consent .consent-btn { height: 48px; min-width: 176px; background: var(--on-fill); color: var(--ink); border-color: var(--on-fill); }
.consent .consent-btn:hover { background: var(--on-fill); color: var(--ink); box-shadow: 2px 2px 0 var(--stats); }
.consent-link { color: var(--on-fill); font-weight: 700; }
.consent-link:hover { color: var(--stats); }
@media (max-width: 1000px) { .consent-inner { flex-wrap: wrap; } .consent-actions { width: 100%; } }
/* questions and answers, legal pages, 404 */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.faq-item > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; line-height: var(--lh-3); }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); }
.faq-item[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq-item > p { margin: 0; padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); max-width: 70ch; }
.legal { max-width: 70ch; font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.legal h2 { margin: var(--sp-7) 0 var(--sp-2); font-family: var(--serif); font-size: var(--fs-8); font-weight: 700; line-height: var(--lh-3); color: var(--ink); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin: 0 0 var(--sp-3); }
.legal li { margin-bottom: var(--sp-2); }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-7); }
.nf-links { border: var(--rule) solid var(--line); border-radius: var(--r); }
.footer-note { font-size: var(--fs-1); line-height: var(--u); color: var(--muted); }
@media (max-width: 860px) {
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .consent .consent-btn { flex: 1 1 140px; min-width: 0; }
  .consent-icon { display: none; }
  .consent-link { width: 100%; }
  .site-footer .brand-full { display: block; }
}
@media (max-width: 720px) { .consent { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* ---------- course line, home extras */
.btn-small { height: 36px; padding: 0 var(--sp-4); font-size: var(--fs-3); }
.course-line { margin-bottom: var(--sp-5); }
.course-note { margin: 0; padding: var(--sp-3) var(--sp-4); border: var(--rule) dashed var(--dashed); font-size: var(--fs-4); }
.papers-section { margin-top: var(--sp-10); }
.welcome { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; max-width: 640px; }
.welcome .h3 { margin: 0; }
.subject-tabs { display: flex; gap: 0; border-bottom: var(--rule) solid var(--line); margin-bottom: var(--sp-4); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.subject-tabs::-webkit-scrollbar, .tabs::-webkit-scrollbar { display: none; }
.subject-tabs button { border: none; background: transparent; padding: var(--sp-3) var(--sp-4); font: 700 var(--fs-4) var(--sans); color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1.5px; white-space: nowrap; }
.subject-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.quick-card { transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: var(--sp-1); padding: 14px var(--u); background: var(--card); border: var(--rule) solid var(--line); text-decoration: none; color: var(--ink); border-radius: var(--r); }
.quick-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-2); }
.quick-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; }
.quick-card .small { color: var(--text-2); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-9); align-items: center; padding: var(--sp-3) 0 var(--sp-2); }
.hero-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.home-hero .h1-big { max-width: 16ch; font-size: var(--fs-15); line-height: var(--lh-7); letter-spacing: -0.015em; }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.hero-trust span::before { content: ""; width: 6px; height: 6px; background: var(--dec); }
.hero-figure { position: relative; display: block; color: var(--ink); text-decoration: none; border: var(--rule) solid var(--line); background: var(--card); box-shadow: var(--sh-3); transition: transform 0.2s, box-shadow 0.2s; border-radius: var(--r); }
.hero-figure:hover { transform: translateY(-2px); box-shadow: var(--sh-3); }
.hero-figure img { display: block; width: 100%; height: auto; }
/* the preview is a still from a lesson, which always uses the light lesson colours, so its caption does too */
.hero-figure { background: var(--card); color: var(--ink); border-color: var(--line); }
.hero-figure:hover { color: var(--ink); }
.hero-figure img { border-bottom: var(--rule) solid var(--line); }
.hero-figure .hero-play { color: var(--ink); }
.hero-figure .hero-play-icon { background: var(--fill); color: var(--on-fill); }
.hero-figure .hero-play-sub { color: #5A5F6B; }
.hero-play { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); color: var(--ink); font-size: var(--fs-3); line-height: var(--lh-1); }
.hero-play-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); }
.hero-play-icon svg { margin-left: 2px; }
.hero-play-sub { display: block; font-size: var(--fs-2); color: var(--muted); }
.hero-figure:hover strong { text-decoration: underline; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.resume-card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-8); flex-wrap: wrap; }
.resume-main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; flex: 1 1 320px; }
.resume-title { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-3); }
.resume-bar { display: block; height: 6px; max-width: 360px; background: var(--divider); }
.resume-bar i { display: block; height: 100%; background: var(--dec); }
.resume-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.feature { transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--u); background: var(--card); border: var(--rule) solid var(--line); color: var(--ink); text-decoration: none; border-radius: var(--r); }
.feature:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-2); }
.feature-n { font-family: var(--font-code); font-size: var(--fs-11); font-weight: 600; line-height: var(--lh-4); }
.feature-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; }
.spec-links { margin-top: var(--sp-4); }
.spec-links ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-3); font-weight: 700; }
.home-foot .section { display: flex; flex-direction: column; gap: var(--sp-3); }
.home-foot .section-head { min-height: 38px; display: flex; align-items: flex-end; }
.home-foot [data-papers-line] { margin: 0; }

.f-view > .f-intro, .f-view [data-f-board] > .f-intro { margin: 0 0 var(--sp-6); padding-bottom: 0; line-height: var(--lh-2); }
.f-view .f-year:first-of-type { margin-top: 0; }
.f-subject .f-view > * + .f-year { margin-top: var(--sp-7); }
.b-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); align-items: start; }
.b-sec { background: var(--card); border: var(--rule) solid var(--line); min-width: 0; border-radius: var(--r); }
.b-h { margin: 0; padding: var(--sp-3) var(--sp-4); font-family: var(--serif); font-size: var(--fs-5); font-weight: 700; line-height: var(--lh-2); border-bottom: var(--rule) solid var(--line); background: var(--paper); }
.b-list { list-style: none; margin: 0; padding: 0; }
.b-list li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); min-width: 0; }
.b-list li:last-child { border-bottom: none; }
.b-label { font-size: var(--fs-2); font-weight: 700; color: var(--text-2); line-height: var(--lh-1); }
.b-tex { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-5); min-width: 0; overflow-wrap: anywhere; }
.fline { display: block; line-height: var(--lh-4); }
.fline math[display="block"], .b-tex math[display="block"] { display: inline math; margin: 0; }

/* ---------- Learn: header with underline tabs, filter bar, pill toggle, switch */
.learn-head { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.learn-head .h1 { margin: 0; }
.tabs { display: flex; gap: var(--sp-7); border-bottom: 1px solid var(--divider); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs a, .tabs button { position: relative; padding: var(--sp-3) 0 var(--sp-3); border: none; background: none; color: var(--muted); font: 700 var(--fs-5) var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.tabs a:hover, .tabs button:hover { color: var(--ink); }
.tabs [aria-current="page"], .tabs [aria-selected="true"] { color: var(--ink); }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--fill); }
.tabs-small { gap: var(--sp-6); }
.tabs-small button { font-size: var(--fs-4); padding: var(--sp-2) 0 var(--sp-3); }
.p-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.p-top .p-status { margin: 0; font-size: var(--fs-3); font-weight: 600; color: var(--muted); }
.pill { display: inline-flex; padding: var(--sp-1); gap: 2px; border: var(--rule) solid var(--line); background: var(--card); border-radius: var(--r); }
.pill button { height: 36px; padding: 0 var(--sp-5); border: none; background: transparent; color: var(--ink); font: 700 var(--fs-3) var(--sans); cursor: pointer; }
.pill button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.pill-wide { display: flex; }
.pill-wide button { flex: 1; height: 40px; }
.fbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); align-items: end; padding: var(--sp-4) var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); margin-bottom: var(--sp-7); border-radius: var(--r); }
.fbar-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sp-4); }
.fbar-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.fbar-field[hidden] { display: none; }
.fbar-label { font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.01em; color: var(--muted); }
.fbar select { width: 100%; height: 42px; padding: 0 34px 0 var(--sp-3); border: 1px solid var(--line-strong); background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); font: 400 var(--fs-4) var(--sans); appearance: none; -webkit-appearance: none; border-radius: var(--r); cursor: pointer; text-overflow: ellipsis; }
.fbar select:hover { border-color: var(--ink); }
.fbar select:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
.switch { display: inline-flex; align-items: center; gap: var(--sp-3); height: 42px; font-size: var(--fs-3); font-weight: 700; cursor: pointer; white-space: nowrap; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 40px; height: 24px; border-radius: var(--r-lg); background: var(--divider); border: 1px solid var(--muted); transition: background 0.15s, border-color 0.15s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--fill); border-color: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--on-fill); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--link); outline-offset: 2px; }
.soon-note { margin: 0 0 var(--sp-6); font-size: var(--fs-3); color: var(--muted); }
.learn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.learn-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5) var(--sp-5); min-height: 240px; background: var(--card); border: var(--rule) solid var(--line); color: var(--ink); text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease); border-radius: var(--r); }
.learn-card:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-2); }
.learn-text { font-size: var(--fs-3); line-height: var(--lh-2); color: var(--text-2); }
.learn-card .small { color: var(--text-2); }
.learn-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--fill); color: var(--on-fill); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-2); }
.learn-icon svg { width: 18px; height: 18px; margin-left: var(--sp-1); }
.learn-icon-q { font: 700 var(--fs-9) var(--serif); }
.learn-card-title { font-family: var(--serif); font-size: var(--fs-8); font-weight: 700; line-height: var(--lh-3); padding-right: 110px; }
.learn-go { margin-top: auto; font-weight: 700; font-size: var(--fs-4); }
/* lessons: group heading > topic box (numbered, opens) > sub-topic rows (indented, each with a play button) */
.lesson-spec { display: flex; flex-direction: column; gap: var(--sp-8); }
.lesson-group { display: flex; flex-direction: column; }
.lesson-group-title { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-family: var(--serif); font-size: var(--fs-8); font-weight: 700; line-height: var(--lh-3); }
.lesson-group-title .sq { width: 12px; height: 12px; }
.lesson-group-count { margin-left: auto; font: 400 var(--fs-2) var(--sans); color: var(--muted); }
.lesson-topics { display: flex; flex-direction: column; gap: var(--sp-3); }
.lesson-topic { background: var(--card); border: var(--rule) solid var(--line); border-left-width: 5px; border-radius: var(--r); }
.lesson-topic.fam-pure { border-left-color: var(--pure); } .lesson-topic.fam-stats { border-left-color: var(--stats); }
.lesson-topic.fam-mech { border-left-color: var(--mech); } .lesson-topic.fam-dec { border-left-color: var(--dec); } .lesson-topic.fam-opt { border-left-color: var(--opt); }
.lesson-topic > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); min-height: 68px; }
.lesson-topic > summary::-webkit-details-marker { display: none; }
.lesson-topic > summary::after { content: ""; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); justify-self: center; }
.lesson-topic[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.lesson-topic[open] > summary { border-bottom: var(--rule) solid var(--line); }
.lesson-topic > summary:hover .topic-title { text-decoration: underline; }
.lesson-topic .topic-title { font-size: var(--fs-6); }
.lesson-topic .topic-desc { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--fs-2); color: var(--muted); }
.lesson-topic [data-topic-watched]:empty { display: none; }
.lesson-topic [data-topic-watched]::before { content: "·"; margin-right: var(--sp-3); }
.topic-ref-box { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); font-family: var(--font-code); font-size: var(--fs-5); font-weight: 600; line-height: 1; text-align: center; overflow: hidden; }
.play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: var(--rule) solid var(--line); background: var(--card); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.play svg { margin-left: 2px; }
.play:hover { background: var(--fill); color: var(--on-fill); }
.lessons { list-style: none; margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-2) var(--sp-11); background: var(--paper); }
.lesson { display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider); }
.lesson:last-child { border-bottom: none; }
.lesson-ref { font-family: var(--font-code); font-size: var(--fs-3); font-weight: 600; color: var(--text-2); }
.lesson-text { display: flex; flex-direction: column; min-width: 0; }
.lesson-title { font-size: var(--fs-4); line-height: var(--lh-2); }
.lesson-note { font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.lesson-done { font-size: var(--fs-1); font-weight: 700; color: var(--dec); }
.lesson-sub { padding: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }

/* ---------- journal: summary, recent lessons, confidence by topic and sub-topic */
:root { --c1: #B23A2E; --c2: #C08A2E; --c3: #3D7F6E; --c4: #22663F; }
:root[data-theme="dark"] { --c1: #E38476; --c2: #E1B260; --c3: #6DB8AF; --c4: #7CCB8F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #E38476; --c2: #E1B260; --c3: #6DB8AF; --c4: #7CCB8F; } }
.journal { display: flex; flex-direction: column; gap: var(--sp-7); }
.journal .subject-tabs { margin-bottom: calc(-1 * var(--sp-3)); }
.j-summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-8); align-items: center; }
.j-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.j-stat-n { font-family: var(--font-code); font-size: var(--fs-11); font-weight: 600; line-height: var(--lh-4); }
.j-stat-wide { padding-left: var(--sp-8); border-left: 1px solid var(--divider); }
.j-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.j-section .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.j-section .section-head .small { margin: var(--sp-1) 0 0; max-width: 70ch; }
.j-history { list-style: none; margin: 0; padding: 0; border: var(--rule) solid var(--line); background: var(--card); border-radius: var(--r); }
.j-hist { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); }
.j-hist:last-child { border-bottom: none; }
.j-hist-when { font-size: var(--fs-2); color: var(--muted); }
.j-main { display: flex; flex-direction: column; min-width: 0; }
.j-title { font-size: var(--fs-4); font-weight: 700; line-height: var(--lh-2); }
.j-meta { display: flex; flex-wrap: wrap; gap: 2px var(--sp-3); font-size: var(--fs-1); line-height: var(--lh-1); color: var(--muted); }
.j-empty { margin: 0; padding: var(--sp-5); border: var(--rule) dashed var(--dashed); font-size: var(--fs-3); color: var(--text-2); }
.j-topic { background: var(--card); border: var(--rule) solid var(--line); border-left-width: 5px; border-radius: var(--r); }
.j-topic.fam-pure { border-left-color: var(--pure); } .j-topic.fam-stats { border-left-color: var(--stats); }
.j-topic.fam-mech { border-left-color: var(--mech); } .j-topic.fam-dec { border-left-color: var(--dec); } .j-topic.fam-opt { border-left-color: var(--opt); }
.j-topic > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-4); }
.j-topic > summary::-webkit-details-marker { display: none; }
.j-topic > summary::after { content: ""; width: 10px; height: 10px; border-right: 1.8px solid var(--ink); border-bottom: 1.8px solid var(--ink); transform: rotate(45deg) translate(-2px, -2px); justify-self: center; }
.j-topic[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.j-topic[open] > summary { border-bottom: var(--rule) solid var(--line); }
.j-topic .topic-title { font-size: var(--fs-6); }
.j-topic-meter { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-2); }
.meter { display: inline-flex; gap: var(--sp-1); }
.meter i { width: 22px; height: 8px; background: var(--divider); }
.meter.lv-1 i.on { background: var(--c1); } .meter.lv-2 i.on { background: var(--c2); } .meter.lv-3 i.on { background: var(--c3); } .meter.lv-4 i.on { background: var(--c4); }
.meter-word { font-weight: 700; }
.meter-count { color: var(--muted); }
.j-rows { list-style: none; margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-2) var(--sp-11); background: var(--paper); }
.j-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--divider); }
.j-row:last-child { border-bottom: none; }
.j-row .j-title { font-weight: 400; }
.j-watch { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 700; text-decoration: none; }
.j-watch::before { content: ""; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.j-watch:hover { text-decoration: underline; }
.j-rate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--divider); border: 1px solid var(--divider); }
.j-rate button { min-width: 74px; height: 34px; padding: 0 var(--sp-2); border: none; background: var(--card); color: var(--muted); font: 700 var(--fs-1) var(--sans); cursor: pointer; transition: background 0.15s, color 0.15s; }
.j-rate button:hover { background: var(--paper); color: var(--ink); }
.j-rate button[aria-pressed="true"] { color: #fff; }
.j-rate button.lv-1[aria-pressed="true"] { background: var(--c1); } .j-rate button.lv-2[aria-pressed="true"] { background: var(--c2); }
.j-rate button.lv-3[aria-pressed="true"] { background: var(--c3); } .j-rate button.lv-4[aria-pressed="true"] { background: var(--c4); }
:root[data-theme="dark"] .j-rate button[aria-pressed="true"] { color: #17181B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .j-rate button[aria-pressed="true"] { color: #17181B; } }

/* ---------- account */
.account-btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 40px; padding: 0 var(--sp-3); margin-right: var(--sp-2); border: var(--rule) solid var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-3); font-weight: 700; white-space: nowrap; align-self: center; border-radius: var(--r); }
.account-btn:hover { background: var(--card); color: var(--ink); }
.account-btn[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.account { display: flex; flex-direction: column; align-items: center; }
.account-card { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-7); }
.account-card[hidden] { display: none; }
.account-h { margin: 0; }
.account-lede { margin: calc(-1 * var(--sp-3)) 0 0; }
.account-loading { color: var(--muted); }
.btn-google { width: 100%; height: 48px; gap: var(--sp-3); background: var(--card); color: var(--ink); font-size: var(--fs-4); }
.btn-google:hover { background: var(--paper); }
.btn-google[hidden], .or[hidden], .tabs[hidden], .pill[hidden] { display: none; }
.or { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-2); color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--divider); }
.account-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.account-form[hidden], .account-form [hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-3); }
.field input { width: 100%; height: 46px; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 400 var(--fs-5) var(--sans); border-radius: var(--r); }
.field input:hover { border-color: var(--ink); }
.field input:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--ink); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 var(--sp-3); border: none; background: none; color: var(--link); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.pw-meter { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: calc(-1 * var(--sp-1)); }
.pw-meter.off { display: none; }
.pw-meter-row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-2); color: var(--text-2); }
.pw-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
.pw-bar i { height: 6px; border-radius: var(--r-sm); background: var(--divider); transition: background 0.2s; }
.pw-meter[data-s="1"] .pw-bar i:nth-child(-n+1) { background: var(--red); }
.pw-meter[data-s="2"] .pw-bar i:nth-child(-n+2) { background: #d08a1e; }
.pw-meter[data-s="3"] .pw-bar i:nth-child(-n+3) { background: var(--dec); }
.pw-meter[data-s="4"] .pw-bar i { background: var(--dec); }
.pw-word { font-weight: 700; color: var(--ink); }
.pw-meter[data-s="1"] .pw-word { color: var(--red); }
.pw-meter[data-s="2"] .pw-word { color: #b8760f; }
.pw-meter[data-s="3"] .pw-word, .pw-meter[data-s="4"] .pw-word { color: var(--dec); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-4); font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.pw-rules li { display: flex; align-items: center; gap: var(--sp-2); }
.pw-rules li::before { content: ""; flex: none; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--muted); border-radius: var(--r-sm); background: transparent no-repeat center / 11px 11px; transition: background-color 0.15s, border-color 0.15s; }
.pw-rules li.ok::before { border-color: var(--dec); background-color: var(--dec); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pw-match { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-2); color: var(--text-2); }
.pw-match::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pw-match.ok::before { background: var(--dec); }
.code-sent { margin: 0; font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.code-input { font-family: var(--font-code) !important; font-size: var(--fs-10) !important; letter-spacing: 0.45em; text-align: center; height: 56px !important; }
.code-links { display: flex; justify-content: space-between; }
.account-form .btn-big { width: 100%; margin-top: var(--sp-1); }
.account-msg { margin: 0; padding: var(--sp-3) var(--sp-3); border-left: 3px solid var(--red); background: var(--paper); font-size: var(--fs-3); line-height: var(--lh-1); }
.account-msg.is-good { border-left-color: var(--dec); }
.text-btn { border: none; background: none; padding: var(--sp-1) 0; font: 700 var(--fs-3) var(--sans); color: var(--link); cursor: pointer; align-self: center; }
.account-delete { align-self: stretch; margin-top: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--sp-2); }
.btn-delete { width: 100%; border-color: var(--red); color: var(--red); background: transparent; transition: background 0.15s, color 0.15s; }
.btn-delete:hover { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.btn-delete.is-armed { background: var(--red); color: #fff; }
.btn-delete.is-armed:hover { background: var(--red); color: #fff; }
.delete-note { margin: 0; font-size: var(--fs-2); line-height: var(--lh-1); color: var(--muted); text-align: center; }
.delete-note:empty { display: none; }
.account-note { margin: 0; text-align: center; }
.account-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--fill); color: var(--on-fill); display: flex; align-items: center; justify-content: center; font: 700 var(--fs-9) var(--serif); }
.account-ok { margin: 0; padding: var(--sp-3) var(--sp-3); border-left: 3px solid var(--dec); background: var(--paper); font-size: var(--fs-3); }
.account-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.save-note { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; padding: var(--sp-4) var(--sp-4); margin-bottom: var(--sp-7); border-left: 4px solid var(--link); background: var(--card); }
.save-note[hidden] { display: none; }
.welcome-note { margin: 0 0 var(--sp-6); padding: var(--sp-4); border-left: 4px solid var(--dec); background: var(--card); font-size: var(--fs-4); line-height: var(--lh-2); }
.welcome-note[hidden] { display: none; }
.save-note p { margin: 0; font-size: var(--fs-4); line-height: var(--lh-2); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- lesson player: a 1280 × 720 stage scaled to fit; fixed colours so lessons look the same in light and dark */
.lesson.is-ready .play { background: var(--fill); color: var(--on-fill); }
.lesson.is-ready .lesson-note { color: var(--dec); }
body.player-open { overflow: hidden; }
.player { position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 18, 0.82); display: flex; align-items: center; justify-content: center; padding: var(--sp-6); }
.player[hidden] { display: none; }
.player { --pl-bg: #17181B; --pl-line: #32353C; --pl-fg: #ECEAE4; --pl-muted: #9B9992; --pl-hover: #26282E; --pl-blue: #9EC2F7; }
.player-box { width: min(1120px, 100%, calc((100vh - 140px) * 16 / 9)); background: var(--pl-bg); border: 1px solid var(--pl-line); color: var(--pl-fg); }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.player-title { margin: 0; font-size: var(--fs-3); font-weight: 700; color: #d7d4cc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-close { width: 36px; height: 36px; border: 1px solid var(--pl-line); background: none; color: var(--pl-fg); font-size: var(--fs-5); cursor: pointer; flex: none; }
.player-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #FCFCFA; }
.player-screen:fullscreen { aspect-ratio: auto; display: flex; align-items: center; justify-content: center; background: #000; }
.player-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: calc(-1 * var(--sp-8)) 0 0 calc(-1 * var(--sp-8)); border-radius: 50%; border: none; background: rgba(27, 30, 39, 0.88); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.player-big svg { width: 26px; height: 26px; margin-left: var(--sp-1); }
.player-big[hidden] { display: none; }
.player-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.player-btn { width: 36px; height: 36px; border: none; background: none; color: var(--pl-fg); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.player-btn svg { width: 16px; height: 16px; }
.player-time { font-size: var(--fs-2); font-variant-numeric: tabular-nums; color: var(--pl-muted); white-space: nowrap; }
.player-track { position: relative; flex: 1; height: 28px; cursor: pointer; touch-action: none; }
.player-track::before { content: ""; position: absolute; left: 0; right: 0; top: 12px; height: 4px; background: var(--pl-line); }
.player-fill { position: absolute; left: 0; top: 12px; height: 4px; background: #e2564b; }
.player-marks i { position: absolute; top: 10px; width: 2px; height: 8px; background: var(--pl-bg); }
.player-part { font-size: var(--fs-2); font-weight: 700; color: var(--pl-muted); white-space: nowrap; min-width: 84px; text-align: right; }

.stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; cursor: pointer;
  --s-ink: #1A2131; --s-paper: #FCFCFA; --s-red: #C0342B; --s-muted: #5B6578; --s-green: #1F7A4D; --s-line: #DDE6F1; --s-card: #fff; --s-on-ink: #fff;
  color: var(--s-ink); background: var(--s-paper);
  font-family: var(--sans); }
/* squared paper, like the rest of the site (40 px squares on the 1280 × 720 stage) */
.stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--s-line) 1px, transparent 1px), linear-gradient(90deg, var(--s-line) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.6; pointer-events: none; }
.stage math { color: var(--s-ink); }
.st-scene { position: absolute; inset: 0; display: flex; flex-direction: column; }
.st-head { display: flex; align-items: center; justify-content: space-between; height: 81px; box-sizing: border-box; padding: 0 64px; border-bottom: 2px solid var(--s-ink); background: var(--s-paper); position: relative; z-index: 2; }
.st-label { font-family: var(--serif); font-size: 30px; font-weight: 700; }
.st-brand { display: flex; align-items: center; gap: 10px; font: 700 20px var(--serif); }
.st-brand .st-logo { width: 34px; height: 34px; }
.st-body { position: relative; flex: 1; padding: 40px 64px 36px; display: flex; flex-direction: column; gap: 22px; min-height: 0; }
.st-brandscreen { align-items: center; justify-content: center; gap: 14px; background: var(--s-ink); color: var(--s-paper); }
.st-brandscreen .st-logo { width: 150px; height: 150px; color: #fff; }
.st-word { font: 700 72px var(--serif); letter-spacing: 0.04em; }
.st-tag { font-size: 24px; color: #c9ccd6; }
.st-titlescreen { justify-content: center; padding: 0 110px; gap: 14px; }
.st-kicker { margin: 0; font-size: 24px; font-weight: 700; color: var(--s-red); }
.st-topic { margin: 0; font-size: 26px; color: var(--s-muted); }
.st-title { margin: 6px 0 0; font: 700 76px/1.08 var(--serif); }
.st-rule { width: 220px; height: 8px; background: var(--s-red); margin-top: 18px; transform-origin: 0 50%; }
.st-h { margin: 0; font: 700 40px var(--serif); }
.st-obj, .st-sum { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.st-obj li, .st-sum li { display: flex; align-items: flex-start; gap: 22px; font-size: 32px; line-height: 44px; }
.st-num { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--s-ink); color: var(--s-on-ink); display: flex; align-items: center; justify-content: center; font: 700 24px var(--sans); }
.st-tick { flex: none; width: 40px; height: 40px; margin-top: 2px; }
.st-tick path { fill: none; stroke: var(--s-red); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.stage .st-obj math, .stage .st-sum math, .stage .st-say math, .stage .st-qtext math { font-size: 1.05em; }
.st-board { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.st-list { display: flex; flex-direction: column; gap: 26px; will-change: transform; }
.st-step { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; border-left: 5px solid var(--s-red); }
.st-say { margin: 0; font-size: 30px; line-height: 42px; }
.st-tex { font-size: 38px; line-height: 1.3; }
.st-tex math[display="block"] { margin: 4px 0 0; text-align: left; display: block math; }
.st-q { display: flex; align-items: flex-start; gap: 20px; padding: 20px 24px; background: var(--s-card); border: 2px solid var(--s-ink); }
.st-qtag { flex: none; padding: 6px 12px; background: var(--s-ink); color: var(--s-on-ink); font-size: 20px; font-weight: 700; }
.st-q-try .st-qtag { background: var(--s-red); }
.st-qtext { font-size: 32px; line-height: 44px; }
.st-terms { margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.st-term { display: flex; align-items: baseline; gap: 14px; padding: 10px 16px; background: var(--s-card); border: 1px solid var(--s-line); border-radius: 6px; font-size: 24px; line-height: 32px; }
.st-term dt { flex: none; font-weight: 700; color: var(--s-red); }
.st-term dd { margin: 0; color: var(--s-ink); }
.st-wait { position: absolute; left: 64px; right: 64px; top: 230px; display: flex; align-items: center; gap: 34px; }
.st-ring { width: 150px; height: 150px; transform: rotate(-90deg); flex: none; }
.st-ring circle { fill: none; stroke-width: 10; }
.st-ring-bg { stroke: var(--s-line); }
.st-ring-fg { stroke: var(--s-red); stroke-linecap: round; }
.st-count { position: absolute; left: 0; width: 150px; text-align: center; font: 700 60px var(--sans); }
.st-wait-text { margin: 0; font-size: 32px; line-height: 46px; }

/* ---------- tablets and phones (after the component rules so they win) */
@media (max-width: 860px) {
  .board-cards, .course-edit-home, .practice-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .practice-side { position: static; }
  .quick { grid-template-columns: 1fr; gap: var(--sp-3); }
  .features { grid-template-columns: 1fr; gap: var(--sp-3); }
  .lesson-group-count { display: none; }
  .lesson-group-title { font-size: var(--fs-7); line-height: var(--lh-3); align-items: baseline; }
  .lesson-group-title .sq { flex: none; transform: translateY(-1px); }
  .home-hero { grid-template-columns: 1fr; gap: var(--sp-7); }
  .home-hero .h1-big { font-size: var(--fs-12); line-height: var(--lh-5); }
  .hero-figure { box-shadow: var(--sh-2); margin-right: var(--sp-2); }
  .hero-ctas .btn { flex: 1 1 auto; }
  .topics-layout { grid-template-columns: 1fr; }
  .toc { display: none; }
  .tcards { gap: var(--sp-2); }
  .tcard { padding: var(--sp-3) var(--sp-4); }
  .tcard .tcard-skills { display: none; }
  .tcard-title { font-size: var(--fs-5); line-height: var(--lh-2); }
  .topic:not([open]) .topic-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .q-parts li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .q-parts .q-marks { grid-column: auto; }
  .toolbar { position: static; }
  .topic, .group { scroll-margin-top: 90px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); }
  .course-bar-home { flex-direction: column; align-items: stretch; }
}

/* ---------- small screens */
@media (max-width: 520px) {
  .h1 { font-size: var(--fs-12); line-height: var(--lh-5); }
  .toolbar .seg { min-width: 0; width: 100%; }
  .toolbar { gap: var(--sp-2); }
  .topic > summary { grid-template-columns: 40px minmax(0, 1fr) 14px; padding: var(--sp-2) var(--sp-3); }
  .topic-count { display: none; }
  .h1-big { font-size: var(--fs-12); line-height: var(--lh-5); }
  .tcards { grid-template-columns: 1fr; }
  .tcard { min-height: 0; }
  .board-grid { margin-bottom: var(--sp-8); }
  .course-bar { flex-wrap: wrap; }
  .course-bar .btn { width: 100%; }
  .points { padding: 0 var(--sp-3) var(--sp-3); }
  .point { grid-template-columns: 40px minmax(0, 1fr); }
  .point .yr { grid-column: 2; }
  .page-home .page > * + * { margin-top: var(--sp-8); }
  .h1-big { font-size: var(--fs-11); line-height: var(--lh-4); }
  .lede { font-size: var(--fs-5); line-height: var(--lh-2); }
  .topic-desc { font-size: var(--fs-2); line-height: var(--lh-1); }
  .topic > summary { padding: var(--sp-3); }
  .pref-step { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pref-subject { grid-template-columns: 1fr; gap: var(--sp-2); }
  .controls-row { grid-template-columns: 1fr; }
  .learn-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .learn-card { min-height: 0; padding: var(--sp-5); }
  .fbar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--sp-3); gap: var(--sp-3); margin-bottom: var(--sp-5); }
  .fbar-wide { grid-column: 1 / -1; order: -1; }
  .switch { grid-column: 1 / -1; height: 32px; }
  .fbar-2 { grid-template-columns: 1fr 1fr; }
  .q-list { gap: var(--sp-5); }
  .q-head { padding: var(--sp-4) var(--sp-4) 0; }
  .q-title { font-size: var(--fs-6); line-height: var(--lh-2); }
  .answer > summary { padding: 0 var(--sp-4); height: 48px; }
  .account-card { padding: var(--sp-6) var(--sp-4); }
  .pw-rules { grid-template-columns: 1fr 1fr; }
  .b-sections { grid-template-columns: 1fr; }
  .b-list li, .b-h { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .lessons { padding: 2px var(--sp-3) var(--sp-2) var(--sp-4); }
  .lesson { grid-template-columns: 32px 40px minmax(0, 1fr); gap: var(--sp-3); }
  .lesson .yr { display: none; }
  .play { width: 32px; height: 32px; }
  .lesson-topic > summary { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); }
  .topic-ref-box { width: 40px; height: 40px; font-size: var(--fs-4); }
  .lesson-topic .topic-title { font-size: var(--fs-5); line-height: var(--lh-2); }
  .account-btn { padding: 0 var(--sp-3); margin-right: 2px; }
  .account-btn-text { display: none; }
  .player { padding: 0; align-items: center; }
  .player-box { width: 100%; border-left: none; border-right: none; }
  .player-part { display: none; }
  .select, .select select { width: 100%; min-width: 0; }
  .select { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .pref-done { margin-left: 0; }
  .j-summary { grid-template-columns: 1fr 1fr; }
  .j-stat-wide { grid-column: 1 / -1; padding-left: 0; padding-top: var(--sp-3); border-left: none; border-top: 1px solid var(--divider); }
  .j-hist { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); }
  .j-hist-when { grid-column: 1 / -1; }
  .j-topic > summary { grid-template-columns: 40px minmax(0, 1fr) 14px; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3); }
  .j-topic .topic-title { font-size: var(--fs-5); line-height: var(--lh-2); }
  .j-rows { padding: 2px var(--sp-3) var(--sp-2) var(--sp-4); }
  .j-row { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
  .j-rate { grid-column: 1 / -1; }
  .j-rate button { min-width: 0; }
  .pref-done .btn { width: 100%; }
  .f-list { grid-template-columns: 1fr; }
  .q-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
  .working li, .ans-cols, .ans-q { grid-template-columns: minmax(0, 1fr) 52px; }
  .ans-body::after, .worked .working::after { right: 52px; }
  .total .mark { width: 52px; }
  .step { padding: var(--sp-3) var(--sp-3) var(--sp-3) 46px; }
  .ans-body .step::before { left: 14px; }
  .ans-cols span:first-child, .ans-q > span:first-child, .answer > summary { padding-left: 14px; padding-right: 14px; }
  .worked .working li > .line { padding-left: 14px; }
  .q-parts li { grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--sp-2); }
  .help > summary, .help-body { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .toolbar .btn-small { width: 100%; }
  .toc { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- admin */
.admin { display: flex; flex-direction: column; gap: var(--sp-8); }
.admin-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-8); }
.admin-stat { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.admin-bars { display: flex; align-items: flex-end; gap: var(--sp-1); height: 140px; padding: var(--sp-3); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.admin-bars span { flex: 1; background: var(--pure); min-width: 4px; }
.admin-table { width: 100%; border-collapse: collapse; background: var(--card); border: var(--rule) solid var(--line); font-size: var(--fs-3); }
.admin-table th, .admin-table td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--divider); }
.admin-table td + td, .admin-table th + th { text-align: right; font-variant-numeric: tabular-nums; }
.page > .crumbs { margin-bottom: var(--sp-4); }

@media (max-width: 1080px) and (min-width: 521px) {
  .home-hero { grid-template-columns: 1fr; }
  .hero-figure { max-width: 640px; }
}
/* sign-in gates for lessons and the Journal */
.gate { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-7); background: var(--card); border: var(--rule) solid var(--line); box-shadow: var(--sh-3); max-width: 760px; border-radius: var(--r); }
.gate-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); }
.gate-icon svg { width: 24px; height: 24px; }
.gate-main { display: flex; flex-direction: column; gap: var(--sp-3); }
.gate-title { font-family: var(--serif); font-size: var(--fs-10); line-height: var(--lh-4); }
.gate-intro { font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); max-width: 58ch; }
.gate-points { list-style: none; margin: var(--sp-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-4); }
.gate-points li { display: flex; align-items: center; gap: var(--sp-3); }
.gate-points svg { flex: none; color: var(--dec); }
.gate-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.gate-note { font-size: var(--fs-2); color: var(--muted); max-width: none; }
.gate-strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-7); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--rule) solid var(--line); border-left-width: 5px; border-radius: var(--r); }
.gate-strip .gate-icon { width: 40px; height: 40px; }
.gate-strip .gate-icon svg { width: 18px; height: 18px; }
.gate-strip p { flex: 1 1 320px; margin: 0; font-size: var(--fs-4); color: var(--text-2); }
.gate-strip strong { color: var(--ink); }
.gate-strip .gate-actions { margin: 0; }
.play.is-locked { background: var(--card) !important; color: var(--muted) !important; border-color: var(--divider); }
.gate-dialog { padding: 0; border: none; background: transparent; max-width: min(760px, calc(100vw - 32px)); overflow: visible; }
.gate-dialog::backdrop { background: rgba(10, 12, 18, 0.6); }
.gate-dialog .gate { box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35); }
.gate-close { position: absolute; right: 12px; top: 12px; z-index: 1; width: 36px; height: 36px; border: none; background: none; color: var(--ink); font-size: var(--fs-5); cursor: pointer; }
.gate-dialog[open] { position: fixed; }
@media (max-width: 520px) {
  .gate { grid-template-columns: 1fr; padding: var(--sp-6) var(--sp-5); box-shadow: var(--sh-2); }
  .gate-actions .btn { flex: 1 1 auto; }
}
.learn-card { position: relative; }
.learn-badge { position: absolute; top: var(--u); right: var(--u); display: inline-block; padding: 2px var(--sp-2); border: 1px solid var(--line-strong); font: 700 var(--fs-1)/16px var(--sans); letter-spacing: 0.02em; }
.learn-badge-open { border-color: var(--dec); color: var(--dec); }

/* ======================================================================================
   Design system layer (2026 refresh). Tokens first, then components that use them.
   The squared-paper look stays; corners soften slightly and shadows are one consistent set.
   ====================================================================================== */
:root {
  --r-sm: 3px; --r: 5px; --r-lg: 8px;
  /* paper has an edge, not a glow: one or two pixels of the sheet below; only dialogs lift off the page */
  --sh-1: 0 1px 0 var(--edge); --sh-2: 0 2px 0 var(--edge); --sh-3: 0 2px 0 var(--edge), 0 14px 34px var(--raise);
  /* type scale */
  --fs-1: 12px; --fs-2: 13px; --fs-3: 14px; --fs-4: 15px; --fs-5: 16px; --fs-6: 18px; --fs-7: 20px; --fs-8: 22px; --fs-9: 24px; --fs-10: 26px; --fs-11: 28px; --fs-12: 32px; --fs-13: 38px; --fs-14: 46px; --fs-15: 54px;
  /* line heights, on the 19px grid where text sits on the squares */
  --lh-1: 19px; --lh-2: 24px; --lh-3: 28px; --lh-4: 32px; --lh-5: 38px; --lh-6: 44px; --lh-7: 57px;
  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 19px; --sp-6: 24px; --sp-7: 32px; --sp-8: 38px; --sp-9: 48px; --sp-10: 57px; --sp-11: 76px;
  --tap: 44px;          /* smallest touch target */
  --measure: 58ch;      /* longest comfortable line of text: about 75 characters */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --acc-fm: #2B4C7E; --acc-ma: #2F6F6A; --acc-ph: #6B3F69;
  --acc-fm-bg: #E6ECF5; --acc-ma-bg: #E2EFEC; --acc-ph-bg: #F0E6EF;
}
:root[data-theme="dark"] { --acc-fm: #8FB0E6; --acc-ma: #74C2B8; --acc-ph: #C99BC6; --acc-fm-bg: #1E2636; --acc-ma-bg: #1A2A29; --acc-ph-bg: #2A2030; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --acc-fm: #8FB0E6; --acc-ma: #74C2B8; --acc-ph: #C99BC6; --acc-fm-bg: #1E2636; --acc-ma-bg: #1A2A29; --acc-ph-bg: #2A2030; } }

/* consistent corners: cards, buttons, inputs and list containers */
.btn, .card, .rows, .q, .fbar, .seg, .tiles, .quick-card, .feature, .faq-item, .j-history, .j-empty, .field input, .filter, .board-card, .lesson-topic, .j-topic, .topic, .gate, .subject-panel, .how-step, .demo, .shot, .stat-wrap, .consent-box, .player-box, .welcome, .resume-card, .learn-card, .toc, select, textarea { border-radius: var(--r); }
.rows, .seg, .tiles, .j-history, .faq-item, .lesson-topic, .j-topic { overflow: hidden; }
.rows > :focus-visible, .seg > :focus-visible, .tiles > :focus-visible, .seg button:focus-visible, .tiles button:focus-visible { outline-offset: -4px; }
.btn-small, .badge-ink, .acc-tag, .j-rate { border-radius: var(--r-sm); }
.j-rate { overflow: hidden; }
.topic-ref-box { border-radius: var(--r-sm); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.site-nav a { transition: color .15s, border-color .15s; }
.site-nav a:hover { border-bottom-color: var(--divider); }
.site-nav a:focus-visible { outline-offset: 4px; border-radius: var(--r-sm); }

/* type scale */
.h2-big { font-size: var(--fs-12); line-height: var(--lh-5); letter-spacing: -0.01em; }
.section-intro { display: flex; flex-direction: column; gap: var(--sp-1); }
.kicker-blue { color: var(--link); }

/* theme-matched images */
.img-dark { display: none !important; }
:root[data-theme="dark"] .img-light { display: none !important; }
:root[data-theme="dark"] .img-dark { display: block !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .img-light { display: none !important; } :root:not([data-theme="light"]) .img-dark { display: block !important; } }

/* ---------- home: hero */
.page-home .page { padding-bottom: 0; }
.page-home .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; padding: var(--sp-6) 0 40px; }
.home-hero .h1-big { font-size: var(--fs-15); line-height: var(--lh-7); max-width: 13ch; }
.hero-sub { font-family: var(--serif); font-size: var(--fs-8); line-height: var(--lh-4); font-weight: 500; color: var(--ink); max-width: 30ch; }
.home-hero .lede { font-size: var(--fs-5); line-height: var(--lh-2); max-width: 46ch; }
.hero-access { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-3); color: var(--text-2); }
.hero-access li { display: flex; align-items: center; gap: var(--sp-3); }
.acc-tag { flex: none; min-width: 96px; text-align: center; padding: 2px var(--sp-2); font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-1); border: 1px solid currentColor; }
.acc-open { color: var(--acc-ma); background: var(--acc-ma-bg); }
.acc-free { color: var(--acc-fm); background: var(--acc-fm-bg); }

.showcase { position: relative; padding: 0 0 0 0; }
.shot { position: relative; display: block; margin: 0; background: var(--card); border: var(--rule) solid var(--line); overflow: hidden; color: var(--ink); text-decoration: none; border-radius: var(--r); overflow: hidden; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { position: absolute; left: 8px; bottom: 8px; padding: 2px var(--sp-2); font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-1); color: var(--ink); background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-sm); }
.shot-lesson { position: relative; z-index: 2; box-shadow: var(--sh-3); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.shot-lesson:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--sh-3); }
.shot-lesson img { border-top: var(--rule) solid var(--line); }
.shot-cap { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-3); line-height: var(--lh-1); background: var(--card); }
.shot-cap .hero-play-icon { width: 32px; height: 32px; background: var(--fill); color: var(--on-fill); }
.shot-sub { display: block; font-size: var(--fs-1); color: var(--muted); }
.shot-lesson:hover strong { text-decoration: underline; }
.shot-row { position: relative; z-index: 3; display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: start; margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-4)) 0 calc(-1 * var(--sp-7)); }
.shot-q { box-shadow: var(--sh-2); transform: rotate(-1.2deg); }
.shot-j { margin-top: var(--sp-4); box-shadow: var(--sh-2); transform: rotate(1.4deg); }
@media (prefers-reduced-motion: no-preference) {
  .shot-q, .shot-j { animation: shot-in .7s var(--ease) both; }
  .shot-j { animation-delay: .12s; }
  @keyframes shot-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
}
/* the old hero figure caption colours no longer apply */

/* ---------- home: stats band (verified counts only) */
.stat-band { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1fr; border-top: var(--rule) solid var(--line); border-bottom: var(--rule) solid var(--line); margin-top: var(--sp-2); }
.stat { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-5) var(--sp-5); }
.stat + .stat { border-left: 1px solid var(--divider); }
.stat-n { font-family: var(--serif); font-size: var(--fs-12); line-height: var(--lh-5); font-weight: 700; letter-spacing: -0.01em; }
.stat-lg .stat-n { font-size: var(--fs-14); line-height: var(--lh-7); color: var(--link); }
.stat-l { font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.stats-note { margin: var(--sp-3) 0 0; }

/* ---------- home: sections rhythm */
.page-home .section { margin-top: var(--sp-11); gap: var(--sp-6); }
.page-home .home-resume { margin-top: var(--sp-9); }
.page-home .home-foot { margin-top: var(--sp-11); }
.page-home .home-foot .section { margin-top: 0; }

/* ---------- subject panels with illustrations */
.subject-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.subject-panel { --acc: var(--acc-fm); --acc-bg: var(--acc-fm-bg); display: flex; flex-direction: column; background: var(--card); border: var(--rule) solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); border-radius: var(--r); }
.subj-ma { --acc: var(--acc-ma); --acc-bg: var(--acc-ma-bg); }
.subj-ph { --acc: var(--acc-ph); --acc-bg: var(--acc-ph-bg); }
.subject-panel:hover { color: var(--ink); transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--acc); }
.subject-panel .ill { display: block; width: 100%; height: auto; background: var(--acc-bg); border-bottom: var(--rule) solid var(--line); }
.sp-body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; }
.sp-title { font-family: var(--serif); font-size: var(--fs-8); font-weight: 700; line-height: var(--lh-3); }
.sp-title::after { content: " →"; color: var(--acc); transition: margin .2s var(--ease); }
.subject-panel:hover .sp-title::after { margin-left: var(--sp-1); }
.sp-codes { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-2); font-weight: 700; color: var(--acc); }

/* illustration strokes */
.ill { color: var(--acc, var(--link)); font-family: var(--maths); }
.ill-grid path { stroke: currentColor; stroke-opacity: .12; stroke-width: 1; }
.ill-axis path { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.ill-acc { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ill-thin { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.ill-acc.ill-thin { stroke: currentColor; stroke-width: 1.8; }
.ill-soft { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: 1.4; stroke-dasharray: 4 4; }
.ill-ghost { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1.8; stroke-dasharray: 5 5; }
.ill-area { fill: currentColor; fill-opacity: .2; }
.ill-acc-fill { fill: currentColor; }
.ill-dot-open { fill: var(--card); stroke: var(--ink); stroke-width: 2; }
.ill .ill-bg { fill: var(--acc-bg, var(--paper)); }
.ill .ill-bgstroke { stroke: var(--acc-bg, var(--paper)); fill: none; }
.ill polygon.ill-ghost { fill: none; }
.ill text { fill: var(--ink); font-size: var(--fs-5); font-style: italic; }
.ill text.ill-s { font-size: var(--fs-2); fill: var(--text-2); }

/* ---------- how it works */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); counter-reset: how; }
.how-step { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6) var(--sp-5) var(--sp-5); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.how-n { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--fill); color: var(--on-fill); font: 700 var(--fs-6) var(--serif); }
.how-title { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-3); }
.how-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-3); line-height: var(--lh-1); color: var(--text-2); }
.how-list li { display: flex; gap: var(--sp-3); }
.how-list li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: var(--sp-2); background: var(--link); border-radius: var(--r-sm); }
.how-shot { margin: var(--sp-1) 0 0; border: 1px solid var(--divider); border-radius: var(--r-sm); overflow: hidden; }
.how-shot img { display: block; width: 100%; height: auto; }
.how-link { margin-top: auto; padding-top: var(--sp-2); font-weight: 700; font-size: var(--fs-4); }
.how-link::after { content: " →"; }

/* ---------- Journal demo */
.home-demo { display: grid !important; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--sp-9); align-items: center; }
.demo-text { display: flex; flex-direction: column; gap: var(--sp-3); }
.demo { padding: 0; box-shadow: var(--sh-2); }
.demo-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-5); border-bottom: var(--rule) solid var(--line); }
.demo-topic { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; }
.demo-topic .code { margin-right: var(--sp-2); color: var(--muted); }
.demo-meter { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-3); }
.demo-rows { list-style: none; margin: 0; padding: var(--sp-1) var(--sp-5) var(--sp-2); }
.demo-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--divider); }
.demo-row:last-child { border-bottom: none; }
.demo-title { font-size: var(--fs-4); }
.meter i { transition: background .25s; }

/* ---------- home FAQ + final band */
.home-faq .faq { max-width: 820px; }
.cta-band { margin-top: var(--sp-11); background: var(--band); color: var(--on-band); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--on-fill) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-fill) 7%, transparent) 1px, transparent 1px); background-size: 19px 19px; pointer-events: none; }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-7) var(--sp-9); padding-top: 56px; padding-bottom: 56px; flex-wrap: wrap; }
.cta-h { font-family: var(--serif); font-size: var(--fs-13); line-height: var(--lh-6); font-weight: 700; }
.cta-p { margin-top: var(--sp-2); font-size: var(--fs-5); line-height: var(--lh-2); opacity: .85; max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-paper { background: var(--on-fill); color: var(--ink); border-color: var(--on-fill); }
.btn-paper:hover { background: var(--on-fill); color: var(--ink); box-shadow: 3px 3px 0 color-mix(in srgb, var(--on-fill) 45%, transparent); }
.btn-ghost-inv { color: var(--on-fill); border-color: color-mix(in srgb, var(--on-fill) 60%, transparent); }
.btn-ghost-inv:hover { background: color-mix(in srgb, var(--on-fill) 10%, transparent); color: var(--on-fill); box-shadow: none; }
.btn-ink:focus-visible, .btn-paper:focus-visible, .btn-ghost-inv:focus-visible { outline-color: var(--link); }
.cta-band :focus-visible { outline-color: var(--on-fill); }

/* ---------- Journal dashboard */
.j-overview { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: var(--sp-5) var(--sp-8); align-items: center; padding: var(--sp-6) var(--sp-6); }
.j-ov-main { display: flex; flex-direction: column; gap: var(--sp-3); }
.j-ov-meter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-6); }
.j-ov-meter .meter i { width: 40px; height: 12px; border-radius: var(--r-sm); }
.j-ov-meter .meter-word { font-family: var(--serif); font-size: var(--fs-10); }
.j-ov-stats { display: flex; gap: var(--sp-8); }
.j-dist { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--divider); }
.j-dist-bar { display: flex; height: 12px; gap: 2px; border-radius: var(--r-sm); overflow: hidden; background: var(--divider); }
.j-dist-bar i { display: block; min-width: 4px; }
.j-dist-bar .lv-1, .j-key.lv-1 { background: var(--c1); } .j-dist-bar .lv-2, .j-key.lv-2 { background: var(--c2); }
.j-dist-bar .lv-3, .j-key.lv-3 { background: var(--c3); } .j-dist-bar .lv-4, .j-key.lv-4 { background: var(--c4); }
.j-dist-bar .lv-0 { background: transparent; }
.j-key.lv-0 { background: transparent; border: 1.5px dashed var(--dashed); }
.j-dist-key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-2); color: var(--text-2); }
.j-dist-key li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.j-dist-key strong { color: var(--ink); }
.j-key { width: 12px; height: 12px; border-radius: var(--r-sm); }
.j-start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-6) var(--sp-6); border-style: dashed; }
.j-steps { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.j-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-8); align-items: start; }
.j-split .j-hist { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-3); }
.j-split .j-hist-when { grid-column: 1 / -1; }
.j-revise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.j-rev { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-3); text-align: left; background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.j-rev:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.j-rev .topic-ref-box { width: 38px; height: 38px; font-size: var(--fs-3); }
.j-rev-go { font-size: var(--fs-2); font-weight: 700; color: var(--link); }
.subject-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.tab-sub { font-size: var(--fs-1); font-weight: 400; color: var(--muted); }

@media (max-width: 1100px) {
  .page-home .home-hero { grid-template-columns: 1fr; gap: 40px; }
  .showcase { max-width: 640px; margin: 0 auto; width: calc(100% - 40px); }
  .home-hero .h1-big { max-width: 18ch; }
}
@media (max-width: 860px) {
  .home-hero .h1-big { font-size: var(--fs-13); line-height: var(--lh-6); }
  .hero-sub { font-size: var(--fs-6); line-height: var(--lh-3); }
  .showcase { width: 100%; }
  .shot-row { margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-1)) 0 calc(-1 * var(--sp-1)); gap: var(--sp-3); }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--sp-4) var(--sp-4); }
  .stat:nth-child(odd) { border-left: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--divider); }
  .stat-lg .stat-n { font-size: var(--fs-13); line-height: var(--lh-6); }
  .stat:last-child { grid-column: 1 / -1; border-left: none; }
  .subject-panels, .how { grid-template-columns: 1fr; gap: var(--sp-4); }
  .subject-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .subject-panel .ill { height: 100%; border-bottom: none; border-right: var(--rule) solid var(--line); }
  .home-demo { grid-template-columns: 1fr; gap: var(--sp-6); }
  .demo-row { grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
  .demo-row .j-rate { grid-column: 1 / -1; }
  .demo-row .j-rate button { min-width: 0; }
  .page-home .section { margin-top: 56px; }
  .h2-big { font-size: var(--fs-10); line-height: var(--lh-4); }
  .cta-h { font-size: var(--fs-11); line-height: var(--lh-4); }
  .cta-actions, .cta-actions .btn { width: 100%; }
  .j-overview { grid-template-columns: 1fr; padding: var(--sp-5); }
  .j-split { grid-template-columns: 1fr; gap: var(--sp-7); }
}
@media (max-width: 520px) {
  .subject-panel { grid-template-columns: 1fr; }
  .subject-panel .ill { border-right: none; border-bottom: var(--rule) solid var(--line); }
  .shot-row { grid-template-columns: 1fr; margin: calc(-1 * var(--sp-3)) var(--sp-2) 0; gap: 0; }
  .shot-j { margin: calc(-1 * var(--sp-2)) 0 0 var(--sp-6); }
  .hero-access li { align-items: flex-start; flex-direction: column; gap: 2px; }
}
@media (max-width: 360px) {
  .home-hero .h1-big { font-size: var(--fs-12); line-height: var(--lh-5); }
  .stat-lg .stat-n { font-size: var(--fs-12); }
}

/* lessons follow the site theme: the same scenes on a dark board */
:root[data-theme="dark"] .stage { --s-ink: #ECEAE4; --s-paper: #17181B; --s-red: #EE8C7E; --s-muted: #A6A296; --s-green: #7CCB8F; --s-line: #2A2C31; --s-card: #1F2125; --s-on-ink: #17181B; }
:root[data-theme="dark"] .player-screen { background: #17181B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stage { --s-ink: #ECEAE4; --s-paper: #17181B; --s-red: #EE8C7E; --s-muted: #A6A296; --s-green: #7CCB8F; --s-line: #2A2C31; --s-card: #1F2125; --s-on-ink: #17181B; }
  :root:not([data-theme="light"]) .player-screen { background: #17181B; }
}

/* ---------- footer: four labelled groups */
.site-footer { padding: var(--sp-9) 0 40px; }
.site-footer .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: var(--sp-7) var(--sp-9); }
.footer-tag { margin-top: var(--sp-3); max-width: 34ch; font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.site-footer .footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.footer-h { margin: 0 0 var(--sp-3); font-family: var(--sans); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.site-footer .footer-links ul { gap: var(--sp-2); }
.site-footer .footer-links a, .site-footer .link-btn { font-size: var(--fs-3); }
.site-footer .footer-note { grid-column: 1 / -1; padding-top: var(--sp-5); border-top: 1px solid var(--divider); }
@media (max-width: 860px) {
  .site-footer .footer-inner { grid-template-columns: 1fr; }
  .site-footer .footer-links { grid-template-columns: 1fr 1fr; gap: var(--sp-6) var(--sp-4); }
}
.faq-toc ul { list-style: none; margin: 0 0 var(--sp-7); padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.faq-toc a { display: inline-block; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--divider); border-radius: var(--r); background: var(--card); font-size: var(--fs-3); font-weight: 700; text-decoration: none; }
.faq-toc a:hover { border-color: var(--ink); color: var(--ink); }
.faq-groups { display: flex; flex-direction: column; gap: var(--sp-8); }
.faq-group { display: flex; flex-direction: column; gap: var(--sp-3); scroll-margin-top: 96px; }
.faq-item > summary { transition: background .15s; }
.faq-item > summary:hover { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] > p { animation: fade-down .25s var(--ease); } @keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } }
.admin-fb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.admin-fb-item { display: flex; flex-direction: column; gap: var(--sp-2); }
.admin-fb-item.is-done { opacity: .6; }
.admin-fb-head, .admin-fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); }
.admin-fb-foot { justify-content: space-between; }
.admin-fb-msg { white-space: pre-wrap; font-size: var(--fs-4); line-height: var(--lh-2); }

/* ---------- feedback form */
.fb-form { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-6); }
.fb-kind { margin: 0; padding: 0; border: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.fb-label { font-size: var(--fs-4); font-weight: 700; color: var(--ink); }
.fb-seg label { position: relative; display: flex; }
.fb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fb-seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--sp-2); background: var(--card); font-size: var(--fs-3); font-weight: 700; text-align: center; cursor: pointer; }
.fb-seg input:checked + span { background: var(--fill); color: var(--on-fill); }
.fb-seg input:focus-visible + span { outline: 3px solid var(--link); outline-offset: -4px; }
.field .small { font-weight: 400; }
.field textarea, .fb-form input[type="text"], .fb-form input[type="email"] { width: 100%; padding: var(--sp-3) var(--sp-3); border: 1px solid var(--muted); border-radius: var(--r); background: var(--paper); color: var(--ink); font: 400 var(--fs-5)/24px var(--sans); }
.fb-form input[type="text"], .fb-form input[type="email"] { height: 46px; }
.field textarea { resize: vertical; min-height: 140px; }
.field textarea:focus, .fb-form input:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--ink); }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.fb-status-ok { color: var(--dec); font-weight: 700; }
.fb-status-err { color: var(--red); font-weight: 700; }
.fb-alt { margin-top: var(--sp-5); }
.fb-done { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
.report-link { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); font-weight: 700; color: var(--muted); text-decoration: none; }
.report-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 520px) { .fb-seg { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .fb-form { padding: var(--sp-5); } }

/* ---------- practice: numbered questions, mark chips, final answer, gentle reveal */
.q-list { counter-reset: qn; }
.q:not([hidden]) { counter-increment: qn; }
.q-title::before { content: "Q" counter(qn); display: inline-block; margin-right: var(--sp-3); padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--fill); color: var(--on-fill); font: 700 var(--fs-2)/24px var(--sans); vertical-align: 4px; }
.q-label { font-weight: 700; }
.working .mark { flex-wrap: wrap; gap: 4px; }
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 var(--sp-1); border-radius: var(--r-sm); font: 700 var(--fs-2)/1 var(--sans); letter-spacing: 0.02em; border: 1px solid currentColor; }
.chip-m { color: var(--red); }
.chip-a { color: var(--link); }
.chip-b { color: var(--dec); }
.working .chip-m { background: color-mix(in srgb, var(--red) 9%, transparent); }
.working .chip-a { background: color-mix(in srgb, var(--link) 9%, transparent); }
.working .chip-b { background: color-mix(in srgb, var(--dec) 10%, transparent); }
.chip-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-2); margin: 0; padding: 12px var(--u); border-top: 1px solid var(--divider); font-size: var(--fs-2); color: var(--muted); }
.chip-key .chip { min-width: 22px; height: 20px; font-size: var(--fs-1); }
.chip-key .chip:not(:first-child) { margin-left: var(--sp-2); }
.working li.final { background: color-mix(in srgb, var(--dec) 8%, var(--card)); box-shadow: inset 4px 0 0 var(--dec); }
.working li.final .line { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .answer[open] .ans-body { animation: reveal .3s var(--ease); }
  @keyframes reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
.q-foot { margin: 0; padding: 10px var(--u) 14px; border-top: 1px solid var(--divider); }

/* ---------- lesson player: details under the video */
.player { overflow-y: auto; }
.player-box { width: min(1120px, 100%, calc((100vh - 340px) * 16 / 9)); min-width: min(100%, 640px); margin: auto; }
.player-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-4) var(--sp-7); padding: var(--sp-4) var(--sp-4) var(--sp-4); border-top: 1px solid #2c303c; color: #e9e5dc; }
.pi-kicker { font-size: var(--fs-1); font-weight: 700; color: #a9a59b; }
.pi-title { margin-top: 2px; font-family: var(--serif); font-size: var(--fs-8); line-height: var(--lh-3); font-weight: 700; color: var(--pl-fg); }
.pi-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--pl-muted); }
.pi-status.is-done { color: #7CCB8F; font-weight: 700; }
.pi-obj { margin-top: var(--sp-2); font-size: var(--fs-3); }
.pi-obj summary { cursor: pointer; font-weight: 700; color: var(--pl-blue); }
.pi-obj ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); line-height: var(--lh-1); color: #d7d4cc; }
.pi-obj math { color: inherit; }
.pi-side { display: flex; flex-direction: column; gap: var(--sp-3); }
.pi-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.pi-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--sp-2) var(--sp-3); text-align: left; border: 1px solid var(--pl-line); border-radius: var(--r); background: #171a22; color: var(--pl-fg); cursor: pointer; transition: border-color .15s, background .15s; min-width: 0; }
.pi-btn:hover { border-color: var(--pl-blue); background: var(--pl-hover); }
.pi-next { grid-column: 2; align-items: flex-end; text-align: right; }
.pi-dir { font-size: var(--fs-1); font-weight: 700; color: #a9a59b; }
.pi-name { font-size: var(--fs-3); font-weight: 700; line-height: var(--lh-1); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pi-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-2); }
.pi-links a { color: var(--pl-blue); font-weight: 700; }
.pi-links a:hover { color: #fff; }
.player-close:focus-visible, .player-btn:focus-visible, .pi-btn:focus-visible, .pi-links a:focus-visible, .pi-obj summary:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 2px; }
@media (max-width: 860px) {
  .player-box { width: 100%; min-width: 0; }
  .player-info { grid-template-columns: 1fr; }
  .pi-title { font-size: var(--fs-6); line-height: var(--lh-2); }
}

/* ---------- Topics landing, subject and specification headers */
.topics-subjects { display: flex; flex-direction: column; gap: var(--sp-6); }
.topics-subject { --acc: var(--acc-fm); --acc-bg: var(--acc-fm-bg); display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.topics-subject.subj-ma, .spec-hero.subj-ma { --acc: var(--acc-ma); --acc-bg: var(--acc-ma-bg); }
.topics-subject.subj-ph, .spec-hero.subj-ph { --acc: var(--acc-ph); --acc-bg: var(--acc-ph-bg); }
.ts-visual { display: flex; align-items: center; background: var(--acc-bg); border-right: var(--rule) solid var(--line); }
.ts-visual .ill { width: 100%; height: auto; }
.ts-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.ts-body .h2 a { color: var(--ink); text-decoration: none; }
.ts-body .h2 a:hover { text-decoration: underline; text-decoration-color: var(--acc); }
.ts-body .rows { margin-top: var(--sp-1); }
.spec-hero { --acc: var(--acc-fm); --acc-bg: var(--acc-fm-bg); display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-7); align-items: center; }
.spec-hero-text { display: flex; flex-direction: column; gap: var(--sp-3); }
.spec-hero-ill { background: var(--acc-bg); border: var(--rule) solid var(--line); border-radius: var(--r); box-shadow: 4px 4px 0 var(--acc); overflow: hidden; }
.spec-hero-ill .ill { display: block; width: 100%; height: auto; }
.spec-code { margin-left: var(--sp-2); padding: 0 var(--sp-3); border-radius: var(--r-sm); font-family: var(--sans); font-size: 0.55em; font-weight: 700; vertical-align: 0.3em; color: var(--acc); border: 1px solid var(--acc); }
.spec-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-3); color: var(--text-2); }
.spec-facts strong { font-family: var(--serif); font-size: var(--fs-6); color: var(--ink); }
.spec-facts .yr { color: var(--ink); }
.head-links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-weight: 700; }
.req-tag { margin-left: auto; padding: 1px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-1); border: 1px solid currentColor; }
.req-core { color: var(--text-2); }
.req-opt { color: var(--acc-ph); background: var(--acc-ph-bg); }
.yr { padding: 1px var(--sp-2); border: 1px solid var(--divider); border-radius: var(--r-sm); font-weight: 700; color: var(--text-2); background: var(--card); }
/* the tag is text only: the small square in front of it looked like a checkbox to tick */
.yr::before { content: none; }
@media (max-width: 860px) {
  .topics-subject { grid-template-columns: 1fr; }
  .ts-visual { border-right: none; border-bottom: var(--rule) solid var(--line); max-height: 150px; overflow: hidden; }
  .spec-hero { grid-template-columns: 1fr; }
  .spec-hero-ill { display: none; }
}
[data-search-results] mark { background: color-mix(in srgb, var(--stats) 35%, transparent); color: inherit; border-radius: var(--r-sm); padding: 0 1px; }
.sr-empty { display: flex; flex-direction: column; gap: var(--sp-1); }
.sr-empty a { color: var(--link); text-decoration: underline; }
[data-search-results] a:focus-visible { outline-offset: -3px; }

/* ---------- About */
.about-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-9); }
.about-cards-one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.about-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); }
.about-card .small { font-size: var(--fs-3); line-height: var(--lh-1); }
.about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.about-list li { padding-left: var(--sp-4); border-left: 3px solid var(--link); }
.about-list strong { color: var(--ink); }
.about-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.about-steps li { display: flex; gap: var(--sp-4); align-items: flex-start; font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); }
.about-steps .how-n { flex: none; width: 28px; height: 28px; font-size: var(--fs-4); }
.about-steps strong { color: var(--ink); }
.about-indep { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (max-width: 860px) { .about-cards { grid-template-columns: 1fr; margin-bottom: var(--sp-7); } }
.j-overview .kicker { font-family: var(--sans); font-weight: 700; }
.answer > .chip-key { border-top: var(--rule) solid var(--line); }
.j-rate button.lv-2[aria-pressed="true"] { color: #17181B; }
.working li > *, .working .step { min-width: 0; } .working .line { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; }


/* ======================================================================================
   Round 3: corners, FAQ, feedback, admin, lesson playback surface
   ====================================================================================== */
/* every card-like surface shares one small radius */
.subject-panel, .topics-subject, .spec-hero-ill, .how-step, .demo, .shot, .faq-item, .fb-form, .j-overview, .j-start, .j-rev, .pi-btn, .player-box, .adm-kpi, .adm-fb-item, .adm-cov-item, .adm-table-wrap { border-radius: var(--r); }
.how-shot { border-radius: var(--r-sm); }

/* FAQ: question rows read as questions, answers sit in a distinct panel */
.faq { gap: var(--sp-3); }
.faq-item { overflow: hidden; }
.faq-item > summary { position: relative; padding: var(--sp-4) 56px var(--sp-4) var(--sp-5); font-size: var(--fs-6); line-height: var(--lh-2); }
.faq-item > summary::after { content: none; }
.faq-item > summary::before { content: ""; position: absolute; right: 18px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 1px solid var(--ink); border-radius: 50%;
  background: linear-gradient(var(--ink), var(--ink)) center / 10px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 10px no-repeat; transition: transform .2s var(--ease); }
.faq-item[open] > summary::before { background: linear-gradient(var(--on-fill), var(--on-fill)) center / 10px 1.5px no-repeat; background-color: var(--fill); transform: rotate(180deg); }
.faq-item > summary:focus-visible { outline-offset: -4px; }
.faq-item[open] > summary { border-bottom: 1px solid var(--divider); }
.faq-item > p { margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5) var(--sp-5); font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); background: var(--paper); border-left: 3px solid var(--link); max-width: none; }

/* feedback form: one spacing rule for every label and its control */
.fb-form { gap: var(--sp-6); }
.fb-form .field { gap: var(--sp-2); }
.fb-kind { display: block; }
.fb-kind legend { display: block; padding: 0; margin: 0 0 var(--sp-2); }
.fb-form .field > .small { margin-top: -2px; }

/* lesson playback surface: a click toggles play; no accidental text selection while doing it */
.player-screen, .stage { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.player-flash { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: calc(-1 * var(--sp-7)) 0 0 calc(-1 * var(--sp-7)); border-radius: 50%; background: rgba(17, 19, 26, 0.72); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
.player-flash svg { width: 24px; height: 24px; }
.player-flash.is-on { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: 1; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .player-flash.is-on { animation: flash-still .6s steps(1); } @keyframes flash-still { 0% { opacity: 1; } 100% { opacity: 0; } } }
.player-loading, .player-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); background: #17181B; color: #e9e5dc; font-size: var(--fs-4); text-align: center; padding: var(--sp-6); }
.player-spinner { width: 36px; height: 36px; border: 3px solid var(--pl-line); border-top-color: var(--pl-blue); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .player-spinner { animation: none; border-top-color: var(--pl-line); } }

/* ---------- admin */
.admin-page { padding-top: var(--sp-7); }
.adm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.adm-head .h1 { margin: 2px 0; }
.adm-tabs { display: flex; gap: 0; border-bottom: var(--rule) solid var(--line); overflow-x: auto; }
.admin { gap: var(--sp-7); }
.adm-tabs button { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border: none; border-bottom: 3px solid transparent; margin-bottom: -1.5px; background: none; font: 700 var(--fs-4) var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.adm-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.adm-tabs button:hover { color: var(--ink); }
.adm-count { min-width: 22px; padding: 0 var(--sp-2); border-radius: var(--r-sm); background: var(--red); color: #fff; font-size: var(--fs-1); line-height: var(--lh-1); text-align: center; }
.adm-panel { display: flex; flex-direction: column; gap: var(--sp-8); }
.adm-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.adm-h { margin: 0; font-family: var(--serif); font-size: var(--fs-7); line-height: var(--lh-3); font-weight: 700; }
.adm-section .adm-h + .adm-table-wrap + .adm-h, .adm-section .adm-empty + .adm-h { margin-top: var(--sp-5); }
.adm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); }
.adm-kpis-2 { grid-template-columns: repeat(2, minmax(0, 220px)); }
.adm-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.adm-kpi-n { font-family: var(--serif); font-size: var(--fs-12); line-height: var(--lh-5); font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-kpi-l { font-size: var(--fs-2); color: var(--text-2); }
.adm-chart { margin: 0; padding: var(--sp-4) var(--sp-4) var(--sp-3); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.adm-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: var(--sp-1); height: 140px; border-bottom: 1px solid var(--divider); background: repeating-linear-gradient(to top, transparent 0 34px, var(--grid) 34px 35px); }
.adm-bar { display: block; background: var(--link); border-radius: 1px 1px 0 0; min-height: 0; }
.adm-axis { display: flex; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-2); font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
.adm-note { margin: 0; font-size: var(--fs-2); color: var(--muted); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.adm-table-wrap { overflow-x: auto; background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.adm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.adm-table th { padding: var(--sp-2) var(--sp-4); text-align: left; font-size: var(--fs-1); font-weight: 700; color: var(--muted); border-bottom: var(--rule) solid var(--line); background: var(--paper); }
.adm-table td { padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--divider); overflow-wrap: anywhere; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-empty, .adm-loading, .adm-error { margin: 0; padding: var(--sp-5); border: var(--rule) dashed var(--dashed); border-radius: var(--r); font-size: var(--fs-3); color: var(--text-2); }
.adm-error { border-style: solid; border-color: var(--red); color: var(--red); font-weight: 700; }
.adm-skeleton { display: grid; gap: var(--sp-4); }
.adm-skeleton i { display: block; height: 72px; border-radius: var(--r); background: linear-gradient(90deg, var(--card), var(--grid), var(--card)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .adm-skeleton i { animation: none; } }
.adm-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.adm-seg { flex: none; }
.adm-seg button { padding: 0 var(--sp-4); }
.adm-field select, .adm-field input { height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--muted); border-radius: var(--r); background: var(--card); color: var(--ink); font: 400 var(--fs-4) var(--sans); }
.adm-search { flex: 1; min-width: 200px; }
.adm-search input { width: 100%; }
.adm-fb { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-fb-item { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.adm-fb-item.is-done { border-color: var(--divider); }
.adm-fb-item.is-done .adm-fb-msg { color: var(--muted); }
.adm-fb-head, .adm-fb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.adm-fb-foot { justify-content: space-between; padding-top: var(--sp-2); border-top: 1px solid var(--divider); }
.adm-fb-ctx { margin: 0; font-size: var(--fs-3); font-weight: 700; }
.adm-fb-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-4); line-height: var(--lh-2); }
.adm-meta { font-size: var(--fs-2); color: var(--muted); overflow-wrap: anywhere; }
.adm-email { font-weight: 700; color: var(--ink); }
.adm-badge { padding: 1px var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-1); font-weight: 700; line-height: var(--lh-1); border: 1px solid currentColor; color: var(--text-2); }
.adm-badge-mistake { color: var(--red); } .adm-badge-suggestion { color: var(--link); } .adm-badge-problem { color: var(--acc-ph); }
.adm-status { font-size: var(--fs-1); font-weight: 700; }
.adm-status.is-open::before { content: "● "; color: var(--red); }
.adm-status.is-done::before { content: "✓ "; color: var(--dec); }
.adm-cov { display: flex; flex-direction: column; gap: var(--sp-3); }
.adm-cov-item { background: var(--card); border: var(--rule) solid var(--line); overflow: hidden; border-radius: var(--r); }
.adm-cov-item > summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(80px, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-4) var(--sp-4); cursor: pointer; list-style: none; }
.adm-cov-item > summary::-webkit-details-marker { display: none; }
.adm-cov-name { font-weight: 700; }
.adm-cov-bar { height: 8px; border-radius: var(--r-sm); background: var(--divider); overflow: hidden; }
.adm-cov-bar i { display: block; height: 100%; background: var(--dec); }
.adm-cov-n { font-size: var(--fs-2); color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.adm-cov-body { margin: 0; padding: var(--sp-1) var(--sp-4) var(--sp-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3) var(--sp-6); border-top: 1px solid var(--divider); }
.adm-cov-topic h3 { margin: var(--sp-3) 0 var(--sp-1); font: 700 var(--fs-3) var(--sans); }
.adm-cov-topic ul { margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.adm-cov-topic .code { font-weight: 700; color: var(--ink); margin-right: var(--sp-1); }
.adm-ok { color: var(--dec); font-weight: 700; font-size: var(--fs-3); display: block; padding-top: var(--sp-3); }
.adm-cov-item > .adm-note { padding: 0 var(--sp-4) var(--sp-4); }
@media (max-width: 1000px) { .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .adm-grid { grid-template-columns: 1fr; }
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-kpis-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-cov-item > summary { grid-template-columns: 1fr auto; }
  .adm-cov-bar { grid-column: 1 / -1; grid-row: 2; }
  .adm-bars { gap: 1px; }
}
.account-export { align-self: stretch; display: flex; flex-direction: column; align-items: inherit; gap: var(--sp-2); margin-top: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--divider); }
@media (max-width: 860px) { .lesson .yr { display: inline-flex; grid-column: 3; justify-self: start; margin-top: calc(-1 * var(--sp-1)); } }

/* ---------- lesson scenes added for the full lesson format */
.st-titlescreen { overflow: hidden; }
.st-art { position: absolute; right: 40px; top: 50%; width: 520px; height: 390px; margin-top: -195px; opacity: 0.16; }
.st-art path, .st-art circle { fill: none; stroke: var(--s-ink); stroke-width: 3; }
.st-titlescreen > :not(.st-art) { position: relative; }
.st-brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font: 700 22px var(--serif); }
.st-brandline .st-logo { width: 38px; height: 38px; }
.st-why { margin: 0; font-size: 32px; line-height: 46px; max-width: 1050px; }
.st-h-small { font-size: 30px; margin-top: 18px; }
.st-prior, .st-tips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.st-prior li, .st-tips li { position: relative; padding-left: 34px; font-size: 27px; line-height: 38px; }
.st-tips li { font-size: 24px; line-height: 34px; }
.st-tips li::before { top: 11px !important; }
.st-prior li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 14px; height: 14px; border: 3px solid var(--s-ink); }
.st-tips li::before { content: ""; position: absolute; left: 4px; top: 14px; width: 12px; height: 12px; background: var(--s-ink); border-radius: 50%; }
.st-col-warn .st-tips li::before { background: var(--s-red); border-radius: 0; transform: rotate(45deg); }
.st-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.st-col { display: flex; flex-direction: column; gap: 10px; }
.st-col-warn .st-h { color: var(--s-red); }
.st-col .st-h-small { margin-top: 0; }
.stage .st-why math, .stage .st-prior math, .stage .st-tips math { font-size: 1.05em; }

/* ---------- animated diagrams inside lesson steps */
.stage { --s-blue: #2b4c7e; --s-sh: rgba(43, 76, 126, 0.16); }
:root[data-theme="dark"] .stage { --s-blue: #8fb0e6; --s-sh: rgba(143, 176, 230, 0.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage { --s-blue: #8fb0e6; --s-sh: rgba(143, 176, 230, 0.2); } }
.st-has-fig { flex-direction: row; align-items: center; gap: 36px; }
.st-step-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.st-fig { flex: none; width: 470px; }
.st-fig .fig { display: block; width: 100%; height: auto; overflow: visible; }
.fig path, .fig rect.c, .fig rect.c2, .fig rect.d, .fig circle.c, .fig circle.c2, .fig circle.d, .fig ellipse.c { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig .ax { stroke: var(--s-ink); stroke-width: 2; }
.fig .c { stroke: var(--s-blue); stroke-width: 3.5; }
.fig .c2 { stroke: var(--s-red); stroke-width: 3; }
.fig .d { stroke: var(--s-muted); stroke-width: 2; stroke-dasharray: 6 6; }
.fig .arr.c, .fig .arr.c2 { stroke-width: 3; }
.fig .sh { fill: var(--s-sh); stroke: none; }
.fig .p { fill: var(--s-blue); }
.fig .po { fill: var(--s-paper); stroke: var(--s-ink); stroke-width: 2.5; }
.fig text { fill: var(--s-ink); font: italic var(--fs-9) "STIX Two Text", Georgia, serif; paint-order: stroke; stroke: var(--s-paper); stroke-width: 5px; stroke-linejoin: round; }
.fig .ts { font-size: var(--fs-7); fill: var(--s-muted); }
.fig .ld { stroke: var(--s-muted); stroke-width: 1.5; }
.fig .ld-dot { fill: var(--s-muted); }
.fig text.on-sh { stroke: none; }
.st-tex { overflow: hidden; } .st-has-fig .st-tex { font-size: 34px; }

/* ---------- audit, November 2026: touch targets, measure, chips ---------- */
p:not([class]), li:not([class]), .small, .lede, .footer-note, .group-note, .faq-a, .legal, .q-foot, .tl-soon { max-width: var(--measure); }
.stage p, .stage li, .st-step, .fig text { max-width: none; }
.point .yr, .lesson .yr { justify-self: start; }
@media (max-width: 860px) {
  .topic-links a, .btn-small, .seg button, .seg a, .pill button, .j-rate button, .spec-links a, .head-links a, .how-link, .report-link, .link-btn, .j-meta a, .resume-card .btn, .filter, .brand, .play { min-height: var(--tap); }
  .topic-links a, .btn-small, .j-rate button, .pill button { height: auto; }
  .play { width: var(--tap); height: var(--tap); }
  .lesson { grid-template-columns: var(--tap) 40px minmax(0, 1fr); }
  .spec-links a, .head-links a, .how-link, .report-link, .link-btn, .j-meta a { display: inline-flex; align-items: center; }
  .j-rate button { padding: var(--sp-2); line-height: 1.2; }
  /* footer links and the Analytics choice button: the same tap height, so they line up */
  .site-footer .footer-links a, .site-footer .footer-links .link-btn { display: inline-flex; align-items: center; min-height: var(--tap); }
  .site-footer .footer-links ul { gap: 0; }
}

/* ======================================================================================
   November 2026: one course, one gate, one set of controls.
   z-index scale: toolbar 5 · header and tab bar 20 · consent 40 · skip link 50 · lesson player 60.
   Motion: 150–250 ms for controls, 300–500 ms for sections entering; none with prefers-reduced-motion.
   ====================================================================================== */
.text-link { font-weight: 700; }
.measure, .lede, .gate-intro { max-width: var(--measure); }

/* ---------- course bar: subject tabs, plus an exam board select when no course is saved */
.cbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-6); margin-bottom: var(--sp-5); border-bottom: var(--rule) solid var(--line); }
.cbar .subject-tabs { border-bottom: none; margin: 0; flex: 1 1 auto; min-width: 0; }
.cbar-tabs:empty { min-height: 48px; }
.cbar-side { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: var(--sp-2); flex: none; }
.cbar-board { flex-direction: row; align-items: center; gap: var(--sp-2); }
.cbar-board select { height: 36px; min-width: 170px; padding: 0 30px 0 var(--sp-3); border: 1px solid var(--muted); border-radius: var(--r); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center; color: var(--ink); font: 400 var(--fs-4) var(--sans); appearance: none; -webkit-appearance: none; }
.cbar-note { margin: 0; font-size: var(--fs-2); color: var(--muted); white-space: nowrap; }
.cbar-note:empty { display: none; }
.subject-tabs button { min-height: 48px; justify-content: center; transition: color .15s, border-color .2s var(--ease); }
.subject-tabs button:hover { color: var(--ink); }
.subject-tabs button:focus-visible { outline-offset: -3px; border-radius: var(--r-sm); }
.ltool { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.ltool-find { flex: 1 1 280px; max-width: 420px; display: flex; align-items: center; gap: var(--sp-3); height: 44px; padding: 0 var(--sp-3); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); color: var(--muted); }
.ltool-find:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
.ltool-find input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--ink); font: 400 var(--fs-5) var(--sans); outline: none; }
.ltool-note { margin: 0; font-size: var(--fs-3); color: var(--muted); }
[data-ws-body] > .ltool-note { margin-bottom: var(--sp-6); }

/* ---------- practice: one card of filters, pills for the short choices */
.fbar-practice { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4) var(--sp-5); grid-template-columns: none; margin-bottom: var(--sp-5); }
.fbar-practice .fbar-wide { flex: 1 1 240px; max-width: 420px; }
.fbar-practice .fbar-seg { flex: 0 0 auto; }
.fbar-practice .fbar-year { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; }
.fbar-practice .pill { height: 42px; align-items: center; }
.fbar-practice .pill button { height: 32px; padding: 0 var(--sp-4); border-radius: var(--r-sm); transition: background .15s, color .15s; }
.fbar-practice .switch { height: 42px; }
.p-top { margin-bottom: var(--sp-5); }
.p-clear { padding: var(--sp-2) 0; }
.p-top .p-status { max-width: none; }
.q-list[aria-busy="true"] { opacity: .6; transition: opacity .2s; }

/* ---------- a free account, offered once per page and never when signed in */
.acc-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-7); flex-wrap: wrap; margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); background: var(--card); border: var(--rule) solid var(--line); border-left-width: 5px; border-left-color: var(--link); border-radius: var(--r); }
.acc-promo-text { flex: 1 1 360px; font-size: var(--fs-4); line-height: var(--lh-2); color: var(--text-2); max-width: 60ch; }
.acc-promo-text strong { color: var(--ink); }
.acc-promo-actions { display: flex; align-items: center; gap: var(--sp-5); flex: none; }
.page-learn .acc-promo { margin-top: var(--sp-7); }

/* ---------- the sign-in gate: the same block on Lessons, Worksheets and the Journal */
.gate { margin-bottom: var(--sp-7); outline: none; }
.gate.is-nudged { animation: gate-nudge .7s var(--ease); }
@keyframes gate-nudge { 0% { box-shadow: var(--sh-3); } 35% { box-shadow: var(--sh-3), 0 0 0 6px color-mix(in srgb, var(--link) 35%, transparent); } 100% { box-shadow: var(--sh-3); } }
.gate-actions .btn-big { min-width: 200px; }

/* ---------- worksheets */
.ws-row { grid-template-columns: 34px 52px minmax(0, 1fr) auto; }
.ws-icon { width: 34px; height: 34px; border-radius: 50%; border: var(--rule) solid var(--divider); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ws-icon svg { width: 16px; height: 16px; }
.ws-state { font-size: var(--fs-1); font-weight: 700; color: var(--muted); padding: 2px var(--sp-2); border: 1px solid var(--divider); border-radius: var(--r-sm); white-space: nowrap; background: var(--card); }
.ws-topic-sheet { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--divider); }
.ws-topic-sheet .ws-icon { border-color: var(--ink); color: var(--ink); }
.ws-topic-sheet .small { max-width: none; }

/* ---------- My course: big choices, a check for each subject, then its exam board */
.step-of { margin-left: var(--sp-3); font: 700 var(--fs-1) var(--sans); color: var(--muted); letter-spacing: .02em; vertical-align: middle; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 68px; padding: var(--sp-3) var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background .15s, color .15s, transform .15s var(--ease), box-shadow .15s var(--ease); }
.choice:hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
.choice[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.choice[aria-pressed="true"] .choice-sub { color: var(--on-fill); opacity: .8; }
.choice-title { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; line-height: var(--lh-3); }
.choice-sub { font-size: var(--fs-2); color: var(--muted); line-height: var(--lh-1); }
.subj-choices { display: flex; flex-direction: column; gap: var(--sp-3); }
.subj-choice { background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.subj-choice .choice { width: 100%; border: none; border-radius: 0; min-height: 60px; }
.subj-choice .choice:hover { transform: none; box-shadow: none; background: var(--paper); }
.subj-choice .choice[aria-pressed="true"]:hover { background: var(--fill); }
.choice-row { flex-direction: row; align-items: center; gap: var(--sp-3); }
.choice-row .choice-title { font-size: var(--fs-6); line-height: var(--lh-2); }
.choice-row .choice-sub { margin-left: auto; white-space: nowrap; }
.choice-check { width: 24px; height: 24px; flex: none; border: var(--rule) solid var(--line); border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background .15s, color .15s; }
.choice[aria-pressed="true"] .choice-check { background: var(--on-fill); color: var(--ink); border-color: var(--on-fill); }
.subj-board { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--divider); background: var(--paper); }
.subj-board .seg { width: 100%; }
.subj-board .seg button { height: 52px; }
.pref-summary .stack { gap: var(--sp-3); }
.step-done { background: var(--dec); }
.course-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-4); line-height: var(--lh-2); }
.course-summary li { display: flex; align-items: baseline; gap: var(--sp-3); }
.course-summary .sq { flex: none; transform: translateY(-1px); }
.pref-done { justify-content: flex-start; gap: var(--sp-3); margin-left: 0; flex-wrap: wrap; }
.pref-step .h3 { line-height: var(--lh-3); }

/* ---------- home: course-aware subject panels, the free-account line */
.hero-free { font-size: var(--fs-3); line-height: var(--lh-2); color: var(--text-2); max-width: 46ch; margin-top: var(--sp-1); }
.subject-panels[data-n="1"] { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.subject-panels[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-home .section { margin-top: 64px; }
.page-home .home-foot { margin-top: 64px; }
.page-home .page { padding-bottom: var(--sp-6); }
.cta-band { margin-top: var(--sp-9); }
.board-rows-one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.course-line:empty { display: none; }
.page-subjects .course-line { margin-bottom: var(--sp-6); }
.page-subject .course-line { margin-bottom: var(--sp-6); }

/* ---------- motion: controls answer at once, sections ease in */
.btn, .choice, .tile, .seg button, .pill button, .play, .j-rate button, .icon-btn, .account-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn:active, .choice:active, .learn-card:active, .subject-panel:active { transform: translateY(1px); box-shadow: none; transition-duration: .05s; }
.seg button, .tile { transition: background .15s, color .15s; }
.topic > summary, .lesson-topic > summary, .j-topic > summary, .faq-item > summary { transition: background .15s; }
.topic > summary:hover, .lesson-topic > summary:hover, .j-topic > summary:hover { background: var(--paper); }
.topic > summary::after, .lesson-topic > summary::after, .j-topic > summary::after { transition: transform .2s var(--ease); }
.play { transition: background .15s, color .15s, transform .15s var(--ease); }
.play:hover { transform: scale(1.06); }
.icon-btn { transition: background .15s; border-radius: var(--r); }
.icon-btn.is-spun svg { animation: spin-once .4s var(--ease); }
@keyframes spin-once { from { transform: rotate(-90deg); opacity: .4; } to { transform: none; opacity: 1; } }
.tabs a::after { transition: transform .2s var(--ease); }
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
@media print { .reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  main > .wrap.page, main > .page { animation: page-in .35s var(--ease) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .lesson-topic[open] > .lessons, .lesson-topic[open] > .ws-topic-sheet, .topic[open] > .topic-body, .j-topic[open] > .j-rows { animation: fade-down .25s var(--ease); }
  .q { animation: fade-down .3s var(--ease) both; }
  .consent { animation-duration: .45s; }
}
@media (prefers-reduced-motion: reduce) { .q-list[aria-busy="true"] { opacity: 1; } }

/* ---------- forced colours (Windows high contrast): keep borders and selected states visible */
@media (forced-colors: active) {
  .btn, .choice, .tile, .seg button, .pill button, .card, .rows, .q, .gate, .learn-card { border: 1px solid CanvasText; }
  [aria-pressed="true"], [aria-selected="true"], .btn-ink { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .sq, .meter i { forced-color-adjust: none; }
}

/* ---------- print */
@media print {
  .site-header, .tabbar, .consent, .site-footer, .toolbar, .cbar, .fbar, .more-nav, .mixed-nav, .acc-promo, .gate, .skip-link, .topic-links { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .answer[open] .ans-body, .q { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- tablets and phones */
@media (max-width: 860px) {
  .learn-cards { grid-template-columns: 1fr; gap: var(--sp-3); }
  .learn-card { min-height: 0; }
  .cbar { flex-direction: column; align-items: stretch; }
  .cbar .subject-tabs { overflow-x: auto; }
  .cbar-side { padding: var(--sp-2) 0 var(--sp-3); justify-content: space-between; }
  .cbar-note { white-space: normal; }
  .subject-panels[data-n="2"] { grid-template-columns: 1fr; }
  .acc-promo-actions { width: 100%; justify-content: space-between; }
}
@media (max-width: 520px) {
  .fbar-practice { padding: var(--sp-4); gap: var(--sp-4); }
  .fbar-practice .fbar-wide { flex-basis: 100%; max-width: none; order: 0; }
  .fbar-practice .fbar-seg { flex: 1 1 100%; }
  .fbar-practice .pill { width: 100%; }
  .fbar-practice .pill button { flex: 1; padding: 0 var(--sp-2); }
  .fbar-practice .fbar-year { flex: 1 1 100%; }
  .fbar-practice .switch { height: 36px; white-space: normal; }
  .choices { grid-template-columns: 1fr; }
  .choice-row .choice-sub { display: none; }
  .subj-board .seg button { height: 57px; }
  .gate-actions .btn-big { min-width: 0; }
  .ws-row { grid-template-columns: 30px 40px minmax(0, 1fr); }
  .ws-row .ws-state { grid-column: 3; justify-self: start; }
  .ws-icon { width: 30px; height: 30px; }
  .ws-topic-sheet { grid-template-columns: 30px minmax(0, 1fr); padding: var(--sp-3); }
  .ws-topic-sheet .ws-state { grid-column: 2; justify-self: start; }
  .learn-card-title { padding-right: 0; }
  .learn-badge { position: static; align-self: flex-start; margin-bottom: var(--sp-1); order: -1; }
  .pref-done .btn { width: 100%; }
  .acc-promo { padding: var(--sp-4); }
  .acc-promo-actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .acc-promo-actions .text-link { text-align: center; }
  .page-home .section, .page-home .home-foot { margin-top: 48px; }
  .cta-band { margin-top: var(--sp-8); }
}

/* ---------- audit follow-up, 8 November 2026 */
/* marks sit at the right edge of the card and the working column fills up to the red margin line */
.q-parts > li, .working > li, .ans-part, .q-parts, .working, .q-foot, .chip-key { max-width: none; }
.q-parts li { grid-template-columns: 34px minmax(0, 1fr) auto; }
.q-parts-lone li { grid-template-columns: minmax(0, 1fr) auto; }
.q-marks { justify-self: end; }
/* the Journal example on the home page is a picture, not a control */
.j-rate-static span { display: flex; align-items: center; justify-content: center; min-width: 74px; height: 34px; padding: 0 var(--sp-2); background: var(--card); color: var(--muted); font: 700 var(--fs-1) var(--sans); }
.j-rate-static span[aria-pressed="true"] { color: #fff; }
.j-rate-static .lv-1[aria-pressed="true"] { background: var(--c1); } .j-rate-static .lv-2[aria-pressed="true"] { background: var(--c2); color: #17181B; }
.j-rate-static .lv-3[aria-pressed="true"] { background: var(--c3); } .j-rate-static .lv-4[aria-pressed="true"] { background: var(--c4); }
:root[data-theme="dark"] .j-rate-static span[aria-pressed="true"] { color: #17181B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .j-rate-static span[aria-pressed="true"] { color: #17181B; } }
/* home: three equal statistics */
.stat-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .stat-band { grid-template-columns: 1fr 1fr 1fr; } .stat:last-child { grid-column: auto; border-left: 1px solid var(--divider); } .stat:nth-child(n+3) { border-top: none; } .stat-lg .stat-n { font-size: var(--fs-11); line-height: var(--lh-4); } }
@media (max-width: 520px) { .stat-band { grid-template-columns: 1fr; } .stat { border-left: none !important; } .stat + .stat { border-top: 1px solid var(--divider); } }
.how-link::after { content: "\00a0→"; }
.sp-title::after { content: "\00a0→"; }
/* footer: the divider spans the whole width; the note stays readable */
.site-footer .footer-note { max-width: none; }
.site-footer .footer-note { display: block; }
/* header: the name arrives at once from the cache, so nothing flashes from "Sign in" */
.account-btn-text { min-width: 3.5em; text-align: center; }
html.is-signed-in:not(.js-named) .account-btn-text { color: transparent; }
/* lock hint on topic links, hidden once signed in */
.tl-lock { display: inline-flex; margin-left: var(--sp-1); opacity: .7; }
html.is-signed-in .tl-lock { display: none; }
/* Learn page heading */
.kicker-link { color: var(--muted); text-decoration: none; }
.kicker-link:hover { color: var(--ink); text-decoration: underline; }
.learn-head .tabs { gap: var(--sp-6); }
/* password rules read as checks, not boxes */
.pw-rules li::before { border-radius: 50%; }
/* one select height everywhere */
.cbar-board select { height: 42px; }
/* 404 and the account delete step */
@media (max-width: 520px) { .nf-actions { flex-direction: column; } .nf-actions .btn { width: 100%; } }
.delete-confirm { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--red); border-radius: var(--r); }
.delete-confirm .small { max-width: none; }
.delete-confirm .field input { text-transform: uppercase; }
.prefs-forget { margin-top: var(--sp-7); }
/* topic page header: the year legend sits on its own line */
.spec-facts li:last-child { flex-basis: 100%; }

/* ---- audit follow-up, part 2 (November 2026): account details, password rules, Turnstile ---- */
.pw-rules { grid-template-columns: 1fr; }
.pw-rule-note { color: var(--muted); }
.pw-rule-note::before { display: none; }
.turnstile[hidden] { display: none; }
.turnstile { min-height: 65px; }
.account-details { align-self: stretch; margin-top: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--sp-2); }
.account-details-h { margin: 0 0 var(--sp-1); font-size: var(--fs-3); font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.acc-edit { border: 1px solid var(--divider); border-radius: var(--r); background: var(--paper); }
.acc-edit > summary { list-style: none; cursor: pointer; padding: var(--sp-3) var(--sp-4); font: 700 var(--fs-3) / var(--lh-1) var(--sans); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.acc-edit > summary::-webkit-details-marker { display: none; }
.acc-edit > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; flex: none; margin-top: -4px; }
.acc-edit[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.acc-edit > summary:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; border-radius: var(--r); }
.acc-edit-form { padding: 0 var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-edit-form .small { max-width: none; margin: 0; }
.acc-edit-msg:empty { display: none; }
.acc-edit-msg { color: var(--red); }
.acc-edit-msg.is-good { color: var(--dec); }
/* lesson player: short scenes sit in the middle of the stage; "Skip intro" over the opening cards */
.st-body-centre { justify-content: center; }
.player-skip { position: absolute; right: 14px; bottom: 14px; z-index: 3; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r); background: rgba(17, 19, 26, 0.72); color: #fff; font: 700 var(--fs-2) var(--sans); cursor: pointer; backdrop-filter: blur(4px); }
.player-skip:hover { background: rgba(17, 19, 26, 0.92); border-color: #fff; }
.player-skip:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 2px; }
.player-skip[hidden] { display: none; }
@media (max-width: 640px) {
  .player-info { gap: var(--sp-3); padding: var(--sp-3); }
  .pi-obj { margin-top: 0; }
  .pi-links { gap: var(--sp-1) var(--sp-3); }
}
/* cookie banner: compact on phones (one short line and two buttons, about 110 px) */
.consent-less { display: none; }
@media (max-width: 640px) {
  .consent { border-top-width: 3px; }
  .consent-inner { gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .consent-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .consent-text { font-size: var(--fs-2); line-height: var(--lh-1); }
  .consent-text p { margin: 0; }
  .consent-more { display: none; }
  .consent-less { display: inline; }
  .consent-link { width: auto; display: inline; }
  .consent-actions { gap: var(--sp-2); }
  .consent .consent-btn { height: 40px; font-size: var(--fs-2); }
}

/* ---- audit follow-up, part 2: layout polish ---- */
/* hero: the lesson card lines up with the top of the text column */
.page-home .home-hero { align-items: start; }
.page-home .showcase { margin-top: var(--sp-2); }
/* sign-up, sign-in and account: the breadcrumb sits in the card's own column */
.page-account .page:has(> .account > .account-card:not([hidden])) > .crumbs { max-width: 440px; margin-left: auto; margin-right: auto; }
/* one segmented control: 3 px track, the selected thumb fills its cell on every side */
.pill { padding: 3px; gap: 3px; height: auto; align-items: stretch; }
.pill button, .pill-wide button, .fbar-practice .pill button { height: 36px; border-radius: var(--r-sm); }
.fbar-practice .pill { height: auto; }
.seg { padding: 0; }
/* one select component: 44 px, card fill, ink border */
.fbar select, .cbar-board select, .select select, .adm-field select { height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r); background-color: var(--card); font: 400 var(--fs-4) var(--sans); }
.fbar select:hover, .cbar-board select:hover, .select select:hover { border-color: var(--ink); background-color: var(--paper); }
.field input, .field textarea, textarea { border-color: var(--ink); }
.field input { height: 44px; border-radius: var(--r); background: var(--card); }
/* header: the account button is a 44 px frame like the search and theme buttons, and is never shown as "current" */
.account-btn { height: 44px; border-color: transparent; border-radius: var(--r); margin-right: 0; transition: background .15s; }
.account-btn:hover { background: var(--card); }
.account-btn[aria-current="page"] { background: transparent; color: var(--ink); }
/* numbers in running text stay in the text face (Atkinson), so a year and a spec code in one sentence match;
   only stand-alone figures (the player clock) are set in the text face */
.footer-note, .player-time, .pi-meta, .stat-n, time { font-variant-numeric: tabular-nums; }
.player-time { font-family: var(--sans); font-size: 1.06em; font-variant-numeric: lining-nums tabular-nums; }
/* home subject cards on phones: a row with an 88 px thumbnail, not three tall pictures */
@media (max-width: 520px) {
  .subject-panel { grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
  .subject-panel .ill { height: 100%; width: 96px; border-bottom: none; border-right: var(--rule) solid var(--line); }
  .sp-body { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
  .sp-title { font-size: var(--fs-6); }
  .sp-body .small { font-size: var(--fs-2); line-height: var(--lh-1); }
}
/* printing a topic list or a worksheet: no chrome, no grid, every section open */
@media print {
  html, body { background: #fff !important; background-image: none !important; }
  body::before, body::after, .page::before { display: none !important; }
  .crumbs, .spec-links, .head-links, .report-link, .q-foot, .player, .acc-edit, .learn-tabs, .tabs, .subject-tabs, .search-dlg, .turnstile { display: none !important; }
  .topic, .lesson-topic, .q, .answer, details { break-inside: avoid; }
  .topic-body, .lessons, .ws-topic-sheet { display: block !important; }
  .card, .rows, .topic, .q { box-shadow: none !important; border-color: #000 !important; }
  a[href]::after { content: none !important; }
  .page { padding-top: 0; }
}
/* no layout shift while the account page and the question list load: the markup is already in the HTML and keeps
   its space; only the signed-in state swaps the card */
html.is-signed-in .page-account .account-card.is-pending { display: none; }
html:not(.is-signed-in) .page-account .account-loading { display: none; }
.account-card.is-pending .btn-google, .account-card.is-pending .or { visibility: hidden; }
.q-list:not(.is-ready) { min-height: 520px; }

/* ---- lesson player: "Read as text" (the same lesson as a scrolling page; the default on phones) ---- */
.player-text { --s-ink: #1A2131; --s-paper: #FCFCFA; --s-red: #C0342B; --s-muted: #5B6578; --s-green: #1F7A4D; --s-line: #DDE6F1; --s-card: #fff; --s-on-ink: #fff; --s-blue: #2B4C7E; --s-sh: rgba(43, 76, 126, 0.12);
  max-height: calc(100vh - 220px); overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-6); background: var(--s-paper); color: var(--s-ink); font-family: var(--sans); font-size: var(--fs-6); line-height: 1.5; }
.player-text[hidden] { display: none; }
.player.is-reading .player-box { width: min(860px, 100%); }
.player-text math { color: var(--s-ink); font-size: 1.06em; }
.lt-head { margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--s-ink); }
.lt-kicker { margin: 0 0 var(--sp-1); font-size: var(--fs-2); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--s-muted); }
.lt-title { margin: 0; font-family: var(--serif); font-size: var(--fs-11); line-height: 1.2; font-weight: 700; }
.lt-sec { margin-top: var(--sp-6); }
.lt-h { margin: 0 0 var(--sp-3); font-family: var(--serif); font-size: var(--fs-8); line-height: 1.25; font-weight: 700; }
.lt-h4 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-4); font-weight: 700; color: var(--s-muted); text-transform: uppercase; letter-spacing: 0.02em; }
.lt-obj, .lt-list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--sp-2); }
.lt-obj li, .lt-list li { max-width: none; }
.lt-warn li::marker { color: var(--s-red); }
.lt-sum li::marker { color: var(--s-green); }
.lt-why { margin: 0; font-size: var(--fs-6); }
.lt-steps { display: flex; flex-direction: column; gap: var(--sp-4); }
.player-text .st-step { gap: var(--sp-2); padding-left: 14px; border-left-width: 4px; opacity: 1 !important; transform: none !important; }
.player-text .st-say { font-size: 17px; line-height: 1.5; }
.player-text .st-tex { font-size: 22px; line-height: 1.4; overflow-x: auto; overflow-y: hidden; }
.player-text .st-has-fig { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
.player-text .st-fig { width: min(100%, 420px); }
.player-text .st-has-fig .st-tex { font-size: 22px; }
.player-text .st-term { font-size: 15px; line-height: 1.45; padding: var(--sp-2) var(--sp-3); gap: var(--sp-3); }
.player-text .fig [data-o] { opacity: 1 !important; stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
.lt-q { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--s-card); border: 1px solid var(--s-ink); border-radius: var(--r); }
.player-text .st-qtag { font-size: 13px; padding: 4px 8px; border-radius: var(--r-sm); margin-top: 2px; }
.lt-qtext { font-size: var(--fs-6); }
.lt-note { margin: 0 0 var(--sp-3); font-size: var(--fs-4); color: var(--s-muted); }
.lt-answer { border: 1px solid var(--s-line); border-radius: var(--r); background: var(--s-card); }
.lt-answer > summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-weight: 700; }
.lt-answer .lt-steps { padding: 0 var(--sp-4) var(--sp-4); }
.lt-done { margin: var(--sp-7) 0 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lt-done-note { font-size: var(--fs-3); color: var(--s-green); font-weight: 700; }
@media (max-width: 640px) {
  .player-text { max-height: none; padding: var(--sp-4); font-size: var(--fs-5); }
  .lt-title { font-size: var(--fs-9); }
  .player-text .st-tex { font-size: 19px; }
}
:root[data-theme="dark"] .player-text { --s-ink: #ECEAE4; --s-paper: #17181B; --s-red: #EE8C7E; --s-muted: #A6A296; --s-green: #7CCB8F; --s-line: #2A2C31; --s-card: #1F2125; --s-on-ink: #17181B; --s-blue: #8fb0e6; --s-sh: rgba(143, 176, 230, 0.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .player-text { --s-ink: #ECEAE4; --s-paper: #17181B; --s-red: #EE8C7E; --s-muted: #A6A296; --s-green: #7CCB8F; --s-line: #2A2C31; --s-card: #1F2125; --s-on-ink: #17181B; --s-blue: #8fb0e6; --s-sh: rgba(143, 176, 230, 0.2); } }
/* course bar below 520 px: label, full-width select, then the note, stacked (audit 006) */
@media (max-width: 520px) {
  .cbar-side { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .cbar-board { flex-wrap: wrap; }
  .cbar-board .fbar-label { flex: none; white-space: nowrap; }
  .cbar-board select { flex: 1 1 auto; min-width: 0; width: auto; }
  .cbar-note { white-space: normal; }
}
/* practice filters fold away on phones (audit SJ-05) */
.fbar-toggle { display: none; }
@media (max-width: 640px) {
  .fbar-toggle { display: inline-flex; width: 100%; margin-bottom: var(--sp-3); justify-content: space-between; }
  .fbar-toggle::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
  .fbar-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
  .fbar-practice:not(.is-open) { display: none; }
}
/* mark key as rows; self-marking and "Next question" under an answer (audit SJ-10, SJ-32, SJ-33) */
.chip-key { list-style: none; flex-direction: column; align-items: stretch; gap: var(--sp-1); }
.chip-key li { display: flex; align-items: center; gap: var(--sp-2); max-width: none; }
.chip-key .chip:not(:first-child) { margin-left: 0; }
.q-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--u); border-top: 1px solid var(--divider); }
.q-self { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.q-self-q { font-weight: 700; font-size: var(--fs-3); }
.q-self .btn[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.q-self-note { margin: 0; color: var(--dec); max-width: none; flex-basis: 100%; }
.q-self-note:empty { display: none; }
.q-next { padding: var(--sp-1) 0; }
/* Journal: what the four ratings mean, and a practice link for the weakest sub-topic (audit SJ-17, SJ-18) */
.j-levels { list-style: none; margin: var(--sp-4) 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); font-size: var(--fs-2); line-height: var(--lh-1); color: var(--text-2); }
.j-levels li { display: flex; align-items: baseline; gap: var(--sp-2); max-width: none; }
.j-levels b { flex: none; padding: 1px 8px; border-radius: var(--r-sm); font-size: var(--fs-1); color: var(--ink); background: var(--card); border: 1px solid var(--divider); }
.j-levels b.lv-1 { border-color: var(--red); } .j-levels b.lv-2 { border-color: var(--stats); } .j-levels b.lv-3 { border-color: var(--dec); } .j-levels b.lv-4 { border-color: var(--pure); }
@media (max-width: 640px) { .j-levels { grid-template-columns: 1fr; } }
.j-revise li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.j-revise .j-rev { flex: 1 1 320px; }
.j-rev-practice { font-weight: 700; font-size: var(--fs-2); white-space: nowrap; }
.yr-key { font-weight: 700; color: var(--ink); }
/* sub-topic rows link to their practice questions and lesson (audit SJ-09) */
.point-go { color: var(--ink); text-decoration: none; }
.point-go:hover { color: var(--link); text-decoration: underline; }
.point-links { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-left: var(--sp-3); font-size: var(--fs-1); font-weight: 700; }
.point-links a { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); text-decoration: none; }
.point-links a:hover { color: var(--link); text-decoration: underline; }
.point-links svg { width: 11px; height: 11px; }
html.is-signed-in .point-links svg { display: none; }
@media (max-width: 520px) { .point-links { display: flex; margin: var(--sp-1) 0 0; } }
.tile-blurb { font-size: var(--fs-1); line-height: var(--lh-1); color: var(--muted); margin-top: 2px; }
.tile[aria-pressed="true"] .tile-blurb { color: inherit; opacity: 0.85; }
.saved-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); z-index: 50; margin: 0; padding: 8px 14px; border-radius: var(--r); background: var(--fill); color: var(--on-fill); font: 700 var(--fs-3) var(--sans); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.saved-toast::before { content: "✓ "; color: var(--dec); }
.saved-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) { .saved-toast { bottom: calc(92px + env(safe-area-inset-bottom)); } }
.boards-note { margin: var(--sp-2) 0 0; }
/* lesson parts under the timeline (audit SJ-03), and landscape phones: controls over the picture (SJ-02) */
.player-chapters { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); }
.player-chapters:empty { display: none; }
.player-chapter { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; border: 1px solid var(--pl-line); border-radius: 999px; background: none; color: #d7d4cc; font: 700 var(--fs-1) var(--sans); cursor: pointer; }
.player-chapter:hover { border-color: var(--pl-blue); color: #fff; }
.player-chapter[aria-current="true"] { background: #e2564b; border-color: #e2564b; color: #fff; }
.player-chapter-t { font-weight: 400; opacity: 0.8; font-variant-numeric: tabular-nums; }
.player-chapter:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: 2px; }
@media (max-height: 480px) and (orientation: landscape) {
  .player { padding: 0; align-items: stretch; }
  .player-box { position: relative; width: 100%; max-width: none; height: 100vh; height: 100dvh; border: none; overflow: hidden; margin: 0; }
  .player:not(.is-reading) .player-screen { aspect-ratio: auto; height: 100vh; height: 100dvh; }
  .player:not(.is-reading) .player-top, .player:not(.is-reading) .player-bar { position: absolute; left: 0; right: 0; z-index: 4; background: rgba(17, 19, 26, 0.78); backdrop-filter: blur(4px); transition: opacity .3s; }
  .player:not(.is-reading) .player-top { top: 0; }
  .player:not(.is-reading) .player-bar { bottom: 0; }
  .player:not(.is-reading).is-idle .player-top, .player:not(.is-reading).is-idle .player-bar { opacity: 0; pointer-events: none; }
  .player:not(.is-reading) .player-chapters, .player:not(.is-reading) .player-info { display: none; }
  .player-skip { bottom: 64px; }
  .player.is-reading .player-text { max-height: none; }
}
.p-status { scroll-margin-top: 92px; }
/* subject illustrations at a size that matches the text beside them */
.spec-hero { grid-template-columns: minmax(0, 1fr) minmax(300px, 38%); gap: var(--sp-8); }
.topics-subject { grid-template-columns: minmax(280px, 32%) minmax(0, 1fr); }
.ts-visual { padding: 0; }
.ts-visual .ill { width: 100%; height: 100%; }
@media (max-width: 1000px) { .spec-hero { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-6); } .topics-subject { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 860px) { .topics-subject { grid-template-columns: 1fr; } .ts-visual { max-height: 190px; } .ts-visual .ill { height: auto; } .spec-hero { grid-template-columns: 1fr; gap: var(--sp-5); } }
/* no focus ring after a mouse or finger press on a button, switch, pill or tile; keyboard users still get it */
html.using-pointer :is(button, [role="button"], .btn, .choice, .tile, .pill button, .seg button, .switch input, .play, .icon-btn, .account-btn, summary, a.btn, .j-rate button):focus-visible,
html.using-pointer .switch input:focus-visible + .switch-track { outline: none !important; box-shadow: none; }
button, [role="button"], .switch-track, summary { -webkit-tap-highlight-color: transparent; }
/* usernames */
.uname-wrap { position: relative; display: block; }
.uname-wrap input { padding-right: 40px; }
.uname-state { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-weight: 700; font-size: var(--fs-5); color: var(--muted); }
.uname-state.is-ok { color: var(--dec); } .uname-state.is-bad { color: var(--red); }
.uname-help { margin: var(--sp-1) 0 0; max-width: none; }
.uname-help.is-bad { color: var(--red); } .uname-help.is-ok { color: var(--dec); }
.account-need-username { align-self: stretch; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--stats); background: var(--paper); }
.account-need-username[hidden] { display: none; }
.account-need-username p { margin: 0; max-width: none; }

/* ---- Challenge ---- */
.ch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 323px; gap: var(--sp-8); align-items: start; }
.ch-topics { display: flex; flex-direction: column; gap: var(--sp-3); }
.ch-topic { display: grid; grid-template-columns: auto minmax(0, 1fr) 120px; gap: var(--sp-4); align-items: center; width: 100%; padding: var(--sp-3) var(--sp-4); text-align: left; background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); color: var(--ink); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ch-topic:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.ch-topic.is-done { border-color: var(--dec); }
.ch-topic-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-topic-title { font-family: var(--serif); font-size: var(--fs-6); font-weight: 700; line-height: var(--lh-2); }
.ch-topic-meta { font-size: var(--fs-2); color: var(--muted); }
.ch-topic-done { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font: 700 var(--fs-3) var(--sans); font-variant-numeric: tabular-nums; }
.ch-topic-bar { width: 100%; height: 6px; border-radius: 3px; background: var(--divider); overflow: hidden; }
.ch-topic-bar i { display: block; height: 100%; background: var(--dec); }
.ch-set-head { margin-bottom: var(--sp-4); }
.ch-back { padding: 0 0 var(--sp-2); display: inline-block; }
.ch-questions { display: flex; flex-direction: column; gap: var(--sp-5); }
.ch-q .q-head .lvl { white-space: nowrap; }
.ch-fig { padding: 0 var(--u) var(--sp-3); }
.ch-fig svg { display: block; max-width: 420px; width: 100%; height: auto; }
.ch-answer { padding: var(--sp-4) var(--u) var(--sp-5); border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--sp-3); background: color-mix(in srgb, var(--fill) 3%, var(--card)); }
.ch-answer[hidden] { display: none; }
.ch-answer-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); font-weight: 700; font-size: var(--fs-3); }
.ch-answer-label .small { max-width: none; }
.ch-answer-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ch-input { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); color: var(--ink); font: 400 var(--fs-6) var(--serif); }
.ch-input:focus { outline: 3px solid var(--link); outline-offset: 1px; }
.ch-input:disabled { background: var(--paper); color: var(--muted); }
.ch-unit { font-family: var(--maths); font-size: var(--fs-6); white-space: nowrap; }
.ch-kb { font-size: var(--fs-6); padding: 0 var(--sp-3); }
.ch-feedback { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: var(--fs-3); font-weight: 700; max-width: none; transition: opacity .35s, transform .35s; }
.ch-feedback:empty { display: none; }
.ch-feedback svg { flex: none; }
.ch-feedback.is-good { color: var(--dec); border-color: color-mix(in srgb, var(--dec) 45%, transparent); background: color-mix(in srgb, var(--dec) 10%, var(--card)); }
.ch-feedback.is-bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 9%, var(--card)); }
.ch-feedback.is-note { color: var(--text-2); }
.ch-feedback.is-muted { color: var(--muted); }
.ch-feedback.is-flash { animation: fb-in .25s var(--ease) both; }
.ch-feedback.is-fading { opacity: 0; transform: translateY(-4px); }
@keyframes fb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ch-after { font-size: var(--fs-2); }
.ch-solution { border-top: 1px solid var(--divider); }
.ch-solution[hidden] { display: none; }
.ch-final { margin: 0; padding: var(--sp-3) var(--u); font-weight: 700; border-bottom: 1px solid var(--divider); }
.ch-q.is-solved { border-color: var(--dec); }
.ch-board { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.ch-board .h3 { margin: 0; }
.ch-board-subject button, .ch-board-range button { padding: 0 var(--sp-2); font-size: var(--fs-2); }
/* the subject pill is a 2 × 2 grid, so "Further Maths" never wraps and every button is the same height */
.pill.ch-board-subject { display: grid; grid-template-columns: 1fr 1fr; }
.ch-board-subject button, .ch-board-exam button, .ch-board-range button { white-space: nowrap; }
.ch-board-me { margin: 0; max-width: none; }
.ch-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-rank-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 6px 0; border-top: 1px solid var(--divider); font-size: var(--fs-3); }
.ch-rank-row:first-child { border-top: none; }
.ch-rank-row.is-me { font-weight: 700; color: var(--link); }
.ch-rank-n { font-variant-numeric: tabular-nums; color: var(--muted); }
.ch-rank-row:nth-child(-n+3) .ch-rank-n { color: var(--stats); font-weight: 700; }
.ch-rank-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-rank-pts { font-variant-numeric: tabular-nums; font-weight: 700; }
.ch-rank-empty { padding: var(--sp-3) 0; color: var(--muted); font-size: var(--fs-2); }
.ch-board-rule { margin: 0; max-width: none; }
/* the maths keyboard */
.mkb { margin: 0 var(--u) var(--sp-4); padding: 10px; background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--sh-2); opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; }
.mkb.is-in { opacity: 1; transform: none; }
.mkb[hidden] { display: none; }
.mkb-tabs { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--divider-strong, var(--muted)); }
.mkb-tabs-gap { flex: 1; }
.mkb-tab { height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: 700 var(--fs-2) var(--sans); cursor: pointer; transition: background .12s, color .12s; }
.mkb-tab:hover { color: var(--ink); }
.mkb-tab[aria-selected="true"] { background: var(--fill); color: var(--on-fill); }
.mkb-pane { display: flex; flex-direction: column; gap: 6px; }
.mkb-pane[hidden] { display: none; }
.mkb-row { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 6px; }
.mkb-key { height: 44px; min-width: 0; padding: 0 2px; border: 1px solid var(--divider-strong, var(--muted)); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 400 19px var(--serif); cursor: pointer; transition: background .1s, color .1s, transform .08s; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mkb-key:hover { background: color-mix(in srgb, var(--ink) 8%, var(--card)); }
.mkb-key:active, .mkb-key.is-hit { transform: scale(.94); }
.mkb-digit { font: 600 var(--fs-6) var(--sans); }
.mkb-fn { font: 700 var(--fs-2) var(--sans); }
.mkb-nav { height: 32px; padding: 0 10px; font: 700 var(--fs-3) var(--sans); }
.mkb-clear { font-size: var(--fs-1); }
.mkb-del { font-family: var(--sans); background: color-mix(in srgb, var(--ink) 6%, var(--card)); }
.mkb-go { background: var(--fill); color: var(--on-fill); border-color: var(--ink); font-family: var(--sans); font-weight: 700; }
.mkb-go:hover { background: var(--fill); opacity: .88; }
.ch-kb[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.ch-kb svg { display: block; }
@media (prefers-reduced-motion: reduce) { .mkb { transition: none; } .mkb-key:active, .mkb-key.is-hit { transform: none; } }
@media (max-width: 900px) {
  .ch-layout { grid-template-columns: 1fr; }
  .ch-board { position: static; }
}
@media (max-width: 640px) {
  .ch-topic { grid-template-columns: auto minmax(0, 1fr); }
  .ch-topic-done { grid-column: 2; align-items: stretch; flex-direction: row; justify-content: space-between; }
  .ch-topic-bar { width: 50%; }
  .mkb { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom)); margin: 0; z-index: 25; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15); }
  .mkb { padding: 8px; box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.15); }
  .mkb-key { height: 42px; font-size: 17px; }
  .mkb-row, .mkb-pane { gap: 4px; }
  .mkb-tab { padding: 0 9px; }
  .mkb-fn { font-size: var(--fs-1); letter-spacing: -.01em; }
}

/* ---- worksheets: PDF links (November 2026) ---- */
.ws-facts { display: block; margin-top: 2px; max-width: none; font-variant-numeric: lining-nums; }
.ws-get { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 6px 12px 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none; font: 700 var(--fs-2) var(--sans); white-space: nowrap; transition: background .15s, color .15s; }
.ws-get::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.5 7 9l3.5-3.5M2 12.5h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.5 7 9l3.5-3.5M2 12.5h10' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ws-get:hover { background: var(--fill); color: var(--on-fill); }
.ws-get-facts { display: none; }
.ws-row.is-ready .ws-icon, .ws-topic-sheet.is-ready .ws-icon { border-color: var(--ink); color: var(--ink); }
@media (max-width: 640px) {
  .ws-row .ws-get, .ws-topic-sheet .ws-get { grid-column: 3; justify-self: start; }
  .ws-topic-sheet .ws-get { grid-column: 2; }
}
/* diagrams in questions (Figure 1): the lesson figure styles, in the page's colours */
.q-fig { --s-ink: var(--ink); --s-blue: var(--link); --s-red: var(--red); --s-muted: var(--muted); --s-paper: var(--card); --s-sh: rgba(43, 76, 126, 0.14);
  margin: var(--sp-3) auto var(--sp-4); max-width: 460px; text-align: center; }
.q-fig .fig { display: block; width: 100%; height: auto; overflow: visible; }
.q-fig .fig .t { font-family: var(--maths); font-style: italic; font-size: var(--fs-9); fill: var(--ink); }
.q-fig .fig .ts { font-family: var(--maths); fill: var(--text-2); }
.q-fig .fig .c, .q-fig .fig .c2, .q-fig .fig .d, .q-fig .fig .ax, .q-fig .fig .arr { fill: none; }
.q-fig figcaption { margin-top: var(--sp-1); font: 700 var(--fs-1) var(--sans); color: var(--muted); }

/* No blue flash or text selection when a button, switch or pill is tapped or double-clicked by mistake;
   keyboard users still get the focus ring through :focus-visible. */
html { -webkit-tap-highlight-color: transparent; }
button, .btn, .switch, .check, .pill, .seg, .tiles, .subject-tabs, [role="button"], [role="tab"], summary, label.switch { -webkit-user-select: none; user-select: none; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- worksheet viewer */
html.pdfv-open { overflow: hidden; }
.pdfv { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ink) 96%, transparent); opacity: 0; transition: opacity .2s ease; }
.pdfv.is-in { opacity: 1; }
.pdfv-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 16px; background: var(--paper); border-bottom: var(--rule) solid var(--line); transform: translateY(-8px); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pdfv.is-in .pdfv-bar { transform: none; }
.pdfv-title { display: flex; flex-direction: column; min-width: 0; }
.pdfv-kicker { font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pdfv-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdfv-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pdfv-pages, .pdfv-zoom { font-size: var(--fs-2); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: center; }
.pdfv-pages { min-width: 7em; }
.pdfv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; border-radius: var(--r-sm, 4px); transition: background .15s, color .15s, transform .15s; }
.pdfv-btn:hover { background: var(--fill); color: var(--paper); }
.pdfv-btn:active { transform: translateY(1px); }
.pdfv-dl { background: var(--fill); color: var(--paper); }
.pdfv-dl:hover { background: var(--link); border-color: var(--link); }
.pdfv-scroll { flex: 1; overflow: auto; padding: 24px 16px 48px; }
.pdfv-pagesbox { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pdfv-page { background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); position: relative; transform: translateY(12px); opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); max-width: none; }
.pdfv-page.is-drawn { opacity: 1; transform: none; }
.pdfv-page canvas { width: 100%; height: 100%; display: block; }
.pdfv-err { background: var(--paper); padding: 24px; text-align: center; max-width: 420px; margin: 40px auto; }
@media (max-width: 720px) {
  .pdfv-bar { flex-wrap: wrap; padding: 8px 12px; }
  .pdfv-title { flex: 1 1 100%; }
  .pdfv-tools { flex: 1 1 100%; justify-content: space-between; }
  .pdfv-pages { min-width: 0; text-align: left; margin-right: auto; }
  .pdfv-zoom, .pdfv-btn[data-pv-zoom], .pdfv-btn[data-pv-print] { display: none; }
  .pdfv-scroll { padding: 12px 8px 32px; }
}
@media (prefers-reduced-motion: reduce) { .pdfv, .pdfv-bar, .pdfv-page { transition: none; } }

/* ---------- profiles: /account/ (yours) and /profile/?u= (anyone's) */
.account:has(.profile:not([hidden])), .account:has(.settings:not([hidden])) { align-items: stretch; }
.profile, .settings { display: flex; flex-direction: column; gap: var(--sp-5); width: 100%; }
.profile[hidden], .settings[hidden] { display: none; }
.prof-card { position: relative; padding: 0; overflow: hidden; }
.prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 var(--sp-4); align-items: start; padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.prof-avatar { width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin-top: calc(var(--u) * -3); border-radius: 50%; border: 3px solid var(--card); box-shadow: 0 0 0 var(--rule) var(--ink); background: var(--card); display: block; animation: av-pop .5s var(--ease, ease) both; }
.prof-avatar svg { display: block; width: 100%; height: 100%; }
@keyframes av-pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.prof-who { padding-bottom: 2px; min-width: 0; }
.prof-name { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.prof-handle { min-width: 0; overflow-wrap: anywhere; }
.prof-name .badge { width: 24px; height: 24px; }
.prof-bio { margin: 4px 0 0; font: italic 400 var(--fs-4) / var(--lh-2) var(--sans); color: var(--text-2); overflow-wrap: anywhere; word-break: break-word; max-width: 60ch; }
.prof-bio[hidden] { display: none; }
.prof-since { margin: 4px 0 0; max-width: none; }
.prof-tools { display: flex; align-items: center; gap: var(--sp-2); }
.prof-tools[hidden] { display: none; }
.prof-gear { border: var(--rule) solid var(--line); width: 40px; height: 40px; border-radius: var(--r); }
.prof-gear:hover svg { transform: rotate(60deg); }
.prof-gear svg { transition: transform .4s var(--ease, ease); }
.prof-actions { justify-content: flex-start; }
.prof-actions [hidden] { display: none; }
.prof-sub { margin: 0 0 var(--sp-2); font: 700 var(--fs-3) var(--sans); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.prof-sub-h { margin: 0; }
.prof-editor { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); animation: slide-in .25s var(--ease, ease) both; }
.prof-editor[hidden] { display: none; }
@keyframes slide-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.prof-edit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); }
.prof-public { margin: 0; max-width: none; }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 52px)); gap: 8px; justify-content: start; }
.av-pick { aspect-ratio: 1; padding: 0; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; transition: transform .15s, border-color .15s; }
.av-pick svg { display: block; width: 100%; height: 100%; }
.av-pick:hover { transform: scale(1.08); }
.av-pick[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--link); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--dashed); cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--link); }
.banners { display: flex; gap: 8px; flex-wrap: wrap; }
.prof-ranks-card { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.prof-ranks-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pr-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: var(--rule) solid var(--line); border-radius: var(--r); }
.pr-big { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--divider); }
.pr-big:first-child { border-left: none; }
.pr-big-n { font: 700 var(--fs-11) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.pr-big-l { font-size: var(--fs-2); color: var(--muted); }
.pr-scroll { overflow-x: auto; }
.pr-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); }
.pr-table th, .pr-table td { padding: 10px var(--sp-3); text-align: left; border-top: 1px solid var(--divider); vertical-align: middle; }
.pr-table thead th { border-top: none; font-size: var(--fs-2); color: var(--muted); font-weight: 700; }
.pr-table td span { display: block; }
.pr-rank { font: 700 var(--fs-7) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.pr-pts { font-size: var(--fs-2); color: var(--muted); }
.pr-none .pr-rank { color: var(--divider); }
.pr-m1 .pr-rank { color: var(--stats); } .pr-m2 .pr-rank { color: #7d8794; } .pr-m3 .pr-rank { color: #a3683a; }
.pr-subj { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.pr-subj::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--pure); }
.pr-mathematics::before { background: var(--dec); } .pr-physics::before { background: var(--mech); }
.pr-note { margin: 0; max-width: none; }
@media (max-width: 640px) {
  .prof-head { grid-template-columns: auto minmax(0, 1fr); padding: 0 var(--sp-4) var(--sp-4); }
  .prof-tools { grid-column: 1 / -1; }
  .prof-avatar { width: calc(var(--u) * 4); height: calc(var(--u) * 4); margin-top: calc(var(--u) * -2.5); }
  .prof-tools { margin-top: var(--sp-3); }
  .prof-edit-row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pr-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-big:nth-child(3) { border-left: none; }
  .pr-big:nth-child(n+3) { border-top: 1px solid var(--divider); }
  .pr-table th, .pr-table td { padding: 8px 6px; }
  .pr-rank { font-size: var(--fs-6); }
  .pr-none .pr-pts { display: none; }
  .pr-pts { font-size: var(--fs-1); }
  .pr-table thead th { font-size: var(--fs-1); }
  .pr-subj { white-space: normal; font-size: var(--fs-3); }
}

/* settings */
.settings-head h1 { margin: 4px 0 0; }
.settings-head p { margin: 4px 0 0; }
.settings-back { text-decoration: none; font-weight: 700; }
.set-group { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.set-group > .account-details-h { margin: 0 0 var(--sp-1); }
.set-group .account-actions { margin-top: var(--sp-1); }
.set-group > p { margin: 0; max-width: none; }
.acc-edit > summary { gap: var(--sp-3); }
.set-label { flex: none; min-width: 7.5em; }
.set-value { flex: 1; display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; font-weight: 400; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; text-align: right; }
.set-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1.5px dashed var(--divider); border-radius: var(--r); font: 700 var(--fs-3) / var(--lh-1) var(--sans); }
.set-row .set-value { flex: initial; }
[data-mask] { letter-spacing: .04em; }
.btn-reveal { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); color: var(--link); font: 700 var(--fs-1) var(--sans); cursor: pointer; }
.btn-reveal:hover { border-color: var(--link); }
.btn-reveal[aria-pressed="true"] { background: var(--link); border-color: var(--link); color: var(--card); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); counter-reset: st; font-size: var(--fs-2); color: var(--muted); flex-wrap: wrap; }
.steps li { counter-increment: st; display: flex; align-items: center; gap: 6px; }
.steps li::before { content: counter(st); width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--divider); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-1); }
.steps li + li::after { order: -1; content: ""; width: 14px; height: 1.5px; background: var(--divider); }
.steps li.is-on { color: var(--ink); font-weight: 700; }
.steps li.is-on::before { border-color: var(--ink); background: var(--fill); color: var(--on-fill); }
.steps li.is-done::before { content: "✓"; border-color: var(--dec); background: var(--dec); color: #fff; }
.acc-edit-form [data-email-step] { display: flex; flex-direction: column; gap: var(--sp-3); }
.acc-edit-form [data-email-step][hidden] { display: none; }
.settings .set-group.account-delete, .settings .set-group.account-export { border-top: var(--rule) solid var(--line); margin-top: 0; padding-top: var(--sp-5); }
@media (max-width: 640px) {
  .acc-edit > summary { flex-wrap: wrap; }
  .set-label { min-width: 0; }
}

/* header and leaderboard avatars */
.account-av { width: 22px; height: 22px; display: inline-block; flex: none; }
.account-av svg { display: block; width: 100%; height: 100%; }
.ch-board-exam button { padding: 0 var(--sp-2); font-size: var(--fs-2); }
.ch-rank-name { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.ch-rank-name:hover .ch-rank-u { text-decoration: underline; }
.ch-rank-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ch-rank-av { width: 24px; height: 24px; flex: none; }
.ch-rank-av svg { display: block; width: 100%; height: 100%; }
.ch-rank-row { animation: row-in .35s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ch-rank-row, .prof-avatar, .prof-editor { animation: none; } }

/* ---------- motion, November 2026: smoother page changes, staggered entrances, small responses to touch */
@media (prefers-reduced-motion: no-preference) {
  /* moving between pages cross-fades (Chrome, Edge, Safari 18+); the header and tab bar stay put */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .tabbar { view-transition-name: tabbar; }
  ::view-transition-old(root) { animation: vt-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-in .32s var(--ease) both; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-4px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
  /* lists build in one after another */
  .stagger > * { animation: rise-in .45s var(--ease) both; animation-delay: calc(min(var(--i, 0), 12) * 40ms); }
  @keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  /* progress bars fill from empty */
  .ch-topic-bar i, .meter-fill, .pr-table td { transform-origin: left; }
  .ch-topic-bar i { animation: bar-fill .8s var(--ease) both .15s; }
  @keyframes bar-fill { from { transform: scaleX(0); } }
  /* the header links get an underline that slides in */
  .site-nav a { position: relative; border-bottom-color: transparent !important; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--fill); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
  /* cards that are links lift a little, like paper picked up */
  a.card, .ch-topic { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  a.card:hover, .ch-topic:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
  /* the tab bar icon springs when chosen */
  .tabbar a[aria-current="page"] svg { animation: tab-pop .35s var(--ease); }
  @keyframes tab-pop { 40% { transform: translateY(-3px) scale(1.12); } }
  /* numbers count up (fmpr.js) and then settle */
  .stat-n.is-counting { font-variant-numeric: tabular-nums; }
}

/* ---------- home: the free lesson, with a practice question and the Journal tucked under it at an angle */
.shot-lesson { cursor: pointer; }
.shot-cap > span:nth-child(2) { flex: 1; min-width: 0; }
.shot-free { flex: none; padding: 3px 9px; border: 1px solid var(--dec); color: var(--dec); font: 700 var(--fs-1) var(--sans); letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; }
.shot-play { position: absolute; left: 50%; top: calc(50% + 26px); width: 68px; height: 68px; margin: -34px 0 0 -34px; display: flex; align-items: center; justify-content: center; padding-left: 5px; border-radius: 50%; background: var(--fill); color: var(--on-fill); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.shot-lesson:hover .shot-play { transform: scale(1.08); }
@media (prefers-reduced-motion: no-preference) { .shot-play::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ink); opacity: 0; animation: ping 2.4s var(--ease) infinite 1s; } @keyframes ping { 0% { transform: scale(.85); opacity: .5; } 70%, 100% { transform: scale(1.35); opacity: 0; } } }
.shot-q, .shot-j { padding: var(--sp-3) var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-2); line-height: 1.45; overflow: visible; }
.sq-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-1); font-weight: 700; }
.sq-tag { padding: 2px 7px; background: var(--fill); color: var(--on-fill); border-radius: var(--r-sm); font-size: var(--fs-1); letter-spacing: .03em; text-transform: uppercase; }
.sq-tag-j { background: var(--dec); color: #fff; }
.sq-stem { margin: 0; font: 400 var(--fs-4) / 1.45 var(--maths); color: var(--ink); max-width: none; }
.sq-stem i, .sq-work i { font-family: var(--maths); }
.sq-work { list-style: none; margin: 0; padding: var(--sp-2) 0 0; border-top: 1px dashed var(--divider); display: flex; flex-direction: column; gap: 4px; counter-reset: w; }
.sq-work li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); color: var(--text-2); max-width: none; }
.sq-work li span { font-family: var(--maths); font-size: var(--fs-3); }
.sq-work .chip { font-size: var(--fs-1); padding: 1px 5px; }
.sq-foot { color: var(--link); font-weight: 700; font-size: var(--fs-1); }
.sj-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sj-rows li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); color: var(--ink); max-width: none; }
.sj-dots { display: flex; gap: 3px; flex: none; }
.sj-dots i { width: 14px; height: 8px; border-radius: 2px; background: var(--divider); }
.sj-dots[data-n="1"] i:nth-child(-n+1) { background: var(--red); }
.sj-dots[data-n="2"] i:nth-child(-n+2) { background: var(--stats); }
.sj-dots[data-n="3"] i:nth-child(-n+3) { background: var(--pure); }
.sj-dots[data-n="4"] i { background: var(--dec); }
.pi-free { grid-column: 1 / -1; margin: 0 0 var(--sp-2); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--dec); background: rgba(255, 255, 255, .06); color: #e8e4da; font-size: var(--fs-3); max-width: none; }
.pi-free a { color: var(--pl-blue); font-weight: 700; }

/* ---------- verified ticks and profile picture fixes */
.badge { display: inline-flex; flex: none; width: 18px; height: 18px; vertical-align: -3px; }
.badge svg { display: block; width: 100%; height: 100%; }
.ch-rank-name .badge { width: 16px; height: 16px; margin-left: -4px; }
.prof-avatar, .account-av, .ch-rank-av, .av-pick, .adm-badge-av { border-radius: 50%; }
.prof-avatar svg, .account-av svg, .ch-rank-av svg, .av-pick svg, .adm-badge-av svg { border-radius: 50%; }
.prof-card, .prof-head, .prof-who { min-width: 0; }
.prof-head > * { min-width: 0; }
.sw-auto { background: conic-gradient(#2B4C7E 0 25%, #A93226 0 50%, #2F6F6A 0 75%, #C08A2E 0); }
.av-pick { display: block; width: 100%; }
.adm-badges { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 640px; }
.adm-badges p { margin: 0; }
.adm-badge-form { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.adm-badge-form .field { flex: 1 1 220px; }
.adm-badge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.adm-badge-list li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--divider); }
.adm-badge-list li .btn { margin-left: auto; }
.adm-badge-av { width: 28px; height: 28px; flex: none; }
.adm-badge-av svg { display: block; width: 100%; height: 100%; }
.adm-badge-msg:empty { display: none; }

/* settings rows on a phone: the label and the arrow on top, the value (and Reveal) underneath, full width */
@media (max-width: 640px) {
  .acc-edit > summary::after { order: 2; }
  .acc-edit > summary .set-label { order: 1; flex: 1; }
  .acc-edit > summary .set-value { order: 3; flex: 1 1 100%; justify-content: space-between; text-align: left; }
  .set-row { flex-wrap: wrap; }
}
.set-value [data-hide] { min-width: 0; overflow-wrap: anywhere; }
.account-av { box-shadow: 0 0 0 1px var(--dashed); }

/* ---------- profile banners: a pattern in a brighter version of the chosen colour (--acc is a picture colour) */
.prof-card, .bn-pick, .pe-mini { --acc: #1A2131; --bn-bg: color-mix(in srgb, var(--acc) 22%, #fff); --bn-line: color-mix(in srgb, var(--acc) 62%, #fff); }
:root[data-theme="dark"] :is(.prof-card, .bn-pick, .pe-mini) { --bn-bg: color-mix(in srgb, var(--acc) 42%, #1F2125); --bn-line: color-mix(in srgb, var(--acc) 45%, #ECEAE4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.prof-card, .bn-pick, .pe-mini) { --bn-bg: color-mix(in srgb, var(--acc) 42%, #1F2125); --bn-line: color-mix(in srgb, var(--acc) 45%, #ECEAE4); } }
.prof-banner, .bn-prev { position: relative; overflow: hidden; background: var(--bn-bg) !important; background-image: none !important; }
.prof-banner::before, .bn-prev::before { content: ""; position: absolute; inset: 0; background: var(--bn-line); -webkit-mask-image: var(--pm); mask-image: var(--pm); -webkit-mask-size: var(--ps); mask-size: var(--ps); -webkit-mask-repeat: var(--pr, repeat); mask-repeat: var(--pr, repeat); -webkit-mask-position: var(--pp, center); mask-position: var(--pp, center); opacity: .75; }
/* the patterns themselves are in banners.css, written by tools/banners.py */
[data-banner="plain"] .prof-banner, .bn-prev[data-banner="plain"] { background: radial-gradient(ellipse 70% 140% at 50% 50%, color-mix(in srgb, var(--acc) 50%, var(--bn-bg)), var(--bn-bg)) !important; }
[data-banner="plain"] .prof-banner::before, .bn-prev[data-banner="plain"]::before { display: none; }

/* ---------- profiles, round three: banners, badges, friends, the editor */
.prof-banner { height: calc(var(--u) * 6); border-bottom: var(--rule) solid var(--line); }
.badge-stack { display: inline-flex; align-items: center; flex: none; }
.badge-stack .badge { width: 22px; height: 22px; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--card); background: var(--card); transition: transform .15s var(--ease); }
.badge-stack .badge:first-child { margin-left: 0; }
.badge-stack .badge:hover { transform: translateY(-2px) scale(1.12); z-index: 1; }
.badge-more { margin-left: 4px; font: 700 var(--fs-1) var(--sans); color: var(--muted); }
.prof-name .badge-stack .badge { width: 26px; height: 26px; }
.ch-rank-name .badge-stack .badge { width: 17px; height: 17px; }
.ch-rank-name .badge-stack { margin-left: -2px; }
.prof-sec { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.prof-sec[hidden] { display: none; }
.prof-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.pr-hidden { margin: 0; padding: var(--sp-4); border: 1.5px dashed var(--divider); border-radius: var(--r); color: var(--muted); font-size: var(--fs-3); display: flex; align-items: center; gap: var(--sp-3); }
.pr-hidden::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 9V6.5a4 4 0 0 1 8 0V9M4.5 9h11v8h-11z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 9V6.5a4 4 0 0 1 8 0V9M4.5 9h11v8h-11z' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.pr-own-note { margin: 0; max-width: none; }
.pb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pb-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-3); align-items: center; max-width: none; }
.pb-list .badge { width: 34px; height: 34px; }
.pb-list li > span { display: flex; flex-direction: column; line-height: 1.35; }
.pb-none { margin: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.pf-person { display: flex; align-items: center; gap: var(--sp-2); padding: 6px 8px; border: 1px solid var(--divider); border-radius: var(--r); color: var(--ink); text-decoration: none; min-width: 0; transition: border-color .15s, transform .15s; }
.pf-person:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.pf-av { width: 28px; height: 28px; flex: none; border-radius: 50%; }
.pf-av svg { display: block; width: 100%; height: 100%; }
.pf-name { font-weight: 700; font-size: var(--fs-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pq-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; max-width: none; }
.pq-list .pf-person { border: none; padding: 0; }
.pq-acts { display: flex; gap: var(--sp-2); }
.pq-sent-h { margin: var(--sp-2) 0 0; }
.prof-admin { border-style: dashed; }
.prof-admin .prof-sub-h { display: flex; align-items: baseline; gap: var(--sp-3); }
.prof-admin .kicker { margin: 0; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-2); }
.pa-opt { display: grid; grid-template-columns: auto 30px minmax(0, 1fr); gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--divider); border-radius: var(--r); cursor: pointer; }
.pa-opt:has(input:checked) { border-color: var(--ink); background: var(--paper); }
.pa-opt .badge { width: 30px; height: 30px; }
.pa-opt > span:last-child { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--fs-3); }
.btn-danger { border-color: var(--red) !important; color: var(--red) !important; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--divider); border-radius: var(--r); background: var(--paper); cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-3); }
.switch-row .switch { height: auto; }
.adm-find { max-width: 360px; }
.adm-since { margin-left: auto; }
.adm-badge-list li .btn { margin-left: 0; }

/* the editor: a live preview beside three tabs */
.pe-pane { display: flex; flex-direction: column; gap: var(--sp-3); animation: fade-down .2s var(--ease); }
.pe-pane[hidden] { display: none; }
.pe-pane .prof-sub { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-2) 0 0; }
.pe-match { font-size: var(--fs-2); padding: 0; text-transform: none; letter-spacing: 0; }
.swatch { background: var(--c); }
.swatch.sw-tint { background: color-mix(in srgb, var(--c) 30%, #fff); }
:root[data-theme="dark"] .swatch.sw-tint { background: color-mix(in srgb, var(--c) 45%, #1F2125); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .swatch.sw-tint { background: color-mix(in srgb, var(--c) 45%, #1F2125); } }
.swatches { gap: 10px; }
.swatch { width: 32px; height: 32px; }
.av-grid { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; max-height: 300px; overflow-y: auto; padding: 4px; margin: -4px; }
.banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bn-pick { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--divider); border-radius: var(--r); background: var(--card); color: var(--ink); font: 700 var(--fs-1) var(--sans); cursor: pointer; overflow: hidden; transition: border-color .15s, transform .15s; }
.bn-pick:hover { border-color: var(--ink); transform: translateY(-1px); }
.bn-pick .bn-prev { height: 44px; border-bottom: 1px solid var(--divider); }
.bn-name { padding: 5px 6px; text-align: center; }
.bn-pick[aria-checked="true"] { border-color: var(--link); box-shadow: 0 0 0 2px var(--link); }
@media (max-width: 760px) {
  .prof-two { grid-template-columns: 1fr; }
  .av-grid { max-height: 240px; }
}
/* the picture sits on top of the banner (the banner is positioned for its pattern layer) */
.prof-head { position: relative; z-index: 1; }
.prof-avatar { position: relative; z-index: 2; }

/* ---------- profile card, round four: even spacing, picture shapes, name fonts, card styles */
/* banner, then the picture overlapping it by half, then the name a fixed step below the banner */
.prof-card { --av: 104px; }
.prof-head { grid-template-columns: var(--av) minmax(0, 1fr) auto; grid-template-areas: "av who tools"; column-gap: 20px; align-items: start; padding: 0 24px 22px; }
.prof-avatar { grid-area: av; width: var(--av); height: var(--av); margin-top: calc(var(--av) / -2); border: 4px solid var(--card); box-shadow: 0 0 0 1.5px var(--ink); }
.prof-who { grid-area: who; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.prof-who > * { margin: 0 !important; }
.prof-tools { grid-area: tools; padding-top: 14px; }
.prof-name { line-height: 1.15; flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 640px) {
  .prof-card { --av: 84px; }
  .prof-head { grid-template-columns: var(--av) minmax(0, 1fr); grid-template-areas: "av tools" "who who"; column-gap: 12px; padding: 0 16px 18px; }
  .prof-tools { grid-column: auto; margin: 0; padding-top: 12px; justify-content: flex-end; }
  .prof-avatar { width: var(--av); height: var(--av); margin-top: calc(var(--av) / -2); }
  .prof-who { padding-top: 12px; }
}
.av-svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.account-av, .ch-rank-av, .pf-av, .adm-badge-av, .av-pick, .prof-avatar { overflow: hidden; }
/* picture shapes (profile card, editor preview and its samples) */
[data-shape="rounded"] { border-radius: 26% !important; } [data-shape="rounded"] .av-svg { border-radius: 22%; }
[data-shape="square"] { border-radius: 12% !important; } [data-shape="square"] .av-svg { border-radius: 8%; }
/* name fonts */
[data-font="sans"] { font-family: var(--sans) !important; font-weight: 700; letter-spacing: -.01em; }
[data-font="maths"] { font-family: "STIX Two Text", var(--maths) !important; font-style: italic; font-weight: 400; }
[data-font="mono"] { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-weight: 600; letter-spacing: -.02em; }
[data-font] .prof-handle, [data-font] { overflow-wrap: anywhere; }
/* card styles */
.prof-card[data-card="shadow"] { box-shadow: 6px 6px 0 var(--cacc); }
.prof-card[data-card="accent"] { border-color: var(--cacc); border-width: 2px; background: linear-gradient(var(--card), var(--card)) padding-box, var(--cacc) border-box; }
.prof-card[data-card="accent"] .prof-banner { border-bottom-color: var(--cacc); }
.prof-card[data-card="accent"] .prof-avatar { box-shadow: 0 0 0 2px var(--cacc); }
.prof-card[data-card="soft"] { border-color: transparent; border-radius: 18px; box-shadow: 0 12px 34px rgba(0, 0, 0, .14), 0 0 0 1px var(--divider); }
.prof-card[data-card="soft"] .prof-banner { border-bottom: none; }
.prof-card[data-card="soft"] .prof-avatar { box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
/* the editor's preview card follows the same spacing, smaller */
/* style options */
.pe-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pe-opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border: 1px solid var(--divider); border-radius: var(--r); background: var(--card); color: var(--ink); font: 700 var(--fs-1) var(--sans); cursor: pointer; transition: border-color .15s, transform .15s; }
.pe-opt:hover { border-color: var(--ink); transform: translateY(-1px); }
.pe-opt[aria-checked="true"] { border-color: var(--link); box-shadow: 0 0 0 2px var(--link); }
.pe-shape { width: 40px; height: 40px; display: block; border-radius: 50%; overflow: hidden; }
.pe-font { font: 700 var(--fs-10) / 40px var(--serif); height: 40px; }
.pe-cardpv { width: 56px; height: 40px; border: 1px solid var(--ink); border-radius: 3px; background: linear-gradient(color-mix(in srgb, var(--acc) 30%, #fff) 0 40%, var(--card) 40%); }
.pe-cardpv[data-card="shadow"] { box-shadow: 4px 4px 0 var(--cacc); }
.pe-cardpv[data-card="accent"] { border: 2px solid var(--cacc); }
.pe-cardpv[data-card="soft"] { border-color: transparent; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
/* badges: order and show or hide */
.pe-note { margin: 0; max-width: none; }
.pe-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow-y: auto; }
.pe-badge { display: grid; grid-template-columns: 14px 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--divider); border-radius: var(--r); background: var(--card); transition: opacity .15s, border-color .15s; max-width: none; }
.pe-badge .badge { width: 30px; height: 30px; }
.pe-badge.is-hidden { opacity: .55; border-style: dashed; }
.pe-badge.is-drag { opacity: .4; border-color: var(--link); }
.pe-grip { color: var(--muted); cursor: grab; display: flex; }
.pe-badge-t { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--fs-3); min-width: 0; }
.pe-badge-acts { display: flex; align-items: center; gap: 4px; }
.pe-mv { width: 30px; height: 30px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 700 var(--fs-4) var(--sans); cursor: pointer; }
.pe-mv:hover:not(:disabled) { border-color: var(--ink); }
.pe-mv:disabled { opacity: .3; }
.pe-show { height: auto; margin-left: 6px; }
@media (max-width: 760px) {
  .pe-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe-grip { display: none; }
  .pe-badge { grid-template-columns: 30px minmax(0, 1fr) auto; }
}
/* the settings gear in the header (signed in) */
.settings-btn[hidden] { display: none; }
.settings-btn[aria-current="page"] { background: var(--fill); color: var(--on-fill); }
.settings-btn svg { transition: transform .4s var(--ease); }
.settings-btn:hover svg { transform: rotate(60deg); }

/* ======================================================================================
   Profiles, round five: one card for every profile, counts that open lists, a cleaner Challenge section
   ====================================================================================== */
.profile { gap: var(--sp-4); }
/* loading: grey shapes where the content will be */
.sk { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, var(--divider), color-mix(in srgb, var(--divider) 40%, var(--card)), var(--divider)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.sk-name { width: 180px; height: 28px; }
.sk-line { width: 140px; height: 14px; }
.sk-block { display: block; height: 96px; }
.prof-card.is-loading .prof-avatar { background: var(--divider); }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* bio: labelled, so it reads as the student's own words */
.prof-bio-box { display: flex; align-items: flex-start; gap: 8px; max-width: 62ch; }
.prof-bio-box[hidden] { display: none; }
.prof-bio-label { flex: none; margin-top: 3px; padding: 1px 7px; border: 1px solid var(--divider); border-radius: 999px; font: 700 var(--fs-1) / 1.5 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.prof-bio { margin: 0 !important; font: italic 400 var(--fs-4) / 1.45 var(--sans); color: var(--text-2); overflow-wrap: anywhere; }
.prof-since { font-size: var(--fs-2); color: var(--muted); max-width: none; }
/* friends, followers, following: across the bottom of the card */
.prof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.prof-stats[hidden] { display: none; }
.ps { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 8px; border: none; border-left: 1px solid var(--divider); background: none; color: var(--ink); cursor: pointer; transition: background .15s; font: inherit; }
.ps:first-child { border-left: none; }
.ps:hover { background: color-mix(in srgb, var(--acc, var(--ink)) 8%, transparent); }
.ps strong { font: 700 var(--fs-8) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.ps span { font-size: var(--fs-2); color: var(--muted); }
.ps.is-locked strong::after { content: " 🔒"; font-size: var(--fs-1); }
.ps.is-shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.prof-card[data-card="soft"] .prof-stats { border-top-color: transparent; background: color-mix(in srgb, var(--cacc) 6%, transparent); }
/* buttons beside the name */
.prof-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
.prof-tools .btn svg { flex: none; }
.prof-tools .tick { font-weight: 700; color: var(--dec); }
.btn-mod { border-style: dashed; }
.prof-more-wrap { position: relative; }
.prof-more { width: 36px; height: 36px; border: 1px solid var(--divider); }
.prof-more[hidden] { display: none; }
.prof-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; display: flex; flex-direction: column; padding: 6px; background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); }
.prof-menu[hidden] { display: none; }
.prof-menu button { padding: 9px 10px; border: none; border-radius: var(--r-sm); background: none; color: var(--ink); font: 700 var(--fs-3) var(--sans); text-align: left; cursor: pointer; }
.prof-menu button:hover, .prof-menu button:focus-visible { background: var(--paper); }
.prof-menu [data-report] { color: var(--red); }
/* section cards */
.prof-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.prof-sec-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; }
.ps-count { padding: 1px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--divider); font: 700 var(--fs-1) / 1.6 var(--sans); color: var(--muted); }
.ps-count:empty { display: none; }
/* Challenge: four numbers, then a line per subject with points */
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pr-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--divider); }
.pr-stat-n { font: 700 var(--fs-10) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.pr-stat-l { font-size: var(--fs-2); color: var(--muted); }
.pr-stat.is-top1 .pr-stat-n, .pr-rank-big.is-top1, .pr-pill.is-top1 b { color: var(--stats); }
.pr-stat.is-top2 .pr-stat-n, .pr-rank-big.is-top2, .pr-pill.is-top2 b { color: #7d8794; }
.pr-stat.is-top3 .pr-stat-n, .pr-rank-big.is-top3, .pr-pill.is-top3 b { color: #a3683a; }
.pr-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-row { display: grid; grid-template-columns: minmax(110px, 1fr) auto minmax(0, 1.4fr) auto; gap: 6px 14px; align-items: center; padding: 12px 2px; border-top: 1px solid var(--divider); max-width: none; }
.pr-row:first-child { border-top: none; }
.pr-row .pr-subj { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.pr-row .pr-subj::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--pure); }
.pr-row.pr-mathematics .pr-subj::before { background: var(--dec); } .pr-row.pr-physics .pr-subj::before { background: var(--mech); }
.pr-rank-big { font: 700 var(--fs-8) / 1 var(--serif); font-variant-numeric: tabular-nums; }
.pr-row .pr-pts { font-size: var(--fs-2); color: var(--muted); }
.pr-pills { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pr-pill { padding: 2px 9px; border: 1px solid var(--divider); border-radius: 999px; font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }
.pr-pill b { color: var(--ink); }
.pr-none-line, .pr-own-note { margin: 0; max-width: none; }
.prof-ranks { display: flex; flex-direction: column; gap: var(--sp-3); }
/* badges: tiles */
.pb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.pb-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--r); background: var(--paper); max-width: none; }
.pb-tile .badge { width: 32px; height: 32px; }
.pb-tile > span { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--fs-3); }
/* people: lists of friends and follows, and friend requests */
.pp { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; color: var(--ink); text-decoration: none; min-width: 0; }
.pp:hover .pp-name { text-decoration: underline; }
.pp-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--divider); }
.pp-av .av-svg { border-radius: inherit; }
.pp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-marks { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-mark { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.pp-mark .badge { width: 15px; height: 15px; }
.pp-owner { color: var(--stats-dark, #8A5F14); }
.pp-verified { color: #2F6FD0; }
.pp-bio { font: italic var(--fs-3) / 1.35 var(--sans); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-list li { justify-content: space-between; }
.pq-list .pp { flex: 1 1 220px; }
/* dialogs */
.dlg { width: min(560px, calc(100vw - 24px)); max-height: min(80vh, 720px); padding: 0; border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; display: none; flex-direction: column; }
.dlg[open] { display: flex; animation: dlg-in .2s var(--ease); }
.dlg-wide { width: min(820px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(17, 19, 26, .55); backdrop-filter: blur(2px); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--divider); }
.dlg-head h2 { margin: 0; }
.dlg > :not(.dlg-head):not(.pd-list) { margin-left: 20px; margin-right: 20px; }
.dlg > .prof-sub { margin-top: 16px; }
.pd-tabs { display: flex; gap: 4px; margin-top: 12px !important; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; align-self: flex-start; }
.pd-tabs button { height: 32px; padding: 0 14px; border: none; border-radius: 999px; background: none; color: var(--muted); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.pd-tabs button[aria-selected="true"] { background: var(--fill); color: var(--on-fill); }
.pd-list { overflow-y: auto; padding: 8px 20px 20px; min-height: 160px; }
.pd-people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pd-people li { padding: 10px 0; border-top: 1px solid var(--divider); max-width: none; }
.pd-people li:first-child { border-top: none; }
.pd-empty, .pd-wait { margin: 24px 0; text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 8px; max-width: none; }
.rp-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 0 20px; }
.rp-reasons { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rp-reasons label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-3); }
.rp-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: 400 var(--fs-4) var(--sans); border-radius: var(--r); resize: vertical; }
.rp-msg.is-good, .md-msg { color: var(--dec); }
.rp-msg:empty, .md-msg:empty { display: none; }
[data-mod-dialog] { overflow-y: auto; }
[data-mod-dialog] .pa-grid { margin-top: 4px; }
[data-mod-dialog] .account-actions { margin: 12px 20px 0; }
.md-actions { display: flex; flex-wrap: wrap; gap: 8px; }
[data-mod-dialog] > p:last-child { margin-bottom: 20px; }
/* editor: privacy as a segmented choice; pictures and banners in sections */
.pe-seg { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line-strong); border-radius: var(--r); align-self: flex-start; flex-wrap: wrap; }
.pe-seg button { height: 34px; padding: 0 14px; border: none; border-radius: var(--r-sm); background: none; color: var(--muted); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.pe-seg button[aria-checked="true"] { background: var(--fill); color: var(--on-fill); }
.av-grid { display: flex; flex-direction: column; gap: 14px; max-height: 360px; overflow-y: auto; padding: 4px 6px 4px 4px; margin: -4px; grid-template-columns: none; }
.av-sec-h { margin: 0 0 6px; font: 700 var(--fs-1) var(--sans); color: var(--muted); position: sticky; top: -4px; background: var(--card); padding: 4px 0; z-index: 1; }
.av-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 7px; }
.bn-secs { display: flex; flex-direction: column; gap: 14px; }
/* sign-up: the username line says Available or Unavailable */
.un-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--divider); font-weight: 700; font-size: var(--fs-2); color: var(--muted); }
.un-pill.is-ok { border-color: var(--dec); color: var(--dec); }
.un-pill.is-bad { border-color: var(--red); color: var(--red); }
@media (max-width: 640px) {
  .pr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-row .pr-pts { grid-column: 1; }
  .pr-pills { grid-column: 2; }
  .ps strong { font-size: var(--fs-6); }
  .prof-tools { justify-content: flex-end; }
  .dlg { max-height: 86vh; }
}
[data-mod-dialog] { padding-bottom: 20px; }
[data-mod-dialog] > p { margin-top: 8px; margin-bottom: 0; }
@media (max-width: 640px) {
  .prof-tools { gap: 6px; }
  .prof-tools .btn-small { height: 36px; padding: 0 11px; font-size: var(--fs-3); }
  .prof-more { width: 36px; height: 36px; }
}
@media (max-width: 640px) {
  .prof-tools { flex-wrap: nowrap; }
  .prof-tools .btn-small { padding: 0 9px; white-space: nowrap; }
}
@media (max-width: 360px) { .prof-tools { flex-wrap: wrap; } }

/* ---------------------------------------------------------------- tickets: Settings, Your tickets, and the admin replies */
.settings-btn { position: relative; }
.settings-btn.has-dot::after { content: ""; position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--paper); }
.set-head-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.set-head-row h2 { margin: 0; }
.tk-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.tk-list li { max-width: none; }
.tk-item { width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; background: var(--card); color: var(--ink); border: 1px solid var(--divider); border-radius: var(--r); font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tk-item:hover, .tk-item:focus-visible { border-color: var(--ink); box-shadow: var(--sh-1); }
.tk-item.is-unread { border-color: var(--ink); border-left-width: 4px; }
.tk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.tk-kind { font: 700 var(--fs-2) var(--sans); }
.tk-status, .tk-new { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 700 var(--fs-1) var(--sans); letter-spacing: .02em; }
.tk-status.is-open { border: 1px solid var(--ink); }
.tk-status.is-done { background: var(--grid); color: var(--muted); }
.tk-new { background: var(--red); color: #fff; }
.tk-when { margin-left: auto; font-size: var(--fs-1); color: var(--muted); }
.tk-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-3); line-height: 20px; }
.tk-meta { font-size: var(--fs-1); color: var(--muted); }
.tk-thread { flex: 1 1 auto; overflow-y: auto; padding: 16px 0 8px; display: flex; flex-direction: column; gap: 12px; min-height: 120px; }
.tk-ctx { margin: 0; }
.tk-msg-row { display: flex; flex-direction: column; gap: 4px; max-width: 85%; }
.tk-msg-row.is-mine { align-self: flex-end; align-items: flex-end; }
.tk-msg-row.is-team { align-self: flex-start; }
.tk-who { font-size: var(--fs-1); color: var(--muted); }
.tk-bubble { margin: 0; padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-3); line-height: 20px; max-width: none; }
.is-mine .tk-bubble { background: var(--fill); color: var(--on-fill); border-bottom-right-radius: 4px; }
.is-team .tk-bubble { background: var(--card); border: 1px solid var(--line-strong); border-bottom-left-radius: 4px; }
.tk-state { margin: 0; text-align: center; }
.tk-state:empty { display: none; }
.tk-reply { padding: 12px 0 16px; border-top: 1px solid var(--divider); }
.tk-reply .field { margin: 0 0 8px; }
.tk-reply textarea { width: 100%; resize: vertical; }
.adm-thread { list-style: none; margin: 0; padding: 0 0 0 var(--sp-3); border-left: 2px solid var(--divider); display: flex; flex-direction: column; gap: var(--sp-2); }
.adm-thread li { max-width: none; }
.adm-thread p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-3); line-height: 20px; }
.adm-thread .is-team p { font-weight: 700; }
.adm-reply { display: flex; flex-direction: column; gap: var(--sp-2); }
.adm-reply textarea { width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--paper); color: var(--ink); font: var(--fs-3)/20px var(--sans); resize: vertical; }
.adm-reply-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* ======================================================================================
   Profiles, round six: name and pronouns, "Bio:", course chips, layouts, banner heights,
   a two-column page, and the editor as a drawer beside the real profile
   ====================================================================================== */
.page-profile { max-width: 1040px; }
.page-narrow:has(> .account > .profile:not([hidden])) { max-width: 1040px; }
.prof-card { --bh: 136px; --acc-ui: var(--acc); }
.pe-namec, .pe-cardpv { --acc-ui: var(--acc); }
:root[data-theme="dark"] :is(.prof-card, .pe-namec, .pe-cardpv) { --acc-ui: color-mix(in srgb, var(--acc) 62%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.prof-card, .pe-namec, .pe-cardpv) { --acc-ui: color-mix(in srgb, var(--acc) 62%, #fff); } }
.prof-card[data-bsize="short"] { --bh: 92px; }
.prof-card[data-bsize="tall"] { --bh: 188px; }
.prof-banner { height: var(--bh); transition: height .25s var(--ease); }
.prof-head { padding: 0 24px 14px; }
.prof-who { gap: 4px; }
.prof-name .prof-handle { transition: color .2s; }
.prof-card[data-namec="accent"] .prof-name .prof-handle { color: var(--acc-ui); }
.prof-handle-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: var(--fs-3); line-height: 20px; color: var(--muted); max-width: none; }
.prof-handle-line[hidden] { display: none; }
.prof-at { font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; }
.prof-pronouns { font-style: normal; }
.prof-dot { color: var(--dashed); }
/* about: "Bio:" over the bio, then course, year and the date they joined */
.prof-about { display: flex; flex-direction: column; gap: 14px; padding: 0 24px 20px; }
.prof-about[hidden] { display: none; }
.prof-bio-box { flex-direction: column; align-items: stretch; gap: 2px; max-width: 64ch; }
.prof-bio-label { margin: 0 !important; padding: 0; border: none; border-radius: 0; font: 700 var(--fs-2) / 18px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.prof-bio { font: italic 400 var(--fs-5) / 1.45 var(--sans); color: var(--ink); max-width: none; }
.prof-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prof-chips:empty { display: none; }
.prof-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border: 1px solid var(--divider); border-radius: 999px; background: var(--paper); font: 700 var(--fs-2) var(--sans); color: var(--text-2); white-space: nowrap; max-width: none; }
.prof-chip i { flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--pure); }
.prof-chip.pc-mathematics i { background: var(--dec); }
.prof-chip.pc-physics i { background: var(--mech); }
.pc-board { padding-left: 7px; border-left: 1px solid var(--divider); font-weight: 400; color: var(--muted); }
.pc-since { border-color: transparent; background: none; padding-left: 2px; font-weight: 400; color: var(--muted); }
.pc-since svg { flex: none; }
/* layout: centred */
.prof-card[data-layout="centre"] .prof-head { grid-template-columns: minmax(0, 1fr) var(--av) minmax(0, 1fr); grid-template-areas: ". av tools" "who who who"; }
.prof-card[data-layout="centre"] .prof-avatar { justify-self: center; }
.prof-card[data-layout="centre"] .prof-tools { justify-self: end; align-self: start; }
.prof-card[data-layout="centre"] .prof-who { align-items: center; text-align: center; }
.prof-card[data-layout="centre"] .prof-name, .prof-card[data-layout="centre"] .prof-handle-line, .prof-card[data-layout="centre"] .prof-chips { justify-content: center; }
.prof-card[data-layout="centre"] .prof-about { align-items: center; text-align: center; }
/* more card styles */
.prof-card[data-card="tint"] { background: color-mix(in srgb, var(--cacc) 9%, var(--card)); }
.prof-card[data-card="tint"] .prof-avatar { border-color: color-mix(in srgb, var(--cacc) 9%, var(--card)); }
.prof-card[data-card="tint"] .prof-chip:not(.pc-since) { background: var(--card); }
.prof-card[data-card="outline"] { outline: 2px solid var(--cacc-ui); outline-offset: 4px; margin: 6px; }
.prof-card[data-card="outline"] .prof-banner { border-bottom-style: dashed; }
.pe-cardpv[data-card="tint"] { background: linear-gradient(color-mix(in srgb, var(--cacc) 30%, #fff) 0 40%, color-mix(in srgb, var(--cacc) 12%, var(--card)) 40%); }
.pe-cardpv[data-card="outline"] { outline: 1.5px solid var(--cacc-ui, var(--cacc)); outline-offset: 2px; }
/* the page under the card: Challenge on the left, badges on the right */
.prof-body { display: grid; grid-template-columns: minmax(0, 1fr) 323px; gap: var(--u); align-items: start; }
.prof-main, .prof-side { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.prof-body.one-col { grid-template-columns: 1fr; }
.prof-body.one-col .prof-main { display: none; }
.prof-body.one-col .prof-side .pb-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.prof-side .pb-grid { grid-template-columns: 1fr; }
.pr-own-note { display: flex; align-items: center; gap: 6px; }
@media (max-width: 900px) {
  .prof-body { grid-template-columns: 1fr; }
  .prof-side .pb-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 640px) {
  .prof-card { --bh: 108px; }
  .prof-card[data-bsize="short"] { --bh: 72px; }
  .prof-card[data-bsize="tall"] { --bh: 150px; }
  .prof-head { padding: 0 16px 12px; }
  .prof-about { padding: 0 16px 16px; gap: 12px; }
  .prof-card[data-layout="centre"] .prof-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "who" "tools"; justify-items: center; }
  .prof-card[data-layout="centre"] .prof-tools { justify-self: center; justify-content: center; padding-top: 12px; }
  .prof-card[data-card="outline"] { margin: 4px; }
}
/* owner and verified marks in lists of people: the mark only */
.pp-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pp-top .pp-name { min-width: 0; }
.pp-mark { flex: none; display: inline-flex; }
.pp-mark .badge { width: 16px; height: 16px; }

.pe-field { display: flex; flex-direction: column; gap: 6px; }
.pe-field .field { margin: 0; }
.pe-field > p { margin: 0; max-width: none; }
.pe-label { margin: 0; font: 700 var(--fs-3) var(--sans); }
.pe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-chip { height: 32px; padding: 0 12px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); color: var(--ink); font: 700 var(--fs-2) var(--sans); cursor: pointer; transition: border-color .15s, background .15s; }
.pe-chip:hover { border-color: var(--ink); }
.pe-chip[aria-checked="true"] { background: var(--fill); border-color: var(--ink); color: var(--on-fill); }
.pe-custom { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); color: var(--ink); font: 400 var(--fs-5) var(--sans); }
.pe-custom[hidden] { display: none; }
.pe-custom:focus { outline: 3px solid var(--link); outline-offset: 1px; }
/* switches: the same card for every on/off choice */
.switch-card { border: 1px solid var(--divider); border-radius: var(--r); background: var(--paper); overflow: hidden; }
.switch-card .switch-row { border: none; border-radius: 0; background: none; padding: 12px 14px; }
.switch-card .switch-row > span:first-child { min-width: 0; }
.switch-card:has(input:focus-visible) { outline: 3px solid var(--link); outline-offset: 1px; }
.switch-card:has(input:disabled) { opacity: .6; }
.switch-foot { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--divider); color: var(--muted); max-width: none; }
.switch-foot:empty { display: none; }
.switch-foot .text-btn { padding: 0; font-size: var(--fs-2); }
.pe-auto-tag { padding: 1px 8px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); font: 700 var(--fs-1) / 1.6 var(--sans); color: var(--text-2); }
.pe-auto-tag.is-manual { border-style: dashed; }
/* samples in the style options */
.pe-laypv { position: relative; width: 56px; height: 40px; border: 1px solid var(--ink); border-radius: 3px; background: linear-gradient(color-mix(in srgb, var(--acc, #888) 30%, var(--card)) 0 38%, var(--card) 38%); }
.pe-laypv i { position: absolute; top: 9px; left: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--fill); box-shadow: 0 0 0 2px var(--card); }
.pe-laypv b { position: absolute; left: 6px; height: 3px; border-radius: 2px; background: var(--dashed); }
.pe-laypv b:nth-of-type(1) { top: 26px; width: 28px; background: var(--fill); }
.pe-laypv b:nth-of-type(2) { top: 32px; width: 20px; }
.pe-laypv[data-layout="centre"] i { left: 50%; margin-left: -7px; }
.pe-laypv[data-layout="centre"] b:nth-of-type(1) { left: 14px; }
.pe-laypv[data-layout="centre"] b:nth-of-type(2) { left: 18px; }
.pe-bspv { width: 56px; height: 40px; border: 1px solid var(--ink); border-radius: 3px; background: var(--card); overflow: hidden; }
.pe-bspv i { display: block; height: 14px; background: color-mix(in srgb, var(--acc) 30%, #fff); border-bottom: 1px solid var(--ink); }
.pe-bspv[data-bsize="short"] i { height: 8px; }
.pe-bspv[data-bsize="tall"] i { height: 22px; }
.pe-namec[data-namec="accent"] { color: var(--acc-ui, var(--acc)); }
/* breadcrumbs: the same place and spacing on every page, lined up with the page's own column */
.crumbs { margin: 0 0 var(--sp-4); }
.page-head > .crumbs { margin-bottom: calc(var(--sp-4) - var(--u)); }
.crumbs ol { row-gap: 2px; line-height: 20px; }
.crumbs li { max-width: none; }
.crumbs li[aria-current] { color: var(--text-2); font-weight: 700; overflow-wrap: anywhere; }
.prof-card, #tickets { scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.pe-field input:disabled { opacity: .55; cursor: not-allowed; }

/* ======================================================================================
   Edit profile, round seven. On a computer: a panel in its own column beside the real profile (which is the preview),
   kept in view as the page scrolls, with the parts listed down its side. On a phone or tablet: a full-screen dialog
   with a small copy of the card at the top, the parts in a row of tabs, and one large Save button at the bottom.
   ====================================================================================== */
.page-narrow:has(> .account > .profile.is-editing:not([hidden])) { max-width: 1280px; }
.profile.is-editing .prof-more-wrap { display: none; }
.pe { display: flex; flex-direction: column; min-height: 0; background: var(--card); color: var(--ink); border: var(--rule) solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; animation: fade-down .2s var(--ease); }
.pe[hidden] { display: none; }
.pe-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--divider); }
.pe-top-text { min-width: 0; }
.pe-title { margin: 0; font: 700 var(--fs-8) / 1.2 var(--serif); }
.pe-hint { margin: 4px 0 0; font-size: var(--fs-2); line-height: 18px; color: var(--muted); max-width: none; }
.pe-top-btn { display: none; }
.pe-mini { display: none; }
.pe-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.pe .pe-tabs { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 8px; border: 0; border-right: 1px solid var(--divider); border-radius: 0; background: var(--paper); overflow-y: auto; }
.pe .pe-tabs button { display: flex; align-items: center; gap: 10px; min-height: 44px; height: auto; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--text-2); font: 700 var(--fs-3) / 1.2 var(--sans); text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.pe .pe-tabs button:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.pe .pe-tabs button[aria-selected="true"] { background: var(--fill); color: var(--on-fill); }
.pe .pe-tabs button:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
.pe .pe-tabs svg { flex: none; }
.pe-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 28px; }
.pe-pane { display: flex; flex-direction: column; gap: 14px; outline: none; }
.pe-pane[hidden] { display: none; }
.pe-pane-head h3 { margin: 0; font: 700 var(--fs-7) / 1.25 var(--serif); }
.pe-pane-head p { margin: 4px 0 0; font-size: var(--fs-3); line-height: 20px; color: var(--muted); max-width: none; }
.pe-pane .prof-sub { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 -4px; }
.pe-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pe-fieldset legend { padding: 0; margin-bottom: 6px; }
.pe-custom-wrap { display: block; margin-top: 8px; }
.pe-custom-wrap[hidden] { display: none; }
.pe-chip { min-height: 36px; }
.pe-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px 12px 20px; border-top: 1px solid var(--divider); background: var(--paper); }
.pe-dirty { margin: 0 auto 0 0; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.pe.is-dirty .pe-dirty { color: var(--ink); font-weight: 700; }
.pe.is-dirty .pe-dirty::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stats); }
.pe-foot .acc-edit-msg { flex-basis: 100%; margin: 0; }
.pe-foot .acc-edit-msg:empty { display: none; }
.pe button[type=submit]:disabled { opacity: .45; cursor: not-allowed; }
.pe [data-prof-cancel].is-armed { border-color: var(--red); color: var(--red); }
.pe .av-grid { max-height: none; overflow: visible; }
.pe .banners { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe .pe-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pe .pe-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pe .pe-opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe .pe-badges { max-height: none; }
.pe .pe-opt { min-height: 44px; }
.pe .pe-opt:focus-visible, .pe .bn-pick:focus-visible, .pe .av-pick:focus-visible, .pe .swatch:focus-visible, .pe .pe-chip:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
/* a computer: the editor in its own column, kept in view below the header */
@media (min-width: 1000px) {
  .profile.is-editing { display: grid; grid-template-columns: minmax(0, 1fr) clamp(440px, 42vw, 560px); column-gap: 24px; row-gap: var(--sp-4); align-items: start; }
  .profile.is-editing > * { grid-column: 1; }
  .profile.is-editing > .pe { grid-column: 2; grid-row: 1 / span 8; position: sticky; top: calc(var(--header-h, 76px) + 16px); height: calc(100dvh - var(--header-h, 76px) - 32px); max-height: 860px; }
  .profile.is-editing .prof-body { grid-template-columns: 1fr; }
  .profile.is-editing .prof-actions { display: none; }
}
/* a phone or tablet: a full-screen dialog */
@media (max-width: 999.98px) {
  html.pe-sheet, html.pe-sheet body { overflow: hidden; }
  .pe { position: fixed; inset: 0; z-index: 90; height: 100dvh; border: 0; border-radius: 0; box-shadow: none; animation: sheet-up .22s var(--ease); }
  @keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
  .pe-top { position: relative; justify-content: center; min-height: 52px; padding: calc(4px + env(safe-area-inset-top)) 64px 4px; }
  .pe-title { font: 700 var(--fs-6) / 1.2 var(--sans); }
  .pe-hint { display: none; }
  .pe-top-btn { display: inline-flex; align-items: center; position: absolute; left: 4px; top: calc(4px + env(safe-area-inset-top)); min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--link); font: 700 var(--fs-5) var(--sans); cursor: pointer; }
  .pe-top-btn.is-armed { color: var(--red); }
  .pe-mini { display: block; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--divider); background: var(--paper); }
  .pe-mini .prof-card { --av: 56px; margin: 0 auto; max-width: 560px; border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: none; outline: none; }
  .pe-mini .prof-card[data-bsize] { --bh: 54px; }
  .pe-mini .prof-head { grid-template-columns: var(--av) minmax(0, 1fr); grid-template-areas: "av who"; column-gap: 10px; padding: 0 12px 10px; }
  .pe-mini .prof-card[data-layout="centre"] .prof-head { grid-template-columns: var(--av) minmax(0, 1fr); grid-template-areas: "av who"; }
  .pe-mini .prof-card[data-layout="centre"] .prof-who { align-items: flex-start; text-align: left; }
  .pe-mini .prof-avatar { border-width: 3px; }
  .pe-mini .prof-who { padding-top: 6px; gap: 0; }
  .pe-mini .prof-name { font-size: var(--fs-6); margin: 0; }
  .pe-mini .prof-name .badge-stack .badge { width: 18px; height: 18px; }
  .pe-mini .prof-handle-line { font-size: var(--fs-2); line-height: 16px; }
  .pe-mini .prof-tools, .pe-mini .prof-about, .pe-mini [data-prof-stats] { display: none; }
  .pe-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pe .pe-tabs { flex-direction: row; gap: 6px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--divider); overflow-x: auto; scrollbar-width: none; }
  .pe .pe-tabs::-webkit-scrollbar { display: none; }
  .pe .pe-tabs button { flex: none; gap: 6px; padding: 0 14px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); }
  .pe .pe-tabs button[aria-selected="true"] { border-color: var(--ink); }
  .pe .pe-tabs svg { width: 18px; height: 18px; }
  .pe-scroll { padding: 16px 16px 24px; }
  .pe-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .pe-foot [data-prof-cancel] { display: none; }
  .pe-foot .btn-ink { flex: 1 1 160px; min-height: 48px; }
  .pe-dirty { flex-basis: 100%; }
}
@media (max-width: 420px) {
  .pe .pe-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pe .banners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .pe { animation: none; } .prof-banner { transition: none; } }
.pe-top-btn.is-armed ~ .pe-top-text { visibility: hidden; }

/* the maths keyboard docked to the bottom of a phone or tablet, in place of the device keyboard */
.mkb-hide { display: none; }
.mkb.is-docked { position: fixed; left: 0; right: 0; bottom: 0; z-index: 85; margin: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border: 0; border-top: var(--rule) solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .18); max-width: none; transform: translateY(16px); }
.mkb.is-docked.is-in { transform: none; }
.mkb.is-docked .mkb-hide { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0; }
.mkb.is-docked .mkb-tabs { gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.mkb.is-docked .mkb-key { height: 44px; }
.mkb.is-docked .mkb-pane[data-mkb-pane="abc"] .mkb-key { font: 400 18px var(--sans); }
html.mkb-docked #main { padding-bottom: calc(var(--mkb-h, 260px) + 24px); }
html.mkb-docked .tabbar { visibility: hidden; }
@media (min-width: 700px) { .mkb.is-docked { left: 50%; right: auto; width: min(720px, 100vw); transform: translate(-50%, 16px); } .mkb.is-docked.is-in { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mkb.is-docked { transform: none; } }

/* home: no papers to show (signed out, or no course yet) */
.home-foot:has([data-papers-section][hidden]) { grid-template-columns: minmax(0, 1fr); }
.home-foot .section-intro { margin: 0; }
.papers-subject + .papers-subject { margin-top: var(--sp-4); }
.papers-h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--sp-2); font: 700 var(--fs-4) var(--sans); }
.papers-h .sq { width: 10px; height: 10px; }
.papers-line { margin: var(--sp-2) 0 0; }
.fbar-label.is-ask { color: var(--red); }
/* the Challenge: the count line and, for Year 12 students, the Year 13 switch on one row */
.ch-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ch-tools .ltool-note { margin: 0; }
.ch-tools[hidden] { display: none; }
/* V20: your place on the leaderboard, above the topics, only where the leaderboard is below them */
.ch-myrank { display: none; }
@media (max-width: 900px) {
  .ch-myrank:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-1) var(--sp-4); margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--divider); border-radius: var(--r); background: var(--card); font-size: var(--fs-3); }
  .ch-myrank a { font-weight: 700; }
}
#ch-board-h { scroll-margin-top: calc(var(--header-h, 64px) + 16px); }
/* V21: on a computer the "Saved" toast sits in the bottom-right corner, clear of the course cards it reports on */
@media (min-width: 721px) {
  .saved-toast { left: auto; right: 24px; transform: translateY(12px); }
  .saved-toast.is-on { transform: translateY(0); }
}

/* ---------------------------------------------------------------- Challenge: the points ladder
   One step per try with the points it is worth: used tries crossed out, the try you are on outlined, a solved
   question's step filled green with "+8". It explains the scoring without a sentence. */
.ch-answer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.ladder { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ladder-step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 36px; height: 40px; padding: 0 4px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--card); line-height: 1; transition: background .2s, border-color .2s, opacity .2s; }
.ladder-pts { font-weight: 700; font-size: var(--fs-4); font-variant-numeric: tabular-nums; }
.ladder-try { margin-top: 3px; font-size: var(--fs-1); font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.ladder-step.is-now { border: 2px solid var(--fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent); }
.ladder-step.is-used { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 14%, var(--card)); color: var(--red); }
.ladder-step.is-used .ladder-try { color: inherit; opacity: .8; }
.ladder-step.is-won { border-color: var(--dec); background: var(--dec); color: var(--on-fill); }
.ladder-step.is-won .ladder-try { color: inherit; opacity: .8; }
.ladder-step.is-off { opacity: .3; }
.ladder.is-given .ladder-step { opacity: .3; }
.ladder-step.is-new { animation: ladder-shake .35s ease-in-out 1; }
@keyframes ladder-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .ladder-step.is-new { animation: none; } }
/* the 0 a shown solution scores, as a small round token */
.ladder-zero { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border: 1px dashed var(--muted); border-radius: 50%; font-size: var(--fs-1); font-weight: 700; color: var(--muted); vertical-align: middle; }
.ladder-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4); }
.ladder-legend-label, .ladder-legend-zero { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.ladder-legend-zero .ladder-zero { margin: 0 4px 0 0; }

/* ---------------------------------------------------------------- Home: how it works, the tour, the comparison
   Everything SUVAT offers is explained here, with a picture of each part rather than paragraphs. */
.how-compact .how-step { gap: var(--sp-3); }
.how-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.how-chips span { padding: 3px var(--sp-2); border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--paper, transparent); font-size: var(--fs-2); font-weight: 700; color: var(--text-2); }
.home-tour { display: flex; flex-direction: column; gap: var(--sp-9); }
.tour-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-9); align-items: center; }
.tour-row-flip .tour-text { order: 2; }
.tour-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.tour-title { margin: 0; font-family: var(--serif); font-size: var(--fs-11); font-weight: 700; line-height: var(--lh-3); }
.tour-lede { margin: 0; font-size: var(--fs-5); line-height: var(--lh-2); color: var(--text-2); }
.tour-tag { padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--fill); color: var(--on-fill); font-size: var(--fs-1); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.tour-tag-open { background: var(--dec); }
.tour-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-4); color: var(--text-2); }
.tour-ticks li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.tour-ticks:not(.tour-levels) li::before { content: ""; flex: none; width: 14px; height: 8px; margin: -3px 2px 0 1px; border-left: 2.5px solid var(--dec); border-bottom: 2.5px solid var(--dec); transform: rotate(-45deg); }
.tour-text .how-link { margin-top: var(--sp-1); padding-top: 0; }
.tour-text .ladder-legend { margin-top: 0; }
/* the real practice question, cut off with a fade so the row stays a sensible height */
.tour-sample .q { margin: 0; }
/* a lesson, drawn: the screen, the progress bar and its five parts */
.vis-player { border: var(--rule) solid var(--line); background: var(--card); box-shadow: var(--sh-2); border-radius: var(--r); overflow: hidden; }
.vis-screen { position: relative; aspect-ratio: 16 / 8; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); padding: var(--sp-6) var(--sp-7); background: var(--paper); color: var(--ink); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: var(--u) var(--u); box-shadow: inset 2px 0 0 var(--margin); }
.vis-kicker { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.vis-title { font-family: var(--serif); font-size: var(--fs-10); font-weight: 700; }
.vis-eq { font-family: var(--maths); font-size: var(--fs-7); }
.vis-play { position: absolute; right: var(--sp-6); bottom: var(--sp-5); width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); padding-left: 3px; }
.vis-bar { height: 5px; background: var(--divider); }
.vis-bar span { display: block; height: 100%; background: var(--link); }
.vis-chapters { list-style: none; margin: 0; padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.vis-chapters li { padding-top: var(--sp-2); border-top: 3px solid var(--divider); font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.vis-chapters .is-done { border-color: var(--link); color: var(--text-2); }
.vis-chapters .is-now { border-color: var(--fill); color: var(--ink); }
/* a worksheet and its mark scheme */
.vis-papers { position: relative; height: 340px; }
.vis-paper { position: absolute; top: 20px; left: 10%; width: 52%; height: 300px; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--sh-2); transform: rotate(-2deg); }
.vis-paper-back { left: auto; right: 8%; top: 0; transform: rotate(3deg); background: var(--paper); }
.vis-paper-h { font-size: var(--fs-2); font-weight: 700; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--ink); }
.vis-q { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); }
.vis-q i, .vis-ms i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.vis-q em { font-style: normal; font-weight: 700; }
.vis-lines { height: 54px; background: repeating-linear-gradient(to bottom, transparent 0 17px, var(--grid) 17px 18px); }
.vis-ms { display: flex; align-items: center; gap: var(--sp-2); }
.vis-paper-foot { margin-top: auto; align-self: flex-end; padding: 2px 6px; background: var(--red); color: #fff; font-size: var(--fs-1); font-weight: 700; }
/* the Challenge: a leaderboard and two sub-topics mixed */
.vis-board { border: var(--rule) solid var(--line); background: var(--card); box-shadow: var(--sh-2); border-radius: var(--r); overflow: hidden; }
.vis-board-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; }
.vis-board-pill { display: flex; border: 1px solid var(--divider); border-radius: var(--r-sm); font: 700 var(--fs-1) var(--sans); }
.vis-board-pill > * { padding: 4px var(--sp-2); }
.vis-board-pill b { background: var(--fill); color: var(--on-fill); }
.vis-rank { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-4); }
.vis-rank li { display: grid; grid-template-columns: 28px 32px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-4); }
.vis-rank li:last-child { border-bottom: none; }
.vis-rank li.is-me { margin: 0 calc(-1 * var(--sp-2)); padding: var(--sp-2); background: color-mix(in srgb, var(--link) 10%, transparent); border-radius: var(--r-sm); }
.vis-rank b { font-variant-numeric: tabular-nums; }
.vis-medal { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.vis-medal.m1 { background: #C08A2E; color: #fff; } .vis-medal.m2 { background: #8A96A6; color: #fff; } .vis-medal.m3 { background: #9C5B2E; color: #fff; }
.vis-av { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #2B4C7E; color: #fff; font: 700 16px var(--serif); }
.vis-av2 { background: #2F6F6A; } .vis-av3 { background: #6B3F69; } .vis-av4 { background: #8A6D1F; }
.vis-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-mix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px dashed var(--divider); }
.vis-mix span:not(.vis-plus) { padding: 3px var(--sp-2); border: 1px solid var(--divider); border-radius: var(--r-sm); font-size: var(--fs-2); font-weight: 700; color: var(--text-2); }
.vis-plus { font-weight: 700; color: var(--muted); }
/* a profile card */
.vis-prof { max-width: 440px; margin-inline: auto; border: var(--rule) solid var(--line); background: var(--card); box-shadow: var(--sh-2); overflow: hidden; border-radius: var(--r); overflow: hidden; }
.vis-prof-banner { height: 96px; background: #2B4C7E; background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .12) 0 10px, transparent 10px 20px); }
.vis-prof-body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-5); text-align: center; }
.vis-prof-av { width: 88px; height: 88px; margin-top: -44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 4px solid var(--card); background: #C7488F; color: #fff; font: 700 40px / 1 var(--serif); }
.vis-prof-name { font-family: var(--serif); font-size: var(--fs-9); font-weight: 700; }
.vis-prof-badges { display: flex; gap: var(--sp-2); }
.vis-prof-badges i { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c); color: #fff; font: 700 11px var(--sans); font-style: normal; }
.vis-prof-counts { display: flex; gap: var(--sp-4); font-size: var(--fs-3); color: var(--muted); }
.vis-prof-counts b { color: var(--ink); }
/* with or without an account */
.cmp { width: 100%; max-width: 760px; border-collapse: collapse; font-size: var(--fs-4); }
.cmp th, .cmp td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); text-align: center; }
.cmp th[scope="row"] { text-align: left; font-weight: 400; }
.cmp thead th { font-size: var(--fs-3); font-weight: 700; border-bottom: var(--rule) solid var(--line); }
.cmp td:last-child, .cmp thead th:last-child { background: color-mix(in srgb, var(--dec) 9%, transparent); }
.cmp-yes { color: var(--dec); vertical-align: middle; }
.cmp-no { color: var(--muted); font-weight: 700; }
.cmp-some { font-size: var(--fs-2); font-weight: 700; color: var(--text-2); white-space: nowrap; }
.home-compare .cmp { max-width: none; }
.home-compare .cmp thead th:not(:first-child) { width: 22%; }
/* how SUVAT teaches */
.approach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.approach li { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border: var(--rule) solid var(--line); background: var(--card); font-size: var(--fs-3); color: var(--text-2); border-radius: var(--r); }
.approach strong { font-family: var(--serif); font-size: var(--fs-7); font-weight: 700; color: var(--ink); line-height: var(--lh-3); }
.approach-ic { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); font: 700 var(--fs-7) var(--serif); }
.approach-ic-chip { font: 700 var(--fs-2) var(--sans); }
@media (max-width: 1000px) {
  .tour-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .tour-row-flip .tour-text { order: 0; }
  .approach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .approach { grid-template-columns: minmax(0, 1fr); }
  .vis-screen { padding: var(--sp-4) var(--sp-5); }
  .vis-title { font-size: var(--fs-8); } .vis-eq { font-size: var(--fs-5); }
  .vis-play { width: 40px; height: 40px; right: var(--sp-4); bottom: var(--sp-4); }
  .vis-chapters li { font-size: var(--fs-1); white-space: nowrap; overflow: hidden; }
  .vis-chapters li:not(.is-now) { color: transparent; }
  .vis-chapters .is-now { overflow: visible; }
  .vis-papers { height: 280px; } .vis-paper { height: 250px; width: 62%; left: 4%; } .vis-paper-back { right: 2%; }
  .cmp th, .cmp td { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-3); }
}

/* ---------------------------------------------------------------- lesson player: Video or Text, and full screen */
.player-views { display: flex; flex: none; margin-left: auto; border: 1px solid var(--pl-line); border-radius: var(--r); overflow: hidden; }
.player-views button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 var(--sp-3); border: none; background: none; color: var(--pl-muted); font: 700 var(--fs-2) var(--sans); cursor: pointer; white-space: nowrap; }
.player-views button + button { border-left: 1px solid var(--pl-line); }
.player-views button[aria-pressed="true"] { background: var(--pl-fg); color: var(--pl-bg); }
.player-views button:not([aria-pressed="true"]):hover { background: var(--pl-hover); color: #fff; }
.player-views button:focus-visible { outline: 3px solid var(--pl-blue); outline-offset: -3px; }
/* full screen (the browser's own, or the player covering the page on an iPhone): the picture fills the screen and is
   scaled to fit; the controls sit over it and fade while the lesson plays untouched */
.player.is-full { padding: 0; }
.player.is-full .player-box, .player-box:fullscreen, .player-box:-webkit-full-screen { position: fixed; inset: 0; z-index: 1000; width: 100vw; max-width: none; min-width: 0; height: 100vh; height: 100dvh; margin: 0; border: none; border-radius: 0; display: flex; flex-direction: column; background: #000; overflow: hidden; }
.player.is-full .player-screen { flex: 1 1 auto; height: auto; min-height: 0; aspect-ratio: auto; background: #000; }
.player.is-full .player-top, .player.is-full .player-bar { position: absolute; left: 0; right: 0; z-index: 4; background: rgba(17, 19, 26, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .3s; }
.player.is-full .player-top { top: 0; padding-top: max(var(--sp-3), env(safe-area-inset-top)); padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
.player.is-full .player-bar { bottom: 0; padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom)); padding-left: max(var(--sp-4), env(safe-area-inset-left)); padding-right: max(var(--sp-4), env(safe-area-inset-right)); }
.player.is-full.is-idle .player-top, .player.is-full.is-idle .player-bar { opacity: 0; pointer-events: none; }
.player.is-full .player-chapters, .player.is-full .player-info, .player.is-full .player-views { display: none; }
.player.is-full .player-skip { bottom: 72px; }
html.player-full, html.player-full body { overflow: hidden; }

/* ---------------------------------------------------------------- the header between a phone and a wide screen
   (tablets, phones on their side, small laptops): everything on one line, the long name only when there is room */
.site-nav a { white-space: nowrap; }
@media (max-width: 1180px) { .site-header .brand-full { display: none; } }
@media (min-width: 721px) and (max-width: 1040px) {
  .header-inner { gap: var(--sp-4); }
  .site-nav ul { gap: var(--sp-4); }
  .account-btn-text { display: none; }
  .account-btn { padding: 0 var(--sp-2); }
}
@media (min-width: 721px) and (max-width: 860px) {
  .site-nav ul { gap: var(--sp-3); }
  .site-nav a { font-size: var(--fs-3); }
  .header-tools .icon-btn { width: 40px; }
}
/* a phone on its side: a slimmer header, so more of the page shows */
@media (max-height: 500px) and (orientation: landscape) {
  .header-inner { height: 56px; }
  .toolbar { top: 56px; }
  .logo { width: 36px; height: 31px; }
  .icon-btn { height: 40px; }
}
/* a phone on its side with the maths keyboard open: the header steps aside and the keys get shorter, so the answer
   box stays in view above the keyboard */
@media (max-height: 500px) and (orientation: landscape) {
  html.mkb-docked .site-header { visibility: hidden; height: 0; overflow: hidden; border: 0; }
  .mkb.is-docked { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .mkb.is-docked .mkb-key { height: 32px; font-size: 16px; }
  .mkb.is-docked .mkb-tabs { margin-bottom: 4px; padding-bottom: 4px; }
  .mkb.is-docked .mkb-tab, .mkb.is-docked .mkb-tabs button { height: 30px; min-height: 30px; }
  .mkb.is-docked .mkb-row, .mkb.is-docked .mkb-pane { gap: 3px; }
}
/* Edit profile on a phone on its side: tabs down the left as on a computer, no mini card, so the settings have room
   (the profile itself shows the changes once saved) */
@media (max-width: 999.98px) and (max-height: 500px) and (orientation: landscape) {
  .pe-top { min-height: 44px; padding-top: calc(2px + env(safe-area-inset-top)); padding-bottom: 2px; }
  .pe-mini { display: none; }
  .pe-body { grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .pe .pe-tabs { flex-direction: column; gap: 2px; padding: 8px 6px; border-right: 1px solid var(--divider); border-bottom: 0; overflow-y: auto; padding-left: max(6px, env(safe-area-inset-left)); }
  .pe .pe-tabs button { min-height: 38px; border: 0; border-radius: var(--r); background: none; }
  .pe-scroll { padding: 12px 16px 16px; padding-right: max(16px, env(safe-area-inset-right)); }
  .pe-foot { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .pe-foot .btn-ink { min-height: 40px; }
  .pe-dirty { flex-basis: auto; }
}

/* ---------------------------------------------------------------- profile card, round nine
   Friends, followers and following: three small pills under the name, each with an icon, that open the lists. */
.prof-card .prof-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; border-top: none; background: none; }
.prof-card[data-layout="centre"] .prof-stats { justify-content: center; }
.prof-card .ps { flex-direction: row; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px 0 9px; border: 1px solid var(--divider); border-radius: 999px; background: var(--card); color: var(--ink); font-size: var(--fs-3); }
.prof-card .ps:first-child { border-left: 1px solid var(--divider); }
.prof-card .ps:hover { border-color: var(--ink); background: color-mix(in srgb, var(--acc, var(--ink)) 8%, var(--card)); }
.prof-card .ps strong { font: 700 var(--fs-4) / 1 var(--sans); font-variant-numeric: tabular-nums; }
.prof-card .ps span { font-size: var(--fs-3); color: var(--muted); }
.ps-ic { flex: none; color: var(--muted); }
.prof-card .ps.is-locked strong::after { content: none; }
.prof-card .ps.is-locked::after { content: ""; flex: none; width: 10px; height: 12px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M2 5V3.5a3 3 0 0 1 6 0V5h1v7H1V5zm1.5 0h3V3.5a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pe-mini .prof-stats { display: none !important; }
/* the bio comes last, under the course and the date the student joined */
.prof-chips:not(:empty) + .prof-bio-box { padding-top: 12px; border-top: 1px dashed var(--divider); }
/* badges beside a name: just the rosettes, no disc behind them (the disc showed as a pale circle on light cards) */
.badge-stack { gap: 3px; }
.badge-stack .badge, .badge-stack .badge:first-child { margin-left: 0; border-radius: 0; box-shadow: none; background: none; }

/* ---------------------------------------------------------------- profile styles: colours and the special cards
   --cacc is the card's own colour (the banner colour unless the student picks another); --namec the name's colour */
.prof-card, .pe-cardpv, .pe-mini { --cacc: var(--acc); --cacc-ui: var(--cacc); --namec-ui: var(--namec, var(--ink)); }
:root[data-theme="dark"] :is(.prof-card, .pe-cardpv, .pe-mini) { --cacc-ui: color-mix(in srgb, var(--cacc) 62%, #fff); --namec-ui: color-mix(in srgb, var(--namec, var(--ink)) 62%, #fff); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.prof-card, .pe-cardpv, .pe-mini) { --cacc-ui: color-mix(in srgb, var(--cacc) 62%, #fff); --namec-ui: color-mix(in srgb, var(--namec, var(--ink)) 62%, #fff); } }
.prof-card[data-namec="custom"] .prof-name .prof-handle, .pe-namec[data-namec="custom"] { color: var(--namec-ui); }
/* a night card: the card in SUVAT's dark colours, whatever the site's theme */
.prof-card[data-card="night"], .pe-cardpv[data-card="night"] { --acc-ui: color-mix(in srgb, var(--acc) 62%, #fff); --card: #1F2125; --paper: #17181B; --ink: #ECEAE4; --text-2: #C9C4B8; --muted: #9B978D; --divider: #3A3F4C; --link: var(--pl-blue); --cacc-ui: color-mix(in srgb, var(--cacc) 62%, #fff); --namec-ui: color-mix(in srgb, var(--namec, #ECEAE4) 62%, #fff); --bn-bg: color-mix(in srgb, var(--acc) 42%, #1F2125); --bn-line: color-mix(in srgb, var(--acc) 45%, #ECEAE4); background: #1F2125; color: #ECEAE4; border-color: #000; }
.prof-card[data-card="night"] .prof-avatar { border-color: #1F2125; }
.pe-cardpv[data-card="night"] { background: linear-gradient(color-mix(in srgb, var(--acc) 42%, #1F2125) 0 40%, #1F2125 40%); border-color: #000; }
/* the Style pane: the card styles in two groups, and rows of colour swatches */
.pe-opt-group { margin: 2px 0 -6px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.swatches .swatch-word { width: auto; min-width: 56px; padding: 0 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--divider); font: 700 var(--fs-2) var(--sans); color: var(--ink); }
.swatches .swatch-word[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
/* a phone on its side: a lower banner, so the name and the rest of the card are on the screen */
@media (max-height: 500px) and (orientation: landscape) {
  .prof-card { --bh: 72px; }
  .prof-card[data-bsize="short"] { --bh: 52px; }
  .prof-card[data-bsize="tall"] { --bh: 96px; }
}
@media (max-width: 420px) {
  .prof-card .ps-ic { display: none; }
  .prof-card .ps { padding: 0 10px; gap: 5px; }
}

/* ---------------------------------------------------------------- pictures instead of sentences
   difficulty as one, two or three bars; the mark key on one line; lesson progress as a bar; paper facts as tiles */
.lvl { display: inline-flex; align-items: center; gap: 6px; }
.lvl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.lvl-bars b { width: 3px; border-radius: 1px; background: currentColor; opacity: .25; }
.lvl-bars b:nth-child(1) { height: 4px; } .lvl-bars b:nth-child(2) { height: 7px; } .lvl-bars b:nth-child(3) { height: 10px; }
.lvl-easy .lvl-bars b:nth-child(1), .lvl-medium .lvl-bars b:nth-child(-n+2), .lvl-hard .lvl-bars b { opacity: 1; }
.chip-key.chip-key-line { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); }
.chip-key-line li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--muted); }
.lesson-done { display: inline-flex; align-items: center; gap: 4px; }
.lesson-done.is-done { color: var(--dec); font-weight: 700; }
.lesson-bar { position: relative; display: inline-block; width: 44px; height: 5px; border-radius: 3px; background: var(--divider); overflow: hidden; vertical-align: middle; }
.lesson-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--link); }
[data-topic-watched] { display: inline-flex; align-items: center; gap: 6px; }
[data-topic-watched] .tw-n { font-variant-numeric: tabular-nums; }
.pp-tile { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--sp-2) var(--sp-2) 0; padding: 4px 10px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--card); font-size: var(--fs-3); font-weight: 700; color: var(--text-2); }
.pp-m { font: 700 var(--fs-1) var(--sans); color: var(--muted); }

/* ---------------------------------------------------------------- one rhythm for page heads
   every page: breadcrumbs, then (if there is one) the kicker, the title and the lede 19 px apart, at the top */
.spec-hero { align-items: start; }
.spec-hero-text { gap: var(--u); }
.learn-head { gap: var(--u); }

/* ---------------------------------------------------------------- Challenge: Questions and Leaderboard tabs */
.ch-views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-7); }
.ch-view { position: relative; display: flex; align-items: center; gap: var(--sp-4); min-height: 76px; padding: var(--sp-3) var(--sp-5); border: var(--rule) solid var(--divider); border-radius: var(--r); background: var(--card); color: var(--muted); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ch-view:hover { border-color: var(--ink); color: var(--ink); }
.ch-view[aria-selected="true"] { border-color: var(--ink); color: var(--ink); box-shadow: var(--sh-2); transform: translateY(-2px); }
.ch-view:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.ch-view-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.ch-view[aria-selected="true"] .ch-view-ic { background: var(--fill); color: var(--on-fill); }
.ch-view-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-view-title { font: 700 var(--fs-7) var(--serif); color: inherit; }
.ch-view-sub { font-size: var(--fs-2); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-view-rank { margin-left: auto; flex: none; display: grid; place-items: center; min-width: 52px; height: 52px; padding: 0 var(--sp-2); border-radius: 50%; background: var(--medal, var(--fill)); color: var(--medal-fg, #fff); font: 700 var(--fs-7) var(--serif); line-height: 1; }
.ord { white-space: nowrap; }
.ord sup { font-size: .5em; margin-left: 1px; vertical-align: .9em; line-height: 0; }
.ch-view-rank[hidden] { display: none; }

/* beside the questions: your place and the top three */
.ch-side { position: sticky; top: 92px; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); box-shadow: var(--sh-2); }
.ch-side-head { display: flex; flex-direction: column; gap: 2px; }
.ch-side-head .h3 { margin: 0; }
.ch-side-scope { font-size: var(--fs-2); color: var(--muted); }
.ch-side-me { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
.ch-side-me p { margin: 0; max-width: none; }
.ch-side-rank { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--medal, var(--fill)); color: var(--medal-fg, #fff); font: 700 var(--fs-9) var(--serif); line-height: 1; }
.ch-side-pts { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-3); }
.ch-side-pts strong { font-size: var(--fs-6); }
.ch-side-pts span { color: var(--muted); font-size: var(--fs-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-side-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ch-side-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-top: 1px solid var(--divider); font-size: var(--fs-3); }
.ch-side-row:first-child { border-top: none; }
.ch-side-row.is-me .lb-u { color: var(--link); font-weight: 700; }
.ch-side-go { width: 100%; justify-content: center; }

/* shared pieces */
.lb-medal { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--medal, var(--fill)); color: var(--medal-fg, #fff); font: 700 var(--fs-2) var(--sans); line-height: 1; box-shadow: 0 0 0 2px var(--card); }
.lb-who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--ink); text-decoration: none; }
.lb-who:hover .lb-u { text-decoration: underline; }
.lb-av { flex: none; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.lb-av svg, .lb-pod-av svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
.lb-u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lb-pts { font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-you { flex: none; padding: 1px 6px; border-radius: 99px; background: var(--link); color: var(--card); font-size: var(--fs-1); font-weight: 700; }
.lb-empty { padding: var(--sp-3) 0; color: var(--muted); font-size: var(--fs-3); list-style: none; }
.lb-who .badge-stack .badge, .lb-pod-who .badge-stack .badge { width: 17px; height: 17px; }

/* the leaderboard tab */
.lb-bar { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: end; padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-6); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.lb-field { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.lb-field-label { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.lb-pill { max-width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: var(--r); }
.lb-pill button { height: 34px; padding: 0 var(--sp-4); border-radius: var(--r-sm); white-space: nowrap; }
.lb-me { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-5) var(--sp-6); margin-bottom: var(--sp-8); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); }
.lb-me:empty { display: none; }
.lb-me:not(.is-ranked) { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
.lb-me-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.lb-me-cta p { margin: 0; max-width: 60ch; }
.lb-me-rank { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); }
.lb-me-ord { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--medal, var(--fill)); color: var(--medal-fg, #fff); font: 700 var(--fs-12) var(--serif); line-height: 1; }
.lb-me-of { font-size: var(--fs-2); color: var(--muted); }
.lb-me-main { display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; min-width: 0; }
.lb-me-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-5); margin: 0; max-width: none; font-size: var(--fs-4); }
.lb-me-line strong { font-size: var(--fs-8); font-family: var(--serif); }
.lb-me-k { font: 700 var(--fs-7) var(--serif); }
.lb-gap { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.lb-gap-bar { position: relative; height: 10px; border-radius: 5px; background: var(--divider); overflow: hidden; }
.lb-gap-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--link); }
.lb-gap-ends { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.lb-gap-text { margin: 0; max-width: 60ch; font-size: var(--fs-3); }
.lb-goals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--divider); font-size: var(--fs-2); }
.lb-goals-k { font-weight: 700; color: var(--text-2); }
.lb-goal { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--muted); }
.lb-goal .badge { width: 22px; height: 22px; filter: grayscale(1); opacity: .45; }
.lb-goal.is-won { color: var(--ink); }
.lb-goal.is-won .badge { filter: none; opacity: 1; }
.lb-goals-note { color: var(--muted); }

/* the podium: second, first, third, on steps of three heights */
.lb-podium { list-style: none; margin: 0 auto; padding: 0; max-width: 720px; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: var(--sp-3); }
.lb-pod { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 0; text-align: center; animation: pod-up .45s var(--ease, ease) both; }
.lb-pod-1 { order: 2; animation-delay: .1s; } .lb-pod-2 { order: 1; animation-delay: .2s; } .lb-pod-3 { order: 3; animation-delay: .3s; }
@keyframes pod-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lb-pod-who { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; max-width: 100%; color: var(--ink); text-decoration: none; }
a.lb-pod-who:hover .lb-pod-name { text-decoration: underline; }
.lb-pod-av { position: relative; display: block; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--medal); }
.lb-pod-1 .lb-pod-av { width: 76px; height: 76px; }
.lb-pod-av .lb-medal { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; }
.lb-pod.is-empty .lb-pod-av { background: color-mix(in srgb, var(--ink) 6%, var(--card)); box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--divider); }
.lb-pod.is-empty .lb-medal { background: var(--divider); color: var(--muted); }
.lb-pod-name { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; margin-top: var(--sp-2); font-weight: 700; font-size: var(--fs-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-pod.is-empty .lb-pod-name { color: var(--muted); font-weight: 400; }
.lb-pod-pts { font-size: var(--fs-3); color: var(--muted); }
.lb-pod-pts strong { font: 700 var(--fs-8) var(--serif); color: var(--ink); }
.lb-pod-step { display: grid; place-items: start center; width: 100%; padding-top: var(--sp-3); margin-top: var(--sp-1); border: var(--rule) solid var(--line); border-bottom: none; border-top: 5px solid var(--medal); background: color-mix(in srgb, var(--medal) 12%, var(--card)); font: 700 var(--fs-10) var(--serif); color: var(--medal); border-radius: var(--r) var(--r) 0 0; }
.lb-pod-1 .lb-pod-step { height: 108px; } .lb-pod-2 .lb-pod-step { height: 76px; } .lb-pod-3 .lb-pod-step { height: 52px; }
.lb-pod.is-empty .lb-pod-step { border-top-color: var(--divider); color: var(--muted); background: transparent; }
.lb-pod.is-me .lb-pod-name { color: var(--link); }
.lb-list { list-style: none; margin: 0 auto var(--sp-5); padding: 0; max-width: 720px; border-top: var(--rule) solid var(--line); }
.lb-row { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 64px 64px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--divider); font-size: var(--fs-4); animation: row-in .35s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 25ms); }
.lb-row-head { padding-top: var(--sp-2); padding-bottom: var(--sp-2); font-size: var(--fs-2); font-weight: 700; color: var(--muted); animation: none; }
.lb-row-head span:nth-child(n+3), .lb-solved, .lb-row .lb-pts { text-align: right; }
.lb-row-skip { color: var(--muted); animation: none; }
.lb-row.is-me { background: color-mix(in srgb, var(--link) 9%, var(--card)); box-shadow: inset 4px 0 0 var(--link); }
.lb-row.is-me .lb-u { color: var(--link); font-weight: 700; }
.lb-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.lb-solved { color: var(--text-2); font-variant-numeric: tabular-nums; }
.lb-rule { margin: 0 auto; max-width: 720px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .lb-pod, .lb-row { animation: none; } .ch-view { transition: none; } .ch-view[aria-selected="true"] { transform: none; } }
@media (max-width: 900px) {
  .ch-side { display: none; }
}
@media (max-width: 640px) {
  .ch-views { gap: var(--sp-3); margin-bottom: var(--sp-6); }
  .ch-view { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); min-height: 0; padding: var(--sp-3); }
  .ch-view-ic { width: 36px; height: 36px; }
  .ch-view-ic svg { width: 18px; height: 18px; }
  .ch-view-title { font-size: var(--fs-6); }
  .ch-view-sub { white-space: normal; }
  .ch-view-rank { position: absolute; top: -10px; right: -8px; min-width: 40px; height: 40px; font-size: var(--fs-5); box-shadow: 0 0 0 3px var(--paper); }
  .lb-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: var(--sp-4); }
  .lb-field { width: 100%; }
  .lb-more { display: none; }
  .lb-me-k { flex-basis: 100%; }
  .lb-row .badge-stack { display: none; }
  .lb-pill { display: flex; }
  .lb-pill button { flex: 1 0 auto; padding: 0 var(--sp-3); }
  .lb-me { flex-direction: column; align-items: stretch; gap: var(--sp-4); padding: var(--sp-4); }
  .lb-me.is-ranked { flex-direction: row; align-items: flex-start; }
  .lb-me-ord { width: 64px; height: 64px; font-size: var(--fs-9); }
  .lb-me-cta .btn { width: 100%; justify-content: center; }
  .lb-podium { gap: var(--sp-2); }
  .lb-pod-av { width: 48px; height: 48px; } .lb-pod-1 .lb-pod-av { width: 60px; height: 60px; }
  .lb-pod-name { font-size: var(--fs-3); }
  .lb-pod-pts strong { font-size: var(--fs-6); }
  .lb-pod-1 .lb-pod-step { height: 84px; } .lb-pod-2 .lb-pod-step { height: 60px; } .lb-pod-3 .lb-pod-step { height: 42px; }
  .lb-row { grid-template-columns: 2.2em minmax(0, 1fr) 48px 48px; gap: var(--sp-2); padding: var(--sp-2); font-size: var(--fs-3); }
}

/* ---------------------------------------------------------------- Challenge: a question, then one bar: the ladder and Answer */
.ch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding: var(--sp-3) var(--u); border-top: 1px solid var(--divider); }
.ch-bar .ch-tries { margin-right: auto; }
.ch-open { min-width: 104px; }
.ch-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-3); font-weight: 700; }
.ch-state:empty { display: none; }
.ch-state.is-good { color: var(--dec); } .ch-state.is-muted { color: var(--muted); }
.ch-q.is-open { border-color: color-mix(in srgb, var(--fill) 55%, var(--line)); box-shadow: var(--sh-2); }
.btn.is-busy { opacity: .7; cursor: progress; }
@media (hover: none) and (pointer: coarse) { .ch-q:not(.is-open):not(.is-solved):not(.is-given) .q-body { cursor: pointer; } }
@media (max-width: 640px) {
  .ch-bar { padding: var(--sp-3) var(--sp-4); }
  .ch-open { flex: 1 0 100%; }
  .ch-answer { padding: var(--sp-4); }
}


/* =====================================================================================================================
   Notebook theme. Light is an exercise book: white paper, blue squares, a red margin line, pen-blue ink and red-pen
   marking. Dark is a graphite notebook: pencil-grey paper, faint squares, warm white writing and highlighter-yellow actions.
   Paper things have an edge, not a glow; corners are only slightly rounded; nothing uses a coloured side stripe.
   ===================================================================================================================== */
:root { --hl-a: 72%; }
:root[data-theme="dark"] { --hl-a: 34%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hl-a: 34%; } }

/* highlighter on a word or two, a margin note in red pen, and a sticky note */
.hl { padding: 0 .06em; margin: 0 -.06em; background: linear-gradient(100deg, transparent .2em, color-mix(in srgb, var(--hl) var(--hl-a), transparent) .35em, color-mix(in srgb, var(--hl) var(--hl-a), transparent) calc(100% - .3em), transparent calc(100% - .15em)) 0 88% / 100% 46% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mnote { margin: 0; font: italic 500 var(--fs-4) / 1.35 var(--sans); color: var(--red); }
.mnote-open { color: var(--dec); }

/* type: headings in ink, a little more contrast between levels */
.h1 { font-weight: 600; }
.kicker { font-weight: 600; letter-spacing: 0; }
.kicker-blue { color: var(--muted); }
.footer-h { font: 700 var(--fs-5) var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.account-details-h, .prof-sub, .pdfv-kicker, .lt-kicker, .lt-h4, .f-board { text-transform: none; letter-spacing: 0; }
.shot-free, .sq-tag, .prof-bio-label { text-transform: none; letter-spacing: 0; }

/* header: the current page underlined in pen */
.site-nav a[aria-current="page"] { border-bottom-color: var(--link); }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { background: var(--link); }

/* buttons: a pen-blue (chalk-yellow) primary with a pressed edge; secondary buttons are plain paper */
.btn { background: var(--card); border-color: var(--line-strong); box-shadow: 0 1px 0 var(--edge); }
.btn:hover { transform: none; background: var(--fill-soft); border-color: var(--link); color: var(--ink); box-shadow: 0 1px 0 var(--edge); }
.btn-ink { background: var(--fill); border-color: transparent; color: var(--on-fill); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.btn-ink:hover { background: color-mix(in srgb, var(--fill) 86%, #000); border-color: transparent; color: var(--on-fill); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.btn-ink:active { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .22); transform: translateY(1px); }
a.card:hover, .ch-topic:hover, .card-link:hover { transform: none; box-shadow: var(--sh-2); border-color: var(--line-strong); }

/* no coloured side stripes: a topic's family colour is its number box; messages are tinted boxes */
.lesson-topic, .j-topic { border-left-width: var(--rule) !important; border-left-color: var(--line) !important; }
.lesson-topic.fam-pure .topic-ref-box, .j-topic.fam-pure .topic-ref-box { background: var(--pure-dark); color: #fff; }
.lesson-topic.fam-stats .topic-ref-box, .j-topic.fam-stats .topic-ref-box { background: var(--stats-dark); color: #fff; }
.lesson-topic.fam-mech .topic-ref-box, .j-topic.fam-mech .topic-ref-box { background: var(--mech-dark); color: #fff; }
.lesson-topic.fam-dec .topic-ref-box, .j-topic.fam-dec .topic-ref-box { background: var(--dec-dark); color: #fff; }
.lesson-topic.fam-opt .topic-ref-box, .j-topic.fam-opt .topic-ref-box { background: var(--opt-dark); color: #fff; }
.account-msg, .account-ok, .welcome-note, .account-need-username, .pi-free { border: 1px solid var(--line); border-radius: var(--r); }
.account-msg { border-color: color-mix(in srgb, var(--red) 40%, transparent); background: color-mix(in srgb, var(--red) 7%, var(--card)); }
.account-ok, .welcome-note, .pi-free { border-color: color-mix(in srgb, var(--dec) 40%, transparent); background: color-mix(in srgb, var(--dec) 8%, var(--card)); }
.account-need-username { border-color: color-mix(in srgb, var(--stats) 45%, transparent); background: color-mix(in srgb, var(--stats) 9%, var(--card)); }
.about-list li { border-left: none; padding-left: 0; }
.lb-row.is-me { box-shadow: none; background: color-mix(in srgb, var(--hl) calc(var(--hl-a) / 2), var(--card)); }
.working li.final { box-shadow: none; }

/* tables are ruled like the page */
.cmp td:last-child, .cmp thead th:last-child { background: color-mix(in srgb, var(--hl) calc(var(--hl-a) / 3), transparent); }
.cmp thead th { border-bottom: 2px solid var(--ink); }

/* ---------------------------------------------------------------- home: the hero, one action, counts in a sentence */
.page-home .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; padding: var(--sp-8) 0 var(--sp-4); align-items: start; }
.home-hero .h1-big { max-width: 17ch; font-size: var(--fs-14); line-height: 52px; letter-spacing: -.01em; }
.hero-text { gap: var(--sp-5); }
.hero-lede { max-width: 50ch; font-size: var(--fs-6); line-height: var(--lh-3); color: var(--text-2); }
.hero-act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero-alt { margin: 0; max-width: 44ch; font-size: var(--fs-4); color: var(--text-2); }
.hero-count { margin: var(--sp-3) 0 0; padding-top: var(--sp-4); border-top: 1px dashed var(--line); font-size: var(--fs-3); color: var(--muted); max-width: 52ch; }
.hero-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.page-home .section { margin-top: 88px; }
.page-home .home-resume { margin-top: var(--sp-9); }
.page-home .section > .h2-big, .page-home .section-intro .h2-big { font-size: var(--fs-11); line-height: var(--lh-4); }
.page-home .section-intro { gap: var(--sp-2); }

/* the features, set out like notes: the name in the margin column, then the words, then a picture of the real thing */
.home-tour { gap: 0 !important; }
.home-tour > .h2 { margin-bottom: var(--sp-6); }
.nb-row { display: grid; grid-template-columns: 168px minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-5) var(--sp-8); align-items: start; padding: var(--sp-8) 0; border-top: 1px solid var(--line); }
.nb-row:last-child { border-bottom: 1px solid var(--line); }
.nb-margin { display: flex; flex-direction: column; gap: var(--sp-1); padding-right: var(--sp-4); border-right: 1px dashed var(--line); align-self: stretch; }
.nb-title { font: 700 var(--fs-8) / var(--lh-3) var(--serif); }
.nb-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-5); line-height: var(--lh-2); color: var(--text-2); }
.nb-text p { margin: 0; max-width: 46ch; }
.nb-small { font-size: var(--fs-3); color: var(--muted); }
.nb-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-3); color: var(--muted); }
.nb-key .chip:not(:first-child) { margin-left: var(--sp-2); }
.nb-text .ladder-legend { margin: var(--sp-1) 0; }
.nb-text .how-link { margin-top: var(--sp-1); }
.nb-visual { min-width: 0; }
.nb-visual .q { margin: 0; }
.tour-sample { max-height: none; overflow: visible; }
.tour-sample .answer > summary { pointer-events: none; }
.home-prof .prof-card { margin: 0; }
.home-prof .prof-tools, .home-prof .prof-more-wrap { display: none !important; }
.home-approach .ruled { max-width: 70ch; }
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-5); line-height: var(--lh-2); color: var(--text-2); }
.ruled li:first-child { border-top: 1px solid var(--line); }
.ruled strong { color: var(--ink); }
.home-end { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); max-width: 56ch; margin: 88px 0 var(--sp-9); padding: var(--sp-6) var(--sp-7) var(--sp-7); }
.home-end p { margin: 0; color: var(--text-2); }
@media (max-width: 1000px) {
  .nb-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-7) 0; }
  .nb-margin { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); padding: 0; border-right: none; }
  .nb-visual { margin-top: var(--sp-2); }
}
@media (max-width: 860px) {
  .page-home .home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding-top: var(--sp-6); }
  .home-hero .h1-big { font-size: var(--fs-12); line-height: var(--lh-5); }
  .page-home .section { margin-top: 64px; }
}
@media (max-width: 560px) {
  .hero-act .btn { align-self: stretch; }
  .hero-lede { font-size: var(--fs-5); line-height: var(--lh-2); }
  .home-end { padding: var(--sp-5); margin-top: 64px; }
}

/* ---------------------------------------------------------------- skeletons: grey shapes where things are about to load */
:root { --sk-a: color-mix(in srgb, var(--ink) 7%, transparent); --sk-b: color-mix(in srgb, var(--ink) 13%, transparent); }
.sk { display: inline-block; vertical-align: middle; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%); background-size: 200% 100%; animation: sk-move 1.3s ease-in-out infinite; color: transparent !important; }
@keyframes sk-move { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.sk-line { display: block; width: 100%; height: 12px; margin: 4px 0; }
.sk-short { width: 40%; } .sk-mid { width: 65%; }
.sk-title { display: block; height: 20px; width: 45%; margin: 2px 0 6px; }
.sk-circle { border-radius: 50%; }
.sk-pill { width: 72px; height: 22px; border-radius: 999px; }
.sk-box { display: block; width: 100%; border-radius: var(--r); }
.sk-block { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4) var(--u); }
.sk-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; }
.sk-row .sk-line { margin: 0; }
.sk-card { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); }
.sk-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.sk-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
/* signed in, before the page has drawn your version: the parts that change become skeletons instead of the signed-out
   text (html.is-signed-in is set before the first paint; js-auth once the script has filled them in) */
html.is-signed-in:not(.js-auth) [data-auth] { color: transparent !important; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%) !important; background-size: 200% 100% !important; animation: sk-move 1.3s ease-in-out infinite; border-color: transparent !important; box-shadow: none !important; border-radius: var(--r-sm); pointer-events: none; }
html.is-signed-in:not(.js-auth) [data-auth] * { visibility: hidden; }
html.is-signed-in:not(.js-auth) .home-end { visibility: hidden; }
/* the header: your picture and name as skeletons until the script has drawn them, and the gear in its place already */
html.is-signed-in:not(.js-named) .account-btn .i-user { color: transparent; border-radius: 50%; background: var(--sk-b); }
html.is-signed-in:not(.js-named) .account-btn-text { min-width: 54px; height: 14px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%); background-size: 200% 100%; animation: sk-move 1.3s ease-in-out infinite; }
html:not(.is-signed-in) .settings-btn { display: none; }
html.is-signed-in:not(.js-auth) .home-resume[hidden] { display: flex !important; }
.lb-me.is-busy { opacity: .55; transition: opacity .2s; }
.lb-sk { list-style: none; padding: var(--sp-2) var(--sp-3); }
.lb-pod.is-sk .lb-pod-av { box-shadow: none; }
.lb-pod.is-sk .lb-pod-step { border-top-color: var(--line); background: transparent; }
.list-sk { margin-top: var(--sp-4); }
.sk-acc { display: flex; align-items: center; gap: var(--sp-5); margin-bottom: var(--sp-4); }
.j-sk { display: contents; }
.player-loading.is-sk { align-items: stretch; justify-content: flex-start; padding: 8% 10%; }
.pl-sk { --sk-a: rgba(255, 255, 255, .07); --sk-b: rgba(255, 255, 255, .15); display: flex; flex-direction: column; gap: 14px; max-width: 70%; }
.pl-sk .sk-title { height: 30px; width: 60%; }
.ch-side-top .sk-stack, .ch-side-top li[aria-hidden] { list-style: none; }
/* the Journal example beside the words: rating under each sub-topic, so titles never squeeze */
.nb-visual .demo-row { grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-2) var(--sp-3); }
.nb-visual .demo-row .j-rate { grid-column: 2; }
.home-foot { align-items: start; }
.home-end { background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
/* Learn: a contents page */
.contents { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 760px; counter-reset: ct; }
.contents li { border-top: 1px solid var(--line); }
.contents li:last-child { border-bottom: 1px solid var(--line); }
.ct-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-2); color: var(--ink); text-decoration: none; }
.ct-row:hover { background: color-mix(in srgb, var(--fill-soft) 60%, transparent); }
.ct-row:hover .ct-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.ct-head { display: flex; align-items: baseline; gap: var(--sp-3); }
.ct-title { font: 700 var(--fs-9) / var(--lh-4) var(--serif); }
.ct-title::before { counter-increment: ct; content: counter(ct) ".  "; color: var(--muted); font-weight: 400; }
.ct-dots { flex: 1; min-width: 24px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-5px); }
.ct-text { max-width: 60ch; padding-left: 1.6em; color: var(--text-2); font-size: var(--fs-4); }
@media (max-width: 560px) { .ct-head { flex-wrap: wrap; } .ct-dots { display: none; } .ct-text { padding-left: 0; } }
.gate-actions { align-items: center; }
.gate-or { font-size: var(--fs-4); color: var(--text-2); }
/* the sign-up gate is a note stuck on the page */
.gate { position: relative; background: var(--sticky); border: none !important; border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 12px 18px -14px rgba(0, 0, 0, .5); }
.gate::before { content: ""; position: absolute; left: 40px; top: -9px; width: 80px; height: 18px; background: color-mix(in srgb, var(--card) 55%, transparent); border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); transform: rotate(-3deg); }
.gate-icon { background: none; color: var(--ink); width: 40px; height: 40px; }
.q-fig.ch-fig { padding: 0; margin: var(--sp-4) 0 0; max-width: 460px; }
.q-fig.ch-fig svg { max-width: none; }
/* on a topic's own page the links and the sub-topic list sit on the page, not inside a card: no card padding */
.topic-links.topic-page-links { padding-left: 0; padding-right: 0; border-top: none; }
.points.points-static { padding-left: 0; padding-right: 0; }

/* =====================================================================================================================
   Notebook theme, round two: one set of rules for every control.
   - Hover is the subject cards' lift: the thing moves up and left a little and a coloured edge appears under it.
     Nothing darkens. The edge is pen blue on paper things, a darker shade of the button on filled buttons.
   - Segmented choices (pills, tabs in a row, keyboards, filters) share one look: a paper track, the choice in the
     action colour. Underline tabs have no rule across the page, just the pen line under the current one.
   - Ruled lines only ever appear on paper (cards), so they never cross the squares of the page.
   ===================================================================================================================== */
:root { --lift: translate(-2px, -2px); --lift-sh: 3px 3px 0 var(--link); --fill-sh: #12306F; }
:root[data-theme="dark"] { --fill-sh: #8F7A2C; }

/* buttons */
.btn, .btn-ink, a.card, .ch-topic, .card-link, .topic-links a, .choice, .ch-view, .ct-row, .lb-pill button, .ws-get, .resume-card .btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .15s, border-color .15s, color .15s; }
.btn:hover, .topic-links a:hover, .ws-get:hover { transform: var(--lift); box-shadow: var(--lift-sh); background: var(--card); border-color: var(--link); color: var(--ink); }
.btn-ink:hover { transform: var(--lift); box-shadow: 3px 3px 0 var(--fill-sh); background: var(--fill); border-color: transparent; color: var(--on-fill); }
.btn:active, .btn-ink:active, .topic-links a:active { transform: none; box-shadow: none; }
.btn-ink { box-shadow: none; }
.topic-links .tl-primary { background: var(--fill); color: var(--on-fill); border-color: transparent; }
.topic-links .tl-primary:hover { box-shadow: 3px 3px 0 var(--fill-sh); background: var(--fill); color: var(--on-fill); }
.ws-get:hover { background: var(--card); color: var(--ink); }
/* cards that are links lift the same way */
a.card:hover, .ch-topic:hover, .card-link:hover, .learn-card:hover, .choice:hover, .ch-view:not([aria-selected="true"]):hover { transform: var(--lift); box-shadow: var(--lift-sh); border-color: var(--link); }
.ch-view[aria-selected="true"] { transform: none; box-shadow: var(--lift-sh); border-color: var(--link); }
.subject-panel:hover { transform: var(--lift); box-shadow: 3px 3px 0 var(--acc); }
@media (prefers-reduced-motion: reduce) { .btn:hover, .btn-ink:hover, a.card:hover, .ch-topic:hover, .choice:hover, .subject-panel:hover, .topic-links a:hover { transform: none; } }

/* segmented choices: one look everywhere */
.pill, .pd-tabs, .pe-seg, .lb-pill, .vis-board-pill { padding: 3px; gap: 3px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); }
.pill button, .pd-tabs button, .pe-seg button, .lb-pill button, .mkb-tab { height: 34px; padding: 0 var(--sp-4); border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 700 var(--fs-3) var(--sans); cursor: pointer; }
.pill button:not([aria-pressed="true"]):hover, .pd-tabs button:not([aria-selected="true"]):hover, .pe-seg button:not([aria-checked="true"]):hover, .mkb-tab:not([aria-selected="true"]):hover { background: var(--fill-soft); color: var(--ink); }
.pill button[aria-pressed="true"], .pd-tabs button[aria-selected="true"], .pe-seg button[aria-checked="true"], .mkb-tab[aria-selected="true"], .fb-seg input:checked + span, .seg [aria-pressed="true"], .seg [aria-current="true"], .choice[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); }
.pill-wide button { height: 40px; }
.seg { border-color: var(--line-strong); }
/* underline tabs: the pen line under the current tab, no rule across the page */
.tabs, .subject-tabs, .cbar { border-bottom: none !important; }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { height: 3px; border-radius: 2px; background: var(--link); }
.subject-tabs button { border-bottom-width: 3px; border-radius: 0; }
.subject-tabs [aria-selected="true"] { border-bottom-color: var(--link); color: var(--ink); }
.subject-tabs button:not([aria-selected="true"]):hover { color: var(--ink); border-bottom-color: color-mix(in srgb, var(--link) 35%, transparent); }

/* lines only on paper */
.hero-count { border-top: none; padding-top: 0; }
.cmp-card { padding: 0; }
.cmp-card .cmp th[scope="row"] { padding-left: var(--sp-5); }
.ruled.card { padding: 0 var(--sp-6); }
.ruled.card li:first-child { border-top: none; }
.ruled.card li:last-child { border-bottom: none; }
.contents.card { padding: 0 var(--sp-5); }
.contents.card li:first-child { border-top: none; }
.contents.card li:last-child { border-bottom: none; }
.lb-list { background: var(--card); border: 1px solid var(--line) !important; border-radius: var(--r); overflow: hidden; }
.lb-row:last-child { border-bottom: none; }
.lb-rule { margin-top: var(--sp-4); }
/* the features on the home page: each one an index card, the name in a margin ruled off in red */
.home-tour { gap: var(--sp-6) !important; }
.home-tour > .h2 { margin-bottom: 0; }
.nb-row { padding: var(--sp-7) var(--sp-7) var(--sp-7) 0; border: 1px solid var(--line) !important; border-radius: var(--r); background: var(--card); box-shadow: var(--sh-1); }
.nb-row:last-child { border-bottom: 1px solid var(--line) !important; }
.nb-margin { padding: 0 var(--sp-5) 0 var(--sp-6); border-right: 2px solid var(--margin); }
@media (max-width: 1000px) {
  .nb-row { padding: var(--sp-5); }
  .nb-margin { padding: 0 0 var(--sp-3); border-right: none; border-bottom: 2px solid var(--margin); }
}
/* the extra details beside each feature */
.nb-shot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0; }
.nb-cap { flex-basis: 100%; font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.nb-toggle { display: inline-flex; padding: 3px; gap: 3px; border: 1px solid var(--line-strong); border-radius: var(--r); font: 700 var(--fs-2) var(--sans); }
.nb-toggle > * { padding: 4px 10px; border-radius: var(--r-sm); color: var(--text-2); }
.nb-toggle b { background: var(--fill); color: var(--on-fill); }
.nb-parts { display: inline-flex; gap: 4px; }
.nb-parts i { width: 28px; height: 4px; border-radius: 2px; background: var(--line); }
.nb-parts .is-done { background: var(--link); } .nb-parts .is-now { background: var(--ink); }
.nb-file { display: flex; align-items: center; gap: var(--sp-3); width: 100%; max-width: 360px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); font-size: var(--fs-3); }
.nb-file b { padding: 2px 6px; border-radius: 3px; background: var(--red); color: #fff; font-size: var(--fs-1); }
.nb-file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-weight: 700; }
.nb-file em { font-style: normal; color: var(--muted); font-size: var(--fs-2); }
.nb-levels span { display: inline-flex; align-items: center; gap: 2px; padding-right: var(--sp-2); font-size: var(--fs-2); font-weight: 700; color: var(--text-2); }
.nb-levels i { width: 10px; height: 10px; border-radius: 2px; }
.nb-levels span:last-child { padding-right: 0; }
.nb-levels .lv-1 i { background: var(--c1, var(--red)); } .nb-levels .lv-2 i { background: var(--c2, var(--stats)); } .nb-levels .lv-3 i { background: var(--c3, var(--dec)); } .nb-levels .lv-4 i { background: var(--c4, #2E7D4F); }
.nb-levels span i:last-of-type { margin-right: 4px; }
.nb-prof-bits { row-gap: var(--sp-1); }
.nb-prof-bits .nb-cap:not(:first-child) { margin-top: var(--sp-2); }
.nb-avs { display: flex; gap: 6px; }
.nb-av { display: block; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; }
.nb-av svg { display: block; width: 100%; height: 100%; }
.nb-av[data-shape="rounded"] { border-radius: 10px; } .nb-av[data-shape="square"] { border-radius: 3px; }
.nb-bns { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 360px; }
.nb-bn { display: block; height: 30px; border-radius: 4px; --bn-bg: color-mix(in srgb, var(--acc) 22%, #fff); --bn-line: color-mix(in srgb, var(--acc) 62%, #fff); }
:root[data-theme="dark"] .nb-bn { --bn-bg: color-mix(in srgb, var(--acc) 40%, #1F2125); --bn-line: color-mix(in srgb, var(--acc) 50%, #ECEAE4); }
.nb-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.nb-badges .badge { width: 28px; height: 28px; }

/* worked solutions in the notebook style: faint ruled rows, marks in a margin ruled off in red */
.q { box-shadow: var(--sh-1); }
.q-title::before { background: var(--fill-soft); color: var(--link); }
.lvl { border-width: 1px; border-radius: var(--r-sm); padding: 1px var(--sp-2); }
.answer, .answer[open] .ans-body, .ans-part + .ans-part, .chip-key, .ans-cols, .working li, .ans-q, .ch-bar, .ch-answer, .ch-solution, .ch-final { border-color: var(--divider) !important; }
.answer[open] .ans-body { border-top-width: 1px; }
.ans-body::after, .worked .working::after { width: 2px; background: var(--margin); }
.ans-q { background: color-mix(in srgb, var(--fill-soft) 55%, var(--card)); }
.ans-body .step::before { border: 1px solid var(--line-strong); color: var(--text-2); background: var(--card); }
.working li.final { background: color-mix(in srgb, var(--hl) calc(var(--hl-a) / 3), var(--card)); }
.answer > summary { color: var(--link); }
.chip { border-width: 1px; }

/* skeletons the size of the real thing */
.account-loading { width: 100%; }
.sk-prof { display: flex; flex-direction: column; gap: var(--sp-6); width: 100%; }
.sk-prof-card { padding: 0; overflow: hidden; }
.sk-prof-banner { display: block; height: calc(var(--u) * 6); border-radius: 0; }
.sk-prof-head { display: flex; align-items: flex-end; gap: var(--sp-5); padding: 0 var(--sp-6); margin-top: -44px; }
.sk-prof-av { display: block; flex: none; width: 104px; height: 104px; border-radius: 50%; box-shadow: 0 0 0 4px var(--card); background-color: var(--card); }
.sk-prof-head .sk-grow { padding-bottom: var(--sp-2); }
.sk-prof-about { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.sk-prof-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.sk-prof-pills .sk-pill { width: 104px; height: 32px; }
.sk-prof-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-6); }
.sk-prof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.sk-prof-stats .sk-box { height: 72px; }
@media (max-width: 800px) { .sk-prof-body { grid-template-columns: minmax(0, 1fr); } .sk-prof-av { width: 84px; height: 84px; } }
/* a profile card that is still loading: the same shapes, shimmering */
.prof-card.is-loading .prof-banner { background: var(--sk-a) !important; }
.prof-card.is-loading .prof-banner::before { display: none; }
.prof-card.is-loading .prof-avatar { background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%); background-size: 200% 100%; animation: sk-move 1.3s ease-in-out infinite; }
.prof-card.is-loading .ps { color: transparent; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%); background-size: 200% 100%; animation: sk-move 1.3s ease-in-out infinite; border-color: transparent; min-width: 104px; }
.prof-card.is-loading .ps * { visibility: hidden; }

/* profile: the counts on one line, level with the course chips and just above them */
.prof-about .prof-stats { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0 !important; overflow-x: auto; scrollbar-width: none; }
.prof-about .prof-stats::-webkit-scrollbar { display: none; }
.prof-about .prof-stats .ps { flex: none; }
.prof-card[data-layout="centre"] .prof-about .prof-stats { justify-content: center; }
.prof-about { gap: 10px; }
/* the lessons (the animated stage and the text version) on the same exercise-book paper, with its red margin */
.stage, .player-text { --s-ink: #1A2131; --s-paper: #FCFCFA; --s-red: #C0342B; --s-muted: #5B6578; --s-green: #1F7A4D; --s-line: #DDE6F1; --s-card: #FFFFFF; --s-on-ink: #FFFFFF; --s-blue: #1D4FB8; --s-sh: rgba(29, 79, 184, .14); }
:root[data-theme="dark"] .stage, :root[data-theme="dark"] .player-text { --s-ink: #ECEAE4; --s-paper: #17181B; --s-red: #F0948A; --s-muted: #9B9992; --s-green: #86C9B8; --s-line: #2A2C31; --s-card: #1F2125; --s-on-ink: #17181B; --s-blue: #9EC2F7; --s-sh: rgba(158, 194, 247, .18); }
.stage::before { opacity: 1; }
.stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: 36px; width: 2px; background: #EAA6A1; opacity: .9; pointer-events: none; }
:root[data-theme="dark"] .stage::after { background: #5E3B3A; }
.st-head { border-bottom-width: 1.5px; }
.player-screen { background: #FCFCFA; }
:root[data-theme="dark"] .player-screen { background: #17181B; }
.player.is-full .player-screen { background: #000; }
/* small fixes */
.vis-chapters li { white-space: nowrap; }
.ruled.card li { max-width: none; }
.home-approach .ruled.card { max-width: 760px; }
.nb-levels { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--sp-2) var(--sp-6); }
/* headings on the page take whole squares */
.home-hero .h1-big { line-height: 57px; }
.page-home .section > .h2-big, .page-home .section-intro .h2-big, .h2-big, .h1 { line-height: 38px; }
.h2 { line-height: 38px; }
@media (max-width: 860px) { .home-hero .h1-big { line-height: 38px; } }
.sk-block { height: auto; }
.prof-card .prof-handle-line .sk-line { width: 160px; }


/* ---------------------------------------------------------------- profile: the card as a page from your notebook */
/* paper: plain, squared, lined or dotted, drawn faintly in the page colour behind everything on the card */
/* the frame round the picture: a ring in your colour, a sticker (white edge, slight tilt) or two strips of tape */
.prof-card[data-frame="ring"] .prof-avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--acc-ui, var(--acc)); }
.prof-card[data-frame="sticker"] .prof-avatar { box-shadow: 0 0 0 5px #fff, 0 2px 0 5px rgba(0, 0, 0, .12); transform: rotate(-4deg); }
.prof-card[data-frame="tape"] .prof-avatar::before, .prof-card[data-frame="tape"] .prof-avatar::after { content: ""; position: absolute; width: 46%; height: 16px; top: -7px; background: color-mix(in srgb, var(--hl) 70%, #fff); opacity: .85; box-shadow: 0 1px 1px rgba(0, 0, 0, .12); pointer-events: none; }
.prof-card[data-frame="tape"] .prof-avatar::before { left: -12%; transform: rotate(-32deg); }
.prof-card[data-frame="tape"] .prof-avatar::after { right: -12%; transform: rotate(32deg); }
.prof-card[data-frame="tape"] .prof-avatar { position: relative; }
.pe-framepv { position: relative; overflow: visible !important; }
.pe-framepv[data-frame="ring"] .av-svg { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--acc); }
.pe-framepv[data-frame="sticker"] .av-svg { box-shadow: 0 0 0 3px #fff, 0 1px 0 3px rgba(0, 0, 0, .12); transform: rotate(-4deg); }
.pe-framepv[data-frame="tape"]::before, .pe-framepv[data-frame="tape"]::after { content: ""; position: absolute; width: 50%; height: 8px; top: -3px; background: color-mix(in srgb, var(--hl) 70%, #fff); opacity: .9; }
.pe-framepv[data-frame="tape"]::before { left: -12%; transform: rotate(-32deg); } .pe-framepv[data-frame="tape"]::after { right: -12%; transform: rotate(32deg); }
.pe-opts-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .pe-opts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the lesson's title screen has no margin or squares: it is the cover, not a page */
.stage:has(.st-brandscreen)::after, .stage:has(.st-brandscreen)::before { display: none; }
.cmp-some { font-size: var(--fs-4); }

/* the date at the top of the page, underlined in red pen */
.nb-date { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); font: italic 500 var(--fs-4) / 19px var(--sans); color: var(--red); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.nb-date:empty { visibility: hidden; min-height: 19px; }
.nb-date-sep { color: var(--muted); }
.pe-opt-group { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* ======================================================================================
   Round thirteen: the page column on the grid, the profile tightened, the badges and the
   tape frame
   ====================================================================================== */
/* the page column starts on the red margin and its width is a whole number of squares,
   so the left and right edges of every card fall on grid lines */
.page-narrow { max-width: 874px; }
.page-profile, .page-narrow:has(> .account > .profile:not([hidden])), .page-narrow:has(> .account > .profile.is-editing:not([hidden])) { max-width: var(--maxw); }
@media (min-width: 1100px) {
  .profile.is-editing { grid-template-columns: minmax(0, 1fr) 532px; column-gap: var(--u); }
}
.page-account .page:has(> .account > .account-card:not([hidden])) > .crumbs { margin-left: 0; }
.lb-podium, .lb-list, .lb-rule { max-width: 722px; }
.prof-main, .prof-side { gap: var(--u); }
/* the profile card: picture, name and text on grid lines, and less space under the name */
.prof-card { --av: 114px; }
.prof-head { column-gap: var(--u); padding: 0 var(--u) 10px; }
.prof-about { padding: 0 var(--u) var(--u); gap: 10px; }
.prof-who { gap: 2px; padding-top: 8px; }
@media (max-width: 700px) {
  .prof-card { --av: 84px; }
  .prof-head { padding: 0 16px 8px; column-gap: 12px; }
  .prof-about { padding: 0 16px 16px; }
}
/* the name row: name, badges the height of the capitals, then the pronouns after a dot */
.prof-name { align-items: center; column-gap: 10px; row-gap: 4px; }
.prof-name .badge-stack { gap: 3px; align-items: center; }
.prof-name .badge-stack .badge { width: 22px; height: 22px; }
@media (max-width: 700px) { .prof-name .badge-stack .badge { width: 19px; height: 19px; } }
.prof-name .badge-more { font-size: 12px; margin-left: 2px; }
.prof-pron { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--fs-4) / 1 var(--sans); color: var(--muted); white-space: nowrap; }
.prof-pron .prof-dot { color: var(--muted); font-weight: 700; }
.prof-card[data-layout="centre"] .prof-name { justify-content: center; }
.badge svg { overflow: visible; }
.badge-stack .badge:hover { transform: translateY(-1px) scale(1.08); }
/* the tape frame keeps the picture's shape: two strips over the corners of a square or rounded
   picture, or over the edge of a round one */
.prof-card[data-frame="tape"] .prof-avatar { overflow: visible; }
.prof-card[data-frame="tape"] .prof-avatar .av-svg { border-radius: inherit; }
.prof-card[data-frame="tape"] .prof-avatar:not([data-shape="rounded"]):not([data-shape="square"]) .av-svg { border-radius: 50%; }
.prof-card[data-frame="tape"] .prof-avatar:not([data-shape="rounded"]):not([data-shape="square"])::before { left: -4%; top: 2%; }
.prof-card[data-frame="tape"] .prof-avatar:not([data-shape="rounded"]):not([data-shape="square"])::after { right: -4%; top: 2%; }
.pe-framepv[data-frame="tape"] { overflow: visible; }
.pe-framepv[data-frame="tape"][data-shape="circle"]::before { left: -2%; top: 3%; }
.pe-framepv[data-frame="tape"][data-shape="circle"]::after { right: -2%; top: 3%; }
/* name colour: the ink swatch follows light and dark mode */
[data-pe-namec] .swatch[data-namec-set="ink"] { background: var(--ink); }

/* ======================================================================================
   Round fourteen: plain paper, no grid and no margin. The ruler under the header is the
   one mark of the theme: millimetre ticks with a longer tick every centimetre.
   ====================================================================================== */
body { background-image: none; background-color: var(--paper); }
body::before { display: none; }
:root { --tick: color-mix(in srgb, var(--ink) 22%, transparent); --tick-long: color-mix(in srgb, var(--ink) 40%, transparent); }
.site-header { border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--tick-long) 0 1px, transparent 1px 50px) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px 10px) 0 0 / 100% 3px no-repeat; }
html.mkb-docked .site-header::after { display: none; }
@media print { .site-header::after { display: none; } }
/* the old exercise-book margin lines inside cards become quiet rules */
.nb-margin { border-right-color: var(--divider); }
@media (max-width: 760px) { .nb-margin { border-bottom-color: var(--divider); } }
.ans-body::after, .worked .working::after { background: var(--divider); }
/* the lesson screen and the home page's lesson sample are plain paper too */
.stage::before, .stage::after { display: none; }
.vis-screen { background-image: none; }
/* the Learn page: three ways side by side, then when to use each */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.ways > li { display: flex; }
.way { --w: var(--link); --w-bg: var(--fill-soft); flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s; }
.way-practice { --w: var(--dec); --w-bg: color-mix(in srgb, var(--dec) 13%, var(--card)); }
.way-worksheets { --w: var(--stats-dark); --w-bg: color-mix(in srgb, var(--stats) 17%, var(--card)); }
.way:hover { transform: var(--lift); box-shadow: 3px 3px 0 var(--w); border-color: var(--w); }
.way:focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
.way-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--w-bg); color: var(--w); margin-bottom: var(--sp-2); }
.way-title { font: 700 var(--fs-10) / 1.15 var(--serif); }
.way-text { font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); flex: 1; }
.way-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: var(--sp-3); border-top: 1px solid var(--divider); font-size: var(--fs-3); color: var(--muted); }
.way-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.way-access { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.way-access.is-open { color: var(--dec-dark); }
.way-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-4); color: var(--w); }
.way-go svg { transition: transform .15s var(--ease); }
.way:hover .way-go svg { transform: translateX(3px); }
:root[data-theme="dark"] .way-worksheets { --w: var(--stats); }
:root[data-theme="dark"] .way-access.is-open { color: var(--dec); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .way-worksheets { --w: var(--stats); } :root:not([data-theme="light"]) .way-access.is-open { color: var(--dec); } }
.when { margin-top: var(--sp-6); padding: var(--sp-6); }
.when-list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.when-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-4); line-height: 1.55; color: var(--text-2); }
.when-list strong { color: var(--ink); }
.when-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); }
.when-icon svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
  .ways, .when-list { grid-template-columns: minmax(0, 1fr); }
  .way { padding: var(--sp-5); }
}
/* the search box: even space round the Close button, which is a small key-like button */
.search-bar { padding: 10px 12px 10px 18px; gap: 12px; }
.search-bar > svg { flex: none; color: var(--muted); }
.search-bar .text-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font: 700 var(--fs-2) var(--sans); color: var(--text-2); text-decoration: none; cursor: pointer; }
.search-bar .text-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.search-bar .text-btn kbd { font: 400 var(--fs-1) var(--sans); color: var(--muted); }
.search-scope { padding: 10px 18px 0; }
.search-results { padding: 6px 18px 16px; }
@media (max-width: 600px) { .search-bar .text-btn kbd { display: none; } }
/* the subject pictures lose their squared backgrounds too */
.ill .ill-grid { display: none; }
/* loading placeholders made from the real markup: the text (skt) and boxes (skb) are hidden under a shimmer */
.skt { color: transparent !important; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%); background-size: 200% 100%; animation: sk-move 1.3s ease-in-out infinite; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; user-select: none; }
.skt * { visibility: hidden; }
.skb { color: transparent !important; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%) !important; background-size: 200% 100% !important; animation: sk-move 1.3s ease-in-out infinite; border-color: transparent !important; box-shadow: none !important; }
.skb * { visibility: hidden; }
.sk-wrap, .sk-wrap * { pointer-events: none; cursor: default; }
.sk-topic, .sk-q { box-shadow: none !important; transform: none !important; }
.sk-topic > summary::after, .sk-topic > summary::-webkit-details-marker { visibility: hidden; }
.sk-tabph { pointer-events: none; }
.sk-q .q-head .lvl { border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { .skt, .skb { animation: none; } }
/* the account page is as wide while it loads as once it has loaded */
.page-narrow:has(> .account > .account-loading:not([hidden]) .sk-prof) { max-width: var(--maxw); }
.sk-prof { display: flex; flex-direction: column; gap: var(--sp-5); }
.sk-prof .prof-banner { height: var(--bh); border-radius: 0; }
.sk-prof .prof-avatar { border: 4px solid var(--card) !important; border-radius: 50%; }
.sk-prof .prof-stats .ps { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; }
.sk-prof .prof-chip { border-radius: 999px; }
.sk-prof .prof-banner::before, .sk-prof .prof-banner::after { display: none; }
.sk-prof .prof-banner { background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%) !important; background-size: 200% 100% !important; }
/* signed in, the hero's button and line change words once the account loads; the placeholders take the new words' size */
html.is-signed-in:not(.js-auth) [data-hero-primary] { font-size: 0; }
html.is-signed-in:not(.js-auth) [data-hero-primary]::before { content: "Explore topics"; font-size: var(--fs-5); visibility: visible; }
html.is-signed-in:not(.js-auth) [data-hero-free] { font-size: 0; max-width: 420px; line-height: 0; }
html.is-signed-in:not(.js-auth) [data-hero-free]::before { line-height: var(--lh-2); display: inline; }
html.is-signed-in:not(.js-auth) [data-hero-free]::before { content: "Showing Further Maths (Edexcel) and Physics (AQA), Year 13."; font-size: var(--fs-4); visibility: visible; color: transparent; }
.cta-band::before { display: none; }
.learn-head .tabs a { display: inline-flex; align-items: center; gap: 7px; }
.learn-head .tabs a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.learn-head .tabs a[aria-current="page"] svg { opacity: 1; color: var(--link); }
.vis-screen { box-shadow: inset 0 0 0 1px var(--divider); }

/* ======================================================================================
   Round fifteen: no ruler. The page is plain paper with a faint grain, and very faint
   pencil sketches of the subject (a sine wave, a parabola, the unit circle, an integral)
   repeated across it. Cards stay clean white on top.
   ====================================================================================== */
.site-header::after { display: none; }
.site-header { border-bottom: 1px solid var(--line); }
body { background-color: var(--paper); background-image: none; }
@media (max-width: 700px) { body { background-size: 520px 520px, 220px 220px; } }
@media print { body { background-image: none; } }
/* dark mode is graphite and yellow only: links, pen ink, focus rings and hover shadows are a warm yellow, not blue */
:root[data-theme="dark"] { --link: #E8C766; --pen: #E8C766; --pl-blue: #E8C766; --lift-sh: 3px 3px 0 #8F7A2C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --link: #E8C766; --pen: #E8C766; --pl-blue: #E8C766; --lift-sh: 3px 3px 0 #8F7A2C; } }
:root[data-theme="dark"] .way-worksheets { --w: var(--opt); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .way-worksheets { --w: var(--opt); } }
/* ======================================================================================
   Round fifteen, colour: one scheme in two lights. Light is ink on warm paper with a yellow
   highlighter; dark is graphite with the same yellow. No bright blue in either. Hovering
   lifts a thing onto a yellow shadow in both.
   ====================================================================================== */
:root:not([data-theme="dark"]) {
  --ink: #1A2131; --text-2: #3B4150; --muted: #5E6270;
  --link: #22396B; --pen: #22396B;
  --fill: #1A2131; --on-fill: #FFFFFF; --fill-soft: #FFF3C4; --fill-sh: #E3B53B;
  --band: #1A2131; --on-band: #FFFFFF;
  --line: #DCD7CB; --divider: #E9E5DA; --edge: #D8D2C4; --dashed: #ABA596; --line-strong: #8C8778;
  --lift-sh: 3px 3px 0 #E3B53B;
}
:root[data-theme="dark"] { --lift-sh: 3px 3px 0 #8F7A2C; }
.btn:hover, .topic-links a:hover, .ws-get:hover { border-color: var(--ink); }
:root[data-theme="dark"] :is(.btn, .topic-links a, .ws-get):hover { border-color: var(--link); }
a.card:hover, .ch-topic:hover, .card-link:hover, .learn-card:hover, .choice:hover, .ch-view:not([aria-selected="true"]):hover { border-color: var(--ink); }
:root[data-theme="dark"] :is(a.card, .ch-topic, .card-link, .learn-card, .choice, .ch-view:not([aria-selected="true"])):hover { border-color: var(--link); }
.ch-view[aria-selected="true"] { border-color: var(--ink); }
:root[data-theme="dark"] .ch-view[aria-selected="true"] { border-color: var(--link); }
/* the Learn cards: lessons in ink, practice in teal, worksheets in ochre, all lifting the same way */
.way-lessons { --w: var(--ink); --w-bg: #ECEAE3; }
:root[data-theme="dark"] .way-lessons { --w: var(--link); --w-bg: #2A2924; }
.pp-verified { color: var(--ink); }
/* dark mode: Further Maths' colour is a cool grey rather than blue, so dark mode stays graphite and yellow */
:root[data-theme="dark"] { --acc-fm: #B7BFCC; --acc-fm-bg: #24272D; --pure: #AEB7C6; --pure-dark: #4A5160; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --acc-fm: #B7BFCC; --acc-fm-bg: #24272D; --pure: #AEB7C6; --pure-dark: #4A5160; } }
/* Year markers. With no year chosen, the Y12 and Y13 tags show as before. A Year 13 student sees no year markers;
   a Year 12 student sees "Not needed for Year 12" on Year 13 content, and nothing on the rest */
.nn12 { display: none; }
html.year-12 .nn12 { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 7px; border: 1px dashed var(--dashed); border-radius: 999px; font: 700 11px / 16px var(--sans); color: var(--muted); white-space: nowrap; vertical-align: 2px; letter-spacing: 0; text-transform: none; }
.ch-topic-meta .nn12 { margin: 0 8px 0 0; vertical-align: 0; }
html.year-13 .yr, html.year-13 .yr-note, html.year-12 .yr-note { display: none; }
html.year-12 .yr.y12, html.year-12 .yr.y1213 { display: none; }
html.year-12 .yr.y13 { font-size: 0; gap: 4px; padding: 1px 7px; border: 1px dashed var(--dashed); border-radius: 999px; background: transparent; color: var(--muted); }
html.year-12 .yr.y13::before { content: ""; width: 12px; height: 12px; border: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.5l4 3.5-4 3.5zM6 2.5l4 3.5-4 3.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.5l4 3.5-4 3.5zM6 2.5l4 3.5-4 3.5z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.year-12 .yr.y13::after { content: "Not needed for Year 12"; font: 700 11px / 16px var(--sans); }
/* practice questions: the same marker beside a Year 13 question's details */
html.year-12 .q[data-y="13"] .q-sub::after { content: "Not needed for Year 12"; display: inline-flex; margin-left: 8px; padding: 1px 7px 1px 22px; border: 1px dashed var(--dashed); border-radius: 999px; font: 700 11px / 16px var(--sans); color: var(--muted); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.5l4 3.5-4 3.5zM6 2.5l4 3.5-4 3.5z' fill='%238C8778'/%3E%3C/svg%3E") 7px center / 11px no-repeat; }
.yr-only12 { display: none; } html.year-12 .yr.yr-only12 { display: inline-flex; }
/* the header account menu */
.header-tools { position: relative; align-items: center; }
.acc-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 230px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 14px 34px var(--raise), 0 2px 0 var(--edge); display: flex; flex-direction: column; gap: 2px; animation: acc-menu-in .14s var(--ease); }
.acc-menu[hidden] { display: none; }
@keyframes acc-menu-in { from { opacity: 0; transform: translateY(-4px); } }
.acc-menu-who { margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--divider); display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-4); line-height: 1.3; }
.acc-menu-who span { font-size: var(--fs-2); color: var(--muted); }
.acc-menu a, .acc-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: none; border-radius: var(--r); background: none; font: 700 var(--fs-3) var(--sans); color: var(--text-2); text-decoration: none; text-align: left; cursor: pointer; }
.acc-menu a:hover, .acc-menu button:hover, .acc-menu :focus-visible { background: var(--fill-soft); color: var(--ink); outline: none; }
.acc-menu svg { flex: none; color: var(--muted); }
.acc-menu .acc-menu-out { margin-top: 4px; border-top: 1px solid var(--divider); border-radius: 0 0 var(--r) var(--r); color: var(--red); }
.acc-menu .acc-menu-out svg { color: var(--red); }
:root[data-theme="dark"] .acc-menu a:hover, :root[data-theme="dark"] .acc-menu button:hover { background: #2A2924; }
@media (max-width: 760px) { .acc-menu { left: auto; right: 0; } }
/* the first name, when shown, sits under the username */
.prof-first { font-weight: 700; color: var(--text-2); font-size: var(--fs-4); }
/* the profile placeholder: the picture sits on top of the banner, on a solid backing, as the real one does */
.sk-prof .prof-avatar, .prof-card.is-loading .prof-avatar { position: relative; z-index: 3; background: linear-gradient(90deg, var(--sk-a) 25%, var(--sk-b) 50%, var(--sk-a) 75%), var(--card) !important; background-size: 200% 100%, auto !important; box-shadow: 0 0 0 1.5px var(--line) !important; }
.sk-prof .prof-head { position: relative; z-index: 2; }
.sk-set { display: flex; flex-direction: column; gap: var(--sp-5); }
/* ======================================================================================
   Round sixteen
   ====================================================================================== */
/* light mode: a neutral off-white page with no grain, so the page and the off-white inside cards are the same colour */
:root:not([data-theme="dark"]) { --paper: #F6F6F3; }
@media (max-width: 700px) { :root:not([data-theme="dark"]) body { background-size: 520px 520px; } }
/* the header's icon buttons: a soft round wash on hover, the same in both themes */
.header-tools .icon-btn, .header-tools .account-btn { border-radius: 10px; transition: background .18s var(--ease), color .18s, transform .18s var(--ease); }
.header-tools .icon-btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.header-tools .account-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.header-tools .icon-btn:active { transform: scale(.94); }
.header-tools .icon-btn[aria-current="page"] { background: var(--ink); color: var(--paper); }
/* the footer: clearer headings with a short yellow underline */
.footer-h { position: relative; margin: 0 0 var(--sp-4); padding-bottom: 8px; font: 700 var(--fs-7) / 1.2 var(--serif); color: var(--ink); }
.footer-h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--fill-sh); }
:root[data-theme="dark"] .footer-h::after { background: var(--fill); }
/* no breadcrumbs: each page starts with its heading, a clear gap under the header */
.page { padding-top: 52px; }
@media (max-width: 700px) { .page { padding-top: 28px; } }
/* one rhythm for every page: heading, 12px, the lede, 32px, the content */
.page-head { gap: var(--sp-3); padding-bottom: var(--sp-7); margin-bottom: 0; }
.page-head > * { margin-top: 0; margin-bottom: 0; }
.page-head + .course-line, .page-head + [data-gate-slot] + .course-line { margin-top: 0; }
.learn-head { margin-bottom: var(--sp-6); }
/* narrower pages start at the same left edge as every other page */
.wrap.page-narrow { margin-left: max(0px, calc((100% - var(--maxw)) / 2)); margin-right: auto; }
/* Settings: a list of sections on the left on a computer, a row of tabs along the top on a phone */
.page-narrow:has(> .account > .settings:not([hidden])), .page-narrow:has(> .account > .account-loading:not([hidden]) .sk-set) { max-width: 1040px; }
.settings { display: flex; flex-direction: column; gap: 0; }
.settings-head { margin-bottom: var(--sp-7); }
.settings-head .lede { margin: var(--sp-3) 0 0; }
.set-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.set-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.set-main > .set-group { scroll-margin-top: calc(var(--header-h, 76px) + 20px); }
.set-nav { position: sticky; top: calc(var(--header-h, 76px) + 20px); display: flex; flex-direction: column; gap: 2px; }
.set-nav a, .set-nav-ph { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: var(--r); color: var(--text-2); font: 700 var(--fs-4) var(--sans); text-decoration: none; transition: background .18s var(--ease), color .18s; }
.set-nav a svg { flex: none; color: var(--muted); transition: color .18s; }
.set-nav a:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.set-nav a.is-on { background: var(--card); color: var(--ink); box-shadow: inset 3px 0 0 var(--fill-sh), 0 0 0 1px var(--line); }
.set-nav a.is-on svg { color: var(--ink); }
:root[data-theme="dark"] .set-nav a.is-on { box-shadow: inset 3px 0 0 var(--fill), 0 0 0 1px var(--line); }
.set-group { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); }
.set-group > .account-details-h { margin: 0; font: 700 var(--fs-7) / 1.2 var(--serif); color: var(--ink); }
.set-group > p { margin: 0; }
.set-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.set-head-row .account-details-h { margin: 0; font: 700 var(--fs-7) / 1.2 var(--serif); }
.set-line { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-4) 0; border-top: 1px solid var(--divider); }
.set-line > span { display: flex; flex-direction: column; gap: 2px; }
.set-seg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.set-seg button { height: 34px; padding: 0 14px; border: none; border-radius: 8px; background: none; font: 700 var(--fs-3) var(--sans); color: var(--muted); cursor: pointer; transition: background .2s var(--ease), color .2s, box-shadow .2s; }
.set-seg button:hover { color: var(--ink); }
.set-seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); }
.set-saved { min-height: 18px; color: var(--muted); }
.tk-empty { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--dashed); border-radius: var(--r-lg); }
.tk-empty p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.tk-empty-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); flex: none; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .set-nav { top: var(--header-h, 64px); z-index: 5; flex-direction: row; gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--divider); }
  .set-nav::-webkit-scrollbar { display: none; }
  .set-nav a, .set-nav-ph { flex: none; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: var(--fs-3); }
  .set-nav a.is-on { background: var(--ink); color: var(--paper); box-shadow: none; border-color: var(--ink); }
  .set-nav a.is-on svg { color: var(--paper); }
  .set-line { flex-direction: column; align-items: stretch; }
  .set-seg { align-self: flex-start; }
  .set-group { padding: var(--sp-5); }
}
/* device settings: reduced animation and larger text */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
html.text-lg body { zoom: 1.1; }
.set-head-row .account-details-h, .settings .account-details-h { color: var(--ink); }
/* ======================================================================================
   Profile, round sixteen: a cleaner card in the spirit of Discord and Roblox profiles.
   The picture sits in a cut-out ring at the foot of the banner; the name line carries the
   badges in a small tray; the counts are big numbers with their labels underneath; "About me"
   and the course chips follow with even spacing.
   ====================================================================================== */
.prof-card { --bh: 128px; border-radius: 14px; }
.prof-card[data-bsize="short"] { --bh: 96px; }
.prof-card[data-bsize="tall"] { --bh: 176px; }
.prof-card .prof-banner { border-bottom: none; }
.prof-card .prof-head { grid-template-columns: var(--av) minmax(0, 1fr) auto; column-gap: 18px; padding: 0 24px 0; }
.prof-card .prof-avatar { border: 6px solid var(--card) !important; box-shadow: none !important; margin-top: calc(var(--av) / -2); }
.prof-card[data-frame="ring"] .prof-avatar { box-shadow: 0 0 0 3px var(--acc-ui, var(--acc)) !important; }
.prof-card .prof-who { padding-top: 12px; gap: 4px; }
.prof-card .prof-tools { padding-top: 14px; }
.prof-card .prof-name { font-size: var(--fs-11); line-height: 1.15; column-gap: 10px; }
.prof-name .badge-stack { padding: 4px 6px; gap: 4px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px var(--divider); }
.prof-name .badge-stack .badge { width: 20px; height: 20px; }
.prof-card .prof-handle-line { font-size: var(--fs-4); line-height: 20px; color: var(--text-2); }
.prof-first { font-weight: 400; font-size: var(--fs-4); color: var(--text-2); }
.prof-card .prof-about { gap: 0; padding: 18px 24px 22px; }
/* counts: number over label, separated by thin rules */
.prof-about .prof-stats { display: flex; gap: 0; padding: 0 0 18px; margin: 0 !important; border: none; overflow: visible; }
.prof-about .prof-stats .ps { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: auto; min-width: 0; padding: 0 22px; border: none; border-left: 1px solid var(--divider); border-radius: 0; background: none; box-shadow: none; transform: none; cursor: pointer; }
.prof-about .prof-stats .ps:first-child { padding-left: 0; border-left: none; }
.prof-about .prof-stats .ps .ps-ic { display: none; }
.prof-about .prof-stats .ps strong { font: 700 var(--fs-8) / 1.1 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.prof-about .prof-stats .ps > span { font-size: var(--fs-2); color: var(--muted); }
.prof-about .prof-stats .ps:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prof-about .prof-stats .ps.is-locked { cursor: default; }
.prof-about .prof-stats .ps.is-locked:hover strong { text-decoration: none; }
/* about me, then the chips, each after a thin rule */
.prof-card .prof-bio-box { gap: 6px; padding: 16px 0; border-top: 1px solid var(--divider); max-width: none; }
.prof-card .prof-bio-label { font: 700 var(--fs-1) / 16px var(--sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--muted); }
.prof-card .prof-bio { font-size: var(--fs-6); line-height: 1.5; }
.prof-card .prof-chips { padding-top: 16px; border-top: 1px solid var(--divider); }
.prof-card .prof-bio-box[hidden] + .prof-chips { border-top: 1px solid var(--divider); }
.prof-card .prof-chip { height: 30px; border-radius: 8px; }
@media (max-width: 700px) {
  .prof-card .prof-head { grid-template-columns: var(--av) minmax(0, 1fr); grid-template-areas: "av tools" "who who"; padding: 0 16px; }
  .prof-card .prof-tools { justify-self: end; }
  .prof-card .prof-about { padding: 14px 16px 18px; }
  .prof-card .prof-name { font-size: var(--fs-9); }
  .prof-about .prof-stats .ps { padding: 0 16px; }
}
/* under the card: the Challenge numbers and the badges line up, with the same gaps all the way down */
.prof-body { align-items: stretch; }
.prof-main > .prof-sec, .prof-side > .prof-sec { height: 100%; }
.prof-main { display: flex; }
.prof-main > .prof-sec[data-prof-section="challenge"] { flex: 1; }
.prof-sec { padding: 20px; }
.prof-sec-head { margin-bottom: 14px; min-height: 30px; align-items: center; }
.pr-stats { gap: 10px; }
.pr-stat { min-height: 76px; }
.prof-side .pb-grid { display: grid; gap: 10px; }
.prof-side .pb-tile { min-height: 76px; align-items: center; }
.pr-own-note { margin: 14px 0 0 !important; padding: 0; }
.prof-ranks > :last-child { margin-bottom: 0; }
/* ======================================================================================
   Motion: small, quick and quiet. Pages rise in, things that open slide open, buttons give
   under a press, dialogs and menus fade in. All of it stops for reduced motion.
   ====================================================================================== */
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes open-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
main > .wrap, main > .page { animation: page-in .45s cubic-bezier(.2, .7, .2, 1) both; }
details[open] > :not(summary) { animation: open-in .22s var(--ease) both; }
dialog[open] { animation: pop-in .2s var(--ease) both; }
dialog[open]::backdrop { animation: fade-in .2s ease both; }
.btn, .choice, .seg button, .pill button, .set-seg button, .pe-opt, .swatch, .play, .j-rate button, .way, .ch-topic, .tile { transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s, border-color .16s, color .16s; }
.btn:active, .choice:active, .seg button:active, .pill button:active, .set-seg button:active, .pe-opt:active, .play:active, .j-rate button:active, .ch-topic:active, .tile:active { transform: scale(.97) !important; box-shadow: none !important; }
a { transition: color .15s, text-decoration-color .15s; }
.card, .prof-sec, .set-group { transition: box-shadow .2s var(--ease), border-color .2s; }
.switch-track, .switch-track::after { transition: background .2s var(--ease), transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.site-nav a { transition: color .15s, border-color .2s; }
.lesson-topic > summary .chev, .topic > summary .chev, .j-topic > summary .chev, summary svg.chev { transition: transform .25s var(--ease); }
.skt, .skb { animation-name: sk-move; }
.prof-card:not(.is-loading) .prof-who, .prof-card:not(.is-loading) .prof-about { animation: fade-in .3s ease both; }
.badge-stack .badge { animation: pop-in .3s var(--ease) both; }
.badge-stack .badge:nth-child(2) { animation-delay: .04s; } .badge-stack .badge:nth-child(3) { animation-delay: .08s; } .badge-stack .badge:nth-child(4) { animation-delay: .12s; } .badge-stack .badge:nth-child(5) { animation-delay: .16s; }
.acc-menu a, .acc-menu button { transition: background .15s, color .15s; }
@media (prefers-reduced-motion: reduce) {
  main > .wrap, main > .page, details[open] > :not(summary), dialog[open], dialog[open]::backdrop, .prof-card .prof-who, .prof-card .prof-about, .badge-stack .badge { animation: none !important; }
  .btn:active, .choice:active { transform: none !important; }
}
/* the icon and banner pickers: sections that open and close, and tiles all the same size, centred */
.av-grid, [data-banners] { display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; margin: 0; padding: 0; }
.av-sec { border: 1px solid var(--divider); border-radius: 10px; background: var(--card); }
.av-sec > summary.av-sec-h { list-style: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0; cursor: pointer; font: 700 var(--fs-3) var(--sans); color: var(--ink); text-transform: none; letter-spacing: 0; }
.av-sec > summary::-webkit-details-marker { display: none; }
.av-sec > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.av-sec[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.av-sec-n { font-weight: 400; font-size: var(--fs-1); color: var(--muted); padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.av-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); justify-items: center; gap: 8px; padding: 4px 12px 14px; }
.av-sec-grid .av-pick { width: 46px; height: 46px; aspect-ratio: 1; display: grid; place-items: center; }
.av-sec .banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 4px 12px 14px; }
.av-sec .bn-pick { width: 100%; height: 76px; justify-content: flex-start; }
.av-sec .bn-pick .bn-prev { flex: none; height: 46px; width: 100%; }
.av-sec .bn-pick .bn-name { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px; line-height: 1.15; }
/* Settings: one section at a time */
.set-main > [data-set-sec][hidden] { display: none; }
.set-main > [data-set-sec]:not([hidden]) { animation: open-in .22s var(--ease) both; }
.tk-empty { flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 28px 20px; }
.tk-empty p { align-items: center; gap: 4px; }
.tk-empty .btn { margin-top: 4px; }
html.no-yr-markers .nn12, html.no-yr-markers.year-12 .yr.y13, html.no-yr-markers .q[data-y="13"] .q-sub::after { display: none !important; content: none !important; }
/* the settings icon when you are in Settings: a yellow underline, like the main links */
.header-tools .settings-btn[aria-current="page"] { background: none; color: var(--ink); position: relative; }
.header-tools .settings-btn[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--fill-sh); }
:root[data-theme="dark"] .header-tools .settings-btn[aria-current="page"]::after { background: var(--fill); }
/* the current page in the header is marked with a yellow underline in both themes */
.site-nav a[aria-current="page"] { border-bottom-color: var(--fill-sh); }
:root[data-theme="dark"] .site-nav a[aria-current="page"] { border-bottom-color: var(--fill); }
.site-nav a::after { background: var(--fill-sh) !important; }
:root[data-theme="dark"] .site-nav a::after { background: var(--fill) !important; }
/* the notifications bell and its panel */
.notes-wrap { position: relative; display: inline-flex; }
.notes-wrap[hidden] { display: none; }
.notes-btn { position: relative; }
.notes-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #E0483B; box-shadow: 0 0 0 2px var(--paper); animation: pop-in .25s var(--ease) both; }
.notes-dot[hidden] { display: none; }
.notes-btn:hover svg { animation: bell-ring .5s var(--ease); transform-origin: 50% 15%; }
@keyframes bell-ring { 25% { transform: rotate(12deg); } 50% { transform: rotate(-10deg); } 75% { transform: rotate(5deg); } }
.notes-panel { position: absolute; top: calc(100% + 10px); right: -60px; z-index: 40; width: min(380px, calc(100vw - 24px)); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px var(--raise), 0 2px 0 var(--edge); overflow: hidden; animation: open-in .16s var(--ease) both; }
.notes-panel[hidden] { display: none; }
.notes-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--divider); }
.notes-title { margin: 0; font: 700 var(--fs-6) var(--serif); }
.notes-head .text-btn { font-size: var(--fs-2); }
.notes-list { list-style: none; margin: 0; padding: 6px; max-height: 420px; overflow-y: auto; }
.note { display: flex; gap: 12px; padding: 10px; border-radius: 8px; color: var(--ink); text-decoration: none; position: relative; transition: background .15s; }
.note:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.note.is-new::after { content: ""; position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: 50%; background: #E0483B; }
.note-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.note-challenge { background: #FFF1C2; color: #7A5600; } .note-ticket { background: #FCE8E4; color: #A33A2E; }
.note-friend { background: #E3F1EC; color: #24614F; } .note-course { background: #EEEAF6; color: #4F3C7A; } .note-week { background: #F3EDE3; color: #6B5330; }
:root[data-theme="dark"] .note-ic { background: #2A2C31; color: var(--fill); }
.note-main { display: flex; flex-direction: column; gap: 2px; padding-right: 18px; font-size: var(--fs-3); line-height: 1.4; }
.note-main strong { font-size: var(--fs-3); }
.note-main span { color: var(--text-2); }
.note-main .note-when { color: var(--muted); font-size: var(--fs-1); }
.notes-empty { margin: 0; padding: 26px 16px; text-align: center; color: var(--muted); font-size: var(--fs-3); }
.notes-foot { display: block; padding: 11px 16px; border-top: 1px solid var(--divider); font: 700 var(--fs-2) var(--sans); color: var(--muted); text-decoration: none; text-align: center; }
.notes-foot:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
@media (max-width: 760px) { .notes-panel { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; } }
/* ======================================================================================
   Home page, round seventeen
   ====================================================================================== */
html.is-signed-in [data-hero-free] { display: none !important; }
.home-hero { padding-top: 8px; }
.hero-text { gap: 0; }
.hero-text .h1-big { margin: 0 0 18px; }
.hero-lede { margin: 0 0 16px; }
.hero-feats { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.hero-feats li { display: flex; align-items: center; gap: 12px; font-size: var(--fs-5); color: var(--text-2); }
.hf-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--fill-soft); color: var(--ink); }
:root[data-theme="dark"] .hf-ic { background: #2A2924; color: var(--fill); }
.hero-act { margin: 0; gap: 12px; }
.hero-act .btn-big { padding: 0 28px; }
.hero-alt { margin: 0; }
/* the free lesson: clearly labelled for visitors; signed in, just a picture of a lesson */
.shot-lesson .shot-cap strong { font-size: var(--fs-4); }
.shot-lesson.is-plain .shot-play { opacity: .9; }
/* section headings stand out: bigger, with a short highlighter mark */
.page-home .section { padding-top: 64px; }
.page-home .section > .h2-big, .page-home .section-intro .h2-big { position: relative; display: inline-block; font-size: 34px; line-height: 1.15; margin: 0; padding-bottom: 10px; }
.page-home .section > .h2-big::after, .page-home .section-intro .h2-big::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 5px; border-radius: 3px; background: var(--hl); }
:root[data-theme="dark"] .page-home .section > .h2-big::after, :root[data-theme="dark"] .page-home .section-intro .h2-big::after { background: var(--fill); }
.page-home .section > .h2-big { margin-bottom: 24px; }
.page-home .section-intro { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.page-home .section-intro p { margin: 0; }
@media (max-width: 700px) { .page-home .section { padding-top: 44px; } .page-home .section > .h2-big, .page-home .section-intro .h2-big { font-size: 28px; } }
/* "Built for the exam you sit" */
.built-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.built-grid li { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.built-grid li:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--raise); }
.built-grid strong { font: 700 var(--fs-7) / 1.25 var(--serif); color: var(--ink); }
.built-grid li > span:not(.bf-ic) { font-size: var(--fs-4); line-height: 1.5; color: var(--text-2); }
.bf-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 11px; background: var(--fill-soft); color: var(--ink); }
:root[data-theme="dark"] .bf-ic { background: #2A2924; color: var(--fill); }
@media (max-width: 900px) { .built-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .built-grid { grid-template-columns: minmax(0, 1fr); } }
/* account icons in place of "Free account" and "No account needed" */
.acc-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-top: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); }
.acc-ic.acc-open { background: color-mix(in srgb, var(--dec) 16%, transparent); color: var(--dec-dark); }
:root[data-theme="dark"] .acc-ic.acc-open { color: var(--dec); }
/* dark mode: sticky notes and tape made for the dark, and a warm orange where the red was */
:root[data-theme="dark"] { --red: #F2A65A; --sticky: #3B3622; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --red: #F2A65A; --sticky: #3B3622; } }
:root[data-theme="dark"] .gate { background: linear-gradient(180deg, #423C25, #36311F); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 16px 24px -16px rgba(0, 0, 0, .8); }
:root[data-theme="dark"] .gate::before { background: rgba(242, 212, 110, .2); border-color: rgba(242, 212, 110, .28); }
/* ======================================================================================
   Text boxes and switches: one clean style everywhere. A hairline border, rounded corners,
   and on focus a soft yellow ring (no double outlines, no heavy black borders).
   ====================================================================================== */
:root { --field-bd: color-mix(in srgb, var(--ink) 18%, transparent); --field-bd-hover: color-mix(in srgb, var(--ink) 34%, transparent); --ring: color-mix(in srgb, #E3B53B 45%, transparent); }
:root[data-theme="dark"] { --field-bd: color-mix(in srgb, var(--ink) 20%, transparent); --field-bd-hover: color-mix(in srgb, var(--ink) 38%, transparent); --ring: color-mix(in srgb, var(--fill) 38%, transparent); }
.field input, .field textarea, textarea, .ch-input, .account-form input:not([type="checkbox"]):not([type="radio"]), .tk-reply textarea, .fbar select, .cbar-board select, .select select {
  border: 1px solid var(--field-bd) !important; border-radius: 10px !important; background-color: var(--card); color: var(--ink);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03); outline: none !important; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field input, .ch-input, .account-form input:not([type="checkbox"]):not([type="radio"]) { height: 46px; padding: 0 14px; font: 400 var(--fs-5) var(--sans); }
.field textarea, textarea { padding: 12px 14px; font: 400 var(--fs-5) / 1.5 var(--sans); }
.field input:hover, .field textarea:hover, textarea:hover, .ch-input:hover, .account-form input:not([type="checkbox"]):not([type="radio"]):hover, .fbar select:hover, .cbar-board select:hover { border-color: var(--field-bd-hover) !important; }
.field input:focus, .field textarea:focus, textarea:focus, .ch-input:focus, .account-form input:not([type="checkbox"]):not([type="radio"]):focus, .fbar select:focus, .cbar-board select:focus, .select select:focus {
  border-color: var(--ink) !important; box-shadow: 0 0 0 4px var(--ring) !important; outline: none !important;
}
.field input::placeholder, textarea::placeholder, .ch-input::placeholder { color: var(--muted); opacity: .75; }
/* boxes that hold a search field: the box gets the ring, the field inside stays bare */
.filter, .ltool-find, .toolbar .filter { border: 1px solid var(--field-bd) !important; border-radius: 10px !important; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.filter:hover, .ltool-find:hover { border-color: var(--field-bd-hover) !important; }
.filter:focus-within, .ltool-find:focus-within { border-color: var(--ink) !important; box-shadow: 0 0 0 4px var(--ring); }
.filter input, .ltool-find input { outline: none !important; box-shadow: none !important; border: none !important; }
/* switches: a soft track with no outline, a white knob that springs across */
.switch-track { width: 44px; height: 26px; border: none !important; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.switch-track::after { top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.switch:hover .switch-track, .switch-row:hover .switch-track { background: color-mix(in srgb, var(--ink) 26%, transparent); }
.switch input:checked + .switch-track { background: var(--ink); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: #fff; }
:root[data-theme="dark"] .switch input:checked + .switch-track { background: var(--fill); }
:root[data-theme="dark"] .switch input:checked + .switch-track::after { background: #17181B; }
.switch input:focus-visible + .switch-track { outline: none !important; box-shadow: 0 0 0 4px var(--ring) !important; }
.switch input:disabled + .switch-track { opacity: .45; }
.switch-card { border: 1px solid var(--divider) !important; border-radius: 12px !important; background: var(--card); }
/* your exam papers: one column per subject on a computer */
.home-foot { display: block; }
.home-foot [data-papers] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; align-items: start; }
.home-foot .papers-subject + .papers-subject { margin-top: 0; }
/* leaderboard: a clear gap under the podium, a proper empty state, and tabs like the Questions view */
.lb-podium { margin-bottom: 20px; }
.lb-podium[hidden] { display: none; }
.lb-list .lb-empty-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 20px; text-align: center; }
.lb-list .lb-empty-box strong { color: var(--ink); font-size: var(--fs-4); }
.lb-bar { gap: 8px 28px; border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 24px; align-items: flex-end; background: none; border-radius: 0; box-shadow: none; }
.lb-bar .lb-field { gap: 4px; }
.lb-pill { display: flex; gap: 0; padding: 0; border: none !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
.lb-pill button { height: auto; min-height: 44px; padding: 10px 14px; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--muted); font: 700 var(--fs-4) var(--sans); margin-bottom: -1px; box-shadow: none !important; transform: none !important; }
.lb-pill button:hover { color: var(--ink); }
.lb-pill button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink) !important; }
:root[data-theme="dark"] .lb-pill button[aria-pressed="true"] { border-bottom-color: var(--fill) !important; }
/* "Not needed for Year 12": green, after the count */
html.year-12 .nn12, html.year-12 .yr.y13 { border: none !important; background: color-mix(in srgb, #2E8B57 14%, transparent) !important; color: #23764A !important; }
:root[data-theme="dark"] .nn12, :root[data-theme="dark"] .yr.y13 { --g: #7DD3A0; }
html.year-12:is([data-theme="dark"]) .nn12, html.year-12:is([data-theme="dark"]) .yr.y13 { background: rgba(125, 211, 160, .14) !important; color: #7DD3A0 !important; }
.ch-topic-meta .nn12 { margin: 0 0 0 8px; }
html.year-12 .q[data-y="13"] .q-sub::after { border: none; background-color: color-mix(in srgb, #2E8B57 14%, transparent); color: #23764A; }
/* small chips: whole-pixel borders and rounded corners that draw cleanly on every screen */
.spec-code { display: inline-flex; align-items: center; padding: 3px 10px; border: 1px solid currentColor; border-radius: 7px; line-height: 1.2; vertical-align: .35em; }
.lvl, .chip, .req-tag, .badge-ink { border-radius: 6px; }
/* Topics tab: Year 12, Year 13 and both years in their own colours, for everyone */
.page-board .yr, .page-topic .yr { display: inline-flex !important; align-items: center; gap: 0; padding: 2px 8px !important; border: none !important; border-radius: 6px !important; font: 700 var(--fs-1) / 16px var(--sans) !important; letter-spacing: .02em; }
.page-board .yr::before, .page-board .yr::after, .page-topic .yr::before, .page-topic .yr::after { content: none !important; }
.page-board .yr.y12, .page-topic .yr.y12 { background: #E3ECFA !important; color: #22396B !important; }
.page-board .yr.y13, .page-topic .yr.y13 { background: #FCEBD2 !important; color: #8A5310 !important; }
.page-board .yr.y1213, .page-topic .yr.y1213 { background: linear-gradient(90deg, #E3ECFA 50%, #FCEBD2 50%) !important; color: var(--ink) !important; }
:root[data-theme="dark"] .page-board .yr.y12, :root[data-theme="dark"] .page-topic .yr.y12 { background: rgba(147, 181, 232, .16) !important; color: #B4CBEF !important; }
:root[data-theme="dark"] .page-board .yr.y13, :root[data-theme="dark"] .page-topic .yr.y13 { background: rgba(242, 166, 90, .16) !important; color: #F5BE84 !important; }
:root[data-theme="dark"] .page-board .yr.y1213, :root[data-theme="dark"] .page-topic .yr.y1213 { background: linear-gradient(90deg, rgba(147, 181, 232, .16) 50%, rgba(242, 166, 90, .16) 50%) !important; color: var(--ink) !important; }
.page-board .point[data-year="13"], .page-topic .point[data-year="13"] { box-shadow: inset 3px 0 0 #E9A44A; }
.page-board .point[data-year="12"], .page-topic .point[data-year="12"] { box-shadow: inset 3px 0 0 #7FA3DA; }
.page-board .point { padding-left: 12px; }
.yr-topic { margin-right: 10px; }
.yr-legend { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.yr-legend-t { margin-left: 4px; color: var(--muted); }
.page-board .toolbar { gap: 12px; }
.page-board .toolbar .filter { flex: 1 1 100%; }
.page-board .toolbar { box-shadow: 0 1px 0 var(--divider); padding: 12px 0; }
/* ------------------------------------------------------------------
   Round twenty: the yellow underline on every page title.
------------------------------------------------------------------ */
.page-head .h1::after, .learn-head .h1::after, .settings-head .h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 5px; border-radius: 3px; background: var(--hl); }
:root[data-theme="dark"] :is(.page-head .h1, .learn-head .h1, .settings-head .h1)::after { background: var(--fill); }
.page-head .h1, .learn-head .h1, .settings-head .h1 { position: relative; width: fit-content; padding-bottom: 12px; }
/* Reveal and Hide take the note's own colour */
/* Challenge: no note above the topics, no course note above the leaderboard; the leaderboard card lines up with the first topic */
[data-cbar="c"] .cbar-note { display: none; }
.page-challenge .ch-main { display: flex; flex-direction: column; gap: 0; }
.page-challenge .ch-views { margin-bottom: 32px; }
.page-challenge [data-cbar="c"] { margin-bottom: 32px; }

/* signed in: the free-lesson caption on the home picture and the closing sign-up box never show, not even before the script runs */
html.is-signed-in .page-home .shot-lesson .shot-cap, html.is-signed-in .page-home .home-end { display: none !important; }
/* sign in and sign up: the form sits in the middle of the screen, whatever the window width */
.wrap.page-narrow:has(> .account > .account-card:not([hidden])) { margin-left: auto; margin-right: auto; }
/* Topics on a phone: the whole picture shows, scaled to fit its band, never cropped */
@media (max-width: 860px) { .ts-visual { height: 190px; max-height: none; padding: 10px 0; justify-content: center; } .ts-visual .ill { width: 100%; height: 100%; } }
/* Challenge on a phone: both tabs the same, icon above the words */
@media (max-width: 640px) { .ch-view { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; } }
/* "Not needed for Year 12" sits on the same line as the question count, centred on it, with an even gap */
.ch-topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; line-height: 20px; }
.ch-topic-meta .nn12 { margin: 0 !important; vertical-align: 0; line-height: 18px; }
/* full screen: the space around the 16:9 picture is the lesson's own paper, so it fills the whole screen edge to edge */
.player.is-full .player-screen, .player-box:fullscreen .player-screen, .player-box:-webkit-full-screen .player-screen { background: #FCFCFA; }
:root[data-theme="dark"] .player.is-full .player-screen, :root[data-theme="dark"] .player-box:fullscreen .player-screen { background: #17181B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .player.is-full .player-screen { background: #17181B; } }
/* ------------------------------------------------------------------
   My course: the choices on the left (year, subjects with their boards, options) and the course at a glance on the
   right, which stays in view on a computer and follows the choices on a phone.
------------------------------------------------------------------ */
.page-course .prefs { display: block; }
.mc { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.mc-main { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
.mc-side { position: sticky; top: 96px; }
.mc-sec { display: flex; flex-direction: column; gap: 16px; }
.mc-sec-head { display: flex; flex-direction: column; gap: 4px; }
.mc-sec-head > * { margin: 0; }
/* the year: one switch with two halves */
.mc-seg { display: inline-grid; grid-template-columns: 1fr 1fr; width: min(100%, 360px); padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.mc-seg-btn { height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--text-2); font: 700 var(--fs-6) var(--serif); cursor: pointer; transition: background .15s, color .15s; }
.mc-seg-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.mc-seg-btn[aria-checked="true"] { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .mc-seg-btn[aria-checked="true"] { background: var(--fill); color: var(--on-fill); }
/* subjects: a tile each, picture on top */
.mc-subjects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mc-subj { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.mc-subj:hover { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
.mc-subj.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--sh-1); }
:root[data-theme="dark"] .mc-subj.is-on { border-color: var(--fill); box-shadow: 0 0 0 1px var(--fill); }
.mc-subj-top { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.mc-subj-ill { display: block; height: 118px; background: var(--acc-bg); border-bottom: 1px solid var(--line); overflow: hidden; }
.mc-subj-ill .ill { display: block; width: 100%; height: 100%; }
.mc-subj:not(.is-on) .mc-subj-ill { filter: grayscale(.85); opacity: .7; }
.mc-subj-name { padding: 14px 16px 4px; font: 700 var(--fs-6) / 1.3 var(--serif); }
.mc-tick { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: transparent; transition: background .15s, color .15s; }
.mc-subj.is-on .mc-tick { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .mc-subj.is-on .mc-tick { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.mc-subj-off { padding: 0 16px 16px; font-size: var(--fs-2); color: var(--muted); }
.mc-boards { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 16px; }
.mc-boards-label { font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.mc-boards-label.is-ask { color: var(--red); }
.mc-board-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mc-board { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: 700 var(--fs-2) / 1.25 var(--sans); text-align: left; cursor: pointer; }
.mc-board:hover { border-color: var(--ink); }
.mc-board-code { font-weight: 500; font-size: var(--fs-1); color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-board[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mc-board[aria-pressed="true"] .mc-board-code { color: inherit; opacity: .75; }
:root[data-theme="dark"] .mc-board[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
/* options: a card per subject, the modules as separate cards */
.mc-opts { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.mc-opts + .mc-opts { margin-top: 0; }
.mc-opts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.mc-opts-title { margin: 0; font: 700 var(--fs-6) var(--serif); }
.mc-opts-board { font-size: var(--fs-2); color: var(--muted); }
.mc-opts .tiles { gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; }
.mc-opts .tile { border: 1px solid var(--line) !important; border-radius: 10px; background: var(--paper); }
.mc-opts .tile:hover:not([aria-pressed="true"]) { border-color: var(--ink) !important; background: var(--paper); }
.mc-opts .tile[aria-pressed="true"] { border-color: transparent !important; }
.mc-opts .tiles-head { height: auto; margin-bottom: -4px; }
.mc-opts .tiles-head span + span { padding-left: 4px; }
.mc-opts .route { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
/* the course at a glance */
.mc-card { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.mc-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-card-h { margin: 0; font: 700 var(--fs-7) var(--serif); }
.mc-year { padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--on-fill); font: 700 var(--fs-1) / 18px var(--sans); }
.mc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-item { display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 12px; }
.mc-bar { border-radius: 2px; background: var(--acc); }
.mc-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-item-main strong { font-size: var(--fs-4); color: var(--ink); }
.mc-item-sub { font-size: var(--fs-2); color: var(--text-2); }
.mc-item-opt { font-size: var(--fs-2); color: var(--muted); }
.mc-item-opt.is-open { font-style: italic; }
.mc-empty, .mc-hint { margin: 0; font-size: var(--fs-3); color: var(--text-2); }
.mc-hint { color: var(--red); font-weight: 600; }
.mc-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mc-acts .btn { justify-content: center; }
.mc-saved { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-1); color: var(--muted); }
.page-course .prefs-forget { margin-top: 24px; }
.page-course .save-note { max-width: none; }
@media (max-width: 1040px) {
  .mc { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mc-side { position: static; }
}
@media (max-width: 720px) {
  .mc-subjects { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mc-subj-top { flex-direction: row; align-items: center; }
  .mc-subj-ill { flex: none; width: 96px; height: 64px; border-bottom: 0; border-right: 1px solid var(--line); }
  .mc-subj-name { padding: 0 52px 0 14px; }
  .mc-tick { top: 18px; }
  .mc-subj-off { padding: 0 16px 12px 110px; margin-top: -22px; }
  .mc-boards { padding-top: 12px; border-top: 1px solid var(--line); }
  .mc-seg { width: 100%; }
  .mc-opts { padding: 16px; }
  .mc-opts .tiles { grid-template-columns: minmax(0, 1fr); }
  .mc-opts .tiles-head { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mc-subj, .mc-seg-btn, .mc-tick { transition: none; } }
.mc-subj.subj-fm, .mc-item.subj-fm, .mc-opts.subj-fm { --acc: var(--acc-fm); --acc-bg: var(--acc-fm-bg); }
.mc-subj.subj-ma, .mc-item.subj-ma, .mc-opts.subj-ma { --acc: var(--acc-ma); --acc-bg: var(--acc-ma-bg); }
.mc-subj.subj-ph, .mc-item.subj-ph, .mc-opts.subj-ph { --acc: var(--acc-ph); --acc-bg: var(--acc-ph-bg); }
@media (max-width: 720px) {
  /* paired options keep their two columns (Paper 3, Paper 4) on a phone, without the descriptions */
  .mc-opts .tiles:not(.cols-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-opts .tiles:not(.cols-1) .tile-blurb { display: none; }
  .mc-opts .tiles-head { display: grid; }
}
/* the name and "Not taking" sit together inside the tile's button; on a phone the picture fills the tile's full height */
.mc-subj-text { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 16px; min-width: 0; }
.mc-subj-text .mc-subj-name { padding: 0; }
.mc-subj-text .mc-subj-off { padding: 0; margin: 0; }
.mc-subj.is-on .mc-subj-text { padding-bottom: 4px; }
@media (max-width: 720px) {
  .mc-subj-top { flex-direction: row; align-items: stretch; min-height: 76px; }
  .mc-subj-ill { flex: none; width: 104px; height: auto; border-bottom: 0; border-right: 1px solid var(--line); }
  .mc-subj-ill .ill { height: 100%; }
  .mc-subj-text { justify-content: center; padding: 12px 52px 12px 16px; }
  .mc-subj.is-on .mc-subj-text { padding-bottom: 12px; }
  .mc-tick { top: 50%; margin-top: -14px; }
  .mc-subj.is-on .mc-tick { top: 24px; margin-top: 0; }
}
/* My course, tidied: the site's own corners (5px for cards and tiles, 3px for buttons), even spacing under
   "Option 1 · Paper 3", option tiles drawn like the subject tiles, and a gentle pulse when a board is still to choose */
.mc-seg, .mc-subj, .mc-opts .tile { border-radius: var(--r); }
.mc-seg-btn, .mc-board { border-radius: var(--r-sm); }
.mc-seg { padding: 3px; gap: 3px; }
.mc-opts { gap: 0; }
.mc-opts-head { margin-bottom: 18px; }
.mc-opts .tiles-head { height: auto; margin: 0 0 8px; }
.mc-opts .tiles-head span + span { padding-left: 4px; }
.mc-opts .route { margin-top: 16px; }
.tile-tick { display: none; }
.mc-opts .tile { position: relative; justify-content: flex-start; gap: 2px; min-height: 0; padding: 12px 44px 12px 14px !important; background: var(--card); border: 1px solid var(--line) !important; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.mc-opts .tile:hover:not([aria-pressed="true"]) { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)) !important; background: var(--card); }
.mc-opts .tile .tile-code { font-size: var(--fs-3); }
.mc-opts .tile .tile-name { font-size: var(--fs-2); font-weight: 600; }
.mc-opts .tile .tile-blurb { margin-top: 2px; }
.mc-opts .tile .tile-tick { position: absolute; top: 11px; right: 11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: transparent; }
.mc-opts .tile .tile-tick svg { width: 13px; height: 13px; }
.mc-opts .tile[aria-pressed="true"], .mc-opts .tile.pure[aria-pressed="true"], .mc-opts .tile.stats[aria-pressed="true"], .mc-opts .tile.mech[aria-pressed="true"], .mc-opts .tile.dec[aria-pressed="true"], .mc-opts .tile.opt[aria-pressed="true"], .mc-opts .tile.core[aria-pressed="true"] { background: color-mix(in srgb, var(--acc, var(--ink)) 7%, var(--card)); color: var(--ink); border-color: var(--ink) !important; box-shadow: 0 0 0 1px var(--ink); }
.mc-opts .tile[aria-pressed="true"] .sq { background: var(--core); } .mc-opts .tile[aria-pressed="true"] .sq.pure { background: var(--pure); } .mc-opts .tile[aria-pressed="true"] .sq.stats { background: var(--stats); } .mc-opts .tile[aria-pressed="true"] .sq.mech { background: var(--mech); } .mc-opts .tile[aria-pressed="true"] .sq.dec { background: var(--dec); } .mc-opts .tile[aria-pressed="true"] .sq.opt { background: var(--opt); }
.mc-opts .tile[aria-pressed="true"] .tile-tick { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .mc-opts .tile[aria-pressed="true"] { border-color: var(--fill) !important; box-shadow: 0 0 0 1px var(--fill); }
:root[data-theme="dark"] .mc-opts .tile[aria-pressed="true"] .tile-tick { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
/* no board yet: the label stays plain; the two choices pulse softly to say "pick one" */
.mc-boards-label { color: var(--ink); }
.mc-board-row.is-ask .mc-board { border-style: dashed; border-color: color-mix(in srgb, var(--ink) 45%, transparent); animation: mc-ask 1.8s ease-in-out infinite; }
.mc-board-row.is-ask .mc-board + .mc-board { animation-delay: .25s; }
@keyframes mc-ask { 0%, 100% { box-shadow: 0 0 0 0 var(--ring); } 50% { box-shadow: 0 0 0 4px var(--ring); } }
@media (prefers-reduced-motion: reduce) { .mc-board-row.is-ask .mc-board { animation: none; box-shadow: 0 0 0 3px var(--ring); } }
html.reduce-motion .mc-board-row.is-ask .mc-board { animation: none; box-shadow: 0 0 0 3px var(--ring); }
.mc-opts .route-box { border-radius: var(--r); }
/* ------------------------------------------------------------------
   Section headings, everywhere: a yellow highlighter swiped behind the words as they scroll into view, the same
   marker as "step by step" on the home page. The big home-page headings keep their short yellow bar.
------------------------------------------------------------------ */
.pop-h { padding: 0 .08em; margin: 0 -.08em; background: linear-gradient(100deg, transparent .18em, color-mix(in srgb, var(--hl) var(--hl-a), transparent) .32em, color-mix(in srgb, var(--hl) var(--hl-a), transparent) calc(100% - .28em), transparent calc(100% - .12em)) 0 90% / 0% 42% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .75s cubic-bezier(.22, .9, .3, 1.06) .08s; }
.pop-h.is-in { background-size: 100% 42%; }
html.reduce-motion .pop-h { transition: none; }
@media (prefers-reduced-motion: reduce) { .pop-h { transition: none; } }
/* My course: a subject whose exam board is not chosen yet stays greyed out, with a small arrow pointing at the boards */
.mc-board-row.is-ask .mc-board { animation: none !important; box-shadow: none !important; border-style: solid; border-color: var(--line); }
.mc-subj.is-ask { border-color: var(--line); box-shadow: none; border-style: dashed; }
:root[data-theme="dark"] .mc-subj.is-ask { border-color: var(--line); box-shadow: none; }
.mc-subj.is-ask .mc-subj-ill { filter: grayscale(.85); opacity: .7; }
.mc-subj.is-ask .mc-subj-name { color: var(--text-2); }
.mc-subj.is-ask .mc-tick { background: var(--card); border: 1.5px dashed var(--line-strong, var(--line)); color: transparent; }
.mc-boards-label { display: inline-flex; align-items: center; gap: 6px; }
.mc-ask-arrow { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--fill); color: var(--on-fill); animation: mc-nudge 1.6s ease-in-out infinite; }
@keyframes mc-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
html.reduce-motion .mc-ask-arrow { animation: none; }
@media (prefers-reduced-motion: reduce) { .mc-ask-arrow { animation: none; } }
/* the highlighter is a real marker stroke over the lower half of the letters, not a line under them */
.pop-h { background-position: 0 82%; }
.pop-h.is-in { background-size: 100% 62%; }
:root[data-theme="dark"] .pop-h { --hl-a: 42%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pop-h { --hl-a: 42%; } }
:root[data-theme="dark"] .mc-subj.is-ask .mc-tick { background: var(--card); border: 1.5px dashed var(--line-strong, var(--line)); color: transparent; }
.lt-sec[data-part] { scroll-margin-top: 12px; }
/* Editing a profile on a phone: a compact, faithful preview at the top. A short banner, the picture overlapping it,
   the name, pronouns and badges beside the picture, and the bio on one line, so the choices below stay in view. */
html.pe-sheet .pe-mini { padding: 10px 16px 12px; }
html.pe-sheet .pe-mini .prof-card { --av: 52px; overflow: hidden; }
html.pe-sheet .pe-mini .prof-card .prof-banner { height: 44px !important; min-height: 0 !important; }
html.pe-sheet .pe-mini .prof-card .prof-head { display: grid !important; grid-template-areas: "av who" !important; grid-template-columns: var(--av) minmax(0, 1fr) !important; align-items: end; column-gap: 12px; padding: 0 12px 8px !important; }
html.pe-sheet .pe-mini .prof-card .prof-avatar { grid-area: av; margin-top: calc(var(--av) * -0.5) !important; width: var(--av) !important; height: var(--av) !important; border-width: 3px; }
html.pe-sheet .pe-mini .prof-card .prof-who { grid-area: who; align-self: end; padding: 0 0 2px !important; min-width: 0; }
html.pe-sheet .pe-mini .prof-card .prof-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 17px !important; line-height: 1.25 !important; margin: 0; }
html.pe-sheet .pe-mini .prof-card .prof-pron { font-size: 13px; }
html.pe-sheet .pe-mini .prof-card .prof-tools { display: none !important; }
html.pe-sheet .pe-mini .prof-card .prof-about { display: block !important; padding: 0 12px 10px !important; margin: 0 !important; border: 0 !important; background: none !important; }
html.pe-sheet .pe-mini .prof-card .prof-about > :not([data-prof-bio-box]) { display: none !important; }
html.pe-sheet .pe-mini .prof-card [data-prof-bio-box] { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
html.pe-sheet .pe-mini .prof-card [data-prof-bio-box] .prof-bio-label { display: none; }
html.pe-sheet .pe-mini .prof-card [data-prof-bio] { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pe-sheet .pe-mini .prof-card [data-prof-bio]:empty { display: none; }
/* the name sits a clear step below the banner, level with the lower half of the picture */
html.pe-sheet .pe-mini .prof-card .prof-head { align-items: start; padding-bottom: 10px !important; }
html.pe-sheet .pe-mini .prof-card .prof-who { align-self: start; padding: 10px 0 0 !important; }
/* content taught across both years reads simply Y13, in the same single colour as Y13 */
.yr.y1213::before { background: var(--ink); }
.page-board .yr.y1213, .page-topic .yr.y1213 { background: #FCEBD2 !important; color: #8A5310 !important; }
:root[data-theme="dark"] .page-board .yr.y1213, :root[data-theme="dark"] .page-topic .yr.y1213 { background: rgba(242, 166, 90, .16) !important; color: #F5BE84 !important; }
.page-board .point[data-year="12-13"], .page-topic .point[data-year="12-13"] { box-shadow: inset 3px 0 0 #E9A44A; }
/* practice questions: the "Not needed for Year 12" arrows are green, like the words */
html.year-12 .q[data-y="13"] .q-sub::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.5l4 3.5-4 3.5zM6 2.5l4 3.5-4 3.5z' fill='%2323764A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 8px center; background-size: 11px 11px; }
html.year-12[data-theme="dark"] .q[data-y="13"] .q-sub::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.5l4 3.5-4 3.5zM6 2.5l4 3.5-4 3.5z' fill='%237DD3A0'/%3E%3C/svg%3E"); background-color: rgba(125, 211, 160, .14); color: #7DD3A0; }
html.year-12 .nn12 svg, html.year-12 .yr.y13::before { color: inherit; }
/* worksheets: the PDF icons are red */
.ws-icon, .ws-row.is-ready .ws-icon, .ws-topic-sheet .ws-icon, .ws-topic-sheet.is-ready .ws-icon { color: #C0342B; border-color: color-mix(in srgb, #C0342B 35%, transparent); background: color-mix(in srgb, #C0342B 7%, var(--card)); }
:root[data-theme="dark"] :is(.ws-icon, .ws-row.is-ready .ws-icon, .ws-topic-sheet .ws-icon, .ws-topic-sheet.is-ready .ws-icon) { color: #EE8C7E; border-color: rgba(238, 140, 126, .35); background: rgba(238, 140, 126, .08); }
/* ------------------------------------------------------------------
   Home, the top: less to read and more to look at. A one-line intro, the five parts of SUVAT as colourful
   tiles, two buttons, and the lesson picture on a yellow block. On a phone the picture comes straight after
   the intro, so the screen opens on something to see rather than a list.
------------------------------------------------------------------ */
.hero-lede { margin: 0 0 22px; max-width: 40ch; font-size: var(--fs-6); }
.hero-tiles { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; }
.ht { --c: #2B4C7E; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); border-radius: var(--r); background: var(--card); font: 700 var(--fs-4) / 1.2 var(--sans); color: var(--ink); box-shadow: 0 1px 0 var(--edge, transparent); transition: transform .18s var(--ease, ease), box-shadow .18s; }
.ht:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 18%, transparent); }
.ht-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--c) 13%, var(--card)); color: var(--c); }
.ht-1 { --c: #2B4C7E; } .ht-2 { --c: #C0342B; } .ht-3 { --c: #2F6F6A; } .ht-4 { --c: #B07A1C; } .ht-5 { --c: #6B3F69; }
:root[data-theme="dark"] .ht-1 { --c: #8FB0E6; } :root[data-theme="dark"] .ht-2 { --c: #EE8C7E; } :root[data-theme="dark"] .ht-3 { --c: #74C2B8; } :root[data-theme="dark"] .ht-4 { --c: #E8C766; } :root[data-theme="dark"] .ht-5 { --c: #C99BC6; }
:root[data-theme="dark"] .ht { background: color-mix(in srgb, var(--c) 6%, var(--card)); }
.hero-act { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; }
.hero-watch { gap: 10px; }
.hero-watch-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .hero-watch-ic { background: var(--fill); color: var(--on-fill); }
html.is-signed-in .page-home .hero-watch { display: none; }
.hero-alt { font-size: var(--fs-3); }
/* the lesson picture sits on a tilted yellow block */
.page-home .showcase { isolation: isolate; }
.page-home .showcase::before { content: ""; position: absolute; z-index: -1; inset: -18px -18px 34% 26px; border-radius: 10px; background: color-mix(in srgb, var(--hl) 55%, transparent); transform: rotate(2deg); }
:root[data-theme="dark"] .page-home .showcase::before { background: color-mix(in srgb, var(--fill) 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .ht { transition: none; } }
html.reduce-motion .ht { transition: none; }
@media (max-width: 860px) {
  .page-home .home-hero { display: flex; flex-direction: column; gap: 0; padding-top: 12px; }
  .page-home .hero-text, .page-home .showcase { display: contents; }
  .page-home .hero-text .h1-big { order: 1; margin-bottom: 12px; }
  .page-home .hero-lede { order: 2; margin-bottom: 26px; font-size: var(--fs-5); }
  .page-home .shot-lesson { order: 3; position: relative; margin: 0 6px 30px 0; }
  .page-home .shot-lesson::before { content: ""; position: absolute; z-index: -1; inset: -10px -10px 22% 18px; border-radius: 10px; background: color-mix(in srgb, var(--hl) 55%, transparent); transform: rotate(2deg); }
  :root[data-theme="dark"] .page-home .shot-lesson::before { background: color-mix(in srgb, var(--fill) 16%, transparent); }
  .page-home .shot-lesson { isolation: isolate; }
  .page-home .hero-tiles { order: 4; margin-bottom: 26px; }
  .page-home .hero-act { order: 5; }
  .page-home .hero-alt { order: 6; margin-bottom: 8px; }
  .page-home .shot-row { order: 7; display: none; }
  .page-home .showcase::before { display: none; }
}
@media (max-width: 640px) {
  .hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ht { padding: 6px 10px 6px 6px; font-size: var(--fs-3); gap: 8px; }
  .ht-ic { width: 30px; height: 30px; }
  .ht-5 { grid-column: span 2; justify-self: start; }
  .hero-act { flex-direction: column; align-items: stretch; }
  .hero-act .btn { width: 100%; }
}
@media (max-width: 860px) {
  .page-home .shot-lesson::before { content: none; }
  .page-home .shot-lesson { box-shadow: 10px 10px 0 color-mix(in srgb, var(--hl) 70%, transparent), 0 10px 26px var(--raise, rgba(0, 0, 0, .08)); }
  :root[data-theme="dark"] .page-home .shot-lesson { box-shadow: 10px 10px 0 color-mix(in srgb, var(--fill) 30%, transparent); }
}
@media (max-width: 640px) {
  .ht { gap: 8px; padding: 5px 8px 5px 5px; font-size: 13px; white-space: nowrap; }
  .ht-ic { width: 28px; height: 28px; }
  .ht-ic svg { width: 17px; height: 17px; }
}
/* lesson progress, drawn into what is already there: a ring around the play button, and a bar along the bottom
   of the topic heading, instead of short bars squeezed under the titles */
.lesson.has-pct .play { position: relative; overflow: visible; }
.lesson.has-pct .play::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient(var(--dec) calc(var(--pct, 0) * 1%), color-mix(in srgb, var(--ink) 12%, transparent) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); pointer-events: none; }
.lesson-done { font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.lesson-done.is-done { color: var(--dec); }
.lesson-topic > summary { position: relative; }
.tw-track { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: color-mix(in srgb, var(--ink) 7%, transparent); overflow: hidden; }
.tw-track[hidden] { display: none; }
.tw-track > i { display: block; height: 100%; background: var(--dec); border-radius: 0 2px 2px 0; transition: width .4s var(--ease, ease); }
.lesson-topic[open] > summary .tw-track { bottom: -1px; }
[data-topic-watched] .tw-n { font-weight: 700; color: var(--text-2); }
[data-topic-watched] .tw-n.is-all { color: var(--dec); }
/* ------------------------------------------------------------------
   Find boxes (Topics, Lessons, Practice, Worksheets): one look. A clear button and the number of matches sit
   inside the box; the words found are marked; nothing found offers a way out.
------------------------------------------------------------------ */
.find-box { position: relative; }
.find-box input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.find-count { flex: none; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 700 var(--fs-1) / 18px var(--sans); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.find-clear { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-right: -4px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.find-clear:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.find-clear[hidden], .find-count[hidden] { display: none; }
.find-box.has-q { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)) !important; }
mark.fhl { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--hl) 70%, transparent); color: inherit; }
:root[data-theme="dark"] mark.fhl { background: color-mix(in srgb, var(--fill) 32%, transparent); }
.find-status { margin: 0; flex-basis: 100%; font-size: var(--fs-2); color: var(--muted); }
.find-status:empty { display: none; }
.filter-empty { display: flex; align-items: center; gap: 14px 16px; flex-wrap: wrap; margin-top: 24px; padding: 18px 20px; border: 1px dashed var(--dashed); border-radius: var(--r); background: var(--card); color: var(--text-2); }
.filter-empty[hidden] { display: none; }
.fe-ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); }
.fe-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
.fe-text strong { color: var(--ink); font-size: var(--fs-4); }
.fe-text span { font-size: var(--fs-3); }
.fe-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Practice: suggestions under the find box */
.p-find-wrap { margin-bottom: var(--sp-5); }
.p-find { position: relative; flex: 1 1 320px; max-width: 520px; }
.p-find .ltool-find { max-width: none; }
.find-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: min(60vh, 420px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: 0 14px 34px var(--raise, rgba(0, 0, 0, .12)); }
.find-suggest[hidden] { display: none; }
.find-suggest button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.find-suggest button:hover, .find-suggest button:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); outline: none; }
.ps-kind { flex: none; min-width: 70px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, transparent); font: 700 11px / 16px var(--sans); color: var(--text-2); text-align: center; }
.ps-kind.is-topic { background: var(--fill); color: var(--on-fill); }
.ps-main { display: flex; flex-direction: column; min-width: 0; }
.ps-title { font-weight: 600; font-size: var(--fs-4); }
.ps-meta { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-none { display: flex; flex-direction: column; gap: 2px; padding: 12px; font-size: var(--fs-3); color: var(--text-2); }
.ps-none strong { color: var(--ink); }
/* ------------------------------------------------------------------ the site search */
.search-close { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--text-2); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.search-close:hover { border-color: var(--ink); color: var(--ink); }
.search-close kbd { font: 400 var(--fs-1) var(--sans); color: var(--muted); }
.search-bar input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.search-filters { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 12px 18px 0; scrollbar-width: none; }
.search-filters::-webkit-scrollbar { display: none; }
.search-filters button { flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--text-2); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.search-filters button:hover { border-color: var(--ink); color: var(--ink); }
.search-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .search-filters button[aria-pressed="true"] { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.search-scope:empty { display: none; }
.search-results[hidden], .search-start[hidden] { display: none; }
.search-results li:not(.sr-empty) a { display: flex; align-items: center; gap: 12px; padding: 10px 10px; margin: 0 -10px; border-bottom: 0; border-radius: var(--r); }
.search-results li + li a { border-top: 1px solid var(--divider); }
.search-results li a:hover, .search-results li a:focus-visible { background: var(--card); outline: none; }
.search-results li a:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.search-results li a:hover .sr-title, .search-results li a:focus .sr-title { text-decoration: none; }
.sr-dot { flex: none; align-self: stretch; width: 4px; border-radius: 2px; background: var(--muted); }
.sr-dot.sr-further-maths { background: var(--acc-fm); } .sr-dot.sr-mathematics { background: var(--acc-ma); } .sr-dot.sr-physics { background: var(--acc-ph); }
.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sr-meta { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-kind { flex: none; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: 700 10.5px / 15px var(--sans); color: var(--text-2); text-transform: none; }
.sr-title { font-weight: 600; font-size: var(--fs-5); }
.sr-ref { margin-right: 8px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.sr-go { flex: none; color: var(--muted); opacity: 0; transition: opacity .15s, transform .15s; }
.search-results li a:hover .sr-go, .search-results li a:focus-visible .sr-go, .search-results li a.is-first .sr-go { opacity: 1; }
.search-results mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--hl) 70%, transparent); color: inherit; }
:root[data-theme="dark"] .search-results mark { background: color-mix(in srgb, var(--fill) 32%, transparent); }
.sr-empty { gap: 8px; align-items: flex-start; }
.sr-empty strong { color: var(--ink); }
.search-start { padding: 14px 18px 18px; overflow-y: auto; }
.ss-block + .ss-block { margin-top: 16px; }
.ss-h { margin: 0 0 8px; font: 700 var(--fs-1) var(--sans); letter-spacing: .02em; color: var(--muted); }
.ss-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 var(--fs-3) var(--sans); cursor: pointer; }
.ss-chip:hover { border-color: var(--ink); }
.ss-chip.is-recent { color: var(--text-2); }
.ss-clear { border: 0; background: none; color: var(--muted); font: 700 var(--fs-2) var(--sans); text-decoration: underline; cursor: pointer; }
.ss-tip { margin: 18px 0 0; font-size: var(--fs-2); color: var(--muted); }
.ss-inline { padding: 0 4px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 700 var(--fs-2) var(--sans); cursor: pointer; }
.search-keys { display: flex; gap: 16px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--divider); font-size: var(--fs-1); color: var(--muted); background: var(--card); }
.search-keys kbd { display: inline-block; min-width: 18px; margin-right: 3px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font: 700 11px / 16px var(--sans); text-align: center; }
@media (max-width: 640px) {
  .search { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .search-inner { height: 100%; }
  .search-results, .search-start { flex: 1; }
  .search-keys { display: none; }
  .search-close kbd { display: none; }
  .search-filters { padding: 10px 14px 0; }
  .search-results { padding: 6px 14px 16px; }
  .p-find { max-width: none; }
  .filter-empty { flex-direction: column; align-items: flex-start; }
}
/* the find box never runs past its column: its padding counts inside its width */
.find-box, .filter, .ltool-find { box-sizing: border-box; min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .fe-text { flex: none; } .fe-acts .btn { flex: 1; } .filter-empty { gap: 12px; } }
/* sub-topic rows on a phone: number, title and year tag on one line, with no side bars */
@media (max-width: 700px) {
  .page-board .point, .page-topic .point { grid-template-columns: 34px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 0 !important; box-shadow: none !important; }
  .page-board .point .yr, .page-topic .point .yr { grid-column: 3; margin-top: 1px; }
  .page-board .point-ref, .page-topic .point-ref { padding-top: 1px; }
}
/* ------------------------------------------------------------------
   The SUVAT mark: three rising bars under a curve, an integral built step by step. One colour, the page's text
   colour, with the bars and the curve cut out so the background shows through: dark on light, light on dark.
------------------------------------------------------------------ */
.logo { width: 40px; height: 40px; color: var(--ink); }
.brand .logo { color: var(--ink); }
@media (max-width: 640px) { .logo { width: 34px; height: 34px; } }
.st-logo { color: var(--s-ink); }
/* lessons: the opening screen follows the light or dark theme like every other scene */
.st-brandscreen { background: var(--s-paper) !important; color: var(--s-ink) !important; }
.st-brandscreen .st-logo { width: 150px; height: 150px; color: inherit; }
.st-brandscreen .st-word { color: var(--s-ink); }
.st-brandscreen .st-tag { color: var(--s-muted); }
.st-brandline .st-logo { width: 38px; height: 38px; }
/* practice questions: "Not needed for Year 12" sits beside the difficulty tag, the same height, an even gap apart */
.q-tags { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-1); }
.q-tags .lvl { margin-top: 0 !important; height: 26px; box-sizing: border-box; }
.nn12-q { display: none; }
html.year-12 .q-tags .nn12-q { display: inline-flex; align-items: center; gap: 5px; height: 26px; box-sizing: border-box; margin: 0 !important; padding: 0 9px; border-radius: var(--r-sm) !important; font: 700 var(--fs-1) / 1 var(--sans); vertical-align: 0; }
html.year-12 .q[data-y="13"] .q-sub::after { content: none !important; display: none !important; }
@media (max-width: 640px) { .q-head { grid-template-columns: minmax(0, 1fr); } .q-tags { justify-content: flex-start; order: -1; margin: 0 0 4px; } }
/* worksheets: a small page with a red PDF label, instead of a coloured circle */
.ws-icon, .ws-row.is-ready .ws-icon, .ws-topic-sheet .ws-icon, .ws-topic-sheet.is-ready .ws-icon, :root[data-theme="dark"] :is(.ws-icon, .ws-row.is-ready .ws-icon, .ws-topic-sheet .ws-icon, .ws-topic-sheet.is-ready .ws-icon) { width: 28px; height: 34px; border: 0 !important; border-radius: 0; background: none !important; color: inherit; }
.ws-icon svg.ws-file { width: 26px; height: 32px; overflow: visible; }
.ws-file .wf-page { fill: var(--card); stroke: var(--line-strong, #8C8778); stroke-width: 1.3; }
.ws-file .wf-fold { fill: none; stroke: var(--line-strong, #8C8778); stroke-width: 1.3; stroke-linejoin: round; }
.ws-file .wf-lines { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linecap: round; }
.ws-file .wf-tag { fill: #D0342C; }
.ws-file .wf-txt { fill: #fff; font: 800 6.4px var(--sans); letter-spacing: .2px; }
:root[data-theme="dark"] .ws-file .wf-tag { fill: #E0443A; }
:root[data-theme="dark"] .ws-file .wf-page { fill: #26282D; }
.ws-row:not(.is-ready) .ws-file, .ws-topic-sheet:not(.is-ready) .ws-file { opacity: .45; }
/* home tour, Worksheets: a worksheet as the site shows it, in the same card style as the other examples */
.vis-ws { width: 100%; max-width: 452px; margin-left: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 1px 0 var(--edge, transparent), 0 10px 24px var(--raise, rgba(26, 33, 49, .06)); overflow: hidden; color: var(--ink); }
.vws-bar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.vws-bar .ws-file { flex: none; width: 26px; height: 32px; overflow: visible; }
.vws-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vws-name strong { font: 700 var(--fs-3) / 1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vws-name span { font-size: var(--fs-1); color: var(--muted); }
.vws-btns { flex: none; display: flex; gap: 6px; }
.vws-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); font: 700 var(--fs-1) var(--sans); color: var(--ink); }
.vws-btn.is-ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .vws-btn.is-ink { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.vws-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--divider); }
.vws-tabs span { padding: 10px 0 9px; font: 700 var(--fs-2) var(--sans); color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vws-tabs .is-on { color: var(--ink); border-bottom-color: var(--hl); }
.vws-page { margin: 14px 16px; padding: 16px 18px 10px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--paper); }
:root[data-theme="dark"] .vws-page { background: #1E2024; }
.vws-q { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font: 400 var(--fs-3) / 1.45 var(--sans); }
.vws-q b { font-weight: 800; }
.vws-q i { font-family: var(--maths); font-size: 1.08em; }
.vws-q em { font-style: normal; font-weight: 700; color: var(--text-2); }
.vws-lines { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 14px 28px; }
.vws-lines i { display: block; height: 0; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 35%, transparent); }
.vws-foot { display: flex; justify-content: space-between; gap: 12px; padding: 0 16px 14px; font-size: var(--fs-1); color: var(--muted); }
@media (max-width: 640px) { .vis-ws { max-width: none; } .vws-btn:not(.is-ink) { display: none; } }
/* every PDF label is the same true red, in light and dark */
.nb-file b, :root[data-theme="dark"] .nb-file b { background: #D0342C !important; color: #fff !important; }
:root[data-theme="dark"] .nb-file b { background: #E0443A !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nb-file b { background: #E0443A !important; color: #fff !important; } :root:not([data-theme="light"]) .ws-file .wf-tag { fill: #E0443A; } }

/* ---- SUVAT Plus: the Plus page and the Plan section in Settings ---- */
.plus-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--sp-8); align-items: start; }
.plus-what { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.plus-what .h2 { margin: 0; }
.plus-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plus-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--divider); }
.plus-list li:last-child { border-bottom: 1px solid var(--divider); }
.plus-ic { width: 44px; height: 44px; display: grid; place-items: center; border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); }
.plus-name { margin: 0 0 var(--sp-1); font: 700 var(--fs-6) / var(--lh-3) var(--serif); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.plus-list p { margin: 0; color: var(--text-2); font-size: var(--fs-4); line-height: var(--lh-2); max-width: 58ch; }
.plus-soon { font: 700 var(--fs-1) / 1 var(--sans); padding: 4px 7px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); color: var(--muted); white-space: nowrap; }
.plus-more { margin: 0; max-width: 62ch; }
.plus-card { position: sticky; top: calc(var(--header-h, 76px) + 20px); display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.plus-card .h3 { margin: 0; }
.plus-seg { align-self: stretch; }
.plus-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; }
.plus-save { font-size: var(--fs-1); font-weight: 700; color: var(--c4); white-space: nowrap; }
.plus-price { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); color: var(--text-2); font-size: var(--fs-5); }
.plus-price strong { font: 700 52px / 1 var(--serif); color: var(--ink); letter-spacing: -0.02em; }
.plus-terms { margin: 0; font-size: var(--fs-4); line-height: var(--lh-2); color: var(--ink); }
.plus-go { width: 100%; }
.plus-go:disabled { opacity: .55; cursor: default; }
.plus-msg { margin: 0; min-height: 1.2em; color: var(--text-2); }
.plus-msg:empty { display: none; }
.plus-points { list-style: none; margin: 0; padding: var(--sp-4) 0 0; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--text-2); }
.plus-points li { position: relative; padding-left: 18px; }
.plus-points li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 4px; border-left: 1.6px solid var(--c4); border-bottom: 1.6px solid var(--c4); transform: rotate(-45deg); }
.plus-faq { margin-top: var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-4); max-width: 860px; }
.plus-faq .h2 { margin: 0; }
@media (max-width: 900px) {
  .plus-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .plus-card { position: static; order: -1; padding: var(--sp-5); }
  .plus-price strong { font-size: 44px; }
}
.plan-welcome { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: color-mix(in srgb, var(--ink) 6%, transparent); font: 700 var(--fs-3) / var(--lh-2) var(--sans); color: var(--ink); }
.plan-welcome.is-done { background: color-mix(in srgb, var(--c4) 14%, transparent); }
.plan-group .set-row { align-items: center; }

/* ---- SUVAT Plus on practice questions: hints before the solution, a similar question after it ---- */
.plus-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--r-sm); font: 700 var(--fs-1) / 1 var(--sans); letter-spacing: 0.02em; color: var(--muted); text-decoration: none; vertical-align: 1px; }
.q-hints { position: relative; z-index: 1; padding: 0 var(--u); }
.q-hints.has-hints { border-top: 1px solid var(--divider); padding-top: var(--sp-4); }
.q .q-hints .q-hint-btn { position: absolute; left: var(--u); top: 100%; margin-top: 1px; display: inline-flex; align-items: center; gap: var(--sp-2); height: 52px; padding: 0; font-weight: 700; font-size: var(--fs-4); white-space: nowrap; }
.q-is-similar { scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.q-hint-btn:hover .plus-chip, .q-similar:hover .plus-chip { text-decoration: none; }
.q-hint-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.q-hint-list li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--fill-sh); background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 0 var(--r) var(--r) 0; animation: hint-in .25s var(--ease, ease) both; }
.q-hint-k { font: 700 var(--fs-2) / var(--lh-1) var(--sans); color: var(--muted); }
.q-hint-t { font-size: var(--fs-5); line-height: var(--lh-3); overflow-x: auto; max-width: 100%; }
.q-hint-end { margin: var(--sp-3) 0 0; }
.q-hints.has-hints { padding-bottom: var(--sp-4); }
.q-hints .q-gate { position: absolute; left: var(--u); top: 100%; margin: 1px 0 0; height: 52px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.q-gate { color: var(--text-2); }
.q-similar { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.q-similar:disabled { opacity: .5; }
.q-similar-k { margin: 0 0 var(--sp-1); flex-basis: 100%; font: 700 var(--fs-2) / 1 var(--sans); color: var(--muted); }
@keyframes hint-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .q-hint-list li { animation: none; } }
:root[data-motion="reduced"] .q-hint-list li { animation: none; }
@media (max-width: 560px) { .q-hints .q-gate { position: static; height: auto; white-space: normal; display: block; padding: 0 0 var(--sp-4); } }

/* ---- Mock exams (SUVAT Plus) ---- */
.tabs a svg { vertical-align: -3px; margin-right: 6px; }
.mock-setup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; margin-top: var(--sp-5); }
.mock-new { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); }
.mock-new .h3, .mock-past .h3 { margin: 0; }
.mock-intro { margin: 0 0 var(--sp-2); max-width: 56ch; }
.mock-new .account-actions { margin-top: var(--sp-3); }
.mock-msg { margin: 0; color: var(--text-2); }
.mock-msg:empty { display: none; }
.mock-past { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }
.mock-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mock-hist li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--divider); }
.mock-hist-main, .mock-hist-score { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mock-hist-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mock-g { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r); border: var(--rule) solid var(--line-strong); background: var(--card); font: 700 var(--fs-6) / 1 var(--serif); color: var(--ink); }
.mock-g-As, .mock-g-A { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.mock-g-U { color: var(--muted); border-style: dashed; }
.mock-g-big { width: 84px; height: 84px; font-size: 40px; flex: none; }
.mock-bar { position: sticky; top: var(--header-h, 76px); z-index: 5; display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); background: var(--card); border: var(--rule) solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1, 0 1px 2px rgba(0, 0, 0, .06)); }
.mock-bar-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.mock-clock { display: flex; align-items: center; gap: var(--sp-3); font: 700 var(--fs-7) / 1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.mock-clock.is-low { color: var(--c2); }
.mock-clock.is-over { color: var(--c1); }
.mock-clock .text-btn { font-size: var(--fs-3); }
.mock-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; }
.mock-guide { margin: 0 0 var(--sp-5); color: var(--text-2); max-width: 70ch; }
[data-mock-paper].is-sitting .answer, [data-mock-paper].is-sitting .q-hints, [data-mock-paper] .q-after, [data-mock-paper].is-marking .answer > summary { display: none; }
[data-mock-paper].is-sitting .q-body { padding-bottom: var(--sp-6); }
[data-mock-paper].is-paused .mock-list { filter: blur(7px); pointer-events: none; user-select: none; }
.mock-end { margin: var(--sp-6) 0 0; }
.mock-mark { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; min-height: 48px; padding: 0 0 0 var(--u); border-top: 1px solid var(--divider); background: color-mix(in srgb, var(--ink) 3%, transparent); }
.mock-mark-l { font: 700 var(--fs-3) / 1.2 var(--sans); margin-right: auto; }
.mock-step { display: inline-flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.mock-step button { width: 36px; height: 36px; border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 700 18px / 1 var(--sans); cursor: pointer; }
.mock-step button:hover { background: var(--paper); }
.mock-step output { min-width: 1.6em; text-align: center; font: 700 var(--fs-6) / 1 var(--sans); }
.mock-step-of { color: var(--muted); font-weight: 700; margin-right: var(--sp-1); }
.mock-res { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-7); max-width: 860px; }
.mock-res .h2, .mock-res .h3 { margin: 0; }
.mock-res-top { display: flex; align-items: center; gap: var(--sp-5); }
.mock-res-top p { margin: var(--sp-1) 0 0; }
.mock-res-score { font-size: var(--fs-5); color: var(--text-2); font-variant-numeric: tabular-nums; }
.mock-res-score strong { color: var(--ink); }
.mock-bounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.mock-bounds li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-3) var(--sp-1); border-left: 1px solid var(--divider); font-variant-numeric: tabular-nums; }
.mock-bounds li:first-child { border-left: none; }
.mock-bounds li.is-you { background: var(--fill); color: var(--on-fill); }
.mock-bounds li.is-you .muted { color: inherit; opacity: .8; }
.mock-res > p { margin: 0; max-width: 70ch; }
.mock-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mock-topics li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 64px 64px; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--divider); }
.mock-topic-name { font-weight: 700; min-width: 0; }
.mock-topic-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); overflow: hidden; }
.mock-topic-bar i { display: block; height: 100%; background: var(--c4); border-radius: 99px; }
.mock-topic-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .mock-setup { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .mock-new { padding: var(--sp-5); }
  .mock-new .set-line { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .mock-new .set-seg { align-self: stretch; }
  .mock-new .set-seg button { flex: 1; }
  .mock-bar { flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3); top: var(--header-h, 60px); }
  .mock-bar-main { flex-basis: 100%; }
  .mock-bar .btn { margin-left: auto; }
  .mock-res { padding: var(--sp-5); }
  .mock-g-big { width: 64px; height: 64px; font-size: 30px; }
  .mock-topics li { grid-template-columns: minmax(0, 1fr) 56px 60px; }
  .mock-topic-bar { display: none; }
  .mock-bounds li { padding: var(--sp-2) 0; }
}
.plus-only { display: none !important; }
html.has-plus .ways > li.plus-only { display: flex !important; }
html.has-plus .tabs a.plus-only { display: inline-block !important; }
@media (min-width: 901px) { html.has-plus .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* mock exams: paper chooser, sections, marks awarded by tapping the mark scheme, removing a result */
.mock-select { flex: none; max-width: 56%; height: 40px; padding: 0 var(--sp-3); border: var(--rule) solid var(--line-strong); border-radius: var(--r); background: var(--card); color: var(--ink); font: 700 var(--fs-3) var(--sans); }
.mock-sec { margin: var(--sp-6) 0 var(--sp-3); font: 700 var(--fs-7) / 1.2 var(--serif); }
.mock-sec:first-child { margin-top: 0; }
.mock-list .mock-sec + .q { margin-top: 0; }
[data-mock-paper].is-marking .working .mm-chip { cursor: pointer; opacity: .55; border-style: dashed; min-width: 34px; height: 28px; transition: opacity .15s, background .15s, box-shadow .15s; user-select: none; }
[data-mock-paper].is-marking .working .mm-chip:hover { opacity: .85; }
[data-mock-paper].is-marking .working .mm-chip[aria-pressed="true"] { opacity: 1; border-style: solid; background: color-mix(in srgb, currentColor 16%, transparent); box-shadow: 0 0 0 1.5px currentColor; }
[data-mock-paper].is-marking .working .mm-chip:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mock-hist li { grid-template-columns: 44px minmax(0, 1fr) auto 32px; }
.mock-del { width: 32px; height: 32px; color: var(--muted); }
.mock-del:hover { color: var(--c1); }
.mock-del.is-sure { color: var(--on-fill); background: var(--c1); border-radius: var(--r-sm); }
@media (max-width: 860px) { .mock-select { max-width: none; width: 100%; } }
.mock-mark .mock-step { justify-content: center; gap: 3px; }
.mock-mark .mock-step output { min-width: 0; font-size: var(--fs-5); }
.mock-mark .mock-step-of { margin: 0; font-size: var(--fs-3); }

/* mock exams: polish. A cover like a real paper, plain numbered questions while sitting, answered ticks, saved results */
.mock-cover { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); margin-bottom: var(--sp-5); }
.mock-cover .h2, .mock-cover .h3, .mock-cover p { margin: 0; }
.mock-cover-k { margin: 0; font: 700 var(--fs-3) / 1.2 var(--sans); color: var(--muted); }
.mock-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: var(--rule) solid var(--line); border-radius: var(--r); max-width: 520px; }
.mock-facts > div { padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--divider); }
.mock-facts > div:first-child { border-left: none; }
.mock-facts dt { font: 700 var(--fs-2) / 1.2 var(--sans); color: var(--muted); }
.mock-facts dd { margin: 2px 0 0; font: 700 var(--fs-6) / 1.2 var(--sans); font-variant-numeric: tabular-nums; }
.mock-rules { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: var(--sp-1); color: var(--text-2); font-size: var(--fs-4); line-height: var(--lh-2); }
.mock-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-4); color: var(--text-2); }
.mock-key li { display: flex; align-items: baseline; gap: var(--sp-3); }
.mock-key strong { color: var(--ink); }
.mock-count { color: var(--text-2); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mock-count:empty { display: none; }
.mock-timeup { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r); background: color-mix(in srgb, var(--c1) 12%, transparent); color: var(--ink); font: 700 var(--fs-3) / var(--lh-2) var(--sans); }
.mock-qn { display: none; margin: 0; align-items: baseline; gap: var(--sp-3); font-family: var(--sans); }
.mock-qn strong { font: 700 var(--fs-6) / 1.2 var(--serif); }
.mock-qn span { font-size: var(--fs-3); color: var(--muted); font-weight: 700; }
[data-mock-paper].is-sitting .q-head > :not(.mock-qn) { display: none; }
[data-mock-paper].is-sitting .mock-qn { display: flex; }
[data-mock-paper].is-sitting .q.is-answered { border-color: var(--c4); }
.mock-done { display: none; align-items: center; gap: var(--sp-2); align-self: flex-end; font: 700 var(--fs-3) / 1 var(--sans); color: var(--text-2); cursor: pointer; }
[data-mock-paper].is-sitting .mock-done { display: inline-flex; }
.mock-done input { width: 18px; height: 18px; accent-color: var(--c4); }
button.mock-hist-main { border: none; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
button.mock-hist-main:disabled { cursor: default; }
button.mock-hist-main:not(:disabled):hover strong { text-decoration: underline; }
.mock-next { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--fill-sh); background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 0 var(--r) var(--r) 0; }
.mock-next p { margin: 0; }
@media (max-width: 860px) { .mock-cover { padding: var(--sp-5); } .mock-count { order: 3; } }

/* ---- Revision planner (SUVAT Plus), at the top of the Journal ---- */
.plan { margin-bottom: var(--sp-7); }
.plan:empty { display: none !important; }
html.has-plus .plan.plus-only { display: block !important; }
.plan-card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-6); }
.plan-card .h3 { margin: 0; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.plan-card p { margin: 0; }
.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.plan-head > div { display: flex; flex-direction: column; gap: var(--sp-1); }
.plan-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan-task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--divider); }
.plan-tick input { width: 20px; height: 20px; accent-color: var(--c4); cursor: pointer; display: block; }
.plan-task-main { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); row-gap: 2px; align-items: baseline; text-decoration: none; color: inherit; min-width: 0; }
.plan-task-main .small { grid-column: 2; }
.plan-task-title { font: 700 var(--fs-5) / var(--lh-2) var(--sans); color: var(--ink); }
.plan-task-main:hover .plan-task-title { text-decoration: underline; }
.plan-kind { grid-row: 1; font: 700 var(--fs-1) / 1 var(--sans); padding: 4px 7px; border-radius: var(--r-sm); border: 1px solid currentColor; white-space: nowrap; align-self: center; }
.plan-kind-weak { color: var(--c1); }
.plan-kind-learn { color: var(--link); }
.plan-kind-fresh { color: var(--c4); }
.plan-task-go { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; font-weight: 700; }
.plan-task.is-done .plan-task-title { text-decoration: line-through; color: var(--muted); }
.plan-task.is-done .plan-kind, .plan-task.is-done .plan-task-go { opacity: .45; }
.plan-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: var(--rule) solid var(--line); border-radius: var(--r); overflow: hidden; }
.plan-week li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2) 2px; border-left: 1px solid var(--divider); }
.plan-week li:first-child { border-left: none; }
.plan-wd { font: 700 var(--fs-3) / 1.2 var(--sans); }
.plan-wn { font-size: var(--fs-1); color: var(--muted); white-space: nowrap; }
.plan-week li.is-rest .plan-wd { color: var(--muted); font-weight: 400; }
.plan-week li.is-today { background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 -3px 0 var(--fill-sh); }
.plan-week li.is-done .plan-wn { color: var(--c4); font-weight: 700; }
.plan-days { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.plan-days button { height: 36px; min-width: 46px; padding: 0 8px; border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--muted); font: 700 var(--fs-3) var(--sans); cursor: pointer; }
.plan-days button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.plan-msg:empty { display: none; }
@media (max-width: 700px) {
  .plan-card { padding: var(--sp-5); }
  .plan-task { grid-template-columns: 28px minmax(0, 1fr); }
  .plan-task-go { grid-column: 2; flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .plan-setup .set-line { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .plan-days { justify-content: flex-start; }
  .plan-setup .set-seg button { flex: 1; padding: 0 6px; }
  .plan-wn { font-size: 10px; }
}
.plan-head .text-btn { flex: none; white-space: nowrap; }
@media (max-width: 700px) {
  .plan-task-main { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .plan-kind { justify-self: start; }
  .plan-task-main .small { grid-column: 1; }
  .plan-task { align-items: start; }
  .plan-tick { padding-top: 2px; }
}

/* mock exams: where did my marks go? */
.mock-why-intro { margin: 0; color: var(--text-2); max-width: 68ch; }
.mock-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mock-why-list li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); align-items: center; padding: var(--sp-3) 0; border-top: 1px solid var(--divider); }
.mock-why-q { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mock-why-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mock-why-pills button { height: 32px; padding: 0 10px; border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: 700 var(--fs-2) var(--sans); cursor: pointer; white-space: nowrap; }
.mock-why-pills button:hover { color: var(--ink); border-color: var(--ink); }
.mock-why-pills button[aria-pressed="true"] { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.mock-why-bar i { background: var(--c1); }
.mock-whys li { grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 76px 48px; }
.mock-advice { margin: 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--fill-sh); background: color-mix(in srgb, var(--ink) 4%, transparent); border-radius: 0 var(--r) var(--r) 0; max-width: 70ch; }
@media (max-width: 860px) { .mock-why-list li { grid-template-columns: minmax(0, 1fr); } .mock-whys li { grid-template-columns: minmax(0, 1fr) 70px 40px; } }

/* mocks: what the chosen paper contains */
.mock-about { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mock-about:empty { display: none; }
.mock-about p { margin: 0; color: var(--text-2); line-height: var(--lh-2); }
.mock-about strong { color: var(--ink); }
.mock-about-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-4); }
.mock-about-h span { font: 700 var(--fs-3) var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }

/* lessons: "Your turn" stops the lesson until the student asks for the answer */
.st-ring, .st-count[hidden] { display: none; }
.player-turn { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 4; width: min(560px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 12px; background: rgba(23, 24, 27, .94); color: #F4F2EC; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-family: var(--sans); }
.player-turn p { margin: 0; }
.pt-k { font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #F0D36B; }
.pt-h { font: 700 18px/1.3 var(--serif); }
.pt-time { font-size: 13px; color: #B9B5A8; font-variant-numeric: tabular-nums; }
.pt-hint { font-size: 14px; line-height: 1.5; padding: 8px 10px; border-left: 3px solid #F0D36B; background: rgba(255, 255, 255, .06); border-radius: 0 6px 6px 0; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pt-actions .btn { background: transparent; color: #F4F2EC; border-color: rgba(255, 255, 255, .35); }
.pt-actions .btn:hover { border-color: #fff; }
.pt-actions .pt-main { background: #F0D36B; color: #17181B; border-color: #F0D36B; }
@media (max-width: 560px) { .player-turn { bottom: 4%; padding: 12px; } .pt-h { font-size: 15px; } .pt-actions .btn { flex: 1 1 auto; } }

/* lessons: see it first, hints and the end-of-lesson check */
.st-see .st-say { font-size: 30px; line-height: 44px; }
.lt-hint { margin-bottom: var(--sp-2); }
.player-check { bottom: auto; top: 50%; transform: translate(-50%, 40px); width: min(420px, calc(100% - 32px)); text-align: left; }
.player-check .pt-main { text-decoration: none; }

/* Mocks: insights across the mocks sat for one course */
.mock-ins { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: var(--rule) solid var(--line); }
.mock-ins .h3, .mock-ins .h4, .mock-ins p { margin: 0; }
.mock-ins .h4 { margin-top: var(--sp-3); font-size: var(--fs-4); font-weight: 700; line-height: 1.3; }
.mock-ins-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.mock-ins-stats div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); }
.mock-ins-stats dt { font-size: var(--fs-2); color: var(--muted); }
.mock-ins-stats dd { margin: 0; font: 700 var(--fs-6) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.mock-ins-chart { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: var(--sp-2); height: 150px; }
.mock-ins-chart li { flex: 1; max-width: 56px; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mock-ins-bar { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; border-bottom: var(--rule) solid var(--line-strong); }
.mock-ins-bar i { display: block; flex: none; width: 100%; background: var(--c4); border-radius: 4px 4px 0 0; }
.mock-ins-chart li:last-child .mock-ins-bar i { background: var(--fill); }
.mock-ins-pct { color: var(--muted); font-variant-numeric: tabular-nums; }
.mock-ins-g { font-weight: 700; font-size: var(--fs-3); }
.mock-ins-topics li { grid-template-columns: minmax(0, 1.4fr) minmax(40px, 1fr) 84px 60px; gap: var(--sp-3); }
@media (max-width: 640px) { .mock-ins-topics li { grid-template-columns: minmax(0, 1fr) 84px 60px; } }

/* Flashcards (Plus) */
html.has-plus .ways > li.plus-only { grid-column: auto; }
@media (min-width: 901px) {
  html.has-plus .ways { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  html.has-plus .ways > li { grid-column: span 2; }
  html.has-plus .ways > li.plus-only { grid-column: span 2; }
}
.fc-home { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; margin-top: var(--sp-5); }
.fc-home .h3 { margin: 0 0 var(--sp-2); }
.fc-intro { margin: 0 0 var(--sp-4); max-width: 70ch; }
.fc-decks, .fc-mine ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.fc-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fc-decks > li { display: flex; max-width: none; }
.fc-decks > li:has(.fc-deck-all), .fc-decks > li.muted { grid-column: 1 / -1; }
.fc-deck { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sp-4); align-items: center; text-align: left; padding: var(--sp-3) var(--sp-4); border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; transition: border-color 0.15s, box-shadow 0.15s; }
.fc-deck:hover { border-color: var(--line-strong); box-shadow: var(--sh-1); }
.fc-deck-name { font-weight: 700; }
.fc-deck-meta { grid-column: 1; color: var(--muted); }
.fc-deck-due { grid-column: 2; grid-row: 1 / span 2; font-weight: 700; font-size: var(--fs-3); padding: 4px 10px; border-radius: 999px; background: var(--c3); color: #1a1a1a; white-space: nowrap; }
.fc-deck-due.is-none { background: transparent; color: var(--muted); font-weight: 400; }
.fc-deck-all { border-color: var(--line-strong); }
.fc-own form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.fc-own textarea { width: 100%; padding: var(--sp-3); border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; resize: vertical; }
.fc-own label { font-weight: 700; margin-top: var(--sp-2); }
.fc-mine { margin-top: var(--sp-6); }
.fc-study { max-width: 720px; margin: var(--sp-5) auto 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.fc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--sp-4); }
.fc-bar p { margin: 0; }
.fc-title { font-weight: 700; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-card { position: relative; width: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-6); border: var(--rule) solid var(--line-strong); border-radius: var(--r-lg, 16px); background: var(--card); color: var(--ink); font: inherit; text-align: center; cursor: pointer; box-shadow: var(--sh-1); transition: box-shadow 0.15s, border-color 0.15s; }
.fc-card:hover { box-shadow: var(--sh-2); }
.fc-card.is-back { border-color: var(--c4); }
.fc-side { position: absolute; top: var(--sp-4); left: var(--sp-5); font-weight: 700; color: var(--muted); }
.fc-text { display: block; width: 100%; margin: 0 auto; text-align: center; font: 700 var(--fs-6) / 1.45 var(--serif); max-width: 34ch; overflow-wrap: anywhere; }
.fc-card.is-back .fc-text { font: 400 var(--fs-5) / 1.6 var(--sans, inherit); max-width: 52ch; }
.fc-tip { position: absolute; bottom: var(--sp-4); left: 0; right: 0; width: 100%; max-width: none; margin: 0; text-align: center; }
.fc-alt { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: var(--rule) solid var(--line); font-size: var(--fs-4); color: var(--text-2, var(--ink)); }
.fc-alt-h { font-weight: 700; color: var(--muted); }
.fc-rate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.fc-rate .btn { height: 52px; }
.fc-done { text-align: center; padding: var(--sp-7); }
.fc-done .account-actions { justify-content: center; }
@media (max-width: 900px) { .fc-home { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .fc-decks { grid-template-columns: minmax(0, 1fr); } .fc-bar { grid-template-columns: minmax(0, 1fr) auto; } .fc-bar .fc-title { grid-column: 1 / -1; grid-row: 2; text-align: left; } .fc-card { min-height: 260px; padding: var(--sp-8) var(--sp-4); } .fc-text { font-size: var(--fs-5); } }
.fc-bar > :first-child { justify-self: start; }
.fc-bar .fc-count { justify-self: end; text-align: right; }
.fc-card { padding-bottom: calc(var(--sp-8) + var(--sp-4)); }
.fc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.fc-head .h3 { margin: 0; }
.fc-own form { gap: var(--sp-2); }
.fc-own .fc-cat, .fc-own .fc-newcat { width: 100%; height: 44px; padding: 0 var(--sp-3); border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; }
.fc-own .fc-newcat { margin-top: var(--sp-2); }
.fc-form-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.fc-deck.is-own { border-left: 4px solid var(--c4); }
.fc-mine-h { margin: 0 0 var(--sp-3); font-size: var(--fs-4); font-weight: 700; }
.fc-group + .fc-group { margin-top: var(--sp-5); }
.fc-group-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 36px; padding-bottom: var(--sp-2); border-bottom: var(--rule) solid var(--line-strong); }
.fc-group-name { margin: 0; font-size: var(--fs-4); font-weight: 700; overflow-wrap: anywhere; }
.fc-group ul { gap: 0; }
.fc-group li { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--rule) solid var(--line); max-width: none; }
.fc-group li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.fc-group p { margin: var(--sp-3) 0 0; }
.fc-acts { display: flex; gap: 2px; flex: none; }
.fc-rename { display: flex; gap: var(--sp-2); width: 100%; margin: 0; flex-direction: row !important; }
.fc-rename input { flex: 1; min-width: 0; height: 36px; padding: 0 var(--sp-3); border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; }
.fc-own select.fc-cat, .fc-own input.fc-newcat { width: 100%; max-width: none; }

/* Progress (Plus) */
html.has-plus .pg-link.plus-only { display: block !important; }
.pg-link { margin: 0 0 var(--sp-5); }
.pg { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-5); }
.pg-sec .h3 { margin: 0 0 var(--sp-2); }
.pg-note { margin: 0 0 var(--sp-4); }
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7); }
.pg-two .h3 { margin-bottom: var(--sp-4); }
.pg-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.pg-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--sp-4); border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); }
.pg-stat dt { font-size: var(--fs-3); color: var(--muted); }
.pg-stat dd { margin: 0; font: 700 var(--fs-8, 28px) / 1.1 var(--serif); font-variant-numeric: tabular-nums; }
.pg-stat p { margin: 0; line-height: 1.4; }
.pg-heat { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.pg-heat-days, .pg-week { display: grid; grid-template-rows: 16px repeat(7, 18px); gap: 4px; }
.pg-heat-days { padding-right: 4px; } .pg-heat-days span:first-child { grid-row: 2; }
.pg-heat-days span { line-height: 18px; font-size: 11px; }
.pg-week-l { line-height: 16px; font-size: 11px; white-space: nowrap; width: 18px; overflow: visible; }
.pg-day { display: block; width: 18px; height: 18px; border-radius: 4px; background: var(--divider); }
.pg-l1 { background: color-mix(in srgb, var(--c4) 30%, var(--divider)); } .pg-l2 { background: color-mix(in srgb, var(--c4) 55%, var(--divider)); }
.pg-l3 { background: color-mix(in srgb, var(--c4) 80%, var(--divider)); } .pg-l4 { background: var(--c4); }
.pg-heat-key { display: flex; align-items: center; gap: 4px; margin: var(--sp-3) 0 0; }
.pg-heat-key .pg-day { width: 14px; height: 14px; }
.pg-bars { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-2); height: 190px; }
.pg-bars li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; max-width: none; text-align: center; }
.pg-bars li .muted { font-size: 11px; white-space: nowrap; }
.pg-bar { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; border-bottom: var(--rule) solid var(--line-strong); }
.pg-bar i { display: flex; align-items: flex-end; width: 100%; min-height: 0; background: color-mix(in srgb, var(--c4) 35%, var(--divider)); border-radius: 4px 4px 0 0; overflow: hidden; }
.pg-bar b { display: block; width: 100%; background: var(--c4); }
.pg-bar-n { min-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-focus { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); counter-reset: f; }
.pg-focus li { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: var(--rule) solid var(--line); border-left: 4px solid var(--c1); border-radius: var(--r); background: var(--card); max-width: none; }
.pg-focus-go { display: flex; gap: var(--sp-4); margin-top: auto; font-size: var(--fs-3); font-weight: 700; }
.pg-table-wrap { overflow-x: auto; margin-top: var(--sp-5); border: var(--rule) solid var(--line); border-radius: var(--r); background: var(--card); }
.pg-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); min-width: 760px; }
.pg-table th, .pg-table td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: middle; border-bottom: var(--rule) solid var(--line); }
.pg-table thead th { font-size: var(--fs-2); color: var(--muted); font-weight: 700; white-space: nowrap; background: var(--paper); }
.pg-table tbody tr:last-child th, .pg-table tbody tr:last-child td { border-bottom: 0; }
.pg-table tbody th { font-weight: 700; max-width: 300px; }
.pg-table td .meter { display: inline-flex; gap: 2px; margin-right: var(--sp-2); vertical-align: middle; }
.pg-table td .meter i { width: 14px; height: 8px; border-radius: 2px; }
.pg-table .meter .lv-1 { background: var(--c1); } .pg-table .meter .lv-2 { background: var(--c2); } .pg-table .meter .lv-3 { background: var(--c3); } .pg-table .meter .lv-4 { background: var(--c4); }
.pg-frac { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-mini { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--divider); overflow: hidden; }
.pg-mini i { display: block; height: 100%; background: var(--c4); }
.pg-line { width: 100%; height: auto; display: block; }
.pg-grid { stroke: var(--line); stroke-width: 1; }
.pg-axis { fill: var(--muted); font: 11px var(--sans); }
.pg-path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.pg-dot { fill: var(--c4); stroke: var(--card); stroke-width: 2; }
.pg-pt { fill: var(--ink); font: 700 12px var(--sans); }
.pg .j-dist-key { margin-top: var(--sp-3); }
@media (max-width: 1000px) { .pg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-two { grid-template-columns: minmax(0, 1fr); } .pg-focus { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-stat dd { font-size: var(--fs-6); } }
.pg-rest { margin-top: var(--sp-4); }
.pg-rest summary { cursor: pointer; font-weight: 700; font-size: var(--fs-3); padding: var(--sp-2) 0; }
.pg-none { margin-top: var(--sp-4); }
.pg, .pg-sec, .pg-two > div { min-width: 0; }
.pg-table-wrap { max-width: 100%; }
.pg-table-wrap, .pg-heat { position: relative; }
.fc-gate { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--rule) solid var(--line-strong); border-radius: var(--r); background: var(--card); max-width: none; }
.fc-done .fc-gate { text-align: left; }
.pg-gate { padding: var(--sp-6); } .pg-gate p { max-width: 70ch; }

/* Multiple-choice questions */
.q-mc { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.q-mc > li { display: flex; max-width: none; }
.q-opt { width: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--rule) solid var(--line-strong); border-radius: var(--r); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.q-opt:hover:not(:disabled) { border-color: var(--ink); }
.q-opt:disabled { cursor: default; opacity: 1; }
.q-opt-l { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: var(--rule) solid var(--line-strong); border-radius: 50%; font-weight: 700; font-size: var(--fs-3); }
.q-opt-t { min-width: 0; overflow-wrap: anywhere; }
.q-opt[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.q-opt[aria-pressed="true"] .q-opt-l { background: var(--fill); color: var(--on-fill); border-color: var(--fill); }
.q-opt.is-right { border-color: var(--c4); box-shadow: inset 0 0 0 1px var(--c4); background: color-mix(in srgb, var(--c4) 10%, var(--card)); }
.q-opt.is-right .q-opt-l { background: var(--c4); color: #fff; border-color: var(--c4); }
.q-opt.is-wrong { border-color: var(--c1); box-shadow: inset 0 0 0 1px var(--c1); background: color-mix(in srgb, var(--c1) 8%, var(--card)); }
.q-opt.is-wrong .q-opt-l { background: var(--c1); color: #fff; border-color: var(--c1); }
.q-mc-note { margin: var(--sp-3) 0 0; font-weight: 700; min-height: 1.4em; }
.q-mc-note:empty { display: none; }
.q:has(.q-mc) .q-self > .q-self-q, .q:has(.q-mc) .q-self > [data-self] { display: none; }
.q:has(.q-mc) .q-parts .q-marks { display: none; }
.mm-auto { cursor: default; }
@media (max-width: 640px) { .q-mc { grid-template-columns: minmax(0, 1fr); } }

/* Lesson knowledge test */
.lq { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.lq-q { max-width: none; } .lq-q[hidden] { display: none; }
.lq-text { display: flex; gap: 10px; margin: 0 0 10px; font-weight: 700; }
.lq-n { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: 13px; }
.lq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lq-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: var(--rule) solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lq-opt:disabled { cursor: default; }
.lq-l { flex: none; font-weight: 700; }
.lq-opt.is-right { border-color: var(--c4); background: color-mix(in srgb, var(--c4) 14%, var(--card)); }
.lq-opt.is-wrong { border-color: var(--c1); background: color-mix(in srgb, var(--c1) 12%, var(--card)); }
.lq-why { margin: 10px 0 0; font-size: var(--fs-3); }
.lq-score { margin: 12px 0 0; font-weight: 700; } .lq-score:empty { display: none; }
.player-check.has-quiz { width: min(640px, calc(100% - 32px)); transform: translate(-50%, -50%); max-height: calc(100% - 24px); overflow-y: auto; }
.player-check .lq-text, .player-check .lq-why, .player-check .lq-score { color: #F4F2EC; }
.player-check .lq-n { background: #F0D36B; color: #17181B; }
.player-check .lq-opt { background: rgba(255, 255, 255, .06); color: #F4F2EC; border-color: rgba(255, 255, 255, .3); }
.player-check .lq-opt.is-right { border-color: #7BD3A0; background: rgba(123, 211, 160, .18); }
.player-check .lq-opt.is-wrong { border-color: #F08A7A; background: rgba(240, 138, 122, .18); }
@media (max-width: 560px) { .lq-opts { grid-template-columns: minmax(0, 1fr); } }
.lq-opt:disabled { opacity: 1; color: inherit; }

/* Lessons: "Try it yourself" adjustable diagrams */
.xp { margin-top: 12px; padding: 14px; border: var(--rule) solid var(--line); border-radius: 12px; background: var(--card); }
.xp-svg { display: block; width: 100%; height: auto; max-height: 360px; }
.xp-ax { stroke: var(--line-strong); stroke-width: 1.2; }
.xp-c, .xp-ghost, .xp-t, .xp-d { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xp-c { stroke: var(--ink); stroke-width: 2.6; }
.xp-ghost { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 5; }
.xp-t { stroke: var(--c1); stroke-width: 2.2; }
.xp-d { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; }
.xp-dot { fill: var(--c1); stroke: var(--card); stroke-width: 2; }
.xp-tx { fill: var(--muted); font: 12px var(--sans); } .xp-lab { fill: var(--ink); font-weight: 700; font-size: 14px; }
.xp-out { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 12px; font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.xp-out span:first-child { font-weight: 700; }
.xp-ctl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; }
.xp-s { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-3); }
.xp-s > span { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; }
.xp-s output { font-variant-numeric: tabular-nums; color: var(--muted); }
.xp-s input { width: 100%; accent-color: var(--ink); }

/* Exam technique trainer (Plus) */
.tech-lede { margin: var(--sp-5) 0 0; }
.tech { display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-6); max-width: 860px; }
.tech-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: var(--rule) solid var(--line); }
.tech-head .h3 { margin: 0; } .tech-score { margin: 0; font-weight: 700; }
.tech-sec > .muted { margin: var(--sp-3) 0 var(--sp-5); }
.tech .lq { gap: var(--sp-6); }
.tech .lq-opts { grid-template-columns: minmax(0, 1fr); }
.tech .lq-why { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c4); background: var(--card); }
.tech-again { margin: var(--sp-5) 0 0; }

/* Journal: "For today" (Plus) */
html.has-plus .today.plus-only { display: flex !important; }
.today { align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border: var(--rule) solid var(--line); border-left: 4px solid var(--c3); border-radius: var(--r); background: var(--card); }
.today:empty { display: none !important; }
.today-k { margin: 0; font-weight: 700; }
.today ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-3); }
.today li { max-width: none; }

/* Practice: check a typed answer */
.q-checks { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--rule) dashed var(--line); }
.q-checks-h { margin: 0; color: var(--muted); font-weight: 700; }
.q-check { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin: 0; }
.q-check label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.q-check-l { font-weight: 700; min-width: 2.2em; }
.q-check input { width: 200px; max-width: 46vw; height: 36px; padding: 0 var(--sp-3); border: var(--rule) solid var(--line-strong); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.q-check-note { font-weight: 700; }
.q-check.is-right input { border-color: var(--c4); } .q-check.is-right .q-check-note { color: var(--c4); }
.q-check.is-close input { border-color: var(--c2); }
.q-check.is-wrong input { border-color: var(--c1); }
[data-mock-list] .q-checks, .is-sitting .q-checks, .is-marking .q-checks { display: none; }
@media print { .q-checks { display: none; } }
.xp-bar { fill: var(--c4); }
.lt-check { margin: 10px 0; }
.player-turn .lt-check input { background: rgba(255, 255, 255, .08); color: #F4F2EC; border-color: rgba(255, 255, 255, .35); }
.player-turn .lt-check .q-check-note, .player-turn .lt-check .q-check-u { color: #F4F2EC; }
.player-turn .lt-check.is-right .q-check-note { color: #7BD3A0; }
.lq-why:empty { display: none; }
/* a typed question in a lesson's knowledge test */
.lq-check { margin: 0 0 4px; }
.lq-skip { font-size: var(--fs-3); }
.lq-skip[hidden] { display: none; }
.lq-q[data-lq-q="typed"] .lq-why { padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c4); background: var(--card); line-height: 2; overflow-x: auto; }
.player-turn .lq-check input { background: rgba(255, 255, 255, .08); color: #F4F2EC; border-color: rgba(255, 255, 255, .35); }
.player-turn .lq-check .q-check-note, .player-turn .lq-check .q-check-u, .player-turn .lq-skip { color: #F4F2EC; }
.player-turn .lq-check.is-right .q-check-note { color: #7BD3A0; }
.player-check .lq-q[data-lq-q="typed"] .lq-why { background: rgba(255, 255, 255, .06); border-left-color: #7BD3A0; max-height: 9.5em; overflow-y: auto; }
/* practice filters: the pill labels stay on one line now that the bar has a question-type field */
.fbar-practice .pill button { white-space: nowrap; }

/* ================================================================== SUVAT theme: marked work
   The look comes from the wordmark: heavy grotesque letters in ink, and one red tick.
   Plain paper, ink, headings in Bricolage Grotesque. Red is the marking pen: the tick in the name,
   the line under a title, the line under the page you are on, the marks in a mark scheme.
   Right and wrong keep green and red; the yellow highlighter is kept only for search matches and
   the final line of an answer. Everything below overrides the older layers above; tokens come first. */
:root { --r-sm: 6px; --r: 10px; --r-lg: 16px; }
:root:not([data-theme="dark"]) {
  --paper: #F5F4F0; --card: #FFFFFF; --ink: #16181D; --text-2: #3A3D45; --muted: #62656E;
  --divider: #E9E7E1; --line: #DAD7CF; --line-strong: #8A8D94; --edge: #D6D3CB; --dashed: #A9A69E;
  --link: #16181D; --red: #C4281F; --brand: #D9352B; --pen: #1E3FAE;
  --fill: #16181D; --on-fill: #FFFFFF; --fill-soft: #EFEDE7; --fill-sh: #D9352B;
  --sticky: #FFFFFF; --on-ink: #FFFFFF; --band: #16181D; --on-band: #FFFFFF;
  --raise: rgba(22, 24, 29, .10); --lift-sh: 3px 3px 0 #16181D; --margin: #E9E7E1; --grid: #E9E7E1;
  --ring: color-mix(in srgb, #16181D 22%, transparent);
  --core: #16181D; --core-dark: #16181D;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #111215; --card: #1A1C20; --ink: #F2F0EA; --text-2: #C9C7C0; --muted: #9C9A94;
  --divider: #26282D; --line: #303339; --line-strong: #6F737B; --edge: #08090A; --dashed: #4A4D55;
  --link: #F2F0EA; --red: #FF7A6E; --brand: #EC4A3F; --pen: #A9BCF7;
  --fill: #F2F0EA; --on-fill: #111215; --fill-soft: #24262B; --fill-sh: #EC4A3F;
  --sticky: #1A1C20; --on-ink: #111215; --band: #1A1C20; --on-band: #F2F0EA;
  --raise: rgba(0, 0, 0, .5); --lift-sh: 3px 3px 0 #000; --margin: #26282D; --grid: #26282D;
  --ring: color-mix(in srgb, #F2F0EA 30%, transparent);
  --core: #F2F0EA; --core-dark: #3F4148;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111215; --card: #1A1C20; --ink: #F2F0EA; --text-2: #C9C7C0; --muted: #9C9A94;
    --divider: #26282D; --line: #303339; --line-strong: #6F737B; --edge: #08090A; --dashed: #4A4D55;
    --link: #F2F0EA; --red: #FF7A6E; --brand: #EC4A3F; --pen: #A9BCF7;
    --fill: #F2F0EA; --on-fill: #111215; --fill-soft: #24262B; --fill-sh: #EC4A3F;
    --sticky: #1A1C20; --on-ink: #111215; --band: #1A1C20; --on-band: #F2F0EA;
    --raise: rgba(0, 0, 0, .5); --lift-sh: 3px 3px 0 #000; --margin: #26282D; --grid: #26282D;
    --ring: color-mix(in srgb, #F2F0EA 30%, transparent);
    --core: #F2F0EA; --core-dark: #3F4148;
    color-scheme: dark;
  }
}

/* ---------- the wordmark */
.logo { width: auto; height: 30px; aspect-ratio: 391 / 140; color: var(--ink); }
.logo .lg-tick { stroke: var(--brand); }
.brand { gap: 0; }

/* ---------- type: headings speak in the wordmark's voice */
h1, h2, .h1, .h2 { font-weight: 800; letter-spacing: -0.02em; }
h3 { letter-spacing: -0.01em; }
a { text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; }

/* ---------- the red pen: one short stroke under a title; no highlighter on headline words */
.page-head .h1::after, .learn-head .h1::after, .settings-head .h1::after,
.page-home .section > .h2-big::after, .page-home .section-intro .h2-big::after { background: var(--brand); }
:root[data-theme="dark"] :is(.page-head .h1, .learn-head .h1, .settings-head .h1)::after,
:root[data-theme="dark"] .page-home .section > .h2-big::after,
:root[data-theme="dark"] .page-home .section-intro .h2-big::after { background: var(--brand); }
.hl, .pop-h { padding: 0; margin: 0; background: none; }
.vws-tabs .is-on { border-bottom-color: var(--brand); }

/* ---------- home: a bigger headline, and the lesson picture sits on a red sheet */
.home-hero .h1-big { max-width: 13ch; font-size: clamp(40px, 4.7vw, 60px); line-height: 1.03; letter-spacing: -0.035em; }
.page-home .showcase::before, .page-home .shot-lesson::before { background: var(--brand); }
:root[data-theme="dark"] .page-home .showcase::before, :root[data-theme="dark"] .page-home .shot-lesson::before { background: var(--brand); }
@media (max-width: 860px) {
  .home-hero .h1-big { font-size: 40px; line-height: 1.05; }
  .page-home .shot-lesson, :root[data-theme="dark"] .page-home .shot-lesson { box-shadow: 8px 8px 0 var(--brand); }
}

/* ---------- footer: an ink band in both themes, the wordmark reversed out */
.site-footer {
  --ink: #F2F0EA; --text-2: #C9C7C0; --muted: #A3A19A; --divider: #2B2D33; --line: #303339; --link: #F2F0EA; --brand: #EC4A3F; --red: #FF7A6E; --fill-sh: #EC4A3F;
  background: #16181D; color: var(--ink); border-top: none;
}
:root[data-theme="dark"] .site-footer { background: #0A0B0D; border-top: 1px solid #26282D; }
.site-footer .logo { height: 34px; }
.site-footer .brand-full { display: block; margin: var(--sp-3) 0 0; font: 700 var(--fs-4) / 1.3 var(--serif); letter-spacing: 0; color: var(--ink); }
.site-footer a, .site-footer .link-btn { color: var(--text-2); }
.site-footer a:hover, .site-footer .link-btn:hover { color: #FFFFFF; }

/* ---------- page titles a size up; dark keeps the red stroke where the old theme used chalk */
.h1 { font-size: 38px; line-height: 42px; }
@media (max-width: 700px) { .h1 { font-size: 30px; line-height: 34px; } }
:root[data-theme="dark"] .footer-h::after,
:root[data-theme="dark"] .header-tools .settings-btn[aria-current="page"]::after { background: var(--brand); }
:root[data-theme="dark"] .site-nav a::after { background: var(--brand) !important; }
:root[data-theme="dark"] .site-nav a[aria-current="page"] { border-bottom-color: var(--brand); }
:root[data-theme="dark"] .set-nav a.is-on { box-shadow: inset 3px 0 0 var(--brand), 0 0 0 1px var(--line); }
:root[data-theme="dark"] .lb-pill button[aria-pressed="true"] { border-bottom-color: var(--brand) !important; }

/* ---------- the invitation to make an account: a sheet of paper on a red one, no sticky note, no tape */
.gate, :root[data-theme="dark"] .gate { background: var(--card); border: 1.5px solid var(--ink) !important; border-radius: var(--r-lg); box-shadow: 6px 6px 0 var(--brand); }
.gate::before, :root[data-theme="dark"] .gate::before { content: none; }
.gate-dialog .gate { box-shadow: 6px 6px 0 var(--brand); }
.gate-points svg { color: var(--brand); }

/* ---------- lessons: the stage and the reading view take the new ink, paper and red */
.stage, .player-text { --s-ink: #16181D; --s-paper: #FEFEFC; --s-red: #C4281F; --s-muted: #62656E; --s-green: #1F7A4D; --s-line: #E9E7E1; --s-card: #FFFFFF; --s-on-ink: #FFFFFF; --s-blue: #1E3FAE; --s-sh: rgba(30, 63, 174, .14); --s-brand: #D9352B; }
:root[data-theme="dark"] .stage, :root[data-theme="dark"] .player-text { --s-ink: #F2F0EA; --s-paper: #111215; --s-red: #FF7A6E; --s-muted: #9C9A94; --s-green: #86C9B8; --s-line: #26282D; --s-card: #1A1C20; --s-on-ink: #111215; --s-blue: #A9BCF7; --s-sh: rgba(169, 188, 247, .18); --s-brand: #EC4A3F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage, :root:not([data-theme="light"]) .player-text { --s-ink: #F2F0EA; --s-paper: #111215; --s-red: #FF7A6E; --s-muted: #9C9A94; --s-green: #86C9B8; --s-line: #26282D; --s-card: #1A1C20; --s-on-ink: #111215; --s-blue: #A9BCF7; --s-sh: rgba(169, 188, 247, .18); --s-brand: #EC4A3F; } }
:root[data-theme="dark"] .player-screen, :root[data-theme="dark"] .player.is-full .player-screen, :root[data-theme="dark"] .player-box:fullscreen .player-screen { background: #111215; }
.player, :root[data-theme="dark"] .player { --pl-bg: #16181D; --pl-line: #303339; --pl-fg: #F2F0EA; --pl-muted: #A3A19A; --pl-hover: #26282D; --pl-blue: #F2F0EA; }
.st-logo { width: auto; height: 26px; color: var(--s-ink); }
.st-logo .lg-tick { stroke: var(--s-brand); }
.st-brand .st-logo { width: auto; height: 26px; }
.st-brandline .st-logo { width: auto; height: 34px; }
.st-brandscreen { gap: 26px; }
.st-brandscreen .st-logo { width: 460px; height: auto; }
.st-brandscreen .st-tag { font: 700 26px var(--serif); letter-spacing: -0.01em; color: var(--s-muted); }

/* ---------- "you are here" is always the red line: section tabs and subject tabs as well as the header */
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { background: var(--brand); }
.subject-tabs [aria-selected="true"] { border-bottom-color: var(--brand); }
.subject-tabs button:not([aria-selected="true"]):hover { border-bottom-color: color-mix(in srgb, var(--brand) 35%, transparent); }

/* ---------- drawings in questions keep a blue pen for the thing being drawn, so it reads apart from the ink axes */
.q-fig { --s-blue: var(--pen); --s-sh: color-mix(in srgb, var(--pen) 14%, transparent); }
.prof-card, .bn-pick, .pe-mini { --acc: #16181D; }

/* ---------- small things that still wore the old colours */
.consent { border-top-color: var(--brand); }
@media (max-width: 700px) { .gate, :root[data-theme="dark"] .gate { box-shadow: 4px 4px 0 var(--brand); margin-right: 4px; } }

/* ---------- the page background: the five suvat equations in the wordmark's lettering, each one ticked.
   Two SVG tiles used as masks (made by tools/wallpaper.py), so the ink and the red come from the tokens above
   and follow light and dark. The layers are fixed behind the page; print hides them (see @media print). */
:root { --wall-eq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cpath d='M125.6 128.4 115 105.4 122.8 104.3 129.5 121.7 129.6 121.6 131.5 103.1 138.8 102 135 127.1ZM152.6 108.5 151.7 102 170.1 99.4 171 105.9ZM153.9 117.3 153 110.9 171.4 108.3 172.3 114.8ZM195 119.3Q191.1 119.9 188.8 117.4Q186.5 114.9 185.7 109.3L183.8 95.7L191.2 94.7L193.1 108.2Q193.5 110.8 194.4 111.7Q195.3 112.7 196.7 112.5Q197.7 112.3 198.4 111.7Q199.2 111.1 199.7 109.9Q200.2 108.7 200.3 107Q200.4 105.3 200.1 102.9L198.8 93.6L206.1 92.6L208 105.8L209.5 116.6L203.2 117.5L201.9 108.1L201.6 108.2Q201.8 111.7 201.2 114.1Q200.5 116.4 199 117.7Q197.4 119 195 119.3ZM229.1 108.3 226.5 89.2 232.4 88.3 235.1 107.5ZM221.9 102.5 221.1 96.7 239.6 94.1 240.4 99.9ZM262.6 109.8Q260.8 110.1 259.1 109.7Q257.4 109.3 256.1 108Q254.9 106.7 254.5 104.3Q254.2 102 254.9 100.5Q255.6 99 256.9 98Q258.2 96.9 259.9 96.2Q261.6 95.6 263.2 95Q265.5 94.2 266.7 93.8Q267.8 93.3 268.2 92.9Q268.6 92.5 268.5 91.9Q268.3 90.5 267.2 90Q266.2 89.4 264.6 89.7Q263.6 89.8 262.6 90.3Q261.7 90.8 261.1 91.8Q260.6 92.9 260.9 94.6L254.3 95.1Q253.8 92.2 254.5 90.2Q255.2 88.1 256.7 86.8Q258.2 85.5 260.1 84.8Q262.1 84.1 264 83.8Q267.6 83.3 270.1 84.3Q272.6 85.3 274.1 87.7Q275.6 90.1 276.1 93.7L276.7 97.9Q276.9 99.4 277.1 101Q277.3 102.5 277.5 104Q277.7 105.5 278 107L271.6 107.9Q271.3 106.3 271.1 104.6Q270.9 102.9 270.6 101L270.3 101.1Q270.4 103.1 269.5 105Q268.6 106.9 266.9 108.2Q265.1 109.5 262.6 109.8ZM264.9 104Q265.7 103.9 266.6 103.5Q267.4 103.1 268.1 102.3Q268.8 101.5 269.1 100.2Q269.5 98.9 269.2 97.1L269.1 96L270.3 95.7Q270 96.4 269.2 96.9Q268.4 97.3 267.4 97.7Q266.4 98 265.3 98.4Q264.3 98.8 263.4 99.2Q262.6 99.7 262.1 100.3Q261.6 101 261.7 102Q261.9 103.2 262.8 103.7Q263.8 104.2 264.9 104ZM290.2 105.8Q286 106.4 283.6 104.6Q281.2 102.7 280.6 98.1L279.2 88.2L276.5 88.5L275.9 83.9L276 83.9Q278.8 83.1 279.7 81.4Q280.7 79.7 280.6 76.6L280.5 76.5L284.9 75.9L285.6 81.4L291.2 80.6L292 86.5L286.5 87.3L287.8 96.4Q288 98.2 288.9 98.8Q289.9 99.4 291.1 99.2Q291.8 99.1 292.4 98.8Q293.1 98.6 293.6 98.2L294.5 104.6Q293.2 105.2 292.1 105.5Q291 105.7 290.2 105.8ZM440.7 255.8Q438.5 255.5 436.6 254.9Q434.8 254.3 433.5 253.2Q432.2 252.1 431.6 250.4Q431.1 248.7 431.4 246.4L437.4 246.5Q437.3 247.9 437.8 248.9Q438.2 249.8 439.1 250.3Q440 250.9 441.4 251Q442.7 251.1 443.7 250.8Q444.7 250.5 444.8 249.4Q444.9 248.9 444.6 248.5Q444.3 248.1 443.4 247.7Q442.5 247.3 440.9 246.7Q438.8 245.9 437.1 245.2Q435.5 244.5 434.4 243.6Q433.2 242.7 432.7 241.5Q432.2 240.4 432.4 238.7Q432.6 236.4 434 235Q435.4 233.5 437.7 232.8Q439.9 232.2 442.8 232.5Q445.3 232.8 447.5 233.8Q449.6 234.8 450.7 236.8Q451.8 238.7 451.1 241.6L445.3 241.6Q445.5 240.4 445.2 239.5Q444.8 238.6 444 238Q443.1 237.5 441.9 237.4Q440.5 237.2 439.6 237.7Q438.8 238.1 438.7 238.9Q438.7 239.5 439.1 240Q439.5 240.5 440.5 240.9Q441.5 241.3 443.1 241.9Q444.5 242.3 446 242.9Q447.5 243.6 448.7 244.5Q450 245.4 450.7 246.7Q451.4 248.1 451.2 250Q451 252 449.7 253.5Q448.4 254.9 446.1 255.5Q443.9 256.1 440.7 255.8ZM464.2 243 464.8 237.1 481.7 238.8 481.1 244.8ZM463.4 251.1 464 245.2 480.9 246.9 480.2 252.9ZM499.3 261.9Q495.7 261.6 494.3 258.9Q492.8 256.2 493.3 251L494.7 238.6L501.4 239.3L500.1 251.6Q499.9 254.1 500.5 255.1Q501 256.1 502.3 256.3Q503.3 256.4 504.1 256Q504.9 255.6 505.6 254.6Q506.3 253.7 506.8 252.2Q507.2 250.7 507.5 248.5L508.4 240L515.1 240.7L513.9 252.8L512.8 262.8L507 262.2L507.9 253.6L507.7 253.5Q507.1 256.7 506 258.6Q504.9 260.6 503.2 261.4Q501.6 262.2 499.3 261.9ZM524.2 264.5Q520.3 264.1 518.6 261.9Q516.9 259.7 517.3 255.5L518.3 246.4L515.9 246.1L516.3 241.8L516.4 241.9Q519.1 241.8 520.3 240.5Q521.5 239.2 522.1 236.4L522.1 236.3L526.1 236.7L525.5 241.8L530.6 242.3L530 247.8L525 247.2L524.1 255.6Q523.9 257.2 524.6 257.9Q525.3 258.7 526.4 258.8Q527 258.9 527.7 258.8Q528.3 258.7 528.9 258.4L528.3 264.3Q526.9 264.5 525.9 264.5Q524.9 264.5 524.2 264.5ZM547 261.3 548.8 243.7 554.3 244.3 552.4 261.9ZM541.9 254.5 542.4 249.3 559.4 251.1 558.8 256.3ZM573.5 256.5 574.4 247.4 572 247.2 572.5 242Q573.7 242.1 574.5 241.7Q575.3 241.2 575.7 239.8L581.1 240.4L579.3 257.1ZM572.6 269 591.7 243.2 598.3 243.9 579.1 269.7ZM588.5 272.4 589 266.9 597 263.9Q597.6 263.7 598 263.5Q598.4 263.3 598.6 263Q598.8 262.8 598.8 262.4Q598.9 261.7 598.4 261.3Q598 260.9 597.2 260.8Q596.6 260.7 596.1 260.9Q595.6 261.1 595.3 261.5Q595 261.9 595 262.6L589.4 261.4Q589.6 258.4 592 257Q594.4 255.7 598 256Q600 256.3 601.7 257Q603.3 257.8 604.1 259.1Q605 260.5 604.7 262.5Q604.6 263.5 604.3 264.3Q604 265.1 603.4 265.7Q602.7 266.4 601.8 266.9Q600.9 267.4 599.7 267.8L596.1 268.9L596.1 269.2L604.1 268.9L603.5 274ZM611.5 273.7Q609.8 273.6 608.4 272.8Q606.9 272.1 606.1 270.6Q605.3 269.2 605.5 267Q605.7 265 606.6 263.8Q607.6 262.6 609 262Q610.4 261.3 612 261.1Q613.7 260.9 615.2 260.7Q617.5 260.5 618.6 260.4Q619.7 260.3 620.1 260Q620.5 259.7 620.6 259.1Q620.7 257.9 619.9 257.2Q619.1 256.5 617.6 256.3Q616.7 256.2 615.7 256.4Q614.8 256.7 614.1 257.5Q613.4 258.3 613.3 259.9L607.3 258.8Q607.5 256.2 608.6 254.5Q609.6 252.9 611.3 252.1Q612.9 251.2 614.8 251Q616.6 250.8 618.4 251Q621.7 251.3 623.7 252.8Q625.7 254.2 626.5 256.7Q627.3 259.1 626.9 262.4L626.5 266.3Q626.4 267.7 626.2 269.1Q626.1 270.5 625.9 271.9Q625.8 273.2 625.6 274.6L619.8 274Q620 272.5 620.1 271Q620.3 269.4 620.5 267.7L620.2 267.7Q619.8 269.5 618.6 271Q617.4 272.4 615.6 273.2Q613.7 274 611.5 273.7ZM614.8 269.1Q615.5 269.2 616.3 269Q617.2 268.8 618 268.2Q618.8 267.7 619.3 266.6Q619.9 265.6 620.1 263.9L620.2 262.9L621.3 262.9Q621 263.4 620.1 263.7Q619.3 264 618.4 264Q617.4 264.1 616.4 264.2Q615.4 264.3 614.5 264.5Q613.6 264.7 613.1 265.2Q612.5 265.7 612.4 266.6Q612.3 267.7 613 268.3Q613.7 269 614.8 269.1ZM636.7 276.3Q632.9 275.9 631.2 273.7Q629.5 271.5 629.9 267.3L630.9 258.2L628.5 257.9L628.9 253.7L629 253.7Q631.7 253.6 632.9 252.3Q634.1 251.1 634.7 248.3L634.7 248.2L638.6 248.6L638.1 253.6L643.2 254.2L642.6 259.6L637.5 259.1L636.7 267.4Q636.5 269 637.2 269.8Q637.9 270.5 639 270.6Q639.6 270.7 640.3 270.6Q640.9 270.5 641.5 270.3L640.9 276.1Q639.5 276.4 638.5 276.4Q637.5 276.4 636.7 276.3ZM643.7 265.1 644.2 259.6 652.2 256.6Q652.8 256.4 653.2 256.2Q653.6 256 653.8 255.7Q654 255.5 654 255.1Q654.1 254.4 653.6 254Q653.2 253.6 652.4 253.5Q651.8 253.4 651.3 253.6Q650.8 253.8 650.5 254.2Q650.2 254.6 650.2 255.3L644.6 254.1Q644.8 251.1 647.2 249.7Q649.6 248.4 653.2 248.8Q655.2 249 656.9 249.7Q658.5 250.5 659.3 251.9Q660.2 253.2 660 255.2Q659.9 256.2 659.5 257Q659.2 257.8 658.6 258.4Q657.9 259.1 657 259.6Q656.1 260.1 654.9 260.5L651.3 261.6L651.3 261.9L659.3 261.6L658.7 266.7ZM123.4 416.9 118.4 393.1 126 393.8 128.4 411.4 128.6 411.4 134.3 394.5 141.4 395.2 132.4 417.7ZM141.2 406.5 141.7 400.8 150 397.5Q150.6 397.2 151 397Q151.4 396.8 151.6 396.5Q151.8 396.2 151.9 395.8Q151.9 395.1 151.4 394.7Q150.9 394.3 150.1 394.2Q149.5 394.1 149 394.3Q148.4 394.5 148.2 395Q147.9 395.4 147.9 396.2L141.9 395Q142.2 391.8 144.7 390.4Q147.2 388.9 150.8 389.2Q153 389.4 154.7 390.2Q156.4 390.9 157.3 392.3Q158.3 393.8 158.1 395.9Q158 396.9 157.6 397.7Q157.3 398.6 156.7 399.3Q156 400 155.1 400.5Q154.1 401.1 152.9 401.5L149.1 402.7L149.1 403L157.5 402.6L157 407.9ZM170.3 405.7 170.9 399.5 188.6 401 188 407.2ZM169.6 414.2 170.1 408 187.8 409.5 187.3 415.7ZM207.5 424.9Q203.7 424.5 202.1 421.8Q200.5 419 201 413.5L202.1 400.5L209.2 401.1L208.1 414.1Q207.9 416.6 208.5 417.7Q209.1 418.7 210.5 418.9Q211.5 418.9 212.3 418.5Q213.2 418.1 213.9 417.1Q214.6 416.1 215.1 414.5Q215.5 412.9 215.7 410.7L216.5 401.7L223.6 402.3L222.5 415.1L221.6 425.5L215.5 425L216.3 415.9L216 415.9Q215.5 419.3 214.4 421.3Q213.2 423.3 211.5 424.2Q209.8 425.1 207.5 424.9ZM224.9 413.8 225.4 408.1 233.6 404.8Q234.3 404.6 234.7 404.3Q235.1 404.1 235.3 403.8Q235.5 403.6 235.5 403.2Q235.6 402.4 235.1 402Q234.6 401.6 233.8 401.5Q233.1 401.5 232.6 401.7Q232.1 401.8 231.8 402.3Q231.5 402.7 231.5 403.5L225.6 402.3Q225.8 399.1 228.3 397.7Q230.8 396.2 234.5 396.5Q236.7 396.7 238.4 397.5Q240.1 398.3 241 399.7Q241.9 401.1 241.7 403.2Q241.6 404.2 241.3 405Q241 405.9 240.3 406.6Q239.7 407.3 238.7 407.8Q237.8 408.4 236.5 408.8L232.8 410L232.8 410.3L241.1 409.9L240.7 415.2ZM259.1 423.5 260.7 405.1 266.4 405.6 264.8 424ZM253.6 416.5 254.1 411 271.9 412.5 271.4 418.1ZM283.7 430.9 284.4 423.6 295.7 417.3Q296.7 416.7 297.4 416.1Q298.2 415.5 298.7 414.8Q299.3 414.1 299.6 413.3Q299.9 412.6 300 411.8Q300.1 410.8 299.7 410Q299.3 409.2 298.4 408.7Q297.6 408.2 296.4 408.1Q295 408 294.1 408.5Q293.1 408.9 292.6 409.7Q292.1 410.5 291.9 411.5Q291.7 412.5 291.7 413.5L285.1 412.2Q285 408.8 286.5 406.5Q287.9 404.1 290.7 403.1Q293.4 402 297.2 402.3Q300.5 402.6 302.8 403.9Q305.1 405.1 306.2 407.2Q307.3 409.3 307.1 412Q306.9 414 306.2 415.6Q305.5 417.2 304.3 418.4Q303.1 419.6 301.6 420.6Q300 421.7 298.3 422.6L292.4 425.6L292.4 425.8L306.1 426.9L305.6 432.8ZM313.7 434.2Q312 434 310.5 433.3Q308.9 432.5 308 431Q307.2 429.6 307.4 427.2Q307.5 425.1 308.5 423.8Q309.4 422.6 310.9 421.9Q312.4 421.2 314.1 420.9Q315.8 420.7 317.4 420.5Q319.8 420.3 320.9 420.1Q322.1 419.9 322.5 419.6Q323 419.3 323 418.7Q323.1 417.4 322.3 416.7Q321.4 415.9 319.8 415.8Q318.9 415.7 317.9 416Q316.9 416.2 316.2 417.1Q315.5 417.9 315.4 419.6L309.1 418.6Q309.3 415.8 310.4 414.1Q311.4 412.4 313.1 411.5Q314.8 410.6 316.8 410.3Q318.7 410 320.6 410.2Q324.1 410.5 326.2 412Q328.3 413.5 329.2 416Q330 418.5 329.7 422L329.4 426.1Q329.2 427.6 329.1 429Q329 430.5 328.9 432Q328.7 433.4 328.6 434.8L322.5 434.3Q322.6 432.7 322.7 431.1Q322.9 429.5 323 427.7L322.8 427.7Q322.4 429.6 321.2 431.2Q319.9 432.7 318 433.5Q316.1 434.4 313.7 434.2ZM317.1 429.3Q317.9 429.3 318.7 429.1Q319.6 428.9 320.4 428.3Q321.3 427.7 321.9 426.6Q322.4 425.5 322.6 423.8L322.7 422.7L323.9 422.7Q323.5 423.2 322.6 423.5Q321.8 423.8 320.8 423.9Q319.7 424 318.7 424.1Q317.6 424.2 316.7 424.5Q315.8 424.7 315.2 425.2Q314.6 425.7 314.6 426.7Q314.5 427.8 315.2 428.5Q316 429.2 317.1 429.3ZM341.1 436.6Q338.8 436.4 336.8 435.7Q334.9 435.1 333.5 434Q332.1 432.8 331.5 431.1Q330.9 429.3 331.2 426.9L337.5 426.9Q337.4 428.4 337.9 429.4Q338.4 430.4 339.4 430.9Q340.3 431.4 341.8 431.5Q343.1 431.7 344.2 431.3Q345.2 430.9 345.3 429.8Q345.3 429.2 345 428.8Q344.7 428.4 343.8 428Q342.9 427.6 341.1 427Q338.9 426.3 337.2 425.5Q335.4 424.8 334.2 423.9Q333 423 332.5 421.8Q331.9 420.6 332.1 418.9Q332.3 416.4 333.7 414.9Q335.2 413.3 337.5 412.6Q339.9 411.9 342.9 412.2Q345.5 412.4 347.8 413.4Q350 414.5 351.2 416.5Q352.4 418.5 351.8 421.5L345.7 421.6Q345.9 420.3 345.5 419.4Q345.1 418.4 344.2 417.9Q343.3 417.4 342 417.3Q340.5 417.1 339.7 417.6Q338.8 418.1 338.7 418.9Q338.7 419.6 339.1 420.1Q339.6 420.6 340.7 421Q341.7 421.4 343.4 422Q344.8 422.4 346.4 423Q348 423.6 349.3 424.6Q350.7 425.5 351.4 426.9Q352.2 428.3 352 430.3Q351.8 432.5 350.5 434Q349.2 435.5 346.8 436.2Q344.5 436.9 341.1 436.6ZM462.4 593.8Q460.2 594 458.2 593.8Q456.3 593.6 454.8 592.8Q453.2 592 452.3 590.5Q451.4 589 451.2 586.7L457 585.5Q457.3 586.8 457.9 587.7Q458.6 588.5 459.6 588.8Q460.6 589.1 462 588.9Q463.3 588.8 464.2 588.2Q465.1 587.7 464.9 586.6Q464.9 586.1 464.5 585.8Q464.1 585.5 463.2 585.3Q462.2 585.1 460.5 584.8Q458.3 584.6 456.5 584.2Q454.7 583.9 453.4 583.3Q452.1 582.7 451.4 581.7Q450.6 580.6 450.4 579Q450.1 576.7 451.2 575Q452.2 573.2 454.3 572.1Q456.3 571 459.2 570.6Q461.7 570.3 464 570.8Q466.3 571.3 467.8 573Q469.3 574.6 469.3 577.6L463.6 578.9Q463.6 577.6 463 576.8Q462.5 576 461.6 575.7Q460.6 575.4 459.4 575.5Q458 575.7 457.3 576.3Q456.5 576.9 456.6 577.7Q456.7 578.4 457.3 578.7Q457.8 579.1 458.8 579.3Q459.9 579.5 461.6 579.7Q463 579.8 464.6 580.1Q466.2 580.3 467.7 580.9Q469.1 581.5 470.1 582.7Q471.1 583.8 471.3 585.8Q471.5 587.8 470.6 589.5Q469.7 591.2 467.6 592.3Q465.5 593.4 462.4 593.8ZM482.4 576 481.7 570.1 498.5 568 499.2 573.9ZM483.4 584.1 482.7 578.2 499.5 576.1 500.2 582ZM514 574.1 512.9 565.1 510.5 565.4 509.8 560.3Q511 560.1 511.7 559.5Q512.4 558.8 512.4 557.4L517.8 556.7L519.9 573.4ZM515.9 586.6 528.8 557.1 535.3 556.3 522.4 585.8ZM532.2 586.3 531.5 580.8 538.6 576.1Q539.1 575.7 539.5 575.5Q539.8 575.2 539.9 574.9Q540.1 574.6 540 574.2Q539.9 573.5 539.4 573.2Q538.8 572.9 538 573Q537.5 573.1 537 573.4Q536.6 573.6 536.4 574.1Q536.2 574.6 536.4 575.3L530.6 575.4Q530.2 572.3 532.2 570.5Q534.3 568.6 537.8 568.2Q539.8 567.9 541.6 568.3Q543.3 568.7 544.5 569.8Q545.6 571 545.8 573Q545.9 573.9 545.8 574.8Q545.7 575.7 545.2 576.4Q544.7 577.2 544 577.9Q543.2 578.6 542.1 579.3L538.8 581.1L538.9 581.4L546.6 579.3L547.2 584.4ZM556.2 552Q555.5 553.8 554.9 556.1Q554.4 558.4 554.1 560.8Q553.9 563.3 553.8 565.6Q553.8 567.8 554.1 569.7Q554.4 572.1 555.2 575.1Q556.1 578.1 557.5 581Q558.8 583.9 560.4 586.1L553.3 586.9Q551.5 584.4 550.2 581.4Q549 578.5 548.2 575.6Q547.5 572.8 547.2 570.5Q546.9 568.3 547 565.3Q547 562.2 547.5 559Q548 555.8 549.1 552.9ZM568.2 580.8Q564.6 581.2 562.5 578.9Q560.5 576.6 559.9 571.5L558.3 559L565.1 558.2L566.6 570.5Q566.9 573 567.7 573.8Q568.5 574.7 569.8 574.6Q570.7 574.4 571.4 573.9Q572.1 573.3 572.6 572.2Q573.1 571.2 573.2 569.6Q573.3 568 573.1 565.9L572 557.4L578.8 556.5L580.2 568.6L581.5 578.5L575.7 579.2L574.7 570.7L574.4 570.7Q574.5 573.9 573.9 576.1Q573.3 578.2 571.8 579.3Q570.4 580.5 568.2 580.8ZM599.5 571.3 597.4 553.7 602.8 553.1 604.9 570.6ZM593 565.8 592.4 560.6 609.3 558.5 609.9 563.7ZM629.5 572.6 620.1 551.4 627.3 550.6 633.1 566.5 633.3 566.5 635.2 549.6 642 548.8 638.1 571.6ZM641.1 541.6 648.3 540.7Q650.1 543.2 651.4 546.3Q652.6 549.3 653.4 552.2Q654.1 555.1 654.4 557.4Q654.7 559.6 654.6 562.5Q654.6 565.5 654.1 568.7Q653.6 571.8 652.5 574.8L645.3 575.6Q646.4 573.1 647 570Q647.6 566.9 647.7 563.8Q647.8 560.7 647.5 558.2Q647.3 556.4 646.7 554.1Q646.2 551.9 645.3 549.6Q644.5 547.4 643.4 545.3Q642.4 543.2 641.1 541.6ZM667 568.5Q663.1 569 660.9 567.3Q658.8 565.5 658.3 561.4L657.2 552.2L654.8 552.5L654.2 548.3L654.4 548.3Q656.9 547.6 657.8 546.1Q658.7 544.5 658.6 541.7L658.6 541.6L662.6 541.1L663.2 546.2L668.2 545.5L668.9 551L663.9 551.6L664.9 559.9Q665.1 561.5 665.9 562.1Q666.8 562.6 667.9 562.5Q668.5 562.4 669.1 562.2Q669.7 561.9 670.2 561.6L670.9 567.5Q669.7 568 668.7 568.2Q667.7 568.5 667 568.5ZM127.9 722.9Q125.7 723.1 123.9 722.8Q122.1 722.5 120.6 721.7Q119.2 720.9 118.4 719.4Q117.6 717.9 117.6 715.7L123.2 714.8Q123.4 716.1 123.9 716.9Q124.5 717.8 125.5 718.1Q126.4 718.4 127.7 718.3Q129 718.3 129.8 717.8Q130.7 717.3 130.6 716.3Q130.6 715.8 130.3 715.5Q129.9 715.1 129 714.9Q128.2 714.7 126.5 714.4Q124.4 714 122.8 713.6Q121.1 713.2 119.9 712.6Q118.7 711.9 118 710.9Q117.3 709.9 117.2 708.3Q117.1 706.1 118.1 704.5Q119.2 702.9 121.2 701.9Q123.2 701 125.9 700.8Q128.4 700.6 130.5 701.2Q132.7 701.8 134.1 703.5Q135.4 705.1 135.3 707.9L129.8 708.9Q129.8 707.7 129.3 706.9Q128.8 706.1 128 705.7Q127.1 705.4 125.9 705.5Q124.6 705.6 123.9 706.1Q123.1 706.7 123.2 707.4Q123.2 708 123.7 708.4Q124.2 708.8 125.2 709Q126.2 709.3 127.8 709.5Q129.2 709.7 130.7 710Q132.2 710.4 133.5 711Q134.8 711.7 135.7 712.8Q136.6 713.9 136.7 715.8Q136.9 717.7 135.9 719.3Q134.9 720.8 132.9 721.8Q130.9 722.7 127.9 722.9ZM147.8 707.1 147.4 701.4 163.5 700.3 163.9 705.9ZM148.3 714.8 147.9 709.1 164.1 708 164.4 713.7ZM182.3 718.6 174.5 697.9 181.3 697.5 186.1 712.9 186.2 712.9 188.9 696.9 195.4 696.5 190.5 718ZM206.5 717.4Q202.8 717.6 200.8 715.9Q198.9 714.1 198.6 710.1L198 701.4L195.7 701.5L195.4 697.4L195.5 697.4Q198 696.9 198.9 695.5Q199.8 694.1 199.9 691.4L199.9 691.3L203.7 691.1L204 695.9L208.8 695.5L209.2 700.7L204.4 701.1L204.9 709Q205 710.6 205.8 711.2Q206.6 711.7 207.7 711.7Q208.2 711.6 208.8 711.4Q209.4 711.2 209.9 710.9L210.3 716.5Q209.1 717 208.1 717.1Q207.2 717.3 206.5 717.4ZM221.5 705.8 221.1 700.1 237.3 699 237.7 704.6ZM251.4 701.7 250.8 693.1 248.5 693.2 248.1 688.3Q249.3 688.2 250 687.7Q250.6 687.1 250.7 685.7L255.9 685.4L257 701.3ZM252.6 713.7 266.4 686.2 272.6 685.8 258.9 713.2ZM268.1 714.2 267.7 708.9 274.7 704.8Q275.2 704.5 275.6 704.3Q275.9 704 276 703.7Q276.2 703.4 276.1 703.1Q276.1 702.4 275.6 702.1Q275.1 701.8 274.3 701.8Q273.8 701.9 273.3 702.1Q272.9 702.4 272.7 702.8Q272.5 703.2 272.6 703.9L267.1 703.7Q266.9 700.8 268.9 699.2Q270.9 697.5 274.3 697.3Q276.3 697.1 277.9 697.6Q279.6 698 280.6 699.1Q281.6 700.3 281.7 702.2Q281.8 703.1 281.6 703.9Q281.4 704.7 281 705.5Q280.5 706.2 279.7 706.8Q278.9 707.4 277.9 708L274.7 709.6L274.7 709.9L282.2 708.3L282.5 713.2ZM289.9 711.6Q288.3 711.7 286.8 711.3Q285.4 710.8 284.3 709.6Q283.3 708.4 283.2 706.3Q283.1 704.3 283.7 703.1Q284.4 701.8 285.6 701Q286.9 700.2 288.3 699.7Q289.8 699.2 291.3 698.8Q293.3 698.3 294.4 697.9Q295.4 697.6 295.7 697.3Q296.1 696.9 296.1 696.4Q296 695.2 295.1 694.7Q294.2 694.1 292.8 694.2Q291.9 694.3 291 694.7Q290.2 695.1 289.7 695.9Q289.2 696.8 289.3 698.3L283.6 698.3Q283.3 695.8 284 694.1Q284.7 692.4 286.1 691.3Q287.5 690.3 289.2 689.8Q290.9 689.2 292.7 689.1Q295.8 688.9 297.9 689.9Q300 691 301.2 693.1Q302.3 695.3 302.5 698.4L302.8 702.2Q302.9 703.5 303 704.8Q303.1 706.2 303.2 707.5Q303.3 708.8 303.3 710.1L297.8 710.5Q297.7 709.1 297.6 707.6Q297.5 706.1 297.3 704.5L297.1 704.5Q297.1 706.3 296.2 707.9Q295.2 709.4 293.6 710.4Q292.1 711.5 289.9 711.6ZM292.2 706.7Q292.9 706.7 293.7 706.4Q294.4 706 295.1 705.4Q295.8 704.7 296.1 703.7Q296.5 702.6 296.4 701L296.3 700.1L297.4 699.9Q297.1 700.4 296.4 700.8Q295.7 701.1 294.8 701.4Q293.9 701.6 292.9 701.9Q292 702.1 291.2 702.5Q290.4 702.8 290 703.4Q289.5 703.9 289.6 704.8Q289.7 705.8 290.4 706.3Q291.2 706.8 292.2 706.7ZM314 709.8Q310.3 710.1 308.4 708.3Q306.4 706.6 306.1 702.6L305.5 693.8L303.2 694L302.9 689.9L303.1 689.9Q305.5 689.4 306.5 688Q307.4 686.6 307.4 683.9L307.4 683.8L311.2 683.5L311.6 688.4L316.4 688L316.8 693.2L311.9 693.5L312.5 701.5Q312.6 703 313.4 703.6Q314.2 704.2 315.2 704.1Q315.8 704.1 316.4 703.9Q317 703.7 317.5 703.4L317.9 709Q316.7 709.5 315.7 709.6Q314.8 709.8 314 709.8ZM318.7 698.2 318.3 693 325.3 688.8Q325.8 688.5 326.1 688.3Q326.5 688 326.6 687.8Q326.7 687.5 326.7 687.1Q326.7 686.4 326.2 686.1Q325.7 685.8 324.9 685.9Q324.3 685.9 323.9 686.2Q323.5 686.4 323.3 686.8Q323.1 687.3 323.2 687.9L317.7 687.8Q317.5 684.9 319.5 683.2Q321.5 681.5 324.9 681.3Q326.9 681.2 328.5 681.6Q330.1 682.1 331.2 683.2Q332.2 684.3 332.3 686.2Q332.4 687.1 332.2 688Q332 688.8 331.5 689.5Q331.1 690.2 330.3 690.8Q329.5 691.5 328.4 692L325.3 693.7L325.3 693.9L332.7 692.3L333.1 697.2Z'/%3E%3C/svg%3E"); --wall-ticks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 800 800'%3E%3Cpath d='M305.6 79.6 L318.4 96.9 L334.6 55.6' fill='none' stroke='black' stroke-width='8.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M672.8 258.2 L680.3 276.3 L703.8 243.3' fill='none' stroke='black' stroke-width='8.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M366.8 415.8 L375 434.7 L399 399.7' fill='none' stroke='black' stroke-width='8.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M681.4 544.8 L692.8 560.8 L708.3 523.4' fill='none' stroke='black' stroke-width='8.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M344.9 686.9 L354.9 702.7 L371.5 667.8' fill='none' stroke='black' stroke-width='7.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body::before, body::after { content: ""; display: block; position: fixed; inset: 0; left: 0; width: auto; z-index: -1; pointer-events: none; }
body::before { background: var(--ink); opacity: .045; -webkit-mask: var(--wall-eq) center 44px / 800px 800px repeat; mask: var(--wall-eq) center 44px / 800px 800px repeat; }
body::after { background: var(--brand); opacity: .13; -webkit-mask: var(--wall-ticks) center 44px / 800px 800px repeat; mask: var(--wall-ticks) center 44px / 800px 800px repeat; }
:root[data-theme="dark"] body::before { opacity: .05; }
:root[data-theme="dark"] body::after { opacity: .16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: .05; } :root:not([data-theme="light"]) body::after { opacity: .16; } }
@media (max-width: 700px) {
  body::before { -webkit-mask-size: 560px 560px; mask-size: 560px 560px; }
  body::after { -webkit-mask-size: 560px 560px; mask-size: 560px 560px; }
}