:root{
  --blue:#0B5C9E;--blue2:#1E9BD7;--orange:#EF7D1A;--orange-ink:#A84F00;
  --bg:#F3F6FA;--card:#fff;--ink:#0F172A;--muted:#475569;--line:#DCE3EC;
  --green:#127A3E;--green-bg:#E7F6EC;--red:#C8261B;--red-bg:#FDECEA;--probe-red:#D92D20;--probe-black:#1F2937;
  --radius:16px;--shadow:0 1px 2px rgba(15,23,42,.06),0 6px 20px rgba(15,23,42,.06);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 var(--font)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;border-radius:8px;z-index:10}
.skip:focus{left:8px}
[hidden]{display:none!important}

/* Header */
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 20px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px;width:auto;display:block}
.lab{font-weight:700;color:var(--blue);border-left:1px solid var(--line);padding-left:10px}
.titles{flex:1;min-width:220px}
.eyebrow{margin:0;font-size:12px;color:var(--muted);letter-spacing:.02em}
h1{margin:0;font-size:19px;line-height:1.25}
.badge{background:#FFF1E3;color:var(--orange-ink);border:1px solid #F6C08C;font-weight:700;font-size:12px;padding:5px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.seg{display:inline-flex;background:#E8EDF4;border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;padding:6px 12px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--muted);min-height:34px}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* Lesson path */
.subbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 20px 0}
.subbar .path,.subbar .views{padding:0}
.subbar .path{flex:1 1 420px;min-width:0}
.path{padding:10px 20px 0}
.path ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.path li{position:relative;flex:0 0 auto;display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 10px 4px 4px;font-size:12.5px;color:var(--muted)}
.path li .n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#E8EDF4;font-weight:700;font-size:12px}
.path li.current{border-color:var(--blue);color:var(--ink);box-shadow:0 0 0 2px rgba(11,92,158,.15)}
.path li.current .n{background:var(--blue);color:#fff}
.path li.locked{opacity:.75}
.path li svg{width:14px;height:14px}
.views{padding:10px 20px 0}
.seg-wide button{padding:6px 16px}

main{padding:12px 20px 20px}

/* SimLayout: reusable for every sim */
.sim-layout{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "graphs" "controls"}
.sl-stage-wrap{grid-area:stage;display:flex;flex-direction:column;gap:10px;min-width:0}
.sl-stage{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;position:relative}
.sl-playback{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px 10px}
.sl-graphs{grid-area:graphs;display:flex;flex-direction:column;gap:14px;min-width:0}
.sl-controls{grid-area:controls;display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:1024px){
  .sim-layout{grid-template-columns:minmax(0,1fr) minmax(220px,260px) minmax(300px,340px);grid-template-areas:"stage graphs controls";align-items:stretch}
  .sl-graphs>.card{flex:1}
  /* controls scroll inside the stage height so nothing pushes the stage row */
  .sl-controls{height:0;min-height:100%;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
}
@media (min-width:1400px){
  .sim-layout{grid-template-columns:minmax(0,1fr) 300px 380px}
}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.card h2,.card h3{margin:0 0 8px;font-size:15px}
.card .sub{margin:-4px 0 8px;color:var(--muted);font-size:12.5px}
.muted{color:var(--muted)}

/* Stage */
.stage-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 0;gap:8px;flex-wrap:wrap}
.stage-head h2{margin:0;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stage-head .row .btn{min-width:44px}
.hint{flex:1 1 170px;margin:0;font-size:13px;color:var(--blue);font-weight:600;min-height:1.2em}
.schem-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:0 14px 8px}
.schem-foot h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.schem-foot .muted{font-size:12px;margin-left:auto}
svg.bench{display:block;width:100%;height:auto;touch-action:manipulation}
.schem-wrap{border-top:1px solid var(--line);background:linear-gradient(#FBFCFE,#F5F8FC)}
.schem-wrap .stage-head{padding-top:6px}
svg.schem{display:block;width:100%;height:auto}
.schem-cap{margin:0;font:600 13px var(--mono);color:var(--ink)}
.term{cursor:pointer}
.term .ring{fill:#fff;stroke:#8A6D1D;stroke-width:2}
.term .hit{fill:transparent}
.term:hover .ring,.term:focus .ring{stroke:var(--orange);stroke-width:3}
.term:focus{outline:none}
.term:focus-visible .focus{stroke:var(--orange);stroke-width:3;fill:none}
.term .focus{fill:none;stroke:none}
.armed .term .ring{animation:pulse 1.2s ease-in-out infinite}
.term .tlabel{font:700 10px var(--font);fill:#334155;pointer-events:none}
@keyframes pulse{50%{stroke:var(--orange);stroke-width:4}}
.probe-tip{cursor:pointer}
.probe-tip:focus{outline:none}
.probe-tip:focus-visible .focus{stroke:var(--orange);stroke-width:3}
.probe-tip.selected .halo{opacity:1}
.probe-tip .halo{opacity:0;transition:opacity .2s}
.dots{stroke-dasharray:0 16;stroke-linecap:round}
.sw-click{cursor:pointer}
@media (prefers-reduced-motion:reduce){.armed .term .ring{animation:none;stroke:var(--orange)}}

/* Playback */
.pb-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 11px;cursor:pointer;font-weight:600;min-height:40px}
.pb-btn:hover{border-color:var(--blue2)}
.pb-btn[aria-pressed="true"]{background:#EAF3FB;border-color:var(--blue);color:var(--blue)}
.pb-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.pb-btn:disabled{opacity:.5;cursor:not-allowed}
.pb-step{flex:1;min-width:120px;text-align:center;font-weight:600;font-size:13px;color:var(--muted)}
.pb-btn svg{width:16px;height:16px}

/* Graphs */
canvas.graph{display:block;width:100%;height:170px}
.legend{display:flex;gap:12px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.key{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
svg.bars{display:block;width:100%;height:auto}

/* Controls */
.lcd{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;background:#D9E8D2;border:2px solid #9DB894;border-radius:10px;padding:8px 12px;font:700 30px var(--mono);color:#14301A;min-height:58px}
.lcd small{font-size:16px}
.lcd.warn{background:#F9E3DE;border-color:#E2A397;color:#6E1A10}
.meter-where{margin:6px 0 0;font-size:13px;color:var(--muted);min-height:1.3em}
.dial{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.dial button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 0;font-weight:700;cursor:pointer;min-height:44px}
.dial button[aria-checked="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.probes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.probes button{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px;cursor:pointer;text-align:left;min-height:52px}
.probes button b{font-size:13px}
.probes button span{font-size:12px;color:var(--muted)}
.probes button[aria-pressed="true"]{border-color:var(--orange);box-shadow:0 0 0 2px rgba(239,125,26,.3)}
.probes .r b{color:var(--probe-red)}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600;min-height:40px}
.btn:hover{border-color:var(--blue2)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.warnbox{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--red-bg);color:#7A1C12;font-size:13px}
.okbox{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--green-bg);color:#0D4F29;font-size:13px}

.tasks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tasks li{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;border:1px solid transparent;font-size:14px}
.tasks li.active{background:#EEF5FC;border-color:#B9D6F0}
.tasks li.done{color:var(--muted)}
.tick{flex:0 0 22px;height:22px;border-radius:50%;border:2px solid #A9B6C6;display:grid;place-items:center;margin-top:1px}
.done .tick{background:var(--green);border-color:var(--green)}
.tick svg{width:12px;height:12px;display:none}
.done .tick svg{display:block}
.tasks .why{margin-top:6px}
.choice{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.choice label{display:flex;gap:8px;align-items:flex-start;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:13px}
.choice input{margin-top:3px}
.bonus{font-size:11px;font-weight:700;color:var(--orange-ink);background:#FFF1E3;border-radius:6px;padding:1px 6px;margin-left:4px}
.progress{height:6px;background:#E8EDF4;border-radius:6px;overflow:hidden;margin:4px 0 10px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--blue2));width:0;transition:width .3s}

.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:-4px -4px 10px;overflow-x:auto}
.tabs button{border:0;background:none;padding:8px 10px;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;min-height:40px}
.tabs button[aria-selected="true"]{color:var(--blue);border-bottom-color:var(--blue)}
.tabpanel p{margin:0 0 8px;font-size:14px}
.tabpanel h4{margin:10px 0 4px;font-size:14px}
.tabpanel ul{margin:0 0 8px;padding-left:18px;font-size:14px}
.parts{list-style:none;padding:0!important;display:flex;flex-direction:column;gap:8px}
.parts li{display:flex;gap:10px;align-items:center}
.parts svg{flex:0 0 56px;height:32px;background:#F5F8FC;border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
td.num,th.num{font-family:var(--mono);text-align:right;white-space:nowrap}
.eq{font-family:var(--mono);background:#F5F8FC;border-radius:8px;padding:8px 10px;margin:6px 0;font-size:13.5px}
.ext-only{display:none}
body.is-extended .ext-only{display:block}
body.is-extended li.ext-only{display:flex}
.ext-tag{display:inline-block;font-size:11px;font-weight:700;color:#5B21B6;background:#EFE9FD;border-radius:6px;padding:1px 6px;margin-right:4px}
.core-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--blue);background:#E6F0FA;border-radius:6px;padding:1px 6px;margin-right:4px}

/* Quiz and summary pages */
.page{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.page h2{margin:0 0 4px;font-size:22px}
.q fieldset{border:0;margin:0;padding:0}
.q legend{font-weight:700;margin-bottom:8px;padding:0}
.q .fb{margin-top:8px;font-size:14px}
.q.correct{box-shadow:0 0 0 2px var(--green),var(--shadow)}
.q.wrong{box-shadow:0 0 0 2px var(--red),var(--shadow)}
.sum-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:700px){.sum-grid{grid-template-columns:1fr}}
.sym{display:flex;gap:10px;align-items:center;font-size:14px;margin:4px 0}
.sym svg{flex:0 0 60px;height:30px}
.foot{padding:4px 20px 24px;color:var(--muted);font-size:12px}
@media (max-width:640px){
  .top{padding:10px 12px;gap:10px}
  .brand img{height:28px}
  h1{font-size:17px}
  .subbar{padding-left:12px;padding-right:12px}
  main{padding:10px 12px 16px}
  .subbar .views{flex:1 1 100%}
  .seg-wide{display:flex;width:100%}
  .stage-head .btn{padding:6px 10px;min-height:40px;font-size:14px}
  .sl-playback{gap:6px}
  .pb-btn{padding:7px 9px}
  .seg-wide button{flex:1;padding:6px 6px;font-size:13px}
}
@media print{
  .top .seg,.path,.views,.foot,.no-print{display:none!important}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid var(--line)}
}
svg.bars{max-width:420px;margin:0 auto}
@media (min-width:600px) and (max-width:1023px){
  .sl-graphs{flex-direction:row}
  .sl-graphs>.card{flex:1 1 0;min-width:0}
}