:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --paper:#F5F7FA; --sheet:#FFFFFF; --sheet-2:#EDF1F6; --line:#D8DFE8; --grid:rgba(15,42,74,.05);
  --ink:#0F1B2D; --ink-2:#44536A; --ink-3:#5E6E85;
  --blue:#1E4E8C; --blue-2:#163A6B; --blue-soft:#E3ECF7; --on-ink:#FFFFFF;
  --hi:#2563A8; --lo:#8D9AAD; --led:#F59E0B; --led-off:#EBE2CC;
  --mark:#F5A524; --mark-soft:#FCEBC8; --ok:#1E4E8C; --ok-soft:#E3ECF7; --bad:#A64B00; --bad-soft:#FDEBD0;
  --ac:#1E3A5F; --ac-soft:#E6EDF6; --ac-ink:#1E3A5F;
  --accent:#F59E0B; --accent-ink:#9A4F00; --accent-soft:#FDEFD3;
  --conv-border:#F59E0B; --conv-bg:#FDEFD3;
  --sev-ok-bg:#D4E6FA; --sev-ok-ink:#0E3A66; --sev-low-bg:#FDE4C2; --sev-low-ink:#6B3A00; --sev-mid-bg:#F7B267; --sev-mid-ink:#3F1F00; --sev-high-bg:#B34700; --sev-high-ink:#FFFFFF;
  /* Four font families, one job each:
     display = headings and titles; body = reading text;
     ui = buttons, labels, tables, captions and diagram labels; mono = bits, code, equations */
  --f-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Literata',Georgia,'Times New Roman',serif;
  --f-ui:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  /* Five font sizes. Every font-size in this file uses one of these.
     --fs-sm is the smallest text anywhere on the site.
     The values match the CSE-201 OOP course site (../CSE-201 Object Oriented Programming/v1),
     so both courses read the same: body 18px, small/controls 16px, h3 20px, h2 and h1 as there. */
  --fs-sm:16px;
  --fs-base:18px;
  --fs-md:20px;
  --fs-lg:clamp(24px,3vw,31px);
  --fs-xl:clamp(32px,4.6vw,52px);
  /* SVG diagram unit: a 12.5-unit label (class .lt) renders at exactly --fs-sm */
  --u:calc(var(--fs-sm) / 12.5);
}
/* Slide decks: same scale as the CSE-201 slides — body text clamp(20px,1.6vw,25px), h3 1.15× body,
   h2 clamp(28px,3.5vw,46px), title h1 clamp(34px,5.4vw,72px), and 16px for controls, tables and
   small labels. */
