/* ============================================================================
   URstudymate — shared design system for the chemistry notes
   IB Diploma Chemistry · Cambridge IGCSE 0620 · Cambridge AS & A Level 9701

   Loaded AFTER each site's own stylesheet(s). It does three things:
     1. defines one set of --u-* tokens (light + dark),
     2. maps both legacy token vocabularies (Valence: --panel/--ink-2/--bx-*;
        A Level: --paper/--ink2/--def-bg ...) onto those tokens, so every
        existing component and every canvas chart re-colours automatically,
     3. re-cuts shared components (header, navigation, callouts, tables,
        equations, figures, practice questions) to one look.
   Print rules live in urstudymate-print.css. No external dependencies.
   ========================================================================== */

/* ---------- 1. tokens ----------------------------------------------------- */
:root{
  /* URstudymate brand (from the logo): blue #5283B7, red #EC2024,
     charcoal #353233, grey #717070. Text-safe shades are used for links and
     labels so they meet WCAG AA on white. */
  --u-brand-blue:#5283B7; --u-brand-red:#EC2024; --u-brand-ink:#353233; --u-brand-grey:#717070;
  --u-bg:#F5F6F8; --u-surface:#FFFFFF; --u-surface-2:#F8F9FB; --u-sunk:#EEF0F3;
  --u-ink:#232022; --u-ink-2:#454245; --u-ink-3:#5E5B5D;
  --u-rule:#DFE1E5; --u-rule-2:#C7CAD0;
  --u-accent:#3B6DA3; --u-accent-strong:#2C5585; --u-accent-tint:#E8F0F8;
  --u-red:#C8161D; --u-red-tint:#FDECEC;
  --u-link:#2F62A0; --u-focus:#1A5FB4;
  --u-structure:#3B6DA3; --u-structure-tint:#E8F0F8;
  --u-reactivity:#C8161D; --u-reactivity-tint:#FDECEC;

  /* curricula: used for labels only, never as the sole signal */
  --u-ib:#3B6DA3;  --u-ib-tint:#E8F0F8;
  --u-ig:#C8161D;  --u-ig-tint:#FDECEC;
  --u-al:#454245;  --u-al-tint:#EEEDEE;

  /* callout kinds: accent / tint */
  --u-obj:#3847A0;   --u-obj-bg:#EDEFFA;
  --u-def:#1B5F8F;   --u-def-bg:#EAF2F9;
  --u-work:#1E6B3E;  --u-work-bg:#E8F4EC;
  --u-prac:#8A4B12;  --u-prac-bg:#F9EFE4;
  --u-tip:#765700;   --u-tip-bg:#FBF4DE;
  --u-ms:#5B3E96;    --u-ms-bg:#F2EDFA;
  --u-trap:#A2281F;  --u-trap-bg:#FBEDEB;
  --u-check:#3C4A58; --u-check-bg:#EFF2F5;
  --u-think:#0B6273; --u-think-bg:#E5F3F5;
  --u-note:#4A5663;  --u-note-bg:#F1F3F5;

  /* SL/Core vs HL/Supplement — a syllabus distinction, kept distinct */
  --u-sl:#1B5F8F; --u-sl-bg:#E4EEF8;
  --u-hl:#6A3D8F; --u-hl-bg:#EFE7F7;

  --u-eq-bg:#F8FAFA; --u-eq-bd:#B8C3C1; --u-th-bg:#EEF2F1;
  --u-grid:#E3E8E7; --u-axis:#A9B4B2;
  --u-good:#1E6B3E; --u-good-tint:#E6F3EB;
  --u-bad:#A2281F;  --u-bad-tint:#FBEAE8;
  --u-warn:#765700; --u-warn-tint:#FBF2DB;

  --u-shadow:0 1px 2px rgba(18,28,36,.05), 0 6px 18px -10px rgba(18,28,36,.18);
  --u-shadow-lift:0 2px 4px rgba(18,28,36,.06), 0 14px 30px -14px rgba(18,28,36,.28);
  --u-radius:10px; --u-radius-sm:6px;

  --u-font:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,"Noto Sans",Arial,sans-serif,"Segoe UI Symbol","Cambria Math";
  --u-font-head:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Roboto,"Noto Sans",Arial,sans-serif;
  --u-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,Menlo,"DejaVu Sans Mono",monospace;

  --u-measure:74ch;
  --u-page:1320px;
  --u-ease:cubic-bezier(.2,.7,.2,1);
  --u-t-fast:140ms; --u-t:240ms;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --u-bg:#111214; --u-surface:#19191C; --u-surface-2:#1F2023; --u-sunk:#151618;
    --u-ink:#ECEBEB; --u-ink-2:#C4C2C3; --u-ink-3:#A09E9F;
    --u-rule:#2B2C30; --u-rule-2:#3E3F44;
    --u-accent:#82AADA; --u-accent-strong:#A6C4E8; --u-accent-tint:#1A2736;
    --u-red:#FF7A7E; --u-red-tint:#3A1B1C;
    --u-link:#8DB4E2; --u-focus:#8AB8F5;
    --u-structure:#82AADA; --u-structure-tint:#1A2736;
    --u-reactivity:#FF7A7E; --u-reactivity-tint:#3A1B1C;
    --u-ib:#82AADA; --u-ib-tint:#1A2736;
    --u-ig:#FF7A7E; --u-ig-tint:#3A1B1C;
    --u-al:#D6D4D5; --u-al-tint:#2A2A2D;
    --u-obj:#A3AEF2;   --u-obj-bg:#1B2040;
    --u-def:#7DB9E6;   --u-def-bg:#12263A;
    --u-work:#72CB97;  --u-work-bg:#11291C;
    --u-prac:#E3A565;  --u-prac-bg:#2D2012;
    --u-tip:#DDB752;   --u-tip-bg:#29230F;
    --u-ms:#B9A0EC;    --u-ms-bg:#231B38;
    --u-trap:#F08C82;  --u-trap-bg:#321A18;
    --u-check:#AEBAC6; --u-check-bg:#1B2329;
    --u-think:#66C5D3; --u-think-bg:#0F2A30;
    --u-note:#AAB5C0;  --u-note-bg:#1A2126;
    --u-sl:#7DB9E6; --u-sl-bg:#14263A;
    --u-hl:#C4A2E4; --u-hl-bg:#241A34;
    --u-eq-bg:#161719; --u-eq-bd:#45464B; --u-th-bg:#212226;
    --u-grid:#223036; --u-axis:#4A585C;
    --u-good:#62C79C; --u-good-tint:#10291E;
    --u-bad:#F08C82;  --u-bad-tint:#321A18;
    --u-warn:#DDB752; --u-warn-tint:#29230F;
    --u-shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -10px rgba(0,0,0,.6);
    --u-shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --u-bg:#111214; --u-surface:#19191C; --u-surface-2:#1F2023; --u-sunk:#151618;
  --u-ink:#ECEBEB; --u-ink-2:#C4C2C3; --u-ink-3:#A09E9F;
  --u-rule:#2B2C30; --u-rule-2:#3E3F44;
  --u-accent:#82AADA; --u-accent-strong:#A6C4E8; --u-accent-tint:#1A2736;
    --u-red:#FF7A7E; --u-red-tint:#3A1B1C;
  --u-link:#8DB4E2; --u-focus:#8AB8F5;
  --u-structure:#82AADA; --u-structure-tint:#1A2736;
  --u-reactivity:#FF7A7E; --u-reactivity-tint:#3A1B1C;
  --u-ib:#82AADA; --u-ib-tint:#1A2736;
  --u-ig:#FF7A7E; --u-ig-tint:#3A1B1C;
  --u-al:#D6D4D5; --u-al-tint:#2A2A2D;
  --u-obj:#A3AEF2;   --u-obj-bg:#1B2040;
  --u-def:#7DB9E6;   --u-def-bg:#12263A;
  --u-work:#72CB97;  --u-work-bg:#11291C;
  --u-prac:#E3A565;  --u-prac-bg:#2D2012;
  --u-tip:#DDB752;   --u-tip-bg:#29230F;
  --u-ms:#B9A0EC;    --u-ms-bg:#231B38;
  --u-trap:#F08C82;  --u-trap-bg:#321A18;
  --u-check:#AEBAC6; --u-check-bg:#1B2329;
  --u-think:#66C5D3; --u-think-bg:#0F2A30;
  --u-note:#AAB5C0;  --u-note-bg:#1A2126;
  --u-sl:#7DB9E6; --u-sl-bg:#14263A;
  --u-hl:#C4A2E4; --u-hl-bg:#241A34;
  --u-eq-bg:#161719; --u-eq-bd:#45464B; --u-th-bg:#212226;
  --u-grid:#223036; --u-axis:#4A585C;
  --u-good:#62C79C; --u-good-tint:#10291E;
  --u-bad:#F08C82;  --u-bad-tint:#321A18;
  --u-warn:#DDB752; --u-warn-tint:#29230F;
  --u-shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -10px rgba(0,0,0,.6);
  --u-shadow-lift:0 2px 4px rgba(0,0,0,.4), 0 14px 30px -14px rgba(0,0,0,.7);
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}

/* current curriculum colour (label chips, header rule) */
:root{--u-curr:var(--u-accent);--u-curr-tint:var(--u-accent-tint)}
:root[data-curriculum="ibdp"]{--u-curr:var(--u-ib);--u-curr-tint:var(--u-ib-tint)}
:root[data-curriculum="igcse"]{--u-curr:var(--u-ig);--u-curr-tint:var(--u-ig-tint)}
:root[data-curriculum="alevel"],:root[data-curriculum="aslevel"]{--u-curr:var(--u-al);--u-curr-tint:var(--u-al-tint)}

/* ---------- 2. legacy token bridges -----------------------------------------
   Triple :root beats the legacy dark-mode selectors (specificity 0,2,0), so
   the bridge wins in every theme and the --u-* values decide the colour.     */
:root:root:root{
  /* Valence (IBDP + IGCSE) */
  --ground:var(--u-bg); --panel:var(--u-surface); --panel-2:var(--u-surface-2); --sunk:var(--u-sunk);
  --ink:var(--u-ink); --ink-2:var(--u-ink-2); --ink-3:var(--u-ink-3);
  --rule:var(--u-rule); --rule-2:var(--u-rule-2);
  --structure:var(--u-structure); --structure-tint:var(--u-structure-tint);
  --reactivity:var(--u-reactivity); --reactivity-tint:var(--u-reactivity-tint);
  --good:var(--u-good); --good-tint:var(--u-good-tint);
  --bad:var(--u-bad); --bad-tint:var(--u-bad-tint);
  --warn:var(--u-warn); --warn-tint:var(--u-warn-tint);
  --grid:var(--u-grid); --axis:var(--u-axis); --focus:var(--u-focus);
  --shadow:var(--u-shadow);
  --bx-def-bg:var(--u-def-bg);    --bx-def-ac:var(--u-def);
  --bx-alert-bg:var(--u-tip-bg);  --bx-alert-ac:var(--u-tip);
  --bx-trap-bg:var(--u-trap-bg);  --bx-trap-ac:var(--u-trap);
  --bx-we-bg:var(--u-work-bg);    --bx-we-ac:var(--u-work);
  --bx-ms-bg:var(--u-ms-bg);      --bx-ms-ac:var(--u-ms);
  --bx-ck-bg:var(--u-check-bg);   --bx-ck-ac:var(--u-check);
  --bx-th-bg:var(--u-think-bg);   --bx-th-ac:var(--u-think);
  --bg-sl-bg:var(--u-sl-bg); --bg-sl-fg:var(--u-sl);
  --bg-hl-bg:var(--u-hl-bg); --bg-hl-fg:var(--u-hl);
  --eqbg:var(--u-eq-bg); --eqbd:var(--u-eq-bd); --thbg:var(--u-th-bg);
  /* A Level 9701 */
  --bg:var(--u-bg); --paper:var(--u-surface); --ink2:var(--u-ink-2); --dim:var(--u-ink-3);
  --line:var(--u-rule); --line2:var(--u-rule-2); --rail:var(--u-surface-2);
  --accent:var(--u-accent); --accent-soft:var(--u-accent-tint);
  --def:var(--u-def); --def-bg:var(--u-def-bg);
  --alert:var(--u-tip); --alert-bg:var(--u-tip-bg);
  --trap:var(--u-trap); --trap-bg:var(--u-trap-bg);
  --work:var(--u-work); --work-bg:var(--u-work-bg);
  --think:var(--u-think); --think-bg:var(--u-think-bg);
  --note:var(--u-note); --note-bg:var(--u-note-bg);
  --quiz-bg:var(--u-surface-2); --code:var(--u-sunk);
  --sh:var(--u-shadow); --maxw:880px;
}

