/* Self hosted web fonts.
 *
 * These were loaded from fonts.googleapis.com, which cost a render blocking
 * stylesheet on a third party origin before the first paint could happen:
 * a DNS lookup, a TLS handshake and a round trip, all ahead of any text.
 * Served from our own origin the browser already has the connection open,
 * and the service worker can keep them offline.
 *
 * Inter and JetBrains Mono are variable fonts, so one file covers the whole
 * weight range instead of one file per weight. Poppins has no variable
 * version on Google Fonts, so its three weights are three files.
 *
 * Poppins, Inter and JetBrains Mono are all licensed under the SIL Open Font
 * License 1.1, which permits self hosting. See assets/fonts/OFL.txt.
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/poppins-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/poppins-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/poppins-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   MskProd Computing — design system

   Direction: soft glassmorphism over a teal gradient.
   Brand ramp: lilac #CAABD5 | purple #83749F | aqua #6BC4CA
               teal #03969D | deep #035C58
   Frosted panels, rounded cards, pill buttons and gradient accents sit on a
   cyan-to-teal ground. Long-form reading surfaces stay solid, not frosted,
   so body text keeps its contrast.
   ========================================================================== */

:root {
  /* Brand ramp ----------------------------------------------------------- */
  --lilac:      #CAABD5;
  --lilac-soft: #E9DCEF;
  --lilac-deep: #A98BB8;
  --purple:     #83749F;
  --purple-deep:#5F5478;
  --aqua:       #6BC4CA;
  --aqua-soft:  #CDEDEF;
  --teal:       #03969D;
  --teal-deep:  #017279;
  --deep:       #035C58;
  --deep-ink:   #023B39;

  /* The ground ----------------------------------------------------------- */
  /* Cream rather than white or teal. A slightly warm, slightly darker ground
     cuts the glare of a white screen, which is what makes a long page of
     revision easier to sit in front of. */
  --grad-page: linear-gradient(135deg, #FDFAF0 0%, #FAF3E1 45%, #F3E8CD 100%);
  --grad-brand: linear-gradient(135deg, var(--teal-deep), var(--deep));
  --grad-lilac: linear-gradient(135deg, var(--lilac), var(--purple));
  --grad-soft:  linear-gradient(135deg, var(--aqua-soft), var(--lilac-soft));

  /* Glass ---------------------------------------------------------------- */
  --glass:        rgba(255, 253, 246, 0.66);
  --glass-strong: rgba(255, 253, 246, 0.82);
  --glass-edge:   rgba(255, 252, 242, 0.62);
  --glass-blur:   blur(16px) saturate(150%);

  /* Solid surfaces for reading ------------------------------------------- */
  --surface:      #FFFDF7;
  --surface-2:    #F8F2E3;
  --surface-sunk: #F1E8D3;
  --bg:      #FBF6E9;
  --bg-alt:  #FDFBF4;

  --border:        #E8DEC8;
  --border-strong: #D4C6A8;

  /* Ink ------------------------------------------------------------------ */
  --ink:       #0F2026;
  --ink-2:     #26383F;
  --ink-3:     #385057;
  --ink-muted: #3E5760;
  --on-dark:   #F2FBFB;

  --accent:        var(--teal-deep);
  --accent-strong: var(--deep);
  --accent-quiet:  #E2EFE2;
  --focus-ring:    #024E52;

  /* Marking states ------------------------------------------------------- */
  --ok:      #0E6B4F;
  --ok-bg:   #DDF1E8;
  --warn:    #7A5710;
  --warn-bg: #FAEFD2;
  --bad:     #97243B;
  --bad-bg:  #FBE2E7;

  /* Key stage identity — the brand ramp doing real wayfinding */
  --ks3:  var(--purple-deep);
  --ks4:  var(--teal-deep);
  --ks5:  var(--deep);
  --ksim: var(--purple);
  --kspy: var(--teal);

  /* Type ----------------------------------------------------------------- */
  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
  --step-0:  clamp(1.00rem, 0.97rem + 0.16vw, 1.10rem);
  --step-1:  clamp(1.18rem, 1.11rem + 0.32vw, 1.38rem);
  --step-2:  clamp(1.42rem, 1.28rem + 0.62vw, 1.80rem);
  --step-3:  clamp(1.75rem, 1.50rem + 1.10vw, 2.45rem);
  --step-4:  clamp(2.20rem, 1.72rem + 2.10vw, 3.45rem);

  --sp-1: 0.35rem; --sp-2: 0.6rem;  --sp-3: 0.9rem;  --sp-4: 1.3rem;
  --sp-5: 1.9rem;  --sp-6: 2.7rem;  --sp-7: 3.8rem;  --sp-8: 5.2rem;

  /* Generous rounding is part of this look */
  --r-s: 10px; --r-m: 16px; --r-l: 22px; --r-xl: 30px; --r-pill: 999px;

  --shadow-1: 0 2px 10px rgba(2, 59, 57, .07);
  --shadow-2: 0 6px 24px rgba(2, 59, 57, .11);
  --shadow-3: 0 16px 48px rgba(2, 59, 57, .18);
  --shadow-glass: 0 8px 32px rgba(2, 59, 57, .12), inset 0 1px 0 rgba(255,255,255,.5);

  --wrap: 1180px;
  --measure: 68ch;
}

[data-theme="dark"] {
  --grad-page: linear-gradient(135deg, #0C2B2E 0%, #0A2226 48%, #101A22 100%);
  /* The dark end of this ramp left the dark button label at roughly 4.4:1,
     just under AA. Lifting it keeps the gradient while clearing the bar. */
  --grad-brand: linear-gradient(135deg, var(--aqua), #2BB5BC);
  --grad-lilac: linear-gradient(135deg, var(--lilac), var(--purple));
  --grad-soft:  linear-gradient(135deg, #16333A, #241F33);

  --glass:        rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.11);
  --glass-edge:   rgba(255, 255, 255, 0.14);

  --surface:      #16232A;
  --surface-2:    #1D2C33;
  --surface-sunk: #101B21;
  --bg:      #0E1F23;
  --bg-alt:  #142830;

  --border:        #2A3D45;
  --border-strong: #3D555E;

  --ink:       #EAF4F4;
  --ink-2:     #CBDCDE;
  --ink-3:     #A6BBBF;
  --ink-muted: #A2B7BC;

  --accent:        var(--aqua);
  --accent-strong: #9BDDE1;
  --accent-quiet:  #143A3D;
  --focus-ring:    #8FD6DB;

  --ok:   #64C79C; --ok-bg:   #10312A;
  --warn: #D8B96B; --warn-bg: #322913;
  --bad:  #E795A2; --bad-bg:  #371B22;

  --ks3:  var(--lilac);
  --ks4:  var(--aqua);
  --ks5:  #57BFB2;
  --ksim: #B7A8CE;
  --kspy: #8FD6DB;

  --shadow-1: 0 2px 10px rgba(0,0,0,.34);
  --shadow-2: 0 6px 24px rgba(0,0,0,.44);
  --shadow-3: 0 16px 48px rgba(0,0,0,.54);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--grad-page) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}

/* The two large translucent circles from the reference. Decorative only, and
   pinned behind everything so they never intercept a click. */
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%; z-index: -1;
  background: rgba(255, 255, 255, .16); pointer-events: none;
}
body::before { width: 46vmax; height: 46vmax; top: -16vmax; left: -14vmax; }
body::after  { width: 40vmax; height: 40vmax; bottom: -16vmax; right: -12vmax; }
[data-theme="dark"] body::before,
[data-theme="dark"] body::after { background: rgba(107, 196, 202, .07); }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  line-height: 1.22; margin: 0 0 var(--sp-3);
  font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; color: var(--ink);
}
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.034em; }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.028em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, dl, table, pre, figure, blockquote { margin: 0 0 var(--sp-4); }
p, li { max-width: var(--measure); }
li { margin-bottom: .45em; }
ul, ol { padding-left: 1.35em; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--accent-strong); }
strong, b { font-weight: 650; color: var(--ink); }
small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--aqua); color: #04302F; }

code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }
:not(pre) > code {
  background: var(--surface-sunk); border: 1px solid var(--border);
  padding: .12em .42em; border-radius: 6px; color: var(--accent); white-space: nowrap;
}
kbd {
  background: var(--surface-2); border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 6px; padding: .1em .45em; font-size: .82em; color: var(--ink-2);
}

/* -------------------------------------------------------------- utilities */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 880px); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; translate: -50% -140%; z-index: 200;
  background: var(--deep); color: #fff; padding: .7rem 1.2rem;
  border-radius: 0 0 var(--r-m) var(--r-m); font-weight: 600;
  text-decoration: none; transition: translate .18s ease;
}
.skip-link:focus { translate: -50% 0; color: #fff; }
.stack > * + * { margin-top: var(--sp-4); }
.center { text-align: center; }
.lead { font-size: var(--step-1); color: var(--ink-2); line-height: 1.6; max-width: 60ch; }
.muted { color: var(--ink-muted); }
.nowrap { white-space: nowrap; }

/* The frosted panel. Reused wherever the reference shows glass. */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-glass);
}

