:root{color-scheme:light dark;--bg: #f7f8f4;--surface: #ffffff;--surface-strong: #e8eee7;--text: #17201a;--muted: #667165;--line: #d8ded5;--accent: #2f7d57;--accent-strong: #1d5c3d;--accent-soft: #dcecdf;--code-bg: #101713;--code-text: #dbe8de;font-family:Aptos,Segoe UI,system-ui,sans-serif}@media(prefers-color-scheme:dark){:root{--bg: #101411;--surface: #171d19;--surface-strong: #202922;--text: #edf4ee;--muted: #aab6aa;--line: #2b352d;--accent: #7fc99a;--accent-strong: #a6e2ba;--accent-soft: #223429;--code-bg: #0b100d;--code-text: #e8f1ea}}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 42%,transparent),transparent 34rem),var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}.app-shell{min-height:100dvh}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1180px;height:72px;margin:0 auto;padding:0 1.25rem;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.brand,.nav-actions,.hero-actions,.console-header,.goal-strip,.hint-head,.check-row{display:flex;align-items:center}.brand{gap:.6rem;font-weight:800}.nav-actions{gap:1rem;color:var(--muted);font-size:.94rem}.nav-button,.primary-action,.secondary-action,.complete-button,.hint-head button{border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.nav-button{padding:.55rem .8rem;color:var(--text);background:var(--surface)}.hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(320px,1.08fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;max-width:1180px;min-height:calc(100dvh - 72px);margin:0 auto;padding:3rem 1.25rem 5rem}.hero-copy{max-width:620px}.eyebrow,.section-kicker{margin:0 0 .9rem;color:var(--accent-strong);font-size:.77rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.hero h1{max-width:11ch;margin:0;font-size:clamp(3.2rem,8vw,6.6rem);line-height:.96;letter-spacing:0}.hero-copy>p:not(.eyebrow){max-width:58ch;margin:1.35rem 0 0;color:var(--muted);font-size:1.08rem;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}.primary-action,.secondary-action,.complete-button,.hint-head button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;padding:.72rem 1rem}.primary-action{border-color:var(--accent-strong);color:#fff;background:var(--accent-strong)}.secondary-action,.complete-button,.hint-head button{color:var(--text);background:var(--surface)}.primary-action:active,.secondary-action:active,.complete-button:active,.hint-head button:active,.lesson-tab:active{transform:translateY(1px)}.lesson-console,.panel,.lesson-list,.workflow{border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 24px 80px color-mix(in srgb,var(--accent) 11%,transparent)}.lesson-console{min-width:0;overflow:hidden}.console-header{justify-content:space-between;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:.9rem}.console-header span:first-child{color:var(--text);font-weight:800}.console-grid{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}.console-grid div{padding:1rem;border-right:1px solid var(--line)}.console-grid div:last-child{border-right:0}.metric-label{display:block;color:var(--muted);font-size:.78rem}.console-grid strong{display:block;margin-top:.35rem;font-size:1.55rem}pre{margin:0;overflow:auto;color:var(--code-text);background:var(--code-bg);font-family:Cascadia Code,SFMono-Regular,Consolas,monospace;font-size:.82rem;line-height:1.6}.lesson-console pre{max-height:420px;padding:1.1rem}.lesson-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1rem;max-width:1180px;margin:0 auto;padding:0 1.25rem 5rem}.lesson-list{align-self:start;padding:1rem}.lesson-list h2{margin:0 0 .9rem;font-size:1rem}.lesson-tab{display:grid;width:100%;gap:.25rem;margin-bottom:.55rem;padding:.85rem;border:1px solid transparent;border-radius:8px;color:var(--text);text-align:left;background:transparent;cursor:pointer}.lesson-tab small{color:var(--muted)}.lesson-tab.active{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--accent-soft)}.lesson-player{min-width:0}.lesson-header{display:flex;justify-content:space-between;gap:1.5rem;padding-bottom:1rem}.lesson-header h2,.workflow h2{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.03;letter-spacing:0}.lesson-header p:not(.section-kicker),.workflow p{max-width:62ch;color:var(--muted);line-height:1.65}.complete-button.done{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}.goal-strip{flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}.goal-strip span{border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;color:var(--muted);background:var(--surface);font-size:.88rem}.player-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:1rem}.panel{min-width:0;padding:1rem}.panel h3{margin:0 0 .8rem}details{overflow:hidden;border:1px solid var(--line);border-radius:8px}summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;cursor:pointer}summary small{color:var(--muted)}details pre{max-height:560px;padding:1rem}.hint-head{justify-content:space-between;gap:1rem}.hint-head button{min-height:36px;padding:.48rem .65rem}.hint-head button:disabled{cursor:not-allowed;opacity:.52}.hints{display:grid;gap:.7rem;margin:.2rem 0 1.2rem;padding:0;list-style:none}.hints li{padding:.85rem;border-radius:8px;background:var(--surface-strong)}.hints p{margin:.35rem 0 0;color:var(--muted);line-height:1.55}.checks{display:grid;gap:.55rem}.check-row{align-items:flex-start;gap:.65rem;padding:.75rem 0;color:var(--muted)}.check-row strong,.check-row span{display:block}.check-row strong{color:var(--text)}.run-result{margin-top:1rem;padding:1rem;border-radius:8px;color:var(--accent-strong);background:var(--accent-soft)}.run-result span,.run-result strong{display:block}.run-result span{margin-bottom:.25rem;font-size:.82rem;font-weight:800}.workflow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr);gap:2rem;max-width:1180px;margin:0 auto 5rem;padding:clamp(1.25rem,4vw,2rem)}.workflow-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.workflow-steps div{display:flex;align-items:center;gap:.7rem;min-height:86px;padding:1rem;border-radius:8px;background:var(--surface-strong);font-weight:800}@media(prefers-reduced-motion:no-preference){.lesson-console,.hero-copy,.lesson-layout,.workflow{animation:enter .62s cubic-bezier(.16,1,.3,1) both}.lesson-console{animation-delay:90ms}.lesson-layout{animation-delay:.13s}}@keyframes enter{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.nav-actions a:not(.nav-button){display:none}.hero,.lesson-layout,.player-grid,.workflow{grid-template-columns:1fr}.hero{min-height:auto;padding-top:2rem}.hero h1{max-width:12ch;font-size:clamp(3rem,16vw,4.6rem)}.lesson-header{display:grid}}@media(max-width:560px){.topbar{padding:0 .9rem}.brand span{display:none}.console-grid,.workflow-steps{grid-template-columns:1fr}.console-grid div{border-right:0;border-bottom:1px solid var(--line)}}