body.deck-page{
  --fs-sm:16px;
  --fs-base:clamp(20px,1.6vw,25px);
  --fs-md:clamp(23px,1.84vw,29px);
  --fs-lg:clamp(28px,3.5vw,46px);
  --fs-xl:clamp(34px,5.4vw,72px);
  --u:calc(var(--fs-sm) / 12.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0B1424; --sheet:#111D33; --sheet-2:#172642; --line:#263756; --grid:rgba(141,180,234,.05);
    --ink:#E7EDF7; --ink-2:#A9B7CC; --ink-3:#8494AD;
    --blue:#8DB4EA; --blue-2:#B7D0F3; --blue-soft:#1B2F52; --on-ink:#0B1424;
    --hi:#6FA3E6; --lo:#5B6B85; --led:#FFB020; --led-off:#3A3320;
    --mark:#F5A524; --mark-soft:rgba(245,165,36,.22); --ok:#F5B860; --ok-soft:rgba(141,180,234,.16); --bad:#F6A65B; --bad-soft:rgba(246,166,91,.16);
    --ac:#3B6BB0; --ac-soft:rgba(141,180,234,.14); --ac-ink:#F5B860;
    --accent:#F5A524; --accent-ink:#F5B860; --accent-soft:rgba(245,165,36,.16);
    --conv-border:#C98A4A; --conv-bg:rgba(201,138,74,.14);
    --sev-ok-bg:rgba(111,163,230,.24); --sev-ok-ink:#D3E5FB; --sev-low-bg:#F2C184; --sev-low-ink:#3A1E00; --sev-mid-bg:#D9782A; --sev-mid-ink:#1F0E00; --sev-high-bg:#9C3D00; --sev-high-ink:#FFFFFF;
  }
}
:root[data-theme="dark"]{
  --paper:#0B1424; --sheet:#111D33; --sheet-2:#172642; --line:#263756; --grid:rgba(141,180,234,.05);
  --ink:#E7EDF7; --ink-2:#A9B7CC; --ink-3:#8494AD;
  --blue:#8DB4EA; --blue-2:#B7D0F3; --blue-soft:#1B2F52; --on-ink:#0B1424;
  --hi:#6FA3E6; --lo:#5B6B85; --led:#FFB020; --led-off:#3A3320;
  --mark:#F5A524; --mark-soft:rgba(245,165,36,.22); --ok:#F5B860; --ok-soft:rgba(141,180,234,.16); --bad:#F6A65B; --bad-soft:rgba(246,166,91,.16);
  --ac:#3B6BB0; --ac-soft:rgba(141,180,234,.14); --ac-ink:#F5B860;
  --accent:#F5A524; --accent-ink:#F5B860; --accent-soft:rgba(245,165,36,.16);
  --conv-border:#C98A4A; --conv-bg:rgba(201,138,74,.14);
  --sev-ok-bg:rgba(111,163,230,.24); --sev-ok-ink:#D3E5FB; --sev-low-bg:#F2C184; --sev-low-ink:#3A1E00; --sev-mid-bg:#D9782A; --sev-mid-ink:#1F0E00; --sev-high-bg:#9C3D00; --sev-high-ink:#FFFFFF;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(76px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;color:var(--ink);font:400 var(--fs-base)/1.4 var(--f-body);min-height:100%}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;letter-spacing:-.015em}
h1{font-size:var(--fs-xl);line-height:1.06;font-weight:700}
h2{font-size:var(--fs-lg);line-height:1.15;font-weight:700}
h3{font-size:var(--fs-md);line-height:1.25;font-weight:650;margin:0 0 6px}
h4{font-size:var(--fs-base);font-weight:650;margin:0 0 4px}
h5,h6{font:650 var(--fs-base)/1.3 var(--f-display);color:var(--ink);margin:0 0 4px}
p{margin:0 0 1em;text-align:justify;text-justify:inter-word}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-2)}
.toolcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:0 0 40px}
.toolcard{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--sheet);transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.toolcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.toolcard img{width:100%;height:auto;display:block;background:var(--sheet-2)}
.toolcard-body{padding:16px 20px 20px}
.toolcard-body h3{margin:0 0 6px}
.toolcard-body p{margin:0 0 12px;font-size:var(--fs-sm);line-height:1.35;color:var(--ink-2);text-align:left}
.toolcard-link{font:600 var(--fs-sm) var(--f-ui);color:var(--accent-ink)}
.ov{text-decoration:overline;text-decoration-thickness:.09em;text-underline-offset:0;padding-top:.12em}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:3px}
button,select{font-family:var(--f-ui);font-size:var(--fs-sm)}
small,sub,sup,figcaption,caption,label,summary{font-size:var(--fs-sm)}
summary,label,figcaption,caption{font-family:var(--f-ui)}
code,.mono{font-family:var(--f-mono)}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:600 var(--fs-sm)/1.1 var(--f-ui);padding:9px 14px;border-radius:4px;border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--sheet-2);color:var(--ink)}
.btn.pri{background:var(--ink);color:var(--on-ink)}
.btn.pri:hover{background:var(--blue-2);color:#fff;border-color:var(--blue-2)}
.btn.sm{padding:6px 10px}
.btn-ic{width:1em;height:1em;flex:none;stroke:currentColor}
.btn.on{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-2)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.tight{gap:6px}
.gap{margin-top:14px}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:4px;overflow:hidden;background:var(--sheet);flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--ink);font:600 var(--fs-sm) var(--f-ui);padding:7px 12px;cursor:pointer;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button:hover{background:var(--sheet-2)}
.seg button.on{background:var(--ink);color:var(--on-ink)}
input[type=text],input[type=number],select,textarea{font:500 var(--fs-sm) var(--f-mono);color:var(--ink);background:var(--sheet);border:1.5px solid var(--ink);border-radius:4px;padding:7px 10px;min-width:0}
select{font-family:var(--f-ui);font-weight:600}
input[type=range]{accent-color:var(--blue);vertical-align:middle}
label.fld{display:inline-flex;flex-direction:column;gap:3px;font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2)}
.eqin{display:inline-flex;flex-direction:column;border:1.5px solid var(--line);border-radius:8px;background:var(--sheet-2);overflow:hidden}
.eqin-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px;border-bottom:1px solid var(--line)}
.eqin-label{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2)}
.eqin-ops{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}
.eqop{font:700 var(--fs-sm) var(--f-mono);line-height:1;padding:3px 9px;border:1.5px solid var(--ink-3);border-radius:6px;background:var(--sheet);color:var(--ink);cursor:pointer}
.eqop:hover{border-color:var(--ac);color:var(--ac-ink);background:var(--ac-soft)}
.eqin-body{padding:8px}
.eqin-body input[type=text]{width:100%;border:none;border-radius:0;background:transparent;padding:2px 0}
.tsw{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:2px;cursor:pointer;color:var(--ink);font:600 var(--fs-sm) var(--f-ui)}
.tsw .track{width:2em;height:1.1em;border-radius:.55em;background:var(--lo);position:relative;transition:background .12s;border:1.5px solid var(--ink)}
.tsw .knob{position:absolute;top:50%;left:2px;margin-top:-.36em;width:.72em;height:.72em;border-radius:50%;background:#fff;border:1.5px solid var(--ink);transition:left .12s}
.tsw.on .track{background:var(--hi)}
.tsw.on .knob{left:calc(100% - .72em - 2px)}
.tsw .val{font:600 var(--fs-sm) var(--f-mono);min-width:1ch}
.led{display:inline-block;width:1em;height:1em;border-radius:50%;border:1.5px solid var(--ink);background:var(--led-off);vertical-align:middle;transition:background .1s,box-shadow .1s}
.led.on{background:var(--led);box-shadow:0 0 0 4px color-mix(in srgb,var(--led) 28%,transparent)}
.bits{display:inline-flex;gap:4px;align-items:flex-end}
.bitc{display:flex;flex-direction:column;align-items:center;gap:2px}
.bitc small{font:600 var(--fs-sm) var(--f-mono);color:var(--ink-3)}
.bit{width:2em;height:2em;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:3px;background:var(--sheet);color:var(--ink);font:600 var(--fs-base) var(--f-mono);cursor:pointer;padding:0}
.bit.on{background:var(--hi);color:#fff;border-color:var(--hi)}
.bit.ro{cursor:default}
.bit.mk{background:var(--mark-soft);border-color:var(--ink)}
.bit.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.bit.bad.on{background:var(--bad);color:#fff;border-color:var(--bad)}

.panel{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.demo{background:var(--sheet);border:1.5px solid var(--ink);border-radius:8px;padding:18px;box-shadow:4px 4px 0 var(--line)}
.demo h3{margin-bottom:10px}
.demo .sub{color:var(--ink-2);font:500 var(--fs-sm)/1.3 var(--f-ui);margin:0 0 12px;max-width:none;text-align:justify;text-justify:inter-word}
.out{font:500 var(--fs-sm)/1.35 var(--f-mono);background:var(--sheet-2);border:1px solid var(--line);border-radius:4px;padding:8px 12px;overflow-x:auto}
.out b{color:var(--blue-2)}
.note{border-left:4px solid var(--mark);background:var(--sheet-2);padding:10px 14px;margin:14px 0;font-size:var(--fs-base);max-width:70ch}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:14px;border-bottom:1.5px solid var(--ink)}
.tabs button{border:1.5px solid transparent;border-bottom:0;background:transparent;font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2);padding:8px 14px;border-radius:5px 5px 0 0;cursor:pointer;margin-bottom:-1.5px}
.tabs button.on{background:var(--sheet);border-color:var(--ink);color:var(--ink)}
.scrollx{overflow-x:auto;max-width:100%}
table.tt{border-collapse:collapse;font:500 var(--fs-sm) var(--f-mono)}
table.tt th,table.tt td{border:1px solid var(--line);padding:4px 10px;text-align:center}
table.tt th{background:var(--sheet-2);font-weight:600}
table.tt tr.act td{background:var(--mark-soft);font-weight:600}
table.tt td.hl{background:var(--blue-soft);color:var(--ac-ink);font-weight:600}
table.doc{border-collapse:collapse;width:100%;max-width:100%;font:500 var(--fs-sm)/1.3 var(--f-ui)}
table.doc th,table.doc td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
table.doc th{font-weight:650;color:var(--ink-2);border-bottom:1.5px solid var(--ink)}
table.doc td.m{font-family:var(--f-mono)}
table.lawtable{table-layout:fixed}
table.lawtable th,table.lawtable td{padding:12px 16px;vertical-align:middle}
table.lawtable th:first-child,table.lawtable td:first-child{width:22%}
table.lawtable th{font-size:var(--fs-base)}
table.lawtable td.m{font-size:var(--fs-base);line-height:1.5}
.steps li{margin-bottom:5px}
.demorgan-steps{margin-top:14px}

/* ---------- chapter ---------- */
.chhead{padding-bottom:6px}
.chnumber{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-3);margin-bottom:6px}
.chhead .lead{margin:14px 0 18px}
.chstrip{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px}
.chstrip a{font:600 var(--fs-sm) var(--f-ui);padding:5px 11px;border:1.5px solid var(--ink);border-radius:3px;text-decoration:none;color:var(--ink);background:var(--sheet)}
.chstrip a:hover{background:var(--ink);color:var(--on-ink)}
details.covers{max-width:900px;margin-top:6px}
details.covers summary{cursor:pointer;font:600 var(--fs-sm) var(--f-ui);color:var(--blue-2)}
details.covers ul{columns:2;column-gap:28px;margin:10px 0 0;padding-left:20px;font:450 var(--fs-sm)/1.35 var(--f-ui);color:var(--ink-2)}
@media (max-width:640px){details.covers ul{columns:1}}
.concept{margin:0 0 30px;max-width:70ch}
.concept h3{margin-bottom:8px}
.concept ul,.concept ol{padding-left:22px;margin:0 0 1em}
.concept li{margin-bottom:.3em}
/* column addition: one digit per cell, so every carry sits exactly above the column it is added into */
.formula.fit{display:inline-block;max-width:100%}
.colsum{border-collapse:collapse;font:500 var(--fs-base)/1.4 var(--f-mono)}
.colsum td{padding:0 .2em;text-align:center;min-width:1.1ch}
.colsum .carry td{color:var(--accent-ink);font-weight:700}
.colsum .sum td{border-top:2px solid var(--ink)}
.colsum td.note,.colsum .sum td:first-child{border-top:0}
.colsum td.note{text-align:left;padding-left:1em;font:500 var(--fs-sm) var(--f-ui);color:var(--ink-2)}
.concept table{margin:6px 0 14px}
.formula{font:500 var(--fs-base)/1.4 var(--f-mono);background:var(--sheet-2);border:1px solid var(--line);border-radius:4px;padding:8px 12px;margin:8px 0 14px;overflow-x:auto}
.fig{box-sizing:border-box;width:100%;min-width:0;margin:14px 0 22px;padding:14px;background:var(--sheet);border:1px solid var(--line);border-radius:8px;max-width:100%;overflow-x:auto}
.fig figcaption{font:450 var(--fs-sm) var(--f-ui);color:var(--ink-2);margin-top:8px}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.flow span{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:normal;border:1.5px solid var(--ink);background:var(--sheet-2);padding:8px 12px;border-radius:3px;font:600 var(--fs-sm) var(--f-ui)}
.flow i{font-style:normal;color:var(--ink-3);font-weight:700}
.ex{border:1px solid var(--line);background:var(--sheet);border-radius:8px;padding:14px 18px;margin-bottom:14px}
.ex .qq{font:600 var(--fs-base)/1.4 var(--f-display);margin-bottom:6px}
.ex ol,.ex ul{margin:6px 0 0;padding-left:22px}
.ex li{margin-bottom:3px}
details.reveal{margin-top:8px}
details.reveal summary{cursor:pointer;font:600 var(--fs-sm) var(--f-ui);color:var(--blue-2)}
details.reveal .ans{margin-top:6px;padding:8px 12px;background:var(--sheet-2);border-left:4px solid var(--hi);font-size:var(--fs-base)}
.sumlist{max-width:70ch;padding-left:22px}
.sumlist li{margin-bottom:.4em}
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:56px;flex-wrap:wrap}
.circtabs{margin-top:8px}
.donebar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:34px;padding:14px 16px;border:1.5px solid var(--ink);border-radius:8px;background:var(--sheet)}

