/* AP CSP Crash Course — shared lesson page styles.
   Lesson 1.3 still carries its own inline copy; new pages use this file.
   Keeping one stylesheet means a template change is one edit, not 153. */

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#f4f5f7;color:#1d1f23;line-height:1.6;padding:0 16px}
.wrap{max-width:720px;margin:0 auto;padding:34px 0 70px}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* header */
.crumb{font-size:13px;color:#8a9099;letter-spacing:.3px;text-transform:uppercase;font-weight:700}
h1{font-size:30px;letter-spacing:-.7px;margin:6px 0 10px;line-height:1.2}
.sub{color:#5a606b;font-size:16.5px;margin-bottom:10px}
.tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.tag{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;
  padding:3px 10px;text-transform:uppercase;letter-spacing:.4px}
.tag.bi{background:#eef2ff;color:#3730a3}
.tag.soft{background:#f0fdf4;color:#15803d}

/* sections */
section{background:#fff;border:1px solid #e4e7ea;border-radius:14px;padding:20px 22px;margin-top:15px}
.step{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.num{flex:0 0 25px;height:25px;border-radius:50%;background:#2563eb;color:#fff;font-size:12.5px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.step h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:#5a606b;font-weight:700}
p{margin-bottom:11px}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 11px 22px}
li{margin-bottom:5px}

/* concept map — progressive reveal, one region per lesson */
.map{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:12.5px;font-weight:600}
.node{background:#f4f5f7;color:#c4c9d0;border:1px solid #eceff2;border-radius:8px;padding:6px 10px;
  transition:all .2s}
.node.seen{color:#5a606b;border-color:#e4e7ea;background:#fff}
.node.on{background:#2563eb;color:#fff;border-color:#2563eb}
.arrow{color:#e4e7ea;font-size:14px}
.map-note{margin-top:11px;font-size:14px;color:#5a606b}

/* hook */
.hook{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:15px 17px;font-size:15.5px}
.hook .big{font-size:22px;font-weight:800;letter-spacing:-.4px;display:block;margin-bottom:5px}

/* content blocks */
.rule{background:#f8f9fb;border-left:3px solid #2563eb;border-radius:0 8px 8px 0;
  padding:11px 15px;margin:13px 0;font-size:15px}
.aside{background:#f4f5f7;border:1px dashed #c4c9d0;border-radius:10px;padding:13px 15px;
  font-size:14.5px;color:#3f444c;margin-top:13px}
.aside b{color:#1d1f23}

/* red warning callout — matches the .warn block in the print handouts */
.warn{background:#fef2f2;border:1px solid #fca5a5;border-left:4px solid #dc2626;
  border-radius:0 11px 11px 0;padding:13px 16px;font-size:15px;color:#3f444c;margin:14px 0}
.warn b{color:#b91c1c}
.do{background:#eff6ff;border:1px solid #bfdbfe;border-radius:11px;padding:14px 16px;font-size:15px}
.do h3{font-size:15.5px;margin-bottom:7px;color:#1d4ed8}
pre{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:13px 15px;overflow-x:auto;
  font-size:13.5px;line-height:1.6;margin:12px 0}
pre .cm{color:#64748b}
pre .kw{color:#c084fc}
pre .out{color:#4ade80}

/* dual pane: Python vs AP Pseudocode */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.dual > div{background:#0f172a;border-radius:10px;padding:11px 13px;overflow-x:auto}
.dual h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;
  margin-bottom:6px;font-weight:700}
.dual pre{margin:0;padding:0;background:none;font-size:13px}
@media(max-width:600px){.dual{grid-template-columns:1fr}}

/* vocabulary */
.vocab{display:grid;gap:9px}
.term{border:1px solid #e4e7ea;border-radius:10px;padding:12px 14px}
.term dt{font-weight:700;font-size:15px;margin-bottom:2px}
.term dd{font-size:14.5px;color:#5a606b;margin-left:0}
.pin{display:inline-block;font-size:10.5px;font-weight:700;color:#3730a3;background:#eef2ff;
  border-radius:999px;padding:2px 7px;margin-left:6px;text-transform:uppercase;letter-spacing:.3px;
  vertical-align:2px}

/* participation check — Unit 0 has no graded MCQs */
.think{background:#fdf4ff;border:1px solid #f0abfc;border-radius:12px;padding:15px 17px;font-size:15px}
.think h3{font-size:15.5px;margin-bottom:7px}
.think ol{margin-bottom:0}

/* connections */
.conn{display:grid;gap:8px}
.conn div{background:#f8f9fb;border-radius:9px;padding:10px 13px;font-size:14.5px}
.conn b{color:#1d4ed8}

/* mark-complete */
.done-wrap{margin-top:15px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.done{background:#2563eb;color:#fff;border:none;border-radius:9px;padding:11px 20px;
  font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.done:disabled{background:#4ade80;cursor:default}
.done-note{font-size:13.5px;color:#8a9099}

/* nav */
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:18px;font-size:14.5px}
.pager a{color:#1d4ed8;font-weight:700;text-decoration:none;background:#fff;border:1px solid #e4e7ea;
  border-radius:10px;padding:10px 15px;flex:1}
.pager a:hover{border-color:#2563eb}
.pager a.next{text-align:right}
.pager span{flex:1}

footer{margin-top:24px;text-align:center;color:#8a9099;font-size:13px;line-height:1.7}
footer a{color:#5a606b}
@media(max-width:560px){h1{font-size:24px}section{padding:17px 15px}}

/* ---- 8x8 pixel encoder (Lesson 0.2) ---------------------------------- */
.pix{background:#0f172a;border-radius:12px;padding:16px;color:#e2e8f0;margin:13px 0}
.pix-tabs{display:flex;gap:7px;margin-bottom:13px}
.pix-tab{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:7px;
  padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.pix-tab.on{background:#2563eb;border-color:#2563eb;color:#fff}
.pix-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.grid8{display:grid;grid-template-columns:repeat(8,26px);gap:2px}
.px{width:26px;height:26px;background:#1e293b;border:1px solid #334155;border-radius:3px;
  cursor:pointer;padding:0}
.px.on{background:#e2e8f0;border-color:#e2e8f0}
.px:hover{border-color:#2563eb}
.pix-side{flex:1;min-width:210px}
.pix-side h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#94a3b8;
  margin-bottom:6px;font-weight:700}
.bitsout{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.75;
  letter-spacing:1.5px;color:#4ade80;word-break:break-all;background:#0b1220;border-radius:8px;
  padding:9px 11px;min-height:40px}
.pix-ctl{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
.pix-act{background:#2563eb;color:#fff;border:none;border-radius:7px;padding:7px 13px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.pix-act.ghost{background:#1e293b;color:#cbd5e1;border:1px solid #334155}
.pix-note{font-size:13px;color:#94a3b8;margin-top:10px}
.pix-in{width:100%;background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:9px 11px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  min-height:76px;resize:vertical}
.pix-msg{font-size:13px;font-weight:700;margin-top:9px;min-height:18px}
.pix-msg.ok{color:#4ade80}
.pix-msg.no{color:#fca5a5}
@media(max-width:520px){.grid8{grid-template-columns:repeat(8,22px)}.px{width:22px;height:22px}}

/* ---- Runestone reading block ----------------------------------------- */
.reading{background:#fff;border:1px solid #e4e7ea;border-left:4px solid #b45309;
  border-radius:0 12px 12px 0;padding:14px 17px;margin-top:15px}
.reading h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:#b45309;
  font-weight:700;margin-bottom:8px}
.reading ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.reading li{margin:0;font-size:14.5px}
.reading a{color:#1d4ed8;font-weight:600;text-decoration:none}
.reading a:hover{text-decoration:underline}
.reading .sec{display:inline-block;min-width:44px;font-weight:700;color:#8a9099;
  font-variant-numeric:tabular-nums}
.reading .why{font-size:13.5px;color:#8a9099;margin-top:9px}
.reading.none{border-left-color:#c4c9d0}
.reading.none h3{color:#8a9099}
.reading.none p{font-size:14.5px;color:#5a606b;margin:0}

/* ---- tables (Lesson 1.3 onward) --------------------------------------- */
table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid #eceff2}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:#8a9099}
tbody tr:last-child td{border-bottom:none}
td.mono{font-size:14px}
strong{font-weight:700}
pre .st{color:#fbbf24}

/* ---- dark interactive lab (bit-width simulator, Lesson 1.3) ----------- */
.lab{background:#0f172a;border-radius:12px;padding:18px;color:#e2e8f0}
.lab-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.lab-top span{font-size:13px;color:#94a3b8;margin-right:2px}
.bitbtn{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:7px;
  padding:5px 11px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.bitbtn.on{background:#2563eb;border-color:#2563eb;color:#fff}
.readout{display:flex;flex-wrap:wrap;gap:20px;align-items:baseline;margin-bottom:6px}
.bits{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:24px;
  letter-spacing:2.5px;word-break:break-all}
.bits .b1{color:#4ade80}
.bits .b0{color:#475569}
.dec{font-size:14px;color:#94a3b8}
.dec b{color:#e2e8f0;font-size:19px}
.lab-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.act{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:9px 15px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.act.ghost{background:#1e293b;color:#cbd5e1;border:1px solid #334155}
.flash{color:#fca5a5;font-size:14px;font-weight:700;margin-top:12px;min-height:20px}

/* ---- self-check MCQs (Lesson 1.3 onward) ------------------------------ */
.q{border:1px solid #e4e7ea;border-radius:12px;padding:16px 18px;margin-bottom:12px}
.q:last-of-type{margin-bottom:0}
.qhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:11px}
.qtext{font-weight:600;font-size:15.5px}
.qtag{flex:0 0 auto;font-size:10.5px;font-weight:700;color:#8a9099;background:#f4f5f7;
  border-radius:999px;padding:3px 8px;text-transform:uppercase;letter-spacing:.3px}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e4e7ea;
  border-radius:9px;padding:10px 13px;margin-bottom:7px;font-size:14.5px;cursor:pointer;
  font-family:inherit;color:inherit;line-height:1.5;transition:border-color .12s,background .12s}
.opt:hover:not(:disabled){border-color:#2563eb;background:#f8faff}
.opt:disabled{cursor:default}
.opt .ltr{display:inline-block;width:20px;font-weight:700;color:#8a9099}
.opt.right{background:#f0fdf4;border-color:#4ade80}
.opt.right .ltr{color:#15803d}
.opt.wrong{background:#fef2f2;border-color:#fca5a5}
.opt.wrong .ltr{color:#b91c1c}
.fb{font-size:14.5px;border-radius:9px;padding:11px 13px;margin-top:9px;display:none}
.fb.show{display:block}
.fb.ok{background:#f0fdf4;color:#166534}
.fb.no{background:#fef2f2;color:#991b1b}
.score{margin-top:14px;font-size:14.5px;font-weight:700;color:#5a606b}

/* ---- impact scenario --------------------------------------------------- */
.scenario{background:#fdf4ff;border:1px solid #f0abfc;border-radius:12px;padding:16px 18px;
  font-size:15.5px;margin-bottom:14px}
.scenario h3{font-size:16px;margin-bottom:7px}

/* ---- place-value counter (Lesson 1.1) ---------------------------------- */
.pv{background:#0f172a;border-radius:12px;padding:18px;color:#e2e8f0;margin:13px 0}
.pv-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:15px}
.pv-top span{font-size:13px;color:#94a3b8;margin-right:2px}
.pv-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.pvbit{background:#1e293b;border:1px solid #334155;border-radius:9px;padding:8px 0;width:56px;
  cursor:pointer;font-family:inherit;text-align:center;transition:background .12s,border-color .12s}
.pvbit:hover{border-color:#2563eb}
.pvbit .place{display:block;font-size:11px;font-weight:700;color:#94a3b8;
  font-variant-numeric:tabular-nums}
.pvbit .val{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:24px;line-height:1.25;color:#475569}
.pvbit.on{background:#14312a;border-color:#4ade80}
.pvbit.on .place{color:#4ade80}
.pvbit.on .val{color:#4ade80}
@media(max-width:520px){.pvbit{width:44px}.pvbit .val{font-size:19px}}
.pv-sum{font-size:15px;color:#94a3b8;line-height:1.9}
.pv-sum .eq{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e2e8f0}
.pv-sum b{color:#4ade80;font-size:21px;vertical-align:-1px}
.pv-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pv-msg{font-size:14px;font-weight:700;margin-top:12px;min-height:20px;color:#94a3b8}
.pv-msg.ok{color:#4ade80}
.pv-msg.no{color:#fca5a5}

/* ---- conversion trainer (Lesson 1.2) ----------------------------------- */
.cv{background:#0f172a;border-radius:12px;padding:16px;color:#e2e8f0;margin:13px 0}
.cv-tabs{display:flex;gap:7px;margin-bottom:15px;flex-wrap:wrap}
.cv-tab{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:7px;
  padding:5px 13px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.cv-tab.on{background:#2563eb;border-color:#2563eb;color:#fff}
.cv-ask{font-size:13px;color:#94a3b8;margin-bottom:7px}
.cv-num{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:32px;
  letter-spacing:2px;color:#4ade80;line-height:1.25;word-break:break-all}
.cv-cols{display:flex;gap:7px;flex-wrap:wrap;margin:11px 0 3px}
.cv-col{width:44px;text-align:center;font-size:11px;font-weight:700;color:#64748b;
  font-variant-numeric:tabular-nums}
.cv-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.cv-in{background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:9px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;
  width:170px;letter-spacing:1px}
.cv-in:focus{outline:none;border-color:#2563eb}
.cv-msg{font-size:14px;font-weight:700;margin-top:12px;min-height:20px;color:#94a3b8;line-height:1.6}
.cv-msg.ok{color:#4ade80}
.cv-msg.no{color:#fca5a5}
.cv-work{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#cbd5e1;
  background:#0b1220;border-radius:8px;padding:10px 12px;margin-top:10px;line-height:1.8;
  white-space:pre-wrap;display:none}
.cv-work.show{display:block}
.cv-streak{font-size:13px;color:#94a3b8;margin-top:11px;font-weight:700}
.cv-streak b{color:#4ade80}
@media(max-width:520px){.cv-num{font-size:24px}.cv-col{width:34px}}

/* ---- ASCII reference grid + text encoder (Lesson 1.4) ------------------ */
.ascii{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:5px;margin:13px 0}
.ac{background:#f8f9fb;border:1px solid #e4e7ea;border-radius:8px;padding:7px 4px;text-align:center}
.ac.wide{grid-column:span 2}
.ac .ch{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;
  font-weight:700;color:#0f172a;line-height:1.3}
.ac.wide .ch{font-size:12px;color:#5a606b;padding-top:3px}
.ac .dc{display:block;font-size:12px;color:#8a9099;font-variant-numeric:tabular-nums}

.enc-out{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px;min-height:56px}
.enc-cell{background:#0b1220;border:1px solid #334155;border-radius:8px;padding:6px 8px;text-align:center}
.enc-cell .ch{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;
  color:#e2e8f0;line-height:1.35}
.enc-cell .dc{display:block;font-size:12px;color:#4ade80;font-variant-numeric:tabular-nums}
.enc-cell .bn{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  color:#64748b;letter-spacing:.5px;margin-top:2px}
.enc-cell.multi{border-color:#c084fc}
.enc-cell.multi .dc{color:#c084fc}
.enc-size{font-size:13.5px;color:#94a3b8;margin-top:13px;line-height:1.7}
.enc-size b{color:#e2e8f0}
.enc-text{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;color:#4ade80;
  background:#0b1220;border-radius:8px;padding:11px 13px;margin-top:12px;min-height:44px;
  word-break:break-word;line-height:1.5}

.fl{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.flbit{width:38px;text-align:center;background:#1e293b;border:1px solid #334155;border-radius:7px;
  padding:6px 0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:19px;color:#475569}
.flbit.one{color:#4ade80}
.flbit.key{border-color:#c084fc;background:#2a1e3b;color:#c084fc}
.flnote{font-size:12px;color:#94a3b8;width:38px;text-align:center}

/* ---- pixel zoom + RGB mixer + size calculator (Lesson 1.5) ------------- */
.zoomwrap{display:flex;justify-content:center;margin:4px 0 2px}
.zgrid{display:grid;line-height:0;font-size:0}
.zpx{cursor:pointer}
.zctl{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:13px;font-size:13px;
  color:#94a3b8}
.zctl input[type=range]{flex:1;min-width:150px;accent-color:#2563eb}
.zinfo{font-size:13.5px;color:#94a3b8;margin-top:11px;min-height:22px;line-height:1.7}
.zinfo b{color:#e2e8f0}
.zchip{display:inline-block;width:15px;height:15px;border-radius:4px;vertical-align:-3px;
  margin-right:6px;border:1px solid #475569}

.mix{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.swatch{width:150px;height:150px;border-radius:11px;border:1px solid #334155;flex:0 0 auto}
.chans{flex:1;min-width:245px}
.chan{margin-bottom:13px}
.chan-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
  letter-spacing:.4px;margin-bottom:5px}
.chan-top .nm{color:#94a3b8}
.chan-top .vl{font-family:ui-monospace,Menlo,Consolas,monospace;color:#e2e8f0;font-size:13px}
.chan input[type=range]{width:100%;margin:0}
.chan .bits{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:1px;
  color:#64748b;margin-top:4px}
.chan.r input[type=range]{accent-color:#ef4444}
.chan.g input[type=range]{accent-color:#22c55e}
.chan.b input[type=range]{accent-color:#3b82f6}
.hexline{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:23px;color:#4ade80;
  margin-top:6px;letter-spacing:1px}
.hexnote{font-size:13px;color:#94a3b8;margin-top:8px;line-height:1.8}
.hexnote code{background:#0b1220;color:#e2e8f0;padding:1px 5px;border-radius:4px;font-size:12.5px}
.presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.pre{border:1px solid #334155;border-radius:7px;padding:5px 11px;font-size:12.5px;font-weight:700;
  cursor:pointer;font-family:inherit;background:#1e293b;color:#cbd5e1}
.pre:hover{border-color:#2563eb}

.calc-row{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:6px}
.calc-f{display:flex;flex-direction:column;gap:4px}
.calc-f label{font-size:11.5px;font-weight:700;color:#94a3b8;letter-spacing:.4px}
.calc-f input{background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;width:105px}
.calc-f input:focus{outline:none;border-color:#2563eb}
.calc-out{font-size:14px;color:#cbd5e1;line-height:2;margin-top:12px;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.calc-out b{color:#4ade80;font-size:16px}
.calc-out .lbl{color:#94a3b8;font-family:Georgia,serif;font-size:13.5px}

/* ---- sampling visualizer + audio demo (Lesson 1.6) --------------------- */
.samp svg{width:100%;height:auto;display:block;border-radius:9px;background:#0b1220}
.samp-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:#94a3b8}
.samp-legend i{display:inline-block;width:20px;height:3px;border-radius:2px;vertical-align:3px;
  margin-right:6px;font-style:normal}
.sl{margin-top:15px}
.sl-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
  letter-spacing:.4px;margin-bottom:5px}
.sl-top .nm{color:#94a3b8}
.sl-top .vl{font-family:ui-monospace,Menlo,Consolas,monospace;color:#e2e8f0;font-size:13px}
.sl input[type=range]{width:100%;margin:0;accent-color:#2563eb}
.samp-out{font-size:13.5px;color:#94a3b8;margin-top:15px;line-height:1.9}
.samp-out b{color:#e2e8f0}
.samp-nums{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#4ade80;
  background:#0b1220;border-radius:8px;padding:9px 11px;margin-top:9px;word-break:break-all;
  line-height:1.7}
.aud{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}
.aud-note{font-size:13px;color:#94a3b8;margin-top:11px;line-height:1.7}

/* ---- abstraction ladder + card sort (Lesson 1.7) ----------------------- */
.ladder{display:grid;gap:5px}
.rung{display:flex;align-items:center;gap:11px;background:#1e293b;border:1px solid #334155;
  border-radius:9px;padding:10px 13px;cursor:pointer;font-family:inherit;text-align:left;
  width:100%;color:#cbd5e1;transition:border-color .12s,background .12s}
.rung:hover{border-color:#2563eb}
.rung.on{background:#14312a;border-color:#4ade80}
.rung .lv{flex:0 0 auto;width:22px;font-size:11px;font-weight:700;color:#64748b;
  font-variant-numeric:tabular-nums}
.rung.on .lv{color:#4ade80}
.rung .nm{font-size:15px;font-weight:700;color:#e2e8f0}
.rung .ex{font-size:12.5px;color:#94a3b8;margin-left:auto;text-align:right;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.rung-detail{background:#0b1220;border-radius:9px;padding:14px 16px;margin-top:12px;
  font-size:14px;color:#cbd5e1;line-height:1.75;min-height:96px}
.rung-detail h4{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#4ade80;
  margin-bottom:6px;font-weight:700}
.rung-detail .row{margin-bottom:9px}
.rung-detail .row:last-child{margin-bottom:0}
.rung-detail .k{color:#94a3b8;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;display:block}

.sort{display:grid;gap:6px}
.card{display:flex;align-items:center;gap:10px;background:#1e293b;border:1px solid #334155;
  border-radius:9px;padding:9px 11px}
.card .txt{flex:1;font-size:14.5px;color:#e2e8f0}
.card .mv{background:#0b1220;border:1px solid #334155;border-radius:6px;color:#cbd5e1;
  width:30px;height:28px;font-size:14px;cursor:pointer;font-family:inherit;line-height:1}
.card .mv:hover:not(:disabled){border-color:#2563eb}
.card .mv:disabled{opacity:.3;cursor:default}
.card.right{border-color:#4ade80;background:#14312a}
.card.wrong{border-color:#fca5a5;background:#3b1e1e}
.sort-ctl{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.sort-msg{font-size:14px;font-weight:700;margin-top:12px;min-height:20px;color:#94a3b8;
  line-height:1.7}
.sort-msg.ok{color:#4ade80}
.sort-msg.no{color:#fca5a5}

/* ---- run-length encoding + dictionary compression (Lesson 1.8) --------- */
.rle-row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.grid16{display:grid;grid-template-columns:repeat(16,20px);gap:1px;flex:0 0 auto}
.rpx{width:20px;height:20px;background:#0b1220;border:1px solid #1e293b;border-radius:2px;
  cursor:pointer;padding:0}
.rpx.on{background:#e2e8f0;border-color:#e2e8f0}
.rpx:hover{border-color:#2563eb}
@media(max-width:560px){.grid16{grid-template-columns:repeat(16,16px)}.rpx{width:16px;height:16px}}
.rle-side{flex:1;min-width:230px}
.rle-runs{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#4ade80;
  background:#0b1220;border-radius:8px;padding:9px 11px;line-height:1.8;word-break:break-all;
  max-height:132px;overflow-y:auto}
.cmp-stat{font-size:13.5px;color:#94a3b8;line-height:1.9;margin-top:11px}
.cmp-stat b{color:#e2e8f0}
.cmp-stat .win{color:#4ade80;font-weight:700}
.cmp-stat .lose{color:#fca5a5;font-weight:700}
.bar{height:11px;border-radius:6px;background:#1e293b;overflow:hidden;margin:9px 0 3px;
  border:1px solid #334155}
.bar span{display:block;height:100%;background:#4ade80;transition:width .18s}
.bar.over span{background:#fca5a5}
.barlab{font-size:11.5px;color:#64748b;font-family:ui-monospace,Menlo,Consolas,monospace}
.dictbox{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#c084fc;
  background:#0b1220;border-radius:8px;padding:9px 11px;margin-top:10px;line-height:1.8;
  word-break:break-all}
.roundtrip{font-size:13.5px;font-weight:700;margin-top:11px;padding:9px 12px;border-radius:8px;
  background:#14312a;color:#4ade80}
.roundtrip.bad{background:#3b1e1e;color:#fca5a5}

/* ---- JPEG quality ladder + decision scenarios (Lesson 1.9) ------------- */
.jrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px}
.jcell{background:#0b1220;border:1px solid #334155;border-radius:9px;padding:7px;cursor:pointer;
  font-family:inherit;text-align:center;color:#cbd5e1}
.jcell:hover{border-color:#2563eb}
.jcell.on{border-color:#4ade80}
.jcell img{width:100%;height:auto;border-radius:5px;display:block;image-rendering:auto}
.jcell .lb{font-size:11.5px;color:#94a3b8;margin-top:6px;font-variant-numeric:tabular-nums}
.jcell.on .lb{color:#4ade80}
.jcell .sz{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;color:#e2e8f0;
  margin-top:2px}
.jbig{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-top:6px}
.jbig img{width:290px;max-width:100%;border-radius:9px;border:1px solid #334155;display:block}
.jbig .side{flex:1;min-width:215px}
.jstat{font-size:13.5px;color:#94a3b8;line-height:1.95}
.jstat b{color:#e2e8f0}
.jstat .win{color:#4ade80;font-weight:700}
.jstat .lose{color:#fca5a5;font-weight:700}

.scen{border:1px solid #e4e7ea;border-radius:12px;padding:15px 17px;margin-bottom:11px}
.scen:last-of-type{margin-bottom:0}
.scen-q{font-weight:600;font-size:15.5px;margin-bottom:11px}
.scen-opts{display:flex;gap:8px;flex-wrap:wrap}
.scen-opts button{flex:1;min-width:135px;background:#fff;border:1px solid #e4e7ea;border-radius:9px;
  padding:10px 13px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;
  color:inherit;transition:border-color .12s,background .12s}
.scen-opts button:hover:not(:disabled){border-color:#2563eb;background:#f8faff}
.scen-opts button:disabled{cursor:default}
.scen-opts button.right{background:#f0fdf4;border-color:#4ade80;color:#15803d}
.scen-opts button.wrong{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.scen-fb{font-size:14.5px;border-radius:9px;padding:11px 13px;margin-top:10px;display:none;
  line-height:1.7}
.scen-fb.show{display:block}
.scen-fb.ok{background:#f0fdf4;color:#166534}
.scen-fb.no{background:#fef2f2;color:#991b1b}

/* ---- predict-and-check + function explorer (Lesson 1.10) --------------- */
.pred{display:grid;gap:7px}
.prow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;background:#0b1220;
  border:1px solid #334155;border-radius:9px;padding:9px 11px}
.prow.right{border-color:#4ade80}
.prow.wrong{border-color:#fca5a5}
.prow .ex{flex:1;min-width:170px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;color:#e2e8f0}
.prow .ex b{color:#c084fc;font-weight:400}
.prow input{background:#0f172a;color:#e2e8f0;border:1px solid #334155;border-radius:7px;
  padding:7px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;width:145px}
.prow input:focus{outline:none;border-color:#2563eb}
.prow input:disabled{opacity:.65}
.prow .go{background:#2563eb;color:#fff;border:none;border-radius:7px;padding:7px 13px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.prow .go:disabled{background:#334155;cursor:default}
.prow .res{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;min-width:120px}
.prow.right .res{color:#4ade80}
.prow.wrong .res{color:#fca5a5}
.pred-score{font-size:14px;font-weight:700;color:#94a3b8;margin-top:12px}
.pred-score b{color:#4ade80}

.expl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.expl select{background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:9px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.expl select:focus{outline:none;border-color:#2563eb}
.expl-out{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;color:#4ade80;
  background:#0b1220;border-radius:8px;padding:12px 14px;margin-top:13px;min-height:46px;
  line-height:1.5;word-break:break-all}
.expl-out .err{color:#fca5a5;font-size:14px}
.nb{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #2563eb;
  border-radius:0 12px 12px 0;padding:15px 18px;margin:15px 0}
.nb h3{font-size:15.5px;color:#1d4ed8;margin-bottom:8px}
.nb ol{margin:9px 0 0 20px}
.nb li{margin-bottom:5px;font-size:14.5px}
.nb .dl{display:inline-block;background:#2563eb;color:#fff;border-radius:9px;padding:10px 17px;
  font-size:14.5px;font-weight:700;text-decoration:none;margin-top:11px}
.nb .dl:hover{background:#1d4ed8}

/* ---- map rebuilder + vocab drill (Lesson 1.13) ------------------------- */
.mchain{display:grid;gap:6px}
.mstep{display:flex;align-items:center;gap:10px}
.mstep .k{flex:0 0 auto;width:20px;font-size:11px;font-weight:700;color:#64748b;
  font-variant-numeric:tabular-nums}
.mslot{flex:1;min-height:44px;display:flex;align-items:center;gap:10px;background:#1e293b;
  border:1px dashed #475569;border-radius:9px;padding:9px 13px;cursor:pointer;font-family:inherit;
  text-align:left;color:#64748b;font-size:14.5px;width:100%}
.mslot.fixed{border-style:solid;border-color:#334155;color:#94a3b8;cursor:default;background:#131f33}
.mslot.filled{border-style:solid;border-color:#2563eb;color:#e2e8f0;font-weight:700}
.mslot.armed{border-color:#4ade80;background:#14312a}
.mslot.right{border-color:#4ade80;background:#14312a;color:#4ade80;font-weight:700}
.mslot.wrong{border-color:#fca5a5;background:#3b1e1e;color:#fca5a5;font-weight:700}
.mslot .why{font-size:12.5px;color:#64748b;font-weight:400;margin-left:auto;text-align:right}
.marrow{text-align:center;color:#475569;font-size:14px;line-height:.9;margin:-1px 0}
.mbank{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.chip{background:#0b1220;border:1px solid #334155;border-radius:8px;padding:8px 13px;
  font-size:14px;font-weight:700;color:#cbd5e1;cursor:pointer;font-family:inherit}
.chip:hover{border-color:#2563eb}
.chip.on{background:#2563eb;border-color:#2563eb;color:#fff}
.chip.used{opacity:.28;cursor:default}

.vdrill{min-height:180px}
.vdef{background:#0b1220;border-radius:9px;padding:14px 16px;font-size:15px;color:#e2e8f0;
  line-height:1.7;margin-bottom:13px}
.vdef .from{display:block;font-size:11.5px;color:#64748b;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;margin-bottom:6px}
.vopts{display:grid;gap:7px}
.vopt{background:#1e293b;border:1px solid #334155;border-radius:9px;padding:11px 14px;
  font-size:14.5px;font-weight:700;color:#cbd5e1;cursor:pointer;font-family:inherit;text-align:left}
.vopt:hover:not(:disabled){border-color:#2563eb}
.vopt:disabled{cursor:default}
.vopt.right{background:#14312a;border-color:#4ade80;color:#4ade80}
.vopt.wrong{background:#3b1e1e;border-color:#fca5a5;color:#fca5a5}
.vbar{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:#94a3b8;margin-top:14px;
  font-weight:700}
.vbar b{color:#4ade80}
.vbar .miss{color:#fca5a5}

/* ---- project brief (Lessons 1.11–1.12) --------------------------------- */
.pstep{border:1px solid #e4e7ea;border-radius:12px;padding:15px 17px;margin-bottom:10px}
.pstep:last-of-type{margin-bottom:0}
.pstep h3{font-size:16px;margin-bottom:7px;color:#1d4ed8}
.pstep h3 .n{display:inline-block;background:#2563eb;color:#fff;border-radius:6px;
  font-size:12px;padding:2px 8px;margin-right:8px;vertical-align:2px;font-weight:800}
.pstep p{font-size:14.5px;margin-bottom:7px}
.pstep p:last-child{margin-bottom:0}
.pstep ul{margin:7px 0 0 20px;font-size:14.5px}
.pstep li{margin-bottom:4px}
.words{display:grid;gap:8px;margin:12px 0}
.word{display:flex;gap:12px;flex-wrap:wrap;background:#f8f9fb;border-radius:9px;padding:10px 13px;
  font-size:14.5px}
.word b{flex:0 0 auto;min-width:92px;color:#1d4ed8}
.pts{display:flex;justify-content:space-between;gap:12px;font-size:14.5px;padding:7px 0;
  border-bottom:1px solid #eceff2}
.pts:last-of-type{border-bottom:none}
.pts span:last-child{flex:0 0 auto;font-weight:700;color:#5a606b;font-variant-numeric:tabular-nums}
.ptot{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-top:9px;
  padding-top:9px;border-top:2px solid #e4e7ea}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:13px 0}
.vs > div{border-radius:11px;padding:13px 15px;font-size:14px;line-height:1.65}
.vs .bad{background:#fef2f2;border:1px solid #fca5a5}
.vs .good{background:#f0fdf4;border:1px solid #4ade80}
.vs h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.vs .bad h4{color:#b91c1c}
.vs .good h4{color:#15803d}
@media(max-width:620px){.vs{grid-template-columns:1fr}}

/* ---- reveal / spoiler -------------------------------------------------- */
.reveal{background:#f8f9fb;border:1px solid #e4e7ea;border-radius:11px;padding:14px 16px;margin:14px 0}
.reveal button{background:#2563eb;color:#fff;border:none;border-radius:8px;padding:9px 15px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.reveal .hidden{display:none;margin-top:12px;font-size:15px}
.reveal .hidden.show{display:block}

/* --- added for 1.15: extra toggle-button groups + "next stop" map node --- */
.fpsbtn,.durbtn{background:#1e293b;color:#cbd5e1;border:1px solid #334155;border-radius:7px;
  padding:5px 11px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.fpsbtn.on,.durbtn.on{background:#2563eb;border-color:#2563eb;color:#fff}
.node.next{color:#2563eb;border-color:#bfdbfe;background:#eff6ff;border-style:dashed}

/* --- Unit 2: synced dual-pane highlighting (hover a line, its twin lights up) --- */
.dual.sync pre{line-height:1.7}
.dual.sync .ln{display:block;border-radius:4px;padding:0 5px;margin:0 -5px;transition:background .12s}
.dual.sync .ln.lit{background:#1e3a5f}
.dual .panenote{font-size:11.5px;color:#64748b;margin-top:7px;line-height:1.5}
/* --- Unit 2: variable-box trace model (assignment / swap step-through) --- */
.vboxes{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 6px}
.vbox{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:9px 14px;min-width:80px;text-align:center}
.vbox .name{display:block;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.vbox .val{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:21px;color:#e2e8f0}
.vbox.changed{border-color:#4ade80;box-shadow:0 0 0 2px rgba(74,222,128,.15)}
.vbox.changed .val{color:#4ade80}
.vbox.empty .val{color:#475569}
.traceline{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#e2e8f0;background:#0f172a;border-radius:8px;padding:9px 13px;margin:6px 0;min-height:20px}
.traceline .hl{color:#c084fc}