:root{--font-ui:"Plus Jakarta Sans", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--fs-xs:.75rem;--fs-sm:.875rem;--fs-base:1rem;--fs-md:1.125rem;--fs-lg:1.375rem;--fs-xl:1.75rem;--fs-2xl:2.25rem;--fs-display:3rem;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;--sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--r-sm:8px;--r-md:12px;--r-lg:18px;--r-xl:26px;--r-pill:999px;--z-topbar:50;--z-dropdown:80;--ease-out:cubic-bezier(.22, 1, .36, 1);--dur-fast:.15s;--dur:.22s;--measure:72ch}:root[data-theme=light]{--ground:#faf9f6;--surface:#fff;--surface-2:#f2f1ec;--surface-3:#ebe9e2;--border:#1f23281a;--border-strong:#1f23282e;--ink:#1f2328;--ink-2:#5b6066;--ink-3:#8a8f96;--accent:#ff6a4d;--accent-hover:#f2542f;--accent-soft:#ff6a4d1f;--accent-ink:#1b1d1f;--success:#2e9e5b;--success-soft:#2e9e5b1f;--danger:#d83a3f;--danger-soft:#d83a3f1a;--info:#2f6fe0;--info-soft:#2f6fe01f;--code-bg:#fbfaf7;--code-ink:#1f2328;--shadow-sm:0 1px 2px #1f23280f;--shadow-md:0 4px 14px #1f232814;--shadow-lg:0 10px 34px #1f23281a;--shadow-accent:0 8px 22px #ff6a4d47}:root[data-theme=dark]{--ground:#1b1d1f;--surface:#24272a;--surface-2:#2e3236;--surface-3:#363b40;--border:#ffffff1a;--border-strong:#fff3;--ink:#ecedee;--ink-2:#a6aaae;--ink-3:#767b81;--accent:#ff7a5c;--accent-hover:#ff8e75;--accent-soft:#ff7a5c29;--accent-ink:#1b1d1f;--success:#46c47c;--success-soft:#46c47c29;--danger:#ff6b6f;--danger-soft:#ff6b6f29;--info:#6aa1ff;--info-soft:#6aa1ff29;--code-bg:#1b1d1f;--code-ink:#ecedee;--shadow-sm:0 1px 2px #0006;--shadow-md:0 4px 14px #00000073;--shadow-lg:0 10px 34px #00000080;--shadow-accent:0 8px 22px #ff7a5c4d}html{transition:background-color var(--dur) var(--ease-out)}body,.surface,.panel{transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);font-size:var(--fs-base);font-weight:var(--fw-regular);color:var(--ink);background-color:var(--ground);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;line-height:1.6}h1,h2,h3,h4,p{margin:0}a{color:var(--info);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-pill);background-clip:content-box;border:2px solid #0000}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.container{width:100%;max-width:1180px;padding:0 var(--sp-5);margin:0 auto}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.markdown{color:var(--ink);font-size:var(--fs-base);line-height:1.75}.markdown h1,.markdown h2,.markdown h3{line-height:1.3;font-weight:var(--fw-semibold);margin:var(--sp-5) 0 var(--sp-3)}.markdown h2{font-size:var(--fs-lg)}.markdown h3{font-size:var(--fs-md)}.markdown p{margin:var(--sp-3) 0;max-width:var(--measure)}.markdown ul,.markdown ol{margin:var(--sp-3) 0;padding-left:var(--sp-5)}.markdown li{margin:var(--sp-2) 0}.markdown code{font-family:var(--font-mono);background:var(--accent-soft);color:var(--accent-ink);border-radius:6px;padding:.12em .4em;font-size:.9em}.markdown pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4);font-size:var(--fs-sm);overflow:auto}.markdown pre code{color:var(--code-ink);background:0 0;padding:0}.markdown strong{font-weight:var(--fw-semibold)}.markdown blockquote{margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink)}@media (width<=720px){:root{--fs-display:2.1rem;--fs-2xl:1.75rem}.container{padding:0 var(--sp-4)}}.btn{justify-content:center;align-items:center;gap:var(--sp-2);font-family:var(--font-ui);font-weight:var(--fw-semibold);border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);border:1px solid #0000;display:inline-flex}.btn--md{font-size:var(--fs-sm);padding:.55rem 1.1rem}.btn--lg{font-size:var(--fs-base);padding:.7rem 1.4rem}.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-accent)}.btn--primary:hover{background:var(--accent-hover);transform:translateY(-1px)}.btn--ghost{color:var(--ink);border-color:var(--border-strong);background:0 0}.btn--ghost:hover{background:var(--surface-2)}.btn--subtle{background:var(--surface-2);color:var(--ink)}.btn--subtle:hover{background:var(--surface-3)}.btn:active{transform:translateY(0)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.dot{border-radius:50%;flex:none;width:12px;height:12px;display:inline-block}.dot--done{background:var(--accent)}.dot--current{border:2px solid var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background:0 0}.dot--todo{border:2px solid var(--border-strong);background:0 0}.topbar{z-index:var(--z-topbar);background:color-mix(in srgb, var(--surface) 88%, transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0}.topbar__inner{align-items:center;gap:var(--sp-5);height:64px;display:flex}.brand{align-items:center;gap:var(--sp-2);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink);text-decoration:none;display:flex}.brand__mark{font-size:1.4rem}.brand__accent{color:var(--accent)}.topbar__nav{gap:var(--sp-2);margin-left:auto;display:flex}.navlink{border-radius:var(--r-pill);color:var(--ink-2);font-weight:var(--fw-medium);transition:background-color var(--dur-fast), color var(--dur-fast);padding:.45rem .85rem;text-decoration:none}.navlink:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}.navlink.active{color:var(--accent);background:var(--accent-soft)}.theme-toggle{border:1px solid var(--border-strong);background:var(--surface);width:40px;height:40px;color:var(--ink);cursor:pointer;transition:background-color var(--dur-fast), transform var(--dur-fast);border-radius:50%;justify-content:center;align-items:center;display:inline-flex}.theme-toggle:hover{background:var(--surface-2);transform:rotate(-12deg)}.app-main{min-height:calc(100vh - 64px);padding:var(--sp-6) 0 var(--sp-8)}.site-footer{border-top:1px solid var(--border);padding:var(--sp-5) 0;color:var(--ink-2);font-size:var(--fs-sm);text-align:center}.empty-state{gap:var(--sp-4);padding-top:var(--sp-8);flex-direction:column;align-items:flex-start;display:flex}.home{gap:var(--sp-8);flex-direction:column;display:flex}.hero{padding-top:var(--sp-5);justify-content:center;display:flex}.hero__copy{text-align:center;max-width:720px}.hero__title{font-size:var(--fs-display);font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1.15}.hero__accent{color:var(--accent)}.hero__sub{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--ink-2)}.hero__cta{margin-top:var(--sp-5);gap:var(--sp-3);flex-wrap:wrap;justify-content:center;display:flex}.steps{gap:var(--sp-4);grid-template-columns:repeat(3,1fr);display:grid}.step{gap:var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm);align-items:flex-start;display:flex}.step__n{background:var(--accent-soft);width:34px;height:34px;color:var(--accent);font-weight:var(--fw-bold);border-radius:50%;flex:none;justify-content:center;align-items:center;display:flex}.step__t{font-weight:var(--fw-semibold)}.step__d{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px}.path__head{margin-bottom:var(--sp-4);justify-content:space-between;align-items:baseline;display:flex}.path__title{font-size:var(--fs-xl);font-weight:var(--fw-bold)}.path__all{color:var(--accent);font-weight:var(--fw-medium);text-decoration:none}.path__rail{gap:var(--sp-3);padding-bottom:var(--sp-2);scroll-snap-type:x mandatory;display:flex;overflow-x:auto}.path-chip{scroll-snap-align:start;min-width:140px;padding:var(--sp-3) var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--ink);transition:border-color var(--dur-fast), transform var(--dur-fast);flex-direction:column;flex:none;gap:2px;text-decoration:none;display:flex}.path-chip:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}.path-chip__no{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent)}.path-chip__t{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.list-page__head{gap:var(--sp-4);margin-bottom:var(--sp-6);flex-direction:column;display:flex}.list-page__header-row{justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;display:flex}.list-page__head h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}.list-page__head p{color:var(--ink-2)}.streak-badge{align-items:center;gap:var(--sp-1);background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:.2rem .7rem;display:inline-flex}.progress-bar{background:var(--surface-2);border-radius:var(--r-pill);width:100%;height:8px;overflow:hidden}.progress-bar__fill{background:linear-gradient(90deg, var(--accent), var(--accent-hover));border-radius:var(--r-pill);height:100%;transition:width var(--dur-slow) var(--ease-out)}.stage-section{margin-bottom:var(--sp-7)}.stage-section__header{margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);border-bottom:2px solid var(--border);justify-content:space-between;align-items:center;display:flex}.stage-section__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink)}.stage-section__progress{font-size:var(--fs-sm);color:var(--ink-2);font-weight:var(--fw-medium)}.lesson-grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0;padding:0;list-style:none;display:grid}.lesson-card{gap:var(--sp-2);height:100%;padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);color:var(--ink);transition:border-color var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);flex-direction:column;text-decoration:none;display:flex}.lesson-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);text-decoration:none;transform:translateY(-3px)}.lesson-card__top{justify-content:space-between;align-items:center;display:flex}.lesson-card__no{font-family:var(--font-mono);color:var(--ink-2);font-size:var(--fs-sm)}.lesson-card__title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}.lesson-card__summary{font-size:var(--fs-sm);color:var(--ink-2);flex:1}.lesson-card__meta{gap:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-2);display:flex}.lesson-card__time{align-items:center;gap:var(--sp-1);display:flex}.lesson-card__difficulty{align-items:center;display:flex}.lesson-card__go{color:var(--accent);font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.learn-layout{gap:var(--sp-6);grid-template-columns:260px 1fr;align-items:start;display:grid}.sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-sm);max-height:calc(100vh - 110px);position:sticky;top:84px;overflow-y:auto}.sidebar__head{margin-bottom:var(--sp-3);justify-content:space-between;align-items:center;display:flex}.sidebar__title{font-weight:var(--fw-semibold)}.sidebar__count{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent)}.sidebar__list{flex-direction:column;gap:2px;display:flex}.lesson-link{align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);color:var(--ink-2);transition:background-color var(--dur-fast), color var(--dur-fast);text-decoration:none;display:flex}.lesson-link:hover{background:var(--surface-2);color:var(--ink);text-decoration:none}.lesson-link.is-current{background:var(--accent-soft);color:var(--ink)}.lesson-link__no{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);width:22px}.lesson-link__title{font-size:var(--fs-sm);font-weight:var(--fw-medium)}.lesson__head{margin-bottom:var(--sp-5);position:relative}.lesson__head-row{justify-content:space-between;align-items:flex-start;gap:var(--sp-4);flex-wrap:wrap;display:flex}.lesson__title{font-size:var(--fs-xl);font-weight:var(--fw-bold)}.lesson__summary{color:var(--ink-2);margin-top:var(--sp-2)}.lesson__badges{gap:var(--sp-2);flex-wrap:wrap;display:flex}.lesson__badge{background:var(--success-soft);color:var(--success);font-weight:var(--fw-semibold);font-size:var(--fs-sm);border-radius:var(--r-pill);white-space:nowrap;padding:.3rem .8rem}.lesson__badge--time{background:var(--surface-2);color:var(--ink-2)}.lesson__badge--difficulty{background:var(--accent-soft);color:var(--accent)}.lesson__body{gap:var(--sp-6);grid-template-columns:1fr 1fr;align-items:start;display:grid}.lesson__explain{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm)}.key-points-card{margin-top:var(--sp-5);padding:var(--sp-4);background:linear-gradient(135deg, var(--accent-soft) 0%, var(--surface) 100%);border:1px solid var(--accent);border-radius:var(--r-md)}.key-points-card h3{font-size:var(--fs-sm);margin-bottom:var(--sp-3);color:var(--accent);font-weight:var(--fw-semibold)}.key-points-card ul{padding-left:var(--sp-5);font-size:var(--fs-sm);color:var(--ink);margin:0}.key-points-card li{margin:var(--sp-2) 0;font-weight:var(--fw-medium)}.exercises{margin-top:var(--sp-5);padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-md)}.exercises h3{font-size:var(--fs-sm);margin-bottom:var(--sp-2);color:var(--ink)}.exercises ul{padding-left:var(--sp-5);font-size:var(--fs-sm);color:var(--ink-2);margin:0}.exercises li{margin:var(--sp-2) 0}.lesson__play{gap:var(--sp-3);flex-direction:column;display:flex;position:sticky;top:84px}.play__bar{justify-content:space-between;align-items:center;display:flex}.play__label{font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--ink-2)}.play__loading{font-size:var(--fs-sm);color:var(--info)}.play__loading--err{color:var(--danger)}.play__actions{gap:var(--sp-3);align-items:center;display:flex}.success-celebration{padding:var(--sp-4);background:linear-gradient(135deg, var(--success-soft) 0%, var(--surface) 100%);border:2px solid var(--success);border-radius:var(--r-md);text-align:center;font-weight:var(--fw-semibold);color:var(--success);font-size:var(--fs-md);animation:.6s ease-out celebrate}@keyframes celebrate{0%{opacity:0;transform:scale(.8)}50%{transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.key-points-card{margin-top:var(--sp-6);padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.key-points-card h3{margin:0 0 var(--sp-4) 0;font-size:var(--fs-lg);color:var(--ink-1)}.key-points-card ul{padding-left:var(--sp-5);margin:0;list-style:none}.key-points-card li{margin:var(--sp-2) 0;font-size:var(--fs-sm);color:var(--ink-2);position:relative}.key-points-card li:before{content:"✓";left:calc(-1 * var(--sp-5));color:var(--accent);font-weight:var(--fw-bold);position:absolute}.topbar__actions{align-items:center;gap:var(--sp-3);display:flex}.user-menu{align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);display:flex}.user-email{font-size:var(--fs-sm);color:var(--ink-2);text-overflow:ellipsis;white-space:nowrap;max-width:120px;overflow:hidden}.btn-signout{padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs)}.btn-login{padding:var(--sp-2) var(--sp-4)}.level-panel{border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-6);background:linear-gradient(135deg,#ff6b4a0d 0%,#ffd93d0d 100%)}.level-panel__header{margin-bottom:var(--sp-4);justify-content:space-between;align-items:center;display:flex}.level-panel__title{align-items:center;gap:var(--sp-3);display:flex}.level-panel__level{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--accent);font-family:var(--ff-mono)}.level-panel__name{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--ink)}.level-panel__xp{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink-2);font-family:var(--ff-mono)}.level-panel__progress{gap:var(--sp-2);flex-direction:column;display:flex}.level-panel__progress-bar{background:var(--surface);border-radius:var(--r-pill);height:12px;overflow:hidden}.level-panel__progress-fill{background:linear-gradient(90deg, var(--accent), var(--amber));height:100%;transition:width var(--dur-med) var(--ease-out)}.level-panel__progress-text{font-size:var(--fs-xs);color:var(--ink-2);text-align:right;font-family:var(--ff-mono)}.milestone-wall{margin-bottom:var(--sp-8)}.milestone-wall__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-4)}.milestone-wall__grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.milestone-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);text-align:center;opacity:.4;filter:grayscale();transition:all var(--dur-fast) var(--ease-out);position:relative}.milestone-card--unlocked{opacity:1;filter:grayscale(0%);border-color:var(--accent);background:linear-gradient(135deg,#ff6b4a0d 0%,#ffd93d0d 100%)}.milestone-card--unlocked:hover{box-shadow:var(--shadow-soft);transform:translateY(-4px)}.milestone-card__icon{margin-bottom:var(--sp-2);font-size:48px}.milestone-card__name{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--sp-1)}.milestone-card__description{font-size:var(--fs-xs);color:var(--ink-2)}.milestone-card__badge{top:var(--sp-2);right:var(--sp-2);background:var(--accent);color:#fff;padding:var(--sp-1) var(--sp-2);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-bold);position:absolute}.level-up-notification{z-index:2000;animation:3s ease-in-out forwards levelUp;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes levelUp{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}20%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}40%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1;transform:translate(-50%,-50%)scale(1)}to{opacity:0;transform:translate(-50%,-50%)scale(.8)}}.level-up-notification__content{background:linear-gradient(135deg, var(--accent), var(--amber));color:#fff;padding:var(--sp-8);border-radius:var(--r-xl);text-align:center;box-shadow:var(--shadow-soft);min-width:300px}.level-up-notification__icon{margin-bottom:var(--sp-4);font-size:64px}.level-up-notification__title{font-size:var(--fs-2xl);font-weight:var(--fw-bold);margin-bottom:var(--sp-2)}.level-up-notification__level{font-size:var(--fs-xl);font-weight:var(--fw-bold);opacity:.9}.milestone-notifications{top:var(--sp-4);right:var(--sp-4);z-index:1000;gap:var(--sp-2);flex-direction:column;display:flex;position:fixed}.milestone-notification{background:var(--surface);border:2px solid var(--accent);border-radius:var(--r-lg);padding:var(--sp-4);align-items:center;gap:var(--sp-3);box-shadow:var(--shadow-soft);min-width:300px;animation:.5s ease-out slideIn;display:flex}.milestone-notification__icon{font-size:32px}.milestone-notification__content{flex:1}.milestone-notification__title{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--accent);margin-bottom:var(--sp-1)}.milestone-notification__name{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--sp-1)}.milestone-notification__description{font-size:var(--fs-sm);color:var(--ink-2)}.lesson__nav{margin-top:var(--sp-2);justify-content:space-between;display:flex}.lesson__nav-link{color:var(--ink-2);font-size:var(--fs-sm);text-decoration:none}.lesson__nav-link:hover{color:var(--accent)}.achievement-toast{align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--surface);border:2px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);cursor:pointer;transition:right .3s var(--ease-out);z-index:1000;max-width:380px;display:flex;position:fixed;top:80px;right:-400px}.achievement-toast--visible{right:var(--sp-5)}.achievement-toast__icon{font-size:3rem;line-height:1}.achievement-toast__content{flex:1}.achievement-toast__title{font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink);margin-bottom:var(--sp-1)}.achievement-toast__desc{font-size:var(--fs-sm);color:var(--ink-2)}.editor{border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-sm);overflow:hidden}.editor .cm-editor{background:var(--code-bg);font-family:var(--font-mono)}.editor .cm-editor.cm-focused{outline:none}.run-btn{min-width:132px}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.console{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);min-height:120px;overflow:hidden}.console--empty,.console--running{justify-content:center;align-items:center;gap:var(--sp-2);color:var(--ink-2);font-size:var(--fs-sm);padding:var(--sp-4);text-align:center;display:flex}.console--error{border-color:var(--danger)}.console__bar{align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);background:var(--surface);display:flex}.console__dot{background:var(--success);border-radius:50%;width:9px;height:9px}.console__label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--ink-2);font-family:var(--font-mono)}.console__body{padding:var(--sp-3) var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--code-ink);white-space:pre-wrap;word-break:break-word;min-height:60px;margin:0}.console__friendly{margin:var(--sp-3) var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--accent-soft);border-radius:var(--r-md);border-left:3px solid var(--accent)}.console__friendly-title{font-weight:var(--fw-semibold);color:var(--ink)}.console__friendly-hint{font-size:var(--fs-sm);color:var(--ink-2);margin-top:var(--sp-1);line-height:1.6}.console__raw{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-2)}.console__raw pre{margin:var(--sp-2) 0 0;font-family:var(--font-mono);white-space:pre-wrap;color:var(--ink-2)}.sandbox__head{margin-bottom:var(--sp-4)}.sandbox__head h1{font-size:var(--fs-2xl);font-weight:var(--fw-bold)}.sandbox__head p{color:var(--ink-2);margin-top:var(--sp-2)}.sandbox__bar{justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);display:flex}.sandbox .editor,.sandbox .play__actions,.sandbox .console{max-width:820px}@media (width<=920px){.hero{text-align:center;grid-template-columns:1fr}.hero__sub{margin-left:auto;margin-right:auto}.hero__cta{justify-content:center}.hero__stage{order:-1}.learn-layout{grid-template-columns:1fr}.sidebar{flex-direction:column;max-height:none;display:flex;position:static}.sidebar__list{flex-direction:row;overflow-x:auto}.lesson-link{flex:none}.lesson__body{grid-template-columns:1fr}.lesson__play{position:static}}@media (width<=640px){.steps{grid-template-columns:1fr}.topbar__nav{display:none}}.note-editor{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-4);margin-top:var(--sp-4)}.note-editor__header{margin-bottom:var(--sp-3)}.note-editor__title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-1)}.note-editor__subtitle{font-size:var(--fs-xs);color:var(--ink-2)}.note-editor__textarea{width:100%;padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--ground);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-sm);resize:vertical;margin-bottom:var(--sp-3)}.note-editor__textarea:focus{border-color:var(--accent);outline:none}.note-editor__actions{justify-content:space-between;align-items:center;display:flex}.note-editor__save{padding:var(--sp-2) var(--sp-4);background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.note-editor__save:hover{opacity:.9}.note-editor__hint{font-size:var(--fs-xs);color:var(--ink-2)}.review-reminder-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-6)}.review-reminder-panel__header{margin-bottom:var(--sp-4)}.review-reminder-panel__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-1)}.review-reminder-panel__subtitle{font-size:var(--fs-sm);color:var(--ink-2)}.review-reminder-panel__list{gap:var(--sp-3);flex-direction:column;display:flex}.review-reminder-panel__item{align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface);display:flex}.review-reminder-panel__item--high{border:1px solid var(--accent);background:#ff6b4a1a}.review-reminder-panel__item--medium{border:1px solid var(--amber);background:#ffd93d1a}.review-reminder-panel__item--low{background:var(--surface);border:1px solid var(--border)}.review-reminder-panel__item-icon{flex-shrink:0;font-size:24px}.review-reminder-panel__item-content{flex:1}.review-reminder-panel__item-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--sp-1)}.review-reminder-panel__item-meta{font-size:var(--fs-xs);color:var(--ink-2)}.review-reminder-panel__item-link{padding:var(--sp-2) var(--sp-3);background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-bold);transition:opacity var(--dur-fast) var(--ease-out);text-decoration:none}.review-reminder-panel__item-link:hover{opacity:.9}.goal-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-6)}.goal-panel__header{margin-bottom:var(--sp-4);justify-content:space-between;align-items:center;display:flex}.goal-panel__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink);margin:0}.goal-panel__add-btn{padding:var(--sp-2) var(--sp-3);background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.goal-panel__add-btn:hover{opacity:.9}.goal-panel__add-form{gap:var(--sp-2);margin-bottom:var(--sp-4);padding:var(--sp-3);background:var(--surface);border-radius:var(--r-md);display:flex}.goal-panel__input{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--ground);color:var(--ink);font-size:var(--fs-sm);flex:1}.goal-panel__input:focus{border-color:var(--accent);outline:none}.goal-panel__submit-btn{padding:var(--sp-2) var(--sp-4);background:var(--accent);color:#fff;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.goal-panel__submit-btn:hover{opacity:.9}.goal-panel__list{gap:var(--sp-3);flex-direction:column;display:flex}.goal-panel__empty{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--ink-2)}.goal-panel__empty-hint{font-size:var(--fs-sm);margin-top:var(--sp-2)}.goal-panel__item{align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface);display:flex}.goal-panel__item-icon{flex-shrink:0;font-size:24px}.goal-panel__item-content{flex:1}.goal-panel__item-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--ink);margin-bottom:var(--sp-2)}.goal-panel__item-progress{align-items:center;gap:var(--sp-2);display:flex}.goal-panel__item-progress-bar{background:var(--ground);border-radius:var(--r-pill);flex:1;height:8px;overflow:hidden}.goal-panel__item-progress-fill{background:linear-gradient(90deg, var(--accent), var(--amber));height:100%;transition:width var(--dur-med) var(--ease-out)}.goal-panel__item-progress-text{font-size:var(--fs-xs);color:var(--ink-2);font-family:var(--ff-mono);text-align:right;min-width:60px}.goal-panel__item-actions{gap:var(--sp-2);display:flex}.goal-panel__item-btn{padding:var(--sp-1) var(--sp-3);background:var(--accent);color:#fff;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.goal-panel__item-btn:hover{opacity:.9}.weekly-report-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);margin-bottom:var(--sp-6)}.weekly-report-panel__header{margin-bottom:var(--sp-4);justify-content:space-between;align-items:center;display:flex}.weekly-report-panel__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink);margin:0}.weekly-report-panel__trend{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold)}.weekly-report-panel__trend--up{color:var(--green);background:#4caf501a}.weekly-report-panel__trend--down{color:var(--accent);background:#ff6b4a1a}.weekly-report-panel__trend--stable{background:var(--surface);color:var(--ink-2)}.weekly-report-panel__stats{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.weekly-report-panel__stat{align-items:center;gap:var(--sp-3);padding:var(--sp-3);background:var(--surface);border-radius:var(--r-md);display:flex}.weekly-report-panel__stat-icon{flex-shrink:0;font-size:32px}.weekly-report-panel__stat-content{flex:1}.weekly-report-panel__stat-value{font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--ink);font-family:var(--ff-mono);margin-bottom:var(--sp-1)}.weekly-report-panel__stat-label{font-size:var(--fs-xs);color:var(--ink-2)}.auth-page{min-height:calc(100vh - 200px);padding:var(--sp-8) 0;justify-content:center;align-items:center;display:flex}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);max-width:480px;padding:var(--sp-8);margin:0 auto;box-shadow:0 10px 20px #0000001a,0 3px 6px #0000001a}.auth-header{text-align:center;margin-bottom:var(--sp-6)}.auth-title{font-family:var(--font-ui);font-size:var(--fs-display);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-2)}.auth-subtitle{font-size:var(--fs-base);color:var(--ink-2);margin:0}.auth-form{gap:var(--sp-4);flex-direction:column;display:flex}.form-group{gap:var(--sp-2);flex-direction:column;display:flex}.form-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--ink)}.form-input{padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);background:var(--ground);color:var(--ink);font-family:var(--font-ui);font-size:var(--fs-base);transition:border-color var(--dur-fast) var(--ease-out)}.form-input:focus{border-color:var(--accent);outline:none}.form-error{padding:var(--sp-3);border:1px solid var(--accent);border-radius:var(--r-md);color:var(--accent);font-size:var(--fs-sm);background:#ff6b4a1a}.auth-submit{padding:var(--sp-3) var(--sp-4);background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.auth-submit:hover{opacity:.9}.auth-note{margin-top:var(--sp-6);padding:var(--sp-4);background:var(--surface);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--ink-2)}.auth-note p{margin:0 0 var(--sp-2)}.auth-note ul{padding-left:var(--sp-4);margin:0}.auth-note li{margin-bottom:var(--sp-1)}.user-menu{align-items:center;gap:var(--sp-3);display:flex}.user-name{font-size:var(--fs-sm);color:var(--ink-2);font-weight:var(--fw-medium)}.btn-login,.btn-logout{padding:var(--sp-2) var(--sp-4);background:var(--accent);color:#fff;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none;text-decoration:none}.btn-login:hover,.btn-logout:hover{opacity:.9}.btn-logout{background:var(--surface);color:var(--ink)}.modal-backdrop{z-index:1000;animation:fadeIn var(--dur-fast) var(--ease-out);background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-8);width:90%;max-width:480px;max-height:90vh;animation:slideUp var(--dur-med) var(--ease-out);overflow-y:auto;box-shadow:0 10px 20px #0003,0 3px 6px #0000001a}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{margin-bottom:var(--sp-2);justify-content:space-between;align-items:center;display:flex}.modal-title{font-family:var(--font-ui);font-size:var(--fs-display);font-weight:var(--fw-bold);color:var(--ink);margin:0}.modal-close{border-radius:var(--r-md);width:32px;height:32px;color:var(--ink-2);cursor:pointer;transition:background var(--dur-fast) var(--ease-out);background:0 0;border:none;justify-content:center;align-items:center;font-size:20px;display:flex}.modal-close:hover{background:var(--border)}.modal-subtitle{font-size:var(--fs-base);color:var(--ink-2);margin:0 0 var(--sp-6)}.modal-form{gap:var(--sp-4);flex-direction:column;display:flex}.modal-submit{padding:var(--sp-3) var(--sp-4);background:var(--accent);color:#fff;border-radius:var(--r-md);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);border:none}.modal-submit:hover{opacity:.9}.modal-note{margin-top:var(--sp-6);padding:var(--sp-4);background:var(--ground);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--ink-2)}.modal-note p{margin:0 0 var(--sp-2)}.modal-note ul{padding-left:var(--sp-4);margin:0}.modal-note li{margin-bottom:var(--sp-1)}.modal-switch{margin-top:var(--sp-4);text-align:center}.modal-switch-btn{color:var(--accent);font-size:var(--fs-sm);cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);background:0 0;border:none;text-decoration:underline}.modal-switch-btn:hover{opacity:.8}.modal-switch-btn:disabled{opacity:.5;cursor:not-allowed}.form-input:disabled,.modal-submit:disabled{opacity:.6;cursor:not-allowed}.play__loading-spinner{border:2px solid var(--border);border-top-color:var(--accent);width:12px;height:12px;margin-right:var(--sp-2);border-radius:50%;animation:1s linear infinite spin;display:inline-block}.play__ready{color:var(--green);font-size:var(--fs-sm);font-weight:var(--fw-medium)}.pyodide-indicator{align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-size:var(--fs-sm);z-index:100;animation:slideIn var(--dur-med) var(--ease-out);display:flex;position:fixed;top:60px;right:20px;box-shadow:0 2px 8px #0000001a}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.pyodide-indicator--loading{color:var(--ink-2)}.pyodide-indicator--error{color:var(--red);border-color:var(--red)}.pyodide-indicator__spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:12px;height:12px;animation:1s linear infinite spin;display:inline-block}.pyodide-indicator__icon{font-size:var(--fs-base);font-weight:var(--fw-bold)}.pyodide-indicator__text{font-weight:var(--fw-medium)}.section__title{font-family:var(--font-ui);font-size:var(--fs-display);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-6);text-align:center}.hero__stats{margin-top:var(--sp-8);gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));max-width:600px;display:grid}.hero__stat{text-align:center;padding:var(--sp-4);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}.hero__stat-value{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--accent);font-family:var(--font-mono);margin-bottom:var(--sp-1)}.hero__stat-label{font-size:var(--fs-sm);color:var(--ink-2)}.features{padding:var(--sp-8) 0}.features__grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.feature{padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out)}.feature:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001a}.feature__icon{margin-bottom:var(--sp-3);font-size:48px}.feature__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-2)}.feature__description{font-size:var(--fs-sm);color:var(--ink-2);margin:0;line-height:1.6}.path__stages{gap:var(--sp-6);flex-direction:column;display:flex}.path-stage{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--shadow-sm)}.path-stage__header{align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4);display:flex}.path-stage__icon{border-radius:var(--r-lg);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.path-stage__name{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-1)}.path-stage__description{font-size:var(--fs-sm);color:var(--ink-2);margin:0}.path-stage__lessons{gap:var(--sp-3);flex-wrap:wrap;display:flex}.stats{padding:var(--sp-8) 0}.stats__grid{gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));display:grid}.stat{text-align:center;padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}.stat__value{font-size:48px;font-weight:var(--fw-bold);color:var(--accent);font-family:var(--font-mono);margin-bottom:var(--sp-2)}.stat__label{font-size:var(--fs-sm);color:var(--ink-2)}.cta{padding:var(--sp-8) 0;text-align:center}.cta__content{max-width:600px;padding:var(--sp-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm);margin:0 auto}.cta__title{font-size:var(--fs-display);font-weight:var(--fw-bold);color:var(--ink);margin:0 0 var(--sp-4)}.cta__description{font-size:var(--fs-md);color:var(--ink-2);margin:0 0 var(--sp-6)}@media (width<=768px){.hero__stats{grid-template-columns:repeat(2,1fr)}.features__grid{grid-template-columns:1fr}.stats__grid{grid-template-columns:repeat(2,1fr)}.path-stage__header{flex-direction:column;align-items:flex-start}}