@font-face{font-family:Assistant;src:url('/static/fonts/Assistant[wght].ttf') format('truetype');font-weight:200 800;font-display:swap}
:root{--ground:#FAF6F0;--surface:#FFFFFF;--surface-2:#F2ECE3;--surface-3:#FBF8F3;--ink:#1F1A16;--ink-2:#544B44;--ink-3:#6A6058;--line:#E6DDD1;--line-2:#8C7F72;--accent-soft:#FFF1C7;--mark:#FFD15C;--mark-ink:#1F1A16;--risk:#A8231A;--risk-soft:#FBE4E0;--risk-line:#B5473D;--r:12px;--r-pill:999px;--ease:cubic-bezier(.2,.7,0,1);--f-body:Assistant,system-ui,'Segoe UI',sans-serif;--f-code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color-scheme:light}
:root[data-theme=dark]{--ground:#15110E;--surface:#1E1915;--surface-2:#28211B;--surface-3:#221C17;--ink:#F4EDE4;--ink-2:#CFC5B9;--ink-3:#B3A89B;--line:#342B24;--line-2:#8A7C6E;--accent-soft:#3A2D10;--mark:#FFC94D;--mark-ink:#1F1A16;--risk:#FF8C7C;--risk-soft:#2E1512;--risk-line:#C25E54;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ground:#15110E;--surface:#1E1915;--surface-2:#28211B;--surface-3:#221C17;--ink:#F4EDE4;--ink-2:#CFC5B9;--ink-3:#B3A89B;--line:#342B24;--line-2:#8A7C6E;--accent-soft:#3A2D10;--mark:#FFC94D;--mark-ink:#1F1A16;--risk:#FF8C7C;--risk-soft:#2E1512;--risk-line:#C25E54;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;font:400 18px/1.75 var(--f-body);-webkit-font-smoothing:antialiased;background:var(--ground);color:var(--ink);text-align:start}
h1,h2,h3{font-family:var(--f-body);line-height:1.25;margin:0 0 16px;font-weight:700;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:34px;font-weight:300;letter-spacing:-.025em}
h2{font-size:26px;font-weight:600;margin-top:40px}
h3{font-size:21px}
p{margin:0 0 16px}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--mark);color:var(--mark-ink)}
bdi{unicode-bidi:isolate}
bdi[dir=ltr]{direction:ltr}
.skip{position:fixed;top:-100px;right:16px;z-index:100;background:var(--surface);padding:12px;border-radius:8px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
:root[data-theme=dark] :focus-visible{outline-color:var(--mark)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) :focus-visible{outline-color:var(--mark)}}
.site-head{max-width:820px;margin:auto;padding:20px 24px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}
.wordmark{font-weight:760;font-size:22px;text-decoration:none;letter-spacing:-.02em}
.wordmark span{background:var(--mark);color:var(--mark-ink);padding:0 3px;border-radius:3px}
.site-note{color:var(--ink-3);font-size:15px;margin-inline-end:auto}
.shell{max-width:820px;margin:auto;padding:24px 24px 72px}
.site-foot{max-width:820px;margin:auto;padding:24px;border-top:1px solid var(--line);color:var(--ink-3);font-size:15px}
.site-foot p{margin:0}
.crumbs{max-width:820px;margin:auto;padding:16px 24px 0;font-size:15px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.crumbs li+li::before{content:"\2039";margin-inline-end:8px;color:var(--ink-3)}
.crumbs a,.crumbs span{display:inline-flex;align-items:center;min-height:44px}
.posline{color:var(--ink-3);font-size:15px;margin:0 0 8px}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border:1px solid var(--ink);border-radius:var(--r-pill);background:var(--ink);color:var(--ground);padding:8px 24px;cursor:pointer;text-decoration:none;font:inherit;font-weight:650;line-height:1.4;position:relative;overflow:hidden;isolation:isolate;transition:color .3s}
button::before,.button::before{content:'';position:absolute;inset:0;background:var(--mark);z-index:-1;clip-path:inset(0 0 0 100%);transition:clip-path .45s var(--ease)}
button:hover,.button:hover{color:var(--mark-ink)}
button:hover::before,.button:hover::before{clip-path:inset(0)}
button:active{transform:translateY(1px)}
button:disabled{cursor:default;opacity:.6}
button:disabled:hover{color:var(--ground)}
button:disabled:hover::before{clip-path:inset(0 0 0 100%)}
.secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}
.secondary:disabled:hover{color:var(--ink)}
.secondary:hover{border-color:var(--ink)}
.theme-toggle{padding:6px 16px;font-size:15px}
input,textarea{font:inherit;max-width:100%;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:10px}
input[type=radio],input[type=checkbox]{accent-color:var(--ink);width:24px;height:24px;min-height:24px;flex-shrink:0;margin:2px 0 0}
:root[data-theme=dark] input[type=radio],:root[data-theme=dark] input[type=checkbox]{accent-color:var(--mark)}
textarea{width:100%;min-height:128px;padding:12px 14px;line-height:1.6}
textarea:focus{border-color:var(--ink)}
details{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:0 18px;margin:16px 0}
details[open]{padding-bottom:4px}
summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:700}
details>p:first-of-type{margin-top:4px}
pre{direction:ltr;text-align:left;font:15px/1.65 var(--f-code);white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0;padding:16px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);max-width:100%;overflow:auto}
pre code{font:inherit}
pre.artifact-prose{direction:rtl;text-align:right;font-family:var(--f-body);font-size:17px}
.tags,.foundation{color:var(--ink-3);font-size:16px}
.glossary{background:var(--surface-2);padding:16px 18px;border-radius:var(--r);font-size:16px}
.recap,.prediction{background:var(--accent-soft);border-inline-start:4px solid var(--mark);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:24px 0}
.recap>:last-child,.prediction>:last-child{margin-bottom:0}
.recap h2,.prediction h2{margin-top:0;font-size:22px}
.goal{font-weight:650;font-size:19px;border-inline-start:3px solid var(--mark);padding-inline-start:16px}
.lesson>h1{margin-top:8px}
.core h2{margin-top:36px}
.platform,.mark{font-size:14px;font-weight:650;margin:0 0 8px}
.mark{display:inline-block;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:1px 10px;background:var(--surface)}
.codecard{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:16px 18px;margin:20px 0}
.codecard pre{margin:8px 0}
.codecard.danger{border:2px solid var(--risk-line);background:var(--risk-soft)}
.codecard.danger strong{color:var(--risk)}
.output{border-inline-start:3px solid var(--line-2);padding:4px 16px;margin:20px 0}
.command-links{font-size:16px}
section.aid,section.quiz{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:32px 0;box-shadow:0 1px 0 rgb(31 26 22 / .04),0 12px 32px -12px rgb(82 52 20 / .18)}
:root[data-theme=dark] section.aid,:root[data-theme=dark] section.quiz{box-shadow:0 0 0 1px rgb(255 220 160 / .05),0 20px 48px -20px rgb(0 0 0 / .7)}
section.aid h2,section.quiz h2{margin-top:0;font-size:23px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 16px 16px;margin:16px 0;min-width:0;background:var(--surface-3)}
legend{font-weight:650;padding:0 8px}
fieldset>label,.aid-selfcheck label{display:block;padding:12px 14px;margin:8px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
fieldset>label>input[type],.aid-selfcheck label>input{margin:0;margin-inline-end:12px;vertical-align:-6px}
fieldset>label:hover,.aid-selfcheck label:hover{border-color:var(--ink)}
fieldset>label:has(input:checked){border-color:var(--mark);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--mark)}
.feedback{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--mark);border-radius:var(--r);padding:12px 16px;margin-top:14px}
.feedback p:last-child{margin:0}
.progress,.aid-status,.quiz-status{color:var(--ink-2);font-size:16px;margin:8px 0}
.aid-status,.quiz-status{font-weight:650;min-height:1.5em}
.interactive-controls{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.aid-lock{color:var(--ink-2);font-size:16px}
.aid-write{margin-top:20px;padding-top:8px;border-top:1px solid var(--line)}
.write-label{display:block;font-weight:650;margin-bottom:10px}
.aid-hint{color:var(--ink-2);font-size:16px;margin:8px 0 12px}
.aid-selfcheck{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.aid-selfcheck h3{margin-top:12px}
.aid-model{background:var(--surface-2);border-radius:var(--r);padding:12px 16px}
.summary{border-top:3px solid var(--mark);padding-top:16px;margin:36px 0 24px}
.summary h2{margin-top:0}
.summary li{margin:8px 0}
.next{font-weight:650}
.back{display:inline-flex;align-items:center;min-height:44px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0 0}
.pager-link{display:block;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;text-decoration:none;background:var(--surface);min-height:44px}
.pager-link:hover{border-color:var(--ink)}
.pager-label{display:block;color:var(--ink-3);font-size:15px}
.pager-title{display:block;font-weight:650;line-height:1.4}
.pager>:last-child{text-align:end}
.notice{padding:14px 16px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--mark);margin:0 0 16px}
.lead{color:var(--ink-2);font-size:20px}
.course-block{margin:36px 0;padding-top:8px;border-top:1px solid var(--line)}
.toc{list-style:none;counter-reset:l;padding:0;margin:16px 0}
.toc li{counter-increment:l;margin:0}
.toc a{display:block;align-content:center;min-height:44px;padding:8px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.toc a::before{content:counter(l);display:inline-block;min-width:28px;margin-inline-end:12px;color:var(--ink-3);font-size:16px}
.toc a:hover{text-decoration:underline}
.module-head h1{margin-top:8px}
[hidden]{display:none!important}
@media (max-width:767px){body{font-size:18px}h1{font-size:28px}h2{font-size:23px}.shell{padding:16px 16px 56px}.site-head,.crumbs,.site-foot{padding-inline:16px}section.aid,section.quiz{padding:16px}.pager{grid-template-columns:1fr}.pager>:last-child{text-align:start}pre{font-size:14px;padding:12px}.interactive-controls button{flex:1 1 100%}}
@media (prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.glossary .glossary-label{margin:0 0 10px;font-weight:600}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:16px;line-height:1.5}
.chips .gloss{color:var(--ink-2)}

.chips.sentences{flex-direction:column}
.chips.sentences li{border-radius:var(--r);width:fit-content;max-width:100%}

/* lesson opening: message card, recall card, opening question */
.lesson-open{margin:20px 0 28px;display:grid;gap:16px}
.card-label{margin:0 0 8px;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--ink-3)}
.msg-card{background:var(--surface-2);border-inline-start:4px solid var(--mark);border-radius:0 var(--r) var(--r) 0;padding:16px 20px}
.msg-card .goal{margin:0;border:0;padding:0}
.recall-card{background:var(--accent-soft);border-radius:var(--r);padding:16px 20px}
.recall-card ul{margin:0;padding-inline-start:22px}
.recall-card li{margin:4px 0}
.open-q{border-top:1px solid var(--line,var(--ink-3));padding-top:16px}
.open-q h2,.open-q h3{margin:0 0 8px;font-size:20px}
.open-q>p{margin:0 0 12px}
.open-q .prediction{margin:0}
.open-q .prediction h4{margin:0 0 8px;font-size:16px;color:var(--ink-3)}
.lesson .tags{display:inline-block;background:var(--accent-soft);border-radius:999px;padding:4px 14px;margin:0 0 12px}
.lesson .glossary{margin-bottom:8px}
.recall-card details{margin:8px 0 0}
.open-q .prediction+.prediction{margin-top:12px}