: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:#1F1A16;--accent-2:#544B44;--accent-soft:#FFF1C7;--mark:#FFD15C;--mark-ink:#1F1A16;--ok:#1F6B45;--ok-soft:#E2F1E7;--ok-line:#3E7D5A;--warn:#7A4E00;--warn-soft:#FBF0D6;--warn-line:#9C6A12;--risk:#A8231A;--risk-soft:#FBE4E0;--risk-line:#B5473D;--on-accent:#FFD15C;--r:12px;--r-pill:999px;--shell:1360px;--card-shadow:0 1px 0 rgb(31 26 22 / .04),0 12px 32px -12px rgb(82 52 20 / .18);--lamp:transparent;--ease:cubic-bezier(.2,.7,0,1);--f-body:Assistant,system-ui,'Segoe UI',sans-serif;--f-disp:Assistant,system-ui,'Segoe UI',sans-serif;--f-mono:'IBM Plex Mono',ui-monospace,Menlo,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:#FFC94D;--accent-2:#CFC5B9;--accent-soft:#3A2D10;--mark:#FFC94D;--mark-ink:#1F1A16;--ok:#7BD6A1;--ok-soft:#12261A;--ok-line:#3F8A60;--warn:#F0C060;--warn-soft:#2A2010;--warn-line:#A07A2A;--risk:#FF8C7C;--risk-soft:#2E1512;--risk-line:#C25E54;--on-accent:#1F1A16;--card-shadow:0 0 0 1px rgb(255 220 160 / .05),0 20px 48px -20px rgb(0 0 0 / .7);--lamp:radial-gradient(60% 70% at 30% 0%,rgb(255 190 90 / .16),transparent 70%);color-scheme:dark}
*{box-sizing:border-box}body{margin:0;font:400 18px/1.7 var(--f-body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;background:var(--ground);color:var(--ink);text-align:start}h1,h2,h3,h4{font-family:var(--f-disp);line-height:1.2;margin:0 0 16px;font-weight:700;letter-spacing:-.015em;text-wrap:balance}h1{font-size:40px;font-weight:300;letter-spacing:-.025em}h1 b,h2 b{font-weight:760}h2{font-size:30px;font-weight:600}h3{font-size:24px}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)}html{scroll-padding-top:88px}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;border:1px solid transparent;border-radius:var(--r-pill);background:var(--ink);color:var(--ground);border-color:var(--ink);padding:8px 24px;cursor:pointer;text-decoration:none;font-weight:650;line-height:1.4;position:relative;overflow:hidden;isolation:isolate;transition:color .3s!important}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)!important}button:hover,.button:hover{color:var(--mark-ink);text-decoration:none}button:hover::before,.button:hover::before{clip-path:inset(0)}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.6}.secondary{background:transparent;color:var(--ink);border-color:var(--line-2)}.secondary:hover{border-color:var(--ink)}:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}:root[data-theme=dark] :focus-visible{outline-color:var(--mark)}input,select,textarea{max-width:100%;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:10px;min-height:44px;padding:8px 14px}input:focus,select:focus,textarea:focus{border-color:var(--ink)}input[type=checkbox],input[type=radio]{accent-color:var(--ink);min-height:24px;width:24px;flex-shrink:0}textarea{width:100%;min-height:112px}label{display:block}summary{min-height:44px;padding:8px 0;cursor:pointer;font-weight:700}details>summary{list-style-position:inside}small,.muted{color:var(--ink-2)}code,pre{direction:ltr;text-align:left;font-family:var(--f-mono);overflow:auto;max-width:100%}.skip{position:fixed;top:-100px;right:16px;z-index:100;background:var(--surface);padding:12px}.skip:focus{top:8px}
.app-header{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--ground) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.header-inner{max-width:var(--shell);margin:auto;display:flex;align-items:center;gap:28px;min-height:68px;padding:0 32px}.wordmark{display:flex;align-items:center;gap:0;font:800 22px/1.2 var(--f-body);letter-spacing:-.02em;direction:ltr;text-decoration:none;color:var(--ink);white-space:nowrap}.wordmark:hover{color:var(--ink)}.wordmark .wordmark-dot{order:-1;display:inline-block;width:22px;height:14px;border-radius:3px 8px 4px 7px;background:var(--mark);transform:rotate(-4deg);margin:0 0 0 10px}.wordmark span{color:inherit}.header-inner nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}.header-inner nav>a{min-height:44px;display:flex;align-items:center;font-size:16px;font-weight:500;color:var(--ink-2);text-decoration:none;padding:0 12px;border-radius:var(--r-pill)}.header-inner nav>a:hover{color:var(--ink);background:var(--surface-2)}.header-inner nav>a[aria-current]{color:var(--ink);background:var(--accent-soft)}.header-inner nav form{margin:0}.header-inner nav>.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:10px}.text-button{background:none;border:0;color:var(--ink-2);min-height:44px;padding:0 12px;font-weight:500;border-radius:var(--r-pill)}.text-button::before{display:none}.text-button:hover{background:var(--surface-2);color:var(--ink)}.menu-toggle{display:none}.prototype-note{text-align:center;color:var(--ink-2);font-size:14px;padding:8px 16px;border-bottom:1px solid var(--line)}.page{max-width:var(--shell);margin:0 auto;padding:56px 32px 96px}.app-footer{max-width:var(--shell);margin:0 auto;padding:40px 32px 64px;color:var(--ink-2);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;font-size:15px}.app-footer a{color:var(--ink-2);text-decoration:none}.app-footer a:hover{color:var(--ink);text-decoration:underline}.eyebrow{font-size:14px;color:var(--ink-2);font-weight:650;margin-bottom:12px}.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:32px 0 64px}.hero h1{font-size:52px}.hero p{max-width:40ch;font-size:21px}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:24px;box-shadow:var(--card-shadow)}.card.accent{border-inline-start:4px solid var(--mark)}.card p:last-child{margin-bottom:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.section{margin-bottom:48px}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:24px}.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}.lesson-state-row{margin:2px 0 6px}
.badge{display:inline-flex;border:1px solid transparent;border-radius:999px;font-size:13px;font-weight:650;padding:3px 10px;align-items:center;background:var(--surface-2);color:var(--ink-2)}.badge.good{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-line)}.badge.good::before{content:"\2713"; margin-inline-end:4px}.badge.current{background:var(--accent-soft);color:var(--ink);border-color:var(--mark)}.badge.risk{background:var(--risk-soft);color:var(--risk);border-color:var(--risk-line)}.step-row{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}.step-row:last-child{border-bottom:0}.step-number{font:400 16px var(--f-mono);color:var(--ink-2);min-width:32px}.step-content{flex:1;min-width:0}.step-content a{display:inline-flex;align-items:center;min-height:44px}.progress-track{height:8px;background:var(--surface-2);border-radius:5px;overflow:hidden;margin:16px 0}.progress-track>span{height:100%;display:block;background:var(--ink)}:root[data-theme=dark] .progress-track>span{background:var(--mark)}.screen-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px}.screen-tabs a{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--surface)}.screen-tabs a[aria-current=page]{background:var(--ink);color:var(--ground)}.form-card{max-width:520px;margin:24px auto 64px}.form-card label{margin:16px 0 8px}.form-card input:not([type=checkbox]){width:100%}.error{color:var(--risk)}.notice{padding:16px;border-radius:var(--r);background:var(--accent-soft);color:var(--ink);margin:16px 0;border:1px solid var(--mark)}.notice.error{background:var(--risk-soft);color:var(--risk)}.wide-scroll,.tablewrap{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r)}table{border-collapse:collapse;width:100%;font-size:16px}th,td{padding:12px;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--surface-2)}.empty{text-align:center;padding:64px 24px}.state-samples{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.swatch{height:64px;border-radius:8px;border:1px solid var(--line);margin-bottom:8px}.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.flow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.flow .card{padding:12px 20px}.wireframe-note{font-size:15px;color:var(--ink-2);margin-bottom:24px}
.lesson-layout{display:grid;grid-template-columns:240px minmax(0,760px);gap:48px;max-width:1200px;padding:40px 24px 80px;margin:auto;justify-content:center}.toc{align-self:start;position:sticky;top:24px;font-size:16px}.toc details{background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:var(--r)}.toc nav{display:flex;flex-direction:column;gap:4px}.toc a{display:flex;align-items:center;min-height:44px;padding:6px 8px;border-radius:6px;text-decoration:none;color:var(--ink-2)}.toc a[aria-current=true]{background:var(--accent-soft);color:var(--ink);font-weight:700}#lesson{min-width:0;max-width:760px}.lesson-intro{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}.lesson-intro h1{margin:12px 0 16px}.lesson-meta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.save-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:15px;margin-top:16px}.lesson-block{margin-bottom:40px;scroll-margin-top:24px;min-width:0}.lesson-block>*{max-width:100%}.lesson-block .col{max-width:100%}.lesson-block .body{font-size:18px;line-height:1.75}.lesson-block .panel h4{margin:0}.lesson-block .panel button{min-height:44px;min-width:44px}.lesson-block .chk.ran .go{display:inline-flex;visibility:visible;pointer-events:auto}.lesson-block .chk.ran .go{background:var(--surface-2);color:var(--ink-2)}.lesson-block .quiz fieldset{min-width:0;margin:0 0 24px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}.lesson-block legend{font-weight:700;padding:0 8px;line-height:1.6}.quiz-option{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:8px;margin:8px 0;cursor:pointer;min-height:44px}.quiz-option:has(input:checked){background:var(--accent-soft);border-color:var(--ink)}.quiz-feedback{padding:16px;background:var(--surface-2);border-radius:8px;margin-top:16px}.quiz-feedback.correct{background:var(--ok-soft)}.quiz-feedback.incorrect{background:var(--warn-soft)}.completion{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin:32px 0}.completion label{display:flex;align-items:center;gap:12px;margin-bottom:16px}.lesson-navigation{display:flex;justify-content:space-between;gap:24px;margin-top:32px}.manual-copy{margin-top:12px}.copybox{unicode-bidi:plaintext}.lesson-block .cursor{animation:none}.lesson-block .w.new{animation:none}.lesson-block .go,.lesson-block .copy{font-size:16px}.inline-message{min-height:1.5em}dialog{border:1px solid var(--line);border-radius:var(--r);max-width:520px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);padding:24px}dialog::backdrop{background:rgb(0 0 0 / .4)}.review-link{display:block;padding:12px 0}
@media(max-width:1023px){.lesson-layout{grid-template-columns:minmax(0,760px);gap:24px}.toc{position:static}.hero{gap:24px}.hero h1{font-size:42px}}
@media(max-width:767px){.wordmark{font-size:21px}.page{padding:32px 16px 64px}.header-inner{padding:0 16px;gap:12px}.menu-toggle{display:inline-flex;margin-inline-start:auto;padding:0 16px;min-height:44px}.header-inner nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--surface);border-bottom:1px solid var(--line);padding:12px 16px;flex-direction:column;align-items:stretch;gap:4px;box-shadow:var(--card-shadow)}.header-inner nav.open{display:flex}.header-inner nav>a,.header-inner nav .text-button{min-height:48px;padding:0 12px}.header-inner nav>.nav-end{margin:0;justify-content:space-between;padding-top:8px}.hero{grid-template-columns:1fr;padding:8px 0 40px;gap:24px}.hero h1{font-size:36px}.hero p{font-size:18px}.grid,.grid.two{grid-template-columns:1fr;gap:16px}.card{padding:20px}.lesson-layout{padding:24px 16px 64px}.lesson-intro h1,h1{font-size:28px}h2{font-size:25px}.section-heading{align-items:start;flex-direction:column;gap:8px}.lesson-block .panel-body{padding:16px}.lesson-block .wayfind{grid-template-columns:1fr}.lesson-block .chk{grid-template-columns:24px 1fr;gap:8px}.lesson-block .chk .go,.lesson-block .chk .verdict{grid-column:2}.lesson-block .risk-grid{grid-template-columns:1fr}.lesson-navigation{flex-direction:column}.swatches{grid-template-columns:repeat(2,1fr)}.step-row{flex-wrap:wrap}.app-footer{padding:24px 16px}.lesson-block .panel-head{gap:8px;flex-wrap:wrap}}
*{transition-duration:150ms;animation-duration:150ms;animation-iteration-count:1}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
body{position:relative}body::before{content:'';position:absolute;inset:0 0 auto;height:860px;background:var(--lamp);pointer-events:none;z-index:-1}
*,*::before,*::after{transition:none!important}
.lesson-block .chk .go{background:var(--ink);color:var(--ground)}
.lesson-block .riskcard{color:var(--ink)}
@media(max-width:767px){.wide-scroll table,.wide-scroll tbody,.wide-scroll tr,.wide-scroll td{display:block;width:100%}.wide-scroll thead{display:none}.wide-scroll tr{padding:16px;border-bottom:1px solid var(--line)}.wide-scroll td{border:0;padding:8px 0}.wide-scroll code{overflow-wrap:anywhere}.wide-scroll .actions{gap:8px}}
.lesson-block .switch{position:relative;min-height:44px}
.lesson-block .switch input{position:absolute;inset-inline-start:0;width:44px;height:44px;min-height:44px;opacity:0}