/* ---------- 3. base ------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--u-bg);color:var(--u-ink);font-family:var(--u-font);
  font-size:16px;line-height:1.62;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--u-font-head);color:var(--u-ink);text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--u-link);text-decoration-thickness:1px;text-underline-offset:2px;
  transition:color var(--u-t-fast) ease, background-color var(--u-t-fast) ease, border-color var(--u-t-fast) ease}
a:hover{color:var(--u-accent-strong)}
code,.mono,kbd,samp{font-family:var(--u-mono)}
/* sub/sup must not open gaps in the line spacing of chemical formulae */
sub,sup{font-size:.72em;line-height:0;position:relative}
sup{vertical-align:baseline;top:-.5em}
sub{vertical-align:baseline;bottom:-.25em}
img,svg,canvas,video{max-width:100%}
img{height:auto}
::selection{background:color-mix(in srgb,var(--u-accent) 26%,transparent)}

/* visible focus everywhere — overrides the legacy "outline:none" rules */
:focus-visible,
#q:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,
button:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--u-focus)!important;outline-offset:2px;border-radius:4px}
.usm-scroll:focus-visible{outline-offset:-3px}

/* skip link */
.usm-skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--u-ink);color:var(--u-surface);
  padding:10px 14px;border-radius:var(--u-radius-sm);font-weight:600;text-decoration:none;
  transition:top var(--u-t-fast) ease}
.usm-skip:focus{top:10px;color:var(--u-surface)}

/* ---------- 4. brand + curriculum label ----------------------------------- */
.usm-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--u-font-head);font-weight:750;
  font-size:17px;letter-spacing:-.015em;color:var(--u-ink);text-decoration:none;white-space:nowrap}
.usm-logo:hover{color:var(--u-ink)}
.usm-logo .usm-mark{width:26px;height:26px;flex:0 0 auto}
.usm-logo b{color:var(--u-accent);font-weight:750}
.usm-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--u-font);font-size:11.5px;
  font-weight:650;letter-spacing:.02em;line-height:1.2;padding:4px 9px;border-radius:999px;
  background:var(--u-curr-tint);color:var(--u-curr);border:1px solid color-mix(in srgb,var(--u-curr) 30%,transparent);
  white-space:nowrap}
.usm-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.usm-homelink{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--u-ink-2);
  text-decoration:none;padding:7px 12px;border:1px solid var(--u-rule-2);border-radius:999px;background:var(--u-surface);
  white-space:nowrap}
.usm-homelink:hover{color:var(--u-ink);border-color:var(--u-accent);background:var(--u-accent-tint)}

/* ---------- 5. Valence chrome (IBDP + IGCSE) ------------------------------ */
.wrap{max-width:var(--u-page)}
.masthead{padding:18px 0 14px;border-bottom:1px solid var(--u-rule);position:relative}
.masthead::before{content:"";position:absolute;left:0;top:0;width:64px;height:3px;border-radius:0 0 3px 3px;background:var(--u-curr)}
.mast-eyebrow{font-family:var(--u-font);font-size:12px;letter-spacing:.02em;text-transform:none;gap:8px 12px;
  color:var(--u-ink-3);margin-bottom:10px}
.mast-eyebrow b{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650;padding:4px 10px;
  border-radius:999px;background:var(--u-curr-tint);color:var(--u-curr);border:1px solid color-mix(in srgb,var(--u-curr) 30%,transparent)}
.mast-eyebrow b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mast-eyebrow span{white-space:nowrap}
.mast-eyebrow span+span::before{content:"·";margin-right:10px;color:var(--u-rule-2)}
.mast-row{align-items:center;gap:10px 14px}
.mast-row>div:first-child{flex:1 1 auto;min-width:0}
.masthead h1{font-size:clamp(24px,3.2vw,30px);font-weight:750;letter-spacing:-.02em;line-height:1.1}
.masthead h1 a{display:inline-flex;align-items:center;gap:10px}
.masthead h1 a::before{content:"";width:28px;height:28px;flex:0 0 auto;border-radius:8px;
  background:var(--u-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M16 6.5l8.2 4.75v9.5L16 25.5l-8.2-4.75v-9.5z'/%3E%3Ccircle cx='16' cy='16' r='3.2'/%3E%3C/g%3E%3C/svg%3E") center/78% no-repeat}
.masthead h1 a:hover{text-decoration:none;color:var(--u-accent-strong)}
.themebtn,.tbtn{font-family:var(--u-font);font-size:12.5px;font-weight:600;letter-spacing:.01em;text-transform:none;
  border-radius:999px;border:1px solid var(--u-rule-2);background:var(--u-surface);color:var(--u-ink-2);
  padding:7px 13px;transition:background-color var(--u-t-fast) ease,border-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
.themebtn:hover,.tbtn:hover{color:var(--u-ink);border-color:var(--u-accent);background:var(--u-accent-tint)}
.index-hero .masthead h1,.masthead.big h1{font-size:clamp(30px,5vw,48px)}

.topbar{background:color-mix(in srgb,var(--u-bg) 92%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  margin-bottom:22px;transition:box-shadow var(--u-t) ease}
html.usm-scrolled .topbar,html.usm-scrolled #top{box-shadow:0 8px 20px -16px rgba(0,0,0,.45)}
.srch{border-radius:999px;padding:0 14px;border-color:var(--u-rule-2);box-shadow:none;background:var(--u-surface)}
.srch:focus-within{border-color:var(--u-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--u-focus) 22%,transparent)}
.srch input{font-size:15px;padding:10px 0}
.srch input:focus-visible{outline:none!important}
.skey,.qmeta,.rgroup,.rhit .rwhere{font-family:var(--u-mono)}
.results{border-radius:var(--u-radius);box-shadow:var(--u-shadow-lift)}
.rhit:hover,.rhit[aria-selected="true"]{background:var(--u-accent-tint)}

/* syllabus theme rail (horizontal tabs) */
.rail{border-bottom:1px solid var(--u-rule);background:transparent;scrollbar-width:thin}
.rail a,.rail button{font-family:var(--u-font);font-size:13.5px;padding:10px 14px 9px;border-bottom:3px solid transparent;
  transition:color var(--u-t-fast) ease,background-color var(--u-t-fast) ease,border-color var(--u-t) var(--u-ease)}
.rail a .k,.rail button .k,.rail a .cnt,.rail button .cnt{font-family:var(--u-font);letter-spacing:.03em;text-transform:none;font-size:11.5px}
.rail a .n,.rail button .n{font-weight:600}
.rail a:hover,.rail button:hover{background:var(--u-surface)}
.rail a[aria-current="page"]{color:var(--u-ink);background:var(--u-surface)}
.rail a.fam-s[aria-current="page"],.rail button.fam-s[aria-selected="true"]{border-bottom-color:var(--u-structure)}
.rail a.fam-r[aria-current="page"],.rail button.fam-r[aria-selected="true"]{border-bottom-color:var(--u-reactivity)}
:root[data-curriculum="igcse"] .rail a[aria-current="page"]{border-bottom-color:var(--u-ig)}

/* sub-topic pills */
.subnav{gap:8px;margin:0 0 18px}
.subnav a,.subnav button{font-family:var(--u-font);font-size:13px;border-radius:999px;padding:7px 13px;
  background:var(--u-surface);border-color:var(--u-rule-2);color:var(--u-ink-2);
  transition:background-color var(--u-t-fast) ease,border-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
.subnav a .c,.subnav button .c{font-family:var(--u-mono);font-size:11.5px}
.subnav a:hover,.subnav button:hover{border-color:var(--u-accent);color:var(--u-ink);background:var(--u-accent-tint)}
.subnav a[aria-current="page"],.subnav button[aria-pressed="true"]{background:var(--u-accent);border-color:var(--u-accent);color:#fff}
:root[data-theme="dark"] .subnav a[aria-current="page"]{color:#111214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .subnav a[aria-current="page"]{color:#111214}}
.subnav a[aria-current="page"] .c{color:inherit}

/* per-page contents (details.pgtoc) */
.pgtoc{border-radius:var(--u-radius);border-color:var(--u-rule);font-size:13.5px;background:var(--u-surface)}
.pgtoc>summary{font-family:var(--u-font);font-size:12px;letter-spacing:.04em;text-transform:none;font-weight:650;color:var(--u-ink-2);padding:12px 14px}
.pgtoc h4{font-family:var(--u-font);font-size:11.5px;letter-spacing:.03em;text-transform:none;color:var(--u-ink-3)}
.pgtoc a{border-radius:6px;padding:5px 8px;transition:background-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
.pgtoc a:hover{background:var(--u-accent-tint)}
.pgtoc a.on{background:var(--u-accent);color:#fff}
:root[data-theme="dark"] .pgtoc a.on{color:#111214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pgtoc a.on{color:#111214}}
.pgtoc a .n{font-family:var(--u-mono)}

.topicbar{border-bottom-color:var(--u-rule)}
.topicbar h3{font-family:var(--u-font-head);font-size:clamp(20px,2.6vw,26px);font-weight:750;letter-spacing:-.02em}
.topicbar .code{font-family:var(--u-mono);border-radius:999px;padding:4px 10px}
.topicbar .hrs{font-family:var(--u-font)}

.legend-bar{gap:8px 14px;padding:4px 0 14px}
.legend-bar .lg{font-family:var(--u-font);font-size:12.5px;color:var(--u-ink-2)}
.legend-bar i{width:12px;height:12px;border-radius:3px;border-left-width:4px}

.pager{gap:12px}
.pager a{border-radius:var(--u-radius);padding:14px 16px;background:var(--u-surface);border-color:var(--u-rule);
  transition:border-color var(--u-t-fast) ease,box-shadow var(--u-t) ease,transform var(--u-t) var(--u-ease)}
.pager a:hover{border-color:var(--u-accent);box-shadow:var(--u-shadow-lift)}
.pager .d{font-family:var(--u-font);letter-spacing:.04em;text-transform:none;font-size:12px;font-weight:600}
.pager .prev .d::before{content:"← "}
.pager .next .d::after{content:" →"}

.foot{max-width:none;color:var(--u-ink-2);font-size:13.5px;line-height:1.6}
.foot .learner{max-width:var(--u-measure)}

/* contents cards (Valence index pages) */
.toccard,.igcard{border-radius:var(--u-radius);border-color:var(--u-rule);background:var(--u-surface);
  transition:border-color var(--u-t-fast) ease,box-shadow var(--u-t) ease,transform var(--u-t) var(--u-ease)}
.toccard:hover,.igcard:hover{border-color:var(--u-accent);box-shadow:var(--u-shadow-lift);transform:translateY(-2px)}
.toccard .c,.igcard .k,.tag{font-family:var(--u-font);letter-spacing:.03em;text-transform:none}
.toccard h3,.igcard b{font-family:var(--u-font-head)}
.tag{border-radius:999px;padding:2px 8px;font-size:11px}
.theme-head .badge,.mod-code{font-family:var(--u-mono);border-radius:999px;text-transform:none;letter-spacing:.02em}

/* ---------- 6. A Level chrome --------------------------------------------- */
#top{background:color-mix(in srgb,var(--u-surface) 90%,transparent);border-bottom:1px solid var(--u-rule);
  transition:box-shadow var(--u-t) ease}
#top::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--u-curr)}
.topin{max-width:var(--u-page);gap:10px 12px;padding:10px 20px;min-height:58px}
#top .brand{font-family:var(--u-font-head);font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis}
#top .brand small{font-family:var(--u-font);font-weight:500;color:var(--u-ink-3)}
#top .usm-logo{padding-right:12px;border-right:1px solid var(--u-rule)}
#q{border-radius:999px;padding:8px 14px;border-color:var(--u-rule-2);font-family:var(--u-font)}
#q:focus{border-color:var(--u-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--u-focus) 22%,transparent)}
.wrap{gap:0}
#rail{top:var(--usm-top,58px);max-height:calc(100vh - var(--usm-top,58px));background:var(--u-surface-2);border-right-color:var(--u-rule);
  padding:18px 12px 60px 18px;scrollbar-width:thin}
#rail h4{font-family:var(--u-font);font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--u-ink-3);font-weight:650}
#rail a{border-radius:6px;padding:6px 10px;color:var(--u-ink-2);
  transition:background-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
#rail a:hover{background:var(--u-accent-tint);color:var(--u-ink)}
#rail a.on{background:var(--u-accent);color:#fff}
:root[data-theme="dark"] #rail a.on{color:#111214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #rail a.on{color:#111214}}
#doc{padding:30px 36px 120px;max-width:calc(var(--maxw) + 72px)}
#aside{top:var(--usm-top,58px);max-height:calc(100vh - var(--usm-top,58px));font-size:13px}
#aside #mini a{border-left:2px solid transparent;padding-left:9px!important;transition:color var(--u-t-fast) ease,border-color var(--u-t-fast) ease}
#aside #mini a:hover{border-left-color:var(--u-accent)}
@media (max-width:1000px){
  /* the closed drawer is off-screen: take it out of the tab order too */
  #rail{top:var(--usm-top,58px);bottom:0;max-height:none;visibility:hidden;transition:transform var(--u-t) var(--u-ease),visibility 0s linear var(--u-t);
    box-shadow:var(--u-shadow-lift)}
  #rail.open{visibility:visible;transition:transform var(--u-t) var(--u-ease),visibility 0s}
  #doc{padding:22px 18px 110px}
  .usm-scrim{position:fixed;inset:var(--usm-top,58px) 0 0 0;z-index:54;background:rgba(10,16,20,.35);opacity:0;pointer-events:none;
    transition:opacity var(--u-t) ease}
  .usm-scrim.on{opacity:1;pointer-events:auto}
}
@media (max-width:640px){
  .topin{padding:8px 12px;min-height:0}
  #top .usm-logo{border-right:0;padding-right:0}
  #top .usm-logo span{display:none}
  #top .usm-homelink .t{display:none}
}
/* A Level document typography */
#doc>.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.02em;text-transform:none;font-weight:650;
  color:var(--u-curr);background:var(--u-curr-tint);border:1px solid color-mix(in srgb,var(--u-curr) 30%,transparent);
  border-radius:999px;padding:4px 11px;line-height:1.35}
#doc>.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
#doc h1{font-size:clamp(28px,4vw,38px);font-weight:750;letter-spacing:-.025em;line-height:1.12;margin:.3em 0 .5em}
#doc h2{font-size:clamp(21px,2.4vw,25px);font-weight:720;letter-spacing:-.018em;border-bottom:0;border-top:1px solid var(--u-rule);
  padding-top:.8em;padding-bottom:0;margin:2.3em 0 .6em;scroll-margin-top:calc(var(--usm-top,58px) + 18px)}
#doc h3{font-size:clamp(17.5px,1.9vw,19.5px);font-weight:700;margin:1.8em 0 .45em}
#doc h4{font-size:16px;font-weight:700;color:var(--u-ink-2)}
#doc p,#doc li{max-width:var(--u-measure)}
#doc .box p,#doc .box li,#doc td p{max-width:none}
#doc .lead{font-size:17.5px;line-height:1.6;color:var(--u-ink-2)}
#doc footer{border-top-color:var(--u-rule);color:var(--u-ink-3)}
.oc{font-family:var(--u-mono);border-radius:999px;padding:2px 8px;margin-left:10px;font-size:11px}
.pill{border-radius:999px}
html{scroll-padding-top:calc(var(--usm-top,58px) + 18px)}

/* ---------- 7. shared lesson content -------------------------------------- */
/* Valence article card */
.doc{border-radius:14px;border-color:var(--u-rule);padding:34px clamp(18px,4vw,44px) 38px;font-size:16px;line-height:1.65}
.doc p,.doc ul,.doc ol{max-width:var(--u-measure)}
.doc .box p,.doc .box ul,.doc .box ol,.doc td p{max-width:none}
.doc h2{font-family:var(--u-font-head);font-size:clamp(21px,2.4vw,25px);font-weight:720;letter-spacing:-.018em;
  border-top:1px solid var(--u-rule);padding-top:.8em;margin:2.2em 0 .55em;line-height:1.25}
.doc>h2:first-child,.doc>.intro+h2{margin-top:.4em}
.doc h2.sec .secno{font-family:var(--u-mono);color:var(--u-accent);font-size:14px}
.doc h3{font-family:var(--u-font-head);font-size:clamp(17.5px,1.9vw,19.5px);font-weight:700;border-top:0;padding-top:0;margin:1.8em 0 .45em}
.doc h4{font-family:var(--u-font-head);font-size:15.5px;letter-spacing:0;text-transform:none;font-weight:700;color:var(--u-ink-2);margin:1.4em 0 .35em}
.doc .kicker,.doc .partlabel{font-family:var(--u-font);letter-spacing:.06em;font-size:12px}
.doc .partlabel{color:var(--u-curr);font-weight:700;display:flex;align-items:center;gap:10px}
.doc .partlabel::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--u-curr) 35%,transparent)}
.doc .lead{font-size:17px;line-height:1.6}
.doc .intro{border-radius:var(--u-radius);border-color:var(--u-rule);background:var(--u-surface-2);padding:16px 20px;font-size:15.5px}
.doc a{color:var(--u-link)}
.doc h2.sec .oc{font-family:var(--u-mono);border-radius:999px;padding:2px 9px}
.doc .badge,.doc .supp-inline{font-family:var(--u-font);border-radius:999px;letter-spacing:.03em;padding:3px 9px;font-size:10.5px}
.doc .b-sl,.doc .supp-inline.core{background:var(--u-sl-bg);color:var(--u-sl);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--u-sl) 30%,transparent)}
.doc .b-hl,.doc .supp-inline{background:var(--u-hl-bg);color:var(--u-hl);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--u-hl) 30%,transparent)}
.doc .quote{border-left-color:var(--u-rule-2)}
.doc .note,.note:not(.box){color:var(--u-ink-2)}

