:root{--ground:#F1F3F7;--surface:#fff;--surface-2:#E7ECF3;--surface-3:#F7F9FC;--ink:#161A23;--ink-2:#48505F;--ink-3:#566174;--line:#D4DAE4;--line-2:#C0C8D6;--accent:#33406E;--accent-2:#4C5C99;--accent-soft:#E3E7F4;--ok:#286745;--ok-soft:#DCEDE3;--ok-line:#9CC5AF;--warn:#755007;--warn-soft:#F6EBD2;--warn-line:#DCBE7E;--risk:#9E2F2F;--risk-soft:#F6E1DF;--risk-line:#D9A6A2;--brass:#775910;--on-accent:#fff;--r:10px;--f-body:Assistant,'Segoe UI',sans-serif;--f-disp:'Frank Ruhl Libre',Georgia,serif;--f-mono:'IBM Plex Mono',monospace}
:root[data-theme=dark]{--ground:#11151D;--surface:#191E28;--surface-2:#222834;--surface-3:#1E2431;--ink:#E8EBF1;--ink-2:#AEB6C4;--ink-3:#A1ABBC;--line:#414B5D;--line-2:#566174;--accent:#A9B5E4;--accent-2:#BFC9EE;--accent-soft:#232B44;--ok:#64BB8B;--ok-soft:#162C21;--ok-line:#2F5A42;--warn:#D6A63F;--warn-soft:#2E2514;--warn-line:#5C4A1E;--risk:#E58A85;--risk-soft:#32191A;--risk-line:#5E2E2C;--brass:#C7A44E;--on-accent:#11151D;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;font:18px/1.75 var(--f-body);background:var(--ground);color:var(--ink);text-align:start}h1,h2,h3,h4{font-family:var(--f-disp);line-height:1.3;margin:0 0 16px}h1{font-size:36px}h2{font-size:28px}h3{font-size:24px}p{margin:0 0 16px}a{color:var(--accent);text-underline-offset:4px}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:10px;background:var(--accent);color:var(--on-accent);padding:8px 20px;cursor:pointer;text-decoration:none;font-weight:700;line-height:1.4}button:hover,.button:hover{filter:brightness(.95)}button:active{transform:translateY(1px)}button:disabled{cursor:default;opacity:.6}.secondary{background:var(--surface);color:var(--accent);border-color:var(--line-2)}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}input,select,textarea{max-width:100%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:8px;min-height:44px;padding:8px 12px}input[type=checkbox],input[type=radio]{accent-color:var(--accent);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{background:var(--surface);border-bottom:1px solid var(--line)}.header-inner{max-width:1200px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:16px 24px;gap:24px}.wordmark{font:600 25px var(--f-mono);direction:ltr;text-decoration:none;color:var(--ink);white-space:nowrap}.wordmark span{color:var(--accent)}.header-inner nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.header-inner nav>a{min-height:44px;display:flex;align-items:center;text-decoration: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:1200px;margin:0 auto;padding:48px 24px 80px}.app-footer{max-width:1200px;margin:0 auto;padding:24px;color:var(--ink-2);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:16px}.eyebrow{font-size:14px;color:var(--accent);font-weight:700;letter-spacing:.03em;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:10px;background:var(--surface);padding:24px}.card.accent{border-inline-start:4px solid var(--accent)}.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}.badge{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;font-size:14px;padding:2px 12px;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.current{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.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(--accent);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(--accent)}.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(--accent);color:var(--on-accent)}.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:10px;background:var(--accent-soft);color:var(--accent);margin:16px 0}.notice.error{background:var(--risk-soft);color:var(--risk)}.wide-scroll,.tablewrap{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:10px}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:10px}.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(--accent);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:10px;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(--accent)}.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:10px;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:10px;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){.page{padding:32px 16px 64px}.header-inner{padding:12px 16px;gap:12px;flex-wrap:wrap}.header-inner nav{gap:12px;font-size:16px}.header-inner nav button{padding:8px 12px}.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}
*,*::before,*::after{transition:none!important}
.lesson-block .chk .go{background:var(--accent);color:var(--on-accent)}
.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}