@charset "UTF-8";
:root{--bg:#f7f8f5;--paper:#fff;--ink:#20352d;--muted:#718078;--green:#257a62;--soft:#e9f1ec;--line:#e0e7e1;--orange:#cf925c;--radius:18px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Pretendard","Malgun Gothic",system-ui,sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input,summary{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}input{accent-color:var(--green)}:focus-visible{outline:3px solid #72a992;outline-offset:4px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(32px,4vw,52px);font-weight:750;letter-spacing:-2px;line-height:1.3}h2{font-size:22px;letter-spacing:-.6px}h3{font-size:19px;letter-spacing:-.5px}main{max-width:1200px;margin:auto;padding:0 36px;min-height:calc(100vh - 205px)}.header{height:100px;max-width:1272px;margin:auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:12px;letter-spacing:-.6px;font-size:21px;font-weight:700;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--ink);border-radius:11px;color:white;font-family:Georgia,serif;font-size:25px}.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--green)}.header-caption{font-size:13px;color:var(--muted)}.nav{display:flex;gap:24px;align-items:center;font-size:13px}.nav a:hover,.text-button:hover,.back-link:hover{color:var(--green)}.nav form{margin:0}.username{color:var(--muted);border-left:1px solid var(--line);padding-left:24px}.text-button{background:none;border:none;padding:0;font-size:13px;color:var(--muted)}.accent{color:var(--green)}.eyebrow{font-size:11px;font-weight:700;color:var(--green);letter-spacing:2px;margin-bottom:18px}.lede{font-size:16px;color:var(--muted);line-height:1.9}.muted{color:var(--muted)}.button{display:inline-flex;gap:12px;justify-content:center;align-items:center;border-radius:10px;padding:11px 21px;font-size:14px;font-weight:600;border:1px solid transparent;white-space:nowrap}.primary{background:var(--green);color:white}.primary:hover{background:#1b624e}.secondary{background:var(--paper);border-color:var(--line);color:var(--ink)}.secondary:hover{background:var(--soft)}.wide{width:100%;justify-content:space-between}.footer{max-width:1200px;margin:60px auto 0;padding:24px 36px 30px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:11px;letter-spacing:1px}.skip{position:absolute;top:-100px;left:20px;z-index:10;padding:10px;background:white}.skip:focus{top:10px}
.login-layout{min-height:650px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:85px;padding:60px 20px}.login-story h1{font-size:clamp(42px,5vw,62px);margin-bottom:24px}.login-story .lede{font-size:16px}.login-art{width:100%;max-width:400px;height:175px;margin-top:5px}.art-axis{stroke:var(--line);stroke-width:2;fill:none}.art-curve{stroke:var(--green);stroke-width:3;fill:none}.art-line{stroke:var(--orange);stroke-width:2.5;fill:none}.art-point{fill:var(--green);stroke:var(--bg);stroke-width:4}.story-note{font-size:11px;color:var(--muted);display:flex;gap:12px;align-items:center}.story-note span{font-size:10px;color:var(--green);font-weight:700}.login-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:42px 36px;box-shadow:0 14px 50px #25433306}.pill{display:inline-flex;padding:5px 11px;border-radius:20px;background:var(--soft);color:var(--green);font-size:11px}.login-card h2{font-size:27px;margin:24px 0 9px}.login-card .muted{font-size:13px;margin-bottom:30px}.stack{display:flex;flex-direction:column;gap:20px}.stack label{font-weight:600;font-size:13px}.stack input,.block-form input:not([type=checkbox]){display:block;width:100%;margin-top:8px;background:#fbfcfa;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink)}input::placeholder{color:#9ba89f;font-weight:400}.stack button{margin-top:8px}.login-note{font-size:11px;color:var(--muted);text-align:center;margin:26px 0 0}.alert{padding:11px;background:#fff0eb;color:#a54d36;border-radius:10px;font-size:13px}
.hero{display:flex;justify-content:space-between;align-items:center;padding:66px 0 54px;border-bottom:1px solid var(--line);gap:30px}.hero h1{margin-bottom:20px}.hero .lede{margin:0}.hero-meta{display:flex;flex-direction:column;align-items:flex-start;min-width:180px;font-size:12px;color:var(--muted);padding-left:30px;border-left:1px solid var(--line)}.hero-number{font-size:76px;font-weight:300;letter-spacing:-4px;line-height:1.15;color:var(--green);font-family:Georgia,serif}.small-rule{width:30px;height:1px;background:var(--line);margin:18px 0}.library{padding-top:32px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.section-title h2{margin:0;font-size:18px}.section-title h2 span{font-size:10px;letter-spacing:1px;font-weight:400;margin-left:10px}.count{font-size:12px;color:var(--muted)}.search-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:28px}.search-label{font-size:12px;font-weight:600;margin-right:25px;white-space:nowrap}.search-row{display:flex;align-items:center}.search-box{display:flex;width:100%;align-items:center;border:1px solid var(--line);border-radius:12px;padding:5px 5px 5px 16px;background:#fcfdfa;gap:12px}.search-box>span{font-size:26px;color:var(--muted)}.search-box input{width:100%;min-width:0;background:none;border:0;padding:8px 0;font-size:13px}.search-box .button{padding:8px 21px}.tag-filter{border:0;padding:16px 0 0;margin:0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tag-filter legend{float:left;padding:16px 0 10px;width:100%;font-size:11px}.tag-filter legend span{margin-left:10px;font-size:10px}.filter-chip{display:inline-flex;cursor:pointer}.filter-chip input{position:absolute;opacity:0;width:1px;height:1px}.filter-chip span{padding:4px 15px;border:1px solid var(--line);border-radius:18px;font-size:12px;color:var(--muted);background:#fff}.filter-chip input:checked+span{background:var(--soft);border-color:#adcbbb;color:var(--green)}.filter-chip input:focus-visible+span{outline:3px solid #72a992;outline-offset:2px}.reset-link{font-size:11px;color:var(--muted);margin-left:auto}.criteria{font-size:12px;color:var(--muted);margin-top:-12px}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.lesson-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:25px;display:flex;flex-direction:column;transition:transform .18s,border-color .18s,box-shadow .18s}.lesson-card:hover{transform:translateY(-4px);border-color:#9fbfae;box-shadow:0 8px 25px #25433308}.card-top{display:flex;justify-content:space-between;align-items:center}.card-number{font:20px Georgia,serif;color:#8baa98}.duration{font-size:11px;color:var(--muted)}.card-illustration{height:120px;margin:18px 0;background:#f5f8f4;border-radius:12px;padding:10px}.card-illustration svg{width:100%;height:100%}.card-axis{stroke:#dae5dc;stroke-width:1;fill:none}.card-plot{stroke:var(--green);stroke-width:2.5;fill:none}.card-point{fill:var(--green)}.tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.tag{font-size:10px;color:var(--green);background:var(--soft);border-radius:6px;padding:2px 8px}.lesson-card h3{margin:14px 0 10px;line-height:1.55}.lesson-card p{font-size:13px;color:var(--muted);margin-bottom:24px}.card-bottom{margin-top:auto;border-top:1px solid var(--line);padding-top:17px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--green)}.card-arrow{display:grid;place-items:center;border-radius:50%;width:28px;height:28px;background:var(--soft);font-size:16px}.empty{grid-column:1/-1;text-align:center;padding:55px;border:1px dashed var(--line);border-radius:var(--radius);background:#fcfdfb}.empty p{color:var(--muted);font-size:13px}.empty-icon{font-size:42px;color:var(--green)}
.lesson-detail{padding-top:32px}.back-link{font-size:12px;color:var(--muted)}.lesson-heading{padding:36px 0 38px;border-bottom:1px solid var(--line)}.lesson-heading h1{font-size:38px;margin:20px 0 14px}.lesson-heading .lede{margin-bottom:0}.lesson-columns{display:grid;grid-template-columns:1fr 1.16fr;gap:55px;padding-top:40px}.lesson-prose section{margin:28px 0}.lesson-prose h2{font-size:21px;margin-bottom:15px}.lesson-prose p{font-size:14px;color:#586b60;line-height:2}.formula-card{display:flex;justify-content:space-between;align-items:center;padding:24px;background:var(--soft);border-radius:14px;gap:20px}.formula-card span{font-size:12px;color:var(--green)}.formula-card strong{font:italic 28px Georgia,serif;color:var(--green)}figure{margin:25px 0}figure img{width:100%;border-radius:14px}figcaption{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.7}.challenge{padding:24px;border-left:3px solid var(--orange);background:#f4efe5;border-radius:0 12px 12px 0;margin-top:30px}.challenge .eyebrow{color:#987247}.challenge h3{margin-top:10px;font-size:17px}.challenge p{font-size:13px;margin:10px 0}.challenge details{font-size:12px}summary{cursor:pointer;color:var(--green)}.graph-panel{align-self:start;background:white;border:1px solid var(--line);border-radius:22px;padding:27px;position:sticky;top:24px}.graph-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.graph-heading .eyebrow{font-size:9px;margin-bottom:6px}.graph-heading h2{font-size:22px;margin-bottom:10px}.graph-panel>.muted{font-size:11px;margin-bottom:22px}.live-pill{font-size:10px;color:var(--green);display:flex;gap:5px;align-items:center;white-space:nowrap}.live-pill>span{width:6px;height:6px;background:var(--green);border-radius:50%}.graph-surface{background:#f8faf6;border-radius:12px;padding:8px}.graph-surface svg{width:100%;display:block}.grid-line{stroke:#e1e8df;stroke-width:1}.axis{stroke:#9bac9f;stroke-width:1.3}.tick{fill:#7b8b7e;font-size:11px}.axis-label{fill:var(--ink);font-size:12px}.function-line{stroke:var(--green);stroke-width:3;fill:none}.sample-point{fill:var(--orange);stroke:white;stroke-width:2}.graph-equation{text-align:center;font:italic 23px Georgia,serif;padding:17px 0 22px;color:var(--green)}.range-label{display:flex;justify-content:space-between;font-size:12px;align-items:center}.range-label strong{font-family:Georgia,serif;color:var(--green);margin-left:5px}.range-label output{font-size:14px;font-weight:600;color:var(--green);background:var(--soft);border-radius:6px;min-width:46px;text-align:center;padding:1px 8px}.controls input{width:100%;margin:13px 0 0;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:0 0 20px}.result-row{padding:14px 18px;background:var(--soft);border-radius:10px;display:flex;justify-content:space-between;font-size:12px}.result-row strong{font-size:15px;color:var(--green)}.graph-bottom p{font-size:11px;color:var(--muted);margin:15px 0}.graph-bottom button{font-size:11px;padding:7px 13px}
.admin-page{padding-top:50px}.admin-page h1{font-size:36px}.policy-bar{display:flex;gap:28px;background:var(--soft);border-radius:12px;padding:20px 25px;font-size:12px;margin:30px 0}.policy-bar strong{margin-left:8px;color:var(--green)}.admin-page>.muted{font-size:12px}.blocks-list{display:grid;gap:16px}.block-card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:25px}.block-heading{display:flex;justify-content:space-between;align-items:center}.block-heading h3{margin:0;font-family:ui-monospace,monospace}.status{font-size:11px;border-radius:20px;padding:4px 12px}.blocked{color:#ab583e;background:#faeee7}.cleared{color:var(--green);background:var(--soft)}.block-meta{font-size:11px;color:var(--muted);margin:12px 0 20px}.block-form{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:18px;align-items:center}.block-form label{font-size:12px}.block-form small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.block-form input:not([type=checkbox]){font-size:12px;padding:9px 11px}.checkbox-label{white-space:nowrap}.unblock-form{margin-top:17px}.unblock-form button{color:var(--green)}.audit-section{margin-top:45px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px}th,td{border-bottom:1px solid var(--line);text-align:left;padding:13px 12px;vertical-align:top}th{font-weight:600;color:var(--muted);white-space:nowrap}td pre{white-space:pre-wrap;word-break:break-word;max-width:300px;font-size:10px}.error-page{max-width:700px;padding:100px 0}.error-page h1{font-size:36px}
@media(max-width:1000px){.nav{gap:15px}.username{padding-left:15px}.login-layout{gap:40px;padding:50px 0}.lesson-grid{gap:16px}.lesson-card{padding:20px}.lesson-columns{gap:28px}.block-form{grid-template-columns:1fr 1fr}.policy-bar{gap:15px;flex-wrap:wrap}.story-note{flex-wrap:wrap}}
@media(max-width:720px){main{padding:0 20px}.header{height:auto;min-height:90px;padding:20px;align-items:flex-start;flex-direction:column;gap:16px}.nav{flex-wrap:wrap;width:100%;gap:12px;font-size:12px}.username{margin-left:auto;padding-left:12px}.header-caption{font-size:11px}.brand{font-size:19px}.login-layout{grid-template-columns:1fr;gap:30px;padding:35px 0}.login-story h1{font-size:42px}.login-art,.story-note{display:none}.login-story .lede{font-size:14px}.login-card{padding:30px 25px}.hero{padding:38px 0;align-items:flex-start}.hero h1{font-size:34px}.hero .lede{font-size:13px}.hero-meta{min-width:85px;padding-left:15px;font-size:10px}.hero-number{font-size:50px}.hero-meta>span:last-child,.small-rule{display:none}.section-title h2 span{display:none}.search-row{display:block}.search-label{display:block;margin-bottom:10px}.search-panel{padding:20px}.tag-filter legend span{display:block;margin:3px 0 0}.lesson-grid{grid-template-columns:1fr}.lesson-card{padding:24px}.card-illustration{height:125px}.lesson-heading h1{font-size:29px}.lesson-columns{grid-template-columns:1fr;padding-top:25px}.graph-panel{position:static;padding:22px}.lesson-prose{order:0}.graph-panel{order:1}.formula-card strong{font-size:24px}.admin-page{padding-top:32px}.admin-page h1{font-size:29px}.policy-bar{display:grid;gap:8px;padding:18px}.block-form{grid-template-columns:1fr}.block-card{padding:20px}.block-meta{line-height:1.9}.footer{padding:22px 20px;margin-top:40px;font-size:9px}.error-page{padding:70px 0}.error-page h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.curriculum-library{padding-top:34px}.curriculum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.curriculum-card{display:flex;flex-direction:column;min-width:0;padding:30px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);transition:transform .18s,border-color .18s,box-shadow .18s}.curriculum-card:hover{transform:translateY(-4px);border-color:#9fbfae;box-shadow:0 8px 25px #25433308}.curriculum-card:focus-visible{outline:3px solid #72a992;outline-offset:4px}.curriculum-number{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--green)}.curriculum-symbol{width:120px;height:70px;margin:24px 0 12px;padding:8px;background:var(--soft);border-radius:12px}.curriculum-symbol svg{width:100%;height:100%;fill:#e9f2e8;stroke:var(--green);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.curriculum-symbol circle{fill:var(--orange);stroke:none}.curriculum-symbol .symbol-axis{stroke:#a9bdaa;stroke-width:1}.curriculum-card h3{font-size:27px;margin:8px 0 12px;line-height:1.4;word-break:keep-all}.curriculum-card>p{font-size:14px;line-height:1.9;color:var(--muted);margin-bottom:18px;max-width:35em}.curriculum-card .tags{margin-bottom:25px}.curriculum-card .card-bottom{font-size:12px}.curriculum-label{font-size:10px;color:var(--muted);margin-bottom:8px}.library-back{margin:26px 0 0}.library-back+.hero{padding-top:30px}.curriculum-hero h1{font-size:42px;word-break:keep-all}.curriculum-hero .lede{max-width:38em}.search-help{font-size:12px;color:var(--muted);margin-top:-8px}
@media(max-width:720px){.curriculum-grid{grid-template-columns:1fr;gap:18px}.curriculum-card{padding:24px}.curriculum-card h3{font-size:25px}.curriculum-card .card-top{gap:14px;flex-wrap:wrap}.curriculum-card>p{font-size:13px}.curriculum-symbol{margin-top:20px}.curriculum-hero h1{font-size:29px}.curriculum-hero .hero-meta{min-width:65px}.curriculum-hero{gap:18px}.curriculum-hero>div:first-child{min-width:0}.library-back{margin-top:22px}}
.hero-meta{word-break:keep-all}

/* Navy / coral / cream: shared visual system, loaded after lesson styles. */
@font-face {
  font-family: "Dokhaknote Logo";
  src: url("/assets/dokhaknote-logo.a3b47e6704ce.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: block;
}
@font-face {
  font-family: "Black Han Sans";
  src: url("/assets/black-han-sans.d74df563d0af.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
:root {
  --navy: #172c50;
  --coral: #e66e59;
  --cream: #fff6e8;
  --lab: #e7edf4;
  --peach: #f9ddd3;
  --bg: #fff9f0;
  --paper: #fffdfa;
  --ink: var(--navy);
  --muted: #52617a;
  --line: #c7ced8;
  --soft: var(--lab);
  /* Existing plots use these semantic series tokens. */
  --green: var(--navy);
  --orange: var(--coral);
  --radius: 6px;
}
body { font-size: 16px; }
html { scrollbar-gutter: stable; }
html.page-pending body { visibility: hidden; }
button, input, select { font: inherit; }
input { accent-color: var(--coral); }
:focus-visible { outline: 3px solid #2768ad; outline-offset: 4px; }
h1, h2, h3 { word-break: keep-all; overflow-wrap: anywhere; }
h1 { font-weight: 900; letter-spacing: -.065em; line-height: 1.12; }
.hero h1, .lesson-heading h1, .login-story h1 {
  font-family: "Black Han Sans", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-synthesis: none;
  font-weight: 400;
}
h2, h3 { font-weight: 800; letter-spacing: -.04em; }
main { max-width: 1480px; padding: 0 40px; }
.header { max-width: 1480px; height: 94px; border-color: var(--navy); padding: 0 40px; }
.brand { gap: 0; font-family: "Dokhaknote Logo", sans-serif; font-size: 34px; font-weight: 800; font-synthesis: none; letter-spacing: -.045em; line-height: 1; }
.brand > span { color: var(--coral); }
.nav { font-size: 14px; gap: 24px; }
.nav a { font-weight: 700; }
.nav a:hover, .text-button:hover, .back-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.nav .username { font-size: 12px; }
.accent { color: #c54c3e; }
.eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .13em; margin-bottom: 16px; }
.lede { color: var(--muted); font-size: 17px; line-height: 1.85; }
.button { border-radius: 4px; padding: 11px 20px; font-weight: 800; }
.primary { background: var(--coral); color: var(--navy); }
.primary:hover { background: #f08a75; }
.secondary { border-color: var(--line); background: var(--paper); }
.secondary:hover { background: var(--lab); }
.footer { max-width: 1480px; padding: 24px 40px; margin-top: 64px; }

/* A typographic opening and broad, easily scanned curriculum bands. */
.hero { padding: 52px 0 32px; border: 0; align-items: center; }
.hero h1 { font-size: clamp(64px, 7.5vw, 108px); margin: 0 0 22px; }
.hero .accent { color: var(--coral); }
.hero .lede { max-width: 38em; }
.hero-meta { min-width: 180px; font-size: 13px; padding-left: 30px; }
.hero-number { font-family: inherit; font-size: 80px; font-weight: 900; line-height: 1.1; color: var(--navy); }
.curriculum-hero h1 { font-size: clamp(44px, 5.5vw, 76px); max-width: 16ch; }
.catalog-search-area { padding: 4px 0 12px; }
.search-panel { padding: 0; border: 0; border-radius: 0; background: transparent; margin-bottom: 18px; }
.search-row { display: block; }
.search-label { display: block; margin: 0 0 8px; font-size: 13px; }
.search-box { padding: 6px 6px 6px 18px; border-radius: 4px; background: var(--paper); }
.search-box input { font-size: 16px; padding: 10px 0; }
.search-box .button { padding: 10px 24px; }
.tag-filter { gap: 8px; padding-top: 8px; }
.tag-filter legend { font-size: 12px; padding: 10px 0; }
.tag-filter legend span { font-size: 12px; }
.filter-chip span { background: var(--lab); border: 1px solid transparent; color: var(--navy); padding: 5px 15px; font-size: 13px; }
.filter-chip input:checked + span { background: var(--coral); color: var(--navy); border-color: var(--navy); font-weight: 700; }
.filter-chip input:focus-visible + span { outline: 3px solid #2768ad; outline-offset: 3px; }
.reset-link { font-size: 13px; padding: 6px 0 6px 12px; }
.criteria { margin: 8px 0; font-size: 13px; }
.curriculum-library { padding-top: 16px; }
.section-title { margin: 0 0 18px; }
.section-title h2 { font-size: 24px; }
.curriculum-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.curriculum-card {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 160px 40px;
  gap: 26px; align-items: center; padding: 30px 36px;
  background: var(--coral); color: var(--navy); border: 0; border-radius: 0;
  transition: background-color .15s;
}
.curriculum-card:nth-child(even) { background: var(--navy); color: var(--cream); }
.curriculum-card:hover { transform: none; box-shadow: none; background: #f08a75; }
.curriculum-card:nth-child(even):hover { background: #25446d; }
.curriculum-card:focus-visible { outline: 3px solid #2768ad; outline-offset: 5px; position: relative; z-index: 1; }
.curriculum-number { color: inherit; font-size: 100px; font-weight: 900; line-height: 1; letter-spacing: -.07em; }
.curriculum-info { min-width: 0; }
.curriculum-card h3 { font-size: 32px; margin: 0 0 8px; }
.curriculum-info p { margin: 0 0 12px; font-size: 15px; max-width: 50em; line-height: 1.7; }
.curriculum-card .duration { color: inherit; font-size: 13px; }
.curriculum-card .tags { margin: 0 0 10px; }
.curriculum-card .tag { background: #fff6e859; color: var(--navy); }
.curriculum-card:nth-child(even) .tag { background: #ffffff1f; color: var(--cream); }
.curriculum-symbol { width: 150px; height: 95px; margin: 0; padding: 10px 0 10px 25px; background: transparent; border-left: 1px solid currentColor; border-radius: 0; }
.curriculum-symbol svg { color: inherit; fill: none; stroke: currentColor; }
.curriculum-symbol circle { fill: currentColor; }
.curriculum-symbol .symbol-axis { stroke: currentColor; opacity: .4; }
.course-arrow { font-size: 40px; line-height: 1; }
.library { padding-top: 36px; }
.lesson-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--navy); }
.lesson-card { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 24px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; transition: background-color .15s; }
.lesson-card:hover, .lesson-card:focus-visible { transform: none; box-shadow: none; background: var(--peach); }
.card-number { font-family: inherit; font-size: 23px; color: var(--navy); font-weight: 800; }
.lesson-card-copy { min-width: 0; }
.lesson-card h3 { font-size: 22px; margin: 0 0 6px; }
.lesson-card p { font-size: 14px; margin: 0 0 10px; color: var(--muted); }
.lesson-card-end { display: flex; align-items: center; gap: 25px; }
.card-arrow { background: transparent; color: var(--navy); font-size: 28px; }
.tag { background: var(--lab); color: var(--navy); border-radius: 20px; font-size: 11px; padding: 3px 10px; }
.duration, .curriculum-label, .count { font-size: 12px; }
.empty { background: transparent; border: 0; padding: 48px 16px; }
.search-help { font-size: 14px; margin: 0; }

/* A persistent course outline with a separate, comfortable reading canvas. */
.regression-lesson, .classification-lesson { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 38px; align-items: start; padding-top: 32px; }
.course-sidebar { background: var(--navy); color: var(--cream); position: sticky; top: 20px; align-self: start; max-height: calc(100dvh - 40px); overflow-y: auto; scrollbar-color: #95a7bd var(--navy); }
.course-menu > summary { padding: 24px 22px 12px; color: var(--cream); font-size: 26px; font-weight: 900; list-style: none; }
.course-menu > summary::-webkit-details-marker { display: none; }
.menu-hint { display: block; font-size: 11px; color: #c4d0e1; font-weight: 400; letter-spacing: 0; margin-top: 5px; }
.sidebar-course { display: block; font-size: 18px; font-weight: 800; padding: 10px 22px 0; line-height: 1.5; }
.sidebar-course:hover, .sidebar-back:hover { text-decoration: underline; text-underline-offset: 4px; }
.sidebar-count { padding: 0 22px; margin: 6px 0 22px; color: #c4d0e1; font-size: 12px; }
.course-menu nav a { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 9px; padding: 13px 18px; font-size: 13px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; border-left: 4px solid transparent; }
.course-menu nav a:hover { background: #ffffff14; }
.course-menu nav a[aria-current=page] { background: var(--coral); color: var(--navy); border-left-color: var(--cream); font-weight: 800; }
.sidebar-number { font-variant-numeric: tabular-nums; }
.sidebar-back { display: block; margin: 20px 22px 24px; padding-top: 20px; border-top: 1px solid #ffffff38; color: #d8e1ed; font-size: 12px; }
.lesson-content { min-width: 0; }
.back-link { font-size: 13px; }
.lesson-heading { padding: 24px 0 30px; }
.lesson-heading h1 { font-size: clamp(40px, 4.6vw, 68px); font-weight: 400; max-width: 22ch; margin: 22px 0; line-height: 1.2; letter-spacing: -.055em; }
.lesson-heading .lede { font-size: 17px; max-width: 52em; }
.lesson-heading .tags { gap: 8px; }
.lesson-heading .duration { margin-left: 8px; }
.regression-lesson .learning-goal { background: var(--peach); border-radius: 4px; line-height: 1.8; }
.regression-intro { gap: 28px; padding-top: 18px; }
.regression-prose p, .lesson-prose p { color: var(--muted); font-size: 16px; line-height: 1.95; }
.regression-prose h2, .lesson-prose h2 { font-size: 24px; }
.delivery-figure { flex-basis: 36%; }
figure img { display: block; height: auto; border-radius: 4px; }
figcaption { font-size: 12px; }
.worked-example { background: var(--peach); border-radius: 4px; }
.classification-layout { grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 26px; padding-top: 26px; }
.classification-layout.prose-only { max-width: 860px; margin: 0; }
.classification-lab, .regression-lab, .graph-panel { background: var(--lab); border: 0; border-radius: 8px; padding: 26px; }
.classification-lab { position: sticky; top: 20px; }
.regression-lab .graph-heading h2, .classification-lab h2, .graph-panel h2 { font-size: 27px; }
.lab-description, .lab-observation { color: var(--muted); font-size: 14px; }
.regression-lab svg, .classification-plot, .graph-surface { background: var(--paper); border-radius: 4px; }
.regression-lab .plot-frame, .classification-plot .plot-frame, .axis { stroke: #8291a7; }
.grid-line { stroke: var(--line); }
.tick { fill: var(--muted); }
.regression-lab .current-prediction, .result-row { background: var(--peach); border-radius: 4px; }
.current-prediction strong { font-size: 30px; }
.lab-control, .regression-controls > label, .prediction-inputs > label, .space-controls > label { padding: 12px 14px; background: var(--paper); border-radius: 4px; }
.lab-controls button[aria-pressed=true], .feature-buttons button[aria-pressed=true] { background: var(--coral); color: var(--navy); border-color: var(--navy); }
.classification-tree .tree-box { fill: var(--paper); stroke: var(--line); }
.classification-tree .normal-leaf { fill: var(--lab); }
.classification-tree .spam-leaf, .matrix-cell.error-cell, .score-mail.predicted-positive { background: var(--peach); fill: var(--peach); }
.classification-tree .tree-link { stroke: #8291a7; }
.tree-action { font-size: 13px; min-height: 32px; }
.matrix-cell, .score-mail, .workflow-stage, .workflow-data span, .learning-flow > div { border-radius: 4px; }
.matrix-cell { background: var(--paper); }
.matrix-cell[aria-pressed=true] { outline-color: var(--navy); }
.workflow-data span.active { background: var(--navy); color: var(--cream); }
.challenge { background: var(--peach); border-color: var(--coral); border-radius: 0; padding: 24px; }
.challenge .eyebrow { color: var(--navy); }
.challenge p, .challenge details { font-size: 15px; }
.lesson-pagination a { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.lesson-pagination a:last-child { background: var(--coral); border-color: transparent; }
.lesson-pagination span { color: var(--navy); font-weight: 800; }

/* The same palette on entry, administration, and error pages. */
.login-layout { gap: 64px; padding: 60px 0; }
.login-story h1 { font-size: clamp(48px, 5.7vw, 80px); font-weight: 400; }
.login-card { background: var(--lab); border-radius: 6px; border: 0; box-shadow: none; padding: 40px; }
.login-card h2 { font-size: 30px; }
.pill { background: var(--navy); color: var(--cream); }
.stack input, .block-form input:not([type=checkbox]) { background: var(--paper); border-radius: 4px; }
input::placeholder { color: #69778b; }
.story-note { font-size: 12px; flex-wrap: wrap; }
.story-note span { color: #a43b31; }
.block-card, .policy-bar, .formula-card { border-radius: 4px; }
.admin-page h1, .error-page h1 { font-size: clamp(36px, 4vw, 58px); font-weight: 900; }

@media (max-width: 1280px) {
  .regression-lesson, .classification-lesson { grid-template-columns: 228px minmax(0, 1fr); gap: 26px; }
  .classification-layout { grid-template-columns: 1fr; }
  .classification-lab { position: static; }
}
@media (max-width: 1000px) {
  main, .header { padding-left: 24px; padding-right: 24px; }
  .regression-lesson, .classification-lesson { grid-template-columns: 206px minmax(0, 1fr); gap: 24px; }
  .course-menu nav a { font-size: 12px; padding: 12px; }
  .curriculum-card { grid-template-columns: 105px minmax(0, 1fr) 100px 30px; gap: 20px; padding: 26px; }
  .curriculum-number { font-size: 80px; }
  .curriculum-symbol { width: 100px; padding-left: 16px; }
  .regression-intro { flex-direction: column; align-items: stretch; }
  .delivery-figure { max-width: 480px; margin: auto; }
  .lesson-heading h1 { font-size: 44px; }
  .space-plots { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  main { padding: 0 18px; }
  .header { height: auto; min-height: 90px; padding: 20px 18px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .brand { font-size: 30px; }
  .nav { width: 100%; gap: 12px; font-size: 12px; flex-wrap: wrap; }
  .nav .username { margin-left: auto; padding-left: 12px; }
  .hero { padding: 36px 0 20px; gap: 12px; }
  .hero h1 { font-size: clamp(52px, 11vw, 76px); }
  .hero .lede { font-size: 14px; }
  .hero-meta { display: none; }
  .curriculum-hero h1 { font-size: 42px; }
  .section-title h2 { font-size: 21px; }
  .search-box input { font-size: 14px; }
  .search-box .button { padding: 10px 16px; }
  .tag-filter legend span { display: block; margin-left: 0; }
  .curriculum-card { grid-template-columns: 68px minmax(0, 1fr) 24px; gap: 14px; padding: 24px 18px; }
  .curriculum-number { font-size: 62px; }
  .curriculum-card h3 { font-size: 25px; }
  .curriculum-info p { font-size: 13px; }
  .curriculum-symbol { display: none; }
  .course-arrow { font-size: 28px; }
  .curriculum-card .tag { font-size: 10px; }
  .lesson-card { grid-template-columns: 28px minmax(0, 1fr); padding: 20px 10px; gap: 10px 14px; }
  .lesson-card h3 { font-size: 20px; }
  .lesson-card-end { grid-column: 2; justify-content: space-between; }
  .lesson-card p { font-size: 13px; }
  .regression-lesson, .classification-lesson { display: block; padding-top: 20px; }
  .course-sidebar { position: static; max-height: none; margin-bottom: 24px; }
  .course-menu > summary { font-size: 20px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; }
  .menu-hint { display: inline; margin: 0; }
  .course-menu-body { max-height: 340px; overflow-y: auto; }
  .course-menu nav a { font-size: 14px; padding: 12px 18px; }
  .lesson-heading { padding: 24px 0; }
  .lesson-heading h1 { font-size: clamp(36px, 8vw, 52px); }
  .lesson-heading .lede { font-size: 16px; }
  .regression-prose h2, .lesson-prose h2 { font-size: 22px; }
  .regression-lab, .classification-lab, .graph-panel { padding: 20px 14px; }
  .graph-heading { flex-wrap: wrap; }
  .regression-lab .graph-heading h2, .classification-lab h2 { font-size: 24px; }
  .regression-controls label, .prediction-inputs label, .space-controls label { flex-basis: 100%; max-width: none; }
  .current-prediction { flex-wrap: wrap; }
  .current-prediction strong { font-size: 26px; white-space: normal; }
  .classification-layout { padding-top: 12px; }
  .lesson-columns { grid-template-columns: 1fr; }
  .login-layout { grid-template-columns: 1fr; gap: 28px; padding: 35px 0; }
  .login-story h1 { font-size: 50px; }
  .login-art, .story-note { display: none; }
  .login-card { padding: 28px 24px; }
  .footer { padding: 24px 18px; }
}