/* ------------------------------------------------------------------ icons */
.icon {
  width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em;
}
.icon-lg { width: 1.7em; height: 1.7em; }
.icon-fill { fill: currentColor; stroke: none; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 253, 246, .76);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(212, 198, 168, .45);
}
[data-theme="dark"] .site-header {
  background: rgba(14, 31, 35, .72); border-bottom-color: rgba(255,255,255,.09);
}
.header-inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 4.4rem; }
.brand {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; flex: none;
}
.brand:hover { color: var(--ink); }
.brand-logo { width: 40px; height: 40px; flex: none; }
.brand-name { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name b { font-family: var(--font-display); font-weight: 700; }
.brand-name span {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: .15rem; margin-left: auto; }
.nav a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--r-pill); text-decoration: none;
  color: var(--ink-2); font-weight: 550; font-size: .93rem;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: rgba(255,255,255,.55); color: var(--ink); }
[data-theme="dark"] .nav a:hover { background: rgba(255,255,255,.08); }
.nav a[aria-current="page"], .nav a.is-active {
  background: var(--grad-brand); color: #fff; font-weight: 600;
}
[data-theme="dark"] .nav a[aria-current="page"],
[data-theme="dark"] .nav a.is-active { color: #06231F; }
.header-tools { display: flex; align-items: center; gap: .4rem; }
.icon-btn {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-pill); border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,.5); color: var(--ink-2); cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
[data-theme="dark"] .icon-btn { background: rgba(255,255,255,.07); }
.icon-btn:hover { background: rgba(255,255,255,.8); color: var(--accent); }
[data-theme="dark"] .icon-btn:hover { background: rgba(255,255,255,.14); color: var(--accent); }
.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-grid; }
  .nav {
    position: fixed; inset: 4.4rem 0 auto; flex-direction: column; align-items: stretch;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--glass-edge);
    padding: var(--sp-3) var(--sp-4) var(--sp-5); gap: .2rem; box-shadow: var(--shadow-2);
    max-height: calc(100dvh - 4.4rem); overflow-y: auto;
  }
  [data-theme="dark"] .nav { background: rgba(14,31,35,.95); }
  .nav[hidden] { display: none; }
  .nav a { padding: .8rem .9rem; border-radius: var(--r-m); font-size: 1rem; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-l);
  padding: var(--sp-5); box-shadow: var(--shadow-glass);
}
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(265px, 100%), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }

.tile {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-l);
  padding: var(--sp-5); text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: var(--shadow-glass);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.tile::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad-brand); opacity: .95;
}
.tile:hover {
  transform: translateY(-5px); box-shadow: var(--shadow-3);
  border-color: rgba(255,255,255,.8); color: inherit;
}
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }
.tile h3 { margin: 0; font-size: var(--step-1); }
.tile p { margin: 0; color: var(--ink-3); font-size: .95rem; }
.tile-icon {
  width: 2.9rem; height: 2.9rem; border-radius: var(--r-m); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--accent); margin-bottom: .3rem;
}
.tile-icon .icon { width: 1.55rem; height: 1.55rem; }
.tile-meta {
  margin-top: auto; padding-top: .7rem; font-size: .82rem; color: var(--ink-muted);
  font-weight: 550; display: flex; gap: .8rem; flex-wrap: wrap;
}

/* ----------------------------------------------------------------- badges */
.badge {
  display: inline-flex; align-items: center; gap: .38rem; padding: .24rem .7rem;
  border-radius: var(--r-pill); font-size: .76rem; font-weight: 620; letter-spacing: .02em;
  background: rgba(255,255,255,.6); color: var(--ink-2); border: 1px solid var(--glass-edge);
}
[data-theme="dark"] .badge { background: rgba(255,255,255,.08); }
.badge-spec {
  background: var(--accent-quiet); color: var(--accent); border-color: transparent;
  font-family: var(--font-mono); font-size: .74rem;
}
.badge-ks3 { background: color-mix(in srgb, var(--ks3) 15%, transparent); color: var(--ks3); border-color: transparent; }
.badge-ks4 { background: color-mix(in srgb, var(--ks4) 15%, transparent); color: var(--ks4); border-color: transparent; }
.badge-ks5 { background: color-mix(in srgb, var(--ks5) 15%, transparent); color: var(--ks5); border-color: transparent; }
.badge-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: var(--r-pill); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .96rem; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 6px 18px rgba(3, 150, 157, .34);
}
.btn-primary:hover { color: #fff; box-shadow: 0 10px 26px rgba(3, 150, 157, .44); }
[data-theme="dark"] .btn-primary { color: #06231F; }
[data-theme="dark"] .btn-primary:hover { color: #06231F; }
.btn-secondary {
  background: rgba(255,253,246,.8); color: var(--ink); border-color: var(--glass-edge);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] .btn-secondary { background: rgba(255,255,255,.09); }
.btn-secondary:hover { background: #FFFDF7; color: var(--ink); }
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,.16); }
/* A ghost button has no panel behind it, so it is read against the darkest
   stop of the page gradient and needs the deepest ink in the ramp. */
.btn-ghost { background: transparent; color: var(--deep-ink); border-color: transparent; padding-inline: .7rem; }
[data-theme="dark"] .btn-ghost { color: var(--accent-strong); }
.btn-ghost:hover { background: rgba(255,253,246,.62); }
[data-theme="dark"] .btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-lilac {
  background: var(--grad-lilac); color: #241A2C;
  box-shadow: 0 6px 18px rgba(131, 116, 159, .32);
}
.btn-lilac:hover { color: #241A2C; }
.btn-sm { padding: .45rem 1rem; font-size: .86rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ------------------------------------------------------------------ prose
   The reading surface stays solid. Frosted glass behind thirty minutes of
   body text costs too much legibility, and the reference keeps its body
   sections on flat white too. */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--sp-7); padding-top: var(--sp-2); scroll-margin-top: 6rem; }
.prose h3 { margin-top: var(--sp-6); scroll-margin-top: 6rem; }
.prose h4 { margin-top: var(--sp-5); font-size: var(--step-0); font-weight: 650; color: var(--ink-2); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose > .topic-header + h2 { margin-top: var(--sp-5); }
.prose ul li::marker { color: var(--teal); }
.prose ol li::marker { color: var(--teal); font-weight: 650; }

.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.table-scroll {
  overflow-x: auto; margin-bottom: var(--sp-4); border-radius: var(--r-m);
  border: 1px solid var(--border);
}
.table-scroll table { margin: 0; min-width: 460px; }
.prose th, .prose td {
  text-align: left; padding: .68rem .9rem; border-bottom: 1px solid var(--border);
  vertical-align: top; max-width: none;
}
.prose thead th {
  background: var(--surface-2); font-weight: 650; font-size: .86rem;
  letter-spacing: .02em; color: var(--ink-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }

pre {
  background: var(--deep-ink); color: #DCEFEE; padding: var(--sp-4);
  border-radius: var(--r-m); overflow-x: auto; font-size: .875rem; line-height: 1.68;
  border: 1px solid #0A4B48; box-shadow: var(--shadow-1); tab-size: 4;
}
pre code { background: none; border: 0; padding: 0; color: inherit; white-space: pre; }
.code-block { position: relative; margin-bottom: var(--sp-4); }
.code-block .code-copy {
  position: absolute; top: .55rem; right: .55rem; z-index: 2;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: #CFE9E8; border-radius: var(--r-s); padding: .28rem .65rem; font-size: .74rem;
  font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .16s ease, background .16s ease;
}
.code-block:hover .code-copy, .code-copy:focus-visible { opacity: 1; }
.code-copy:hover { background: rgba(255,255,255,.2); }
.code-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 650;
  color: var(--ink-muted); margin-bottom: .35rem; display: block;
}
.tok-kw  { color: #F0A9D0; }
.tok-str { color: #A9E5B6; }
.tok-num { color: #F3CE87; }
.tok-com { color: #86ADAB; font-style: italic; }
.tok-fn  { color: #8CD8E0; }
.tok-bi  { color: #C6B2E8; }

/* ------------------------------------------------------------- callout box */
.note {
  border: 1px solid var(--border); border-left: 4px solid var(--note-accent, var(--teal));
  background: var(--surface-2); border-radius: var(--r-m);
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) - .5rem); margin-bottom: var(--sp-4);
}
.note > :last-child { margin-bottom: 0; }
.note-title {
  display: flex; align-items: center; gap: .5rem; font-weight: 650; font-size: .88rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--note-accent, var(--teal));
  margin-bottom: .5rem;
  /* A title may contain inline code, which becomes a flex item. Flex items
     default to min-width:auto and so refuse to shrink below their content,
     which pushed the whole page sideways on narrow screens. */
  flex-wrap: wrap; min-width: 0;
}
.note-title .icon { width: 1.05rem; height: 1.05rem; flex: none; }
.note-title code { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.note-key   { --note-accent: var(--teal-deep); }
.note-grade { --note-accent: var(--purple-deep); background: color-mix(in srgb, var(--lilac) 12%, var(--surface)); }
.note-warn  { --note-accent: #8A6210; background: var(--warn-bg); }
.note-exam  { --note-accent: var(--deep); }
.note-fact  { --note-accent: var(--purple-deep); background: color-mix(in srgb, var(--lilac) 10%, var(--surface)); }
[data-theme="dark"] .note-warn { background: var(--warn-bg); --note-accent: #D8B96B; }
[data-theme="dark"] .note-key   { --note-accent: var(--aqua); }
[data-theme="dark"] .note-exam  { --note-accent: #7FD3D9; }
[data-theme="dark"] .note-grade { --note-accent: var(--lilac); }
[data-theme="dark"] .note-fact  { --note-accent: var(--lilac); }

/* --------------------------------------------------------------- keyterms */
.keyterms {
  display: grid; gap: 0; border: 1px solid var(--border);
  border-radius: var(--r-m); overflow: hidden; margin-bottom: var(--sp-4);
}
.keyterm {
  display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 0;
  border-bottom: 1px solid var(--border);
}
.keyterm:last-child { border-bottom: 0; }
.keyterm dt { padding: .7rem .95rem; font-weight: 650; background: var(--surface-2); color: var(--ink); font-size: .93rem; }
.keyterm dd { padding: .7rem .95rem; margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (max-width: 620px) { .keyterm { grid-template-columns: 1fr; } .keyterm dd { padding-top: 0; } }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; padding: var(--sp-8) 0 var(--sp-7); }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--sp-6); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: var(--sp-6); } }
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lead { font-size: var(--step-1); }
.wrap:has(> .crumbs) + .hero { padding-top: var(--sp-5); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 680;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); padding: .42rem .95rem;
  border-radius: var(--r-pill); margin-bottom: var(--sp-4); box-shadow: var(--shadow-1);
}
[data-theme="dark"] .eyebrow { background: rgba(255,255,255,.08); }

.gradient-text {
  background: linear-gradient(115deg, #01565C 5%, #4A3F63 55%, #6E4E7E 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .gradient-text {
  background: linear-gradient(115deg, var(--aqua) 5%, var(--lilac) 60%, #E9DCEF 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ------------------------------------------------------------- statistics */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px,100%),1fr)); gap: var(--sp-3); }
.stat {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-m);
  padding: var(--sp-4); text-align: center; box-shadow: var(--shadow-glass);
}
.stat b {
  display: block; font-size: var(--step-2); font-weight: 700; color: var(--accent);
  letter-spacing: -.02em; line-height: 1.1; font-family: var(--font-display);
}
.stat span { font-size: .82rem; color: var(--ink-muted); font-weight: 550; }

/* ---------------------------------------------------------------- section */
.section { padding: var(--sp-7) 0; }
.section-alt { background: rgba(255,255,255,.28); border-block: 1px solid rgba(255,255,255,.4); }
[data-theme="dark"] .section-alt { background: rgba(255,255,255,.03); border-block-color: rgba(255,255,255,.07); }
.section-head { margin-bottom: var(--sp-5); max-width: 60ch; }
.section-head h2 { margin-bottom: var(--sp-2); }
.section-head p { color: var(--ink-3); margin: 0; }

/* ------------------------------------------------------------ breadcrumbs */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .84rem; color: var(--ink-2); margin-bottom: var(--sp-4); padding-top: var(--sp-4);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { opacity: .5; }

/* ------------------------------------------------------------ topic layout
   A solid reading panel floating on the gradient. */
.topic-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 264px; gap: var(--sp-6);
  align-items: start; max-width: 1080px; margin: 0 auto var(--sp-8);
  background: var(--surface); border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--shadow-2);
}
@media (max-width: 1040px) {
  .topic-layout { grid-template-columns: 1fr; padding: var(--sp-5) var(--sp-4); }
  .topic-aside { position: static !important; order: -1; }
}
/* The standalone pages (about, privacy, accessibility, how to revise, the
   glossary) used to set their prose straight onto the page gradient, where a
   teal link reads at 3.21:1 against the darkest stop. They get the same solid
   panel a topic page uses, which fixes the contrast and makes them look like
   the rest of the site. */
.page-panel {
  max-width: 1080px; margin: 0 auto var(--sp-8);
  background: var(--surface); border: 1px solid var(--glass-edge);
  border-radius: var(--r-xl); padding: var(--sp-6); box-shadow: var(--shadow-2);
}
@media (max-width: 1040px) { .page-panel { padding: var(--sp-5) var(--sp-4); } }
.page-panel > .prose { max-width: var(--measure); margin-inline: auto; }

.topic-aside { position: sticky; top: 5.6rem; display: grid; gap: var(--sp-3); }
.toc { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m); padding: var(--sp-4); }
.toc h4 { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); margin-bottom: .7rem; font-family: var(--font-body); }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; max-width: none; }
.toc a {
  display: block; padding: .35rem .55rem; border-radius: var(--r-s); font-size: .86rem;
  color: var(--ink-3); text-decoration: none; border-left: 2px solid transparent; line-height: 1.4;
}
.toc a:hover { background: rgba(255,255,255,.6); color: var(--ink); }
[data-theme="dark"] .toc a:hover { background: rgba(255,255,255,.06); }
.toc a.is-current { color: var(--accent); background: var(--accent-quiet); border-left-color: var(--teal); font-weight: 600; }

.aside-block {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: var(--sp-4);
}
.aside-block h4 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-muted); margin-bottom: .6rem; font-family: var(--font-body);
}
.aside-block p { font-size: .87rem; margin: 0 0 .9rem; color: var(--ink-3); line-height: 1.6; max-width: none; }

.col-block {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-l);
  padding: var(--sp-5); box-shadow: var(--shadow-glass);
}
.col-block > :last-child { margin-bottom: 0; }

