.practice-page main { width: min(1680px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px) var(--space-7); }
.practice-page .intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; padding: var(--space-7) 0; }
.practice-page .intro h1 { margin: 0 0 var(--space-5); font-size: clamp(40px, 5vw, 66px); }
.today { border-left: 4px solid var(--paper-margin); padding: var(--space-5); background-color: var(--color-surface); background-image: var(--paper-texture); box-shadow: var(--shadow-paper); }
.studio { display: grid; grid-template-columns: 240px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-paper); }
.curriculum { padding: var(--space-5) var(--space-4); border-right: 1px solid var(--color-border-soft); background: var(--color-surface-subtle); }
.curriculum nav { max-height: 720px; margin: var(--space-5) calc(var(--space-2) * -1); overflow: auto; }
.curriculum textarea { width: 100%; margin-top: var(--space-2); }
.lesson { display: block; width: 100%; min-height: 44px; margin: var(--space-1) 0; padding: 10px 12px; border-color: transparent; background: transparent; text-align: left; }
.lesson small { display: block; color: var(--color-muted); font-weight: 400; }
.lesson[aria-current="true"] { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-surface); }
.lesson[aria-current="true"] small { color: var(--color-surface-subtle); }
.group-label { padding: var(--space-4) var(--space-3) var(--space-1); font-size: 14px; font-weight: 750; }
.workbench { min-width: 0; }
.notebook-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); }
.notebook-heading > div:first-child { min-width: 0; }
.notebook-heading #title { margin: 0; font-size: clamp(26px, 3vw, 30px); line-height: 1.18; overflow-wrap: anywhere; }
.notebook-heading #stage { margin-top: 0; }
.notebook-heading #why { margin-bottom: 0; }
.timer { display: inline-flex; flex-shrink: 0; align-items: center; gap: var(--space-2); text-align: right; }
.timer output { display: block; font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.timer button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.session-bar, .file-bar, .actions, .reflection-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.session-bar { padding: var(--space-3) var(--space-5); border-block: 1px solid var(--color-border-soft); background: var(--color-surface-subtle); }
.panes { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.25fr); }
.brief-pane { max-height: 850px; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--color-border) var(--color-surface-subtle); scrollbar-width: thin; padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-6) + var(--space-3)); border-right: 1px solid var(--color-border); background-color: var(--color-surface); background-image: linear-gradient(90deg, transparent 0 31px, var(--paper-margin) 31px 32px, transparent 32px), repeating-linear-gradient(0deg, transparent 0 27px, var(--paper-rule) 27px 28px), var(--paper-texture); box-shadow: inset -3px 0 0 var(--color-surface-strong); }
.brief-pane #brief > h1:first-child { font-size: clamp(24px, 2.5vw, 30px); }
.brief-pane pre, #case-feedback pre, #output { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); }
.brief-pane pre { padding: var(--space-3); background: var(--color-surface-subtle); }
.code-pane { min-width: 0; padding-bottom: var(--space-4); background-color: var(--color-surface); background-image: var(--paper-texture); color: var(--color-ink); }
.file-bar { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-code-border); background: var(--color-code); }
.file-bar label { color: var(--color-code-ink); }
.file-bar select { max-width: 75%; }
.file-bar > span { margin-left: auto; color: var(--color-code-muted); font-family: var(--font-typewriter); font-size: 12px; }
.editor-shell { height: 360px; overflow: hidden; border-block: 5px solid var(--color-code-border); background: var(--color-code); box-shadow: inset 0 2px 12px var(--color-code), 0 5px 0 var(--color-code-border); }
#editor-help { max-width: none; background: var(--color-code); margin: 0; padding: var(--space-2) var(--space-4); color: var(--color-code-muted); font-family: var(--font-typewriter); font-size: 12px; }
.actions { padding: var(--space-3) var(--space-4); background: var(--color-surface-strong); }
.output-heading { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
#full-output { margin: var(--space-3) var(--space-4); }
#output { min-height: 110px; max-height: 240px; overflow: auto; padding: var(--space-3); background-color: var(--color-surface); background-image: repeating-linear-gradient(0deg, transparent 0 27px, var(--paper-rule) 27px 28px), var(--paper-texture); color: var(--color-ink); box-shadow: var(--shadow-paper); }
#case-feedback { margin: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
.run-results { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: var(--color-border) var(--color-surface-subtle); scrollbar-width: thin; }
.brief-pane:focus-visible, .run-results:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.checks-pass { color: var(--color-primary); }
.checks-fail { color: var(--color-danger); }
#example-lab { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
#example-input { display: block; width: 100%; min-height: 72px; margin: var(--space-2) 0; font-family: var(--font-mono); }
.example-values { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.example-values span, .example-values code { display: block; }
.example-values code { padding: var(--space-2); background: var(--color-surface-subtle); overflow-wrap: anywhere; }
#journey-feedback { margin: 0 var(--space-4) var(--space-3); padding: var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-card); background: var(--color-primary-soft); }
#journey-feedback .eyebrow { margin-bottom: var(--space-1); }
#journey-message { margin: 0 0 var(--space-3); font-size: 14px; }
#next-review-date { margin: 0 0 var(--space-3); font-size: 12px; color: var(--color-muted); }
#next-review-date:empty { display: none; }
#journey-next { width: 100%; justify-content: space-between; padding: var(--space-3) var(--space-4); text-align: left; font-size: 16px; }
.success-moment:has(+ #journey-feedback:not([hidden])) { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.success-moment:not([hidden]) + #journey-feedback { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.reflection { padding: var(--space-5); border-top: 1px solid var(--color-border-soft); background-color: var(--color-surface); background-image: var(--paper-texture); }
.reflection textarea { display: block; width: 100%; min-height: 110px; margin-top: var(--space-2); }
.reflection-footer { justify-content: space-between; margin-top: var(--space-3); }
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); padding: var(--space-7) 0; }
.practice-page > header { display: flex; min-width: 0; }
.practice-page > header #practice-context { min-width: 0; flex: 1 1 auto; margin-right: 0; }
.practice-page > header .practice-options, .practice-page > header .sound-toggle { flex: 0 0 auto; margin-left: 0; }
.practice-options { position: relative; margin: 0; padding: 0; border: 0; }
.practice-options > summary { display: flex; align-items: center; min-height: 44px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); list-style-position: inside; }
.practice-options>div { position: absolute; z-index: 10; top: calc(100% + var(--space-2)); right: 0; display: grid; gap: var(--space-2); width: min(250px, calc(100vw - (var(--space-5) * 2))); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card); }
.practice-options > div > a { display: flex; align-items: center; min-height: 44px; padding: 9px 12px; border-radius: var(--radius-control); color: var(--color-ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.practice-options > div > a:hover { background: var(--color-surface-subtle); }
.practice-options > div > button { width: 100%; justify-content: flex-start; }
.personal-notes { margin-top: var(--space-5); border: 1px solid var(--color-border-soft); border-radius: var(--radius-card); background-color: var(--color-surface); background-image: var(--paper-texture); box-shadow: var(--shadow-paper); overflow: hidden; }
.personal-notes > summary { display: list-item; min-height: 44px; padding: 12px var(--space-5); cursor: pointer; font-weight: 700; }
.personal-notes .reflection { padding: var(--space-5); }

body.focus.practice-page main { width: 100%; padding: 8px 12px; }
body.focus .intro, body.focus .curriculum, body.focus .evidence, body.focus .session-bar, body.focus .timer, body.focus #stage, body.focus #main, body.focus footer, body.focus #next-exercise, body.focus #review-status { display: none; }
body.focus .studio { display: block; overflow: visible; border: 0; background: transparent; }
body.focus .panes { grid-template-columns: minmax(220px, .85fr) minmax(300px, 1.35fr) minmax(280px, 1fr); gap: 12px; }
body.focus .brief-pane, body.focus .code-pane, body.focus .testing-pane { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-paper); }
body.focus .brief-pane { background-color: var(--color-surface); }
body.focus .code-pane { background-color: var(--color-surface); background-image: var(--paper-texture); color: var(--color-ink); }
body.focus .code-pane { overflow: hidden; padding-bottom: 0; }
body.focus .actions { background: var(--color-surface-strong); }
body.focus #full-output { color: var(--color-ink); }

@media (max-width: 900px) {
  .studio { grid-template-columns: 200px minmax(0, 1fr); }
  .panes, body.focus .panes { grid-template-columns: 1fr; }
  .brief-pane, body.focus .brief-pane { max-height: min(38vh, 360px); border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .editor-shell { height: clamp(260px, 42vh, 360px); }
  .run-results { max-height: min(42vh, 420px); }
}
@media (max-width: 700px) {
  .practice-page .intro, .evidence, .studio { grid-template-columns: 1fr; }
  .curriculum { border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .curriculum nav { max-height: 220px; }
  .brief-pane { padding: var(--space-5) var(--space-5) var(--space-5) 44px; }
}

#case-feedback pre { font-size: 12px; padding: var(--space-3); background: var(--color-surface-subtle); border-radius: var(--radius-control); }
#case-feedback details { padding-block: var(--space-2); font-size: 14px; }
#case-feedback details > summary, .worked-example > summary { min-height: 44px; cursor: pointer; font-weight: 700; }
#first-feedback { padding-inline: var(--space-4); font-size: 14px; }
body.focus .brief-pane>h3,body.focus .output-heading,body.focus #stop:disabled { display:none; }
.example-values span {font-size:12px;color:var(--color-muted)}
.example-values code,#example-caption {font-size:14px}

body.focus #rescue { display: none; }

body.focus.mock-active .timer { display: inline-flex; }
#example-lab > summary { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); }
#example-lab > summary::before { content: '+'; color: var(--color-primary); }
#example-lab[open] > summary::before { content: '−'; }
@media (max-width: 540px) { header { flex-wrap: wrap; } .practice-page > header .home { margin-right: auto; } .practice-page > header #practice-context { order: 3; flex-basis: 100%; font-size: 12px; } .notebook-heading { gap: var(--space-3); } }

.code-pane { position: relative; }
.success-moment { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) var(--space-4); padding: var(--space-3); border: 2px dashed var(--color-primary); border-radius: var(--radius-card); background-color: var(--color-primary-soft); background-image: var(--paper-texture); color: var(--color-primary); box-shadow: inset 0 0 0 3px var(--color-surface); }
.success-moment strong { display: block; font-family: var(--font-typewriter); font-size: 18px; letter-spacing: .025em; line-height: 1.4; text-transform: uppercase; }
.success-moment span { display: block; font-size: 14px; color: var(--color-muted); }
.success-check { width: 48px; height: 48px; flex: 0 0 48px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); }
.success-check circle { stroke-dasharray: 145; }
.success-check path { stroke-dasharray: 42; }
.success-moment:not([hidden]) ~ #case-feedback > .checks-pass { display: none; }
.is-celebrating { animation: success-arrive 420ms cubic-bezier(.18,.85,.28,1.15); }
.is-celebrating .success-check circle { animation: success-draw 420ms ease-out both; }
.is-celebrating .success-check path { animation: success-tick 280ms 260ms ease-out both; }
.celebration-particles { position: absolute; left: 50%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.celebration-piece { position: absolute; width: 7px; height: 10px; border-radius: 2px; background: var(--color-primary); animation: success-confetti 1050ms var(--delay) ease-out both; }
.celebration-piece.tone-1 { background: var(--color-focus); }
.celebration-piece.tone-2 { background: var(--color-code-definition); }
.celebration-piece.tone-3 { background: var(--color-code-number); }
@keyframes success-arrive { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes success-draw { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
@keyframes success-confetti { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 12% { opacity: 1; } 60% { opacity: .9; transform: translate(var(--flight-x), var(--flight-y)) rotate(var(--spin)); } 100% { opacity: 0; transform: translate(var(--flight-x), 55px) rotate(var(--spin)); } }
@media (prefers-reduced-motion: reduce) { .is-celebrating, .is-celebrating .success-check circle, .is-celebrating .success-check path { animation: none; } .celebration-particles { display: none; } }

@keyframes success-tick { from { stroke-dashoffset: 42; } to { stroke-dashoffset: 0; } }

.syntax-status { min-height: 20px; margin: 0; padding: var(--space-1) var(--space-4); font-size: 12px; color: var(--color-muted); }
.syntax-status[data-state="error"] { color: var(--color-danger); }
.syntax-status[data-state="clear"] { color: var(--color-primary); }
body.focus #syntax { display: none; }
body.focus.syntax-unavailable #syntax { display: inline-flex; }

/* Remediation is one compact worked pattern inside the same notebook. */
.learning-support{padding:var(--space-4);margin:0 0 var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-control);background:var(--color-surface)}
.learning-support h2{font-size:1.1rem;line-height:1.4;margin:0 0 var(--space-3)}
.learning-support p{margin:var(--space-3) 0}
.learning-support pre{overflow:auto;padding:var(--space-3);font-size:.85rem;line-height:1.6}
.learning-support details{padding:var(--space-3) 0 0}
.worked-example > summary { display: list-item; }
.next-context { margin-top: var(--space-2); }
.next-context > summary { font-size: 12px; min-height: 28px; }
.worked-example > :last-child { margin-bottom: 0; }

/* The working loop stays on screen; only long content scrolls inside its pane. */
.testing-pane { min-width: 0; background: var(--color-surface); }
#example-lab { margin: 0; padding: 12px; border-top: 0; border-bottom: 1px solid var(--color-border); }
#example-title { margin: 0 0 8px; font-size: 18px; }
#example-input-label { font-size: 13px; }
.input-format { border: 0; padding: 0; margin: 4px 0; font-size: 12px; }
.input-format summary { cursor: pointer; }
.input-format p { margin: 6px 0; }
#example-input { min-height: 76px; height: 90px; max-height: 180px; resize: vertical; padding: 8px; font-size: 13px; line-height: 1.4; }
.example-values { margin-top: 10px; gap: 6px; }
.example-values code { max-height: 80px; overflow: auto; white-space: pre-wrap; font-size: 12px; }
body.focus > header { height: 56px; padding: 4px 12px; font-size: 14px; }
body.focus > header .sound-toggle, body.focus .practice-options > summary { min-height: 36px; padding: 6px 10px; font-size: 12px; }
body.focus #notice:not(:empty) { margin: 0 0 6px; padding: 4px 8px; font-size: 12px; line-height: 18px; }
body.focus .brief-pane { padding: 18px 16px 16px 40px; font-size: 15px; line-height: 1.5; }
body.focus .notebook-heading { margin-bottom: 16px; }
body.focus .notebook-heading #title { font-size: 24px; }
body.focus .field-context { font-size: 13px; line-height: 1.5; padding-left: 10px; margin-top: 12px; }
body.focus .file-bar { padding: 6px 10px; gap: 8px; font-size: 12px; }
body.focus .file-bar select { padding: 4px 8px; min-height: 32px; font-size: 13px; max-width: 65%; }
body.focus #editor-help { font-size: 10px; padding: 4px 10px; }
body.focus .actions { padding: 8px 10px; }
body.focus .editor-shell { border-block-width: 1px; }
body.focus .success-moment { margin: 8px; padding: 8px; gap: 8px; }
body.focus .success-moment strong { font-size: 14px; }
body.focus .success-moment span { font-size: 12px; }
body.focus .success-check { width: 32px; height: 32px; flex-basis: 32px; }
body.focus #journey-feedback { margin: 0 8px 8px; padding: 8px; }
body.focus #journey-next { padding: 8px; font-size: 13px; }

@media (min-width: 901px) {
  body.focus main { height: calc(100dvh - 56px); display: flex; flex-direction: column; min-height: 0; }
  body.focus .studio { flex: 1; min-height: 0; box-shadow: none; }
  body.focus .workbench { height: 100%; }
  body.focus .panes { height: 100%; min-height: 0; }
  body.focus .brief-pane { height: 100%; max-height: none; }
  body.focus .code-pane, body.focus .testing-pane { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
  body.focus .file-bar, body.focus #editor-help, body.focus .syntax-status, body.focus .actions { flex: 0 0 auto; }
  body.focus .editor-shell { height: auto; min-height: 100px; flex: 1 1 0; }
  body.focus #example-lab { flex: 0 1 auto; max-height: 65%; overflow: auto; }
  body.focus .run-results { max-height: none; flex: 1 1 0; }
  body.focus .run-results #output, body.focus .run-results #case-feedback pre { max-height: none; overflow: visible; }
  body:not(.focus) .panes { grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.4fr); }
  body:not(.focus) .testing-pane { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.focus .panes { grid-template-columns: 1fr; }
  .testing-pane { border: 1px solid var(--color-border); }
  body.focus > header { height: auto; min-height: 56px; }
}
/* Inline Python examples wrap instead of widening the notebook column. */
.brief-pane #brief { overflow-wrap: anywhere; }
.brief-pane #brief code { white-space: pre-wrap; }
.brief-pane #brief ul { margin: var(--space-3) 0; padding-left: 1.35em; }
.brief-pane #brief li + li { margin-top: var(--space-1); }
#example-lab:not([data-mode="python"]) .example-values code { white-space: normal; }