:root {
  color-scheme: light;
  --paper: #f4f6f8;
  --paper-bright: #ffffff;
  --ink: #172033;
  --ink-soft: #526078;
  --blue: #145bd7;
  --blue-dark: #0f47aa;
  --blue-wash: #eaf1ff;
  --orange: #bd3f13;
  --orange-wash: #fff0e8;
  --green: #08784b;
  --green-wash: #e7f5ed;
  --line: #d8dee8;
  --line-dark: #95a1b3;
  --shadow: 0 10px 28px rgba(23, 32, 51, 0.08);
  --serif: "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --radius: 10px;
  --content: 1480px;
}

/* DSA course: reading space around the lesson, dense state inside the experiment. */
.course-page { max-width: 1360px; }
.course-header { margin-bottom: 32px; }
.course-header > .context-link { display: inline-block; margin-bottom: 20px; }
.course-header .page-title { font-size: clamp(2.2rem, 3.8vw, 3.5rem); max-width: 26ch; }
.course-header .page-lede { max-width: 70ch; margin-top: 14px; }
.course-index, .reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; }
.course-aside { color: var(--ink-soft); border-top: 2px solid var(--ink); padding-top: 20px; }
.course-aside h2, .course-aside h3 { color: var(--ink); }
.course-aside h2 { margin-top: 0; font-size: 1.2rem; }
.course-aside h3 { margin: 28px 0 8px; font-size: 1rem; }
.course-aside p { font-size: .94rem; }
.course-aside hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.curriculum-section { margin-bottom: 34px; }
.curriculum-section > h2 { font-size: 1.25rem; margin: 0; padding: 14px 0; border-bottom: 2px solid var(--ink); }
.course-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.course-row > div:first-child { min-width: 0; }
.lesson-title { font-weight: 600; font-size: 1.15rem; text-decoration: none; color: var(--ink); }
.lesson-title:hover { color: var(--blue); text-decoration: underline; }
.course-row p { margin: 5px 0 0; font-size: .93rem; color: var(--ink-soft); max-width: 62ch; }
.course-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; font-size: .85rem; color: var(--ink-soft); }
.course-status { font-weight: 600; font-size: .88rem; color: var(--ink-soft); }
.course-status.done { color: var(--green); }
.lesson-stages { display: flex; border-bottom: 1px solid var(--line-dark); margin-top: 26px; gap: 20px; }
.lesson-stages a { display: flex; align-items: center; gap: 9px; padding: 12px 4px; color: var(--ink-soft); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.lesson-stages a[aria-current] { border-bottom-color: var(--blue); color: var(--ink); font-weight: 600; }
.stage-number { font-size: .8rem; width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; }
.lesson-stages a[aria-current] .stage-number { background: var(--blue); color: white; border-color: var(--blue); }
.lesson-entry-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chapter-lessons .lesson-entry-actions { margin: -3px 8px 14px 62px; gap: 18px; font-size: .86rem; }
.chapter-lessons .lesson-entry-actions a { display: inline; padding: 0; color: var(--blue-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.chapter-lessons .lesson-entry-actions a:hover, .chapter-lessons .lesson-entry-actions a:focus-visible { background: transparent; }
.lesson-reading { max-width: 74ch; }
.lesson-reading h2 { margin: 36px 0 10px; font-size: 1.6rem; line-height: 1.2; }
.lesson-reading h2:first-child { margin-top: 0; }
.lesson-reading h3 { margin: 26px 0 8px; }
.lesson-reading p { line-height: 1.75; margin: 0 0 16px; }
.contract { color: var(--ink-soft); font-size: .94rem; }
.worked-example { border-block: 1px solid var(--line-dark); padding: 22px 0; margin: 24px 0; }
.worked-example pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .87rem; }
.worked-example small, .small-copy { color: var(--ink-soft); font-size: .84rem; }
.lesson-next { margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.explore-intro { margin-bottom: 24px; max-width: 80ch; }
.explore-intro h2 { margin: 0; }
.experiment-input { margin: 24px 0; }
.experiment-input label { display: block; font-weight: 600; margin-bottom: 8px; }
.experiment-input label span { font-weight: 400; font-size: .85rem; color: var(--ink-soft); }
.input-action { display: flex; align-items: center; gap: 12px; }
#trace-input, #home-array { width: 100%; resize: vertical; border: 1px solid var(--line-dark); padding: 12px; border-radius: 6px; background: var(--paper-bright); color: var(--ink); font-family: var(--mono); font-size: .9rem; }
#home-array { margin: 8px 0 14px; }
.home-hero .panel .context-link { display: block; margin-top: 16px; }
.home-hero .notice { margin-top: 18px; }
.input-action > .btn { flex-shrink: 0; }
.preset-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: .88rem; }
.preset-controls .btn { font-size: .85rem; padding: 7px 12px; }
.trace-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.trace-workspace, .trace-side { min-width: 0; }
.trace-mode { display: flex; gap: 6px; }
.trace-mode .btn { font-size: .8rem; padding: 6px 10px; min-height: 36px; }
.trace-mode [aria-pressed="true"] { background: var(--blue-wash); color: var(--blue); border-color: var(--blue); }
.trace-code { background: #101e31; color: #edf3fd; padding: 16px 0; margin: 0; overflow-x: auto; font: .83rem/1.75 var(--mono); tab-size: 4; border-radius: 0 0 var(--radius) var(--radius); }
.code-line { display: flex; min-width: max-content; padding-right: 18px; }
.line-number { display: inline-block; width: 38px; flex-shrink: 0; color: #a7b6cd; text-align: right; padding-right: 12px; user-select: none; }
.code-line.current { background: #234571; }
.code-line.current .line-number { color: #fff; }
.trace-array { display: flex; gap: 5px; flex-wrap: wrap; padding: 14px 0 20px; }
.trace-cell { min-width: 48px; flex: 1 0 48px; max-width: 75px; text-align: center; border: 1px solid var(--line-dark); display: grid; font-family: var(--mono); padding: 7px 3px; border-radius: 5px; }
.trace-cell small { color: var(--ink-soft); font-size: .73rem; }
.trace-cell strong { font-size: 1.15rem; }
.trace-cell span { height: 15px; font-size: .65rem; color: var(--blue); }
.trace-cell.in-window { background: var(--blue-wash); }
.trace-cell.active, .linked-node.active, .tree-node.active, .graph-row.active { outline: 2px solid var(--blue); outline-offset: 2px; background: var(--blue-wash); }
.trace-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.trace-controls .btn { font-size: .85rem; }
.trace-controls > span { font: .8rem var(--mono); color: var(--ink-soft); }
.trace-explanation { min-height: 3em; font-size: 1.05rem; margin: 20px 0; }
.focused-lesson { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(240px,.8fr); gap: 32px; align-items: start; }
.focused-lesson .panel-heading h3 { margin: 0; }
.focused-diagram { padding: 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font: .9rem/1.65 var(--mono); }
.focused-choice { display: grid; gap: 9px; border: 0; padding: 0; margin: 20px 0; }
.focused-choice legend { margin-bottom: 12px; font-weight: 600; }
.focused-choice .btn { justify-content: flex-start; text-align: left; white-space: normal; }
.focused-choice [aria-pressed="true"] { border-color: var(--blue); background: var(--blue-wash); }
.guided-shell { width: min(100%, 900px); margin: 0 auto; }
.guided-phase-nav { display: flex; align-items: center; gap: 0; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.guided-phase-nav > span { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px 10px 0; margin-right: 18px; border-bottom: 2px solid transparent; color: var(--ink-soft); font-size: .88rem; font-weight: 600; }
.guided-phase-nav > span.current { border-bottom-color: var(--blue); color: var(--ink); }
.guided-phase-nav > span.complete { color: var(--green); }
.guided-phase-nav b { display: inline-grid; place-items: center; width: 25px; height: 25px; border: 1px solid currentColor; border-radius: 50%; font: 700 .78rem var(--mono); }
.guided-phase-nav .btn { min-height: 35px; margin: 0 0 10px auto; padding: 5px 10px; background: transparent; }
.guided-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-bright); }
.guided-panel > header { padding: 22px 28px; background: #17243b; color: white; }
.guided-panel > header > span { color: #c3d3ed; font-size: .83rem; font-weight: 600; }
.guided-panel > header h3 { margin: 5px 0 0; font-size: clamp(1.4rem,2.3vw,1.8rem); }
.guided-panel > header h3 { scroll-margin-top: 100px; }
.guided-panel > header h3:focus { outline: none; }
.guided-panel > header h3:focus-visible { outline: 3px solid #9ec5ff; outline-offset: 5px; }
.guided-panel > header p { max-width: 65ch; margin: 9px 0 0; color: #dce6f7; line-height: 1.55; }
.guided-panel-body { padding: clamp(20px,3vw,30px); }
.guided-panel .focused-diagram { margin: 0 0 25px; padding: 20px; border: 0; border-radius: 9px; background: #101e31; color: #edf3fd; line-height: 1.7; }
.guided-panel .focused-choice { margin: 0 0 12px; }
.predict-stage .guided-panel-body { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 26px; }
.predict-stage .evidence-input, .predict-stage .output-choices { min-width: 0; }
.predict-stage .output-choices { align-content: start; }
.repair-stage .result-pair { margin: 0 0 22px; }
.repair-stage .repair-step { min-height: 110px; margin: 18px 0; padding: 20px 0; border-color: var(--line); }
.guided-takeaway { max-width: 72ch; padding-top: 20px; border-top: 1px solid var(--line); line-height: 1.6; }
.guided-panel .code-comparison { margin-top: 18px; }
.guided-panel .code-comparison > summary { color: var(--blue-dark); }
.repair-proof { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.repair-proof > summary { color: var(--blue-dark); }
.has-lesson-bar { padding-top: 20px; padding-bottom: 150px !important; }
.has-lesson-bar .course-header { margin-bottom: 20px; }
.has-lesson-bar .course-header > .context-link { margin: 0 0 10px; font-size: .85rem; }
.has-lesson-bar .course-header .page-title { font-size: clamp(2rem,3vw,2.7rem); }
.has-lesson-bar .course-header .page-lede { margin: 6px 0 0; font-size: .9rem; }
.has-lesson-bar .lesson-stages { margin-top: 16px; gap: 14px; }
.has-lesson-bar .lesson-stages a { padding: 8px 2px; font-size: .85rem; }
.has-lesson-bar .stage-number { display: none; }
.has-lesson-bar .lesson-next { display: none; }
.lesson-action-bar { position: fixed; z-index: 35; bottom: 16px; left: 50%; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(calc(100% - 40px),900px); padding: 14px 18px; transform: translateX(-50%); border: 1px solid var(--line); border-radius: 12px; background: var(--paper-bright); box-shadow: 0 10px 28px rgba(23,32,51,.15); }
.lesson-action-bar > div { min-width: 0; }
.lesson-action-bar small { display: block; color: var(--ink-soft); font-size: .76rem; }
.lesson-action-bar strong { display: block; margin-top: 3px; line-height: 1.35; }
.lesson-action-bar .btn { flex-shrink: 0; }
.decision-stage { overflow: hidden; border-radius: 14px; }
.decision-stage .panel-heading { background: #17243b; color: white; border-bottom: 0; }
.decision-stage .panel-heading span { color: #c3d3ed; font-size: .82rem; font-weight: 600; }
.decision-stage .panel-body { padding: clamp(20px,3vw,34px); }
.decision-stage .focused-diagram { margin: 0 0 28px; padding: 24px; border: 0; border-radius: 10px; background: #101e31; color: #edf3fd; font-size: clamp(.85rem,1.25vw,1rem); line-height: 1.8; }
.decision-stage .focused-choice { margin: 0 0 18px; }
.decision-stage .focused-choice legend, .output-choices legend { margin-bottom: 16px; font-size: 1.12rem; font-weight: 700; }
.decision-stage .focused-choice .btn, .output-choices .btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border-radius: 10px; font-weight: 600; }
.choice-mark { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid currentColor; border-radius: 7px; font: 700 .82rem var(--mono); }
.decision-stage .notice { margin-top: 18px; }
.evidence-input { min-width: 0; }
.evidence-input > span { display: block; margin-bottom: 12px; font-weight: 700; }
.evidence-input pre { max-height: 270px; overflow: auto; margin: 0; padding: 18px; border-radius: 10px; background: #101e31; color: #edf3fd; font: .86rem/1.7 var(--mono); }
.output-choices { display: grid; align-content: start; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.output-choices legend { margin-bottom: 12px; }
.output-choices .btn { min-width: 0; justify-content: flex-start; text-align: left; }
.output-choices code { overflow-wrap: anywhere; font: .85rem/1.5 var(--mono); }
.output-choices [aria-pressed="true"] { border-color: var(--blue); background: var(--blue-wash); }
.result-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 16px; }
.result-pair p { min-width: 0; margin: 0; padding: 17px; border-radius: 8px; background: var(--orange-wash); }
.result-pair p + p { background: var(--green-wash); }
.result-pair span { display: block; margin-bottom: 8px; color: var(--orange); font-size: .82rem; font-weight: 700; }
.result-pair p + p span { color: var(--green); }
.result-pair code { font: 600 .9rem/1.6 var(--mono); overflow-wrap: anywhere; }
.repair-walk { color: var(--ink); }
.repair-walk-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.repair-walk-heading h4 { margin: 0; font-size: 1.5rem; }
.repair-walk-heading span { color: var(--ink-soft); font: .83rem var(--mono); }
.repair-step { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 18px; align-items: start; min-height: 135px; margin: 26px 0 20px; padding: 26px 0; border-block: 1px solid var(--line); animation: evidence-arrive 240ms cubic-bezier(.2,.8,.2,1); }
.repair-step > span { color: var(--blue-dark); font: 600 1.6rem var(--mono); }
.repair-step p { max-width: 65ch; margin: 0; font-size: clamp(1.04rem,1.5vw,1.28rem); line-height: 1.55; }
.code-comparison { margin-top: 30px; }
.code-comparison > summary { padding: 14px 0; color: var(--blue-dark); }
.code-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.code-pair section { min-width: 0; }
.code-pair h5 { margin: 12px 0 8px; font-size: .9rem; }
.code-pair .trace-code { max-height: 340px; overflow: auto; border: 1px solid #53637b; border-radius: 8px; }
@keyframes evidence-arrive { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.full-trace { margin: 32px 0; padding-top: 18px; border-top: 1px solid var(--line-dark); }
.full-trace > summary { margin-bottom: 20px; }
.state-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.state-comparison section { min-width: 0; }
.state-comparison h3 { font-size: .85rem; margin: 0 0 8px; }
.state-comparison pre { background: var(--paper); padding: 14px; margin: 0; font: .8rem/1.5 var(--mono); overflow: auto; max-height: 250px; border: 1px solid var(--line); }
.text-trace { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 16px; }
.text-trace summary, details > summary { cursor: pointer; font-weight: 600; }
.text-trace li { margin-bottom: 20px; }
.text-trace pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.prediction-panel { margin-top: 26px; }
.prediction-panel h2 { font-size: 1.3rem; margin-bottom: 8px; }
.trace-choices { display: grid; gap: 8px; margin: 16px 0; }
.trace-choices .btn { text-align: left; justify-content: flex-start; align-items: start; gap: 12px; width: 100%; }
.trace-choices code { white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.5 var(--mono); }
.trace-choices [aria-pressed="true"] { border-color: var(--blue); background: var(--blue-wash); }
.linked-diagram { display: flex; flex-wrap: wrap; gap: 12px; }
.linked-node { display: grid; min-width: 110px; padding: 12px; border: 1px solid var(--line-dark); text-align: center; font-family: var(--mono); border-radius: 6px; }
.linked-node small, .linked-node span { font-size: .72rem; }
.linked-node strong { padding: 8px 0; }
.trace-caption { color: var(--ink-soft); font-size: .8rem; overflow-wrap: anywhere; }
.tree-level { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; margin-bottom: 16px; }
.tree-level > span { font-size: .75rem; color: var(--ink-soft); }
.tree-level > div { display: flex; justify-content: space-evenly; flex-wrap: wrap; gap: 12px; }
.tree-node { display: grid; text-align: center; border: 1px solid var(--line-dark); padding: 8px; min-width: 74px; border-radius: 6px; }
.tree-node small { font: .65rem var(--mono); }
.tree-node b { font: 600 1.1rem/2 var(--mono); }
.graph-row { display: flex; align-items: center; gap: 18px; padding: 9px; margin: 8px 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.graph-row strong { min-width: 105px; }
.graph-neighbor { display: inline-block; padding: 3px 9px; border: 1px solid var(--line-dark); font-family: var(--mono); margin: 2px; }
.stack-display { display: grid; gap: 8px; padding: 14px 0; }
.course-code-layout { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.7fr); gap: 32px; align-items: start; }
.exercise-title { max-width: 80ch; margin-bottom: 24px; }
.exercise-title h2 { margin: 0 0 6px; font-size: 1.8rem; }
.exercise-problem h3 { font-size: 1.05rem; margin: 24px 0 8px; }
.exercise-problem h3:first-child { margin-top: 0; }
.exercise-problem p { font-size: .95rem; }
.signature { display: block; font: .82rem var(--mono); overflow-wrap: anywhere; }
.code-workbench { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; background: var(--paper-bright); }
.code-workbench h3 { margin: 0; font-size: .95rem; }
.code-workbench .panel-heading span { font-size: .78rem; color: var(--ink-soft); }
.code-workbench .editor { display: block; width: 100%; min-height: 360px; resize: vertical; border: 0; border-radius: 0; tab-size: 4; }
.course-results { padding: 18px 22px; border-top: 1px solid var(--line); }
.course-results > p { margin: 0 0 12px; }
.case-result { padding: 13px 0; border-top: 1px solid var(--line); }
.case-result summary { font-size: .88rem; }
.case-result dl { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: .83rem; }
.case-result dd { margin: 0; min-width: 0; }
.case-result pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .78rem/1.6 var(--mono); max-height: 220px; overflow-y: auto; }
.code-workbench > .small-copy { margin: 16px 22px; }
.code-workbench > .notice { margin: 16px 22px; }
.authored-hint { padding-top: 12px; border-top: 1px solid var(--line); }
.solution-area { margin-top: 32px; }
.solution-area > section { margin-top: 24px; }
.solution-area .trace-code { margin: 18px 0; border-radius: 6px; }
.reasoning-checks fieldset { border: 0; border-top: 1px solid var(--line); padding: 18px 0; margin: 20px 0; }
.reasoning-checks legend { font-weight: 600; padding-right: 16px; }
.radio-answer { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; cursor: pointer; }
.radio-answer input { accent-color: var(--blue); }
#lesson-reflection { width: 100%; resize: vertical; padding: 14px; border: 1px solid var(--line-dark); border-radius: 6px; background: var(--paper-bright); color: var(--ink); }
.oa-invite { display: flex; gap: 36px; align-items: center; justify-content: space-between; border-block: 1px solid var(--line-dark); padding: 24px 0; margin: 30px 0; }
.oa-invite p { max-width: 75ch; }
.oa-invite .btn { flex-shrink: 0; }
.mixed-invite, .review-nudge { display: flex; justify-content: space-between; align-items: center; gap: 26px; border-block: 1px solid var(--line-dark); padding: 22px 0; }
.mixed-invite h2, .review-nudge h2 { margin: 0 0 6px; }
.mixed-invite p, .review-nudge p { margin: 0; max-width: 72ch; color: var(--ink-soft); }
.mixed-invite .btn { flex-shrink: 0; }
.mix-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.mix-nav [aria-current] { border-color: var(--blue); background: var(--blue-wash); }
.mix-review article { padding: 24px 0; border-top: 1px solid var(--line); }
.mix-review h2 { margin: 0 0 5px; font-size: 1.25rem; }
.mix-review p { margin: 0 0 8px; color: var(--ink-soft); }
.mix-review details { margin-top: 14px; }
.mix-next { display: flex; flex-wrap: wrap; gap: 10px; }
.review-nudge { display: block; margin-bottom: 28px; }
.review-nudge ul { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; margin: 16px 0 0; list-style: none; }
.review-nudge li { display: flex; gap: 8px; align-items: baseline; }
.review-nudge li a { color: var(--blue-dark); font-weight: 600; }
.review-nudge h3, .review-nudge details { margin-top: 18px; }
.review-nudge .review-totals { margin-top: 18px; }
.practice-catalog { margin-top: 40px; }
.practice-group { border-top: 1px solid var(--line-dark); }
.practice-group > summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; }
.practice-group > summary span { color: var(--ink-soft); font-size: .85rem; }
.practice-row { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.practice-row h3, .practice-row p { margin: 0; }
.practice-row h3 { font-size: 1.05rem; }
.practice-row p { font-size: .8rem; color: var(--ink-soft); }
.oa-header { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.oa-header h1 { font-size: 1.8rem; margin-right: auto; }
#course-timer { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.oa-questions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
.oa-questions [aria-current] { border-color: var(--blue); background: var(--blue-wash); }
.example-box { white-space: pre-wrap; overflow-wrap: anywhere; }
.editor { caret-color: #fff; }
textarea { caret-color: var(--blue); }
.course-page pre { scrollbar-color: var(--line-dark) transparent; }

@media(max-width: 1000px) {
  .course-index, .reading-layout { grid-template-columns: minmax(0,1fr) 240px; gap: 32px; }
  .trace-layout { grid-template-columns: minmax(0,1fr); }
  .trace-side { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 22px; align-items: start; }
  .prediction-panel { margin-top: 0; }
  .course-code-layout { grid-template-columns: minmax(210px,.7fr) minmax(0,1.3fr); gap: 24px; }
}
@media(max-width: 760px) {
  .course-index, .reading-layout, .course-code-layout, .trace-side { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .course-header { margin-bottom: 24px; }
  .course-header .page-title { font-size: 2.3rem; }
  .lesson-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
  .lesson-stages a { font-size: .84rem; padding: 10px 0; }
  .has-lesson-bar .lesson-stages { display: flex; gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-color: var(--line-dark) transparent; }
  .has-lesson-bar .lesson-stages a { flex-shrink: 0; }
  .has-lesson-bar .stage-number { display: none; }
  .focused-lesson { grid-template-columns: minmax(0,1fr); }
  .predict-stage .guided-panel-body { grid-template-columns: minmax(0,1fr); }
  .guided-phase-nav > span { gap: 5px; margin-right: 7px; padding-right: 7px; font-size: .75rem; }
  .guided-phase-nav b { width: 22px; height: 22px; }
  .guided-phase-nav .btn { padding-inline: 7px; font-size: .75rem; }
  .lesson-action-bar { bottom: 68px; left: 0; width: 100%; padding: 10px 14px; transform: none; border-radius: 0; gap: 10px; }
  .lesson-action-bar strong { font-size: .86rem; }
  .lesson-action-bar .btn { max-width: 52%; min-height: 42px; padding: 8px 10px; white-space: normal; font-size: .8rem; line-height: 1.2; }
  .code-pair { grid-template-columns: minmax(0,1fr); }
  .mixed-invite { align-items: flex-start; flex-direction: column; }
  .course-row { align-items: start; gap: 12px; }
  .course-row-meta { max-width: 98px; text-align: right; }
  .course-row .course-status { max-width: 110px; font-size: .77rem; }
  .lesson-title { font-size: 1.05rem; }
  .course-row p { font-size: .86rem; }
  .course-aside { margin-top: 12px; }
  .input-action { align-items: stretch; flex-direction: column; }
  .input-action .btn { align-self: start; }
  .trace-workspace .panel-heading { flex-wrap: wrap; gap: 10px; }
  .trace-workspace .panel-body { padding: 16px; }
  .trace-cell { min-width: 42px; flex-basis: 42px; }
  .trace-controls { gap: 6px; }
  .trace-controls .btn { padding: 8px 10px; min-height: 44px; }
  .state-comparison { gap: 10px; }
  .state-comparison pre { padding: 9px; font-size: .71rem; }
  .course-code-layout .editor { min-height: 300px; font-size: .8rem; }
  .course-code-layout .code-actions { flex-wrap: wrap; }
  .course-results { padding: 14px; }
  .case-result dl { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .case-result dt { margin-top: 8px; font-weight: 600; }
  .trace-code { font-size: .72rem; }
  .practice-row { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .oa-invite { flex-direction: column; align-items: start; gap: 10px; }
  .oa-invite h2 { margin-top: 0; }
  .graph-row { gap: 10px; padding: 9px 3px; }
  .graph-row strong { min-width: 86px; font-size: .76rem; }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: var(--blue); text-underline-offset: 0.18em; }

::selection { background: #ffd5bf; color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: white;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell { min-height: 100vh; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  min-height: 74px;
  padding: 0 max(24px, calc((100vw - var(--content)) / 2));
  background: rgba(244, 246, 248, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.brand {
  margin-right: 52px;
  color: var(--ink);
  font: 700 25px/1 var(--sans);
  letter-spacing: -0.025em;
  text-decoration: none;
}

.primary-nav { display: flex; align-items: stretch; gap: 6px; align-self: stretch; }
.nav-link {
  position: relative;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 0 16px;
  color: var(--ink-soft);
  border: 0;
  background: transparent;
  text-decoration: none;
  font-weight: 600;
}
.nav-link svg { width: 20px; height: 20px; stroke: currentColor; }
.nav-link:hover { color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  height: 3px;
  left: 14px;
  right: 14px;
  bottom: -1px;
  background: var(--blue);
}

.top-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.account-trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line-dark); border-radius: 9px; color: var(--ink); background: var(--paper-bright); font-weight: 700; text-decoration: none; }
.account-trigger:hover, .account-trigger[aria-current="page"] { border-color: var(--blue); color: var(--blue-dark); }
.account-trigger svg { width: 18px; height: 18px; stroke: currentColor; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; width: min(calc(100% - 48px), var(--content)); margin: 0 auto; padding: 24px 0 30px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .85rem; }
.site-footer div { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--ink-soft); }
.document-content { width: min(calc(100% - 48px), 760px); margin: 0 auto; padding: 72px 0 100px; color: var(--ink); }
.document-content h1 { margin: 0 0 10px; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.08; letter-spacing: -.035em; }
.document-content h2 { margin: 44px 0 12px; font-size: 1.45rem; }
.document-content p, .document-content li { line-height: 1.7; }
.document-content li + li { margin-top: 10px; }
.document-updated { color: var(--ink-soft); font-size: .88rem; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
}
.icon-button svg { width: 21px; height: 21px; stroke: currentColor; }
.mobile-menu { display: none; }

.page {
  width: min(calc(100% - 40px), var(--content));
  margin: 0 auto;
  padding: 36px 0 80px;
}

.page.narrow { max-width: 1120px; }
.page-title {
  margin: 0;
  max-width: 18ch;
  font: 700 clamp(2.3rem, 4vw, 3.9rem)/1.02 var(--sans);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
main h1[tabindex="-1"]:focus { outline: none; }
.page-lede {
  max-width: 760px;
  margin: 14px 0 30px;
  color: var(--ink-soft);
  font: 500 clamp(1.05rem, 1.6vw, 1.28rem)/1.55 var(--sans);
}
.crumb { margin-bottom: 6px; color: var(--ink-soft); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--line-dark);
  border-radius: 8px;
  background: var(--paper-bright);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.primary { border-color: var(--blue); background: var(--blue); color: white; box-shadow: 0 8px 22px rgba(7, 94, 232, 0.19); }
.btn.primary:hover { background: var(--blue-dark); }
.btn.orange { border-color: var(--orange); background: var(--orange); color: white; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 38px; padding: 7px 12px; font-size: 0.9rem; }
.btn[disabled] { cursor: not-allowed; opacity: 0.48; transform: none; box-shadow: none; }
.btn svg { width: 19px; height: 19px; stroke: currentColor; }

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-bright);
}

.panel-heading {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.panel-heading > * { min-width: 0; }
.panel-heading .btn { flex: 0 0 auto; }
.panel-heading h2, .panel-heading h3 { margin: 0; font-family: var(--serif); line-height: 1.1; }
.panel-body { padding: 22px; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid #efaa87;
  border-radius: 9px;
  background: var(--orange-wash);
  color: var(--ink);
}
.notice strong { display: block; color: var(--orange); font-family: var(--serif); font-size: 1.05rem; }
.notice p { margin: 4px 0 0; }
.notice .status-icon { flex: 0 0 auto; }
.notice.success { border-color: #9bcbb2; background: var(--green-wash); }
.notice.success strong { color: var(--green); }
.status-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: white;
  font-weight: 800;
}
.status-icon svg { width: 18px; height: 18px; stroke: currentColor; }
.status-icon.success { background: var(--green); }

.home-hero { display: grid; grid-template-columns: minmax(300px, 0.68fr) minmax(0, 1.32fr); gap: 42px; align-items: center; min-height: 650px; }
.home-copy { grid-column: auto; padding-top: 0; }
.home-copy .page-title { max-width: 10ch; font-size: clamp(3rem, 5vw, 5rem); }
.home-copy .page-lede { max-width: 560px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.home-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.home-guest-note { margin: 14px 0 0; color: var(--ink-soft); font-size: .88rem; }
.home-hero .panel .btn.primary { margin-top: 18px; }
.demo-panel { min-height: 520px; box-shadow: var(--shadow); }
.demo-side { padding: 26px 0 26px 32px; border-left: 1px solid var(--line); }
.demo-side h2 { margin: 0 0 12px; font: 700 2rem/1.1 var(--serif); }
.demo-side ul { padding: 0; margin: 24px 0; list-style: none; }
.demo-side li { display: flex; gap: 10px; margin: 13px 0; }
.demo-side li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 23px; height: 23px; border-radius: 50%; background: var(--orange); color: white; font-size: 0.82rem; font-weight: 900; }
.demo-side .btn { width: 100%; margin-top: 10px; }
.section-rule { margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.next-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr); gap: 28px; align-items: stretch; }
.next-primary { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 28px 0; }
.next-primary h2, .next-secondary h2 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -0.02em; }
.next-primary p, .next-secondary p { margin: 0; color: var(--ink-soft); max-width: 58ch; }
.next-secondary, .next-actions > article:last-child { padding: 28px; border-left: 1px solid var(--line); background: var(--paper-bright); }
.context-link { display: inline-block; max-width: 100%; margin-top: 18px; font-weight: 600; overflow-wrap: anywhere; }

.array-editor { padding: 20px; }
.array-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.array-label strong { font-family: var(--serif); font-size: 1.2rem; }
.array-cells { display: grid; grid-template-columns: repeat(5, minmax(54px, 1fr)); max-width: 720px; margin: 0 auto; }
.array-cell { position: relative; }
.array-cell label { display: block; margin-bottom: 5px; text-align: center; color: var(--ink-soft); font: 0.85rem var(--mono); }
.array-cell input {
  width: 100%;
  height: 64px;
  border: 1px solid var(--ink);
  border-left: 0;
  border-radius: 0;
  background: var(--paper-bright);
  color: var(--ink);
  text-align: center;
  font: 600 1.35rem var(--mono);
}
.array-cell:first-child input { border-left: 1px solid var(--ink); }
.array-cell.active input { background: var(--blue-wash); box-shadow: inset 0 0 0 3px var(--blue); }
.array-cell.duplicate input { background: var(--orange-wash); box-shadow: inset 0 0 0 2px var(--orange); }
.demo-state { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.state-value { padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-bright); font-family: var(--mono); }
.demo-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.keyboard-note { color: var(--ink-soft); font-size: 0.9rem; }
kbd { padding: 3px 7px; border: 1px solid var(--line-dark); border-bottom-width: 2px; border-radius: 6px; background: var(--paper-bright); font: 0.78rem var(--mono); }

.path-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.6fr); gap: 22px; }
.topic-group { border-top: 1px solid var(--line); }
.topic-group:first-child { border-top: 0; }
.topic-title { display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px 12px; }
.topic-title h2 { margin: 0; font: 700 1.5rem var(--serif); }
.lesson-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; padding: 15px 20px; border-top: 1px solid var(--line); }
.lesson-row.current { background: var(--blue-wash); }
.lesson-row button { border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.lesson-row h3 { margin: 0 0 2px; font: 700 1.12rem var(--serif); }
.lesson-row p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.mastery { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.mastery.done { background: var(--green-wash); color: var(--green); }
.mastery.practice { background: var(--blue-wash); color: var(--blue-dark); }
.mastery.review { background: var(--orange-wash); color: var(--orange); }
.mastery.locked { background: #e8ebef; color: #56657a; }
.next-panel { position: sticky; top: 96px; align-self: start; }
.next-panel h2 { margin: 0 0 4px; font: 700 1.8rem var(--serif); }
.next-panel dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin: 22px 0; }
.next-panel dt { color: var(--ink-soft); }
.next-panel dd { margin: 0; font-weight: 700; }

.lesson-header { display: flex; justify-content: space-between; gap: 30px; align-items: start; margin-bottom: 24px; }
.lesson-progress { min-width: 250px; padding-top: 10px; }
.progress-dots { display: flex; align-items: center; gap: 0; margin-top: 10px; }
.progress-dots span { position: relative; flex: 1; height: 2px; background: var(--line-dark); }
.progress-dots span::before { content: ""; position: absolute; z-index: 1; left: -1px; top: -6px; width: 12px; height: 12px; border: 2px solid var(--line-dark); border-radius: 50%; background: var(--paper); }
.progress-dots span.active { background: var(--blue); }
.progress-dots span.active::before { border-color: var(--blue); background: var(--blue); }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.75fr); gap: 18px; }
.reason-panel { min-height: 550px; }
.reason-panel textarea { width: 100%; min-height: 170px; padding: 12px; resize: vertical; border: 1px solid var(--line-dark); border-radius: 8px; background: var(--paper-bright); color: var(--ink); }
.tabs { display: flex; gap: 8px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.tab { padding: 16px 10px 12px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--ink-soft); font-weight: 700; }
.tab.active { border-bottom-color: var(--blue); color: var(--ink); }
.state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.state-grid > div { padding: 16px; border-top: 1px solid var(--line); }
.state-grid strong { display: block; margin-bottom: 6px; font-family: var(--serif); }

.choice-list { display: grid; gap: 10px; margin-top: 18px; }
.choice {
  display: flex;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--line-dark);
  border-radius: 12px;
  background: var(--paper-bright);
  color: var(--ink);
  text-align: left;
}
.choice:hover, .choice.selected { border-color: var(--blue); background: var(--blue-wash); }
.choice.correct { border-color: var(--green); background: var(--green-wash); }
.choice.wrong { border-color: var(--orange); background: var(--orange-wash); }
.choice-key { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }

.code-layout { display: grid; grid-template-columns: minmax(260px, 0.56fr) minmax(420px, 1.15fr) minmax(280px, 0.6fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.code-column { min-width: 0; background: var(--paper-bright); }
.code-column .panel-heading { min-height: 66px; }
.problem-copy { padding: 20px; }
.problem-copy h3 { margin: 26px 0 8px; font-family: var(--serif); }
.problem-copy h3:first-child { margin-top: 0; }
.example-box { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-family: var(--mono); font-size: 0.9rem; }
.editor {
  display: block;
  width: 100%;
  min-height: 520px;
  padding: 20px;
  resize: vertical;
  border: 0;
  background: #0d1b2a;
  color: #eaf0f7;
  caret-color: #67a1ff;
  font: 0.94rem/1.7 var(--mono);
  tab-size: 4;
}
.editor:focus { outline-offset: -3px; }
.results-panel { padding: 16px; }
.test-summary { display: flex; gap: 16px; margin-bottom: 16px; font-weight: 700; }
.test-summary span, .saved { display: inline-flex; align-items: center; gap: 6px; }
.test-summary svg, .saved svg { width: 17px; height: 17px; }
.test-case { padding: 12px 0; border-top: 1px solid var(--line); }
.test-case:first-of-type { border-top: 0; }
.test-case strong { display: flex; align-items: center; gap: 8px; }
.code-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: var(--paper-bright); }
.hint { margin-top: 14px; }
.hint summary { cursor: pointer; padding: 12px; border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.hint p { padding: 0 12px; color: var(--ink-soft); }

.practice-intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: start; }
.practice-list { margin: 0; padding: 0; list-style: none; }
.practice-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.assessment-shell { min-height: 100vh; background: var(--paper-bright); }
.assessment-topbar { display: flex; align-items: center; gap: 18px; min-height: 72px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.assessment-topbar .brand { margin-right: auto; }
.timer { display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; font-weight: 800; }
.assessment-grid { display: grid; grid-template-columns: 250px minmax(360px, 0.8fr) minmax(520px, 1.2fr); min-height: calc(100vh - 72px); }
.question-nav { padding: 24px; border-right: 1px solid var(--line); }
.question-link { display: flex; gap: 12px; width: 100%; padding: 14px 10px; border: 0; border-left: 3px solid transparent; background: transparent; color: var(--ink); text-align: left; }
.question-link.current { border-left-color: var(--blue); background: var(--blue-wash); }
.assessment-copy { padding: 34px; overflow: auto; border-right: 1px solid var(--line); }
.assessment-editor { display: flex; min-width: 0; flex-direction: column; }
.assessment-editor .editor { flex: 1; min-height: 430px; }
.mobile-oa-handoff { display: none; margin-top: 18px; }

.review-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; }
.review-nav { padding: 16px; }
.review-question { padding: 15px 8px; border-top: 1px solid var(--line); }
.review-question:first-child { border-top: 0; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.comparison section { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.comparison h3 { margin: 0 0 8px; font-family: var(--serif); }
.counterexample { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin: 16px 0; }
.counterexample div { padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-bright); }
.counterexample strong { display: block; margin-top: 4px; font: 600 1.1rem var(--mono); }

.lab-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr) 260px; gap: 16px; }

/* System Design uses the course's reading rhythm and one persistent next action. */
.system-page { max-width: 1320px; padding-bottom: 130px; }
.system-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 52px; align-items: end; padding: clamp(30px,5vw,68px); margin: 0 0 42px; border-radius: 16px; background: #17243b; color: #fff; }
.system-hero h1 { max-width: 12ch; margin: 0; font-size: clamp(2.7rem,5.8vw,5.5rem); line-height: 1.03; letter-spacing: -.035em; }
.system-hero p { max-width: 53ch; margin: 24px 0; color: #dce6f7; font-size: 1.1rem; line-height: 1.6; }
.system-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.system-hero-actions .btn:not(.primary) { background: transparent; color: #fff; border-color: #8799b4; }
.system-hero-progress { display: grid; gap: 4px; color: #dce6f7; }
.system-hero-progress strong { color: #fff; font-size: 3.2rem; line-height: 1; }
.system-hero-progress strong span { color: #a6b7cf; font-size: 1.5rem; }
.system-hero-progress > span { font-size: .88rem; }
.system-progress-track { height: 5px; margin-top: 15px; background: #53637b; border-radius: 4px; overflow: hidden; }
.system-progress-track i { display: block; height: 100%; background: #91b9ff; }
.system-intro { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 30px; align-items: baseline; border-bottom: 1px solid var(--line-dark); padding-bottom: 30px; }
.system-intro h2 { margin: 0; font-size: clamp(1.6rem,2.5vw,2.35rem); }
.system-intro p { max-width: 67ch; margin: 0; line-height: 1.65; color: var(--ink-soft); }
.system-group { margin-top: 42px; }
.system-group > h2 { margin: 0; padding-bottom: 14px; border-bottom: 2px solid var(--ink); font-size: 1.3rem; }
.system-row { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding: 21px 0; border-bottom: 1px solid var(--line); }
.system-row > div:first-child { min-width: 0; }
.system-row-title { color: var(--ink); font-size: 1.12rem; font-weight: 700; text-decoration: none; }
.system-row-title:hover { color: var(--blue); text-decoration: underline; }
.system-row p { margin: 5px 0 0; color: var(--ink-soft); font-size: .91rem; line-height: 1.5; }
.system-row-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px 16px; min-width: 280px; font-size: .84rem; }
.system-row-actions span { color: var(--ink-soft); }
.system-row-actions a { color: var(--blue-dark); font-weight: 600; text-underline-offset: 3px; }
.system-transfer { margin-top: 52px; padding: 28px 0; border-block: 1px solid var(--line-dark); }
.system-transfer h2 { margin: 0; }
.system-transfer p { color: var(--ink-soft); }
.system-header { margin-bottom: 26px; }
.system-header > .context-link { margin: 0 0 18px; }
.system-header-copy { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.system-header .page-title { margin: 0; font-size: clamp(2.2rem,3.8vw,3.6rem); }
.system-header .page-lede { max-width: 73ch; margin: 9px 0 0; }
.system-duration { flex-shrink: 0; color: var(--ink-soft); font-size: .85rem; }
.system-stages { display: flex; gap: 4px; margin-top: 27px; border-bottom: 1px solid var(--line-dark); overflow-x: auto; scrollbar-width: none; }
.system-stages::-webkit-scrollbar { display: none; }
.system-stages a { display: flex; align-items: center; gap: 8px; flex: 1 0 auto; min-height: 50px; padding: 8px 10px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--ink-soft); font-size: .86rem; text-decoration: none; }
.system-stages a[aria-current] { color: var(--blue-dark); border-bottom-color: var(--blue); font-weight: 700; }
.system-stages b { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font: 600 .75rem var(--mono); }
.system-stage-body { min-height: 430px; }
.system-case-page { padding-bottom: 170px; }
.system-reading { max-width: 760px; padding: 10px 0 40px; font-size: 1.03rem; line-height: 1.7; }
.system-reading h2 { margin: 10px 0 12px; font-size: clamp(1.7rem,2.5vw,2.25rem); line-height: 1.2; }
.system-reading li { margin: 8px 0; }
.system-choice { display: grid; gap: 9px; margin: 28px 0; padding: 0; border: 0; }
.system-choice legend { margin-bottom: 12px; font-weight: 700; }
.system-choice .btn { justify-content: flex-start; min-height: 52px; text-align: left; white-space: normal; }
.system-choice .selected { border-color: var(--blue); background: var(--blue-wash); color: var(--blue-dark); }
.system-field { display: grid; gap: 8px; margin: 26px 0; font-weight: 700; }
.system-field input, .system-field textarea { width: 100%; padding: 12px; border: 1px solid var(--line-dark); border-radius: 8px; background: var(--paper-bright); color: var(--ink); font: 400 .96rem/1.5 var(--sans); }
.system-field textarea { resize: vertical; min-height: 130px; }
.system-reading .notice { margin-top: 22px; }
.system-lesson { max-width: 1160px; padding: 10px 0 40px; }
.system-lesson h2 { margin: 0 0 12px; font-size: clamp(1.8rem,2.7vw,2.4rem); line-height: 1.2; }
.system-scene { max-width: 64ch; margin: 0; color: var(--ink-soft); font-size: 1.07rem; line-height: 1.65; }
.design-build-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); gap: clamp(25px,4vw,64px); align-items: start; margin-top: 30px; }
.design-path { margin: 0; padding: 0; list-style: none; }
.design-path li { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 16px; padding: 0 0 25px; }
.design-path li:not(:last-child)::after { content: ''; position: absolute; top: 37px; bottom: 1px; left: 17px; width: 1px; background: var(--line-dark); }
.design-path li:last-child { padding-bottom: 0; }
.design-step-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-dark); border-radius: 50%; background: var(--paper-bright); color: var(--blue-dark); font: 700 .85rem var(--mono); }
.design-path strong { display: block; padding-top: 3px; font-size: 1.02rem; }
.design-path p { max-width: 66ch; margin: 5px 0 0; color: var(--ink-soft); line-height: 1.55; }
.design-path-pause { padding: 17px !important; border: 1px dashed var(--blue); border-radius: 10px; background: var(--blue-wash); }
.design-path-pause .design-step-number { border-color: var(--blue); background: var(--paper-bright); }
.design-decision { max-width: 760px; margin: 0 0 18px; }
.design-decision legend { font-size: 1.1rem; }
.system-lesson .notice { max-width: 760px; margin-top: 18px; }
.design-contract { max-width: 760px; margin-top: 36px; padding-top: 23px; border-top: 1px solid var(--line-dark); }
.design-contract h3 { margin: 0 0 8px; font-size: 1.35rem; }
.design-contract > p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.design-contract .system-field { margin: 20px 0 13px; }
.design-contract details { border-top: 1px solid var(--line); padding: 12px 0; }
.design-contract summary { color: var(--blue-dark); font-weight: 700; cursor: pointer; }
.design-contract code { overflow-wrap: anywhere; }
.system-scale-note { max-width: 66ch; margin: 25px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.design-failure { max-width: 760px; margin-top: 26px; padding: 18px 0; border-block: 1px solid var(--line-dark); }
.design-failure strong { display: block; margin-bottom: 4px; }
.design-failure p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.system-aside { border-top: 2px solid var(--ink); padding-top: 17px; color: var(--ink-soft); font-size: .91rem; line-height: 1.65; }
.system-aside h3 { margin: 0 0 10px; color: var(--ink); font-size: 1.05rem; }
.system-aside ul { padding-left: 20px; }
.system-reference { margin: 28px 0; padding: 20px 24px; border-radius: 10px; background: var(--blue-wash); }
.system-reference h3 { margin-top: 0; }
.system-rubric { padding: 0; list-style: none; }
.system-rubric li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.system-rubric li small { display: block; padding-left: 22px; color: var(--ink-soft); font-size: .78rem; }
.system-rubric input { accent-color: var(--blue); }
.coach-locked { padding: 18px 0; border-top: 1px solid var(--line); }
.coach-locked strong { display: block; color: var(--ink); }
.coach-locked p { margin: 7px 0; }
.coach-locked a { font-weight: 700; }
.system-interview-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 54px; align-items: start; }
.system-interview-form { max-width: 780px; }
.system-interview-form h2 { margin: 0 0 22px; }
.system-interview-form .system-field { margin: 0 0 23px; }
.system-ai-feedback { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); }
.system-ai-feedback h4 { margin: 15px 0 4px; color: var(--ink); }
.system-ai-feedback li { margin: 6px 0; }
.system-action-bar { width: min(calc(100% - 40px),950px); }
@media (max-width: 900px) { .system-interview-layout { grid-template-columns: 1fr; gap: 30px; } .system-aside { max-width: 700px; } }
@media (max-width: 900px) { .design-build-grid { grid-template-columns: 1fr; gap: 26px; } }
@media (max-width: 760px) { .system-page { padding-bottom: 190px; } .system-hero, .system-intro { grid-template-columns: 1fr; gap: 20px; } .system-hero { padding: 30px 24px; } .system-hero h1 { font-size: 3.1rem; } .system-hero-progress { max-width: 200px; } .system-row { display: block; } .system-row-actions { justify-content: flex-start; min-width: 0; margin-top: 12px; } .system-row-actions span { flex-basis: 100%; } .system-header-copy { display: block; } .system-duration { display: block; margin-top: 8px; } .system-stages a { flex: 0 0 auto; } .system-action-bar { bottom: 68px; left: 0; width: 100%; padding: 10px 14px; transform: none; border-radius: 0; } }
.lab-controls { padding: 20px; }
.control { padding: 16px 0; border-top: 1px solid var(--line); }
.control:first-child { border-top: 0; }
.control label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.control output { font-family: var(--mono); }
input[type="range"] { width: 100%; margin-top: 14px; accent-color: var(--blue); }
.topology { position: relative; min-height: 430px; padding: 28px; }
.topology-flow { display: grid; grid-template-columns: 0.9fr 0.8fr 0.9fr 0.8fr; gap: 38px; align-items: center; min-height: 280px; }
.node { position: relative; padding: 18px 10px; border: 1px solid var(--blue); border-radius: 8px; background: var(--paper-bright); text-align: center; font-weight: 700; }
.node::after { content: ""; position: absolute; top: 50%; left: calc(100% + 2px); width: 38px; height: 2px; background: var(--blue); }
.node:last-child::after { display: none; }
.node.hot { border-color: var(--orange); background: var(--orange-wash); }
.server-stack { display: grid; gap: 10px; }
.flow-dot { position: absolute; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); animation: flow 1.8s linear infinite; }
@keyframes flow { from { left: 10%; } to { left: 88%; } }
.queue { display: flex; gap: 3px; justify-content: center; margin-top: 10px; }
.queue span { width: 12px; height: 24px; border: 1px solid var(--orange); background: var(--orange); }
.queue span.empty { background: transparent; }
.metrics { padding: 18px; }
.metric { padding: 14px 0; border-top: 1px solid var(--line); }
.metric:first-child { border-top: 0; }
.metric strong { display: block; margin-top: 3px; color: var(--orange); font: 700 1.8rem var(--serif); font-variant-numeric: tabular-nums; }
.assumptions { margin-top: 16px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; }

.progress-layout { display: grid; grid-template-columns: 1.4fr 0.6fr; gap: 20px; }
.skill-band { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--line); }
.skill-band:first-child { border-top: 0; }
.skill-label { padding: 20px; }
.skill-label h3 { margin: 0; font: 700 1.35rem var(--serif); }
.skill-label p { margin: 5px 0 0; color: var(--ink-soft); font-size: 0.9rem; }
.evidence { display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; border-left: 1px solid var(--line); }
.evidence div { padding: 13px; border-top: 1px solid var(--line); }
.evidence div:nth-child(-n+3) { border-top: 0; }
.continue-stack { display: grid; gap: 14px; align-self: start; }
.continue-item { padding: 20px; }
.continue-item h3 { margin: 0 0 4px; font: 700 1.35rem var(--serif); }

.account-page { max-width: 1280px; padding-top: 54px; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(370px, .92fr); min-height: 560px; overflow: hidden; border-radius: 16px; box-shadow: 0 18px 50px rgba(23,32,51,.11); }
.account-story { display: flex; flex-direction: column; justify-content: space-between; gap: 42px; min-width: 0; padding: clamp(32px,5vw,76px); background: var(--ink); color: #fff; }
.account-story h1 { margin: 0; max-width: 12ch; font-size: clamp(2.7rem,4.1vw,4.5rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.account-story > p { max-width: 48ch; margin: -20px 0 0; color: #d9e4f3; font-size: 1.08rem; line-height: 1.65; }
.account-sample { max-width: 550px; padding-top: 22px; border-top: 1px solid #62718a; }
.account-sample strong { display: block; color: #b7c8de; font-size: .82rem; letter-spacing: .02em; }
.account-sample code { display: block; margin: 10px 0; color: #fff; font: 600 clamp(1.3rem,2.5vw,2rem) var(--mono); }
.account-sample p { margin: 8px 0 14px; color: #e9f0f9; }
.account-sample a { display: inline-flex; align-items: center; gap: 7px; color: #a9caff; font-weight: 700; }
.account-sample svg, .account-links svg, .guest-link svg, .account-bottom svg, .settings-account-line svg { width: 17px; height: 17px; stroke: currentColor; }
.account-entry { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(32px,5vw,76px); background: var(--paper-bright); }
.account-entry h2 { margin: 0 0 8px; font-size: clamp(1.85rem,2.5vw,2.5rem); line-height: 1.13; letter-spacing: -.025em; }
.account-entry > p { max-width: 42ch; margin: 0 0 25px; color: var(--ink-soft); }
.auth-providers { display: grid; gap: 11px; max-width: 400px; }
#google-signin { min-width: 0; width: 100%; }
#google-signin[aria-live] { min-height: 40px; }
.auth-providers .provider-button { min-height: 40px; padding: 4px 10px; border-radius: 4px; font-size: .88rem; }
.provider-button { display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 13px; width: 100%; min-height: 62px; padding: 10px 17px; border: 1px solid var(--line-dark); border-radius: 10px; background: #fff; color: var(--ink); font-weight: 700; text-align: left; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.provider-button:hover { border-color: var(--blue); background: var(--blue-wash); transform: translateY(-1px); }
.provider-button:disabled { cursor: wait; opacity: .6; transform: none; }
.provider-button > svg { width: 18px; height: 18px; stroke: currentColor; }
.provider-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; font-size: 1.1rem; }
.github-mark { color: #fff; background: var(--ink); }
.github-mark svg { width: 19px; height: 19px; stroke: currentColor; }
.account-entry .account-note { margin: 18px 0 0; font-size: .86rem; line-height: 1.5; }
.guest-link { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 32px; font-weight: 700; }
.account-email { color: var(--ink) !important; font-weight: 700; overflow-wrap: anywhere; }
.account-providers { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 25px; }
.account-providers span { padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: .8rem; font-weight: 700; }
.account-links { display: grid; border-block: 1px solid var(--line); }
.account-links a, .account-links button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-decoration: none; text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.account-links a:last-child, .account-links button:last-child { border-bottom: 0; }
.account-links a:hover, .account-links button:hover { color: var(--blue); }
.account-links button svg { width: 17px; height: 17px; stroke: currentColor; }
.account-signout { align-self: flex-start; margin-top: 25px; }
.coach-access-panel { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 42px; margin-top: 18px; padding: clamp(26px,4vw,48px); border: 1px solid var(--line); border-radius: 14px; background: var(--paper-bright); }
.coach-access-panel h2 { margin: 8px 0; font-size: 1.6rem; }
.coach-access-panel h3 { margin: 0 0 8px; font-size: 1.08rem; }
.coach-access-panel p { max-width: 55ch; color: var(--ink-soft); line-height: 1.55; }
.coach-invite-manager { border-left: 1px solid var(--line); padding-left: 42px; }
.coach-invite-manager label { display: block; margin: 18px 0 7px; font-weight: 700; }
.coach-invite-form { display: flex; gap: 8px; }
.coach-invite-form input { flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--line-dark); border-radius: 7px; font: inherit; }
.coach-invite-manager > h3:last-of-type { margin-top: 26px; }
.coach-invite-list { margin: 0; padding: 0; list-style: none; }
.coach-invite-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.account-bottom { display: flex; justify-content: space-between; gap: 18px; margin-top: 18px; color: var(--ink-soft); font-size: .88rem; }
.account-bottom a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.merge-comparison { margin: 2px 0 24px; border-block: 1px solid var(--line); }
.merge-comparison > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.merge-comparison > div:last-child { border-bottom: 0; }
.merge-comparison strong { display: block; margin-bottom: 4px; }
.merge-comparison p { margin: 0; color: var(--ink-soft); font-size: .9rem; }
.account-entry > .btn { justify-content: center; width: 100%; margin-bottom: 9px; }
.text-action { align-self: center; margin-top: 14px; padding: 7px; border: 0; background: transparent; color: var(--blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.settings-page { max-width: 1280px; }
.settings-page > .context-link { margin: 0 0 24px; }
.settings-account-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; margin-bottom: 22px; border-block: 1px solid var(--line); }
.settings-account-line a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.settings-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.settings-layout .form-grid .btn { justify-self: start; }
.settings-layout .panel-body > p { margin: 0 0 20px; color: var(--ink-soft); }
.settings-layout .demo-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.settings-layout [data-action="delete-progress"] { color: var(--orange); border-color: var(--orange); }
.form-grid { display: grid; gap: 14px; }
.auth-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-error { min-height: 1.5em; color: var(--orange); font-weight: 600; }
.sync-status { color: var(--ink-soft); font-size: 0.9rem; }
.field label { display: block; margin-bottom: 6px; font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line-dark);
  border-radius: 10px;
  background: var(--paper-bright);
  color: var(--ink);
}
.field small { display: block; margin-top: 5px; color: var(--ink-soft); }
.save-list { padding: 0; list-style: none; }
.save-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.save-list li:first-child { border-top: 0; }
.settings-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line); }
.setting { padding: 18px; background: var(--paper-bright); }
.setting strong { display: block; margin-bottom: 8px; font-family: var(--serif); }
.segmented { display: flex; }
.segmented button { flex: 1; padding: 8px; border: 1px solid var(--line-dark); border-left: 0; background: var(--paper-bright); color: var(--ink); }
.segmented button:first-child { border-left: 1px solid var(--line-dark); border-radius: 9px 0 0 9px; }
.segmented button:last-child { border-radius: 0 9px 9px 0; }
.segmented button.selected { background: var(--blue-wash); color: var(--blue-dark); box-shadow: inset 0 0 0 2px var(--blue); }

.toast { position: fixed; z-index: 80; right: 22px; bottom: 22px; max-width: 360px; padding: 14px 18px; border-radius: 12px; background: var(--ink); color: white; box-shadow: var(--shadow); animation: toast-in 220ms ease-out; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

.mobile-bottom-nav { display: none; }

@media (max-width: 1080px) {
  .home-hero, .path-layout, .lesson-layout, .practice-intro, .progress-layout, .settings-layout { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .account-story { gap: 28px; }
  .account-story > p { margin-top: 0; }
  .home-copy { max-width: 720px; }
  .next-actions { grid-template-columns: 1fr; }
  .next-secondary { border-left: 0; border-top: 1px solid var(--line); }
  .demo-side { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .code-layout { grid-template-columns: 1fr; }
  .code-column { border-top: 1px solid var(--line); }
  .lab-layout { grid-template-columns: 260px 1fr; }
  .metrics { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .metric { border-top: 0; border-left: 1px solid var(--line); padding-left: 16px; }
  .metric:first-child { border-left: 0; }
  .assessment-grid { grid-template-columns: 190px 0.85fr 1.15fr; }
  .settings-strip { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  body { padding-bottom: 92px; }
  .primary-nav { display: none; }
  .topbar { min-height: 64px; padding: 0 18px; background: var(--ink); border-bottom: 0; }
  .brand { color: white; font-size: 25px; }
  .account-trigger { justify-content: center; width: 44px; height: 44px; padding: 0; border-color: #71809a; background: transparent; color: white; }
  .account-trigger:hover, .account-trigger[aria-current="page"] { border-color: #a9caff; color: #a9caff; }
  .account-trigger span { display: none; }
  .icon-button { border-color: #617186; color: white; }
  .page { width: min(calc(100% - 28px), var(--content)); padding: 28px 0 52px; overflow-x: clip; }
  .page-title { font-size: clamp(2.45rem, 13vw, 4rem); }
  .home-copy { padding-top: 6px; }
  .home-hero { min-width: 0; width: 100%; min-height: 0; gap: 24px; }
  .home-hero > * { min-width: 0; max-width: 100%; }
  .demo-panel { width: 100%; overflow: hidden; }
  .demo-panel .panel-heading { flex-wrap: wrap; }
  .array-editor { min-width: 0; max-width: 100%; overflow: hidden; }
  .array-label { flex-wrap: wrap; gap: 4px 12px; }
  .home-copy .page-title { font-size: clamp(2.8rem, 13vw, 4rem); }
  .next-primary { grid-template-columns: 1fr; }
  .lesson-header { display: block; }
  .lesson-progress { min-width: 0; margin-top: 20px; }
  .array-cells { width: 100%; max-width: 100%; overflow-x: auto; grid-template-columns: repeat(5, 72px); justify-content: start; padding-bottom: 8px; }
  .demo-state, .state-grid, .comparison, .counterexample { grid-template-columns: 1fr; }
  .path-layout { gap: 14px; }
  .next-panel { position: static; order: -1; }
  .lesson-row { grid-template-columns: 28px 1fr; }
  .lesson-row .mastery { grid-column: 2; justify-self: start; }
  .code-layout { display: block; }
  .code-layout .code-column:nth-child(2), .code-layout .code-column:nth-child(3) { display: none; }
  .mobile-code-handoff { display: block !important; }
  .review-layout { grid-template-columns: 1fr; }
  .review-nav { display: flex; overflow-x: auto; gap: 10px; }
  .review-question { min-width: 180px; border-top: 0; border-left: 1px solid var(--line); padding-left: 12px; }
  .lab-layout { grid-template-columns: 1fr; }
  .lab-controls { order: 2; }
  .metrics { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .topology { padding: 20px 12px; }
  .topology-flow { grid-template-columns: 1fr; gap: 22px; }
  .node::after { top: calc(100% + 1px); left: 50%; width: 2px; height: 22px; }
  .flow-dot { display: none; }
  .skill-band { grid-template-columns: 1fr; }
  .evidence { border-left: 0; border-top: 1px solid var(--line); grid-template-columns: 1fr; }
  .evidence div:nth-child(n) { border-top: 1px solid var(--line); }
  .settings-strip { grid-template-columns: 1fr; }
  .account-page { padding-top: 28px; }
  .account-layout { border-radius: 12px; }
  .account-entry { order: -1; }
  .account-story, .account-entry { padding: 30px 23px; }
  .account-story h1 { font-size: clamp(2.55rem,11vw,3.5rem); }
  .coach-access-panel { grid-template-columns: 1fr; gap: 24px; padding: 26px 23px; }
  .coach-invite-manager { border-left: 0; border-top: 1px solid var(--line); padding: 24px 0 0; }
  .coach-invite-form { flex-direction: column; }
  .account-bottom, .settings-account-line { flex-direction: column; align-items: flex-start; }
  .assessment-topbar { padding: 0 12px; gap: 10px; }
  .assessment-topbar .brand { font-size: 22px; }
  .assessment-topbar .saved { display: none; }
  .assessment-grid { grid-template-columns: 1fr; }
  .question-nav { display: flex; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .question-link { width: auto; min-width: 150px; border-left: 0; border-bottom: 3px solid transparent; }
  .question-link.current { border-bottom-color: var(--blue); }
  .assessment-copy { padding: 24px 18px; border-right: 0; }
  .assessment-editor { display: none; }
  .mobile-oa-handoff { display: flex; }
  .mobile-bottom-nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); min-height: 68px; border-top: 1px solid var(--line); background: var(--paper-bright); }
  .mobile-bottom-nav a { display: grid; place-items: center; align-content: center; gap: 2px; color: var(--ink-soft); font-size: 0.75rem; text-decoration: none; }
  .mobile-bottom-nav a[aria-current="page"] { color: var(--blue); }
  .mobile-bottom-nav svg { width: 21px; height: 21px; stroke: currentColor; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
[data-motion="reduce"] { scroll-behavior: auto !important; }

[data-theme="contrast"] {
  --paper: #ffffff;
  --paper-bright: #ffffff;
  --ink: #000000;
  --ink-soft: #1f2937;
  --blue: #0039a6;
  --blue-dark: #00296f;
  --blue-wash: #dbeafe;
  --orange: #a52a00;
  --orange-wash: #ffeadf;
  --green: #005f36;
  --green-wash: #dff7e9;
  --line: #667085;
  --line-dark: #344054;
}

[data-motion="reduce"] .flow-dot { display: none; }
[data-font-size="small"] .editor { font-size: 0.84rem; }
[data-font-size="medium"] .editor { font-size: 0.94rem; }
[data-font-size="large"] .editor { font-size: 1.08rem; }

/* CodeMirror is the visible editor; the textarea bridges existing draft saving. */
.code-workbench textarea.editor[hidden] { display: none; }
.python-editor { min-width: 0; background: #101e31; color: #e6edf7; }
.editor-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #30415b; background: #14243a; }
.editor-toolbar > div { display: flex; gap: 6px; }
.editor-toolbar button { padding: 5px 10px; border: 1px solid #526580; border-radius: 5px; background: transparent; color: #e6edf7; font-size: .8rem; min-height: 32px; }
.editor-toolbar button:hover:not(:disabled) { background: #244264; }
.editor-toolbar button:disabled { opacity: .5; cursor: default; }
.editor-toolbar button:focus-visible, .python-editor .cm-panel :focus-visible { outline-color: #9fc7ff; }
.editor-position { font: .74rem var(--mono); color: #b8c7de; white-space: nowrap; }
.editor-surface { min-width: 0; }
.editor-surface .cm-editor { height: 420px; }
.editor-surface:focus-within { outline: 2px solid #8bbcff; outline-offset: -2px; }
.editor-help { padding: 9px 14px; border-top: 1px solid #30415b; color: #bacbe2; font-size: .74rem; }
.editor-message { padding: 0 14px 10px; color: #dbe8fc; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 140px; overflow: auto; }
.editor-message:empty { display: none; }
[data-font-size="small"] .python-editor { --editor-font-size: 13px; }
[data-font-size="large"] .python-editor { --editor-font-size: 17px; }
@media(max-width:760px) {
  .editor-surface .cm-editor { height: 350px; }
  .editor-toolbar button { min-height: 44px; }
  .editor-toolbar { padding: 8px 10px; }
}

/* Beginner walkthrough: one number and one decision at a time. */
.duplicate-walkthrough { grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); }
.seen-memory { padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.seen-memory h3 { margin: 0 0 12px; font-size: 1rem; }
.memory-value { display: inline-block; padding: 5px 12px; border: 1px solid var(--line-dark); border-radius: 5px; background: white; font-family: var(--mono); }
.duplicate-walkthrough details { margin-top: 24px; }
.duplicate-walkthrough .trace-choices button { text-align: left; white-space: normal; }
.shortcut-review { margin-top: 36px; }
@media(max-width: 760px) { .duplicate-walkthrough { grid-template-columns: 1fr; } }

/* Course dashboards: a first move up front, then the path through the course. */
.learning-dashboard, .progress-dashboard { max-width: 1360px; }
.learn-launch { overflow: hidden; border-radius: 14px; background: #17243b; color: #fff; }
.learn-launch-copy { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.7fr); gap: 12px clamp(30px,5vw,76px); align-items: start; padding: clamp(30px,3.5vw,48px); }
.learn-launch-copy .page-title { max-width: 18ch; font-size: clamp(2.5rem,3.3vw,3.3rem); color: #fff; }
.learn-launch-copy > p { grid-column: 1; max-width: 46ch; margin: 0; color: #dce6f7; font-size: 1rem; line-height: 1.5; }
.learn-route-progress { grid-column: 1; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; width: 100%; margin-top: 7px; padding-block: 8px; border-block: 1px solid #53637b; }
.learn-route-progress > span { grid-column: 1/-1; color: #c3d3ed; font-size: .82rem; }
.learn-route-progress > strong { font-size: 1.06rem; }
.learn-route-progress > small { align-self: end; color: #c3d3ed; }
.learn-route-progress progress { grid-column: 1/-1; width: 100%; height: 6px; margin-top: 6px; appearance: none; border: 0; border-radius: 6px; overflow: hidden; background: #53637b; }
.learn-route-progress progress::-webkit-progress-bar { background: #53637b; }
.learn-route-progress progress::-webkit-progress-value { background: #93bbff; }
.learn-route-progress progress::-moz-progress-bar { background: #93bbff; }
.learn-resume { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; width: 100%; height: 100%; padding-left: clamp(24px,3vw,42px); border-left: 1px solid #53637b; }
.learn-resume > span { color: #c3d3ed; font-size: .88rem; }
.learn-resume > strong { font-size: clamp(1.2rem,1.7vw,1.55rem); line-height: 1.2; }
.learn-resume .btn { margin-top: 2px; }
.learn-progress-link { grid-column: 2; grid-row: 3; display: inline-block; padding-left: clamp(24px,3vw,42px); color: #dce6f7; text-underline-offset: 4px; }
.course-map { margin-top: 42px; }
.course-map-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.course-map-head h2 { margin: 0 0 5px; font-size: clamp(1.6rem,2.6vw,2.25rem); letter-spacing: -.025em; }
.course-map-head p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.course-map-head > span { flex-shrink: 0; color: var(--ink-soft); font-size: .88rem; font-weight: 700; }
.course-map-track { display: flex; gap: 0; overflow-x: auto; padding: 12px 0 15px; scroll-snap-type: x proximity; scrollbar-color: var(--line-dark) transparent; }
.map-node { position: relative; display: flex; flex: 0 0 210px; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 142px; padding: 22px 13px 14px; border: 0; border-top: 2px solid var(--line-dark); background: transparent; color: var(--ink); text-align: left; cursor: pointer; scroll-snap-align: start; }
.map-node::before { content: ''; position: absolute; top: -8px; left: 14px; width: 12px; height: 12px; border: 2px solid var(--line-dark); border-radius: 50%; background: var(--paper); }
.map-node:hover, .map-node:focus-visible { background: var(--blue-wash); }
.map-node.current { border-top-color: var(--blue); background: var(--blue-wash); }
.map-node.current::before { border-color: var(--blue); background: var(--blue); }
.map-node.done::before { border-color: var(--green); background: var(--green); }
.map-node-number { color: var(--blue-dark); font: 700 .81rem var(--mono); }
.map-node strong { max-width: 17ch; font-size: 1.07rem; line-height: 1.2; }
.map-node > span:nth-last-child(2) { margin-top: auto; color: var(--ink-soft); font-size: .8rem; }
.map-node-track { display: block; width: 100%; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.map-node-track > span { display: block; height: 100%; background: var(--blue); }
.learn-course { margin-top: clamp(50px,6vw,86px); }
.learn-course-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.learn-course-heading h2 { margin: 0 0 8px; font-size: clamp(1.8rem,3vw,2.7rem); letter-spacing: -.025em; }
.learn-course-heading p { max-width: 62ch; margin: 0; color: var(--ink-soft); line-height: 1.6; }
.learn-course-heading > a { flex-shrink: 0; padding-bottom: 4px; color: var(--blue-dark); font-weight: 700; text-underline-offset: 4px; }
.lesson-search { max-width: 430px; margin: 8px 0 28px; }
.lesson-search label { display: block; margin-bottom: 8px; font-weight: 700; }
.lesson-search input { width: 100%; padding: 11px 14px; border: 1px solid var(--line-dark); border-radius: 7px; background: var(--paper-bright); color: var(--ink); }
.lesson-search p { margin: 7px 0 0; color: var(--ink-soft); font-size: .85rem; }
.learn-chapter { display: grid; grid-template-columns: minmax(220px,.38fr) minmax(0,.62fr); gap: 32px; padding: 36px 0; border-top: 1px solid var(--line-dark); scroll-margin-top: 96px; }
.chapter-intro > span { color: var(--ink-soft); font-size: .85rem; font-weight: 600; }
.chapter-intro h3 { margin: 8px 0 10px; font-size: clamp(1.5rem,2.4vw,2.1rem); line-height: 1.18; letter-spacing: -.025em; }
.chapter-intro p { max-width: 32ch; color: var(--ink-soft); line-height: 1.55; }
.chapter-intro code { display: inline-block; max-width: 100%; margin-top: 12px; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--blue-wash); color: var(--blue-dark); font: .88rem/1.4 var(--mono); white-space: nowrap; }
.chapter-lessons { margin: 0; padding: 0; list-style: none; }
.chapter-lessons li + li { border-top: 1px solid var(--line); }
.chapter-lessons a { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: start; gap: 18px; padding: 14px 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.chapter-lessons a:hover, .chapter-lessons a:focus-visible { background: #eaf1ff; }
.chapter-step { padding-top: 3px; color: var(--blue-dark); font: 700 .86rem var(--mono); }
.chapter-lesson-copy { min-width: 0; }
.chapter-lesson-copy strong { display: block; font-size: 1.08rem; }
.chapter-lesson-copy small { display: block; max-width: 60ch; margin-top: 5px; color: var(--ink-soft); font-size: .87rem; line-height: 1.45; }
.chapter-lesson-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 3px; color: var(--ink-soft); font-size: .82rem; white-space: nowrap; }
.chapter-lesson-meta .course-status { font-size: .82rem; }
.progress-opening { margin-bottom: 34px; }
.progress-opening p { max-width: 64ch; margin: 14px 0 0; color: var(--ink-soft); font-size: 1.09rem; line-height: 1.6; }
.progress-top { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 30px; align-items: center; padding: 30px 36px; border-radius: 12px; background: #17243b; color: #fff; }
.progress-next h2 { margin: 0 0 8px; font-size: clamp(1.5rem,2.6vw,2.2rem); }
.progress-next p { margin: 0 0 20px; color: #dce6f7; line-height: 1.55; }
.progress-count { padding-left: 30px; border-left: 1px solid #53637b; }
.progress-count strong { display: block; font: 700 1.55rem/1.2 var(--sans); }
.progress-count p { margin: 8px 0 0; color: #dce6f7; font-size: .88rem; line-height: 1.5; }
.progress-columns { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: clamp(32px,5vw,72px); margin-top: 56px; }
.progress-columns > section { min-width: 0; }
.progress-columns h2 { margin: 0 0 12px; font-size: 1.55rem; }
.progress-work, .progress-earned { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.progress-work h3, .progress-earned h3 { margin: 0 0 5px; font-size: 1.13rem; }
.progress-work p, .progress-earned p { margin: 0 0 7px; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.progress-work a, .progress-earned a { color: var(--blue-dark); font-weight: 700; text-underline-offset: 4px; }
.progress-work > a, .progress-earned > a { flex-shrink: 0; }
.progress-earned > div { flex: 1; }
.progress-empty { padding: 28px; border: 1px dashed var(--line-dark); border-radius: 10px; background: white; }
.progress-empty p { max-width: 44ch; margin: 0 0 18px; line-height: 1.6; }
.progress-empty p:last-child { margin-bottom: 0; }
.progress-older { margin-top: 18px; border-top: 1px solid var(--line); }
.progress-older summary { padding: 18px 0; color: var(--blue-dark); font-weight: 700; cursor: pointer; }
.progress-footer { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.progress-footer > a, .progress-footer summary { color: var(--blue-dark); font-weight: 700; text-underline-offset: 4px; cursor: pointer; }
.progress-footer details { max-width: 66ch; }
.progress-footer details p { color: var(--ink-soft); line-height: 1.6; }
@media(max-width: 900px) { .learn-launch-copy { grid-template-columns: 1fr; } .learn-resume { grid-column: 1; grid-row: auto; justify-content: flex-start; height: auto; padding: 18px 0 0; border-left: 0; border-top: 1px solid #53637b; } .learn-progress-link { grid-column: 1; grid-row: auto; padding-left: 0; } .learn-chapter { grid-template-columns: minmax(180px,.36fr) minmax(0,.64fr); } .progress-columns { gap: 30px; } }
@media(max-width: 700px) {
  .learn-chapter, .progress-top, .progress-columns { grid-template-columns: 1fr; }
  .learn-launch-copy { padding: 26px; }
  .learn-launch-copy .page-title { font-size: clamp(2.4rem,10vw,3.6rem); }
  .course-map { margin-top: 36px; }
  .course-map-head { display: block; margin-bottom: 22px; }
  .course-map-head > span { display: block; margin-top: 10px; }
  .map-node { flex-basis: 178px; }
  .learn-course-heading { display: block; }
  .learn-course-heading > a { display: inline-block; margin-top: 14px; }
  .learn-chapter { gap: 12px; padding: 32px 0; }
  .chapter-intro code { margin-top: 0; }
  .chapter-lessons a { grid-template-columns: 30px minmax(0,1fr); gap: 10px; }
  .chapter-lesson-meta { grid-column: 2; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding-top: 0; white-space: normal; }
  .progress-top { gap: 26px; padding: 26px; }
  .progress-count { padding: 20px 0 0; border-left: 0; border-top: 1px solid #53637b; }
  .progress-columns { margin-top: 42px; }
  .progress-footer { gap: 18px; }
  .result-pair { grid-template-columns: minmax(0,1fr); }
  .repair-stage .result-pair { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .repair-stage .result-pair p { padding: 10px; }
  .repair-stage .result-pair code { font-size: .72rem; }
  .repair-step { grid-template-columns: 34px minmax(0,1fr); gap: 12px; min-height: 0; }
  .repair-stage .repair-step { margin: 10px 0; padding: 14px 0; }
}