.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0}
.theme-toggle svg{width:18px;height:18px}
:root[data-theme=light] .theme-toggle .icon-sun{display:none}
:root[data-theme=dark] .theme-toggle .icon-moon{display:none}


/* ===== shared components (every page uses these; page css holds layout only) ===== */
.chip{display:inline-flex;align-items:center;font-size:13px;font-weight:650;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);line-height:1.4}
.chip.mark{background:var(--accent-soft);color:var(--ink);border:1px solid var(--mark)}
.section-head{display:grid;grid-template-columns:minmax(160px,.5fr) minmax(320px,1.3fr) minmax(260px,1fr);gap:32px;align-items:start;margin-bottom:44px}
.section-head .eyebrow{margin-top:12px}
.section-head h2,.display{font-size:clamp(30px,3.4vw,52px);line-height:1.06;font-weight:300;letter-spacing:-.022em;margin:0}
.section-head h2 b,.display b{font-weight:760}
.section-head>p:last-child{color:var(--ink-2);margin:6px 0 0;max-width:40ch}
.cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border-block:1px solid var(--line-2)}
.cols>*{padding:24px 24px 28px;border-inline-start:1px solid var(--line);min-width:0}
.cols>*:first-child{border-inline-start:0}
.cols-4{--n:4}
.band{background:var(--mark);color:var(--mark-ink);border-radius:20px;padding:48px}
:root[data-theme=dark] .band{background:var(--surface);color:var(--ink);border:1px solid var(--mark)}
.band a:not(.button),.band .eyebrow{color:inherit}
.band .secondary{border-color:currentColor;color:inherit}.band .secondary:hover{color:var(--mark-ink)}
.band .button:not(.secondary){background:var(--mark-ink);color:var(--mark);border-color:var(--mark-ink)}
:root[data-theme=dark] .band .button:not(.secondary){background:var(--mark);color:var(--mark-ink);border-color:var(--mark)}
.band .button:not(.secondary)::before{background:var(--ground)}.band .button:not(.secondary):hover{color:var(--ink)}
@media(max-width:1023px){.section-head{grid-template-columns:1fr 1.5fr}.section-head>p:last-child{grid-column:2}.cols-4{--n:2}.cols-4>*:nth-child(3){border-inline-start:0}.cols-4>*:nth-child(n+3){border-top:1px solid var(--line)}.band{padding:36px}}
@media(max-width:767px){.section-head{display:block;margin-bottom:28px}.section-head h2{margin:8px 0 14px}.cols,.cols-4{--n:1}.cols>*{border-inline-start:0;border-top:1px solid var(--line);padding:20px 4px}.cols>*:first-child{border-top:0}.band{padding:28px 20px;border-radius:16px}}