:root {
  color-scheme: light;
  --ink: #10251f;
  --ink-soft: #50615a;
  --paper: #f7f5ef;
  --surface: #ffffff;
  --mint: #dcefe4;
  --green: #1d765a;
  --green-dark: #125440;
  --blue: #8796f8;
  --blue-soft: #e8ebff;
  --sun: #f5c96b;
  --line: #d8dfd9;
  --shadow: 0 18px 50px rgba(16, 37, 31, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; background: var(--paper); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.42; }
:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sun); }

.skip-links { position: fixed; top: 12px; left: 12px; z-index: 100; display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); transform: translateY(calc(-100% - 20px)); transition: transform 160ms ease; }
.skip-links:focus-within { transform: translateY(0); }
.skip-links a { padding: 9px 12px; border-radius: 10px; color: var(--green-dark); font-size: 0.75rem; font-weight: 800; text-decoration: none; }
.skip-links a:hover { background: var(--mint); }

.site-header { display: flex; align-items: center; justify-content: space-between; max-width: 1240px; margin: 0 auto; padding: 24px 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; grid-auto-flow: column; gap: 3px; place-items: center; width: 42px; height: 42px; border: 2px solid var(--green); border-radius: 13px; color: var(--green); font-size: 0; }
.brand-mark::before, .brand-mark::after { width: 7px; height: 12px; border: 2px solid currentColor; border-radius: 3px; content: ""; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 0.95rem; letter-spacing: 0.12em; }
.brand small { margin-top: 3px; color: var(--ink-soft); font-size: 0.6rem; letter-spacing: 0.12em; }
.header-status { color: var(--ink-soft); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--green); }

