:root{--font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;--font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"JetBrains Mono",monospace;--font-large-title-size:34px;--font-large-title-line:41px;--font-large-title-weight:700;--font-large-title-tracking:0.004em;--font-title1-size:28px;--font-title1-line:34px;--font-title1-weight:700;--font-title1-tracking:0.006em;--font-title2-size:22px;--font-title2-line:28px;--font-title2-weight:600;--font-title2-tracking:0.007em;--font-title3-size:20px;--font-title3-line:25px;--font-title3-weight:600;--font-title3-tracking:0.008em;--font-headline-size:17px;--font-headline-line:22px;--font-headline-weight:600;--font-headline-tracking:-0.006em;--font-body-size:17px;--font-body-line:25px;--font-body-weight:400;--font-body-tracking:-0.006em;--font-callout-size:16px;--font-callout-line:22px;--font-callout-weight:400;--font-callout-tracking:-0.005em;--font-subhead-size:15px;--font-subhead-line:20px;--font-subhead-weight:400;--font-subhead-tracking:-0.002em;--font-footnote-size:13px;--font-footnote-line:18px;--font-footnote-weight:400;--font-footnote-tracking:0em;--font-caption-size:12px;--font-caption-line:16px;--font-caption-weight:500;--font-caption-tracking:0em;--font-code-size:14px;--font-code-line:22px;--font-code-weight:400;--font-code-tracking:0em;--space-0:0px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--space-8:64px;--space-10:80px;--space-12:96px;--space-0_5:4px;--space-1_5:12px;--space-2_5:20px;--radius-none:0px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--radius-pill:999px;--border-hairline:1px;--border-regular:1.5px;--border-thick:2px;--duration-instant:0ms;--duration-fast:120ms;--duration-base:220ms;--duration-slow:360ms;--easing-standard:cubic-bezier(0.2,0,0,1);--easing-entrance:cubic-bezier(0.16,1,0.3,1);--easing-exit:cubic-bezier(0.4,0,1,1);--elevation-none:none;--elevation-sm:0 1px 2px rgba(16,15,13,0.06),0 1px 1px rgba(16,15,13,0.04);--elevation-md:0 4px 12px rgba(16,15,13,0.08),0 1px 3px rgba(16,15,13,0.06);--color-canvas:#FAFAF9;--color-surface:#FFFFFF;--color-surface-raised:#FFFFFF;--color-surface-sunken:#F4F3F1;--color-code-surface:#191714;--color-text-primary:#191714;--color-text-secondary:#615D56;--color-text-tertiary:#817C74;--color-text-on-accent:#FFFFFF;--color-text-on-code:#F4F3F1;--color-accent:#D2691E;--color-accent-pressed:#B4551A;--color-accent-muted:#FCE7D8;--color-separator:#E2E0DC;--color-separator-strong:#CFCCC6;--color-fill:#F4F3F1;--color-fill-pressed:#ECEBE8;--color-success:#2E7D5B;--color-danger:#B23B2E;--color-warning:#9A6B12;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--color-canvas:#100F0D;--color-surface:#191714;--color-surface-raised:#211F1C;--color-surface-sunken:#100F0D;--color-code-surface:#000000;--color-text-primary:#FAFAF9;--color-text-secondary:#A8A49C;--color-text-tertiary:#817C74;--color-text-on-accent:#100F0D;--color-text-on-code:#ECEBE8;--color-accent:#E87F44;--color-accent-pressed:#F1A578;--color-accent-muted:#5E2D0F;--color-separator:#2C2A26;--color-separator-strong:#46433D;--color-fill:#211F1C;--color-fill-pressed:#2C2A26;--color-success:#4FB98A;--color-danger:#E7746A;--color-warning:#D8A54A;--elevation-none:none;--elevation-sm:0 1px 2px rgba(0,0,0,0.4);--elevation-md:0 4px 14px rgba(0,0,0,0.5)}}[data-theme=light]{--color-canvas:#FAFAF9;--color-surface:#FFFFFF;--color-surface-raised:#FFFFFF;--color-surface-sunken:#F4F3F1;--color-code-surface:#191714;--color-text-primary:#191714;--color-text-secondary:#615D56;--color-text-tertiary:#817C74;--color-text-on-accent:#FFFFFF;--color-text-on-code:#F4F3F1;--color-accent:#D2691E;--color-accent-pressed:#B4551A;--color-accent-muted:#FCE7D8;--color-separator:#E2E0DC;--color-separator-strong:#CFCCC6;--color-fill:#F4F3F1;--color-fill-pressed:#ECEBE8;--color-success:#2E7D5B;--color-danger:#B23B2E;--color-warning:#9A6B12}[data-theme=dark]{--color-canvas:#100F0D;--color-surface:#191714;--color-surface-raised:#211F1C;--color-surface-sunken:#100F0D;--color-code-surface:#000000;--color-text-primary:#FAFAF9;--color-text-secondary:#A8A49C;--color-text-tertiary:#817C74;--color-text-on-accent:#100F0D;--color-text-on-code:#ECEBE8;--color-accent:#E87F44;--color-accent-pressed:#F1A578;--color-accent-muted:#5E2D0F;--color-separator:#2C2A26;--color-separator-strong:#46433D;--color-fill:#211F1C;--color-fill-pressed:#2C2A26;--color-success:#4FB98A;--color-danger:#E7746A;--color-warning:#D8A54A}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:var(--font-sans);font-size:var(--font-body-size);line-height:var(--font-body-line);letter-spacing:var(--font-body-tracking);color:var(--color-text-primary);background:var(--color-canvas);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:inherit;text-decoration:none}button{font-family:inherit}.t-large-title{font-size:var(--font-large-title-size);line-height:var(--font-large-title-line);font-weight:var(--font-large-title-weight);letter-spacing:var(--font-large-title-tracking)}.t-title1{font-size:var(--font-title1-size);line-height:var(--font-title1-line);font-weight:var(--font-title1-weight);letter-spacing:var(--font-title1-tracking)}.t-title2{font-size:var(--font-title2-size);line-height:var(--font-title2-line);font-weight:var(--font-title2-weight);letter-spacing:var(--font-title2-tracking)}.t-title3{font-size:var(--font-title3-size);line-height:var(--font-title3-line);font-weight:var(--font-title3-weight);letter-spacing:var(--font-title3-tracking)}.t-headline{font-size:var(--font-headline-size);line-height:var(--font-headline-line);font-weight:var(--font-headline-weight);letter-spacing:var(--font-headline-tracking)}.t-body{font-size:var(--font-body-size);line-height:var(--font-body-line);font-weight:var(--font-body-weight);letter-spacing:var(--font-body-tracking)}.t-callout{font-size:var(--font-callout-size);line-height:var(--font-callout-line);letter-spacing:var(--font-callout-tracking)}.t-subhead{font-size:var(--font-subhead-size);line-height:var(--font-subhead-line);letter-spacing:var(--font-subhead-tracking)}.t-footnote{font-size:var(--font-footnote-size);line-height:var(--font-footnote-line)}.t-caption{font-size:var(--font-caption-size);line-height:var(--font-caption-line);font-weight:var(--font-caption-weight);text-transform:uppercase;letter-spacing:.04em}.t-code{font-family:var(--font-mono);font-size:var(--font-code-size);line-height:var(--font-code-line)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.text-accent{color:var(--color-accent)}.app{display:grid;grid-template-columns:264px 1fr;min-height:100vh}.sidebar{background:var(--color-surface);border-right:var(--border-hairline) solid var(--color-separator);padding:var(--space-3) var(--space-2);flex-direction:column;position:-webkit-sticky;position:sticky;top:0;height:100vh}.brand,.sidebar{display:flex;gap:var(--space-1)}.brand{align-items:center;padding:var(--space-1) var(--space-1) var(--space-2)}.brand-mark{width:30px;height:30px;border-radius:var(--radius-md);flex:none;background:var(--color-accent);display:grid;place-items:center;color:var(--color-text-on-accent);font-weight:700;font-size:17px;letter-spacing:-.01em}.nav-section-label{padding:var(--space-2) var(--space-1) var(--space-0_5);color:var(--color-text-tertiary)}.nav-item{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-1);border-radius:var(--radius-md);color:var(--color-text-secondary);cursor:pointer;transition:background var(--duration-fast) var(--easing-standard)}.nav-item:hover{background:var(--color-fill)}.nav-item[aria-current=page]{background:var(--color-fill);color:var(--color-text-primary);font-weight:600}.nav-item .dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--color-accent)}.main{min-width:0}.topbar{height:56px;border-bottom:var(--border-hairline) solid var(--color-separator);background:color-mix(in srgb,var(--color-surface) 82%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-3);position:-webkit-sticky;position:sticky;top:0;z-index:10}.content{padding:var(--space-4) var(--space-4) var(--space-8);max-width:1120px;margin:0 auto}.card{background:var(--color-surface);border:var(--border-hairline) solid var(--color-separator);border-radius:var(--radius-lg);box-shadow:var(--elevation-sm)}.card-pad{padding:var(--space-3)}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-0_5);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-size:var(--font-callout-size);font-weight:600;transition:background var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard)}.btn:active{transform:translateY(.5px)}.btn-primary{background:var(--color-accent);color:var(--color-text-on-accent)}.btn-primary:hover{background:var(--color-accent-pressed)}.btn-secondary{background:var(--color-fill);color:var(--color-text-primary)}.btn-secondary:hover{background:var(--color-fill-pressed)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.badge,.btn-ghost:hover{background:var(--color-fill)}.badge{display:inline-flex;align-items:center;gap:var(--space-0_5);padding:4px var(--space-1);border-radius:var(--radius-pill);font-size:var(--font-caption-size);font-weight:600;line-height:1;color:var(--color-text-secondary);letter-spacing:0;text-transform:none;white-space:nowrap}.badge-accent{background:var(--color-accent-muted);color:var(--color-accent)}.badge-outline{background:transparent;border:var(--border-hairline) solid var(--color-separator-strong)}.badge-success{background:color-mix(in srgb,var(--color-success) 14%,transparent);color:var(--color-success)}.stack-badge{font-family:var(--font-mono);font-size:var(--font-footnote-size);color:var(--color-text-tertiary);border:var(--border-hairline) solid var(--color-separator);border-radius:var(--radius-sm);padding:1px var(--space-0_5)}.progress{height:4px;background:var(--color-fill);overflow:hidden}.progress,.progress>i{border-radius:var(--radius-pill)}.progress>i{display:block;height:100%;background:var(--color-accent)}.segmented{display:inline-flex;gap:2px;padding:2px;background:var(--color-fill);border-radius:var(--radius-md)}.segmented button{border:none;background:transparent;cursor:pointer;white-space:nowrap;padding:var(--space-0_5) var(--space-1_5);border-radius:calc(var(--radius-md) - 2px);font-size:var(--font-subhead-size);font-weight:500;color:var(--color-text-secondary)}.segmented button[aria-selected=true]{background:var(--color-surface);color:var(--color-text-primary);box-shadow:var(--elevation-sm);font-weight:600}.path-list{display:flex;flex-direction:column;gap:1px}.path-option{display:flex;align-items:center;gap:var(--space-1);width:100%;text-align:left;border:none;cursor:pointer;padding:var(--space-1) var(--space-1);border-radius:var(--radius-md);background:transparent;color:var(--color-text-secondary);font-size:var(--font-subhead-size);font-weight:500;transition:background var(--duration-fast) var(--easing-standard)}.path-option:hover{background:var(--color-fill)}.path-option[aria-selected=true]{background:var(--color-fill);color:var(--color-text-primary);font-weight:600}.path-option .radio{width:15px;height:15px;border-radius:var(--radius-pill);flex:none;border:1.5px solid var(--color-separator-strong);display:grid;place-items:center;transition:border-color var(--duration-fast) var(--easing-standard)}.path-option[aria-selected=true] .radio{border-color:var(--color-accent)}.path-option[aria-selected=true] .radio:after{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-accent)}.code{background:var(--color-code-surface);color:var(--color-text-on-code);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--font-code-size);line-height:var(--font-code-line);padding:var(--space-2);overflow:auto}.code .kw{color:var(--color-accent)}.code .ty{color:#9DC7E8}.code .st{color:#A8CE9A}.code .cm{color:var(--color-text-tertiary)}.code .num{color:#E0B080}hr.sep{border:none;border-top:var(--border-hairline) solid var(--color-separator);margin:var(--space-2) 0}.row{gap:var(--space-1)}.between,.row{display:flex;align-items:center}.between{justify-content:space-between}.grow{flex:1 1;min-width:0}.muted-icon{color:var(--color-text-tertiary)}.input{width:100%;box-sizing:border-box;padding:var(--space-1) var(--space-1_5);font-family:inherit;font-size:var(--font-callout-size);color:var(--color-text-primary);background:var(--color-surface-sunken);border:var(--border-hairline) solid var(--color-separator-strong);border-radius:var(--radius-md);transition:border-color var(--duration-fast) var(--easing-standard)}.input:focus{outline:none;border-color:var(--color-accent)}.field-label{display:block;font-size:var(--font-subhead-size);font-weight:600;margin-bottom:var(--space-0_5)}.linklike{border:none;background:none;padding:0;cursor:pointer;color:var(--color-accent);font:inherit;font-weight:600}.linklike:hover{text-decoration:underline}.auth-error{margin-top:var(--space-2);padding:var(--space-1) var(--space-1_5);border-radius:var(--radius-md);color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,transparent)}.auth-shell{min-height:100vh;display:grid;place-items:center;background:var(--color-canvas);padding:var(--space-3)}.auth-card{width:100%;max-width:380px;padding:var(--space-4)}.account,.auth-brand{display:flex;align-items:center;gap:var(--space-1)}.account{padding:var(--space-1) var(--space-0_5)}.account-avatar{width:30px;height:30px;border-radius:var(--radius-pill);flex:none;background:var(--color-fill);color:var(--color-text-secondary);display:grid;place-items:center;font-weight:700;font-size:13px}.account-email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.glyph{width:18px;height:18px;display:inline-block;vertical-align:-3px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.glyph-sm{width:15px;height:15px}.lesson{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 56px)}.prose{overflow:auto;padding:var(--space-4);border-right:var(--border-hairline) solid var(--color-separator);max-width:62ch}.prose h1{font-size:var(--font-title1-size);line-height:var(--font-title1-line);letter-spacing:var(--font-title1-tracking);margin:0 0 var(--space-1)}.prose h2{font-size:var(--font-title3-size);line-height:var(--font-title3-line);margin:var(--space-3) 0 var(--space-1)}.prose p{color:var(--color-text-primary);margin:var(--space-1_5) 0}.prose code{font-family:var(--font-mono);font-size:.92em;background:var(--color-fill);padding:1px 5px}.prose .callout,.prose code{border-radius:var(--radius-sm)}.prose .callout{border-left:var(--border-thick) solid var(--color-accent);background:var(--color-surface-sunken);padding:var(--space-1_5) var(--space-2);margin:var(--space-2) 0}.prose .callout p{margin:var(--space-0_5) 0}.prose .callout p:first-child{margin-top:0}.prose .callout p:last-child{margin-bottom:0}.prose .callout-compare{border-left-color:var(--color-separator-strong)}.challenge-marker{display:flex;align-items:center;gap:var(--space-1_5);border:var(--border-hairline) solid var(--color-separator-strong);border-radius:var(--radius-md);padding:var(--space-1_5) var(--space-2);margin:var(--space-2) 0;background:var(--color-surface)}.challenge-dot{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--color-accent);flex:none}.playground{display:flex;flex-direction:column;background:var(--color-surface-sunken);min-width:0}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) var(--space-2);border-bottom:var(--border-hairline) solid var(--color-separator);background:var(--color-surface)}.editor{flex:1 1;margin:var(--space-2);border-radius:var(--radius-md);overflow:hidden;display:flex;min-height:0}.editor textarea{flex:1 1;width:100%;border:none;outline:none;resize:none;background:var(--color-code-surface);color:var(--color-text-on-code);font-family:var(--font-mono);font-size:var(--font-code-size);line-height:var(--font-code-line);white-space:pre;-moz-tab-size:4;tab-size:4}.console,.editor textarea{padding:var(--space-2);overflow:auto}.console{border-top:var(--border-hairline) solid var(--color-separator);background:var(--color-surface);max-height:40%}.console pre{font-family:var(--font-mono);font-size:var(--font-footnote-size);color:var(--color-text-secondary);white-space:pre-wrap;margin:var(--space-1) 0 0}.test-row{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-0_5) 0}.tick{width:16px;height:16px;border-radius:var(--radius-pill);display:grid;place-items:center;flex:none}.tick.pass{background:color-mix(in srgb,var(--color-success) 18%,transparent);color:var(--color-success)}.tick.fail{background:color-mix(in srgb,var(--color-danger) 18%,transparent);color:var(--color-danger)}