@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/bricolage-grotesque-700.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/space-mono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono';
  font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-mono-700.woff2') format('woff2');
}
@font-face{
  font-family:'Spline Sans';
  font-style:normal; font-weight:400 600; font-display:swap;
  src:url('../fonts/spline-sans-var.woff2') format('woff2');
}

:root{
  --paper:#E4EAF0;
  --paper-2:#D5DEE7;
  --ink:#0F2436;
  --ink-soft:#4A6076;
  --grid:#B7C6D4;
  --charge:#F0871E;
  --charge-dim:#7C97AE;
  --hot:#D93F2B;
  --cool:#2E7A8C;
  --rule:#9FB2C4;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:28px 28px;
  color:var(--ink);
  font-family:"Spline Sans",system-ui,sans-serif;
  line-height:1.5;
  padding:20px 16px 56px;
}
.sheet{
  max-width:1080px;margin:0 auto;
  background:rgba(240,244,248,.86);
  border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 rgba(15,36,54,.12);
  position:relative;
}
header{
  padding:20px 24px 16px;
  border-bottom:1.5px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;
}
h1{
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;font-size:clamp(24px,4.4vw,38px);
  letter-spacing:-.02em;margin:0;line-height:1;
}
.eyebrow{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px;
}
header p.sub{margin:0;max-width:34ch;font-size:14px;color:var(--ink-soft)}
.header-actions{display:flex;gap:8px;flex-wrap:wrap}
.stage{padding:8px 12px 0}
svg{width:100%;height:auto;display:block;touch-action:none}
.wire{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.comp{fill:#F7FAFC;stroke:var(--ink);stroke-width:2.4}
.lbl{font-family:"Space Mono",monospace;font-size:14px;fill:var(--ink)}
.lbl.small{font-size:12px;fill:var(--ink-soft)}
.lbl.val{font-weight:700}
.node{fill:var(--ink)}
.panel{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1.5px solid var(--ink);
}
.controls{padding:18px 24px;border-right:1.5px solid var(--ink)}
.readout{padding:18px 24px}
h2{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;font-weight:400;
}
.ctl{margin-bottom:16px}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.ctl-top b{font-family:"Space Mono",monospace;font-size:14px}
input[type=range]{
  width:100%;margin:8px 0 0;accent-color:var(--charge);height:28px;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--rule);border-radius:3px}
input[type=range]::-moz-range-track{height:6px;background:var(--rule);border-radius:3px}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;margin-top:-11px;
  width:28px;height:28px;border-radius:50%;
  background:var(--charge);border:1.5px solid var(--ink);
}
input[type=range]::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;
  background:var(--charge);border:1.5px solid var(--ink);
}
input[type=range]:focus-visible{outline:2.5px solid var(--hot);outline-offset:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
td{padding:6px 0;border-bottom:1px dotted var(--rule)}
td.n{font-family:"Space Mono",monospace;text-align:right;font-weight:700}
.budget{padding:16px 24px;border-top:1.5px solid var(--ink);transition:box-shadow .3s ease}
.bar{display:flex;height:34px;border:1.5px solid var(--ink);overflow:hidden}
.bar div{
  display:flex;align-items:center;justify-content:center;
  font-family:"Space Mono",monospace;font-size:12px;font-weight:700;
  color:#F7FAFC;transition:flex-grow .25s ease;white-space:nowrap;overflow:hidden;
}
.b1{background:var(--hot);flex-grow:1}
.b2{background:var(--cool);flex-grow:1}
.budget p{margin:8px 0 0;font-size:13px;color:var(--ink-soft)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
button{
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  padding:11px 14px;min-height:44px;cursor:pointer;
}
button:hover{background:var(--ink);color:var(--paper)}
button:focus-visible{outline:2.5px solid var(--hot);outline-offset:2px}
button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.note{font-size:13px;color:var(--ink-soft);margin:10px 0 0}

/* break-the-circuit panel */
.breakbox{padding:18px 24px;border-top:1.5px solid var(--ink)}
.breakbox button[aria-pressed=true]{background:var(--hot);border-color:var(--hot);color:#F7FAFC}

/* switches drawn on the circuit */
.switch-contact{fill:var(--ink)}
.switch-lever{stroke:var(--hot);stroke-width:3;stroke-linecap:round;transition:transform .2s ease}
.switch-hit{fill:transparent;cursor:pointer}
.switch-hit:focus-visible{outline:2.5px solid var(--hot);outline-offset:2px}

/* guided walkthrough */
svg.guide-dim .wire,
svg.guide-dim .comp,
svg.guide-dim .lbl,
svg.guide-dim .node{opacity:.16;transition:opacity .35s ease}
svg.guide-dim .lit,
svg.guide-dim .lit *{opacity:1}
.lit-external{outline:2.5px dashed var(--hot);outline-offset:6px;transition:outline-color .3s ease}

.guide-panel{
  position:sticky;bottom:12px;
  margin:16px 24px 0;
  background:var(--ink);color:#F7FAFC;
  border:1.5px solid var(--ink);
  box-shadow:4px 4px 0 rgba(15,36,54,.25);
  padding:16px 18px;
}
.guide-panel[hidden]{display:none}
.guide-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.guide-step-num{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--charge)}
.guide-panel h3{
  font-family:"Bricolage Grotesque",sans-serif;font-size:19px;margin:6px 0 8px;line-height:1.15;
}
.guide-panel p{margin:0 0 14px;font-size:14px;color:#CBD8E4}
.guide-nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.guide-nav button{border-color:#F7FAFC;color:#F7FAFC}
.guide-nav button:hover{background:#F7FAFC;color:var(--ink)}
.guide-nav button:disabled{opacity:.35;cursor:not-allowed}
.guide-close{margin-left:auto;border-color:#F7FAFC;color:#F7FAFC}

@media (max-width:720px){
  .panel{grid-template-columns:1fr}
  .controls{border-right:0;border-bottom:1.5px solid var(--ink)}
}

/* ---- course chrome: breadcrumb, lesson prev/next nav ------------- */
.crumb{
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;
}
.crumb:hover{color:var(--ink)}
.crumb:focus-visible{outline:2.5px solid var(--hot);outline-offset:2px}

.lesson-nav{
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:18px 24px;border-top:1.5px solid var(--ink);
}
.lesson-nav a{
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);
  padding:11px 14px;min-height:44px;display:inline-flex;align-items:center;gap:8px;
}
.lesson-nav a:hover{background:var(--ink);color:var(--paper)}
.lesson-nav a:focus-visible{outline:2.5px solid var(--hot);outline-offset:2px}
.lesson-nav a.next{margin-left:auto}

/* ---- lesson prose ------------------------------------------------- */
.prose{padding:22px 24px;max-width:68ch}
.prose h2.section{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:22px;
  margin:34px 0 12px;letter-spacing:-.01em;text-transform:none;color:var(--ink);
}
.prose h2.section:first-child{margin-top:0}
.prose p{margin:0 0 14px;font-size:15px}
.prose ul, .prose ol{margin:0 0 14px;padding-left:22px;font-size:15px}
.prose li{margin-bottom:6px}
.prose strong{color:var(--ink)}
.prose .formula{
  font-family:"Space Mono",monospace;font-size:15px;font-weight:700;
  background:#F7FAFC;border:1.5px solid var(--ink);
  padding:10px 14px;display:inline-block;margin:4px 0 14px;
}

.callout{
  border:1.5px solid var(--ink);border-left:6px solid var(--charge);
  background:#F7FAFC;padding:14px 16px;margin:0 0 18px;font-size:14px;
}
.callout .callout-label{
  display:block;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--charge);margin-bottom:6px;
}
.callout.think{border-left-color:var(--cool)}
.callout.think .callout-label{color:var(--cool)}

.worked{
  border:1.5px solid var(--ink);background:#F7FAFC;padding:16px 18px;margin:0 0 18px;
}
.worked .callout-label{
  display:block;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;
}
.worked table{margin-top:6px}

/* mini interactive widgets embedded in lesson prose */
.mini-widget{
  border:1.5px solid var(--ink);background:rgba(240,244,248,.86);
  margin:0 0 20px;box-shadow:4px 4px 0 rgba(15,36,54,.1);
}
.mini-stage{padding:14px 18px 4px}
.mini-ctl{padding:12px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.mini-ctl{grid-template-columns:1fr}}
.mini-readouts{
  padding:0 18px 16px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-family:"Space Mono",monospace;font-size:13px;
}
.mini-readouts b{font-weight:700}

/* ---- course home tile grid ---------------------------------------- */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0}
.tile{
  border-top:1.5px solid var(--ink);border-right:1.5px solid var(--ink);
  padding:20px 22px;text-decoration:none;color:var(--ink);
  display:flex;flex-direction:column;gap:8px;min-height:150px;
}
.tile:last-child, .tile:nth-child(2n){border-right:1.5px solid var(--ink)}
.tile:hover{background:rgba(240,135,30,.08)}
.tile:focus-visible{outline:2.5px solid var(--hot);outline-offset:-3px}
.tile .tile-num{
  font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--charge);text-transform:uppercase;
}
.tile h3{
  font-family:"Bricolage Grotesque",sans-serif;font-size:19px;margin:0;
  line-height:1.15;font-weight:700;
}
.tile p{margin:0;font-size:13px;color:var(--ink-soft);flex-grow:1}
.tile .tile-go{font-family:"Space Mono",monospace;font-size:12px;color:var(--ink-soft)}
.tile.lab{background:rgba(217,63,43,.06)}
.tile.lab .tile-num{color:var(--hot)}
.tile.practice{background:rgba(46,122,140,.06)}
.tile.practice .tile-num{color:var(--cool)}

/* ---- practice questions (native <details> reveal) ------------------ */
.qlist{padding:8px 24px 24px}
.q{border:1.5px solid var(--ink);background:#F7FAFC;margin:0 0 16px}
.q > summary{
  list-style:none;cursor:pointer;padding:14px 16px;
  display:flex;gap:12px;align-items:baseline;font-size:14px;
}
.q > summary::-webkit-details-marker{display:none}
.q > summary .qnum{
  font-family:"Space Mono",monospace;font-weight:700;color:var(--charge);flex-shrink:0;
}
.q > summary .qtag{
  margin-left:auto;font-family:"Space Mono",monospace;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--rule);padding:2px 8px;flex-shrink:0;
}
.q > summary::after{
  content:"show answer";margin-left:8px;font-family:"Space Mono",monospace;
  font-size:11px;color:var(--ink-soft);text-decoration:underline;flex-shrink:0;
}
.q[open] > summary::after{content:"hide answer"}
.q > summary:focus-visible{outline:2.5px solid var(--hot);outline-offset:-2px}
.q .a{padding:0 16px 16px;border-top:1.5px dotted var(--rule);margin-top:2px}
.q .a p{margin:12px 0 8px;font-size:14px}
.q .a .ans{
  font-family:"Space Mono",monospace;font-weight:700;background:var(--ink);
  color:var(--paper);display:inline-block;padding:6px 10px;margin-top:6px;
}