/* ---------- quiz ---------- */
.qhead{display:flex;justify-content:space-between;font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2);margin-bottom:8px}
.qtext{font:600 var(--fs-md)/1.4 var(--f-display);margin-bottom:12px}
.qopt{display:block;width:100%;text-align:left;padding:10px 14px;margin-bottom:8px;border:1.5px solid var(--ink);border-radius:4px;background:var(--sheet);color:var(--ink);font:500 var(--fs-base)/1.4 var(--f-body);cursor:pointer}
.qopt:hover:not([disabled]){background:var(--sheet-2)}
.qopt.right{background:var(--ok-soft);border-color:var(--ok)}
.qopt.wrong{background:var(--bad-soft);border-color:var(--bad)}
.qwhy{margin:10px 0;padding:10px 12px;border-left:4px solid var(--hi);background:var(--sheet-2);font-size:var(--fs-base)}
.score{font:700 var(--fs-lg) var(--f-display)}
.qlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0}
.qlist a{display:block;padding:12px 14px;border:1.5px solid var(--ink);margin:0 -1.5px -1.5px 0;background:var(--sheet);text-decoration:none;color:var(--ink);font:600 var(--fs-sm) var(--f-ui)}
.qlist a:hover{background:var(--sheet-2)}
.qlist small{display:block;font:450 var(--fs-sm) var(--f-ui);color:var(--ink-2)}