.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--lilac));
  width: 0; z-index: 120; transition: width .1s linear;
}

.topic-header { padding: 0 0 var(--sp-4); border-bottom: 1px solid var(--border); }
.topic-header h1 { margin-bottom: var(--sp-3); }
.topic-nav {
  display: flex; gap: var(--sp-3); justify-content: space-between;
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); flex-wrap: wrap;
}
.topic-nav a {
  display: flex; flex-direction: column; gap: .15rem; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-m);
  padding: var(--sp-3) var(--sp-4); flex: 1 1 240px; transition: border-color .18s ease, background .18s ease;
}
.topic-nav a:hover { border-color: var(--teal); background: var(--accent-quiet); }
.topic-nav span { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); font-weight: 650; }
.topic-nav b { font-weight: 620; color: var(--ink); font-size: .95rem; }
.topic-nav .next { text-align: right; align-items: flex-end; }

/* -------------------------------------------------------------- unit list */
.unit-list { display: grid; gap: .55rem; }
.unit-row {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--sp-3);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-m);
  padding: .85rem 1.1rem; text-decoration: none; color: inherit;
  transition: transform .16s ease, border-color .16s ease;
}
.unit-row:hover { border-color: rgba(255,255,255,.85); color: inherit; transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .unit-row:hover { transform: none; } }
.unit-num {
  min-width: 2.1rem; height: 2.1rem; padding: 0 .5rem; border-radius: var(--r-s); display: grid; place-items: center;
  background: var(--grad-soft); color: var(--accent-strong); font-weight: 680; font-size: .82rem; font-family: var(--font-mono);
  white-space: nowrap;
}
.unit-row b { display: block; font-weight: 620; font-size: .99rem; line-height: 1.35; }
.unit-row small { color: var(--ink-muted); font-size: .82rem; display: block; line-height: 1.45; }
.unit-row .icon { color: var(--ink-muted); }
.unit-row .done-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); }

/* ------------------------------------------------------------------- quiz */
.quiz {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-l);
  padding: var(--sp-5); margin: var(--sp-6) 0; box-shadow: var(--shadow-1); scroll-margin-top: 6rem;
}
.quiz-head { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.quiz-head h2, .quiz-head h3 { margin: 0; padding-top: 0; }
.quiz-head p { margin: .25rem 0 0; color: var(--ink-3); font-size: .92rem; flex-basis: 100%; }
.quiz-counter {
  margin-left: auto; font-family: var(--font-mono); font-size: .84rem; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--border); padding: .3rem .7rem; border-radius: var(--r-pill);
}

