:root { --eecs-accent: #7c3aed; --eecs-soft: #f2ecff; --eecs-line: #ddd5ee; }

/* Course map: a reading path, not a dashboard. */
.eecs-map { padding: 70px max(24px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--dashboard-line, #263129); background: #111611; color: #f7f6f1; }
.eecs-map-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px); gap: 48px; align-items: end; }
.eecs-map-kicker { margin: 0 0 10px; color: #b99cf8; font: 750 .66rem/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.eecs-map h2 { max-width: 720px; margin: 0; font-family: ui-serif, Georgia, serif; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; letter-spacing: -.045em; }
.eecs-map-intro { margin: 0; color: #aeb6af; font-size: .9rem; line-height: 1.75; }
.eecs-map-flow { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin-top: 42px; padding: 0; list-style: none; }
.eecs-map-flow li { position: relative; min-width: 0; padding: 18px 14px 16px; border-block: 1px solid #343c35; }
.eecs-map-flow li + li { border-left: 1px solid #343c35; }
.eecs-map-flow li::after { position: absolute; top: 27px; right: -5px; z-index: 2; color: #7d877f; content: "→"; font-size: .8rem; }
.eecs-map-flow li:last-child::after { content: none; }
.eecs-map-flow strong, .eecs-map-flow span { display: block; }
.eecs-map-flow strong { color: #fff; font-size: .76rem; line-height: 1.35; }
.eecs-map-flow span { margin-top: 7px; color: #858f87; font: .58rem/1.45 "SFMono-Regular", Consolas, monospace; }
.eecs-map-flow .transformer { margin: -9px 0; padding-block: 27px 25px; border-color: #7c3aed; background: #251a3a; box-shadow: inset 0 0 0 1px #7c3aed; }
.eecs-map-flow .transformer strong { color: #d5c2ff; }
.eecs-progress-note { margin-top: 22px; color: #8f9991; font: .65rem/1.5 "SFMono-Regular", Consolas, monospace; }

/* Code-backed lesson vocabulary. */
.recall { margin: 28px 0 42px; padding: 24px 26px; border: 1px solid var(--eecs-line); border-radius: 14px; background: linear-gradient(135deg, #fbf9ff, var(--eecs-soft)); }
.recall-kicker, .code-kicker, .provenance-kicker { margin: 0 0 9px !important; color: var(--eecs-accent) !important; font: 760 .64rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.recall h2 { margin: 0 0 12px !important; font-size: 1.35rem !important; }
.recall ol { margin-bottom: 0; }
.mental-model { margin: 28px 0; padding: 28px clamp(24px, 5vw, 44px); border-left: 4px solid var(--eecs-accent); border-radius: 0 14px 14px 0; background: #16111f; }
.mental-model p { margin: 0; color: #f4f0fb !important; font-family: ui-serif, Georgia, serif; font-size: clamp(1.16rem, 2.3vw, 1.55rem); line-height: 1.55; }
.mental-model small { display: block; margin-bottom: 9px; color: #bca8e8; font: .62rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .1em; text-transform: uppercase; }
.your-code { margin: 30px 0; overflow: hidden; border: 1px solid var(--eecs-line); border-radius: 14px; background: #fff; box-shadow: 0 14px 38px rgba(63, 42, 92, .07); }
.your-code-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--eecs-line); background: #faf8ff; }
.your-code-head p { margin: 0 !important; }
.your-code-file { color: #595064 !important; font: .7rem/1.4 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.your-code a { white-space: nowrap; font-size: .72rem; }
.your-code pre { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.historical-note { margin: 24px 0; padding: 20px 22px; border-left: 3px solid #a16207; background: #fff8e8; }
.historical-note strong { color: #7a4605 !important; }
.shape-flow { display: flex; align-items: stretch; gap: 0; margin: 26px 0; overflow-x: auto; padding-bottom: 6px; }
.shape-flow > div { position: relative; min-width: 150px; flex: 1 0 150px; padding: 17px 20px; border-block: 1px solid var(--eecs-line); background: #fff; }
.shape-flow > div:first-child { border-left: 1px solid var(--eecs-line); border-radius: 11px 0 0 11px; }
.shape-flow > div:last-child { border-right: 1px solid var(--eecs-line); border-radius: 0 11px 11px 0; }
.shape-flow > div + div { border-left: 1px solid var(--eecs-line); }
.shape-flow > div + div::before { position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--eecs-accent); content: ""; transform: translateY(-50%); }
.shape-flow strong, .shape-flow span { display: block; }
.shape-flow strong { font-size: .78rem; }
.shape-flow span { margin-top: 6px; color: #6c6472; font: .66rem/1.4 "SFMono-Regular", Consolas, monospace; }
.compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.compare-grid article { padding: 22px; border: 1px solid var(--eecs-line); border-radius: 12px; background: #fff; }
.compare-grid h3 { margin-bottom: 12px !important; }
.concept-check { margin: 12px 0; border: 1px solid var(--eecs-line); border-radius: 10px; background: #fff; overflow: clip; }
.concept-check summary { padding: 16px 18px; cursor: pointer; color: #31283d; font-weight: 720; }
.concept-check[open] summary { border-bottom: 1px solid var(--eecs-line); background: #faf8ff; }
.concept-check > :not(summary) { margin-inline: 18px; }
.diagnosis { color: #766b7d !important; font-size: .82rem; }
.provenance { margin-top: 72px; padding: 28px 0; border-block: 1px solid var(--eecs-line); }
.provenance ul { margin-bottom: 0; }
.provenance li { font-size: .82rem; }
.course-explanation { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--eecs-soft); color: #5b21b6; font: .6rem/1.4 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.eecs-completion { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 48px 0 10px; padding: 22px; border: 1px solid var(--eecs-line); border-radius: 12px; background: #faf8ff; }
.eecs-completion p { margin: 0; color: #5e5666 !important; font-size: .8rem; }
.eecs-completion button { min-height: 40px; padding: 0 16px; border: 1px solid var(--eecs-accent); border-radius: 999px; background: var(--eecs-accent); color: white; cursor: pointer; font-weight: 720; }
.eecs-completion button[aria-pressed="true"] { background: white; color: var(--eecs-accent); }
.eecs-review-bridge { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 52px 0 12px; padding: 24px 26px; border: 1px solid #c7b5ef; border-radius: 12px; background: #18121f; color: white; }
.eecs-review-bridge strong { color: #cdb8fb; font: 760 .66rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.eecs-review-bridge p { max-width: 620px; margin: 7px 0 0; color: #c9bfce !important; font-size: .82rem; }
.eecs-review-bridge a { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; background: #7c3aed; color: white; text-decoration: none; font-size: .76rem; font-weight: 760; }
.transformer-thread { margin: 24px 0; padding: 18px 20px; border: 1px dashed #a78bfa; border-radius: 12px; background: #faf7ff; color: #544a5f; font-size: .85rem; }

/* Depth-refactor teaching components. They stay prose-first and reuse lesson tokens. */
.lesson-contract, .object-map, .worked-example, .misconception, .counterfactual,
.mechanism-walkthrough, .transfer-question, .explain-it-yourself, .lesson-connection,
.parameter-ledger, .debug-lens, .deep-checks, .before-start {
  margin: 26px 0; padding: 22px 24px; border: 1px solid var(--eecs-line); border-radius: 12px; background: rgba(255,255,255,.72);
}
.lesson-contract { border-left: 4px solid var(--eecs-accent); }
.object-map { background: #f8f6fb; }
.worked-example { border-color: #c7b5ef; background: #fcfaff; }
.worked-example::before, .mechanism-walkthrough::before, .parameter-ledger::before,
.counterfactual::before, .transfer-question::before, .debug-lens::before {
  display: block; margin-bottom: 10px; color: var(--eecs-accent); font: 760 .61rem/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .11em; text-transform: uppercase;
}
.worked-example::before { content: "Worked example"; }
.mechanism-walkthrough::before { content: "Mechanism walkthrough"; }
.parameter-ledger::before { content: "What receives gradient?"; }
.counterfactual::before { content: "Counterfactual · remove it"; color: #9a3412; }
.transfer-question::before { content: "Transfer question"; }
.debug-lens::before { content: "What would I debug first today?"; }
.misconception { border-left: 4px solid #b45309; background: #fff8e8; }
.misconception h3, .counterfactual h3, .worked-example h3, .lesson-contract h3,
.object-map h3, .mechanism-walkthrough h3, .transfer-question h3, .debug-lens h3,
.explain-it-yourself h2, .lesson-connection h3, .before-start h2, .deep-checks h2 { margin-top: 0 !important; }
.before-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 16px; counter-reset: before; }
.before-grid > .depth-check { margin: 0; }
.before-grid > .depth-check > p:first-child { min-height: 96px; margin: 0 0 12px; font-size: .83rem; }
.before-grid > .depth-check > p:first-child::before { display: block; margin-bottom: 8px; color: var(--eecs-accent); content: counter(before, decimal-leading-zero); counter-increment: before; font: 700 .62rem/1 monospace; }
.step-ledger { margin: 18px 0; padding: 0; list-style: none; counter-reset: ledger; }
.step-ledger li { position: relative; margin: 0; padding: 14px 14px 14px 54px; border-left: 1px solid #c9bed8; }
.step-ledger li::before { position: absolute; top: 13px; left: 14px; width: 25px; height: 25px; border-radius: 50%; background: var(--eecs-accent); color: white; content: counter(ledger); counter-increment: ledger; font: 700 .7rem/25px monospace; text-align: center; }
.step-ledger li + li { border-top: 1px dashed #ddd5e7; }
.tensor-ledger { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 22px 0; overflow: hidden; border: 1px solid var(--eecs-line); border-radius: 10px; background: var(--eecs-line); }
.tensor-ledger > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 14px 16px; background: #fff; }
.tensor-ledger > div code, .tensor-ledger > div > :first-child { font-weight: 720; }
.tensor-ledger > div span { color: #6b6273; font: .7rem/1.45 "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.mini-matrix { width: fit-content; max-width: 100%; margin: 18px auto; font-family: "SFMono-Regular", Consolas, monospace; font-size: .84rem; }
.depth-check { margin: 18px 0; padding: 22px; border: 1px solid var(--eecs-line); border-radius: 12px; background: white; }
.depth-check-options { display: grid; gap: 8px; margin-top: 14px; }
.depth-check button { padding: 11px 13px; border: 1px solid var(--eecs-line); border-radius: 8px; background: #faf9fc; color: #302939; cursor: pointer; text-align: left; }
.depth-check button:hover, .depth-check button:focus-visible { border-color: var(--eecs-accent); }
.depth-check button[aria-pressed="true"] { border-color: var(--eecs-accent); background: var(--eecs-soft); }
.depth-feedback, .check-feedback { min-height: 1.5em; margin: 12px 0 0 !important; color: #5f5668 !important; font-size: .79rem; }
.explain-it-yourself { background: #17131d; color: white; }
.explain-it-yourself h2, .explain-it-yourself li, .explain-it-yourself p { color: #f3eef8 !important; }
.explain-it-yourself p { color: #bdb3c7 !important; }
.deep-checks { border-style: dashed; background: #faf9fc; }
.lesson-connection { border-left: 4px solid #475569; background: #f7f8f9; }
.then-now-compression { margin: 28px 0; padding: 20px 22px; border-block: 1px solid var(--eecs-line); }
.then-now-compression strong { display: block; margin-bottom: 6px; color: var(--eecs-accent) !important; font: 760 .63rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.deep-dive { margin: 16px 0; border: 1px solid var(--eecs-line); border-radius: 10px; background: rgba(255,255,255,.55); overflow: clip; }
.deep-dive > summary { padding: 15px 18px; cursor: pointer; color: #4e4558; font-weight: 720; }
.deep-dive[open] > summary { border-bottom: 1px solid var(--eecs-line); background: #f8f6fb; }
.deep-dive > :not(summary) { margin-inline: 18px; }

@media (max-width: 900px) {
  .eecs-map-head { grid-template-columns: 1fr; gap: 20px; }
  .eecs-map-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .eecs-map-flow li:nth-child(5) { border-left: 0; }
}
@media (max-width: 680px) {
  .pb-crumb > span[aria-hidden="true"] { display: none; }
  .eecs-map { padding: 52px 18px; }
  .eecs-map-flow { grid-template-columns: 1fr; }
  .eecs-map-flow li, .eecs-map-flow li:nth-child(5) { border: 0; border-left: 1px solid #343c35; padding: 13px 18px; }
  .eecs-map-flow li::after { top: auto; right: auto; bottom: -8px; left: 15px; content: "↓"; }
  .eecs-map-flow .transformer { margin: 4px 0; padding-block: 18px; }
  .compare-grid { grid-template-columns: 1fr; }
  .your-code-head, .eecs-completion { align-items: flex-start; flex-direction: column; }
  .eecs-review-bridge { align-items: flex-start; flex-direction: column; }
  .shape-flow { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .shape-flow > div { min-width: 0; border: 0 !important; border-left: 1px solid var(--eecs-line) !important; border-radius: 0 !important; }
  .shape-flow > div + div::before { left: -6px; top: 0; }
  .before-grid { grid-template-columns: 1fr; }
  .tensor-ledger { grid-template-columns: 1fr; }
  .before-grid > .depth-check > p:first-child { min-height: 0; }
  .lesson-contract, .object-map, .worked-example, .misconception, .counterfactual,
  .mechanism-walkthrough, .transfer-question, .explain-it-yourself, .lesson-connection,
  .parameter-ledger, .debug-lens, .deep-checks, .before-start { padding: 18px; }
}