html{-webkit-text-size-adjust:100%}
html,body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
/* ============================================================================
VALENCE — IB Diploma Programme Chemistry, first assessment 2025
Tokens: complete light palette on bare :root; dark redefines tokens only.
Chart series colours are validated categorical palettes (light and dark
stepped separately, not flipped).
========================================================================== */
:root{
--ground:#F2F4F7; --panel:#FFFFFF; --panel-2:#F7F9FB; --sunk:#EDF0F4;
--ink:#141920; --ink-2:#48525F; --ink-3:#77828F;
--rule:#D9DEE6; --rule-2:#C3CAD4;
--structure:#1F6FB2; --structure-tint:#E7F0F8;
--reactivity:#C0521E; --reactivity-tint:#FBEDE5;
--s1:#1F6FB2; --s2:#C0521E; --s3:#7048A6; --s4:#12793F;
--good:#12793F; --good-tint:#E4F2E9;
--bad:#B3261E; --bad-tint:#FBEAE8;
--warn:#8A6100; --warn-tint:#FBF1DE;
--grid:#E4E8EE; --axis:#AEB7C2;
--focus:#1F6FB2;
--shadow:0 1px 2px rgba(20,25,32,.06), 0 8px 24px -12px rgba(20,25,32,.18);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--ground:#0E1116; --panel:#161B22; --panel-2:#1B222B; --sunk:#11161D;
--ink:#E4E8EE; --ink-2:#A6B0BD; --ink-3:#77828F;
--rule:#28313C; --rule-2:#39434F;
--structure:#4491D2; --structure-tint:#152535;
--reactivity:#D5763A; --reactivity-tint:#2B1C12;
--s1:#4491D2; --s2:#D5763A; --s3:#9B78DA; --s4:#319D60;
--good:#319D60; --good-tint:#10241A;
--bad:#E5695F; --bad-tint:#2B1614;
--warn:#C79A3C; --warn-tint:#241C0D;
--grid:#232C37; --axis:#4B5561;
--focus:#4491D2;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
}
:root[data-theme="dark"]{
--ground:#0E1116; --panel:#161B22; --panel-2:#1B222B; --sunk:#11161D;
--ink:#E4E8EE; --ink-2:#A6B0BD; --ink-3:#77828F;
--rule:#28313C; --rule-2:#39434F;
--structure:#4491D2; --structure-tint:#152535;
--reactivity:#D5763A; --reactivity-tint:#2B1C12;
--s1:#4491D2; --s2:#D5763A; --s3:#9B78DA; --s4:#319D60;
--good:#319D60; --good-tint:#10241A;
--bad:#E5695F; --bad-tint:#2B1614;
--warn:#C79A3C; --warn-tint:#241C0D;
--grid:#232C37; --axis:#4B5561;
--focus:#4491D2;
--shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{
background:var(--ground); color:var(--ink);
font-family:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
font-size:15px; line-height:1.55; margin:0;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;text-wrap:balance;margin:0}
code,.mono,.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums}
sub,sup{font-size:.7em;line-height:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* ---------- shell ---------------------------------------------------------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 20px 80px}
.masthead{padding:34px 0 22px;border-bottom:2px solid var(--ink)}
.mast-eyebrow{
font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;
display:flex;gap:14px;flex-wrap:wrap;align-items:center
}
.mast-eyebrow b{color:var(--ink);font-weight:600}
.masthead h1{font-size:clamp(34px,6.2vw,60px);font-weight:800;letter-spacing:-.028em;line-height:.98}
.mast-sub{margin:14px 0 0;max-width:62ch;color:var(--ink-2);font-size:15.5px}
.foot .learner{color:var(--ink-2)}
.foot .learner b{color:var(--ink)}
.mast-row{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.themebtn{
font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
background:var(--panel);color:var(--ink-2);border:1px solid var(--rule-2);
padding:8px 12px;cursor:pointer;border-radius:2px
}
.themebtn:hover{color:var(--ink);border-color:var(--ink-3)}
/* ---------- theme rail ----------------------------------------------------- */
/* ---------- sticky top bar: search + theme rail --------------------------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--ground);margin-bottom:26px}
.searchrow{position:relative;padding:10px 0 8px}
.srch{display:flex;align-items:center;gap:9px;background:var(--panel);
border:1px solid var(--rule-2);border-radius:3px;padding:0 10px;
box-shadow:var(--shadow);transition:border-color .12s}
.srch:focus-within{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.srch svg{width:17px;height:17px;flex:0 0 auto;color:var(--ink-3)}
.srch input{flex:1 1 auto;border:0;background:none;outline:none;color:var(--ink);
font-family:inherit;font-size:15px;padding:11px 0;min-width:0}
.srch input::-webkit-search-cancel-button{cursor:pointer}
.skey{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
border:1px solid var(--rule-2);border-radius:3px;padding:1px 6px;flex:0 0 auto}
.srch:focus-within .skey{display:none}
.qmeta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);padding:4px 2px 0;min-height:0}
.qmeta:empty{display:none}
.results{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--panel);
border:1px solid var(--rule-2);border-radius:3px;box-shadow:var(--shadow);
max-height:min(62vh,560px);overflow-y:auto;overscroll-behavior:contain}
.rgroup{padding:9px 12px 3px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
border-top:1px solid var(--rule);background:var(--panel-2)}
.rgroup:first-child{border-top:0}
.rgroup b{color:var(--ink-2);font-weight:600}
.rhit{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
font-family:inherit;font-size:13.5px;line-height:1.5;color:var(--ink-2);
padding:8px 12px;border-top:1px solid var(--rule)}
.rhit:hover,.rhit[aria-selected="true"]{background:var(--structure-tint);color:var(--ink)}
.rhit mark{background:var(--warn-tint);color:var(--ink);font-weight:600;border-radius:2px;padding:0 1px}
.rhit .rwhere{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink-3);
letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:2px}
.rnone{padding:16px 12px;color:var(--ink-3);font-size:13.5px}
mark.hit{background:var(--warn-tint);color:inherit;box-shadow:0 0 0 1px var(--warn);border-radius:2px}
.flash{animation:flash 1.4s ease-out 1}
@keyframes flash{0%{background:var(--warn-tint)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none}}
.rail{
z-index:20;background:var(--ground);
border-bottom:1px solid var(--rule);
display:flex;gap:0;overflow-x:auto;scrollbar-width:thin;
scroll-snap-type:x proximity;overscroll-behavior-x:contain
}
.rail button{
flex:0 0 auto;scroll-snap-align:start;background:none;border:0;border-bottom:3px solid transparent;
padding:13px 16px 11px;cursor:pointer;text-align:left;color:var(--ink-2);
font-family:inherit;font-size:13.5px;display:flex;flex-direction:column;gap:1px;white-space:nowrap
}
.rail button .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rail button .n{font-weight:600}
.rail button:hover{color:var(--ink);background:var(--panel-2)}
.rail button[aria-selected="true"]{color:var(--ink)}
.rail button[aria-selected="true"] .k{color:inherit}
.rail button.fam-s[aria-selected="true"]{border-bottom-color:var(--structure)}
.rail button.fam-r[aria-selected="true"]{border-bottom-color:var(--reactivity)}
/* ---------- theme intro ---------------------------------------------------- */
.theme-head{display:flex;gap:16px;align-items:baseline;margin:4px 0 20px;flex-wrap:wrap}
.theme-head .badge{
font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;padding:5px 9px;border-radius:2px
}
.fam-s .badge,.badge.s{background:var(--structure-tint);color:var(--structure)}
.fam-r .badge,.badge.r{background:var(--reactivity-tint);color:var(--reactivity)}
.theme-head h2{font-size:26px;font-weight:700;letter-spacing:-.02em}
.theme-head p{margin:0;color:var(--ink-2);flex-basis:100%;max-width:70ch;font-size:14.5px}
/* ---------- module --------------------------------------------------------- */
.mod{background:var(--panel);border:1px solid var(--rule);border-radius:2px;margin-bottom:22px;box-shadow:var(--shadow)}
.mod.s{border-top:3px solid var(--structure)}
.mod.r{border-top:3px solid var(--reactivity)}
.mod-head{padding:15px 18px 13px;border-bottom:1px solid var(--rule);display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.mod-code{
font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.06em;
padding:4px 8px;border-radius:2px;flex:0 0 auto
}
.mod.s .mod-code{background:var(--structure-tint);color:var(--structure)}
.mod.r .mod-code{background:var(--reactivity-tint);color:var(--reactivity)}
.mod-title{flex:1 1 260px;min-width:0}
.mod-title h3{font-size:17.5px;font-weight:700;letter-spacing:-.012em}
.mod-title p{margin:3px 0 0;color:var(--ink-2);font-size:13.5px;max-width:74ch}
.mod-body{padding:18px;display:grid;gap:20px;grid-template-columns:minmax(0,290px) minmax(0,1fr);align-items:start}
.mod-body.wide{grid-template-columns:minmax(0,1fr)}
.mod-body.flip{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
@media (max-width:820px){.mod-body,.mod-body.flip{grid-template-columns:minmax(0,1fr)}}
/* ---------- controls ------------------------------------------------------- */
.ctl{display:flex;flex-direction:column;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{
font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-3);display:flex;justify-content:space-between;gap:10px;align-items:baseline
}
.field>label b{font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
input[type=range]{width:100%;accent-color:var(--focus);height:20px;margin:0}
/* touch targets: a 20px track is fine with a mouse, too small with a thumb */
@media (pointer:coarse){
input[type=range]{height:34px}
.subnav button,.seg button,.chip,.btn,select{min-height:38px}
}
select,input[type=number]{
font-family:"IBM Plex Sans",sans-serif;font-size:14px;padding:7px 9px;
background:var(--panel-2);color:var(--ink);border:1px solid var(--rule-2);border-radius:2px;width:100%
}
.seg{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule-2);border-radius:2px;overflow:hidden}
.seg button{
flex:1 1 auto;background:var(--panel-2);border:0;border-right:1px solid var(--rule-2);
padding:8px 10px;font-family:"IBM Plex Sans",sans-serif;font-size:13px;color:var(--ink-2);cursor:pointer;white-space:nowrap
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel);font-weight:600}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.btn{
background:var(--panel-2);border:1px solid var(--rule-2);border-radius:2px;padding:8px 13px;
font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;color:var(--ink);cursor:pointer
}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--ink);color:var(--panel);border-color:var(--ink);font-weight:600}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
/* ---------- readouts ------------------------------------------------------- */
.read{border:1px solid var(--rule);border-radius:2px;background:var(--sunk)}
.read .row{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:8px 11px;border-bottom:1px solid var(--rule)}
.read .row:last-child{border-bottom:0}
.read .row .k{font-size:12.5px;color:var(--ink-2)}
.read .row .v{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;font-size:14px;font-weight:500;text-align:right}
.read .row.hero{background:var(--panel)}
.read .row.hero .v{font-family:Archivo,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em}
.verdict{
padding:10px 12px;border-radius:2px;font-size:13.5px;border:1px solid transparent;
display:flex;gap:9px;align-items:flex-start
}
.verdict .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.verdict.good{background:var(--good-tint);border-color:var(--good);color:var(--ink)}
.verdict.good .dot{background:var(--good)}
.verdict.bad{background:var(--bad-tint);border-color:var(--bad);color:var(--ink)}
.verdict.bad .dot{background:var(--bad)}
.verdict.warn{background:var(--warn-tint);border-color:var(--warn);color:var(--ink)}
.verdict.warn .dot{background:var(--warn)}
.verdict b{font-weight:600}
/* ---------- canvas / figure ------------------------------------------------ */
.fig{position:relative;width:100%}
.fig canvas{display:block;width:100%;border:1px solid var(--rule);border-radius:2px;background:var(--panel-2)}
.fig svg{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:2px;background:var(--panel-2)}
.cap{font-size:12.5px;color:var(--ink-3);margin-top:7px;max-width:78ch}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:12.5px;color:var(--ink-2)}
.legend span{display:flex;gap:6px;align-items:center}
.legend i{width:14px;height:3px;border-radius:2px;display:block}
.scroll-x{overflow-x:auto}
/* ---------- misc ----------------------------------------------------------- */
.note{font-size:12.5px;color:var(--ink-2);border-left:2px solid var(--rule-2);padding:2px 0 2px 11px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
font-family:"IBM Plex Mono",monospace;font-size:11.5px;padding:4px 8px;border-radius:2px;
background:var(--panel-2);border:1px solid var(--rule-2);color:var(--ink-2);cursor:pointer
}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.hide{display:none!important}
table.data{width:100%;border-collapse:collapse;font-size:13px}
table.data th,table.data td{text-align:left;padding:6px 9px;border-bottom:1px solid var(--rule)}
table.data th{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
table.data td.n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;text-align:right}
.foot{margin-top:44px;padding-top:20px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:12.5px;max-width:78ch}
.foot b{color:var(--ink-2);font-weight:600}
/* ===========================================================================
NOTE STYLES — the production notes' own class vocabulary, re-expressed on
the platform's theme tokens so the same markup reads correctly in both
themes. The notes' text is carried across unchanged; only the presentation
is re-cut from print (A4, 9.5 pt, page breaks) to screen.
========================================================================== */
:root{
--bx-def-bg:#F2F7FD; --bx-def-ac:#0B4F9E;
--bx-alert-bg:#FFF8EC; --bx-alert-ac:#A3620A;
--bx-trap-bg:#FDF1F0; --bx-trap-ac:#A3291C;
--bx-we-bg:#F1F9F3; --bx-we-ac:#17803D;
--bx-ms-bg:#F7F2FD; --bx-ms-ac:#6B3FA0;
--bx-ck-bg:#F4F5F7; --bx-ck-ac:#4A5462;
--bx-th-bg:#EEFAFD; --bx-th-ac:#0A6478;
--bg-sl-bg:#E3EEFB; --bg-sl-fg:#0B4F9E;
--bg-hl-bg:#EFE6FA; --bg-hl-fg:#6B3FA0;
--bg-rec-bg:#FDECEA; --bg-rec-fg:#B3261E;
--bg-rep-bg:#FEF4E0; --bg-rep-fg:#8A5A00;
--bg-iso-bg:#EEF0F3; --bg-iso-fg:#58616E;
--eqbg:#FBFBFC; --eqbd:#B9C0CA; --thbg:#EEF1F5;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--bx-def-bg:#101E2E; --bx-def-ac:#6BA8E4;
--bx-alert-bg:#241C0D; --bx-alert-ac:#D9A445;
--bx-trap-bg:#2A1614; --bx-trap-ac:#E58275;
--bx-we-bg:#0F2418; --bx-we-ac:#4FB87A;
--bx-ms-bg:#1E1630; --bx-ms-ac:#A98BE0;
--bx-ck-bg:#1A1F26; --bx-ck-ac:#9AA4B1;
--bx-th-bg:#0D2429; --bx-th-ac:#56B8CE;
--bg-sl-bg:#14263A; --bg-sl-fg:#6BA8E4;
--bg-hl-bg:#221838; --bg-hl-fg:#A98BE0;
--bg-rec-bg:#2B1614; --bg-rec-fg:#E58275;
--bg-rep-bg:#241C0D; --bg-rep-fg:#D9A445;
--bg-iso-bg:#1C222A; --bg-iso-fg:#98A2AF;
--eqbg:#12171E; --eqbd:#3A4450; --thbg:#1B222B;
}}
:root[data-theme="dark"]{
--bx-def-bg:#101E2E; --bx-def-ac:#6BA8E4;
--bx-alert-bg:#241C0D; --bx-alert-ac:#D9A445;
--bx-trap-bg:#2A1614; --bx-trap-ac:#E58275;
--bx-we-bg:#0F2418; --bx-we-ac:#4FB87A;
--bx-ms-bg:#1E1630; --bx-ms-ac:#A98BE0;
--bx-ck-bg:#1A1F26; --bx-ck-ac:#9AA4B1;
--bx-th-bg:#0D2429; --bx-th-ac:#56B8CE;
--bg-sl-bg:#14263A; --bg-sl-fg:#6BA8E4;
--bg-hl-bg:#221838; --bg-hl-fg:#A98BE0;
--bg-rec-bg:#2B1614; --bg-rec-fg:#E58275;
--bg-rep-bg:#241C0D; --bg-rep-fg:#D9A445;
--bg-iso-bg:#1C222A; --bg-iso-fg:#98A2AF;
--eqbg:#12171E; --eqbd:#3A4450; --thbg:#1B222B;
}
.doc{
background:var(--panel); border:1px solid var(--rule); border-radius:2px;
padding:26px 30px 30px; box-shadow:var(--shadow); margin-bottom:22px;
font-size:15px; line-height:1.6; color:var(--ink);
overflow-wrap:break-word;
}
@media (max-width:700px){ .doc{padding:18px 16px 22px} }
.doc>*:first-child{margin-top:0}
.doc p{margin:0 0 11px 0; max-width:74ch}
.doc h2{
font-family:Archivo,sans-serif; font-size:21px; font-weight:700; letter-spacing:-.016em;
color:var(--ink); border-top:2px solid var(--ink); padding-top:11px; margin:32px 0 4px;
}
.doc h2.hl{border-top-color:var(--bg-hl-fg)}
.doc h3{font-family:Archivo,sans-serif; font-size:17px; font-weight:700; margin:26px 0 5px; color:var(--ink);
border-top:1.5px solid var(--rule-2); padding-top:10px}
.doc h3 .code{font-family:"IBM Plex Mono",monospace; color:var(--bg-sl-fg); font-weight:600}
.doc h3.hl .code{color:var(--bg-hl-fg)}
.doc h4{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--ink-2); margin:16px 0 5px; font-weight:600}
.doc .lead{color:var(--ink-2); font-size:15.5px; margin-bottom:13px; max-width:70ch}
.doc .small{font-size:13.5px; color:var(--ink-2)}
.doc .kicker{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; letter-spacing:.11em;
text-transform:uppercase; color:var(--ink-3); margin:0 0 3px}
.doc .ev{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.doc ul,.doc ol{margin:5px 0 12px; padding-left:20px; max-width:74ch}
.doc li{margin-bottom:5px}
.doc hr.thin{border:0; border-top:1px solid var(--rule); margin:22px 0}
.doc a{color:var(--structure)}
.doc .badge{display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:600;
letter-spacing:.09em; text-transform:uppercase; padding:3px 7px; border-radius:2px; vertical-align:3px;
margin-left:7px; white-space:nowrap}
.doc .b-sl{background:var(--bg-sl-bg); color:var(--bg-sl-fg)}
.doc .b-hl{background:var(--bg-hl-bg); color:var(--bg-hl-fg)}
.doc .b-rec{background:var(--bg-rec-bg); color:var(--bg-rec-fg)}
.doc .b-rep{background:var(--bg-rep-bg); color:var(--bg-rep-fg)}
.doc .b-iso{background:var(--bg-iso-bg); color:var(--bg-iso-fg)}
.doc .badgerow{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0}
.doc .badgerow .badge{margin-left:0}
.doc .box{border-radius:2px; padding:12px 15px; margin:14px 0; font-size:14.5px; border-left:3px solid transparent}
.doc .box .t{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600; letter-spacing:.11em;
text-transform:uppercase; margin-bottom:7px}
.doc .box p:last-child{margin-bottom:0}
.doc .def {background:var(--bx-def-bg); border-left-color:var(--bx-def-ac)} .doc .def .t{color:var(--bx-def-ac)}
.doc .alert{background:var(--bx-alert-bg); border-left-color:var(--bx-alert-ac)} .doc .alert .t{color:var(--bx-alert-ac)}
.doc .trap {background:var(--bx-trap-bg); border-left-color:var(--bx-trap-ac)} .doc .trap .t{color:var(--bx-trap-ac)}
.doc .we {background:var(--bx-we-bg); border-left-color:var(--bx-we-ac)} .doc .we .t{color:var(--bx-we-ac)}
.doc .ms {background:var(--bx-ms-bg); border-left-color:var(--bx-ms-ac)} .doc .ms .t{color:var(--bx-ms-ac)}
.doc .check{background:var(--bx-ck-bg); border-left-color:var(--bx-ck-ac)} .doc .check .t{color:var(--bx-ck-ac)}
.doc .think{background:var(--bx-th-bg); border-left-color:var(--bx-th-ac)} .doc .think .t{color:var(--bx-th-ac)}
.doc .eq{font-family:"IBM Plex Mono","DejaVu Sans",monospace; font-size:14.5px; text-align:center;
margin:13px 0; padding:11px 12px; background:var(--eqbg); border:1px dashed var(--eqbd);
border-radius:2px; overflow-x:auto}
.doc .eq.plain{background:none; border:none; padding:3px 0; text-align:left}
.doc .eq .note{font-family:"IBM Plex Sans",sans-serif; font-size:12px; color:var(--ink-3);
display:block; margin-top:5px; border:0; padding:0}
.doc var,.doc .sym{font-style:italic}
.doc .chem{font-family:"IBM Plex Mono","DejaVu Sans",monospace}
.doc .quote{font-style:italic; color:var(--ink-2); border-left:2px solid var(--rule-2);
padding-left:8px; margin:0; overflow-wrap:anywhere;
-webkit-box-decoration-break:clone; box-decoration-break:clone}
.doc table{width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px; display:table}
.doc .tablewrap{overflow-x:auto; margin:14px 0}
.doc .tablewrap table{margin:0}
.doc th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
text-align:left; padding:8px 9px; background:var(--thbg); color:var(--ink-2); border-bottom:1px solid var(--rule-2);
font-weight:600}
.doc td{padding:8px 9px; border-bottom:1px solid var(--rule); vertical-align:top}
.doc tr:last-child td{border-bottom:none}
.doc td.c,.doc th.c{text-align:center}
.doc table.tight td,.doc table.tight th{padding:6px 8px; font-size:13px}
.doc figure{margin:18px 0}
.doc figcaption{font-family:"IBM Plex Sans",sans-serif; font-size:12.5px; color:var(--ink-3); margin-top:7px; max-width:78ch}
.doc figcaption b{color:var(--ink-2)}
.doc figure svg{display:block; width:100%; height:auto; background:#fff; border:1px solid var(--rule); border-radius:2px}
.doc .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ .doc .grid2{grid-template-columns:1fr} }
.doc .ss svg{display:inline; width:.5em; height:.5em; vertical-align:.44em; background:none; border:0}
.doc .note{font-size:13.5px; color:var(--ink-2); border-left:2px solid var(--rule-2); padding:2px 0 2px 11px}
/* ---- sub-topic navigation ------------------------------------------------ */
.subnav{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 18px}
.subnav button{
font-family:"IBM Plex Sans",sans-serif; font-size:13px; padding:8px 12px; cursor:pointer;
background:var(--panel); color:var(--ink-2); border:1px solid var(--rule-2); border-radius:2px;
display:flex; gap:8px; align-items:baseline
}
.subnav button .c{font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600; color:var(--ink-3)}
.subnav button:hover{color:var(--ink); border-color:var(--ink-3)}
.subnav button[aria-pressed="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink)}
.subnav button[aria-pressed="true"] .c{color:inherit}
.subnav button .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-3);flex:0 0 auto;align-self:center}
.subnav button.has-notes .dot{background:var(--good)}
.subnav button.no-notes .dot{background:var(--warn)}
.topicbar{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin:0 0 14px;
padding-bottom:12px; border-bottom:1px solid var(--rule)}
.topicbar h3{font-family:Archivo,sans-serif; font-size:20px; font-weight:700; letter-spacing:-.018em}
.topicbar .code{font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:600; padding:4px 8px; border-radius:2px}
.fam-s .topicbar .code{background:var(--structure-tint); color:var(--structure)}
.fam-r .topicbar .code{background:var(--reactivity-tint); color:var(--reactivity)}
.topicbar .hrs{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-3); margin-left:auto}
.gap{
background:var(--panel); border:1px solid var(--rule); border-left:3px solid var(--warn);
border-radius:2px; padding:18px 20px; margin-bottom:22px
}
.gap h4{font-family:Archivo,sans-serif; font-size:16px; font-weight:700; margin:0 0 8px}
.gap p{margin:0 0 9px; color:var(--ink-2); font-size:14px; max-width:76ch}
.gap p:last-child{margin-bottom:0}
.gap .mono{font-size:13px; color:var(--ink)}
.simlead{
font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
color:var(--ink-3); margin:26px 0 9px; display:flex; align-items:center; gap:10px
}
.simlead::after{content:""; flex:1; height:1px; background:var(--rule)}
.legend-bar{display:flex; gap:16px; flex-wrap:wrap; padding:12px 0 0; margin-bottom:2px}
.legend-bar .lg{display:flex; gap:7px; align-items:center; font-size:12px; color:var(--ink-3);
font-family:"IBM Plex Sans",sans-serif}
.legend-bar i{width:11px; height:11px; border-radius:2px; display:block; border-left:3px solid}
.legend-bar .k-def {background:var(--bx-def-bg); border-color:var(--bx-def-ac)}
.legend-bar .k-think{background:var(--bx-th-bg); border-color:var(--bx-th-ac)}
.legend-bar .k-we {background:var(--bx-we-bg); border-color:var(--bx-we-ac)}
.legend-bar .k-ms {background:var(--bx-ms-bg); border-color:var(--bx-ms-ac)}
.legend-bar .k-trap {background:var(--bx-trap-bg); border-color:var(--bx-trap-ac)}
.legend-bar .k-alert{background:var(--bx-alert-bg); border-color:var(--bx-alert-ac)}
.legend-bar .k-check{background:var(--bx-ck-bg); border-color:var(--bx-ck-ac)}
.rail button .cnt{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.06em;
color:var(--ink-3); text-transform:uppercase}
.rail button[aria-selected="true"] .cnt{color:var(--ink-2)}
.tpanel[hidden]{display:none!important}
.doc .mod{margin:26px 0 6px}
/* ---- multi-page navigation: the tabs and pills are real links now -------- */
.rail a{flex:0 0 auto;scroll-snap-align:start;background:none;border:0;
border-bottom:3px solid transparent;padding:13px 16px 11px;cursor:pointer;text-align:left;
color:var(--ink-2);font-family:inherit;font-size:13.5px;display:flex;flex-direction:column;
gap:1px;white-space:nowrap;text-decoration:none}
.rail a:hover{color:var(--ink);background:var(--panel-2)}
.rail a[aria-current="page"]{color:var(--ink)}
.rail a[aria-current="page"] .k{color:inherit}
.rail a.fam-s[aria-current="page"]{border-bottom-color:var(--structure)}
.rail a.fam-r[aria-current="page"]{border-bottom-color:var(--reactivity)}
.subnav a{font-family:"IBM Plex Sans",sans-serif;font-size:13px;padding:8px 12px;cursor:pointer;
display:inline-flex;align-items:center;gap:8px;text-decoration:none;
background:var(--panel);color:var(--ink-2);border:1px solid var(--rule-2);border-radius:2px}
.subnav a:hover{border-color:var(--ink-3);color:var(--ink)}
.subnav a[aria-current="page"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.subnav a .c{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600}
.subnav a .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:0 0 auto}
.subnav a.no-notes .dot{background:var(--rule-2)}
.masthead h1 a{color:inherit;text-decoration:none}
.masthead h1 a:hover{text-decoration:underline;text-underline-offset:6px}
/* anything that needs scripting is hidden until the script has run */
.js-only{display:none}
html.js .js-only{display:block}
html.js .themebtn{display:inline-block}
.nojs{font-size:13px;color:var(--ink-2);background:var(--warn-tint);border:1px solid var(--warn);
border-radius:3px;padding:9px 12px;margin:10px 0}
.mod noscript .nojs{margin:0}
/* contents page */
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin:6px 0 30px}
.toccard{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:15px 16px;
text-decoration:none;color:inherit;display:block;box-shadow:var(--shadow)}
.toccard:hover{border-color:var(--ink-3)}
.toccard .c{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3)}
.toccard h3{margin:4px 0 6px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.toccard p{margin:0;font-size:13px;color:var(--ink-2)}
.toccard .tags{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap}
.tag{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--rule-2);border-radius:2px;padding:2px 6px;color:var(--ink-3)}
.tocsec{margin:26px 0 10px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.tocsec h2{font-size:20px;font-weight:700;letter-spacing:-.018em;margin:0}
.tocsec p{margin:0;color:var(--ink-2);font-size:13.5px;flex:1 1 260px}
.pager{display:flex;justify-content:space-between;gap:14px;margin:30px 0 0;flex-wrap:wrap}
.pager a{flex:1 1 240px;background:var(--panel);border:1px solid var(--rule);border-radius:3px;
padding:12px 14px;text-decoration:none;color:inherit}
.pager a:hover{border-color:var(--ink-3)}
.pager .d{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-3);display:block}
.pager .n{font-weight:600;font-size:14px}
.pager .next{text-align:right}