/* ---------- callouts: one component, ten kinds -------------------------- */
.box,.doc .box,.eo,.pset{
  --k:var(--u-note); --k-bg:var(--u-note-bg); --k-icon:"\2139\FE0E";
  position:relative;border:1px solid color-mix(in srgb,var(--k) 22%,var(--u-rule));
  border-left:4px solid var(--k);border-radius:var(--u-radius);background:var(--k-bg);
  padding:14px 18px 15px;margin:1.35em 0;box-shadow:none;font-size:15.5px;line-height:1.6}
.box.def,.doc .def{--k:var(--u-def);--k-bg:var(--u-def-bg);--k-icon:"\25A3"}
.box.trap,.doc .trap,.box.er{--k:var(--u-trap);--k-bg:var(--u-trap-bg);--k-icon:"\2715"}
.box.alert,.doc .alert,.eo{--k:var(--u-tip);--k-bg:var(--u-tip-bg);--k-icon:"\2605"}
.box.ms,.doc .ms{--k:var(--u-ms);--k-bg:var(--u-ms-bg);--k-icon:"\2713"}
.box.work,.box.we,.doc .we{--k:var(--u-work);--k-bg:var(--u-work-bg);--k-icon:"\270E\FE0E"}
.box.think,.doc .think{--k:var(--u-think);--k-bg:var(--u-think-bg);--k-icon:"\25C6"}
.box.note{--k:var(--u-note);--k-bg:var(--u-note-bg);--k-icon:"\2139\FE0E"}
.box.check,.doc .check,.box.qc,.pset{--k:var(--u-check);--k-bg:var(--u-check-bg);--k-icon:"?"}
.box[data-kind="objective"],.usm-objectives{--k:var(--u-obj);--k-bg:var(--u-obj-bg);--k-icon:"\25CE"}
.box[data-kind="practical"]{--k:var(--u-prac);--k-bg:var(--u-prac-bg);--k-icon:"\2697\FE0E"}
.box[data-kind="answers"]{--k:var(--u-work);--k-bg:var(--u-work-bg);--k-icon:"\2713"}
.pset{background:var(--u-surface);border-left-width:4px;padding:16px 20px}

/* callout titles: sentence case (upper-casing corrupts symbols such as pH, mol, kJ) */
.box .bt,.doc .box .t,.eo .bt{display:flex;align-items:baseline;gap:8px;font-family:var(--u-font);
  font-size:13px;letter-spacing:.01em;text-transform:none;font-weight:700;color:var(--k);margin:0 0 .45em;line-height:1.35}
.box .bt::before,.doc .box .t::before,.eo .bt::before{
  content:var(--k-icon);content:var(--k-icon) / "";flex:0 0 auto;display:inline-grid;place-items:center;
  width:20px;height:20px;border-radius:50%;background:var(--k);color:var(--u-surface);
  font-size:11px;font-weight:700;line-height:1;transform:translateY(3px)}
.usm-kind{font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.pset .psh{color:var(--u-ink);font-family:var(--u-font-head);font-size:18px}
.pset .psh::before{content:"?";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--u-check);color:var(--u-surface);font-size:12px;margin-right:8px;vertical-align:2px}
.pset .psi{color:var(--u-ink-3)}
.pq{border-top-color:var(--u-rule)}
.pq .pqh{font-weight:600}
.box .box{margin:.8em 0}

/* learning-objective list after an "h3 Learning objectives" heading (IGCSE) */
h3.usm-lo-h{display:flex;align-items:center;gap:10px}
h3.usm-lo-h::before{content:"\25CE";content:"\25CE" / "";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--u-obj);color:var(--u-surface);font-size:13px;flex:0 0 auto}
ul.usm-lo-list{background:var(--u-obj-bg);border:1px solid color-mix(in srgb,var(--u-obj) 22%,var(--u-rule));
  border-left:4px solid var(--u-obj);border-radius:var(--u-radius);padding:12px 18px 12px 38px!important;max-width:none!important}
.usm-prac-h{display:flex;align-items:center;gap:10px}
.usm-prac-h::before{content:"\2697\FE0E";content:"\2697\FE0E" / "";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--u-prac);color:var(--u-surface);font-size:13px;flex:0 0 auto}

/* ---------- equations and formulae -------------------------------------- */
.doc .eq{font-family:var(--u-font);font-size:16px;line-height:1.7;background:var(--u-eq-bg);border:1px solid var(--u-eq-bd);
  border-left:3px solid var(--u-accent);border-radius:var(--u-radius-sm);padding:12px 16px;margin:1em 0;
  overflow-x:auto;overflow-y:hidden;max-width:100%;font-variant-numeric:tabular-nums}
.doc .eq.plain{border:0;background:none;padding:2px 0}
.doc .chem{font-family:var(--u-font)}
div.f,p.f{display:block;background:var(--u-eq-bg);border:1px solid var(--u-eq-bd);border-left:3px solid var(--u-accent);
  border-radius:var(--u-radius-sm);padding:10px 14px;margin:.9em 0;font-size:16px;line-height:1.7;
  overflow-x:auto;overflow-y:hidden;max-width:100%}
.box div.f,.box p.f{background:color-mix(in srgb,var(--u-surface) 70%,transparent)}
span.f{white-space:nowrap}
.mech{overflow-x:auto}

/* ---------- tables -------------------------------------------------------- */
.tw,.doc .tablewrap,.usm-tablewrap{overflow-x:auto;margin:1.2em 0;border:1px solid var(--u-rule);border-radius:var(--u-radius);
  background:var(--u-surface);box-shadow:none;-webkit-overflow-scrolling:touch}
.usm-tablewrap>table,.doc .tablewrap>table,.tw>table{margin:0!important}
.box .tw,.box .tablewrap,.box .usm-tablewrap{background:var(--u-surface)}
.doc table,#doc table{font-size:14.5px;line-height:1.5}
.doc th,#doc th,thead th{font-family:var(--u-font);font-size:13px;letter-spacing:.01em;text-transform:none;font-weight:650;
  color:var(--u-ink);background:var(--u-th-bg);padding:9px 12px;border-bottom:1px solid var(--u-rule-2);white-space:normal}