.q { border-top: 1px solid var(--border); padding: var(--sp-4) 0 var(--sp-3); }
.q:first-of-type { border-top: 0; padding-top: 0; }
.q-stem { display: flex; gap: .7rem; font-weight: 600; margin-bottom: var(--sp-3); line-height: 1.55; max-width: none; }
.q-stem .n {
  flex: none; font-family: var(--font-mono); font-size: .82rem; color: var(--accent);
  background: var(--accent-quiet); border-radius: var(--r-s); width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; font-weight: 650; margin-top: .12rem;
}
.q-opts { display: grid; gap: .5rem; margin-bottom: var(--sp-2); }
.opt {
  display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem; cursor: pointer;
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-m);
  transition: border-color .14s ease, background .14s ease; font-size: .95rem; line-height: 1.5;
}
.opt:hover { border-color: var(--teal); background: var(--accent-quiet); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .mark {
  flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 1.5px solid var(--border-strong);
  display: grid; place-items: center; font-size: .76rem; font-weight: 700; background: var(--surface);
  color: var(--ink-muted); font-family: var(--font-mono); transition: .14s ease;
}
.opt.is-picked { border-color: var(--teal); background: var(--accent-quiet); }
.opt.is-picked .mark { background: var(--teal); border-color: var(--teal); color: #fff; }
.opt.is-right { border-color: var(--ok); background: var(--ok-bg); }
.opt.is-right .mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.opt.is-wrong .mark { background: var(--bad); border-color: var(--bad); color: #fff; }
.opt.is-locked { cursor: default; }
.opt.is-locked:hover { border-color: inherit; }
.q-feedback {
  display: none; margin-top: .7rem; padding: .8rem 1rem; border-radius: var(--r-m);
  font-size: .92rem; line-height: 1.6; border-left: 3px solid var(--ink-muted); background: var(--surface-2);
}
.q-feedback.show { display: block; animation: fadeUp .28s ease; }
.q-feedback.good { border-left-color: var(--ok); background: var(--ok-bg); color: var(--ink); }
.q-feedback.bad  { border-left-color: var(--bad); background: var(--bad-bg); color: var(--ink); }
.q-feedback b { display: block; margin-bottom: .2rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.quiz-foot {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.quiz-score { font-weight: 660; font-size: 1.02rem; }
.quiz-score .pct { font-family: var(--font-mono); color: var(--accent); }
.scorebar {
  flex: 1 1 160px; height: .55rem; background: var(--surface-sunk);
  border-radius: var(--r-pill); overflow: hidden; min-width: 120px;
}
.scorebar i {
  display: block; height: 100%; width: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal), var(--aqua)); transition: width .6s cubic-bezier(.2,.8,.3,1);
}

/* -------------------------------------------------------------- exam quiz */
.examq { border-top: 1px solid var(--border); padding: var(--sp-5) 0 var(--sp-4); }
.examq:first-of-type { border-top: 0; padding-top: 0; }
.examq-head { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: var(--sp-2); }
.examq-head .n {
  flex: none; font-family: var(--font-mono); font-size: .82rem; color: var(--purple-deep);
  background: color-mix(in srgb, var(--lilac) 26%, transparent); border-radius: var(--r-s);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; font-weight: 650; margin-top: .12rem;
}
[data-theme="dark"] .examq-head .n { color: var(--lilac); }
.examq-head .stem { font-weight: 600; line-height: 1.55; flex: 1; max-width: none; }
.marks {
  flex: none; font-size: .8rem; font-weight: 650; color: var(--ink-3); font-family: var(--font-mono);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-s);
  padding: .12rem .5rem; height: fit-content; margin-top: .2rem;
}
/* A question stem is a scenario and then an instruction. Printed on a real
   paper they are separate blocks, and run together as one paragraph the
   instruction is easy to miss. */
.examq-head .stem .examq-scenario,
.examq-head .stem .examq-ask { display: block; }
.examq-head .stem .examq-scenario {
  font-weight: 450; color: var(--ink-2);
  border-left: 3px solid var(--border-strong);
  padding: .1rem 0 .1rem .8rem; margin-bottom: .55rem;
}
.examq-head .stem .examq-scenario + .examq-scenario { margin-top: -.3rem; }

/* Resource material: a chart to read, a table to find the faults in. It sits
   between the question and the answer box, indented to the stem. */
.examq-figure { margin: .2rem 0 .9rem; padding-left: 2.1rem; }
.examq-figure > :first-child { margin-top: 0; }
.examq-figure > :last-child { margin-bottom: 0; }
.examq-figure .diagram { margin-block: .4rem; }
@media (max-width: 36rem) {
  .examq-figure { padding-left: 0; }
}

.examq textarea {
  width: 100%; min-height: 7.5rem; resize: vertical; padding: .85rem 1rem;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-m); font: inherit; font-size: .95rem;
  line-height: 1.65; background: var(--surface-2); color: var(--ink); transition: border-color .16s ease;
}
.examq textarea:focus { border-color: var(--teal); background: var(--surface); }
.examq textarea::placeholder { color: var(--ink-muted); }
.examq-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
.examq-result { display: none; margin-top: var(--sp-3); }
.examq-result.show { display: block; animation: fadeUp .3s ease; }

.ms { border: 1px solid var(--border); border-radius: var(--r-m); overflow: hidden; background: var(--surface-2); }
.ms-head {
  padding: .6rem .95rem; background: var(--surface); border-bottom: 1px solid var(--border);
  font-weight: 650; font-size: .84rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); display: flex; align-items: center; gap: .5rem;
}
.ms-head .award {
  margin-left: auto; font-family: var(--font-mono); background: var(--accent-quiet);
  color: var(--accent); padding: .15rem .6rem; border-radius: var(--r-pill); letter-spacing: 0;
}
.ms ul { list-style: none; padding: .6rem .95rem; margin: 0; display: grid; gap: .45rem; }
.ms li {
  display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.55;
  margin: 0; max-width: none; color: var(--ink-2);
}
.ms li .tick {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .68rem; font-weight: 800; margin-top: .2rem; background: var(--surface-sunk);
  color: var(--ink-muted); border: 1px solid var(--border);
}
.ms li.hit .tick { background: var(--ok); color: #fff; border-color: var(--ok); }
.ms li.hit { color: var(--ink); }
.model-answer { padding: .85rem .95rem; border-top: 1px solid var(--border); background: var(--surface); }
.model-answer b {
  display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-muted); margin-bottom: .3rem;
}
.model-answer p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.65; max-width: none; }
.self-mark {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem .95rem;
  border-top: 1px solid var(--border); background: var(--surface); font-size: .87rem; color: var(--ink-3);
}
.self-mark label { font-weight: 600; color: var(--ink-2); }
.self-mark select {
  font: inherit; font-size: .87rem; padding: .28rem .5rem; border-radius: var(--r-s);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink);
}

/* ----------------------------------------------------------------- mascot */
.mascot-dock {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 100; display: flex;
  flex-direction: column; align-items: flex-end; gap: .6rem; pointer-events: none;
}
.mascot-dock > * { pointer-events: auto; }
.mascot-bubble {
  position: relative; max-width: min(21rem, calc(100vw - 3rem));
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-l) var(--r-l) 8px var(--r-l);
  padding: .9rem 1.05rem .95rem; box-shadow: var(--shadow-3); font-size: .93rem;
  line-height: 1.6; color: var(--ink-2); transform-origin: bottom right; animation: pop .3s cubic-bezier(.2,1.2,.3,1);
}
[data-theme="dark"] .mascot-bubble { background: rgba(22,35,42,.92); }
.mascot-bubble[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: scale(.88) translateY(10px); } to { opacity: 1; transform: none; } }
.mascot-bubble b {
  display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin-bottom: .28rem;
}
.mascot-bubble p { margin: 0; max-width: none; }
.mascot-bubble .bubble-close {
  position: absolute; top: .35rem; right: .35rem; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; border: 0; background: transparent; color: var(--ink-muted);
  cursor: pointer; display: grid; place-items: center;
}
.mascot-bubble .bubble-close:hover { background: var(--surface-2); color: var(--ink); }
.mascot-actions { display: flex; gap: .4rem; margin-top: .65rem; flex-wrap: wrap; }
.mascot-actions button {
  font: inherit; font-size: .78rem; font-weight: 600; padding: .32rem .75rem;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.mascot-actions button:hover { background: var(--accent-quiet); color: var(--accent); border-color: transparent; }
.mascot-btn {
  width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.8);
  background: var(--grad-soft); box-shadow: var(--shadow-3); cursor: pointer; padding: .25rem;
  display: grid; place-items: center; transition: transform .22s cubic-bezier(.2,1.3,.4,1);
}
.mascot-btn:hover { transform: scale(1.07) rotate(-3deg); }
@media (prefers-reduced-motion: reduce) { .mascot-btn:hover { transform: none; } }
.mascot-btn.is-talking { animation: bounceCat 1.1s ease-in-out infinite; }
@keyframes bounceCat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mascot-btn svg { width: 100%; height: 100%; }
.mascot-ping {
  position: absolute; top: .1rem; right: .1rem; width: .8rem; height: .8rem;
  border-radius: 50%; background: var(--lilac-deep); border: 2px solid #fff;
}
@media (max-width: 560px) { .mascot-btn { width: 3.6rem; height: 3.6rem; } .mascot-dock { right: .7rem; bottom: .7rem; } }
@media print { .mascot-dock, .site-header, .progress-bar { display: none !important; } }

