/* Cambridge AS & A Level 9701 notes — base stylesheet (AS Level + A Level pages).
   Extracted unchanged from the <style> block that was repeated in every page;
   the A Level copy was a superset of the AS Level copies.
   The URstudymate design layer (urstudymate.css) loads after it. */
:root{
  --bg:#f7f7f5; --paper:#ffffff; --ink:#16181d; --ink2:#414651; --dim:#6b7280;
  --line:#e2e2df; --line2:#d2d3cf; --rail:#fbfbfa;
  --accent:#1f5f8b; --accent-soft:#e8f1f7;
  --def:#1f5f8b;   --def-bg:#eaf2f8;
  --alert:#8a5b00; --alert-bg:#fdf3e0;
  --trap:#9d2626;  --trap-bg:#fbecec;
  --work:#1f6b45;  --work-bg:#e9f4ee;
  --think:#2b6a6c; --think-bg:#e6f2f2;
  --note:#5b4b8a;  --note-bg:#efebf8;
  --quiz-bg:#f0f1ee;
  --code:#f2f2ef;
  --sh:0 1px 2px rgba(16,18,22,.05), 0 6px 20px rgba(16,18,22,.05);
  --maxw:860px;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101216; --paper:#171a20; --ink:#e8eaee; --ink2:#c2c7d0; --dim:#8f97a4;
    --line:#272b33; --line2:#343945; --rail:#14171c;
    --accent:#6fb3e0; --accent-soft:#182833;
    --def:#7cbbe4; --def-bg:#152430;
    --alert:#e0b25c; --alert-bg:#2b2418;
    --trap:#ef8080; --trap-bg:#2e1b1b;
    --work:#6fc79a; --work-bg:#152a20;
    --think:#67bfc1; --think-bg:#132728;
    --note:#a695dd; --note-bg:#1f1b2e;
    --quiz-bg:#1b1e24; --code:#1c2027;
    --sh:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --bg:#101216; --paper:#171a20; --ink:#e8eaee; --ink2:#c2c7d0; --dim:#8f97a4;
  --line:#272b33; --line2:#343945; --rail:#14171c;
  --accent:#6fb3e0; --accent-soft:#182833;
  --def:#7cbbe4; --def-bg:#152430;
  --alert:#e0b25c; --alert-bg:#2b2418;
  --trap:#ef8080; --trap-bg:#2e1b1b;
  --work:#6fc79a; --work-bg:#152a20;
  --think:#67bfc1; --think-bg:#132728;
  --note:#a695dd; --note-bg:#1f1b2e;
  --quiz-bg:#1b1e24; --code:#1c2027;
  --sh:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent)}