.doc td,#doc td{padding:9px 12px;border-bottom-color:var(--u-rule)}
.doc tbody tr:nth-child(even) td,#doc tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--u-surface-2) 70%,transparent)}
.doc table caption,#doc caption{font-size:13px;color:var(--u-ink-2);padding:10px 12px}
table.data th{font-family:var(--u-font);text-transform:none;letter-spacing:.01em;font-size:12px}
.box.work table.we td,table.we td{border-bottom-color:color-mix(in srgb,var(--u-work) 18%,transparent)}
/* scroll hint on wide tables / equations (set by the script) */
.usm-scroll{position:relative}
.usm-scroll.usm-overflow{background-image:linear-gradient(to right,var(--u-surface) 30%,transparent),
  linear-gradient(to left,var(--u-surface) 30%,transparent),
  linear-gradient(to right,rgba(0,0,0,.12),transparent),linear-gradient(to left,rgba(0,0,0,.12),transparent);
  background-position:left center,right center,left center,right center;background-repeat:no-repeat;
  background-size:24px 100%,24px 100%,10px 100%,10px 100%;background-attachment:local,local,scroll,scroll}

/* ---------- figures, diagrams, question images ----------------------------- */
figure{margin:1.6em 0}
.doc figure svg,figure.fg .fig-body,figure svg{border-radius:var(--u-radius);border-color:var(--u-rule)}
figure.fg .fig-body{overflow-x:auto;padding:12px}
.doc figure img{border-radius:var(--u-radius);border-color:var(--u-rule)}
figcaption,.doc figcaption,figure.fg figcaption{font-family:var(--u-font);font-size:13.5px;line-height:1.5;color:var(--u-ink-2);margin-top:.6em;max-width:var(--u-measure)}
.pq img.qimg,.doc .x-qimg{border-radius:var(--u-radius-sm);border:1px solid var(--u-rule)}
/* images on white keep a white mat in dark mode so black line art stays legible */
.fig-body,.doc figure svg,.x-qimg,img.qimg{background:#fff}

/* ---------- practice questions, answers and self-tests --------------------- */
.doc .x-q{border-radius:var(--u-radius);border-color:var(--u-rule);padding:14px 16px;background:var(--u-surface)}
.doc .x-qh{font-weight:600}
.doc .x-ref{font-family:var(--u-mono)}
.doc .x-sol,.box.qc details.qa{border-radius:var(--u-radius-sm)}
.doc .x-sol>summary,details.more>summary,.box.qc details.qa>summary{
  font-family:var(--u-font);letter-spacing:.01em;text-transform:none;font-weight:650;color:var(--u-accent);
  border-radius:6px;transition:color var(--u-t-fast) ease,background-color var(--u-t-fast) ease}
.doc .x-sol>summary{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--u-rule-2);
  border-radius:999px;background:var(--u-surface-2);list-style:none}
.doc .x-sol>summary::-webkit-details-marker{display:none}
.doc .x-sol>summary::before{content:"\25B8";transition:transform var(--u-t) var(--u-ease)}
.doc .x-sol[open]>summary::before{transform:rotate(90deg)}
.doc .x-sol>summary:hover{background:var(--u-accent-tint);border-color:var(--u-accent)}
details.more{border-radius:var(--u-radius);border-color:var(--u-rule);background:var(--u-surface)}
details.more>summary{padding:11px 15px}
details.more>summary:hover{background:var(--u-surface-2)}
details.more>summary::before{display:inline-block;transition:transform var(--u-t) var(--u-ease);content:"\25B8  "}
details.more[open]>summary::before{content:"\25B8  ";transform:rotate(90deg)}
.box.qc details.qa{display:inline-block}
.box.qc details.qa>summary{padding:1px 6px}
.box.qc details.qa>summary:hover{background:var(--u-accent-tint)}
.doc ul.checklist li::before{color:var(--u-accent)}

/* quizzes and interactive models */
.quiz,.sim,.doc .sim{border-radius:var(--u-radius);border-color:var(--u-rule)}
.sim>.sh,.doc .sim>.sh{background:var(--u-accent-tint)}
.sim>.sh .ttl,.doc .sim>.sh .ttl{font-family:var(--u-font-head);color:var(--u-accent-strong)}
.doc .sim{border-top:3px solid var(--u-accent)}
.qopt,.doc .sim .qopt{border-radius:8px;transition:border-color var(--u-t-fast) ease,background-color var(--u-t-fast) ease}
.chip,.doc .sim .chip{transition:border-color var(--u-t-fast) ease,background-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
.mod{border-radius:var(--u-radius)}
.btn,.seg{border-radius:8px}
.flash,.doc .flash{border-radius:var(--u-radius);border-color:var(--u-rule)}
.flash .fh .ttl,.doc .flash .fh .ttl{font-family:var(--u-font-head)}
.flash .ph .pb,.doc .flash .ph .pb{border-radius:999px;background:var(--u-accent);transition:background-color var(--u-t-fast) ease,transform var(--u-t-fast) ease}
.flash .ph .pb:hover:not([disabled]),.doc .flash .ph .pb:hover:not([disabled]){background:var(--u-accent-strong)}
.flash .pill{border-radius:999px}

/* ---------- 8. copyright notice + copy deterrent --------------------------- */
.usm-copy{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--u-rule);font-size:12.5px;line-height:1.5;color:var(--u-ink-3)}
.usm-copy b{color:var(--u-ink-2);font-weight:650}
/* Copy restriction (html[data-usm-protect="block"], set in urstudymate.js):
   lesson text cannot be selected with mouse or touch. Search boxes, form
   fields and the interactive models stay selectable, and keyboard use,
   browser find, screen readers and links are unaffected. */
:root:is([data-usm-protect="block"],[data-usm-protect="strict"]) :is(.doc,#doc){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root:is([data-usm-protect="block"],[data-usm-protect="strict"]) :is(.doc,#doc) :is(input,textarea,select,[contenteditable],.sim,.mod,.quiz,.baleq){-webkit-user-select:text;user-select:text}
.doc img,#doc img{-webkit-user-drag:none}
.usm-toast{position:fixed;left:50%;bottom:22px;z-index:900;transform:translate(-50%,12px);opacity:0;
  max-width:min(92vw,460px);padding:10px 16px;border-radius:999px;background:var(--u-ink);color:var(--u-surface);
  font-size:13.5px;box-shadow:var(--u-shadow-lift);pointer-events:none;
  transition:opacity var(--u-t) ease,transform var(--u-t) var(--u-ease)}
.usm-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 9. motion ------------------------------------------------------- */
/* reading progress (transform only: no layout shift) */
.usm-progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:1001;pointer-events:none;
  background:var(--u-curr);transform-origin:0 50%;transform:scaleX(0)}
/* back to top */
.usm-top{position:fixed;right:18px;bottom:18px;z-index:800;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--u-rule-2);background:var(--u-surface);color:var(--u-ink);
  box-shadow:var(--u-shadow-lift);cursor:pointer;font-size:18px;line-height:1;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--u-t) ease,transform var(--u-t) var(--u-ease),border-color var(--u-t-fast) ease}
.usm-top.on{opacity:1;transform:none;pointer-events:auto}
.usm-top:hover{border-color:var(--u-accent);color:var(--u-accent)}
/* content reveal: opacity + a small translate, applied only to blocks that
   start below the fold, so nothing already on screen moves */
html.usm-anim .usm-reveal{opacity:0;transform:translateY(10px);
  transition:opacity 320ms ease,transform 380ms var(--u-ease)}
html.usm-anim .usm-reveal.usm-in{opacity:1;transform:none}
details[open]>:not(summary){animation:usm-fade var(--u-t) ease}
@keyframes usm-fade{from{opacity:0}to{opacity:1}}
/* search hit pulse (A Level) */
.hit{outline:2px solid var(--u-accent);outline-offset:4px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.usm-anim .usm-reveal{opacity:1!important;transform:none!important}
  .toccard:hover,.igcard:hover,.pager a:hover,.usm-card:hover{transform:none}
}

/* ---------- 10. small screens ------------------------------------------------ */
@media (max-width:700px){
  body{font-size:16px}
  .wrap{padding-left:14px;padding-right:14px}
  body>.wrap:has(>#doc){padding-left:0;padding-right:0}
  .doc{padding:22px 16px 26px;border-radius:10px}
  .box,.doc .box,.eo,.pset{padding:12px 14px 13px;font-size:15.5px}
  .masthead{padding-top:14px}
  .mast-eyebrow span:not(:first-of-type){display:none}
  .pager a{flex-basis:100%}
  .usm-top{right:12px;bottom:12px}
  thead th{white-space:normal}
}
@media (pointer:coarse){
  #rail a,.pgtoc a{padding-top:9px;padding-bottom:9px}
  .x-sol>summary,details.more>summary{min-height:44px}
}

/* ============================================================================
   11. URstudymate home page
   ========================================================================== */
.usm-body{margin:0}
.usm-shell{max-width:1180px;margin:0 auto;padding:0 20px}
.usm-head{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--u-bg) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--u-rule)}
.usm-head .usm-shell{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap}
.usm-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.usm-nav a{font-size:14px;font-weight:600;color:var(--u-ink-2);text-decoration:none;padding:8px 12px;border-radius:999px}
.usm-nav a:hover{background:var(--u-accent-tint);color:var(--u-ink)}
.usm-hero{padding-top:clamp(40px,7vw,84px);padding-bottom:clamp(30px,5vw,56px);position:relative;overflow:hidden}
.usm-hero::after{content:"";position:absolute;right:-120px;top:-80px;width:520px;height:520px;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%235283B7' stroke-opacity='.18' stroke-width='1.4'%3E%3Cpath d='M100 20l34.6 20v40L100 100 65.4 80V40z'/%3E%3Cpath d='M134.6 80l34.6 20v40l-34.6 20L100 140v-40'/%3E%3Cpath d='M65.4 80L30.8 100v40L65.4 160 100 140'/%3E%3Cpath d='M100 140v40'/%3E%3Ccircle cx='100' cy='20' r='4'/%3E%3Ccircle cx='169.2' cy='100' r='4'/%3E%3Ccircle cx='30.8' cy='100' r='4'/%3E%3Ccircle cx='100' cy='180' r='4'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.usm-hero>*{position:relative;z-index:1}
.usm-eyebrow{font-size:13px;font-weight:650;letter-spacing:.04em;color:var(--u-accent);margin:0 0 12px}
.usm-hero h1{font-size:clamp(34px,6vw,60px);line-height:1.04;letter-spacing:-.035em;font-weight:780;margin:0 0 18px;max-width:17ch}
.usm-hero h1 em{font-style:normal;color:var(--u-accent)}
.usm-hero p.usm-sub{font-size:clamp(17px,2vw,19.5px);line-height:1.55;color:var(--u-ink-2);max-width:60ch;margin:0 0 26px}
.usm-cta{display:flex;gap:10px;flex-wrap:wrap}
.usm-btn{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:15px;text-decoration:none;
  padding:11px 18px;border-radius:999px;border:1px solid var(--u-rule-2);background:var(--u-surface);color:var(--u-ink);
  transition:background-color var(--u-t-fast) ease,border-color var(--u-t-fast) ease,transform var(--u-t) var(--u-ease),box-shadow var(--u-t) ease}
.usm-btn:hover{border-color:var(--u-accent);color:var(--u-ink);box-shadow:var(--u-shadow)}
.usm-btn.primary{background:var(--u-accent);border-color:var(--u-accent);color:#fff}
.usm-btn.primary:hover{background:var(--u-accent-strong);color:#fff}
:root[data-theme="dark"] .usm-btn.primary,:root[data-theme="dark"] .usm-btn.primary:hover{color:#111214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .usm-btn.primary,:root:not([data-theme="light"]) .usm-btn.primary:hover{color:#111214}}
.usm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:38px 0 0;padding:0;list-style:none}
.usm-stats li{background:var(--u-surface);border:1px solid var(--u-rule);border-radius:var(--u-radius);padding:14px 16px}
.usm-stats b{display:block;font-family:var(--u-font-head);font-size:28px;font-weight:760;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.usm-stats span{font-size:13.5px;color:var(--u-ink-2)}
.usm-section{padding:clamp(34px,5vw,60px) 0;border-top:1px solid var(--u-rule)}
.usm-section>h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.025em;font-weight:760;margin:0 0 8px}
.usm-section>p.usm-lede{color:var(--u-ink-2);font-size:17px;max-width:64ch;margin:0 0 26px}
.usm-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.usm-card{--c:var(--u-accent);--c-tint:var(--u-accent-tint);display:flex;flex-direction:column;background:var(--u-surface);
  border:1px solid var(--u-rule);border-top:4px solid var(--c);border-radius:14px;padding:22px 22px 20px;box-shadow:var(--u-shadow);
  transition:box-shadow var(--u-t) ease,transform var(--u-t) var(--u-ease),border-color var(--u-t-fast) ease}
.usm-card:hover{box-shadow:var(--u-shadow-lift);transform:translateY(-3px)}
.usm-card.ib{--c:var(--u-ib);--c-tint:var(--u-ib-tint)}
.usm-card.ig{--c:var(--u-ig);--c-tint:var(--u-ig-tint)}
.usm-card.al{--c:var(--u-al);--c-tint:var(--u-al-tint)}
.usm-card .usm-chip{--u-curr:var(--c);--u-curr-tint:var(--c-tint);align-self:flex-start}
.usm-card h3{font-size:22px;letter-spacing:-.02em;margin:12px 0 6px;font-weight:740}
.usm-card h3 a{color:inherit;text-decoration:none}
.usm-card h3 a::after{content:"";position:absolute;inset:0}
.usm-card{position:relative}
.usm-card h3 a:focus-visible{outline:none!important}
.usm-card:focus-within{outline:3px solid var(--u-focus);outline-offset:3px}
.usm-card p{color:var(--u-ink-2);margin:0 0 14px;font-size:15px}
.usm-card ul.usm-facts{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.usm-card ul.usm-facts li{background:var(--c-tint);border-radius:8px;padding:8px 10px;font-size:12.5px;color:var(--u-ink-2)}
.usm-card ul.usm-facts b{display:block;font-size:18px;color:var(--u-ink);font-variant-numeric:tabular-nums}
.usm-card .usm-go{margin-top:auto;font-weight:650;color:var(--c);font-size:14.5px}
.usm-card .usm-go::after{content:" →";display:inline-block;transition:transform var(--u-t) var(--u-ease)}
.usm-card:hover .usm-go::after{transform:translateX(4px)}
.usm-benefits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;list-style:none;padding:0;margin:0}
.usm-benefits li{background:var(--u-surface);border:1px solid var(--u-rule);border-radius:var(--u-radius);padding:18px 18px 16px}
.usm-benefits .usm-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--u-accent-tint);color:var(--u-accent);margin-bottom:12px}
.usm-benefits .usm-ico svg{width:22px;height:22px}
.usm-benefits h3{font-size:17px;margin:0 0 6px;font-weight:700}
.usm-benefits p{margin:0;color:var(--u-ink-2);font-size:14.5px}
.usm-steps{counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;list-style:none;padding:0;margin:0}
.usm-steps li{counter-increment:s;padding:18px;border-radius:var(--u-radius);background:var(--u-surface-2);border:1px solid var(--u-rule)}
.usm-steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--u-ink);color:var(--u-surface);font-weight:700;font-size:14px;margin-bottom:10px}
.usm-steps h3{font-size:16.5px;margin:0 0 4px}
.usm-steps p{margin:0;color:var(--u-ink-2);font-size:14.5px}
.usm-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.usm-legend .box{margin:0}
.usm-legend .box p{margin:0;font-size:14.5px;color:var(--u-ink-2)}
.usm-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.usm-topics details{background:var(--u-surface);border:1px solid var(--u-rule);border-radius:var(--u-radius);overflow:hidden}
.usm-topics summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;display:flex;align-items:center;gap:10px}
.usm-topics summary::-webkit-details-marker{display:none}
.usm-topics summary::after{content:"\25B8";margin-left:auto;color:var(--u-ink-3);transition:transform var(--u-t) var(--u-ease)}
.usm-topics details[open] summary::after{transform:rotate(90deg)}
.usm-topics summary:hover{background:var(--u-surface-2)}
.usm-topics ol{margin:0;padding:4px 16px 14px 40px;font-size:14.5px}
.usm-topics li{margin:4px 0}
.usm-topics li a{text-decoration:none}
.usm-topics li a:hover{text-decoration:underline}
.usm-topics .c{font-family:var(--u-mono);font-size:12px;color:var(--u-ink-3);margin-right:6px}
.usm-foot{padding:30px 0 50px;border-top:1px solid var(--u-rule);color:var(--u-ink-3);font-size:13.5px}
.usm-foot .usm-shell{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:space-between}
.usm-foot a{color:var(--u-ink-2)}
@media (max-width:700px){
  .usm-nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}
  .usm-hero::after{width:320px;height:320px;right:-140px;top:-40px;opacity:.35}
  .usm-card ul.usm-facts{grid-template-columns:1fr 1fr}
}