/* ----------------------------------------------------------------- search */
.search-shell {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: start center;
  padding: 8vh 1rem 1rem; background: rgba(2, 59, 57, .42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.search-shell[hidden] { display: none; }
.search-panel {
  width: min(100%, 620px); background: var(--surface); border: 1px solid var(--glass-edge);
  border-radius: var(--r-l); box-shadow: var(--shadow-3); overflow: hidden;
  animation: pop .22s ease; transform-origin: top center;
}
.search-panel input {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); padding: 1.05rem 1.2rem;
  font: inherit; font-size: 1.05rem; background: var(--surface); color: var(--ink); outline: none;
}
.search-results { max-height: min(52vh, 430px); overflow-y: auto; padding: .4rem; }
.search-results a { display: block; padding: .6rem .8rem; border-radius: var(--r-s); text-decoration: none; color: var(--ink); }
.search-results a:hover, .search-results a.is-sel { background: var(--accent-quiet); }
.search-results b { display: block; font-weight: 600; font-size: .96rem; }
.search-results small { color: var(--ink-muted); font-size: .8rem; }
.search-empty { padding: 1.4rem 1.2rem; color: var(--ink-muted); font-size: .93rem; }
.search-foot {
  padding: .55rem 1.2rem; border-top: 1px solid var(--border); font-size: .76rem;
  color: var(--ink-muted); background: var(--surface-2); display: flex; gap: 1rem;
}

/* ----------------------------------------------------------------- footer */
.site-footer {
  background: var(--deep-ink); color: #C8DEDC; padding: var(--sp-7) 0 var(--sp-5);
  margin-top: var(--sp-8); border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.site-footer a { color: #A8D8D6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: .8rem; font-family: var(--font-body); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; font-size: .91rem; }
.site-footer p { font-size: .89rem; line-height: 1.65; color: #A9C7C5; }
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; color: #fff; font-weight: 700; font-family: var(--font-display); }
.footer-brand svg { width: 34px; height: 34px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--sp-4); display: flex;
  justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; font-size: .84rem; color: #9BB9B7;
}

/* ---------------------------------------------------------------- journey */
.journey { position: relative; display: grid; gap: var(--sp-4); }
.journey::before {
  content: ""; position: absolute; left: 1.35rem; top: 1.5rem; bottom: 1.5rem; width: 2px;
  background: linear-gradient(180deg, var(--aqua), var(--lilac)); opacity: .55;
}
.journey-step { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; position: relative; }
.journey-dot {
  width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid var(--teal); color: var(--accent); font-weight: 700;
  font-family: var(--font-mono); font-size: .86rem; z-index: 1; box-shadow: var(--shadow-1);
}
[data-theme="dark"] .journey-dot { background: var(--surface); }
.journey-body {
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); border-radius: var(--r-m);
  padding: var(--sp-4); box-shadow: var(--shadow-glass);
}
.journey-body h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.journey-body p { margin: 0; color: var(--ink-3); font-size: .95rem; }

/* -------------------------------------------------------------- checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: .45rem; }
.checklist li {
  display: flex; gap: .65rem; align-items: flex-start; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-s); padding: .55rem .8rem;
  font-size: .93rem; margin: 0; max-width: none;
}
.checklist .icon { color: var(--ok); margin-top: .22rem; }

/* ----------------------------------------------------------------- papers */
.paper-card { display: grid; gap: var(--sp-3); }
.paper-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .85rem; color: var(--ink-3); }
.paper-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.paper-q {
  border: 1px solid var(--border); border-radius: var(--r-m); padding: var(--sp-4);
  margin-bottom: var(--sp-3); background: var(--surface);
}
.paper-q > .examq { padding-top: 0; }
details.ms-toggle {
  border: 1px solid var(--border); border-radius: var(--r-m); margin-bottom: var(--sp-3);
  background: var(--surface-2); overflow: hidden;
}
details.ms-toggle > summary {
  cursor: pointer; padding: .75rem 1rem; font-weight: 620; font-size: .92rem;
  list-style: none; display: flex; align-items: center; gap: .5rem; color: var(--ink-2);
}
details.ms-toggle > summary::-webkit-details-marker { display: none; }
details.ms-toggle > summary::after {
  content: ""; width: .5rem; height: .5rem; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-left: auto;
  opacity: .6; transition: transform .2s ease;
}
details.ms-toggle[open] > summary::after { transform: rotate(-135deg); }
details.ms-toggle > div { padding: 0 1rem 1rem; }

/* -------------------------------------------------------------- tab strip */
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tabs button {
  font: inherit; font-weight: 600; font-size: .92rem; padding: .6rem 1rem; background: none;
  border: 0; border-bottom: 2.5px solid transparent; color: var(--ink-3); cursor: pointer; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--teal); }
.tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------- python runner */
.pyblock { margin-bottom: var(--sp-4); }
.pyblock-out {
  background: var(--surface-sunk); border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-m) var(--r-m); padding: .7rem 1rem; font-family: var(--font-mono);
  font-size: .84rem; color: var(--ink-2); white-space: pre-wrap;
}
.pyblock-out b {
  color: var(--ink-muted); font-family: var(--font-body); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: .3rem; font-weight: 650;
}

/* ------------------------------------------------------------- flashcards */
.flashdeck { display: grid; gap: var(--sp-3); }
.flashcard { perspective: 1200px; cursor: pointer; }
.flashcard-inner { position: relative; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.9,.3,1); min-height: 6.5rem; }
.flashcard.flipped .flashcard-inner { transform: rotateX(180deg); }
.flashcard-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--r-m);
  border: 1px solid var(--border); padding: var(--sp-4); display: grid; align-content: center; gap: .3rem;
}
.flashcard-front { background: var(--surface); font-weight: 640; }
.flashcard-back { background: var(--accent-quiet); transform: rotateX(180deg); color: var(--ink-2); font-size: .93rem; }
.flashcard-face small { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }

