.learn-home, .classroom { width: min(1280px, 94vw); margin: 3rem auto 6rem; }
.learn-home { max-width: 1100px; }
.learn-home h1 { font: 500 clamp(2.8rem, 6vw, 5.2rem)/1.06 var(--font-serif); max-width: 13ch; margin: 1.2rem 0 1.8rem; letter-spacing: -.035em; }
.learn-home h1 em { color: var(--accent); font-weight: 400; }
.learn-lead { font-size: 1.25rem; max-width: 57ch; color: var(--fg-muted); }
.learn-note { max-width: 72ch; font-size: .93rem; color: var(--fg-muted); margin: 1.5rem 0; }
.eyebrow { font: 600 .7rem/1.5 var(--font-mono); letter-spacing: .13em; color: var(--accent); }
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 3rem 0 2rem; }
.course-card { position: relative; display: flex; flex-direction: column; padding: 2.1rem; color: var(--fg); background: var(--bg-elevated); text-decoration: none; min-height: 250px; transition: background 160ms; }
.course-card:hover { background: #191d25; }
.course-card h2 { font: 400 1.8rem/1.2 var(--font-serif); margin: .7rem 0 1rem; max-width: 85%; }
.course-card > p:not(.eyebrow) { font-size: .95rem; color: var(--fg-muted); max-width: 44ch; }
.course-number { position: absolute; right: 1.7rem; top: 1.5rem; font: 400 2.7rem var(--font-serif); color: #647580; }
.course-footer { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; margin-top: auto; padding-top: 1.8rem; color: var(--fg-muted); }
.course-footer span { color: var(--accent); }
.classroom-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 1.5rem; }
.classroom-header h1 { font: 400 clamp(1.6rem, 3vw, 2.6rem)/1.2 var(--font-serif); margin: .6rem 0 0; }
.back-link { font-size: .78rem; color: var(--fg-muted); text-decoration: none; }
.course-meter { min-width: 180px; font: .72rem var(--font-mono); color: var(--fg-muted); }
.course-meter progress { display: block; width: 100%; height: 5px; margin-top: .6rem; accent-color: var(--accent); }
.classroom-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 2.5rem; }
.course-outline { position: sticky; top: 6rem; align-self: start; max-height: calc(100vh - 7rem); overflow-y: auto; scrollbar-width: thin; padding-right: .8rem; }
.course-outline summary { font-size: .8rem; font-weight: 600; margin-bottom: 1.1rem; }
.course-outline h2 { font: 600 .68rem var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); margin: 1.4rem 0 .5rem; }
.course-outline ol { list-style: none; padding: 0; margin: 0; }
.course-outline a { display: flex; gap: .65rem; padding: .36rem .5rem; font-size: .79rem; color: var(--fg-muted); text-decoration: none; border-left: 2px solid transparent; }
.course-outline a[aria-current] { color: var(--accent); background: #13262d; border-left-color: var(--accent); }
.lesson-mark { flex: 0 0 1ch; font-family: var(--font-mono); }
.course-outline a[data-completed="true"] .lesson-mark { color: #86d4a1; }
.lesson-workspace { min-width: 0; max-width: 950px; }
.course-guide { border-bottom: 1px solid var(--border); padding: .8rem 0; font-size: .86rem; }
.course-guide summary { cursor: pointer; color: var(--fg-muted); }
.course-guide[open] summary { color: var(--accent); margin-bottom: 1rem; }
.lesson-heading { margin: 2rem 0 1rem; }
.lesson-heading h2 { font: 400 1.8rem var(--font-serif); margin: .3rem 0; }
.lesson-prose { font-size: .96rem; max-width: 76ch; line-height: 1.7; }
.lesson-prose h1 { font-size: 1.25rem; }
.lesson-prose h2 { font-size: 1.15rem; }
.lesson-prose h3 { font-size: 1rem; }
.lesson-prose pre, .lesson-prose code { font-size: .83rem; }
.lesson-prose pre { background: var(--bg-elevated); padding: 1rem; overflow-x: auto; border: 1px solid var(--border); }
.editor-frame { border: 1px solid #35404c; border-radius: 5px; overflow: hidden; margin-top: 1.8rem; }
.editor-toolbar, .check-toolbar { display: flex; justify-content: space-between; gap: .6rem; align-items: center; padding: .7rem 1rem; background: var(--bg-elevated); }
.editor-toolbar { border-bottom: 1px solid var(--border); }
.editor-toolbar label { font: .75rem var(--font-mono); color: var(--fg-muted); }
.editor-tools { display: flex; flex-wrap: wrap; gap: .5rem; }
.lean-code-input { position: relative; background: #101219; }
.lean-editor, .lean-highlight { padding: 1.1rem; margin: 0; border: 0; border-radius: 0; font: .83rem/1.7 var(--font-mono); font-variant-ligatures: none; letter-spacing: normal; tab-size: 2; white-space: pre; overflow-wrap: normal; word-break: normal; text-align: left; }
.lean-editor { position: relative; display: block; width: 100%; min-height: 290px; max-height: 65vh; resize: vertical; overflow: auto; background: transparent; color: #e2e9f0; caret-color: #e2e9f0; }
.lean-highlight { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; color: #e2e9f0; }
.lean-editor.has-highlighting { color: transparent; -webkit-text-fill-color: transparent; }
.lean-editor::selection { background: #27576b90; }
.lean-token-keyword { color: #c6a0f6; }
.lean-token-tactic { color: #7dcfff; }
.lean-token-type { color: #8adbc8; }
.lean-token-declaration { color: #86cffa; }
.lean-token-string { color: #b2d89c; }
.lean-token-number { color: #edc985; }
.lean-token-comment { color: #93a4b5; }
.lean-token-operator { color: #bdc8d5; }
.lean-token-hole { color: #ffb98a; }
@media (forced-colors: active) {
  .lean-highlight { display: none; }
  .lean-editor.has-highlighting { color: CanvasText; -webkit-text-fill-color: CanvasText; caret-color: CanvasText; }
}
.lean-editor:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.classroom button { border: 1px solid #3b4350; border-radius: 4px; background: transparent; color: var(--fg); cursor: pointer; padding: .4rem .7rem; font: 500 .78rem var(--font-sans); }
.classroom button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.classroom button:disabled { opacity: .45; cursor: default; }
.classroom .run-lean { background: var(--accent); color: #091318; border-color: var(--accent); font-weight: 700; }
.classroom .run-lean:hover:not(:disabled) { background: var(--accent-hover); color: #091318; }
.editor-shortcut, .runtime-note { font-size: .72rem; color: var(--fg-muted); }
.runtime-note { margin: .7rem 0; }
.check-output { border: 1px solid var(--border); border-radius: 4px; margin: 1rem 0; padding: 1rem; background: var(--bg-elevated); }
.check-output h3 { font: 600 .8rem var(--font-sans); margin: 0 0 .7rem; }
.check-output[data-state="passed"] { border-color: #50846a; }
.check-output[data-state="passed"] h3 { color: #a2e0b8; }
.diagnostic { white-space: pre-wrap; overflow-wrap: anywhere; font: .8rem/1.6 var(--font-mono); padding: .7rem 0; border-top: 1px solid var(--border); }
.diagnostic[data-severity="error"] { border-left: 2px solid var(--danger); padding-left: .8rem; }
.diagnostic button { font-size: .7rem; margin-bottom: .4rem; }
.lesson-help { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.4rem 0; }
.lesson-help details { border-top: 1px solid #35404c; padding-top: .7rem; min-width: 0; }
.lesson-help summary { font-size: .82rem; color: var(--accent); cursor: pointer; }
.lesson-help pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .78rem/1.6 var(--font-mono); }
.lesson-help p { font-size: .9rem; }
.lesson-navigation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--border); padding: 1.5rem 0; margin-top: 1rem; }
#save-status { font-size: .72rem; color: var(--fg-muted); text-align: center; }
#save-status[data-kind="error"], #learning-alert { color: #ffbd8e; }
.learning-account { font-size: .78rem; color: var(--fg-muted); }
.draft-conflict { padding: 1rem; border: 1px solid #ae864f; border-radius: 4px; margin: 1rem 0; }
.draft-conflict pre { max-height: 220px; overflow: auto; white-space: pre-wrap; font-size: .78rem; }
.draft-conflict button { margin: .4rem .6rem .4rem 0; }
.editor-container { container: lean-editor / inline-size; margin-top: 1.8rem; min-width: 0; --goals-height: 15rem; }
.editor-container.expanded-goals { --goals-height: 24rem; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.editor-layout > .editor-frame { margin: 0; min-width: 0; }
.editor-workspace-bar { grid-column: 1 / -1; }
.editor-workspace-bar > .editor-tools { gap: .3rem; }
.runtime-activity { display: flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .75rem; border: 1px solid var(--accent); border-radius: 5px; background: var(--bg-elevated); font-size: .83rem; }
.runtime-activity > div { flex: 1; min-width: 0; }
.runtime-activity strong { font-weight: 600; }
.runtime-activity p { color: var(--fg-muted); font-size: .78rem; margin: .35rem 0 0; }
.runtime-activity[data-phase="ready"] { border: 0; padding: 0 .2rem; color: var(--fg-muted); font-size: .72rem; }
.runtime-activity[data-phase="ready"]::before { content: '●'; color: var(--accent); font-size: .6rem; }
.runtime-activity[data-phase="error"] { border-color: #ae864f; }
.runtime-spinner { width: 1.25rem; height: 1.25rem; flex: none; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: lean-loading .8s linear infinite; }
@keyframes lean-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .runtime-spinner { animation: none; border-color: var(--accent); border-style: dotted; } }
.editor-workspace-bar button, .side-heading button { min-height: 44px; min-width: 44px; }
.editor-workspace-bar button[aria-expanded="true"], .editor-workspace-bar button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.check-label-full { display: none; }
.editor-container .lean-editor, .editor-container .lean-highlight { font-size: 16px; line-height: 1.6; padding: .8rem; }
.editor-container .lean-editor { height: clamp(12rem, 35svh, 22rem); min-height: 0; max-height: none; }
.editor-side { display: flex; flex-direction: column; height: var(--goals-height); min-height: 0; min-width: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-elevated); padding: .65rem .8rem; overflow: hidden; font-size: .88rem; }
.editor-container [hidden] { display: none !important; }
.editor-goals { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.goal-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.editor-side.has-reference { height: max(var(--goals-height), 32rem); }
.editor-side.has-reference { overflow-y: auto; }
.editor-side.has-reference .editor-goals { min-height: 0; flex: 0 0 12rem; }
.editor-library-search { min-height: 10rem; overflow-y: auto; flex: 1; border-top: 1px solid var(--border); }
.editor-library-search form { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; margin: .5rem 0; }
.editor-library-search form label { flex: 1 1 12rem; min-width: 0; }
.editor-library-search input { margin-bottom: 0; }
.search-scope label { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-size: .8rem; }
.search-scope select { flex: 1; min-width: 0; min-height: 44px; max-width: 100%; padding: .5rem; background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 4px; font-size: 16px; }
.editor-library-search button { min-height: 44px; }
.editor-library-search .side-heading h3 { font-size: .85rem; }
.search-help, .theorem-result { font-size: .8rem; }
.search-examples { display: flex; flex-wrap: wrap; gap: .35rem; }
.search-examples button, .search-suggestion { font: .8rem var(--font-mono); overflow-wrap: anywhere; }
.search-suggestion { display: block; width: 100%; margin: .5rem 0; text-align: left; }
.theorem-result { border-top: 1px solid var(--border); padding: .8rem 0; min-width: 0; }
.theorem-result h4 { margin: 0 0 .35rem; font-size: .85rem; overflow-wrap: anywhere; }
.theorem-result h4 code { font-family: var(--font-mono); font-weight: 500; color: var(--accent); }
.theorem-result .runtime-note { margin: .25rem 0; overflow-wrap: anywhere; }
.theorem-doc { white-space: pre-wrap; overflow-wrap: anywhere; }
[data-search-results].is-stale { opacity: .65; }
.editor-reference { flex: 1; min-height: 6rem; overflow: auto; border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .5rem; }
.side-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: .4rem; }
.side-heading h3 { margin: 0; font-size: .9rem; }
.editor-side pre { white-space: pre-wrap; overflow-wrap: anywhere; font: .88rem/1.6 var(--font-mono); margin: .5rem 0 1rem; }
.editor-side input { display: block; width: 100%; margin: .6rem 0; padding: .6rem; background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: 4px; font-size: 16px; }
.editor-side details { padding: .6rem 0; border-top: 1px solid var(--border); }
.editor-side summary { cursor: pointer; font-family: var(--font-mono); color: var(--accent); }
.editor-side [data-goal-status] { color: var(--fg-muted); font-size: .75rem; margin: .25rem 0 .4rem; }
.editor-side .is-stale [data-goal-output] { opacity: .65; }
.editor-side [data-severity="error"] { color: #ffbd8e; }
.editor-side [data-goal-output] h4 { font: 500 .78rem var(--font-sans); color: var(--fg-muted); margin: .4rem 0; }
.has-focused-lean { overflow: hidden; }
.editor-container.is-focused { position: fixed; z-index: 1000; inset-inline: 0; top: var(--editor-viewport-top, 0px); height: var(--editor-viewport-height, 100dvh); margin: 0; padding: max(.4rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.4rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left)); background: var(--bg); }
.editor-container.is-focused .editor-layout { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
.editor-container.is-focused .editor-layout.has-editor-side { grid-template-rows: auto minmax(0, 1.3fr) minmax(0, 1fr); }
.editor-container.is-focused.expanded-goals .editor-layout.has-editor-side { grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.4fr); }
.editor-container.is-focused .editor-toolbar { display: none; }
.editor-container.is-focused .editor-frame, .editor-container.is-focused .lean-code-input, .editor-container.is-focused .lean-editor, .editor-container.is-focused .editor-side { height: 100%; min-height: 0; max-height: none; }
.editor-container.is-focused .lean-editor { resize: none; }
@container lean-editor (min-width: 760px) {
  .check-label-full { display: inline; }
  .check-label-short { display: none; }
  .editor-layout.has-editor-side { grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr); grid-template-rows: auto clamp(28rem, 65svh, 38rem); }
  .editor-layout.has-editor-side > .editor-frame { display: flex; flex-direction: column; min-height: 0; }
  .editor-layout.has-editor-side .lean-code-input { flex: 1; min-height: 0; }
  .editor-layout.has-editor-side .lean-editor, .editor-layout.has-editor-side .editor-side { height: 100%; min-height: 0; resize: none; }
  .editor-container.is-focused .editor-layout.has-editor-side, .editor-container.is-focused.expanded-goals .editor-layout.has-editor-side { grid-template-rows: auto minmax(0, 1fr); }
}
@container lean-editor (max-width: 759px) {
  .editor-container.is-focused .editor-layout.has-editor-reference { grid-template-rows: auto minmax(3.5rem, .75fr) minmax(0, 1.75fr); }
  .editor-container.is-focused.short-viewport .editor-layout.has-editor-side { grid-template-rows: auto 3.5rem minmax(0, 1fr); }
  .editor-container.is-focused.short-viewport .editor-side [data-goal-status] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-width: 850px) {
  .classroom-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 1.4rem; }
  .lesson-help { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .learn-home, .classroom { margin-top: 1.7rem; }
  .course-grid, .classroom-layout { grid-template-columns: 1fr; }
  .course-card { padding: 1.5rem; min-height: 230px; }
  .classroom-header { align-items: start; flex-direction: column; gap: 1rem; }
  .course-meter { width: 100%; }
  .course-outline { position: static; max-height: 180px; border-bottom: 1px solid var(--border); padding-bottom: .8rem; }
  .editor-toolbar { align-items: start; flex-direction: column; }
  .editor-shortcut { display: none; }
  .lesson-navigation { flex-wrap: wrap; }
  #save-status { order: 3; width: 100%; }
}