/* ---------- k-map ---------- */
.kwrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:820px){.kwrap{grid-template-columns:minmax(0,1fr)}}
.kmap{display:inline-grid;gap:0;user-select:none}
.kh{display:flex;align-items:center;justify-content:center;font:600 var(--fs-sm) var(--f-mono);color:var(--ink-2);min-height:1.3em;min-width:1.7em;padding:0 4px}
.kcorner{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2);display:flex;align-items:flex-end;justify-content:flex-end;padding:2px 6px;border-bottom:1.5px solid var(--ink);border-right:1.5px solid var(--ink)}
.kcell{position:relative;width:2.8em;height:2.8em;border:1px solid var(--ink-3);background:var(--sheet);color:var(--ink);font:600 var(--fs-md) var(--f-mono);cursor:pointer;padding:0;margin:0 -1px -1px 0}
.kcell small{position:absolute;top:2px;left:5px;font:500 var(--fs-sm)/1 var(--f-mono);color:var(--ink-3)}
.kcell.v1{background:var(--blue-soft)}
.kcell.vx{background:var(--sheet-2);color:var(--ink-3)}
.kcell.cur{outline:3px solid var(--mark);outline-offset:-3px}
.klegend{list-style:none;margin:8px 0 0;padding:0}
.klegend li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line);font:500 var(--fs-sm)/1.4 var(--f-ui)}
.klegend .sw{flex:none;width:.7em;height:.7em;border-radius:2px;transform:translateY(2px)}
.klegend .tm{font:600 var(--fs-sm) var(--f-mono)}
.klegend .tg{margin-left:auto;font:500 var(--fs-sm) var(--f-ui);color:var(--ink-2);text-align:right}
.ktester{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ktester h4{margin:0 0 4px}
.eqbox{font:600 var(--fs-md)/1.5 var(--f-mono);padding:10px 14px;background:var(--sheet-2);border:1.5px solid var(--ink);border-radius:4px;margin:6px 0 10px;overflow-x:auto}

/* ---------- logic lab ---------- */
.labcanvas{display:block;width:100%;background-color:var(--sheet);background-image:radial-gradient(var(--line) 1px,transparent 1.6px);background-size:20px 20px;border:1.5px solid var(--ink);border-radius:8px;touch-action:none;user-select:none;-webkit-user-select:none}
.palette{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.palette .pg{display:flex;flex-wrap:wrap;gap:4px;padding-right:10px;margin-right:4px;border-right:1px solid var(--line)}
.palette .pg:last-child{border-right:0}
.palette .pgl{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-3);align-self:center;margin-right:2px}
.gsym{stroke:var(--ink);stroke-width:2;fill:var(--sheet-2)}
.gsym-line{stroke:var(--ink);stroke-width:2;fill:none}
.w{fill:none;stroke:var(--lo);stroke-width:2.6;stroke-linecap:round}
.w.hi{stroke:var(--hi)}
.w.sel{stroke-width:4.5}
.w.rub{stroke-dasharray:5 5;stroke:var(--ink-2)}
.whit{fill:none;stroke:transparent;stroke-width:14;cursor:pointer}
.pin{fill:var(--ink);stroke:none}
.pin.hi{fill:var(--hi)}
.pin.free{fill:var(--ink)}
.pinhit{fill:transparent;cursor:crosshair}
.cbody{fill:var(--sheet-2);stroke:var(--ink);stroke-width:2}
.csel{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:4 4}
.lt{font:600 12.5px var(--f-ui);fill:var(--ink-2);pointer-events:none}
.labcanvas .lt{font-size:14px}
.rl-analogy .lt{font-size:17px}
.lt.big{font-size:15px;fill:var(--ink)}
.lt.m{font-family:var(--f-mono);font-weight:600}
.knob{stroke:var(--ink);stroke-width:1.6}
.ledc{stroke:var(--ink);stroke-width:2}
.wave{display:block;width:100%}
.wave .wl{fill:none;stroke:var(--hi);stroke-width:2.2}
.wave .wg{stroke:var(--line);stroke-width:1}
.wave text{font:600 12.5px var(--f-ui);fill:var(--ink-2)}
.wave .wc{fill:var(--sheet-2)}
.dp{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.mem{border-collapse:collapse;font:500 var(--fs-sm) var(--f-mono)}
.mem td,.mem th{border:1px solid var(--line);padding:3px 9px;text-align:center}
.mem tr.sel td{background:var(--mark-soft);font-weight:600}
.mem th{background:var(--sheet-2)}
.plaGrid{border-collapse:collapse;font:500 var(--fs-sm) var(--f-mono)}
.plaGrid td,.plaGrid th{border:1px solid var(--line);width:1.9em;height:1.6em;text-align:center;padding:0}
.plaGrid th{background:var(--sheet-2);font-weight:600}
.plaGrid button{width:100%;height:100%;border:0;background:transparent;cursor:pointer;color:var(--ink-3);font:600 1em var(--f-mono)}
.plaGrid button.on{color:#fff;background:var(--blue)}
.plaGrid button.fix{cursor:not-allowed}
.plaGrid td.act{background:var(--mark-soft)}
.road{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:420px}
.tl{display:flex;flex-direction:column;gap:6px;align-items:center;background:var(--ink);padding:10px 12px;border-radius:8px;width:56px}
.tl i{display:block;width:26px;height:26px;border-radius:50%;background:#3A4652;opacity:.85}
.tl i.r.on{background:#FF4B55;opacity:1;box-shadow:0 0 10px #FF4B55}
.tl i.y.on{background:#FFC93C;opacity:1;box-shadow:0 0 10px #FFC93C}
.tl i.g.on{background:#3DDC84;opacity:1;box-shadow:0 0 10px #3DDC84}
.keypad{display:grid;grid-template-columns:repeat(2,3.4em);font-size:var(--fs-sm);gap:8px}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--bad);font-weight:600}
/* signal-quality scale: recovered (light blue) > minor (light orange) > damaged (orange) > lost (dark orange) */
.sev{margin-top:8px;padding:8px 12px;border-radius:8px;font-weight:600}
.sev>div+div{margin-top:4px;font-weight:500}
.sev-ok{background:var(--sev-ok-bg);color:var(--sev-ok-ink)}
.sev-low{background:var(--sev-low-bg);color:var(--sev-low-ink)}
.sev-mid{background:var(--sev-mid-bg);color:var(--sev-mid-ink)}
.sev-high{background:var(--sev-high-bg);color:var(--sev-high-ink)}
.muted{color:var(--ink-2)}
.small{font-size:var(--fs-sm)}
.sr{position:absolute;left:-9999px}
.refsec{margin-bottom:34px;max-width:900px}
.refsec h3{margin-bottom:8px}
.chk-list{list-style:none;padding:0;margin:8px 0}
.chk-list li{display:flex;gap:10px;align-items:flex-start;margin-bottom:6px;font:500 var(--fs-base)/1.45 var(--f-ui)}
.chk-list input{margin-top:.25em;accent-color:var(--blue);width:1em;height:1em}
.proj{margin-bottom:26px;border:1.5px solid var(--ink);border-radius:8px;background:var(--sheet);padding:16px 18px;max-width:920px}
.prg td{padding:8px 10px}

@media (max-width:760px){.lab .labcanvas:not([style*='max-height']){min-width:760px}}

[tabindex="-1"]:focus{outline:none}

/* ===================== theme: navy + amber on neutral ===================== */
body{background-image:none}
.iconbtn{border-width:1px;border-radius:8px}
.hl{background:linear-gradient(transparent 62%,var(--accent-soft) 62%);color:inherit;box-shadow:inset 0 -3px 0 var(--accent);background:none;padding:0 .06em}

.btn{border-width:1px;border-radius:8px;border-color:var(--ink-3)}
.btn:hover{border-color:var(--ac);color:var(--ac-ink);background:var(--ac-soft)}
.btn.pri{background:var(--ac);border-color:var(--ac);color:#fff}
.btn.pri:hover{background:var(--ac);border-color:var(--ac);color:#fff;filter:brightness(1.18)}
.btn.on{background:var(--ac-soft);border-color:var(--ac);color:var(--ac-ink)}
.seg{border-width:1px;border-color:var(--ink-3);border-radius:8px}
.seg button.on{background:var(--ac);color:#fff}
.tabs{border-bottom-width:1px;border-color:var(--line)}
.tabs button.on{border-color:var(--line);border-bottom-color:var(--sheet);border-top:3px solid var(--accent);color:var(--ac-ink)}
input[type=text],input[type=number],select,textarea{border-width:1px;border-color:var(--ink-3);border-radius:8px}
.tsw .track{border-width:1px}
.bit{border-width:1px;border-radius:6px}

.demo{border:1px solid var(--line);border-top:4px solid var(--ac);border-radius:12px;box-shadow:none}
.demo h3{color:var(--ac-ink)}
.panel,.ex,.proj{border-radius:12px}
.ex{border-left:4px solid var(--ac)}
.note{border-left-color:var(--accent);border-radius:0 8px 8px 0}
.out{border-radius:8px}
.out b{color:var(--ac-ink)}
.sec>h2{display:flex;align-items:center;gap:12px}
.sec>h2::before{content:"";flex:none;width:7px;height:26px;border-radius:4px;background:var(--accent)}
.concept h3{color:var(--ac-ink)}
.concept .formula{border-left:4px solid var(--ac)}
details.reveal summary{color:var(--ac-ink)}
details.reveal .ans{border-left-color:var(--accent)}
.sumlist li::marker{color:var(--accent-ink);font-weight:700}
table.doc th{border-bottom-color:var(--ac);color:var(--ac-ink)}
table.tt th{background:var(--ac-soft)}
.page a:not(.btn):not(.labbox):not(.qlist a):not(.chstrip a):not(.syl a){color:var(--ac-ink)}

.badge{display:inline-grid;place-items:center;width:1.9em;height:1.9em;flex:none;border-radius:.6em;background:var(--ac-soft);color:var(--ac-ink);font:700 var(--fs-sm) var(--f-display)}
.badge.big{width:1.9em;height:1.9em;border-radius:.6em;font-size:var(--fs-md);background:var(--ac);color:#fff}
.chhead{background:var(--ac-soft);border-radius:18px;padding:22px 26px 20px;border:1px solid var(--line)}
.chtop{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.chnumber{margin:0;font:600 var(--fs-sm) var(--f-ui);color:var(--ac-ink)}
.chhead .lead{margin:12px 0 16px}
.chstrip a{border-width:1px;border-color:var(--ac);color:var(--ac-ink);border-radius:99px;background:var(--sheet)}
.chstrip a:hover{background:var(--ac);color:#fff}
details.covers summary{color:var(--ac-ink)}
.donebar{border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:12px}
.gf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;padding:14px 18px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--line);border-left:6px solid var(--accent)}
.gf p{max-width:56ch;color:var(--ink-2);font-family:var(--f-ui)}
.tip-wrap{position:relative;display:inline-block}
.tip-card{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:16em;font-size:var(--fs-sm);background:var(--sheet);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(15,27,45,.22);padding:10px;z-index:30;text-align:left;opacity:0;visibility:hidden;transition:opacity .12s ease;pointer-events:none}
.tip-card img{display:block;width:100%;border-radius:7px;margin-bottom:8px}
.tip-card b{display:block;font:700 var(--fs-sm) var(--f-display);color:var(--ink);margin-bottom:3px}
.tip-card span{display:block;font:450 var(--fs-sm)/1.4 var(--f-ui);color:var(--ink-2)}
.tip-wrap:hover .tip-card,.tip-wrap:focus-within .tip-card{opacity:1;visibility:visible}
.gfcard{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:24px;padding:20px 24px;border-radius:14px;color:#fff;background:#12294A}
.gfcard h3,.gfcard p{color:#fff}
.gfcard p{font:450 var(--fs-sm)/1.35 var(--f-ui);max-width:58ch;color:#D5E0F0}
.gfcard .btn{background:var(--accent);color:#0F2A4A;border-color:var(--accent)}
.gfcard .btn:hover{background:var(--accent);color:#0F2A4A;filter:brightness(1.08)}
.hook{background:var(--accent-soft);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:14px;padding:20px 24px}
.hook .q{font:700 var(--fs-md)/1.4 var(--f-display);color:var(--ink);margin:0 0 10px}
.hook p{margin:0;max-width:none}
.hook p:not(.q){text-align:justify;text-justify:inter-word}
.hook p+p{margin-top:8px}
.out.fit{display:inline-block;width:fit-content;max-width:100%}
.conv-card{border:1px solid var(--line);border-left:6px solid var(--conv-border);border-radius:10px;padding:12px 14px;background:var(--conv-bg)}
.conv-card h5{margin:0 0 6px}
.conv-card .out,.conv-card table{background:var(--sheet)}
.conv-card p{text-align:left}
/* conversion demos: integer and fraction steps side by side; input and one-line summary on one row */
.conv-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:10px 28px;align-items:start}
.conv-top{align-items:flex-end;gap:10px 18px;margin-bottom:8px}
.conv-sum{display:flex;flex-wrap:wrap;gap:2px 28px;margin:0}
.conv-top>div:has(.conv-sum){flex:1 1 20em}
.any-steps{grid-template-columns:repeat(auto-fit,minmax(20em,1fr));margin-top:10px}
.calc-cols{gap:10px 28px;align-items:start}
.sim-cols{gap:12px 28px;align-items:start}
.tt-side{grid-template-columns:auto minmax(0,1fr);align-items:start}
@media (max-width:700px){.tt-side{grid-template-columns:minmax(0,1fr)}}
.sim-cols h4:first-child{margin-top:0!important}
.calc-cols h4{margin-top:0!important}
.conv-card .out b{color:var(--accent-ink)}
.conv-card-title{margin:0 0 10px;font:700 var(--fs-sm) var(--f-display);color:var(--ink);padding-bottom:8px;border-bottom:1px solid var(--line)}

.hero{gap:40px}
.herolab{border:1px solid var(--line);border-top:5px solid var(--accent);box-shadow:none;border-radius:16px}
.loop{gap:10px;margin-top:38px}
.loop li{border:1px solid var(--line);border-top:5px solid var(--ac);border-radius:12px;margin:0}
.loop li small{color:var(--ink-2)}
.syl{border:1px solid var(--line);border-radius:14px;overflow:hidden;border-collapse:separate;border-spacing:0}
.syl td{padding:10px 14px}
.syl tr:last-child td{border-bottom:0}
.syl .n{width:56px}
.syl a{color:var(--ink)}
.syl tr:hover td{background:var(--ac-soft)}
.syl .st{color:var(--accent-ink)}
.labs2{gap:14px}
.labbox{border:1px solid var(--line);border-left:6px solid var(--ac);border-radius:12px}
.labbox:hover{background:var(--sheet-2)}
.labbox h3{color:var(--ink)}

.qlist{gap:12px}
.qlist a{display:flex;align-items:center;gap:12px;margin:0;border:1px solid var(--line);border-radius:12px}
.qlist a:hover{border-color:var(--ac);background:var(--ac-soft)}
.qopt{border-width:1px;border-color:var(--ink-3);border-radius:10px}
.qopt:hover:not([disabled]){border-color:var(--ac);background:var(--ac-soft)}
.qopt.right{background:var(--ok-soft);border-color:var(--ok)}
.qopt.wrong{background:var(--bad-soft);border-color:var(--bad)}
.qhead{color:var(--ac-ink)}
.qwhy{border-left-color:var(--accent)}
.kcell{border-color:var(--ink-3)}
.kcell.v1{background:var(--ac-soft)}
.kcorner{border-color:var(--ink-3)}
.labcanvas{border-width:1px;border-radius:12px}
.eqbox{border-width:1px;border-left:5px solid var(--accent);border-radius:8px}
.proj{border:1px solid var(--line);border-top:4px solid var(--ac)}
.led.on{box-shadow:0 0 0 4px color-mix(in srgb,var(--led) 30%,transparent)}
[tabindex="-1"]:focus{outline:none}

/* ---- shared additions ---- */
.outline{margin-top:6px}
.outline h4{font:650 var(--fs-base) var(--f-display);margin:0 0 8px;color:var(--ac-ink,var(--blue-2))}
.outline ol{margin:0;padding-left:26px;columns:2;column-gap:32px;font:500 var(--fs-sm)/1.35 var(--f-ui)}
.outline li{break-inside:avoid;margin-bottom:3px;text-align:left}
.outline a{text-decoration:none}
.outline a:hover{text-decoration:underline}
@media (max-width:700px){.outline ol{columns:1}}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
.tgrid-fit{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;align-items:flex-start}
.tgrid-fit .tcard{width:auto}
.tcard{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tcard h4{margin:0 0 8px;font:650 var(--fs-base) var(--f-display)}
.nav .subs{max-height:none}
.nav .subgrp{margin:8px 0 2px 8px;font:600 var(--fs-sm) var(--f-ui);color:var(--ink-3)}
.nav .subs a.topic{font-size:var(--fs-sm);line-height:1.3;padding:4px 8px;font-weight:450}

/* ===================== slide deck layout ===================== */
html,body{height:100%}
body.deck-page{margin:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--paper)}
.deck-bar{display:flex;align-items:center;gap:12px;padding:8px 18px;background:var(--sheet);border-bottom:1px solid var(--line);flex:none}
.deck-bar .home-link{display:inline-flex;align-items:center;gap:7px;font:600 var(--fs-sm) var(--f-ui);text-decoration:none;color:var(--ac-ink);white-space:nowrap;padding:5px 10px 5px 6px;border-radius:9px;border:1.5px solid transparent}
.deck-bar .home-link img{display:block;border-radius:6px;flex:none}
.deck-bar .home-link:hover{border-color:var(--line);background:var(--sheet-2);text-decoration:none}
.deck-title{flex:1;min-width:0;display:flex;align-items:center;gap:10px;font:700 var(--fs-base) var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck-title .badge{width:1.7em;height:1.7em}
.deck-actions{display:flex;gap:8px;flex:none}
.deck-progress{height:4px;background:var(--line);flex:none;position:relative;z-index:20;transition:box-shadow .15s ease}
/* dark shadow under the top bar (the progress line is its bottom edge) once the slide is scrolled */
body.deck-scrolled .deck-progress{box-shadow:0 6px 16px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.35)}
.deck-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.deck{flex:1;min-height:0;position:relative}
.slide{position:absolute;inset:0;display:none;overflow:auto;padding:clamp(14px,2vw,40px) clamp(16px,4vw,96px) 28px;font-size:var(--fs-base);outline:none}
.slide.active{display:block}
.slide-inner{max-width:1120px;margin:0 auto}
.slide h2{font-size:var(--fs-lg);line-height:1.12;margin:0 0 12px;display:flex;align-items:center;gap:14px}
.slide h2::before{content:"";flex:none;width:8px;height:1em;border-radius:4px;background:var(--accent)}
.slide h3{font-size:var(--fs-md);color:var(--ac-ink);margin:0 0 8px}
.slide .kicker{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-3);margin:0 0 6px}
.slide p,.slide li{text-align:justify;text-justify:inter-word}
.slide .outline-list li,.slide .outline li{text-align:left}
.slide .concept{max-width:none;margin:0}
/* simulations on slides: the slide heading already names the demo, so drop the panel's own title and tighten spacing to fit the screen */
.slide .demo{padding:12px 16px}
.slide .demo>h3:first-child{display:none}
.slide .demo .sub{margin:0 0 8px}
.deck-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;background:var(--sheet);border-top:1px solid var(--line);flex:none}
.deck-foot .counter{font:700 var(--fs-sm) var(--f-ui);color:var(--ink-2);min-width:4.5em;text-align:center}
#slide-menu{position:fixed;top:0;right:0;bottom:0;width:min(20em,90vw);font-size:var(--fs-sm);z-index:60;background:var(--sheet);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,.14);overflow:auto;padding:18px 16px 30px}
#slide-menu[hidden]{display:none}
#slide-menu .menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#slide-menu .menu-head h3{margin:0}
#slide-menu .menu-close{flex:none;width:1.7em;height:1.7em;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:8px;background:var(--sheet);color:var(--ink);font-size:var(--fs-sm);line-height:1;cursor:pointer;padding:0}
#slide-menu .menu-close:hover{background:var(--sheet-2)}
#slide-menu ol{margin:0;padding-left:26px}
#slide-menu li{margin-bottom:2px}
#slide-menu a{display:block;padding:5px 8px;border-radius:6px;text-decoration:none;color:var(--ink);font:500 var(--fs-sm)/1.35 var(--f-ui)}
#slide-menu a:hover{background:var(--ac-soft)}
#slide-menu a.cur{background:var(--ac-soft);font-weight:700;box-shadow:inset 3px 0 0 var(--accent)}
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
body.presenting .deck-bar,body.presenting .deck-foot{display:none}

/* title slide */
.title-slide .slide-inner{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.title-slide .badge.big{font-size:var(--fs-lg);margin-bottom:18px}
.title-slide h1{font-size:var(--fs-xl);line-height:1.04;margin:0 0 16px;max-width:18ch}
.title-slide .lead{font-size:var(--fs-md);max-width:44ch;margin-bottom:26px}
.hint{font:500 var(--fs-sm) var(--f-ui);color:var(--ink-3);margin-top:22px}
kbd{font:600 var(--fs-sm) var(--f-mono);background:var(--sheet-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px}

/* outline slide */
.outline-list{columns:2;column-gap:40px;padding-left:28px;margin:0;font:500 var(--fs-base)/1.4 var(--f-ui)}
.outline-list li{break-inside:avoid;margin-bottom:4px;text-align:left}
.outline-list a{text-decoration:none;color:var(--ink)}
.outline-list a:hover{color:var(--ac-ink);text-decoration:underline}
@media (max-width:760px){.outline-list{columns:1}}

/* tables and misc slide content */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start}
.tt1-grid{grid-template-columns:minmax(160px,0.65fr) minmax(280px,1.5fr) minmax(280px,1.15fr)}
@media (max-width:900px){.tt1-grid{grid-template-columns:1fr}}
.tcard-narrow{max-width:260px}
@media (max-width:900px){.tcard-narrow{max-width:none}}
.tcard{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tcard h4{margin:0 0 8px;font:650 var(--fs-base) var(--f-display)}
.slide table.tt{font-size:var(--fs-sm)}
.gatefig{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 16px}
.gatefig-item{text-align:center}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.nextcard{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* real-life gate slides */
.rl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px;align-items:start}
@media (max-width:900px){.rl{grid-template-columns:1fr}}
.rl-scene{display:inline-block;font:700 var(--fs-sm) var(--f-ui);background:var(--accent-soft);color:var(--accent-ink);border-radius:99px;padding:3px 12px;margin-bottom:10px}
.rl-rule{margin:14px 0;padding:10px 14px;background:var(--ac-soft);border-left:5px solid var(--accent);border-radius:0 8px 8px 0;font:500 1em var(--f-ui)}
.rl-rule b{font-family:var(--f-mono)}
.rl-story h4,.rl-play h4{margin:14px 0 6px;font:650 var(--fs-base) var(--f-display);color:var(--ac-ink)}
.rl-story ul{margin:0;padding-left:22px}
.rl-inputs{display:grid;gap:6px;margin-bottom:0}
.rl-toggle{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:6px 10px;border-radius:8px;border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink);font:600 var(--fs-sm) var(--f-ui);cursor:pointer}
.rl-toggle .rl-state{font:500 var(--fs-sm) var(--f-ui);color:var(--ink-2)}
.rl-toggle .rl-state b{font-family:var(--f-mono);color:var(--ink)}
.rl-toggle.on{background:var(--ac);border-color:var(--ac);color:#fff}
.rl-toggle.on .rl-state,.rl-toggle.on .rl-state b{color:#fff}
.rl-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.rl-row .rl-inputs{flex:0 0 auto;width:auto;min-width:7em;max-width:10em}
.rl-row .rl-gate{flex:0 0 auto;margin:0;padding:0}
.rl-row .rl-out{flex:1 1 160px;margin-bottom:0}
.rl-gate{padding:4px 0;overflow-x:auto}
.rl-out{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;background:var(--sheet-2);border:1px solid var(--line);margin-bottom:14px}
.led.big{width:1.4em;height:1.4em}
.rl-outname{font:600 var(--fs-sm) var(--f-ui);color:var(--ink-3)}
.rl-outstate{font:700 var(--fs-sm) var(--f-ui)}
.rl-outstate b{font-family:var(--f-mono)}
.rl-analogy{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.rl-analogy h4{margin:0 0 6px;font:650 var(--fs-base) var(--f-display);color:var(--ac-ink)}
.gatesum td:first-child{font-weight:700}

/* topics index */
body.index-page{background:var(--paper)}
.wrap{max-width:1080px;margin:0 auto;padding:36px 22px 80px}
.index-hero{padding:14px 0 26px}
.index-hero h1{margin-bottom:12px}
.tlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tlist a{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-left:6px solid var(--ac);border-radius:12px;background:var(--sheet);text-decoration:none;color:var(--ink);height:100%}
.tlist a:hover{background:var(--ac-soft)}
.tlist .badge{flex:none}
.tlist b{display:block;font:700 var(--fs-base)/1.25 var(--f-display)}
.tlist span.d{display:block;font:450 var(--fs-sm)/1.4 var(--f-ui);color:var(--ink-2);margin-top:3px}
.tlist span.m{display:block;font:600 var(--fs-sm) var(--f-ui);color:var(--accent-ink);margin-top:6px}
.toolbar-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.page-simple{max-width:1000px;margin:0 auto;padding:28px 22px 80px}
.page-simple .topnav{display:flex;gap:14px;align-items:center;margin-bottom:22px;font:600 var(--fs-sm) var(--f-ui)}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.site-header .topnav{margin-bottom:0}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{display:block;height:38px;width:auto}
@media (max-width:560px){.site-header{gap:10px}.brand img{height:32px}}
.gfcard{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:20px 0;padding:20px 24px;border-radius:14px;color:#fff;background:#12294A}
.gfcard h3,.gfcard p{color:#fff;margin:0}
.gfcard p{font:450 var(--fs-sm)/1.35 var(--f-ui);max-width:58ch;color:#D5E0F0;margin-top:4px}
.gfcard .btn{background:var(--accent);color:#0F2A4A;border-color:var(--accent)}
.gf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding:12px 16px;border-radius:12px;background:var(--accent-soft);border:1px solid var(--line);border-left:6px solid var(--accent)}
.gf p{max-width:56ch;color:var(--ink-2);font-family:var(--f-ui);margin:2px 0 0}

@media (max-width:640px){
  .deck-bar{gap:8px;padding:6px 10px}
  .deck-title span:last-child{display:none}
  .deck-bar .home-link{padding:5px}
  .deck-bar .home-link span{display:none}
  .deck-actions .btn span{display:none}
  .deck-actions .btn{padding:8px}
  .deck-foot{padding:8px 10px}
  .deck-foot .btn{padding:9px 12px}
  .slide{padding-bottom:28px}
}

/* ===================== slide annotation layer ===================== */
#annoOverlay{touch-action:none;z-index:5}
body.anno-drawing{-webkit-user-select:none;user-select:none}
.anno-wrap{position:fixed;right:16px;bottom:84px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.anno-toggle{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.anno-toggle .btn-ic{width:20px;height:20px}
.anno-toggle[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#0F2A4A}
.anno-bar{display:none;flex-direction:column;gap:8px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--sheet-2);box-shadow:0 6px 22px rgba(0,0,0,.22);width:max-content;max-width:92vw}
.anno-wrap.open .anno-bar{display:flex}
.anno-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.anno-row.anno-justify{justify-content:space-between}
.anno-row.anno-nowrap{flex-wrap:nowrap}
.anno-tool{width:32px;height:32px;border-radius:8px;border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink);display:grid;place-items:center;cursor:pointer;flex:none}
.anno-tool .btn-ic{width:15px;height:15px}
.anno-tool.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.anno-clear{width:auto;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 8px;color:var(--bad);white-space:nowrap;flex:none}
.anno-clear span{font:600 var(--fs-sm) var(--f-ui)}
.anno-colors{gap:10px}
.anno-swatches{display:flex;align-items:center;gap:4px;flex:none}
.anno-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--sheet);outline:1.5px solid var(--line);background:var(--sw);cursor:pointer;padding:0;flex:none}
.anno-swatch.on{outline:2px solid var(--ink)}
.anno-swatch-custom{width:20px;height:20px;border-radius:50%;border:none;padding:0;background:none;cursor:pointer;flex:none}
.anno-hist-wrap{display:flex;gap:4px;flex:none}
.anno-hist{width:28px;height:28px}
.anno-hist .btn-ic{width:14px;height:14px}
.anno-hist:disabled{opacity:.35;cursor:default}
.anno-fade{display:flex;align-items:center;gap:4px;font:600 var(--fs-sm) var(--f-ui);color:var(--ink-2);white-space:nowrap;flex:none}
.anno-fade-input{width:2.6em;padding:3px 5px;font:600 var(--fs-sm) var(--f-mono);-moz-appearance:textfield}
.anno-fade-input::-webkit-outer-spin-button,.anno-fade-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.anno-stroke{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.anno-temp{filter:drop-shadow(0 0 5px var(--glow, currentColor))}
.anno-shape{stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .anno-wrap{right:10px;bottom:70px}
  .anno-bar{max-width:88vw}
}
/* ===================== annotation: Page button and scratch page ===================== */
.anno-bar.anno-has-page{width:max-content;max-width:94vw}
.anno-wrap.open .anno-bar.anno-has-page{flex-direction:row;align-items:stretch;gap:10px}
.anno-rows{display:flex;flex-direction:column;gap:8px;min-width:0}
.anno-page-btn{flex:none;width:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:10px;border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink);cursor:pointer;padding:4px 2px;font:700 13px var(--f-ui, var(--f-accessible, system-ui))}
.anno-page-btn .btn-ic{width:24px;height:24px}
.anno-page-btn:hover{border-color:var(--accent)}
.anno-page-btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.anno-page{position:fixed;z-index:58;top:62px;left:24px;right:24px;bottom:84px;display:none;flex-direction:column;background:var(--sheet);border:1.5px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.35);overflow:hidden}
.anno-page.open{display:flex}
.anno-page-head{flex:none;display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;background:var(--sheet-2);border-bottom:1px solid var(--line);font:600 15px var(--f-ui, var(--f-accessible, system-ui));color:var(--ink)}
.anno-page-head b{font-size:16px}
.anno-page-hint{flex:1;min-width:0;color:var(--ink-3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anno-page-close{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;border:1.5px solid var(--ink-3);background:var(--sheet);color:var(--ink);font-size:16px;cursor:pointer}
.anno-page-close:hover{border-color:var(--accent)}
.anno-page-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--sheet)}
.anno-page-svg{display:block;touch-action:none}
body.anno-drawing .anno-page-svg{touch-action:none}
@media (max-width:640px){
  .anno-page{top:52px;left:8px;right:8px;bottom:70px}
  .anno-page-hint{display:none}
  .anno-page-btn{width:46px}
}
/* ---- topic illustrations (js/art.js) ---- */
.ta-svg{display:block;width:100%;height:auto;overflow:visible}
.ta-bg{fill:var(--ac-soft)}
.ta-card{fill:var(--sheet);stroke:var(--ink);stroke-width:2.5}
.ta-ac{fill:var(--ac)}.ta-acc{fill:var(--accent)}.ta-ok{fill:var(--ok)}.ta-soft1{fill:var(--ac-soft);stroke:var(--ink);stroke-width:2.5}
.ta-soft2{fill:var(--accent-soft);stroke:var(--ink);stroke-width:2.5}
.ta-paper{fill:var(--sheet)}.ta-faint{fill:var(--line)}.ta-fill-ink{fill:var(--ink)}
.ta-coffee{fill:var(--ink);opacity:.85}
.ta-line,.ta-line-thin,.ta-line-acc,.ta-dash,.ta-steam,.ta-ring,.ta-stroke-acc,.ta-shackle,.ta-handle,.ta-cable,.ta-vein{fill:none;stroke-linecap:round;stroke-linejoin:round}
.ta-line{stroke:var(--ink);stroke-width:3}.ta-line-thin{stroke:var(--ink);stroke-width:2;opacity:.6}
.ta-line-acc{stroke:var(--accent);stroke-width:5}.ta-dash{stroke:var(--ink-2);stroke-width:3;stroke-dasharray:8 7}
.ta-steam{stroke:var(--ac);stroke-width:6}.ta-ring{stroke:var(--ac);stroke-width:18}
.ta-stroke-acc{stroke:var(--accent);stroke-width:14}.ta-shackle{stroke:var(--ink-2);stroke-width:18}
.ta-handle{stroke:var(--ink);stroke-width:12}.ta-cable{stroke:var(--ink-2);stroke-width:6}
.ta-lens{fill:var(--sheet);fill-opacity:.55;stroke:var(--ink);stroke-width:6}
.ta-folder{fill:var(--accent-soft);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.ta-warn{fill:var(--accent);stroke:var(--accent);stroke-width:22;stroke-linejoin:round}
.ta-ok-line{fill:var(--ok-soft);stroke:var(--ok);stroke-width:4;stroke-linejoin:round}
.ta-ok-fill{fill:var(--ok-soft);stroke:var(--ink);stroke-width:2.5}
.ta-strand-ac,.ta-strand-acc,.ta-strand-ok{fill:none;stroke-width:11;stroke-linecap:round}
.ta-strand-ac{stroke:var(--ac)}.ta-strand-acc{stroke:var(--accent)}.ta-strand-ok{stroke:var(--ok)}
.ta-tip-ac{fill:var(--ac)}.ta-tip-acc{fill:var(--accent)}.ta-tip-ok{fill:var(--ok)}
.ta-bar{fill:var(--sheet-2);stroke:var(--ink);stroke-width:2.5}
.ta-dot1{fill:#EF6B5E}.ta-dot2{fill:#F4BF4F}.ta-dot3{fill:#61C454}
.ta-leaf{fill:var(--ok)}.ta-vein{stroke:var(--sheet);stroke-width:3}
.ta-t{font:700 22px var(--f-head, var(--f-display, var(--f-ui, sans-serif)));fill:var(--ink);text-anchor:middle}
.ta-on-ac{fill:#fff}
.ta-m{font:600 20px var(--f-mono);fill:var(--ink);text-anchor:middle}
.ta-big{font-size:28px}
.ta-s{font:600 16px var(--f-head, var(--f-display, var(--f-ui, sans-serif)));fill:var(--ink-2);text-anchor:middle}
.ta-quote{font:700 120px var(--f-head, var(--f-display, var(--f-ui, sans-serif)));fill:var(--accent);text-anchor:middle}
/* title slide: text on the left, illustration on the right */
.title-slide .slide-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,400px);column-gap:48px;align-content:center}
.title-slide .slide-inner>*{grid-column:1}
.title-slide .slide-inner>.topic-art{grid-column:2;grid-row:1 / span 20;align-self:center;display:block}
@media (max-width:860px){
  .title-slide .slide-inner{grid-template-columns:1fr}
  .title-slide .slide-inner>.topic-art{grid-column:1;grid-row:auto;width:min(220px,60vw);margin-bottom:8px}
}
/* topic list: small illustration on each card */
.tlist a>span:not(.badge):not(.tart){flex:1;min-width:0}
.tlist .tart{flex:none;width:84px;align-self:center;margin-left:4px}
.ta-ring-acc{fill:none;stroke:var(--accent);stroke-width:6}
.ta-ring-thin{fill:none;stroke:var(--ink);stroke-width:2.5}
.ta-stroke-acc-thin{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round}
.ta-check{fill:none;stroke:var(--ok);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.ta-check-thin{fill:none;stroke:var(--ok);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ta-none{display:none}
.ta-outline{stroke:var(--ink);stroke-width:3}
.ta-cursor{fill:var(--ink);stroke:var(--sheet);stroke-width:3;stroke-linejoin:round}
.ta-svg .ta-on-ac{fill:#fff}

/* ===================== Shared projector type scale =====================
   The same block ends the stylesheet of every course site (CSE-201, CSE-202, CSE-203, CSE-308, CSE-309),
   so slides read the same size in every course. It applies to slide decks only (body.deck-page) and is
   sized for a projector seen from the back of a classroom:
                     1366 px wide     1920 px wide
     small text         18 px            22 px     captions, labels, tables, buttons, tool text
     code               18 px            23 px
     body text          22 px            30 px     bullets, paragraphs, quiz and example questions
     h3                 24 px            33 px
     slide title h2     48 px            54 px
     title-slide h1     74 px            80 px
   Nothing on a slide is smaller than the small size. Change the six values here, in every course. */
body.deck-page{
  --pj-sm:clamp(18px,1.15vw,22px);
  --pj-code:clamp(18px,1.2vw,23px);
  --pj-body:clamp(22px,1.6vw,30px);
  --pj-h3:clamp(24px,1.75vw,33px);
  --pj-h2:clamp(32px,3.5vw,54px);
  --pj-h1:clamp(36px,5.4vw,80px);
}
body.deck-page .slide-inner{max-width:min(1440px,100%)}
body.deck-page .slide{font-size:var(--pj-body);line-height:1.45;padding-top:clamp(14px,2.2vw,34px)}
/* tighter vertical rhythm than the reading pages, so the larger text still fits on one screen */
body.deck-page .slide :where(p,li,.callout,.ans){line-height:1.45}
body.deck-page .slide :where(li){margin-bottom:.12em}
body.deck-page .slide h2{margin-bottom:.4em!important}
/* body text */
body.deck-page .slide :where(p,li,dd,dt,blockquote,.callout,.note,.qq,.qtext,.qopt,.ans,.lead,.outline-list a,.res b,.concept){font-size:var(--pj-body)!important}
body.deck-page .slide :where(.title-slide .lead,.hook .q){font-size:calc(var(--pj-body) * 1.15)!important}
/* small text */
body.deck-page .slide :where(.kicker,figcaption,.hint,.small,.muted,label,.fld,summary,.btn,.seg button,.tabs button,input,select,textarea,
  table th,table td,.out,.verdict,.qhead,.qwhy,.gwhy,.kv small,.kv b,.console-h,.res span,.res small,.lec,.co-h,.co-note,.src-note,.trace-note,.trace-title,.badge,.pill,.flow span,.tsw,.os-tag,.os-count){font-size:var(--pj-sm)!important}
body.deck-page .slide :where(kbd){font-size:.85em!important}
/* columns inside a column (e.g. strengths | weaknesses beside a figure) are narrow: step down to 85% */
body.deck-page .slide .cols :where(.vs,.cols,.tgrid) :where(p,li,h4){font-size:calc(var(--pj-body) * .85)!important}
/* interactive tools: their own text is small, their questions are body text */
body.deck-page .slide .demo :where(p,li,dd,.sub,h4,td,th){font-size:var(--pj-sm)!important}
body.deck-page .slide .demo :where(.gq,.qtext,.qopt){font-size:var(--pj-body)!important}
/* code */
body.deck-page .slide :where(pre.code,.trace-code,.console-body,.cl,.os-code){font-size:var(--pj-code)!important}
body.deck-page .slide :where(p,li,td,.callout) code{font-size:.9em!important}
/* headings */
body.deck-page .slide h2{font-size:var(--pj-h2)!important}
body.deck-page .slide :where(h3){font-size:var(--pj-h3)!important}
body.deck-page .slide :where(h4){font-size:var(--pj-body)!important}
body.deck-page .title-slide h1{font-size:var(--pj-h1)!important}

/* ===== projector layout (shared by all course sites) =====
   Interactive boxes show their controls first, right under the title; figures that used to sit
   in a half-width column are stacked full width (see _tools/paginate) and capped in height. */
.demo{display:flex;flex-direction:column}
.demo>*{min-width:0}
.demo>h3,.demo>.sub{order:-3}
.demo>.row:has(button,select),.demo>.row.os-ctl{order:-2;margin-bottom:12px}
.demo>label.fld,.demo>input,.demo>.bits{align-self:flex-start}
.trace>.trace-ctl{justify-content:flex-start;margin:0 0 10px}
.slide .trace-code{max-height:min(36vh,385px)}
.lab>.lab-ctl{margin:0 0 8px}
.slide-inner>figure.fig svg.dg{max-height:min(60vh,640px)}
/* long code lines wrap (with a hanging indent past the line number) instead of scrolling sideways */
.slide pre.code .cl{white-space:pre-wrap;overflow-wrap:anywhere;padding-left:4.2em;text-indent:-4.2em}
.slide pre.code .cl .cn{text-indent:0}
.slide pre.code.nonum .cl{padding-left:14px;text-indent:0}
/* "Explore further" strip: links to Inside the Computer and Gate Forge (see _tools/applinks) */
.applinks{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:20px 0 0;padding-top:12px;border-top:1px dashed var(--line)}
.applinks .al-h{font-weight:700;font-size:15px;font-family:var(--f-head,var(--f-ui,system-ui,sans-serif));color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.applinks .al{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);text-decoration:none;font-weight:600;font-size:17px;line-height:1.25;font-family:var(--f-head,var(--f-ui,system-ui,sans-serif))}
.applinks .al:hover,.applinks .al:focus-visible{border-color:var(--ac);color:var(--ac)}
.applinks .al-app{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;border-radius:999px;padding:3px 8px;white-space:nowrap}
.applinks .al-itc .al-app{background:#2557c7}
.applinks .al-gf .al-app{background:#0d7a5f}
.applinks .al-n{font-size:13.5px;font-weight:500;color:var(--ink-3)}
/* developer section at the bottom of each home page (see _tools/devfooter) */
.devcard{margin:48px 0 8px;padding:24px 26px;border:1px solid var(--line);border-radius:14px;background:var(--sheet)}
.dev-top{display:flex;gap:22px;align-items:flex-start}
.dev-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--ac)}
.dev-k{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 2px}
.devcard h2{font-size:26px;line-height:1.15;margin:0 0 4px}
.dev-role{margin:0 0 6px;color:var(--ink-2);font-weight:600}
.dev-about{margin:0 0 12px;color:var(--ink-2);max-width:72ch}
.dev-links{display:flex;flex-wrap:wrap;gap:8px}
.dev-links a{padding:5px 13px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink)}
.dev-links a:hover,.dev-links a:focus-visible{border-color:var(--ac);color:var(--ac)}
.dev-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.devcard h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 10px}
.devcard ul{list-style:none;padding:0;margin:0}
.dev-apps li{margin-bottom:10px}.dev-apps span{display:block;color:var(--ink-2);font-size:14.5px}
.dev-courses li{margin-bottom:6px}
.dev-here{color:var(--ink-2)}.dev-tag{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--ac);border-radius:999px;padding:2px 8px;margin-left:4px}
.dev-note{margin:18px 0 0;font-size:14px;color:var(--ink-3)}
.devcard p,.devcard li{text-align:left}
@media (max-width:720px){.dev-cols{grid-template-columns:1fr}.dev-top{flex-direction:column;gap:14px}.devcard{padding:20px 18px}}
/* ===== end projector layout ===== */