/* ---------------------------------------------------------------- masthead */
#top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);}
.topin{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:9px 16px}
.brand{font-weight:650;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.brand small{display:block;font-weight:450;font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.grow{flex:1 1 auto}
.tbtn{appearance:none;border:1px solid var(--line2);background:var(--paper);color:var(--ink);
  font:inherit;font-size:13px;padding:6px 11px;border-radius:7px;cursor:pointer}
.tbtn:hover{background:var(--accent-soft);border-color:var(--accent)}
#q{width:min(320px,40vw);padding:7px 11px;border-radius:7px;border:1px solid var(--line2);
  background:var(--paper);color:var(--ink);font:inherit;font-size:14px}
#q:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
#menu{display:none}
@media(max-width:1000px){#menu{display:inline-block}}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:1400px;margin:0 auto;display:flex;gap:0;align-items:flex-start}
#rail{flex:0 0 292px;position:sticky;top:52px;max-height:calc(100vh - 52px);overflow:auto;
  padding:18px 10px 60px 16px;border-right:1px solid var(--line);background:var(--rail)}
#rail h4{margin:16px 0 6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:650}
#rail a{display:block;padding:5px 9px;border-radius:6px;color:var(--ink2);text-decoration:none;font-size:13.5px;line-height:1.35}
#rail a:hover{background:var(--accent-soft);color:var(--ink)}
#rail a.on{background:var(--accent);color:#fff}
#rail a .tag{float:right;font-size:10px;opacity:.75;margin-left:6px}
#doc{flex:1 1 auto;min-width:0;padding:26px 30px 140px;max-width:calc(var(--maxw) + 60px)}
#aside{flex:0 0 230px;position:sticky;top:52px;max-height:calc(100vh - 52px);overflow:auto;padding:26px 16px 60px;color:var(--dim);font-size:12.5px}
@media(max-width:1240px){#aside{display:none}}
@media(max-width:1000px){
  #rail{position:fixed;left:0;top:52px;bottom:0;width:290px;z-index:55;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:var(--sh)}
  #rail.open{transform:none}
  #doc{padding:20px 16px 120px}
}

/* ---------------------------------------------------------------- typography */
h1{font-size:29px;line-height:1.2;letter-spacing:-.02em;margin:.2em 0 .35em;font-weight:680}
h2{font-size:22px;line-height:1.25;letter-spacing:-.015em;margin:2.4em 0 .5em;font-weight:660;
  padding-bottom:.3em;border-bottom:1px solid var(--line)}
h3{font-size:17.5px;margin:1.7em 0 .4em;font-weight:640;letter-spacing:-.01em}
h4{font-size:15px;margin:1.3em 0 .3em;font-weight:640;color:var(--ink2)}
p{margin:.7em 0}
ul,ol{margin:.6em 0;padding-left:1.35em}
li{margin:.28em 0}
strong{font-weight:640}
.lead{font-size:17px;color:var(--ink2)}
.eyebrow{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:650;margin:0}
.sec{scroll-margin-top:70px}
.oc{display:inline-block;font:600 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding:1px 6px;border-radius:5px;margin-left:6px;vertical-align:2px;letter-spacing:.03em}
code,.f{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.93em;
  background:var(--code);padding:1px 5px;border-radius:4px}
.f{background:transparent;padding:0;font-family:inherit;white-space:nowrap;
  max-width:100%;overflow-x:auto}
sub,sup{font-size:.72em}

/* ------------------------------------------------------------------- boxes */
.box{border:1px solid var(--line2);border-left-width:3px;border-radius:8px;padding:12px 15px;margin:1.1em 0;
  background:var(--paper);box-shadow:var(--sh)}
.box .bt{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;margin:0 0 .35em}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box p:first-of-type{margin-top:0}
.def{border-left-color:var(--def);background:var(--def-bg)} .def .bt{color:var(--def)}
.alert{border-left-color:var(--alert);background:var(--alert-bg)} .alert .bt{color:var(--alert)}
.trap{border-left-color:var(--trap);background:var(--trap-bg)} .trap .bt{color:var(--trap)}
.work{border-left-color:var(--work);background:var(--work-bg)} .work .bt{color:var(--work)}
.think{border-left-color:var(--think);background:var(--think-bg)} .think .bt{color:var(--think)}
.note{border-left-color:var(--note);background:var(--note-bg)} .note .bt{color:var(--note)}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto;margin:1.1em 0;border:1px solid var(--line2);border-radius:8px;background:var(--paper);box-shadow:var(--sh)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--quiz-bg);font-weight:640;font-size:12.5px;letter-spacing:.02em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
caption{caption-side:bottom;padding:8px 11px;font-size:12.5px;color:var(--dim);text-align:left}

/* ------------------------------------------------------------------ figures */
figure{margin:1.3em 0}
figure svg{display:block;width:100%;height:auto;background:var(--paper);border:1px solid var(--line2);border-radius:8px}
figcaption{font-size:12.5px;color:var(--dim);margin-top:.5em;line-height:1.45}
.fig-t{fill:var(--ink)} .fig-d{fill:var(--dim)} .fig-s{stroke:var(--ink2)}

/* ------------------------------------------------------------------ flash */
.flash{margin:1.3em 0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--paper);box-shadow:var(--sh)}
.flash .fh{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--quiz-bg)}
.flash .fh .ttl{font-size:13.5px;font-weight:620}
.flash .fh .src{font-size:11px;color:var(--dim);margin-left:auto;white-space:nowrap}
.flash .stage{position:relative;width:100%;aspect-ratio:738/450;background:#fff}
:root[data-theme="dark"] .flash .stage,
:root:not([data-theme="light"]) .flash .stage{background:#fff}
.flash .stage ruffle-player{position:absolute;inset:0;width:100%;height:100%}
.flash .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:var(--quiz-bg);color:var(--ink2);text-align:center;padding:20px}
.flash .ph .pb{appearance:none;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:620;
  font-size:14px;padding:9px 20px;border-radius:8px;cursor:pointer}
.flash .ph small{color:var(--dim);font-size:12px;max-width:44ch;line-height:1.45}
.flash .fc{padding:9px 12px;font-size:12.5px;color:var(--dim);border-top:1px solid var(--line)}

/* --------------------------------------------------------------- simulation */
.sim{margin:1.4em 0;border:1px solid var(--line2);border-radius:10px;background:var(--paper);
  box-shadow:var(--sh);overflow:hidden}
.sim>.sh{display:flex;align-items:baseline;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line);background:var(--accent-soft)}
.sim>.sh .ttl{font-size:13.5px;font-weight:650;color:var(--accent)}
.sim>.sh .sub{font-size:11.5px;color:var(--dim);margin-left:auto}
.sim .sb{padding:13px}
.ctl{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:11px}
.ctl label{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:6px}
select,input[type=text],input[type=number]{font:inherit;font-size:13.5px;padding:5px 8px;border-radius:6px;
  max-width:100%;
  border:1px solid var(--line2);background:var(--paper);color:var(--ink)}