/* -------------------------------------------------------------- misc bits */
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .95rem;
  border-radius: var(--r-pill); background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); font-size: .86rem; color: var(--ink-2);
  text-decoration: none; font-weight: 550; transition: background .15s ease, color .15s ease;
}
[data-theme="dark"] .pill { background: rgba(255,255,255,.08); }
a.pill:hover { color: var(--accent); background: #fff; }
[data-theme="dark"] a.pill:hover { background: rgba(255,255,255,.15); }
.divider-label {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4);
  font-size: .78rem; font-weight: 660; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted);
}
.divider-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* -------------------------------------------------------------- cat rig */
.cat .cat-eye { transform-box: fill-box; transform-origin: center; animation: catBlink 5.4s infinite; }
@keyframes catBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
.cat .cat-tail { transform-box: fill-box; transform-origin: 10% 90%; animation: catTail 3.6s ease-in-out infinite; }
@keyframes catTail { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-13deg); } }
.cat .cat-ear-l { transform-box: fill-box; transform-origin: 80% 100%; animation: catEarL 6.5s ease-in-out infinite; }
.cat .cat-ear-r { transform-box: fill-box; transform-origin: 20% 100%; animation: catEarR 6.5s ease-in-out infinite; }
@keyframes catEarL { 0%,86%,100% { transform: rotate(0deg); } 90% { transform: rotate(-9deg); } 94% { transform: rotate(2deg); } }
@keyframes catEarR { 0%,86%,100% { transform: rotate(0deg); } 90% { transform: rotate(9deg); } 94% { transform: rotate(-2deg); } }
.is-talking .cat .cat-eyes { animation: catExcite 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes catExcite { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

/* ------------------------------------------------- overflow containment
   Grid and flex items default to a min size of their content, so a wide
   table or long code line would push the whole page sideways. */
.topic-layout > *, .hero-grid > *, .grid > *, .quiz > *, .q, .examq { min-width: 0; }
.prose .code-block, .prose .table-scroll, .prose pre,
.prose .keyterms, .prose .flashdeck { max-width: 100%; }
.code-block { overflow: hidden; border-radius: var(--r-m); }
.code-block pre { border-radius: 0 0 var(--r-m) var(--r-m); }
.code-label + .code-copy + pre { border-radius: var(--r-m); }

@media (max-width: 620px) {
  :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
  .badge { font-size: .72rem; }
}

/* --------------------------------------------------------- hero figure
   The photograph has a white ground, so it needs a frame of its own rather
   than floating as a white rectangle on the gradient. */
.hero-figure {
  margin: 0; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow-3);
  background: #fff; line-height: 0;
}
.hero-figure img { width: 100%; height: auto; }
@media (max-width: 900px) { .hero-figure { max-width: 34rem; } }

/* ======================================================= inline diagrams
   The SVG diagrams are drawn with these custom properties so one palette
   re-themes every figure. Without them the var() references are invalid, the
   presentation attributes fall back to the SVG defaults, and every shape
   paints solid black with no stroke. */
.diagram {
  --dg-paper:      var(--surface);
  --dg-fill:       #FFFDF7;
  --dg-fill-2:     #F7F1E1;
  --dg-line:       #A99A78;
  --dg-line-soft:  #DFD3B8;
  --dg-text:       var(--ink);
  --dg-ink:        var(--ink);
  --dg-muted:      var(--ink-3);
  --dg-accent:      var(--teal-deep);
  --dg-accent-soft: #D6EDEE;
  --dg-alt:         var(--purple-deep);
  --dg-alt-soft:    #EADFF1;
  --dg-warn:        #8A5A10;
  --dg-warn-soft:   #FBEFD6;
  /* Used only inside the mock browser window in the HTML/CSS diagram: a
     highlighted span, the text sitting on it, and a default link colour. */
  --dg-mark:        #FFF07A;
  --dg-mark-ink:    #2A2200;
  --dg-link:        #1A4FC4;

  margin: var(--sp-5) 0;
  max-width: min(100%, var(--dg-max, 760px));
  margin-inline: auto;
}
[data-theme="dark"] .diagram {
  --dg-fill:       #1B2A31;
  --dg-fill-2:     #22333A;
  --dg-line:       #4E6B72;
  --dg-line-soft:  #375057;
  --dg-accent:      var(--aqua);
  --dg-accent-soft: #11363A;
  --dg-alt:         var(--lilac);
  --dg-alt-soft:    #2C2440;
  --dg-warn:        #D8B96B;
  --dg-warn-soft:   #342B14;
  --dg-mark:        #6A5A12;
  --dg-mark-ink:    #FFF4CC;
  --dg-link:        #9CC0FF;
}
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram .dg-mono { font-family: var(--font-mono); }
.diagram figcaption {
  margin-top: var(--sp-3); font-size: .88rem; color: var(--ink-3);
  line-height: 1.55; text-align: left;
}

/* --------------------------------------------------- stepped diagrams
   Before the controller runs, every stage is visible and the figure reads as
   a complete static diagram. .is-stepped is only added once JavaScript has
   taken over, so there is never a moment where the content is hidden with no
   way to reveal it. */
.diagram-steps .dg-step { transition: opacity .35s ease; }
.diagram-steps.is-stepped .dg-step { display: none; }
.diagram-steps.is-stepped .dg-step.is-on { display: block; animation: dgIn .35s ease; }
@keyframes dgIn { from { opacity: 0; } to { opacity: 1; } }

.dg-controls {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.dg-controls[hidden] { display: none; }
.dg-btn {
  font: inherit; font-size: .84rem; font-weight: 600; padding: .34rem .9rem;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.dg-btn:hover { background: var(--accent-quiet); color: var(--accent); border-color: transparent; }
.dg-btn-play { background: var(--grad-brand); color: #fff; border-color: transparent; }
.dg-btn-play:hover { color: #fff; filter: brightness(1.08); }
[data-theme="dark"] .dg-btn-play, [data-theme="dark"] .dg-btn-play:hover { color: #06231F; }
.dg-status {
  margin: 0; font-size: .86rem; color: var(--ink-3); line-height: 1.5;
  flex: 1 1 14rem; min-width: 0;
}
.dg-status b { color: var(--ink); font-weight: 650; margin-right: .3rem; white-space: nowrap; }

/* A moving part only ever moves for a reader who has not asked for stillness.
   The stepping controls keep working; only the motion stops. */
@media (prefers-reduced-motion: reduce) {
  .diagram-steps .dg-step,
  .diagram-steps.is-stepped .dg-step.is-on { transition: none; animation: none; }
  .dg-flow { animation: none !important; }
}
/* A dash that travels along a wire, used for buses and network links. */
.dg-flow { stroke-dasharray: 7 7; animation: dgFlow 1.1s linear infinite; }
@keyframes dgFlow { to { stroke-dashoffset: -14; } }
.dg-pulse { animation: dgPulse 1.6s ease-in-out infinite; }
@keyframes dgPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Question headers are flex rows holding a number, the question and a marks
   chip. The question is a flex item, so it defaults to min-width:auto and will
   not shrink below its longest unbreakable run, pushing the marks chip past the
   edge on narrow screens. Same cause as the callout title above. */
.examq-head, .q-stem { flex-wrap: wrap; }
.examq-head .stem, .q-stem { min-width: 0; }
.examq-head .stem, .q-stem, .ms li, .q-feedback { overflow-wrap: anywhere; }
.examq-head .marks { margin-left: auto; }

/* Quiz options are flex rows: a letter chip and the option text. The text is an
   anonymous flex item, so it inherits min-width:auto and will not shrink below
   its longest unbreakable run. Making the text breakable lets the row fit on a
   320px screen, which is most of the site's quiz pages. */
.opt { overflow-wrap: anywhere; }
.opt .mark { flex: none; }

/* Several interactive tools wrap fixed-width output (the LMC mailbox grid, wide
   trace tables) in .tool-scroll, but that class had no style at all, so the
   content widened the page instead of scrolling inside its own box. */
.tool-scroll { overflow-x: auto; max-width: 100%; }

/* Headings are set large, and a single long word such as "Representation" is
   wider than a 320px screen can hold. break-word only acts when a word truly
   cannot fit, so normal wrapping is unaffected. */
h1, h2, h3, h4, h5 { overflow-wrap: break-word; }

/* Worksheet model answers can contain a long unbreakable run, such as a
   spreadsheet formula with no spaces, which cannot wrap at any screen width. */
.ws-ms-model, .ws-ms li, .model-answer p { overflow-wrap: anywhere; }

/* ====================================================== photographs
   A photograph of real hardware, for topics where the exam asks students to
   recognise a physical object. Always lazily loaded and always carrying its
   own width and height, so nothing on the page jumps while it arrives. */
.photo {
  margin: var(--sp-5) 0; max-width: min(100%, 640px); margin-inline: auto;
}
.photo img {
  width: 100%; height: auto; display: block; border-radius: var(--r-m);
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}
.photo figcaption {
  margin-top: var(--sp-3); font-size: .88rem; color: var(--ink-3);
  line-height: 1.55; text-align: left;
}
/* The credit has to be legible, not hidden. It is the condition the licence
   is granted on. */
.photo-credit {
  display: block; margin-top: .3rem; font-size: .76rem; color: var(--ink-muted);
}
.attribution-list { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.attribution-list li { list-style: none; }
.attribution-list b { display: block; font-weight: 650; color: var(--ink); }
.attribution-list span { font-size: .88rem; color: var(--ink-3); }

/* ===================================================== illustrations
   Drawn scenes (mskbuild/illus*.py). The panel behind each picture follows the
   page theme; the objects drawn on it keep their own colours in both. The
   numbered list under a picture matches the numbered badges drawn into it. */
.illus, .topic-banner {
  --il-bg1: #F4FBFB; --il-bg2: #ECE9F7; --il-dot: rgba(31, 58, 68, .09);
  --il-blob1: #DDF2F2; --il-blob2: #EAE1F4; --il-hole: #F1F4FA;
  --il-band: rgba(255, 255, 255, .5); --il-card: rgba(255, 255, 255, .66); --il-line: rgba(31, 58, 68, .16);
  --il-ink: #1F3A44; --il-ink2: #4A6470; --il-ok: #1B7A4B; --il-bad: #B0302B;
}
[data-theme="dark"] .illus, [data-theme="dark"] .topic-banner {
  --il-bg1: #14313B; --il-bg2: #1D2444; --il-dot: rgba(255, 255, 255, .07);
  --il-blob1: #1A4048; --il-blob2: #2A2750; --il-hole: #182C3F;
  --il-band: rgba(255, 255, 255, .06); --il-card: rgba(255, 255, 255, .07); --il-line: rgba(255, 255, 255, .2);
  --il-ink: #EAF4F4; --il-ink2: #B4C9CF; --il-ok: #7BE0A6; --il-bad: #FF9A91;
}
.illus { margin: var(--sp-5) 0; max-width: min(100%, var(--il-max, 820px)); margin-inline: auto; }

/* The picture across the top of a topic page. It is decoration: aria-hidden, no words in it,
   and cropped to its middle on a phone so the main object stays in view. */
.topic-banner {
  margin: 0 0 var(--sp-4); border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-1); background: var(--il-bg1);
}
.topic-banner > svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  /* a phone shows the middle of the picture, so its edges fade out instead of being cut mid-object */
  .topic-banner > svg {
    height: 92px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 13%, #000 87%, transparent 100%);
  }
}
.course-banner { margin-top: calc(-1 * var(--sp-4)); margin-bottom: var(--sp-6); }
.course-banner .topic-banner { margin: 0 auto; max-width: 900px; }
@media print { .topic-banner, .course-banner { display: none; } }
.illus-art {
  border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-1); background: var(--il-bg1);
}
.illus-art > svg { display: block; width: 100%; height: auto; }
.illus text, .topic-banner text { font-family: var(--font-body); }
.illus .il-ink, .topic-banner .il-ink { fill: var(--il-ink); }
.illus .il-ink2, .topic-banner .il-ink2 { fill: var(--il-ink2); }
.illus .il-ok { fill: var(--il-ok); }
.illus .il-bad { fill: var(--il-bad); }
.illus .il-m, .topic-banner .il-m { font-family: var(--font-mono); }
.illus .il-h { font-family: var(--font-display); }
.illus-steps {
  counter-reset: il; list-style: none; margin: var(--sp-3) 0 0; padding: 0;
  display: grid; gap: .55rem var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.illus-steps li {
  counter-increment: il; display: flex; gap: .65rem; align-items: flex-start;
  font-size: .9rem; line-height: 1.5; color: var(--ink-2); margin: 0;
}
.illus-steps li::before {
  content: counter(il); flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--grad-brand); color: #fff; font-weight: 800; font-size: .82rem;
  display: inline-flex; align-items: center; justify-content: center; margin-top: .05rem;
}
[data-theme="dark"] .illus-steps li::before { color: #06231F; }
.illus figcaption {
  margin-top: var(--sp-3); font-size: .88rem; color: var(--ink-3); line-height: 1.55; text-align: left;
}
.illus-hint { display: none; margin: .4rem 0 0; font-size: .8rem; color: var(--ink-3); }
@media (max-width: 640px) {
  /* a picture with labels in it is no use shrunk to a thumbnail: let it scroll */
  .illus-art { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .illus-art > svg { min-width: 640px; }
  .illus-hint { display: block; }
}

/* ======================================================= Pixel in 3D
   The cat cut into layers and held apart on the Z axis. The container sways
   a few degrees and the layers move at different rates against each other,
   so the ears and the headphones shift relative to the face. That parallax
   is the whole effect: without it this is just a drawing. */
.cat3d {
  position: relative; width: var(--cat-size, 240px); height: var(--cat-size, 240px);
  perspective: 620px; margin-inline: auto;
}
.cat3d-world {
  position: absolute; inset: 0; transform-style: preserve-3d;
  animation: catSway 7s ease-in-out infinite alternate;
}
.cat3d-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: translateZ(var(--z, 0px));
  transform-style: preserve-3d; overflow: visible;
}
@keyframes catSway {
  from { transform: rotateY(-13deg) rotateX(5deg); }
  to   { transform: rotateY(13deg) rotateX(-3deg); }
}

/* Asleep: he breathes, his ears sag, and the Zs drift up. */
.cat3d.is-asleep .cat3d-world { animation: catSway 9s ease-in-out infinite alternate; }
.cat3d.is-asleep .cat3d-head,
.cat3d.is-asleep .cat3d-visor,
.cat3d.is-asleep .cat3d-eyes,
.cat3d.is-asleep .cat3d-muzzle,
.cat3d.is-asleep .cat3d-cans {
  animation: catBreathe 4s ease-in-out infinite;
}
.cat3d.is-asleep .cat3d-ears { animation: catEarSag 9s ease-in-out infinite alternate; }
@keyframes catBreathe {
  0%, 100% { transform: translateZ(var(--z, 0px)) translateY(0) scale(1); }
  50%      { transform: translateZ(var(--z, 0px)) translateY(1.4%) scale(1.018); }
}
@keyframes catEarSag {
  from { transform: translateZ(var(--z, 0px)) rotate(0deg); }
  to   { transform: translateZ(var(--z, 0px)) rotate(-2.5deg); }
}
.cat3d-zzz {
  position: absolute; left: 68%; top: 6%; display: flex; gap: .35em;
  font-family: var(--font-display); font-weight: 700; color: var(--purple-deep);
  pointer-events: none;
}
.cat3d-zzz span {
  font-size: calc(var(--cat-size, 240px) * .1); opacity: 0;
  animation: catZ 3.6s ease-in-out infinite;
}
.cat3d-zzz span:nth-child(2) { animation-delay: 1.2s; font-size: calc(var(--cat-size, 240px) * .082); }
.cat3d-zzz span:nth-child(3) { animation-delay: 2.4s; font-size: calc(var(--cat-size, 240px) * .064); }
@keyframes catZ {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-6deg) scale(.7); }
  25%  { opacity: .9; }
  100% { opacity: 0; transform: translate(42%, -120%) rotate(14deg) scale(1.1); }
}

/* Nothing here is information, so when stillness is asked for it all stops
   and the cat simply sits there, which is exactly as useful. */
@media (prefers-reduced-motion: reduce) {
  .cat3d-world, .cat3d-layer, .cat3d-zzz span { animation: none !important; }
  .cat3d-world { transform: rotateY(-8deg) rotateX(3deg); }
  .cat3d-zzz span { opacity: .75; }
}

/* ------------------------------------------------- the waking-up screen
   Only ever shown when a page has genuinely not arrived yet. It is added by
   app.js after a delay, so a fast load never sees it: a loading screen on a
   page that was already there is just a slower page. */
.page-loader {
  position: fixed; inset: 0; z-index: 400; display: grid; place-content: center;
  gap: var(--sp-4); justify-items: center; text-align: center;
  background: var(--grad-page); opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.page-loader.is-on { opacity: 1; visibility: visible; }
.page-loader p {
  margin: 0; font-family: var(--font-display); font-weight: 650;
  font-size: 1.05rem; color: var(--ink-2);
}
.page-loader .loader-bar {
  width: min(220px, 60vw); height: 6px; border-radius: 3px;
  background: var(--surface-sunk); overflow: hidden;
}
.page-loader .loader-bar i {
  display: block; width: 40%; height: 100%; border-radius: 3px;
  background: var(--grad-brand); animation: loaderSlide 1.25s ease-in-out infinite;
}
@keyframes loaderSlide {
  from { transform: translateX(-110%); } to { transform: translateX(290%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader .loader-bar i { animation: none; width: 100%; opacity: .5; }
}

/* ------------------------------------------------------- the empty screens
   404 and offline. Both are "there is nothing here yet", so both get the
   same sleeping cat rather than a shrug and a back button. */
.empty-screen {
  display: grid; justify-items: center; text-align: center; gap: var(--sp-3);
  padding: var(--sp-7) 0 var(--sp-8); max-width: 44rem; margin-inline: auto;
}
.empty-screen h1 { margin: 0; }
.empty-screen .lead { margin: 0 auto; max-width: 34rem; }
.empty-screen .btn-row { justify-content: center; margin-top: var(--sp-3); }

/* ==========================================================================
   Printable worksheets
   ========================================================================== */
.ws-actions {
  margin: var(--sp-4) 0 var(--sp-5); display: flex; gap: .6rem; flex-wrap: wrap;
  align-items: center;
}
.ws-actions .muted { flex: 1 1 20rem; margin: 0; font-size: .85rem; }
.worksheet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-m); padding: var(--sp-5) var(--sp-5) var(--sp-4);
  max-width: 52rem; margin: 0 auto var(--sp-8);
}
.ws-head {
  display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: space-between;
  border-bottom: 2px solid var(--ink); padding-bottom: .9rem; margin-bottom: 1.4rem;
}
.ws-title { min-width: 0; flex: 1 1 20rem; }
.ws-course {
  margin: 0 0 .2rem; font-size: .78rem; font-weight: 660; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.ws-head h1 { margin: 0 0 .35rem; font-size: 1.5rem; line-height: 1.2; }
.ws-meta { margin: 0; font-size: .84rem; color: var(--ink-3); }
.ws-fields { flex: 0 1 13rem; display: grid; gap: .35rem; align-content: start; }
.ws-fields p { margin: 0; display: flex; gap: .5rem; align-items: baseline; font-size: .82rem; }
.ws-fields span { color: var(--ink-muted); min-width: 3rem; }
.ws-fields b { flex: 1; border-bottom: 1px solid var(--ink-muted); min-height: 1.2em; font-weight: 500; }

.ws-section { margin-bottom: 1.8rem; }
.ws-section h2 {
  font-size: 1.05rem; margin: 0 0 .25rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--border-strong);
}
.ws-section h3 { font-size: .95rem; margin: 1.2rem 0 .5rem; }
.ws-lead { margin: 0 0 1rem; font-size: .84rem; color: var(--ink-3); }
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-q { margin: 0 0 1.15rem; break-inside: avoid; }
.ws-stem { display: flex; gap: .55rem; align-items: baseline; font-size: .94rem; }
.ws-n { font-weight: 700; min-width: 1.4rem; }
.ws-marks {
  margin-left: auto; flex: none; font-size: .78rem; font-weight: 660;
  color: var(--ink-muted); white-space: nowrap;
}
.ws-cmd {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-strong); margin-right: .4rem;
}
.ws-opts { list-style: none; margin: .4rem 0 0 1.95rem; padding: 0; display: grid; gap: .18rem; }
.ws-opts li { display: flex; gap: .5rem; font-size: .89rem; }
.ws-opt {
  flex: none; width: 1.35rem; height: 1.35rem; border: 1px solid var(--ink-muted);
  border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 660;
}
.ws-lines { margin: .5rem 0 0 1.95rem; display: grid; gap: .95rem; }
.ws-lines span { display: block; border-bottom: 1px solid var(--border-strong); height: 0; }
.ws-answers { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-ans {
  display: inline-flex; gap: .35rem; align-items: baseline; border: 1px solid var(--border);
  border-radius: var(--r-s); padding: .25rem .55rem; font-size: .86rem;
}
.ws-ans b { color: var(--ink-muted); font-weight: 600; }
.ws-ms { margin-bottom: 1rem; break-inside: avoid; }
.ws-ms-head { margin: 0; font-size: .9rem; display: flex; gap: .5rem; }
.ws-ms-note { margin: .15rem 0 .25rem; font-size: .78rem; color: var(--ink-muted); }
.ws-ms ul { margin: 0 0 .4rem 1.2rem; padding: 0; font-size: .86rem; }
.ws-ms ul li { margin: .1rem 0; }
.ws-ms-model { margin: 0; font-size: .84rem; color: var(--ink-2); }
.ws-fig { margin: .55rem 0 0 1.95rem; }
.ws-fig table, .ws-ms-model table { border-collapse: collapse; width: auto; font-size: .86rem; margin: 0 0 .6rem; }
.ws-fig th, .ws-fig td, .ws-ms-model th, .ws-ms-model td {
  border: 1px solid var(--border-strong); padding: .3rem .8rem; text-align: left;
}
.ws-fig th, .ws-ms-model th { background: var(--surface-2); font-weight: 650; }
.ws-fig .table-scroll { overflow-x: auto; }
.ws-fig .code-block, .ws-ms-model .code-block { margin-bottom: .6rem; }
.ws-foot {
  border-top: 1px solid var(--border); padding-top: .6rem; margin-top: 1.4rem;
  font-size: .74rem; color: var(--ink-muted);
}

@media print {
  .no-print, .site-footer, .search-shell, .mascot-dock, .site-header, .crumbs,
  .progress-bar, .skip-link { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  .worksheet {
    border: 0; padding: 0; max-width: none; margin: 0; background: #fff; color: #000;
  }
  .worksheet a { color: #000; text-decoration: none; }
  .ws-break { break-before: page; }
  .ws-lines span { border-bottom-color: #999; }
  .ws-opt, .ws-fields b { border-color: #666; }
  .ws-course, .ws-meta, .ws-lead, .ws-marks, .ws-ms-note, .ws-foot { color: #444 !important; }
  /* A code block is pale text on a dark ground, and printers drop backgrounds
     by default, which would leave the text invisible. */
  .worksheet .code-block, .worksheet .code-block pre {
    background: #fff !important; color: #000 !important; border: 1px solid #999;
    box-shadow: none; border-radius: 0;
  }
  .worksheet .code-block code, .worksheet .code-block code span { color: #000 !important; }
  .worksheet .code-copy, .worksheet .code-label, .worksheet .pyrun-bar,
  .worksheet .pyrun-out, .worksheet .pyrun-input { display: none !important; }
  @page { margin: 16mm 14mm; }
}

/* ==========================================================================
   Runnable Python
   These rules were lost in the move to the printed guide design, so the Run,
   Edit and Reset buttons on every Python page rendered as bare browser
   buttons and the output box as plain text. The buttons are fully styled here
   instead of leaning on the tool stylesheet, which a page only loads when it
   mounts a tool.
   ========================================================================== */
.code-block:has(.pyrun-bar) pre { margin-bottom: 0; border-radius: var(--r-m) var(--r-m) 0 0; }
.pyrun-bar {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .55rem .8rem; background: var(--surface-2);
  border: 1px solid var(--border); border-top: 0;
}
.pyrun-bar .tool-btn {
  font: inherit; font-size: .82rem; font-weight: 600; padding: .34rem .85rem;
  border-radius: var(--r-pill); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pyrun-bar .tool-btn:hover { background: var(--accent-quiet); color: var(--accent); border-color: transparent; }
.pyrun-bar .tool-btn.is-primary { background: var(--grad-brand); color: #fff; border-color: transparent; }
.pyrun-bar .tool-btn.is-primary:hover { color: #fff; filter: brightness(1.08); }
[data-theme="dark"] .pyrun-bar .tool-btn.is-primary,
[data-theme="dark"] .pyrun-bar .tool-btn.is-primary:hover { color: #06231F; }
.pyrun-bar .tool-btn:disabled { opacity: .5; cursor: not-allowed; }
.pyrun-bar .tool-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.pyrun-note { font-size: .78rem; color: var(--ink-muted); }
.pyrun-note.is-bad { color: var(--bad); }
.pyrun-editor {
  display: block; width: 100%; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font-family: var(--font-mono);
  font-size: .86rem; line-height: 1.7; padding: .9rem 1rem; resize: vertical;
}
.pyrun-editor:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pyrun-input { padding: .6rem .8rem; border: 1px solid var(--border); border-top: 0; background: var(--surface-2); }
.pyrun-input textarea {
  width: 100%; font-family: var(--font-mono); font-size: .84rem; padding: .4rem .55rem;
  border: 1px solid var(--border-strong); border-radius: var(--r-s);
  background: var(--surface); color: var(--ink); resize: vertical;
}
.tool-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: .3rem; }
.pyrun-out {
  margin: 0; padding: .8rem 1rem; border: 1px solid var(--border); border-top: 0;
  background: var(--surface-sunk); color: var(--ink-2); overflow-x: auto;
  border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: none;
}
.pyrun-out code {
  font-family: var(--font-mono); font-size: .84rem; line-height: 1.65;
  color: var(--ink-2); background: none; border: 0; padding: 0; white-space: pre-wrap;
}
.pyrun-out.is-error code { color: var(--bad); }
/* display:block above would otherwise beat the hidden attribute these rely on */
.pyrun-editor[hidden], .pyrun-input[hidden], .pyrun-out[hidden], .pyrun-bar[hidden] { display: none; }


/* Generated by build.py: the dark rules above, repeated for readers
   whose system asks for dark before any script has run. An explicit
   data-theme="light" still overrides them. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {--grad-page: linear-gradient(135deg, #0C2B2E 0%, #0A2226 48%, #101A22 100%);
  /* The dark end of this ramp left the dark button label at roughly 4.4:1,
     just under AA. Lifting it keeps the gradient while clearing the bar. */
  --grad-brand: linear-gradient(135deg, var(--aqua), #2BB5BC);
  --grad-lilac: linear-gradient(135deg, var(--lilac), var(--purple));
  --grad-soft:  linear-gradient(135deg, #16333A, #241F33);

  --glass:        rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.11);
  --glass-edge:   rgba(255, 255, 255, 0.14);

  --surface:      #16232A;
  --surface-2:    #1D2C33;
  --surface-sunk: #101B21;
  --bg:      #0E1F23;
  --bg-alt:  #142830;

  --border:        #2A3D45;
  --border-strong: #3D555E;

  --ink:       #EAF4F4;
  --ink-2:     #CBDCDE;
  --ink-3:     #A6BBBF;
  --ink-muted: #A2B7BC;

  --accent:        var(--aqua);
  --accent-strong: #9BDDE1;
  --accent-quiet:  #143A3D;
  --focus-ring:    #8FD6DB;

  --ok:   #64C79C; --ok-bg:   #10312A;
  --warn: #D8B96B; --warn-bg: #322913;
  --bad:  #E795A2; --bad-bg:  #371B22;

  --ks3:  var(--lilac);
  --ks4:  var(--aqua);
  --ks5:  #57BFB2;
  --ksim: #B7A8CE;
  --kspy: #8FD6DB;

  --shadow-1: 0 2px 10px rgba(0,0,0,.34);
  --shadow-2: 0 6px 24px rgba(0,0,0,.44);
  --shadow-3: 0 16px 48px rgba(0,0,0,.54);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  color-scheme: dark;}
  :root:not([data-theme="light"]) body::before, :root:not([data-theme="light"]) body::after {background: rgba(107, 196, 202, .07);}
  :root:not([data-theme="light"]) .site-header {background: rgba(14, 31, 35, .72); border-bottom-color: rgba(255,255,255,.09);}
  :root:not([data-theme="light"]) .nav a:hover {background: rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) .nav a[aria-current="page"], :root:not([data-theme="light"]) .nav a.is-active {color: #06231F;}
  :root:not([data-theme="light"]) .icon-btn {background: rgba(255,255,255,.07);}
  :root:not([data-theme="light"]) .icon-btn:hover {background: rgba(255,255,255,.14); color: var(--accent);}
  :root:not([data-theme="light"]) .nav {background: rgba(14,31,35,.95);}
  :root:not([data-theme="light"]) .badge {background: rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) .btn-primary {color: #06231F;}
  :root:not([data-theme="light"]) .btn-primary:hover {color: #06231F;}
  :root:not([data-theme="light"]) .btn-secondary {background: rgba(255,255,255,.09);}
  :root:not([data-theme="light"]) .btn-secondary:hover {background: rgba(255,255,255,.16);}
  :root:not([data-theme="light"]) .btn-ghost {color: var(--accent-strong);}
  :root:not([data-theme="light"]) .btn-ghost:hover {background: rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) .note-warn {background: var(--warn-bg); --note-accent: #D8B96B;}
  :root:not([data-theme="light"]) .note-key {--note-accent: var(--aqua);}
  :root:not([data-theme="light"]) .note-exam {--note-accent: #7FD3D9;}
  :root:not([data-theme="light"]) .note-grade {--note-accent: var(--lilac);}
  :root:not([data-theme="light"]) .note-fact {--note-accent: var(--lilac);}
  :root:not([data-theme="light"]) .eyebrow {background: rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) .gradient-text {background: linear-gradient(115deg, var(--aqua) 5%, var(--lilac) 60%, #E9DCEF 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;}
  :root:not([data-theme="light"]) .section-alt {background: rgba(255,255,255,.03); border-block-color: rgba(255,255,255,.07);}
  :root:not([data-theme="light"]) .toc a:hover {background: rgba(255,255,255,.06);}
  :root:not([data-theme="light"]) .examq-head .n {color: var(--lilac);}
  :root:not([data-theme="light"]) .mascot-bubble {background: rgba(22,35,42,.92);}
  :root:not([data-theme="light"]) .journey-dot {background: var(--surface);}
  :root:not([data-theme="light"]) .pill {background: rgba(255,255,255,.08);}
  :root:not([data-theme="light"]) a.pill:hover {background: rgba(255,255,255,.15);}
  :root:not([data-theme="light"]) .diagram {--dg-fill:       #1B2A31;
  --dg-fill-2:     #22333A;
  --dg-line:       #4E6B72;
  --dg-line-soft:  #375057;
  --dg-accent:      var(--aqua);
  --dg-accent-soft: #11363A;
  --dg-alt:         var(--lilac);
  --dg-alt-soft:    #2C2440;
  --dg-warn:        #D8B96B;
  --dg-warn-soft:   #342B14;
  --dg-mark:        #6A5A12;
  --dg-mark-ink:    #FFF4CC;
  --dg-link:        #9CC0FF;}
  :root:not([data-theme="light"]) .dg-btn-play, :root:not([data-theme="light"]) .dg-btn-play:hover {color: #06231F;}
  :root:not([data-theme="light"]) .illus, :root:not([data-theme="light"]) .topic-banner {--il-bg1: #14313B; --il-bg2: #1D2444; --il-dot: rgba(255, 255, 255, .07);
  --il-blob1: #1A4048; --il-blob2: #2A2750; --il-hole: #182C3F;
  --il-band: rgba(255, 255, 255, .06); --il-card: rgba(255, 255, 255, .07); --il-line: rgba(255, 255, 255, .2);
  --il-ink: #EAF4F4; --il-ink2: #B4C9CF; --il-ok: #7BE0A6; --il-bad: #FF9A91;}
  :root:not([data-theme="light"]) .illus-steps li::before {color: #06231F;}
  :root:not([data-theme="light"]) .pyrun-bar .tool-btn.is-primary, :root:not([data-theme="light"]) .pyrun-bar .tool-btn.is-primary:hover {color: #06231F;}
}