/* A Level contents page */
.usm-toc{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.usm-toc a{display:block;height:100%;background:var(--u-surface);border:1px solid var(--u-rule);border-radius:var(--u-radius);
  padding:16px 18px;text-decoration:none;color:inherit;box-shadow:var(--u-shadow);
  transition:border-color var(--u-t-fast) ease,box-shadow var(--u-t) ease,transform var(--u-t) var(--u-ease)}
.usm-toc a:hover{border-color:var(--u-al);box-shadow:var(--u-shadow-lift);transform:translateY(-2px)}
.usm-toc .c{font-family:var(--u-mono);font-size:12px;color:var(--u-al);font-weight:600}
.usm-toc h3{font-size:17.5px;margin:4px 0 6px}
.usm-toc p{margin:0;font-size:13.5px;color:var(--u-ink-2)}
@media (prefers-reduced-motion:reduce){.usm-toc a:hover{transform:none}}
.foot .usm-copy,#doc footer .usm-copy{border-top:0;padding-top:0;margin-top:6px}
/* readable line length for callouts and question blocks on wide screens (IB R1 pages have no side contents panel) */
.doc .box,.doc .intro,.doc .x-q,.doc details.more,.doc .eq,.doc .baleq,#doc .box,#doc .eo,#doc details.more,#doc div.f{max-width:800px}
/* model controls wrap inside their panel on narrow screens */
.sim .ctl label,.doc .sim .ctl label{flex-wrap:wrap;max-width:100%;min-width:0}
.sim .ctl select,.sim .ctl input[type=text],.sim .ctl input[type=number]{min-width:0;max-width:100%}

/* ============================================================================
   12. Brand: logo lockup and blue/red accents from the URstudymate logo
   ========================================================================== */
.usm-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.usm-mark{display:block;width:auto;height:30px;flex:0 0 auto}
.usm-word{font-family:"Segoe UI","Segoe UI Variable Display",system-ui,-apple-system,Roboto,Arial,sans-serif;font-weight:700;
  letter-spacing:-.01em;color:var(--u-brand-ink);line-height:1}
.usm-word b{color:var(--u-brand-red);font-weight:700}
:root[data-theme="dark"] .usm-word{color:#ECEBEB}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .usm-word{color:#ECEBEB}}
:root[data-theme="dark"] .usm-word b{color:#FF4A4F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .usm-word b{color:#FF4A4F}}
.usm-logo{gap:2px}
.usm-logo .usm-mark{height:30px}
.usm-logo .usm-word{font-size:20px}
/* masthead (IB + IGCSE + contents pages) */
.masthead h1 a::before{content:none!important;display:none!important}
.masthead h1 a.usm-brand{display:inline-flex;align-items:center;gap:2px;text-decoration:none}
.masthead h1 .usm-mark{height:clamp(32px,4vw,40px)}
.masthead h1 .usm-word{font-size:clamp(25px,3.3vw,32px)}
.masthead h1 a.usm-brand:hover .usm-word{color:var(--u-accent-strong)}
.masthead h1 a.usm-brand:hover .usm-word b{color:var(--u-brand-red)}
/* logo stripes: blue | red, as in the U of the logo */
.masthead::before{width:96px;background:linear-gradient(90deg,var(--u-brand-blue) 0 50%,var(--u-brand-red) 50% 100%)}
#top::before{background:linear-gradient(90deg,var(--u-brand-blue) 0 50%,var(--u-brand-red) 50% 100%)}
.usm-progress{background:linear-gradient(90deg,var(--u-brand-blue),var(--u-brand-red))}
.usm-head::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--u-brand-blue) 0 50%,var(--u-brand-red) 50% 100%)}
.usm-head .usm-shell{padding-top:3px}
.usm-hero h1 em{color:var(--u-red)}
.usm-eyebrow{color:var(--u-red)}
.usm-hero-logo{display:block;width:min(420px,78vw);height:auto;margin:0 0 22px}
.usm-steps li::before{background:linear-gradient(135deg,var(--u-brand-blue) 0 50%,var(--u-brand-red) 50% 100%);color:#fff}
.usm-card.al,.usm-card.as{--c:var(--u-al);--c-tint:var(--u-al-tint)}
.usm-card .usm-sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.usm-card .usm-sub a{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:14px;
  padding:8px 13px;border-radius:999px;text-decoration:none;border:1px solid var(--u-rule-2);color:var(--u-ink);background:var(--u-surface);
  transition:background-color var(--u-t-fast) ease,border-color var(--u-t-fast) ease,transform var(--u-t) var(--u-ease)}
.usm-card .usm-sub a::after{content:"\2192";transition:transform var(--u-t) var(--u-ease)}
.usm-card .usm-sub a:hover{border-color:var(--u-accent);background:var(--u-accent-tint)}
.usm-card .usm-sub a:hover::after{transform:translateX(3px)}
.usm-card.multi h3 a::after{content:none}
.usm-nav a{position:relative}
.usm-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--u-brand-blue),var(--u-brand-red));transform:scaleX(0);transform-origin:left;
  transition:transform var(--u-t) var(--u-ease)}