select:focus,input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input[type=range]{accent-color:var(--accent);width:190px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.chip{appearance:none;border:1px solid var(--line2);background:var(--paper);color:var(--ink2);
  font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.out{background:var(--quiz-bg);border-radius:8px;padding:11px 13px;font-size:14px}
.out .big{font-size:19px;font-weight:660;letter-spacing:-.01em}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:660px){.grid2{grid-template-columns:1fr}}
.kv{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13.5px;border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:620;font-variant-numeric:tabular-nums}
.bar{height:9px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:var(--accent)}

/* ------------------------------------------------------------------- quiz */
.quiz{margin:1.3em 0;border:1px solid var(--line2);border-radius:10px;background:var(--paper);box-shadow:var(--sh)}
.quiz .qh{padding:9px 13px;border-bottom:1px solid var(--line);background:var(--quiz-bg);
  font-size:13.5px;font-weight:640;display:flex;gap:10px;align-items:center}
.quiz .qh .score{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.quiz .qb{padding:13px}
.qitem{padding:10px 0;border-bottom:1px solid var(--line)}
.qitem:last-child{border-bottom:0}
.qitem .stem{font-size:14.5px;margin-bottom:7px}
.qopt{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;padding:7px 11px;margin:4px 0;
  border:1px solid var(--line2);border-radius:7px;background:var(--paper);color:var(--ink);cursor:pointer}
.qopt:hover{border-color:var(--accent)}
.qopt.right{background:var(--work-bg);border-color:var(--work);color:var(--ink)}
.qopt.wrong{background:var(--trap-bg);border-color:var(--trap);color:var(--ink)}
.qwhy{font-size:13px;color:var(--ink2);background:var(--quiz-bg);border-radius:7px;padding:8px 11px;margin-top:6px}

/* ------------------------------------------------------------------- misc */
.pill{display:inline-block;font-size:10.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px;background:var(--quiz-bg);color:var(--dim);border:1px solid var(--line2)}
hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
mark{background:#ffe58a;color:#16181d;border-radius:3px;padding:0 2px}
.hit{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
#nohits{display:none;padding:9px;color:var(--dim);font-size:13px}
.srch-hidden{display:none !important}
details.more{border:1px solid var(--line2);border-radius:8px;padding:0;margin:1.1em 0;background:var(--paper)}
details.more>summary{cursor:pointer;padding:9px 13px;font-size:13.5px;font-weight:620;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"▸ ";color:var(--accent)}
details.more[open]>summary::before{content:"▾ "}
details.more>div{padding:0 13px 12px}
.top-link{display:inline-block;margin-top:1.4em;font-size:12.5px;color:var(--dim);text-decoration:none}
footer{border-top:1px solid var(--line);margin-top:3em;padding-top:1.4em;font-size:13px;color:var(--dim)}
@media(max-width:640px){
  .topin{flex-wrap:wrap;padding:8px 12px;gap:8px}
  .brand{font-size:13px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .brand small{display:none}
  #q{width:100%;order:5;flex:1 0 100%}
  .grow{display:none}
}
@media print{
  #rail,#aside,#top,.flash .stage{display:none}
  #doc{max-width:none;padding:0}
  .box,.sim,.tw,.quiz{break-inside:avoid}
}
/* A Level additions */
figure.fg{margin:1.6em 0}
figure.fg .fig-body{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin:0 auto;overflow-x:auto}
figure.fg .fig-body svg{max-width:100%;height:auto;display:block;margin:0 auto}
figure.fg .fig-body img{max-width:100%;display:block;margin:0 auto}
figure.fg figcaption{font-size:13.5px;color:var(--ink2);margin-top:8px}
.box.er{border-left-color:#b0452f;background:var(--trap-bg)}
.box.er .bt{color:var(--trap)}
.box.ms{border-left-color:var(--note);background:var(--note-bg)}
.box.ms .bt{color:var(--note)}
.box.qc{border-left-color:var(--dim);background:var(--quiz-bg)}
.box.qc .bt{color:var(--ink2)}
.box.qc details.qa{display:inline-block;margin-left:8px;font-size:13px}
.box.qc details.qa summary{cursor:pointer;color:var(--accent)}
.box.qc details.qa>div{margin-top:4px;color:var(--ink2)}
.pset{border:1px solid var(--line2);border-radius:12px;padding:14px 16px;margin:1.8em 0;background:var(--paper)}
.pset .psh{font-weight:700;color:var(--accent);font-size:16px}
.pset .psi{font-size:13.5px;color:var(--dim);margin:.3em 0 .8em}
.pq{border-top:1px solid var(--line);padding:12px 0}
.pq .pqh{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.pq .mk{color:var(--dim)}
.pq img.qimg{max-width:100%;background:#fff;border-radius:6px;display:block;margin:6px 0;border:1px solid var(--line)}
.eo{border:1px solid #c9a14a;background:var(--alert-bg);border-radius:10px;padding:12px 16px;margin:1.5em 0}
.eo .bt{font-weight:700;color:var(--alert);letter-spacing:.04em;text-transform:uppercase;font-size:12.5px}
table.org td{vertical-align:top}
.mech{font-family:inherit}
table.we{width:100%;border-collapse:collapse;margin:.5em 0;font-size:14px}
table.we td{border-bottom:1px solid var(--line);padding:5px 8px;vertical-align:top}
table.we td:first-child{font-weight:650;white-space:nowrap;width:1%;color:var(--work)}
.box.work table.we td{border-bottom-color:rgba(0,0,0,.08)}

.box.qc ol li{margin-bottom:4px}
.sim select{max-width:100%}
.parthead{display:none}
.sim .sb svg{max-width:100%}