main { overflow: hidden; }
.hero, .catalog, .lesson-shell, .reflection { max-width: 1240px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 72px; align-items: end; padding-top: 90px; padding-bottom: 108px; }
.eyebrow { margin: 0 0 12px; color: var(--green); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: -0.055em; }
h1 { max-width: 760px; margin-bottom: 28px; font-size: clamp(3.8rem, 9vw, 8rem); line-height: 0.91; font-weight: 700; }
.hero h1 em { display: block; color: var(--green); font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
h2 { margin-bottom: 16px; font-size: clamp(2rem, 4vw, 4rem); line-height: 0.98; }
h3 { margin-bottom: 0; font-size: 1.05rem; }
.hero-lede { max-width: 590px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.55; }
.text-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 12px; color: var(--green-dark); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.text-link span { font-size: 1.3rem; text-decoration: none; }
.hero-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.text-link-button { border: 0; padding: 0; background: transparent; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.pip-intro { display: flex; align-items: center; gap: 20px; max-width: 390px; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: var(--mint); }
.pip-title { margin-bottom: 7px; font-size: 1.2rem; font-weight: 750; }
.pip-copy { margin-bottom: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.45; }

.catalog { padding-top: 72px; padding-bottom: 72px; border-top: 1px solid var(--line); }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 30px; }
.catalog-heading h2 { margin-bottom: 0; }
.catalog-heading-aside { display: grid; justify-items: end; max-width: 440px; }
.catalog-heading-aside > p { margin-bottom: 14px; color: var(--ink-soft); line-height: 1.55; text-align: right; }
.catalog-view-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.catalog-view-toggle button { border: 0; border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--ink-soft); font-size: 0.72rem; font-weight: 800; }
.catalog-view-toggle button[aria-pressed="true"] { background: var(--green-dark); color: #fff; }
.progress-dashboard { display: grid; grid-template-columns: minmax(210px, 0.8fr) minmax(260px, 1.2fr) auto; gap: 22px; align-items: center; margin-bottom: 42px; padding: 24px; border: 1px solid #a9c2b3; border-radius: 26px; background: var(--mint); }
.progress-dashboard-copy .eyebrow { margin-bottom: 5px; }
.progress-dashboard-copy h3 { font-size: 1.2rem; }
.progress-dashboard-copy > p:last-child { margin: 7px 0 0; color: var(--ink-soft); font-size: 0.78rem; }
.progress-meter { height: 12px; overflow: hidden; border-radius: 999px; background: rgba(16,37,31,0.12); }
.progress-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green-dark), var(--green)); transition: width 260ms ease; }
.progress-actions { display: flex; gap: 9px; align-items: center; justify-content: flex-end; }
.progress-actions .primary-button { white-space: nowrap; }
.progress-reset-confirmation { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding-top: 18px; border-top: 1px solid rgba(16,37,31,0.14); }
.progress-reset-confirmation[hidden] { display: none; }
.progress-reset-confirmation p { margin: 0 auto 0 0; color: var(--ink-soft); font-size: 0.78rem; }
.quiet-button--danger { border-color: #d8aaa4; color: #8c3024; }
.catalog-tools { display: grid; grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(140px, 0.75fr)) auto; gap: 12px; align-items: end; margin-bottom: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.catalog-tools label { display: grid; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 0.7rem; font-weight: 800; }
.catalog-tools input, .catalog-tools select { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fbfcfa; color: var(--ink); }
.catalog-tools .quiet-button { min-height: 44px; padding: 0 14px; }
.catalog-results { display: flex; justify-content: space-between; min-height: 32px; margin-bottom: 20px; color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; }
.catalog-results p { margin: 0; }
.catalog-empty { margin: 20px 0 36px; padding: 36px; border: 1px dashed #a9c2b3; border-radius: 24px; background: rgba(217,239,228,0.3); text-align: center; }
.catalog-empty[hidden] { display: none; }
.catalog-empty p { margin: 8px 0 18px; color: var(--ink-soft); }
.curriculum-map { margin-bottom: 46px; padding: 28px; border: 1px solid #9eb9aa; border-radius: 30px; background: linear-gradient(145deg, #f1f8f4, #fffdf7); box-shadow: var(--shadow); }
.curriculum-map[hidden] { display: none; }
.curriculum-map-header { display: flex; gap: 28px; align-items: end; justify-content: space-between; }
.curriculum-map-header h3 { font-size: clamp(1.65rem, 3vw, 2.5rem); letter-spacing: -0.035em; }
.curriculum-map-header > div > p:last-child { max-width: 640px; margin: 10px 0 0; color: var(--ink-soft); line-height: 1.5; }
.curriculum-map-filter { display: grid; flex: 0 0 220px; gap: 7px; color: var(--ink-soft); font-size: 0.7rem; font-weight: 800; }
.curriculum-map-filter select { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; color: var(--ink); }
.curriculum-map-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 22px 0 14px; color: var(--ink-soft); font-size: 0.68rem; font-weight: 750; }
.curriculum-map-legend span { display: inline-flex; gap: 6px; align-items: center; }
.map-key { width: 10px; height: 10px; border: 2px solid var(--line); border-radius: 50%; background: #fff; }
.map-key--selected { border-color: var(--green-dark); background: var(--sun); }
.map-key--before { border-color: #6575df; background: var(--blue-soft); }
.map-key--after { border-color: var(--green); background: var(--mint); }
.map-key--complete { border-color: var(--green-dark); background: var(--green-dark); }
.curriculum-map-scroll { position: relative; overflow: auto; max-height: 650px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,0.72); scrollbar-color: #a9c2b3 transparent; }
.curriculum-map-scroll:focus-visible { outline-offset: 2px; }
.curriculum-map-canvas { position: relative; min-width: max-content; padding: 22px; }
.curriculum-map-columns { position: relative; z-index: 2; display: grid; grid-auto-columns: 190px; grid-auto-flow: column; gap: 42px; align-items: start; }
.curriculum-map-column { display: grid; gap: 11px; align-content: start; }
.curriculum-map-column-heading { position: sticky; top: 0; z-index: 3; margin: 0 0 4px; padding: 8px 9px; border-radius: 10px; background: rgba(247,245,239,0.94); color: var(--ink-soft); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(6px); }
.curriculum-map-node { position: relative; display: grid; min-height: 82px; gap: 4px; width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 12px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 6px 18px rgba(16,37,31,0.05); transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.curriculum-map-node:hover { border-color: #8eac9b; transform: translateY(-2px); }
.curriculum-map-node small { color: var(--green); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.curriculum-map-node strong { font-size: 0.78rem; line-height: 1.25; }
.curriculum-map-node span { color: var(--ink-soft); font-size: 0.59rem; line-height: 1.3; }
.curriculum-map-node[data-progress="complete"]::after { position: absolute; top: 9px; right: 9px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: var(--green-dark); color: #fff; font-size: 0.55rem; content: "✓"; }
.curriculum-map-node.is-dimmed { opacity: 0.22; }
.curriculum-map-node.is-selected { border-color: var(--green-dark); background: #fff4c9; box-shadow: 0 0 0 3px rgba(245,201,107,0.38); }
.curriculum-map-node.is-prerequisite { border-color: #6575df; background: var(--blue-soft); }
.curriculum-map-node.is-dependent { border-color: var(--green); background: var(--mint); }
.curriculum-map-edges { position: absolute; z-index: 1; inset: 0; overflow: visible; pointer-events: none; }
.curriculum-map-edge { fill: none; stroke: #c5d0c9; stroke-width: 1.5; }
.curriculum-map-edge.is-active { stroke: var(--green-dark); stroke-width: 3; }
.curriculum-map-detail { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr) auto; gap: 24px; align-items: center; margin-top: 16px; padding: 20px; border: 1px solid rgba(18,83,63,0.18); border-radius: 20px; background: var(--mint); }
.curriculum-map-detail-copy small { color: var(--green); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.1em; }
.curriculum-map-detail-copy h4 { margin: 5px 0 7px; font-size: 1.25rem; }
.curriculum-map-detail-copy p { margin: 0; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.45; }
.curriculum-map-relations { display: grid; gap: 9px; }
.curriculum-map-relation { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.curriculum-map-relation > strong { color: var(--ink-soft); font-size: 0.62rem; text-transform: uppercase; }
.curriculum-map-chip { border: 0; border-radius: 999px; padding: 5px 8px; background: rgba(255,255,255,0.72); color: var(--green-dark); font-size: 0.64rem; font-weight: 750; }
.curriculum-map-detail .primary-button { white-space: nowrap; }
.lesson-list { display: grid; gap: 64px; }
.lesson-topic-group[hidden], .lesson-card[hidden] { display: none; }
.lesson-topic-group { min-width: 0; }
.lesson-topic-group.is-current { padding: 24px; border: 1px solid #a9c2b3; border-radius: 30px; background: rgba(217, 239, 228, 0.34); }
.lesson-topic-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lesson-topic-heading .eyebrow { margin-bottom: 5px; }
.lesson-topic-heading h3 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.6rem); }
.lesson-topic-count { flex: 0 0 auto; padding-bottom: 4px; color: var(--ink-soft); font-size: 0.75rem; font-weight: 750; }
.lesson-topic-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lesson-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 128px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: 0 8px 28px rgba(16, 37, 31, 0.04); transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.lesson-card:hover { border-color: #9eb9aa; transform: translateY(-2px); }
.lesson-card[aria-current="true"] { border-color: var(--green); background: var(--mint); box-shadow: inset 5px 0 0 var(--green); }
.lesson-card-number { align-self: start; color: var(--green); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.1em; }
.lesson-card-copy { display: grid; gap: 5px; }
.lesson-card-copy small { color: var(--green); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lesson-card-copy strong { font-size: 1.1rem; }
.lesson-card-copy > span { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.45; }
.lesson-card-copy .lesson-card-progress { justify-self: start; margin-top: 5px; padding: 4px 8px; border-radius: 999px; background: #eef2ef; color: var(--ink-soft); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.04em; line-height: 1; text-transform: uppercase; }
.lesson-card[data-progress="complete"] .lesson-card-progress { background: #c9ead9; color: var(--green-dark); }
.lesson-card[data-progress="in-progress"] .lesson-card-progress { background: var(--blue-soft); color: #3f4b9e; }
.lesson-card-arrow { color: var(--green); font-size: 1.35rem; }

.lesson-shell { padding-top: 78px; padding-bottom: 92px; border-top: 1px solid var(--line); }
.lesson-heading { display: flex; justify-content: space-between; gap: 32px; align-items: end; margin-bottom: 42px; }
.lesson-summary { max-width: 650px; margin-bottom: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.lesson-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; color: var(--green); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.lesson-heading-actions { display: grid; gap: 12px; justify-items: end; }
.share-state-button { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #8796f8; border-radius: 999px; padding: 9px 13px; background: var(--blue-soft); color: #33408f; font-size: 0.72rem; font-weight: 800; }
.share-state-button:hover { border-color: #6575df; background: #dce1ff; }
.share-state-status { min-height: 1em; margin: -5px 4px 0 0; color: var(--green-dark); font-size: 0.66rem; font-weight: 800; }
.share-state-notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: -22px 0 28px; padding: 14px 16px; border: 1px solid #d8aaa4; border-radius: 16px; background: #ffe9e5; color: #75281e; font-size: 0.76rem; }
.share-state-notice[hidden] { display: none; }
.share-state-notice span { color: #8c3024; }
.challenge-toggle { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #a9c2b3; border-radius: 999px; padding: 9px 13px; background: var(--surface); color: var(--ink); font-size: 0.72rem; font-weight: 800; }
.challenge-toggle > span:first-child { color: var(--green); font-size: 0.64rem; }
.challenge-toggle strong { min-width: 28px; color: var(--ink-soft); }
.challenge-toggle[aria-pressed="true"] { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.challenge-toggle[aria-pressed="true"] > span:first-child, .challenge-toggle[aria-pressed="true"] strong { color: var(--sun); }
.challenge-toggle[hidden] { display: none; }
.comparison-launch { display: inline-flex; gap: 8px; align-items: center; border: 1px solid #8796f8; border-radius: 999px; padding: 9px 13px; background: var(--blue-soft); color: #33408f; font-size: 0.72rem; font-weight: 800; }
.comparison-launch[hidden] { display: none; }
.meta-divider { width: 32px; height: 1px; background: var(--line); }
.lesson-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr); gap: 22px; align-items: start; }
.lesson-grid[hidden], .reflection[hidden] { display: none; }
.comparison-workspace { margin-bottom: 20px; padding: 30px; border: 1px solid #9aabed; border-radius: 32px; background: linear-gradient(145deg, #f8f9ff, #eef0ff); box-shadow: var(--shadow); }
.comparison-workspace[hidden] { display: none; }
.comparison-header { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; }
.comparison-header h3 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.045em; }
.comparison-header p:last-child { max-width: 720px; margin: 10px 0 0; color: var(--ink-soft); line-height: 1.55; }
.comparison-setup { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 12px; margin-top: 26px; padding: 20px; border: 1px solid rgba(63,75,158,0.18); border-radius: 22px; background: rgba(255,255,255,0.7); }
.comparison-setup label, .comparison-fields label { display: grid; gap: 7px; min-width: 0; color: var(--ink-soft); font-size: 0.7rem; font-weight: 800; }
.comparison-setup input, .comparison-setup select { width: 100%; min-width: 0; height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; background: #fff; color: var(--ink); }
.comparison-fields { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); }
.comparison-input-actions { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.comparison-setup .field-help, .comparison-setup .field-error { grid-column: 1 / -1; margin-bottom: 0; }
.comparison-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 18px 0; padding: 15px 18px; border: 1px solid #a9c2b3; border-radius: 17px; background: var(--mint); color: var(--green-dark); font-size: 0.78rem; font-weight: 750; }
.comparison-result strong { font-size: 0.92rem; }
.comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.comparison-lane { display: flex; min-width: 0; flex-direction: column; padding: 22px; border: 1px solid rgba(63,75,158,0.2); border-radius: 25px; background: var(--surface); }
.comparison-lane-header { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.comparison-lane-header h4 { margin: 0; font-size: 1.15rem; }
.comparison-step { flex: 0 0 auto; border-radius: 999px; padding: 7px 9px; background: var(--blue-soft); color: #3f4b9e; font-size: 0.65rem; font-weight: 850; }
.comparison-complexity { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.comparison-complexity span { padding: 6px 9px; border-radius: 999px; background: #eef2ef; color: var(--ink-soft); font-size: 0.65rem; font-weight: 800; }
.comparison-visual { display: grid; min-height: 330px; align-content: center; margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; padding: 14px; background: #fbfcfa; }
.comparison-visual .visualization-panels { grid-template-columns: 1fr; }
.comparison-visual .visualization-panel { padding: 10px; }
.comparison-visual .visualization-panel-heading,
.comparison-visual .branching-empty,
.comparison-visual .lookup-empty { color: var(--ink-soft); }
.comparison-visual .branching-view, .comparison-visual .graph-view { min-height: 210px; }
.comparison-narration { min-height: 68px; margin: 16px 0 10px; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.5; }
.comparison-code { margin-top: auto; padding: 12px 14px; overflow: hidden; border-radius: 13px; background: var(--ink); color: #d9e9df; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.comparison-code strong { margin-right: 9px; color: var(--sun); font-weight: 700; }
.comparison-side-controls { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; }
.comparison-side-controls .quiet-button { font-size: 0.68rem; }
.comparison-controls { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(63,75,158,0.18); }
.comparison-note { margin: 13px 0 0; color: var(--ink-soft); font-size: 0.68rem; line-height: 1.45; }
.visual-column, .explanation-column { display: grid; gap: 22px; min-width: 0; }
.visualization-card, .pip-card, .code-card, .complexity-card { min-width: 0; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.visualization-card { width: 100%; padding: 30px; }
.challenge-card { padding: 26px; border: 1px solid #9aabed; border-radius: 28px; background: linear-gradient(145deg, #f7f8ff, var(--blue-soft)); box-shadow: var(--shadow); }
.challenge-card[hidden] { display: none; }
.challenge-card-header { display: flex; gap: 18px; align-items: flex-start; justify-content: space-between; }
.challenge-progress { flex: 0 0 auto; border-radius: 999px; padding: 7px 10px; background: rgba(255,255,255,0.72); color: #3f4b9e; font-size: 0.68rem; font-weight: 850; }
.challenge-prompt { margin: 14px 0 18px; color: var(--ink-soft); font-size: 0.86rem; line-height: 1.5; }
.challenge-options { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; border: 0; }
.challenge-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; padding: 13px 15px; border: 1px solid rgba(63,75,158,0.2); border-radius: 15px; background: rgba(255,255,255,0.7); color: var(--ink); font-size: 0.78rem; line-height: 1.45; cursor: pointer; }
.challenge-option:hover { border-color: #8796f8; background: #fff; }
.challenge-option:has(input:checked) { border-color: #5969d8; box-shadow: inset 0 0 0 1px #5969d8; }
.challenge-option input { margin-top: 3px; accent-color: var(--green-dark); }
.challenge-actions { display: flex; gap: 9px; margin-top: 16px; }
.challenge-feedback { margin-top: 4px; padding: 17px; border: 1px solid rgba(29,118,90,0.2); border-radius: 17px; background: rgba(255,255,255,0.75); }
.challenge-feedback[hidden] { display: none; }
.challenge-feedback[data-result="incorrect"] { border-color: rgba(140,48,36,0.25); background: rgba(255,238,234,0.78); }
.challenge-feedback h4 { margin: 0 0 7px; font-size: 1rem; }
.challenge-feedback p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.5; }
.challenge-score { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 19px; padding-top: 16px; border-top: 1px solid rgba(63,75,158,0.15); color: var(--ink-soft); font-size: 0.68rem; }
.challenge-score strong { color: var(--ink); font-size: 0.78rem; }
.card-topline, .pip-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.quiet-button, .secondary-button, .icon-button { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 750; }
.quiet-button { padding: 8px 13px; font-size: 0.76rem; }
.lesson-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 0.32fr); gap: 10px; margin-top: 30px; }
.lesson-field { display: grid; gap: 9px; min-width: 0; color: var(--ink-soft); font-size: 0.78rem; font-weight: 750; }
.lesson-field:only-child { grid-column: 1 / -1; }
.lesson-field input { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; color: var(--ink); background: #fbfcfa; }
.apply-button { width: 100%; margin-top: 10px; }
.primary-button { border: 0; border-radius: 999px; padding: 12px 18px; background: var(--green-dark); color: #fff; font-weight: 800; }
.primary-button:hover { background: var(--green); }
.field-help, .field-error { margin: 9px 0 0; color: var(--ink-soft); font-size: 0.75rem; line-height: 1.45; }
.field-error { min-height: 1.1em; color: #a93d38; }
.visualization-stage { margin-top: 30px; padding: 26px 20px 20px; border-radius: 20px; background: var(--ink); }
.visualization-panels { display: grid; gap: 18px; }
.visualization-panel { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.025); }
.visualization-panel-heading { margin: 0 0 4px; color: #b8c7c0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.visualization-panel-body { min-width: 0; }
.array-scroll { overflow-x: auto; padding: 40px 2px 8px; scrollbar-color: #60766c transparent; }
.array-cells { display: grid; grid-template-columns: repeat(var(--array-count), minmax(58px, 1fr)); gap: 7px; align-items: end; min-height: 134px; }
.array-cell { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 72px; padding: 18px 6px 13px; border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; background: #253b33; color: #fff; font-size: 1.25rem; font-weight: 800; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.array-cell::before { position: absolute; top: 8px; left: 10px; color: #9eb5aa; content: attr(data-index); font-size: 0.62rem; font-weight: 700; }
.array-cell--active { border-color: var(--sun); background: #55461f; transform: translateY(-8px); }
.array-cell--changed { outline: 3px solid #f5c96b; outline-offset: 2px; animation: array-change 520ms ease-out; }
.array-cell--marker-best { border-color: #6fd0a9; background: var(--green-dark); }
.array-cell--active.array-cell--marker-best { background: #366947; }
.array-cell--range-window { border-color: var(--blue); background: #293c50; }
.array-cell--range-best { box-shadow: inset 0 -5px 0 #6fd0a9; }
.array-cell--range-settled { box-shadow: inset 0 -5px 0 #6fd0a9; }
.array-cell--range-candidate { box-shadow: inset 0 -5px 0 var(--blue); }
.array-cell--annotation-confirmed { border-color: #6fd0a9; background: #23483b; }
.array-cell--annotation-ignored { opacity: 0.5; }
.array-cell--range-window.array-cell--range-best { background: #314a45; }
.array-cell--marker-entering { border-color: var(--sun); }
.array-cell--marker-leaving { border-color: #ef8e7f; opacity: 0.74; }
.array-cell--marker-left, .array-cell--marker-read { border-color: var(--blue); }
.array-cell--marker-right { border-color: var(--sun); }
.array-cell--marker-write, .array-cell--marker-both { border-color: #6fd0a9; }
.array-markers { position: absolute; top: -32px; left: 50%; display: flex; gap: 3px; align-items: center; justify-content: center; transform: translateX(-50%); white-space: nowrap; }
.array-marker { padding: 3px 6px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 0.52rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.array-marker--best, .array-marker--write { background: #bcebd8; }
.array-marker--entering, .array-marker--right { background: #f8dda4; }
.array-marker--leaving { background: #f7c5bd; }
.array-marker--left, .array-marker--read { background: #d9ddff; }
.array-marker--both { background: linear-gradient(90deg, #d9ddff 0 50%, #f8dda4 50%); }
.array-annotations { position: absolute; right: 5px; bottom: 4px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; pointer-events: none; }
.array-annotation { color: #b8c7c0; font-size: 0.5rem; font-weight: 650; white-space: nowrap; }
.visualization-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; color: #b8c7c0; font-size: 0.7rem; }
.legend-swatch { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; background: #6fd0a9; }
.legend-swatch--active { background: var(--sun); }
.legend-swatch--window { background: var(--blue); }
.legend-swatch--best { background: #6fd0a9; }
.legend-swatch--entering { background: var(--sun); }
.legend-swatch--leaving { background: #ef8e7f; }
.legend-swatch--left, .legend-swatch--read { background: var(--blue); }
.legend-swatch--right { background: var(--sun); }
.legend-swatch--write, .legend-swatch--settled { background: #6fd0a9; }
.legend-swatch--candidate { background: var(--blue); }
.legend-swatch--changed { border: 1px solid var(--sun); background: transparent; }
.legend-swatch--current, .legend-swatch--slow { background: var(--blue); }
.legend-swatch--previous, .legend-swatch--visited, .legend-swatch--rewired, .legend-swatch--reversed { background: #6fd0a9; }
.legend-swatch--next, .legend-swatch--fast { background: var(--sun); }
.legend-swatch--cycle, .legend-swatch--cycle-entry, .legend-swatch--meeting { background: #ef8e7f; }

.lookup-view { min-height: 92px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-color: #60766c transparent; }
.lookup-empty { display: grid; place-items: center; min-height: 76px; margin: 0; border: 1px dashed rgba(255,255,255,0.16); border-radius: 13px; color: #91a69c; font-size: 0.72rem; font-weight: 750; }
.lookup-entries { display: flex; gap: 8px; min-width: max-content; padding: 5px 2px 8px; }
.lookup-entry { position: relative; display: grid; grid-template-columns: auto auto auto; gap: 7px; align-items: center; min-width: 104px; min-height: 58px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: 13px; background: #253b33; color: #fff; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.lookup-entry--active { border-color: var(--sun); background: #55461f; transform: translateY(-4px); }
.lookup-entry--result { border-color: #6fd0a9; box-shadow: inset 0 -4px 0 #6fd0a9; }
.lookup-entry-key { color: #d9e9df; font-size: 0.78rem; font-weight: 800; }
.lookup-entry-separator { color: #91a69c; font-size: 0.7rem; }
.lookup-entry-value { font-size: 1rem; }
.lookup-entry-annotation { grid-column: 1 / -1; color: #b8c7c0; font-size: 0.58rem; font-weight: 650; }

.grid-view { display: grid; gap: 7px; min-width: max-content; overflow-x: auto; padding: 10px 2px 4px; scrollbar-color: #60766c transparent; }
.grid-row { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(58px, 72px)); gap: 7px; }
.grid-cell { position: relative; display: grid; place-items: center; min-height: 64px; padding: 8px 5px; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; background: #253b33; color: #fff; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.grid-cell::before { position: absolute; top: 4px; left: 6px; color: #91a69c; content: attr(data-row) "," attr(data-column); font-size: 0.48rem; font-weight: 700; }
.grid-cell strong { font-size: 1rem; }
.grid-cell small { position: absolute; right: 5px; bottom: 3px; max-width: calc(100% - 10px); overflow: hidden; color: #b8c7c0; font-size: 0.45rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.grid-cell--active { border-color: var(--sun); background: #55461f; transform: translateY(-3px); }
.grid-cell--changed { outline: 3px solid #f5c96b; outline-offset: 1px; animation: array-change 520ms ease-out; }
.grid-cell--marker-result, .grid-cell--marker-settled, .grid-cell--marker-visited { border-color: #6fd0a9; box-shadow: inset 0 -4px 0 #6fd0a9; }

.stack-view { display: grid; place-items: center; min-height: 160px; padding: 10px; }
.stack-empty { display: grid; place-items: center; width: min(100%, 260px); min-height: 92px; margin: 0; border: 1px dashed rgba(255,255,255,0.16); border-radius: 13px; color: #91a69c; font-size: 0.72rem; font-weight: 750; }
.stack-items { display: flex; width: min(100%, 300px); flex-direction: column; gap: 6px; padding: 9px 14px 14px; border-right: 3px solid #60766c; border-bottom: 3px solid #60766c; border-left: 3px solid #60766c; border-radius: 0 0 16px 16px; }
.stack-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-height: 42px; padding: 8px 12px; border: 1px solid rgba(255,255,255,0.16); border-radius: 10px; background: #253b33; color: #fff; text-align: center; }
.stack-item strong { font-size: 1rem; }
.stack-item small { color: #b8c7c0; font-size: 0.54rem; font-weight: 650; }
.stack-item--top::before { color: var(--sun); content: "TOP"; font-size: 0.5rem; font-weight: 850; letter-spacing: 0.08em; }
.stack-item--top strong { grid-column: 2; }
.stack-item--active { border-color: var(--sun); background: #55461f; }
.stack-item--changed { outline: 2px solid #f5c96b; outline-offset: 1px; }
.stack-item--state-matched { border-color: #6fd0a9; }
.stack-item--state-mismatch { border-color: #ef8e7f; background: #57322e; }

.queue-view { min-height: 132px; overflow-x: auto; padding: 24px 2px 8px; scrollbar-color: #60766c transparent; }
.queue-empty { display: grid; place-items: center; min-height: 92px; margin: 0; border: 1px dashed rgba(255,255,255,0.16); border-radius: 13px; color: #91a69c; font-size: 0.72rem; font-weight: 750; }
.queue-items { display: flex; gap: 7px; align-items: stretch; min-width: max-content; padding: 0 12px; border-right: 3px solid #60766c; border-left: 3px solid #60766c; }
.queue-item { display: grid; place-items: center; min-width: 76px; min-height: 76px; padding: 8px; border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; background: #253b33; color: #fff; }
.queue-item small { min-height: 0.7rem; color: #91a69c; font-size: 0.48rem; font-weight: 850; letter-spacing: 0.06em; }
.queue-item strong { font-size: 1rem; }
.queue-item span { max-width: 92px; overflow: hidden; color: #b8c7c0; font-size: 0.5rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.queue-item--front { border-left-color: var(--blue); }
.queue-item--back { border-right-color: var(--sun); }
.queue-item--active { border-color: var(--sun); background: #55461f; transform: translateY(-3px); }
.queue-item--changed { outline: 2px solid #f5c96b; outline-offset: 1px; }

.branching-view { min-width: 320px; overflow-x: auto; padding: 12px 6px 6px; scrollbar-color: #60766c transparent; }
.branching-empty { display: grid; place-items: center; min-height: 120px; margin: 0; border: 1px dashed rgba(255,255,255,0.16); border-radius: 13px; color: #91a69c; }
.branching-level { display: flex; gap: 16px; align-items: stretch; justify-content: space-around; min-width: max-content; }
.branching-level-connector { width: 2px; height: 22px; margin: 0 auto; background: #60766c; }
.branching-node { display: grid; place-items: center; width: 88px; min-height: 76px; padding: 7px; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: #253b33; color: #fff; text-align: center; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.branching-node strong { font-size: 1rem; }
.branching-node-pointers { min-height: 0.65rem; color: var(--sun); font-size: 0.46rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; }
.branching-node small { max-width: 70px; min-height: 0.65rem; overflow: hidden; color: #b8c7c0; font-size: 0.46rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.branching-node--active { border-color: var(--sun); background: #55461f; transform: translateY(-3px); }
.branching-node--changed { outline: 2px solid #f5c96b; outline-offset: 2px; }
.branching-node--state-visited, .branching-node--state-result, .branching-node--state-valid { border-color: #6fd0a9; box-shadow: inset 0 -4px 0 #6fd0a9; }
.branching-node--state-invalid { border-color: #ef8e7f; background: #57322e; }
.branching-null-pointers { margin: 14px 0 0; color: #91a69c; font-size: 0.58rem; font-weight: 700; text-align: center; }

.graph-view { min-width: 320px; overflow-x: auto; }
.graph-canvas { position: relative; width: min(100%, 540px); min-width: 320px; aspect-ratio: 16 / 10; margin: 0 auto; }
.graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph-edge { stroke: #60766c; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.graph-edge--active { stroke: var(--sun); stroke-width: 2.5; }
.graph-edge--directed { stroke-dasharray: 4 2; }
.graph-node { position: absolute; left: var(--graph-x); top: var(--graph-y); display: grid; place-items: center; width: 62px; min-height: 62px; padding: 5px; border: 2px solid #60766c; border-radius: 999px; background: #253b33; color: #fff; text-align: center; transform: translate(-50%, -50%); transition: background 180ms ease, border-color 180ms ease, scale 180ms ease; }
.graph-node strong { font-size: 0.9rem; }
.graph-node small { max-width: 50px; overflow: hidden; color: #b8c7c0; font-size: 0.42rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.graph-node--active { z-index: 2; border-color: var(--sun); background: #55461f; scale: 1.08; }
.graph-node--changed { outline: 2px solid #f5c96b; outline-offset: 2px; }
.graph-node--state-visited, .graph-node--state-result, .graph-node--state-component { border-color: #6fd0a9; box-shadow: inset 0 -4px 0 #6fd0a9; }
.graph-node--state-cycle { border-color: #ef8e7f; background: #57322e; }

.linked-list-scroll { overflow-x: auto; padding: 14px 2px 8px; scrollbar-color: #60766c transparent; }
.linked-list-canvas { position: relative; min-height: 224px; }
.linked-list-empty { display: grid; place-items: center; min-height: 190px; margin: 0; color: #b8c7c0; font-size: 0.76rem; font-weight: 750; letter-spacing: 0.04em; }
.linked-list-item { position: absolute; top: 58px; left: calc(18px + (var(--node-index) * 142px)); width: 92px; transition: transform 180ms ease; }
.linked-list-item--active { transform: translateY(-7px); }
.linked-list-pointers { position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 3; display: flex; gap: 4px; justify-content: center; transform: translateX(-50%); white-space: nowrap; }
.linked-list-pointer { padding: 3px 7px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 0.5rem; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase; }
.linked-list-pointer--current, .linked-list-pointer--slow { background: #d9ddff; }
.linked-list-pointer--previous { background: #bcebd8; }
.linked-list-pointer--next, .linked-list-pointer--fast { background: #f8dda4; }
.linked-list-node { position: relative; z-index: 2; display: grid; place-items: center; min-height: 78px; padding: 17px 8px 13px; border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; background: #253b33; color: #fff; font-size: 1.25rem; font-weight: 800; transition: background 180ms ease, border-color 180ms ease; }
.linked-list-node::before { position: absolute; top: 7px; left: 9px; color: #9eb5aa; content: attr(data-index); font-size: 0.6rem; font-weight: 700; }
.linked-list-item--active .linked-list-node { border-color: var(--sun); background: #55461f; }
.linked-list-item--changed .linked-list-node { outline: 3px solid var(--sun); outline-offset: 2px; animation: array-change 520ms ease-out; }
.linked-list-item--state-visited .linked-list-node, .linked-list-item--state-rewired .linked-list-node, .linked-list-item--state-reversed .linked-list-node { box-shadow: inset 0 -5px 0 #6fd0a9; }
.linked-list-item--state-cycle .linked-list-node, .linked-list-item--state-cycle-entry .linked-list-node, .linked-list-item--state-meeting .linked-list-node { box-shadow: inset 0 -5px 0 #ef8e7f; }
.linked-list-next-label { display: block; margin-top: 7px; color: #9eb5aa; font-size: 0.52rem; font-weight: 650; text-align: center; white-space: nowrap; }
.linked-list-annotations { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; min-height: 17px; margin-top: 6px; }
.linked-list-annotation { color: #b8c7c0; font-size: 0.5rem; font-weight: 650; white-space: nowrap; }
.linked-list-link { position: absolute; z-index: 1; pointer-events: none; }
.linked-list-link--forward-adjacent { top: 96px; left: calc(110px + (var(--from-index) * 142px)); width: 42px; border-top: 2px solid #6fd0a9; }
.linked-list-link--forward-adjacent::after { position: absolute; top: -5px; right: -1px; width: 8px; height: 8px; border-top: 2px solid #6fd0a9; border-right: 2px solid #6fd0a9; content: ""; transform: rotate(45deg); }
.linked-list-link--backward-adjacent { top: 123px; left: calc(110px + (var(--to-index) * 142px)); width: 42px; border-top: 2px solid var(--blue); }
.linked-list-link--backward-adjacent::after { position: absolute; top: -5px; left: -1px; width: 8px; height: 8px; border-bottom: 2px solid var(--blue); border-left: 2px solid var(--blue); content: ""; transform: rotate(45deg); }
.linked-list-link--return { top: 136px; left: calc(64px + (var(--to-index) * 142px)); width: calc((var(--from-index) - var(--to-index)) * 142px); height: 54px; border-right: 2px solid #ef8e7f; border-bottom: 2px solid #ef8e7f; border-left: 2px solid #ef8e7f; border-radius: 0 0 15px 15px; }
.linked-list-link--return::after { position: absolute; top: -1px; left: -5px; width: 8px; height: 8px; border-top: 2px solid #ef8e7f; border-left: 2px solid #ef8e7f; content: ""; transform: rotate(45deg); }
.linked-list-link--forward-jump { top: 38px; left: calc(64px + (var(--from-index) * 142px)); width: calc((var(--to-index) - var(--from-index)) * 142px); height: 20px; border-top: 2px solid var(--blue); border-right: 2px solid var(--blue); border-left: 2px solid var(--blue); border-radius: 12px 12px 0 0; }
.linked-list-link--forward-jump::after { position: absolute; right: -5px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue); content: ""; transform: rotate(45deg); }
.linked-list-link--self-loop { top: 35px; left: calc(82px + (var(--from-index) * 142px)); width: 55px; height: 45px; border: 2px solid #ef8e7f; border-bottom: 0; border-radius: 28px 28px 0 0; }
.linked-list-link--self-loop::after { position: absolute; right: -5px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid #ef8e7f; border-bottom: 2px solid #ef8e7f; content: ""; transform: rotate(45deg); }
.linked-list-link--changed { filter: drop-shadow(0 0 4px rgba(245, 201, 107, 0.9)); }
.linked-list-null-pointers { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; padding: 0 18px; }
.linked-list-null-pointer { padding: 4px 8px; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; color: #b8c7c0; font-size: 0.58rem; font-weight: 750; }
.stat-grid { display: grid; grid-template-columns: repeat(var(--stat-count), minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.stat-card { padding: 15px; border-radius: 16px; background: var(--blue-soft); }
.stat-card span, .stat-card small { display: block; color: var(--ink-soft); font-size: 0.68rem; }
.stat-card strong { display: block; margin: 8px 0 2px; font-size: 1.45rem; }
.stat-card--accent { background: var(--mint); }
.stat-card--accent strong { color: var(--green-dark); }
.player-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.secondary-button { padding: 11px 15px; }
.primary-button--play { min-width: 102px; }
.icon-button { width: 42px; height: 42px; padding: 0; font-size: 1.2rem; }
.speed-control { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--ink-soft); font-size: 0.72rem; font-weight: 750; }
.speed-control input { width: 92px; accent-color: var(--green); }
.speed-control span { min-width: 25px; color: var(--ink); }
.mobile-code-strip { display: none; }
.keyboard-help { margin: -10px 0 0; color: var(--ink-soft); font-size: 0.67rem; }
.lesson-complete { display: grid; gap: 20px; padding: 24px; border: 1px solid #b8d7c6; border-radius: 24px; background: var(--mint); }
.lesson-complete[hidden] { display: none; }
.lesson-complete-copy .eyebrow { margin-bottom: 7px; }
.lesson-complete-copy h3 { font-size: 1.3rem; }
.lesson-complete-copy > p:last-child { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.5; }
.lesson-complete-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lesson-complete-back { padding: 10px 5px; color: var(--green-dark); font-size: 0.78rem; font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }

.pip-card { padding: 24px; background: var(--mint); box-shadow: none; }
.pip-card-header { align-items: center; }
.pip-card-header > div:nth-child(2) { flex: 1; }
.pip-card-header .eyebrow { margin-bottom: 5px; }
.pip-emotion-label { display: inline-flex; align-items: center; min-height: 24px; margin: 9px 0 0; padding: 4px 9px; border: 1px solid rgba(18,83,63,0.2); border-radius: 999px; background: rgba(255,255,255,0.5); color: var(--green-dark); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; }
.pip-emotion-label[data-emotion="aha"],
.pip-emotion-label[data-emotion="celebrating"] { border-color: rgba(168,114,0,0.32); background: rgba(245,201,107,0.36); color: #684900; }
.pip-emotion-label[data-emotion="caution"] { border-color: rgba(140,48,36,0.24); background: rgba(255,225,220,0.7); color: #8c3024; }
.pip-emotion-label[data-emotion="cool"] { border-color: #18342d; background: #18342d; color: #f5c96b; }
.icon-button--light { border-color: rgba(16,37,31,0.18); background: rgba(255,255,255,0.45); }
.pip-sensei-line { margin: 22px 0 0; color: var(--green-dark); font-family: Georgia, "Times New Roman", serif; font-size: 1.03rem; font-style: italic; line-height: 1.45; }
.pip-message { margin-top: 12px; color: var(--ink); font-size: 1.05rem; line-height: 1.5; }
.pip-prompt { margin-top: 18px; padding: 15px; border-left: 3px solid var(--green); color: var(--green-dark); font-size: 0.84rem; font-weight: 700; line-height: 1.45; }
.prediction-checkpoint { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(16,37,31,0.14); }
.prediction-checkpoint[hidden] { display: none; }
.prediction-checkpoint .eyebrow { margin-bottom: 6px; }
.prediction-checkpoint h4 { margin: 0; font-size: 1rem; }
.prediction-question { margin: 8px 0 14px; color: var(--ink-soft); font-size: 0.78rem; line-height: 1.45; }
.prediction-entry { display: flex; gap: 8px; }
.prediction-entry input { min-width: 0; flex: 1; border: 1px solid rgba(16,37,31,0.2); border-radius: 999px; padding: 11px 14px; background: rgba(255,255,255,0.72); color: var(--ink); }
.prediction-entry .primary-button { flex: 0 0 auto; padding: 10px 14px; font-size: 0.76rem; }
.prediction-result { padding: 14px; border-radius: 15px; background: rgba(255,255,255,0.52); }
.prediction-result[hidden] { display: none; }
.prediction-result p { margin: 0; font-size: 0.78rem; line-height: 1.5; }
.prediction-result p + p { margin-top: 8px; color: var(--green-dark); }
.pip-card.is-minimized #pip-content { display: none; }
.code-card, .complexity-card { padding: 24px; box-shadow: none; }
.file-label, .complexity-chip { align-self: center; color: var(--ink-soft); font-size: 0.68rem; font-weight: 750; }
.complexity-chip { padding: 6px 9px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.code-block { overflow-x: auto; margin: 22px 0 0; padding: 18px; border-radius: 16px; background: var(--ink); color: #d9e9df; font-size: 0.78rem; line-height: 1.85; }
.code-line { display: block; border-radius: 5px; padding: 0 7px; transition: background 150ms ease, color 150ms ease; }
.code-line b { display: inline-block; width: 20px; color: #91a69c; font-weight: 500; }
.code-line.is-active { background: rgba(245,201,107,0.2); color: #fff; }
.code-line.is-active b { color: var(--sun); }
.complexity-values { display: flex; gap: 10px; margin: 22px 0 16px; }
.complexity-values > div { flex: 1; padding: 14px; border-radius: 15px; background: var(--blue-soft); }
.complexity-values strong, .complexity-values span { display: block; }
.complexity-values strong { font-size: 1.5rem; }
.complexity-values span { margin-top: 4px; color: var(--ink-soft); font-size: 0.72rem; }
.complexity-card p { margin-bottom: 0; color: var(--ink-soft); font-size: 0.77rem; line-height: 1.5; }
.reflection { padding-top: 95px; padding-bottom: 130px; border-top: 1px solid var(--line); }
.reflection h2 { max-width: 700px; }
.reflection p:last-child { max-width: 660px; margin-bottom: 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.6; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes array-change {
  0% { outline-color: rgba(245, 201, 107, 0); }
  45% { outline-color: rgba(245, 201, 107, 1); }
  100% { outline-color: rgba(245, 201, 107, 0.72); }
}

@media (max-width: 820px) {
  .site-header { padding: 20px; }
  .header-status { display: none; }
  .hero, .catalog, .lesson-shell, .reflection { padding-left: 20px; padding-right: 20px; }
  .hero { grid-template-columns: 1fr; gap: 42px; padding-top: 55px; padding-bottom: 70px; }
  .pip-intro { max-width: none; }
  .catalog-heading { display: block; }
  .catalog-heading-aside { justify-items: start; max-width: none; margin-top: 18px; }
  .catalog-heading-aside > p { text-align: left; }
  .curriculum-map-header { align-items: stretch; flex-direction: column; }
  .curriculum-map-filter { flex-basis: auto; }
  .curriculum-map-detail { grid-template-columns: 1fr; }
  .progress-dashboard { grid-template-columns: 1fr; }
  .progress-actions { justify-content: flex-start; }
  .progress-reset-confirmation { align-items: stretch; flex-direction: column; }
  .progress-reset-confirmation p { margin-bottom: 4px; }
  .catalog-tools { grid-template-columns: 1fr 1fr; }
  .catalog-search { grid-column: 1 / -1; }
  .catalog-tools .quiet-button { grid-column: 1 / -1; justify-self: start; }
  .lesson-heading { display: block; }
  .lesson-heading-actions { justify-items: start; margin-top: 18px; }
  .share-state-notice { grid-template-columns: 1fr; }
  .share-state-notice .quiet-button { justify-self: start; }
  .lesson-meta { margin-top: 18px; }
  .lesson-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .comparison-setup { grid-template-columns: 1fr 1fr; }
  .comparison-setup > label:first-child { grid-column: 1 / -1; }
  .mobile-code-strip { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 9px; align-items: center; padding: 11px 14px; border-radius: 13px; background: var(--ink); color: #d9e9df; }
  .mobile-code-label { color: var(--sun); font-size: 0.58rem; font-weight: 850; letter-spacing: 0.1em; }
  .mobile-code-location { color: #91a69c; font-size: 0.63rem; font-weight: 750; }
  .mobile-code-strip code { min-width: 0; overflow: hidden; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 520px) {
  .skip-links { right: 12px; flex-direction: column; }
  h1 { font-size: clamp(3.35rem, 17vw, 5rem); }
  .lesson-topic-cards { grid-template-columns: 1fr; }
  .curriculum-map { padding: 19px; border-radius: 23px; }
  .curriculum-map-scroll { max-height: 560px; }
  .lesson-card { min-height: 112px; padding: 20px; }
  .lesson-topic-group.is-current { padding: 16px; }
  .lesson-topic-heading { align-items: start; }
  .visualization-card, .pip-card, .code-card, .complexity-card { border-radius: 21px; }
  .visualization-card { padding: 20px; }
  .comparison-workspace { padding: 20px; border-radius: 23px; }
  .comparison-header { align-items: stretch; flex-direction: column; }
  .comparison-header .quiet-button { align-self: flex-start; }
  .comparison-setup { grid-template-columns: 1fr; padding: 15px; }
  .comparison-setup > label:first-child { grid-column: auto; }
  .comparison-input-actions, .comparison-controls, .comparison-side-controls { align-items: stretch; flex-direction: column; }
  .comparison-result { grid-template-columns: 1fr; }
  .comparison-visual { min-height: 260px; }
  .lesson-fields { grid-template-columns: 1fr; }
  .lesson-field { grid-column: 1; }
  .visualization-stage { padding-left: 10px; padding-right: 10px; }
  .array-scroll { padding-top: 42px; }
  .array-cells { gap: 5px; }
  .array-cell { min-height: 65px; padding-left: 2px; padding-right: 2px; font-size: 1rem; }
  .array-cell::before { left: 6px; }
  .stat-grid { grid-template-columns: 1fr; }
  .player-controls { align-items: stretch; }
  .challenge-card-header { align-items: flex-start; }
  .challenge-actions { align-items: stretch; flex-direction: column; }
  .player-controls > .secondary-button, .player-controls > .primary-button--play { flex: 1; }
  .speed-control { width: 100%; margin-left: 0; }
  .speed-control input { flex: 1; }
  .lesson-complete-actions > .secondary-button { flex: 1 1 calc(50% - 5px); }
  .lesson-complete-actions > .primary-button { flex: 1 1 100%; }
  .lesson-complete-back { width: 100%; text-align: center; }
  .prediction-entry { align-items: stretch; flex-direction: column; }
}

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