.usm-nav a:hover::after,.usm-nav a:focus-visible::after{transform:scaleX(1)}
@media (max-width:640px){#top .usm-logo .usm-word{display:none}}

/* ============================================================================
   13. Toggles and subsections: smooth open/close
   Height is animated by urstudymate.js (Web Animations) for every <details>;
   these rules add the marker rotation, the content fade and the theme fade.
   ========================================================================== */
details>summary{transition:background-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
details.usm-anim-d{overflow:hidden}
details[open]>:not(summary){animation:usm-slide 260ms var(--u-ease)}
@keyframes usm-slide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.pgtoc>summary::after{display:inline-block;transition:transform var(--u-t) var(--u-ease)}
.pgtoc[open]>summary::after{content:" \25BE";transform:rotate(180deg)}
.box.qc details.qa>summary::before{content:"\25B8 ";display:inline-block;transition:transform var(--u-t) var(--u-ease)}
.box.qc details.qa[open]>summary::before{transform:rotate(90deg)}
/* theme switch: brief colour cross-fade instead of a hard flash */
html.usm-theme-fade,html.usm-theme-fade *,html.usm-theme-fade *::before,html.usm-theme-fade *::after{
  transition:background-color 320ms ease,color 320ms ease,border-color 320ms ease,fill 320ms ease,stroke 320ms ease!important}
.themebtn,#theme{transition:transform var(--u-t) var(--u-ease),background-color var(--u-t-fast) ease,border-color var(--u-t-fast) ease}
.themebtn:active,#theme:active{transform:scale(.94)}
/* A Level/AS contents drawer items slide in */
@media (max-width:1000px){
  #rail.open a,#rail.open h4{animation:usm-in-left 320ms var(--u-ease) both}
  #rail.open a:nth-of-type(n+2){animation-delay:20ms}
  #rail.open a:nth-of-type(n+6){animation-delay:40ms}
  #rail.open a:nth-of-type(n+12){animation-delay:60ms}
}
@keyframes usm-in-left{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* search results drop in */
.results:not([hidden]){animation:usm-drop 200ms var(--u-ease)}
@keyframes usm-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  html.usm-theme-fade,html.usm-theme-fade *{transition:none!important}
  details[open]>:not(summary),#rail.open a,#rail.open h4,.results:not([hidden]){animation:none!important}
}

/* ============================================================================
   14. IB MYP Chemistry pages (html[data-curriculum="myp"])
   The MYP pages use their own class vocabulary (myp.css). This layer maps it
   onto the URstudymate tokens so layout, colour, callouts and dark mode match
   the other courses. Criterion A–D colours stay distinct: they carry meaning.
   ========================================================================== */
:root[data-curriculum="myp"]{--u-curr:var(--u-ib);--u-curr-tint:var(--u-ib-tint);
  --u-cA:#2D5FA8;--u-cA-bg:#E5EDF9;--u-cB:#1D7A52;--u-cB-bg:#E2F3EA;--u-cC:#8F530A;--u-cC-bg:#FBEFDC;--u-cD:#8A2F5E;--u-cD-bg:#F7E6EF}
:root[data-theme="dark"][data-curriculum="myp"]{--u-cA:#8DB4EC;--u-cA-bg:#16263D;--u-cB:#6FCB9E;--u-cB-bg:#12291E;--u-cC:#E6AE63;--u-cC-bg:#2E2212;--u-cD:#E59BC3;--u-cD-bg:#321A27}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-curriculum="myp"]{--u-cA:#8DB4EC;--u-cA-bg:#16263D;--u-cB:#6FCB9E;--u-cB-bg:#12291E;--u-cC:#E6AE63;--u-cC-bg:#2E2212;--u-cD:#E59BC3;--u-cD-bg:#321A27}}
:root:root:root[data-curriculum="myp"]{
  --ivory:var(--u-bg); --paper:var(--u-surface); --ink:var(--u-ink); --line:var(--u-rule); --muted:var(--u-ink-3);
  --indigo:var(--u-ink); --teal:var(--u-accent); --teal-bg:var(--u-accent-tint); --lavender:var(--u-note-bg); --purple:var(--u-ms);
  --cA:var(--u-cA); --cA-bg:var(--u-cA-bg); --cB:var(--u-cB); --cB-bg:var(--u-cB-bg);
  --cC:var(--u-cC); --cC-bg:var(--u-cC-bg); --cD:var(--u-cD); --cD-bg:var(--u-cD-bg)}
:root[data-curriculum="myp"] body{font-size:16.5px;line-height:1.65;background:var(--u-bg)}
:root[data-curriculum="myp"] a{color:var(--u-link)}

/* header: same brand bar as the other courses */
:root[data-curriculum="myp"] .masthead{position:sticky;top:0;z-index:60;align-items:center;padding:10px max(20px,4%);gap:10px 16px;
  font-size:13px;letter-spacing:.01em;color:var(--u-ink-3);border-bottom:1px solid var(--u-rule);
  background:color-mix(in srgb,var(--u-surface) 90%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(10px);backdrop-filter:saturate(1.3) blur(10px);
  transition:box-shadow var(--u-t) ease}
:root[data-curriculum="myp"] .masthead::before{left:0;right:0;width:auto;height:3px;border-radius:0}
:root[data-curriculum="myp"] .masthead .brand{margin-right:auto}
:root[data-curriculum="myp"] .masthead .usm-course{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:12px;padding:4px 10px;
  border-radius:999px;background:var(--u-curr-tint);color:var(--u-curr);border:1px solid color-mix(in srgb,var(--u-curr) 30%,transparent)}
:root[data-curriculum="myp"] .masthead .usm-course::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
html.usm-scrolled[data-curriculum="myp"] .masthead{box-shadow:0 8px 20px -16px rgba(0,0,0,.45)}
:root[data-curriculum="myp"] .skip{background:var(--u-ink);color:var(--u-surface);border-radius:var(--u-radius-sm);font-weight:600}
@media (max-width:640px){
  :root[data-curriculum="myp"] .masthead .usm-course{order:5}
  :root[data-curriculum="myp"] .masthead .usm-word{display:none}
  :root[data-curriculum="myp"] .masthead .usm-homelink .t{display:none}
}

/* page frame and side contents (styled like the IB/IGCSE contents panel) */
:root[data-curriculum="myp"] .page-shell{max-width:var(--u-page);gap:clamp(20px,4vw,48px);padding:30px clamp(16px,3vw,36px) 80px}
:root[data-curriculum="myp"] .sidebar{top:calc(var(--usm-top,64px) + 12px);max-height:calc(100vh - var(--usm-top,64px) - 24px);
  background:var(--u-surface);border:1px solid var(--u-rule);border-radius:var(--u-radius);padding:12px 8px;box-shadow:var(--u-shadow);scrollbar-width:thin}
:root[data-curriculum="myp"] .sidebar .unit-eyebrow{margin:4px 8px 10px}
:root[data-curriculum="myp"] .sidebar nav a{border-left:0;border-radius:6px;min-height:36px;color:var(--u-ink-2);padding:6px 10px;
  transition:background-color var(--u-t-fast) ease,color var(--u-t-fast) ease}
:root[data-curriculum="myp"] .sidebar nav a span:first-child{font-family:var(--u-mono);font-size:11.5px;color:var(--u-ink-3);min-width:1.8em}
:root[data-curriculum="myp"] .sidebar nav a:hover{background:var(--u-accent-tint);color:var(--u-ink)}
:root[data-curriculum="myp"] .sidebar nav a[aria-current=true]{background:var(--u-accent);color:#fff}
:root[data-curriculum="myp"] .sidebar nav a[aria-current=true] span:first-child{color:inherit}
:root[data-theme="dark"][data-curriculum="myp"] .sidebar nav a[aria-current=true]{color:#111214}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-curriculum="myp"] .sidebar nav a[aria-current=true]{color:#111214}}
:root[data-curriculum="myp"] .sidebar .navpart{letter-spacing:.04em;text-transform:none;font-size:11.5px;color:var(--u-ink-3)}
@media (max-width:980px){:root[data-curriculum="myp"] .sidebar{position:static;max-height:none;box-shadow:none}}

/* chapter header and headings */
:root[data-curriculum="myp"] .unit-header{border-bottom:1px solid var(--u-rule);padding-bottom:22px}
:root[data-curriculum="myp"] main .unit-eyebrow{display:inline-flex;align-items:center;gap:7px;letter-spacing:.02em;text-transform:none;font-size:12px;
  font-weight:650;color:var(--u-curr);background:var(--u-curr-tint);border:1px solid color-mix(in srgb,var(--u-curr) 30%,transparent);border-radius:999px;padding:4px 11px}
:root[data-curriculum="myp"] main .unit-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
:root[data-curriculum="myp"] .sidebar .unit-eyebrow{letter-spacing:.04em;text-transform:none;font-size:12px;color:var(--u-ink-3)}
:root[data-curriculum="myp"] .unit-title{font-family:var(--u-font-head);font-size:clamp(28px,4vw,38px);letter-spacing:-.025em;line-height:1.12;color:var(--u-ink);font-weight:750;margin:.4em 0 .45em}
:root[data-curriculum="myp"] .lede{font-size:17.5px;line-height:1.6;color:var(--u-ink-2);max-width:var(--u-measure)}
:root[data-curriculum="myp"] .chapter-meta span{background:var(--u-surface);border:1px solid var(--u-rule);border-radius:999px;padding:3px 10px}
:root[data-curriculum="myp"] .section-kicker{letter-spacing:.06em;font-size:12px;color:var(--u-red);text-transform:none;font-weight:700;margin-bottom:6px}
:root[data-curriculum="myp"] section{border-bottom:0;padding-top:10px}
:root[data-curriculum="myp"] h2.sec{font-family:var(--u-font-head);color:var(--u-ink);font-size:clamp(21px,2.4vw,25px);font-weight:720;letter-spacing:-.018em;
  border-top:1px solid var(--u-rule);padding-top:.8em;margin:1.2em 0 .6em;scroll-margin-top:calc(var(--usm-top,64px) + 18px)}
:root[data-curriculum="myp"] h2.sec .oc{display:inline-block;margin:0 0 0 10px;vertical-align:4px;font-family:var(--u-mono);font-size:11px;font-weight:600;
  border-radius:999px;padding:2px 9px;background:var(--u-accent-tint);color:var(--u-accent-strong);border:1px solid color-mix(in srgb,var(--u-accent) 30%,transparent)}
:root[data-curriculum="myp"] h3{font-family:var(--u-font-head);color:var(--u-ink);font-size:clamp(17.5px,1.9vw,19.5px)}
:root[data-curriculum="myp"] main p,:root[data-curriculum="myp"] main li{max-width:var(--u-measure)}
:root[data-curriculum="myp"] main .box p,:root[data-curriculum="myp"] main .box li,:root[data-curriculum="myp"] main td p{max-width:none}
:root[data-curriculum="myp"] main [id]{scroll-margin-top:calc(var(--usm-top,64px) + 18px)}

/* criteria badges A–D */
:root[data-curriculum="myp"] .crit{border-radius:999px;padding:1px 8px;font-size:11px}

/* callouts: MYP titles are the first <strong> in the box */
:root[data-curriculum="myp"] .box.lens,:root[data-curriculum="myp"] .scope-note{--k:var(--u-obj);--k-bg:var(--u-obj-bg);--k-icon:"\25CE"}
:root[data-curriculum="myp"] .box.lens{background:var(--k-bg);border-color:color-mix(in srgb,var(--k) 22%,var(--u-rule));border-left:4px solid var(--k)}
:root[data-curriculum="myp"] .box>strong:first-child,:root[data-curriculum="myp"] .scope-note>strong:first-child{display:flex;align-items:baseline;gap:8px;
  font-size:13px;font-weight:700;color:var(--k);margin:0 0 .45em;line-height:1.35}
:root[data-curriculum="myp"] .box>strong:first-child::before,:root[data-curriculum="myp"] .scope-note>strong:first-child::before{
  content:var(--k-icon);content:var(--k-icon) / "";flex:0 0 auto;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--k);color:var(--u-surface);font-size:11px;font-weight:700;line-height:1;transform:translateY(3px)}
:root[data-curriculum="myp"] .scope-note{position:relative;border:1px solid color-mix(in srgb,var(--k) 22%,var(--u-rule));border-left:4px solid var(--k);
  background:var(--k-bg);border-radius:var(--u-radius);padding:14px 18px;font-size:15.5px}

/* panels with fixed light colours in myp.css: re-tone for both themes */
:root[data-curriculum="myp"] .model{background:var(--u-accent-tint);border:1px solid color-mix(in srgb,var(--u-accent) 30%,var(--u-rule));
  border-top:3px solid var(--u-accent);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .model>h4{color:var(--u-accent-strong);font-family:var(--u-font-head)}
:root[data-curriculum="myp"] .model .out,:root[data-curriculum="myp"] .mcq-q,:root[data-curriculum="myp"] .ko>div,
:root[data-curriculum="myp"] .pill,:root[data-curriculum="myp"] .pp{background:var(--u-surface);color:var(--u-ink)}
:root[data-curriculum="myp"] .model svg,:root[data-curriculum="myp"] .model canvas,:root[data-curriculum="myp"] figure svg{background:#fff;border-radius:var(--u-radius-sm)}
:root[data-curriculum="myp"] figure{background:var(--u-surface);border-color:var(--u-rule);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .pp{border:1px solid var(--u-rule);border-left:4px solid var(--u-check);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .pp .pphead{letter-spacing:.02em;text-transform:none;font-size:12.5px;color:var(--u-ink-3)}
:root[data-curriculum="myp"] .pp .pphead .tag{background:var(--u-ms-bg);color:var(--u-ms);border-radius:999px}
:root[data-curriculum="myp"] .pp .part b.pl{color:var(--u-accent-strong)}
:root[data-curriculum="myp"] .pp .ctx{background:var(--u-surface-2);border-left-color:var(--u-rule-2)}
:root[data-curriculum="myp"] .eo{background:var(--u-tip-bg);border:1px solid color-mix(in srgb,var(--u-tip) 30%,var(--u-rule));border-left:4px solid var(--u-tip);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .eo h3{color:var(--u-tip)}
:root[data-curriculum="myp"] .ko>div{border-color:var(--u-rule);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .ko>div h4{color:var(--u-ink)}
:root[data-curriculum="myp"] .critcard>div{border-radius:var(--u-radius)}
:root[data-curriculum="myp"] thead th{background:var(--u-th-bg);color:var(--u-ink)}
:root[data-curriculum="myp"] th,:root[data-curriculum="myp"] td{border-color:var(--u-rule)}
:root[data-curriculum="myp"] table{background:var(--u-surface)}
:root[data-curriculum="myp"] .tw{border:1px solid var(--u-rule);border-radius:var(--u-radius)}
:root[data-curriculum="myp"] .tw table{margin:0}
:root[data-curriculum="myp"] .chem{font-family:var(--u-font);font-size:16px;line-height:1.7;background:var(--u-eq-bg);border:1px solid var(--u-eq-bd);
  border-left:3px solid var(--u-accent);border-radius:var(--u-radius-sm)}
:root[data-curriculum="myp"] details summary{color:var(--u-accent);list-style:none;gap:8px;border-radius:6px;padding:0 8px}
:root[data-curriculum="myp"] details summary::-webkit-details-marker{display:none}
:root[data-curriculum="myp"] details summary::before{content:"\25B8";display:inline-block;transition:transform var(--u-t) var(--u-ease)}
:root[data-curriculum="myp"] details[open]>summary::before{transform:rotate(90deg)}
:root[data-curriculum="myp"] details summary:hover{background:var(--u-accent-tint)}
:root[data-curriculum="myp"] details .sol{background:var(--u-work-bg);border-left-color:var(--u-work);border-radius:var(--u-radius-sm)}
:root[data-curriculum="myp"] .mk{background:var(--u-work);color:var(--u-surface)}
:root[data-curriculum="myp"] .ok{color:var(--u-good)}
:root[data-curriculum="myp"] .bad{color:var(--u-bad)}
:root[data-curriculum="myp"] .unoff{color:var(--u-tip)}
:root[data-curriculum="myp"] .ptable button span{color:var(--u-ink-3)}
:root[data-curriculum="myp"] main button{border-color:var(--u-accent);color:var(--u-accent-strong);background:var(--u-surface);border-radius:8px;
  transition:background-color var(--u-t-fast) ease,color var(--u-t-fast) ease,border-color var(--u-t-fast) ease}
:root[data-curriculum="myp"] main .ptable button{color:var(--u-ink);border-color:var(--u-rule-2)}
:root[data-curriculum="myp"] main button:hover{background:var(--u-accent-tint)}
:root[data-curriculum="myp"] main button[aria-pressed=true]{background:var(--u-accent);color:#fff}
:root[data-curriculum="myp"] input[type=number],:root[data-curriculum="myp"] input[type=text],:root[data-curriculum="myp"] select{background:var(--u-surface);color:var(--u-ink);border-color:var(--u-rule-2)}
:root[data-curriculum="myp"] .foot{color:var(--u-ink-3);font-size:13.5px;border-top:1px solid var(--u-rule);margin-top:30px;padding:18px 0 0}
:root[data-curriculum="myp"] main>.usm-copy{margin-bottom:40px;border-top:0}
/* readable width for callouts and models, as on the other courses */
:root[data-curriculum="myp"] main :is(.box,.scope-note,.model,.pp,.eo,.chem){max-width:800px}
/* copy restriction covers the MYP lesson area too */
:root[data-curriculum="myp"]:is([data-usm-protect="block"],[data-usm-protect="strict"]) main{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:root[data-curriculum="myp"]:is([data-usm-protect="block"],[data-usm-protect="strict"]) main :is(input,textarea,select,.model){-webkit-user-select:text;user-select:text}

/* MYP contents page uses the contents-page masthead, not the lesson bar */
:root[data-curriculum="myp"] .masthead.usm-contents{position:relative;display:block;padding:18px 0 14px;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;font-size:inherit;letter-spacing:normal;color:inherit;box-shadow:none}
:root[data-curriculum="myp"] .masthead.usm-contents::before{right:auto;width:96px}
/* home page: five courses, four cards */
.usm-courses{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.usm-card.my{--c:var(--u-ib);--c-tint:var(--u-ib-tint)}
.usm-card.my .usm-chip{--u-curr:var(--c);--u-curr-tint:var(--c-tint)}

/* ============================================================================
   15. NOIR — premium dark theme across the whole site
   Dark by default (light stays available through the theme buttons).
   Pitch-black canvas, serif display headlines, uppercase tracked labels,
   thin outlined buttons, hairline borders, restrained blue/red brand accents.
   ========================================================================== */
:root{
  --u-font-display:"Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style","URW Palladio L",Georgia,serif;
  --u-track:.16em;
}
:root:not([data-theme="light"]){
  --u-bg:#000000; --u-surface:#0C0C0D; --u-surface-2:#121214; --u-sunk:#070708;
  --u-ink:#F4F4F4; --u-ink-2:#C2C2C4; --u-ink-3:#8C8C90;
  --u-rule:#1E1E21; --u-rule-2:#2E2E33;
  --u-accent:#8DB4E2; --u-accent-strong:#B5CFEE; --u-accent-tint:#101A26;
  --u-red:#FF5A5F; --u-red-tint:#2A1112;
  --u-link:#A9C7EC; --u-focus:#9CC2F2;
  --u-structure:#8DB4E2; --u-structure-tint:#101A26;
  --u-reactivity:#FF7A7E; --u-reactivity-tint:#2A1112;
  --u-ib:#8DB4E2; --u-ib-tint:#101A26;
  --u-ig:#FF7A7E; --u-ig-tint:#2A1112;
  --u-al:#D9D9DB; --u-al-tint:#1A1A1C;
  --u-obj:#A3AEF2;   --u-obj-bg:#12152B;
  --u-def:#7DB9E6;   --u-def-bg:#0E1C2B;
  --u-work:#72CB97;  --u-work-bg:#0C1F15;
  --u-prac:#E3A565;  --u-prac-bg:#23180D;
  --u-tip:#DDB752;   --u-tip-bg:#201B0B;
  --u-ms:#B9A0EC;    --u-ms-bg:#1B1530;
  --u-trap:#F08C82;  --u-trap-bg:#281413;
  --u-check:#B6C0CA; --u-check-bg:#141719;
  --u-think:#66C5D3; --u-think-bg:#0B2025;
  --u-note:#B0B6BD;  --u-note-bg:#141517;
  --u-sl:#7DB9E6; --u-sl-bg:#0E1C2B;
  --u-hl:#C4A2E4; --u-hl-bg:#1C1428;
  --u-eq-bg:#0A0A0B; --u-eq-bd:#34343A; --u-th-bg:#141416;
  --u-grid:#1C1C20; --u-axis:#4A4A52;
  --u-good:#62C79C; --u-good-tint:#0C2117;
  --u-bad:#FF8A82;  --u-bad-tint:#281413;
  --u-warn:#DDB752; --u-warn-tint:#201B0B;
  --u-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -24px rgba(0,0,0,.9);
  --u-shadow-lift:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -28px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.06);
  color-scheme:dark;
}
:root:not([data-theme="light"])[data-curriculum="myp"]{--u-cA:#8DB4EC;--u-cA-bg:#121F33;--u-cB:#6FCB9E;--u-cB-bg:#0E2219;--u-cC:#E6AE63;--u-cC-bg:#261C0E;--u-cD:#E59BC3;--u-cD-bg:#2A1520}
/* dark-mode details that were tied to the OS setting now follow the default */
:root:not([data-theme="light"]) .usm-word{color:#F4F4F4}
:root:not([data-theme="light"]) .usm-word b{color:#FF4A4F}
:root:not([data-theme="light"]) :is(.subnav a[aria-current="page"],.pgtoc a.on,#rail a.on,.usm-btn.primary,.usm-btn.primary:hover){color:#000}
:root:not([data-theme="light"])[data-curriculum="myp"] .sidebar nav a[aria-current=true]{color:#000}

/* ---- display typography ------------------------------------------------- */
h1,h2,.unit-title,.topicbar h3,.usm-toc h3,.usm-card h3{font-family:var(--u-font-display);font-weight:600;letter-spacing:-.01em}
#doc h1,.doc h1,.unit-title{font-size:clamp(34px,5vw,54px);line-height:1.04;letter-spacing:-.02em}
#doc h2,.doc h2,:root[data-curriculum="myp"] h2.sec{font-size:clamp(24px,2.8vw,31px);font-weight:600;letter-spacing:-.01em}
.masthead h1 .usm-word,.usm-logo .usm-word{font-family:"Segoe UI",system-ui,sans-serif}
/* tracked uppercase labels */
.mast-eyebrow b,#doc>.eyebrow,main .unit-eyebrow,.usm-chip,.doc .partlabel,.section-kicker,.pager .d,.topicbar .hrs,
.legend-bar .lg,.rail a .k,.usm-toc .c{letter-spacing:var(--u-track);text-transform:uppercase;font-size:10.5px;font-weight:650}
.doc .partlabel,.section-kicker{color:var(--u-ink-3)}

/* ---- surfaces: hairlines instead of shadows ------------------------------ */
:root:not([data-theme="light"]) :is(.doc,.pgtoc,.pager a,.toccard,.igcard,.usm-toc a,.tw,.doc .tablewrap,.usm-tablewrap,.sim,.doc .sim,.quiz,.flash,.doc .flash,.mod,
  .pset,.doc .x-q,details.more,.sidebar,.srch,.results){
  box-shadow:none;border-color:var(--u-rule-2)}
:root:not([data-theme="light"]) .doc{background:linear-gradient(180deg,#0B0B0C,#070708 70%);border-color:var(--u-rule)}
:root:not([data-theme="light"]) .topbar,:root:not([data-theme="light"]) #top,:root:not([data-theme="light"])[data-curriculum="myp"] .masthead{
  background:color-mix(in srgb,#000 82%,transparent)}
:root:not([data-theme="light"]) #rail{background:#050506}
:root:not([data-theme="light"]) :is(.fig-body,.doc figure svg,.x-qimg,img.qimg){background:#fff}

/* ---- buttons and pills: thin outlined, tracked uppercase ------------------ */
.usm-btn,.usm-homelink,.themebtn,.tbtn,.usm-card .usm-sub a{border-radius:2px;text-transform:uppercase;letter-spacing:var(--u-track);font-size:11px;font-weight:650}
#menu.tbtn,#theme.tbtn{letter-spacing:0;font-size:14px}
:root:not([data-theme="light"]) :is(.usm-btn,.usm-homelink,.themebtn,.tbtn,.usm-card .usm-sub a){background:transparent;border-color:rgba(255,255,255,.28);color:#F4F4F4}
:root:not([data-theme="light"]) :is(.usm-btn,.usm-homelink,.themebtn,.tbtn,.usm-card .usm-sub a):hover{background:#F4F4F4;color:#000;border-color:#F4F4F4}
:root:not([data-theme="light"]) .usm-btn.primary{background:#F4F4F4;border-color:#F4F4F4;color:#000}
:root:not([data-theme="light"]) .usm-btn.primary:hover{background:transparent;color:#F4F4F4}
.subnav a,.subnav button{border-radius:2px}
:root:not([data-theme="light"]) .subnav a[aria-current="page"],:root:not([data-theme="light"]) .pgtoc a.on,:root:not([data-theme="light"]) #rail a.on{background:#F4F4F4;border-color:#F4F4F4}
:root:not([data-theme="light"])[data-curriculum="myp"] .sidebar nav a[aria-current=true]{background:#F4F4F4}
.rail a[aria-current="page"]{background:transparent}
:root:not([data-theme="light"]) .rail a.fam-s[aria-current="page"],:root:not([data-theme="light"])[data-curriculum="igcse"] .rail a[aria-current="page"]{border-bottom-color:#F4F4F4}

/* ---- callouts on black: tinted hairline cards ----------------------------- */
:root:not([data-theme="light"]) :is(.box,.doc .box,.eo,.pset){background:linear-gradient(180deg,var(--k-bg),color-mix(in srgb,var(--k-bg) 55%,#000));
  border-color:color-mix(in srgb,var(--k) 26%,#1E1E21)}

/* ---- motion: slower, cinematic reveal ------------------------------------ */
html.usm-anim .usm-reveal{transform:translateY(22px);transition:opacity 700ms ease,transform 900ms cubic-bezier(.16,1,.3,1)}

/* ============================================================================
   16. NOIR home page (index.html)
   ========================================================================== */
.nx{background:#000;color:#F4F4F4;margin:0;overflow-x:hidden}
:root[data-theme="light"] .nx{background:#000;color:#F4F4F4}
.nx a{color:inherit}
.nx-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.nx-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:650;color:#8C8C90;margin:0 0 18px}
.nx-serif{font-family:var(--u-font-display);font-weight:600;letter-spacing:-.015em}

/* nav bar */
.nx-nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background-color .4s ease,border-color .4s ease,transform .4s ease;border-bottom:1px solid transparent}
.nx-nav .nx-wrap{display:flex;align-items:center;gap:18px;min-height:72px}
html.usm-scrolled .nx-nav{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:#1E1E21}
.nx-brand{display:inline-flex;align-items:center;gap:2px;text-decoration:none}
.nx-brand .usm-mark{height:32px}
.nx-brand .usm-word{font-size:21px;color:#F4F4F4}
.nx-brand .usm-word b{color:#FF4A4F}
.nx-links{display:flex;gap:4px;margin-left:auto}
.nx-links a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:650;text-decoration:none;color:#C2C2C4;padding:10px 12px;position:relative;transition:color .25s ease}
.nx-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:#F4F4F4;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nx-links a:hover{color:#fff}
.nx-links a:hover::after{transform:scaleX(1)}
.nx-cta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:650;text-decoration:none;border:1px solid rgba(255,255,255,.35);padding:12px 18px;
  display:inline-flex;align-items:center;gap:10px;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.nx-cta:hover{background:#F4F4F4;color:#000!important;border-color:#F4F4F4}
.nx-cta .ar{display:inline-block;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nx-cta:hover .ar{transform:translateX(4px)}
@media (max-width:900px){.nx-links{display:none}.nx-nav .nx-cta{margin-left:auto}}

/* hero: a corridor of pillars drawn in CSS */
.nx-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;isolation:isolate}
.nx-corridor{position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:repeating-linear-gradient(90deg,#050506 0 64px,#101013 64px 66px,#08080a 66px 150px,#151518 150px 151px);
  -webkit-mask-image:radial-gradient(70% 90% at 50% 40%,transparent 18%,#000 62%);mask-image:radial-gradient(70% 90% at 50% 40%,transparent 18%,#000 62%)}
.nx-corridor::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.05) 50%,transparent 65%);
  transform:translateX(-60%);animation:nx-sweep 9s ease-in-out infinite}
@keyframes nx-sweep{0%,15%{transform:translateX(-60%)}60%,100%{transform:translateX(60%)}}
.nx-floor{position:absolute;left:0;right:0;bottom:0;height:38%;z-index:-1;
  background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(255,255,255,.035) 118px 120px),linear-gradient(180deg,transparent,rgba(12,12,14,.9));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);mask-image:linear-gradient(180deg,transparent,#000)}
.nx-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(60% 50% at 50% 45%,rgba(82,131,183,.22),transparent 70%),
             radial-gradient(40% 30% at 50% 60%,rgba(236,32,36,.10),transparent 70%),
             linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.2) 40%,#000 96%)}
.nx-hero-inner{padding:120px 20px 90px;max-width:980px}
.nx-hero h1{font-family:var(--u-font-display);font-weight:600;font-size:clamp(46px,9vw,112px);line-height:.98;letter-spacing:-.03em;margin:0 0 26px;
  animation:nx-rise 1.4s cubic-bezier(.16,1,.3,1) both}
.nx-hero h1 em{font-style:italic;color:#fff}
.nx-hero p.nx-sub{max-width:560px;margin:0 auto 34px;color:#C2C2C4;font-size:17px;line-height:1.6;animation:nx-rise 1.4s .15s cubic-bezier(.16,1,.3,1) both}
.nx-hero .nx-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:nx-rise 1.4s .3s cubic-bezier(.16,1,.3,1) both}
.nx-hero .nx-label{animation:nx-rise 1.2s cubic-bezier(.16,1,.3,1) both}
.nx-cta.solid{background:#F4F4F4;color:#000!important;border-color:#F4F4F4}
.nx-cta.solid:hover{background:transparent;color:#F4F4F4!important}
@keyframes nx-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.nx-scrollcue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8C8C90;
  display:flex;flex-direction:column;align-items:center;gap:10px}
.nx-scrollcue::after{content:"";width:1px;height:46px;background:linear-gradient(#8C8C90,transparent);animation:nx-cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes nx-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* manifesto: words light up as you scroll */
.nx-manifesto{padding:clamp(80px,14vw,180px) 0}
.nx-manifesto p[data-nx-reveal]{font-family:var(--u-font-display);font-weight:600;font-size:clamp(34px,5.6vw,72px);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:19ch}
.nx-manifesto .w{color:#2A2A2E;transition:color .45s ease}
.nx-manifesto .w.on{color:#F4F4F4}
.nx-manifesto .w.hl.on{color:#FF5A5F}

/* stats strip */
.nx-stats{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #1E1E21;border-bottom:1px solid #1E1E21;margin:0;padding:0;list-style:none}
.nx-stats li{padding:34px 22px;border-right:1px solid #1E1E21}
.nx-stats li:last-child{border-right:0}
.nx-stats b{display:block;font-family:var(--u-font-display);font-weight:600;font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
.nx-stats span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8C8C90}
@media (max-width:900px){.nx-stats{grid-template-columns:repeat(2,1fr)}.nx-stats li{border-bottom:1px solid #1E1E21}.nx-stats li:nth-child(2n){border-right:0}}

/* sections */
.nx-section{padding:clamp(80px,11vw,150px) 0;border-top:1px solid #111113}
.nx-section h2{font-family:var(--u-font-display);font-weight:600;font-size:clamp(38px,6vw,78px);line-height:1;letter-spacing:-.025em;margin:0 0 22px;max-width:14ch}
.nx-section .nx-lede{color:#C2C2C4;font-size:17px;line-height:1.6;max-width:56ch;margin:0 0 56px}

/* course cards */
.nx-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;padding:1px 0 0 1px}
.nx-courses>.nx-course{border:1px solid #1E1E21;margin:-1px 0 0 -1px}
.nx-course{position:relative;background:#000;padding:34px 28px 30px;display:flex;flex-direction:column;min-height:380px;overflow:hidden;
  transition:background-color .5s ease}
.nx-course::before{content:"";position:absolute;inset:auto -30% -40% -30%;height:70%;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(50% 50% at 50% 50%,var(--glow,rgba(82,131,183,.35)),transparent 70%);pointer-events:none}
.nx-course:hover{background:#08080A}
.nx-course:hover::before{opacity:1}
.nx-course.ig{--glow:rgba(236,32,36,.28)}
.nx-course.al{--glow:rgba(255,255,255,.12)}
.nx-course .nx-label{margin-bottom:28px}
.nx-course .nx-no{font-family:var(--u-font-display);font-size:14px;color:#8C8C90}
.nx-course h3{font-family:var(--u-font-display);font-weight:600;font-size:clamp(28px,3vw,38px);line-height:1.02;letter-spacing:-.02em;margin:18px 0 14px}
.nx-course .nx-go,.nx-course .nx-sub{margin-top:auto}
.nx-course .nx-label{min-height:2.9em}
.nx .usm-top{display:none}
.nx-course h3 a{text-decoration:none}
.nx-course h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.nx-course.multi h3 a::after{content:none}
.nx-course p{color:#A9A9AD;font-size:14.5px;line-height:1.6;margin:0 0 22px}
.nx-course .nx-facts{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 26px;padding:0;list-style:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8C8C90}
.nx-course .nx-facts b{display:block;font-family:var(--u-font-display);font-size:26px;letter-spacing:-.01em;color:#F4F4F4;text-transform:none;font-weight:600}
.nx-course .nx-go{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:650;display:inline-flex;gap:10px;align-items:center}
.nx-course .nx-go .ar{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.nx-course:hover .nx-go .ar{transform:translateX(6px)}
.nx-course .nx-sub{display:flex;flex-direction:column;gap:8px;position:relative;z-index:2}
.nx-course .nx-sub a{justify-content:space-between}
.nx-course:focus-within{outline:2px solid #9CC2F2;outline-offset:-2px}
.nx-course h3 a:focus-visible{outline:none!important}

/* feature grid */
.nx-features{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #1E1E21;border-left:1px solid #1E1E21;margin:0;padding:0;list-style:none}
.nx-features li{padding:36px 30px 40px;border-right:1px solid #1E1E21;border-bottom:1px solid #1E1E21;transition:background-color .5s ease}
.nx-features li:hover{background:#08080A}
.nx-features .n{font-family:var(--u-font-display);color:#8C8C90;font-size:14px}
.nx-features h3{font-family:var(--u-font-display);font-weight:600;font-size:24px;letter-spacing:-.01em;margin:30px 0 10px}
.nx-features p{color:#A9A9AD;font-size:14.5px;line-height:1.6;margin:0}
@media (max-width:900px){.nx-features{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.nx-features{grid-template-columns:1fr}}

/* steps */
.nx-steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;list-style:none;border-top:1px solid #1E1E21}
.nx-steps li{counter-increment:s;padding:34px 26px 0 0}
.nx-steps li::before{content:"0" counter(s);display:block;font-family:var(--u-font-display);font-size:56px;line-height:1;color:#2A2A2E;margin-bottom:22px;transition:color .6s ease}
.nx-steps li.usm-in::before,.nx-steps li:hover::before{color:#F4F4F4}
.nx-steps h3{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;font-weight:650}
.nx-steps p{color:#A9A9AD;font-size:14.5px;line-height:1.6;margin:0}
@media (max-width:900px){.nx-steps{grid-template-columns:1fr 1fr;row-gap:30px}}
@media (max-width:560px){.nx-steps{grid-template-columns:1fr}}

/* callout key on black */
.nx .usm-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.nx .usm-legend .box{margin:0}
.nx .usm-legend .box p{color:#C2C2C4}

/* topic index */
.nx-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:0;align-items:start;padding:1px 0 0 1px}
.nx-topics details{background:#000;padding:0;border:1px solid #1E1E21;margin:-1px 0 0 -1px}
.nx-topics summary{list-style:none;cursor:pointer;padding:24px 26px;display:flex;align-items:center;gap:14px;font-family:var(--u-font-display);font-size:22px;font-weight:600}
.nx-topics summary::-webkit-details-marker{display:none}
.nx-topics summary::after{content:"+";margin-left:auto;font-family:"Segoe UI",system-ui,sans-serif;font-weight:300;font-size:26px;color:#8C8C90;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.nx-topics details[open] summary::after{transform:rotate(45deg)}
.nx-topics summary:hover{background:#08080A}
.nx-topics .nx-label{margin:0;min-width:64px}
.nx-topics ol{list-style:none;margin:0;padding:0 26px 22px}
.nx-topics li{border-top:1px solid #151517}
.nx-topics li a{display:flex;gap:14px;padding:11px 0;text-decoration:none;color:#C2C2C4;font-size:14.5px;transition:color .25s ease,padding-left .35s cubic-bezier(.16,1,.3,1)}
.nx-topics li a:hover{color:#fff;padding-left:6px}
.nx-topics .c{flex:0 0 74px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8C8C90;padding-top:3px}

/* floating card (bottom right) */
.nx-float{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;align-items:center;gap:14px;background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);padding:14px 16px 14px 14px;
  text-decoration:none;color:#F4F4F4;opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),border-color .3s ease}
.nx-float.on{opacity:1;transform:none;pointer-events:auto}
.nx-float:hover{border-color:#F4F4F4}
.nx-float img{width:40px;height:40px}
.nx-float span{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.5}
.nx-float b{display:block;font-family:var(--u-font-display);font-size:17px;letter-spacing:0;text-transform:none;font-weight:600}
@media (max-width:640px){.nx-float{left:12px;right:12px;bottom:12px;justify-content:center}}

/* footer */
.nx-foot{border-top:1px solid #1E1E21;padding:70px 0 110px}
.nx-foot .nx-wrap{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;justify-content:space-between}
.nx-foot .big{font-family:var(--u-font-display);font-weight:600;font-size:clamp(40px,8vw,96px);line-height:.95;letter-spacing:-.03em;color:#1C1C20;margin:0}
.nx-foot .big b{color:#2A1112;font-weight:600}
.nx-foot .usm-copy{border:0;margin:0;color:#8C8C90;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nx-foot .usm-copy b{color:#C2C2C4}

@media (prefers-reduced-motion:reduce){
  .nx-corridor::after,.nx-scrollcue::after{animation:none!important}
  .nx-hero h1,.nx-hero p.nx-sub,.nx-hero .nx-actions,.nx-hero .nx-label{animation:none!important}
  .nx-manifesto .w{color:#F4F4F4!important}
  .nx-manifesto .w.hl{color:#FF5A5F!important}
}
@media print{.nx-nav,.nx-float,.nx-corridor,.nx-floor,.nx-scrollcue{display:none!important}}
/* MYP titles use the display serif like every other course */
:root[data-curriculum="myp"] :is(.unit-title,h2.sec){font-family:var(--u-font-display);font-weight:600;letter-spacing:-.015em}
:root[data-curriculum="myp"] .unit-title{font-size:clamp(34px,5vw,54px);line-height:1.04}