:root{--bg-900: #fbfaf8;--bg-800: #ffffff;--bg-700: #f5f3ef;--bg-600: #ebe8e1;--bg-500: #dcd8cf;--border-subtle: #e8e4dc;--border-strong: #cfc9bd;--text-primary: #1f1d1a;--text-secondary: #55514b;--text-muted: #8a857c;--accent: #4a5568;--accent-hover: #3b4453;--accent-soft: rgba(74, 85, 104, .08);--accent-blue: #2c6e8f;--accent-link: #1d5e88;--accent-link-hover: #14466a;--success: #2f7a4f;--success-soft: rgba(47, 122, 79, .1);--warning: #a06620;--warning-soft: rgba(160, 102, 32, .1);--danger: #a13a34;--danger-soft: rgba(161, 58, 52, .09);--code-bg: #2b2f38;--code-border: #1f232a;--code-text: #e8e6e1;--code-keyword: #c1a3ff;--code-string: #a3d9a5;--code-tag: #f0a3a3;--code-attr: #f0cf8a;--code-comment: #7f8794;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--sidebar-w: 260px;--topbar-h: 60px;--shadow-sm: 0 1px 2px rgba(31, 29, 26, .04);--shadow-md: 0 2px 8px rgba(31, 29, 26, .06);--shadow-lg: 0 6px 20px rgba(31, 29, 26, .08)}*,*:before,*:after{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100%}body{font-family:var(--font-sans);background:var(--bg-900);color:var(--text-primary);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent)}a:hover{color:var(--accent-hover)}button{font-family:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}::selection{background:var(--accent-soft)}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;background:var(--bg-900);color:var(--text-primary)}.sidebar{border-right:1px solid var(--border-subtle);padding:var(--sp-5) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-5);background:var(--bg-800);position:sticky;top:0;height:100vh;overflow-y:auto}.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;color:var(--text-primary);font-weight:500}.brand__mark{width:32px;height:32px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700}.side-nav{display:flex;flex-direction:column;gap:2px}.side-nav__link{display:flex;align-items:center;gap:var(--sp-3);padding:9px var(--sp-3);border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:14px;transition:background .15s,color .15s}.side-nav__link:hover{background:var(--bg-700);color:var(--text-primary)}.side-nav__link.is-active{background:var(--accent-soft);color:var(--text-primary)}.side-nav__link i{width:18px;text-align:center}.resume-card{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-4);background:var(--bg-700);display:flex;flex-direction:column;gap:var(--sp-3)}.resume-card__label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0}.resume-card__title{margin:0;font-size:14px;font-weight:600;line-height:1.35}.resume-card__progress{display:flex;flex-direction:column;gap:6px;margin-top:auto}.sidebar__foot{margin-top:auto;font-size:11px;color:var(--text-muted)}.main{display:flex;flex-direction:column;min-width:0}.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-6);border-bottom:1px solid var(--border-subtle);background:var(--bg-800);position:sticky;top:0;z-index:10}.topbar__spacer{flex:1}.topbar__progress{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.content{padding:var(--sp-7) var(--sp-6) var(--sp-8);max-width:960px;width:100%;margin:0 auto}.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--radius-sm);font:inherit;font-size:14px;font-weight:500;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:background .15s,border-color .15s,color .15s,opacity .15s}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--accent);color:#fff}.btn--primary:hover:not(:disabled){background:var(--accent-hover)}.btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text-primary)}.btn--ghost:hover:not(:disabled){background:var(--bg-700)}.btn--lg{padding:12px 18px;font-size:15px}.btn--sm{padding:6px 10px;font-size:13px}.progress-bar{height:6px;border-radius:999px;background:var(--bg-600);overflow:hidden}.progress-bar--sm{height:4px}.progress-bar__fill{height:100%;background:var(--accent);transition:width .3s ease}.card{background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3)}.card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}.card__head h2{margin:0;font-size:15px;font-weight:600}.card__title{margin:0;font-size:14px;font-weight:500}.card--tip{border-color:#7c6cf059}.home__hero{margin-bottom:var(--sp-7)}.home__cta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);flex-wrap:wrap}.home__cta-meta{font-size:13px;color:var(--text-muted)}.home__grid{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.recent-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary)}.recent-list i{color:var(--success)}.lesson{max-width:100%}.lesson__breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--text-secondary);margin-bottom:var(--sp-5)}.lesson__breadcrumb a{color:var(--text-secondary);text-decoration:none}.lesson__breadcrumb a:hover{color:var(--text-primary)}.lesson__header{margin-bottom:var(--sp-7)}.lesson__meta{display:flex;gap:var(--sp-4);font-size:13px;color:var(--text-muted);margin-top:var(--sp-3)}.lesson__done{color:var(--success)}.lesson__objectives{margin-top:var(--sp-5);padding:var(--sp-4);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.lesson__objectives-label{font-size:13px;color:var(--text-muted);margin:0 0 var(--sp-2)}.lesson__objectives ul{margin:0;padding-left:18px;color:var(--text-secondary);font-size:14px}.lesson__objectives li{margin:4px 0}.lesson__section{margin-bottom:var(--sp-7)}.lesson__section h2{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;margin:0 0 var(--sp-4);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-subtle)}.lesson__num{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:600}.lesson__prose p{margin:0 0 var(--sp-4);line-height:1.7;color:var(--text-secondary)}.lesson__prose strong{color:var(--text-primary)}.lesson__prose code,.exercise code{background:var(--bg-700);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.88em;color:var(--text-primary)}.lesson__subhead{font-size:13px;color:var(--text-muted);margin:var(--sp-5) 0 var(--sp-3)}.line-by-line{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}.line-by-line li{display:grid;grid-template-columns:minmax(180px,max-content) 1fr;gap:var(--sp-4);align-items:start;padding:var(--sp-3);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:14px}.line-by-line code{font-family:var(--font-mono);color:var(--code-attr);font-size:13px}.line-by-line span{color:var(--text-secondary);line-height:1.55}.code-block{margin:0 0 var(--sp-4)}.code-block__caption{font-size:12px;color:var(--text-muted);margin-bottom:var(--sp-2)}.code-block__pre{margin:0;padding:var(--sp-4);background:var(--code-bg);border:1px solid var(--code-border);border-radius:var(--radius-md);overflow-x:auto;font-family:var(--font-mono);font-size:13px;line-height:1.6;color:var(--text-primary)}.exercise{padding:var(--sp-4);background:var(--bg-800);border-left:3px solid var(--accent);border-radius:var(--radius-sm);margin-bottom:var(--sp-4)}.exercise p{margin:0 0 6px}.exercise p:last-child{margin-bottom:0}.hints{display:flex;flex-direction:column;gap:var(--sp-3)}.hints__label{margin:0;font-size:13px;color:var(--text-muted);display:flex;gap:8px;align-items:center}.hints__label i{color:var(--warning)}.hints__list{display:flex;flex-direction:column;gap:var(--sp-2)}.hint{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-800)}.hint__toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;cursor:pointer;padding:var(--sp-3) var(--sp-4);color:var(--text-secondary);font:inherit;font-size:14px}.hint__toggle:hover{color:var(--text-primary)}.hint__body{margin:0;padding:0 var(--sp-4) var(--sp-4);color:var(--text-secondary);line-height:1.6;font-size:14px}.quiz{display:flex;flex-direction:column;gap:var(--sp-5)}.quiz__head{display:flex;justify-content:space-between;align-items:baseline}.quiz__head h3{margin:0;font-size:15px;font-weight:600}.quiz__question{display:flex;flex-direction:column;gap:var(--sp-3)}.quiz__q{margin:0;font-weight:500}.quiz__options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.quiz__option{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-800);color:var(--text-primary);font:inherit;font-size:14px;cursor:pointer;transition:border-color .15s,background .15s}.quiz__option:hover:not(:disabled){border-color:var(--border-strong)}.quiz__option:disabled{cursor:default}.quiz__option.is-chosen{border-color:var(--accent);background:var(--accent-soft)}.quiz__option.is-correct{border-color:var(--success);background:#3fb27f1a}.quiz__option.is-wrong{border-color:var(--danger);background:#d9605a1a}.quiz__letter{width:22px;height:22px;border-radius:4px;display:grid;place-items:center;background:var(--bg-600);color:var(--text-secondary);font-size:12px;font-weight:600}.quiz__icon{margin-left:auto}.quiz__option.is-correct .quiz__icon{color:var(--success)}.quiz__option.is-wrong .quiz__icon{color:var(--danger)}.quiz__footer{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}.quiz__score{margin:0;font-size:14px;color:var(--text-secondary)}.playground{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-800)}.playground__instructions{display:flex;gap:10px;align-items:flex-start;padding:var(--sp-3) var(--sp-4);background:var(--accent-soft);border-bottom:1px solid var(--border-subtle);font-size:13px;color:var(--text-secondary)}.playground__instructions i{color:var(--accent);margin-top:2px}.playground__instructions p{margin:0}.playground__grid{display:grid;grid-template-columns:1fr 1fr;min-height:320px}.playground__editors{display:flex;flex-direction:column;border-right:1px solid var(--border-subtle)}.editor-tabs{display:flex;border-bottom:1px solid var(--border-subtle);background:var(--bg-700)}.editor-tabs button{padding:8px 14px;background:none;border:0;color:var(--text-muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent}.editor-tabs button.is-active{color:var(--text-primary);border-bottom-color:var(--accent)}.playground__editor{flex:1;width:100%;padding:var(--sp-4);background:var(--code-bg);color:var(--text-primary);border:0;outline:none;resize:none;font-family:var(--font-mono);font-size:13px;line-height:1.6;min-height:260px}.playground__editor:focus{box-shadow:inset 0 0 0 1px var(--accent)}.playground__preview-wrap{display:flex;flex-direction:column}.preview-label{padding:8px 14px;font-size:12px;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);background:var(--bg-700)}.playground__preview{flex:1;width:100%;border:0;background:#fff;min-height:260px}.playground__actions{display:flex;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle);background:var(--bg-700)}.lesson__footer{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);padding-top:var(--sp-6);margin-top:var(--sp-7);border-top:1px solid var(--border-subtle);flex-wrap:wrap}.lesson__footer-actions{display:flex;gap:var(--sp-3);align-items:center}.page__header{margin-bottom:var(--sp-6)}.course-list{display:flex;flex-direction:column;gap:var(--sp-4)}.course-card{border:1px solid var(--border-subtle);background:var(--bg-800);border-radius:var(--radius-md);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}.course-card.is-locked{opacity:.6}.course-card__head{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:flex-start}.course-card__head h2{margin:0 0 6px;font-size:17px}.course-card__progress{display:flex;flex-direction:column;gap:6px}.lock-badge{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border-radius:999px;background:var(--bg-600);color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin:0 0 var(--sp-3);font-weight:600}.lede{color:var(--text-secondary);font-size:15px;line-height:1.65;margin:0}.muted{color:var(--text-muted)}.small{font-size:12px}h1{font-size:26px;font-weight:600;margin:0 0 var(--sp-3);letter-spacing:-.01em}.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}@media (max-width: 900px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--border-subtle)}.content{padding:var(--sp-6) var(--sp-4)}.topbar{padding:0 var(--sp-4)}.playground__grid{grid-template-columns:1fr}.playground__editors{border-right:0;border-bottom:1px solid var(--border-subtle)}}@media (max-width: 560px){h1{font-size:22px}.line-by-line li{grid-template-columns:1fr}.lesson__footer{flex-direction:column;align-items:stretch}.lesson__footer-actions{justify-content:flex-end}}.practice__tabs{display:flex;gap:4px;margin-top:var(--sp-5);border-bottom:1px solid var(--border-subtle)}.practice__tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:none;border:0;color:var(--text-muted);font:inherit;font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.practice__tab:hover{color:var(--text-primary)}.practice__tab.is-active{color:var(--text-primary);border-bottom-color:var(--accent)}.practice__tab i{font-size:13px}.practice__workspace{margin:var(--sp-6) 0 var(--sp-7);padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--sp-5);scroll-margin-top:calc(var(--topbar-h) + var(--sp-4))}.practice__workspace-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4)}.practice__workspace-head h2{font-size:16px;font-weight:600;margin:4px 0 0;line-height:1.5;color:var(--text-primary);max-width:60ch}.practice__workspace-foot{display:flex;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--border-subtle)}.practice__exercise{padding:var(--sp-4);background:var(--bg-700);border-left:3px solid var(--accent-blue);border-radius:var(--radius-sm)}.practice__exercise-label{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--accent-blue);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.06em}.practice__exercise p{margin:0;color:var(--text-secondary);line-height:1.6}.practice__free-note{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.6}.practice__grid-wrap{display:flex;flex-direction:column;gap:var(--sp-6)}.practice__group{display:flex;flex-direction:column;gap:var(--sp-3)}.practice__group-title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin:0}.practice__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-3)}.practice-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:var(--sp-4);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s;min-height:140px}.practice-card:hover{border-color:var(--border-strong);background:var(--bg-700)}.practice-card.is-selected{border-color:var(--accent);background:var(--accent-soft)}.practice-card__head{display:flex;justify-content:space-between;align-items:center}.practice-card__lesson{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:.04em}.practice-card__done{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#3fb27f26;color:var(--success);font-size:10px}.practice-card__title{font-size:14px;font-weight:600;line-height:1.35;color:var(--text-primary)}.practice-card__desc{font-size:13px;color:var(--text-secondary);line-height:1.5;flex:1}.practice-card__meta{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted);margin-top:auto}@media (max-width: 560px){.practice__workspace{padding:var(--sp-4)}.practice__workspace-head{flex-direction:column;align-items:stretch}.practice__grid{grid-template-columns:1fr}.practice__tabs{overflow-x:auto}}.projects__tier{margin-bottom:var(--sp-7)}.projects__tier-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 var(--sp-4)}.projects__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}.project-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .15s;min-height:220px}a.project-card:hover{border-color:var(--border-strong);background:var(--bg-700);transform:translateY(-1px)}.project-card.is-locked{opacity:.55;cursor:not-allowed}.project-card__head{display:flex;align-items:center;gap:8px}.project-card__tier{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:2px 8px;border-radius:4px;background:var(--accent-soft);color:var(--accent)}.project-card__done,.project-card__lock{margin-left:auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px}.project-card__done{background:#3fb27f26;color:var(--success)}.project-card__lock{background:var(--bg-600);color:var(--text-muted)}.project-card__title{font-size:16px;font-weight:600;margin:0;color:var(--text-primary)}.project-card__summary{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.55;flex:1}.project-card__skills{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}.project-card__skills li{font-size:11px;color:var(--text-muted);padding:2px 8px;border:1px solid var(--border-subtle);border-radius:4px}.project-card__foot{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto}.project-card__foot .progress-bar{flex:1}.project-detail__header{margin-bottom:var(--sp-6)}.project-detail__meta{display:flex;gap:var(--sp-5);flex-wrap:wrap;margin-top:var(--sp-4);font-size:13px;color:var(--text-muted)}.project-detail__meta i{margin-right:6px}.project-detail__skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-4)}.chip{font-size:12px;padding:3px 10px;border:1px solid var(--border-subtle);border-radius:999px;color:var(--text-secondary)}.milestone-stepper{list-style:none;padding:0;margin:0 0 var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-2);border-bottom:1px solid var(--border-subtle);padding-bottom:var(--sp-4)}.milestone-step{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.milestone-step:hover{border-color:var(--border-strong);color:var(--text-primary)}.milestone-step.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--text-primary)}.milestone-step.is-done .milestone-step__num{background:#3fb27f26;color:var(--success)}.milestone-step__num{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--bg-600);color:var(--text-secondary);font-size:11px;font-weight:600}.milestone{display:flex;flex-direction:column;gap:var(--sp-5)}.milestone__header h2{margin:var(--sp-2) 0 var(--sp-3)}.milestone__instructions{color:var(--text-secondary);line-height:1.65;max-width:65ch;margin:0}.milestone__hints,.milestone__check{margin-top:var(--sp-2)}.milestone__check{padding:var(--sp-4);background:var(--bg-800);border-left:3px solid var(--success);border-radius:var(--radius-sm)}.milestone__check-label{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--success);font-weight:600;display:flex;align-items:center;gap:6px}.milestone__check p:last-child{margin:0;color:var(--text-secondary)}.milestone__actions{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding-top:var(--sp-5);border-top:1px solid var(--border-subtle)}.milestone__actions-right{display:flex;gap:var(--sp-3);align-items:center}.milestone__complete-badge{display:inline-flex;align-items:center;gap:8px;color:var(--success);font-weight:500;font-size:14px}.project-detail__final{margin-top:var(--sp-7);padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.project-detail__final h2{margin:0 0 var(--sp-2);font-size:17px}.checklist{list-style:none;padding:0;margin:var(--sp-4) 0 0;display:flex;flex-direction:column;gap:var(--sp-3)}.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text-secondary);line-height:1.55}.checklist i{color:var(--accent);margin-top:3px}.project-detail__example{margin-top:var(--sp-5);border-top:1px solid var(--border-subtle);padding-top:var(--sp-4)}.project-detail__example summary{cursor:pointer;font-size:14px;font-weight:500;color:var(--text-primary);list-style:none;display:inline-flex;align-items:center;gap:8px}.project-detail__example summary::marker{display:none}.project-detail__example summary:before{content:"▸";color:var(--accent);transition:transform .15s}.project-detail__example[open] summary:before{transform:rotate(90deg)}.project-detail__example p{margin:var(--sp-3) 0}.project-detail__example-grid{display:grid;gap:var(--sp-3);grid-template-columns:1fr}@media (max-width: 560px){.milestone-stepper{overflow-x:auto;flex-wrap:nowrap}.milestone__actions{flex-direction:column;align-items:stretch}.milestone__actions-right{justify-content:flex-end}}.progress__overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-7)}.stat-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.stat-card__label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0}.stat-card__value{font-size:26px;font-weight:600;margin:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.stat-card__of{font-size:15px;color:var(--text-muted);font-weight:400}.stat-card__foot{font-size:12px;color:var(--text-muted);margin:0}.progress__empty{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);margin-bottom:var(--sp-7)}.progress__empty>i{font-size:22px;color:var(--accent);padding-top:2px}.progress__empty-title{margin:0 0 4px;font-weight:600;font-size:15px}.progress__empty p+.btn{margin-top:var(--sp-3)}.progress__section{margin-bottom:var(--sp-7)}.progress__section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 var(--sp-4)}.progress__section-note{margin:-8px 0 var(--sp-3)}.progress__courses{display:flex;flex-direction:column;gap:var(--sp-4)}.course-progress{padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--sp-4)}.course-progress__head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4)}.course-progress__head h3{margin:0 0 4px;font-size:16px;font-weight:600}.course-progress__complete{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:500}.course-progress__lessons{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.course-progress__lessons li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}.course-progress__lessons i{color:var(--success);font-size:11px}.course-progress__lessons a{color:var(--text-secondary);text-decoration:none;flex:1}.course-progress__lessons a:hover{color:var(--text-primary)}.course-progress__next{align-self:flex-start}.table-wrap{border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-800)}.progress-table{width:100%;border-collapse:collapse;font-size:14px}.progress-table th,.progress-table td{text-align:left;padding:12px var(--sp-4);border-bottom:1px solid var(--border-subtle)}.progress-table thead th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:var(--bg-700)}.progress-table tbody tr:last-child td{border-bottom:0}.progress-table tbody tr:hover td{background:var(--bg-700)}.progress-table a{color:var(--text-primary);text-decoration:none}.progress-table a:hover{color:var(--accent)}.progress-table .num{text-align:right;font-variant-numeric:tabular-nums}.score-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}.score-badge--perfect{background:#3fb27f26;color:var(--success)}.score-badge--good{background:var(--accent-soft);color:var(--accent)}.score-badge--low{background:#d99b3a26;color:var(--warning)}.progress__projects{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.project-progress{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:border-color .15s,background .15s}.project-progress:hover{border-color:var(--border-strong);background:var(--bg-700)}.project-progress__head{display:flex;justify-content:space-between;align-items:center}.project-progress__tier{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;padding:2px 8px;border-radius:4px}.project-progress__tier.tier-html{background:var(--accent-soft);color:var(--accent)}.project-progress__tier.tier-css{background:#4d8bf026;color:var(--accent-blue)}.project-progress__tier.tier-js{background:#d99b3a26;color:var(--warning)}.project-progress__title{margin:0;font-size:14px;font-weight:600;color:var(--text-primary)}.activity-list{list-style:none;padding:0;margin:0;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-800)}.activity-list li+li{border-top:1px solid var(--border-subtle)}.activity-list__link{display:flex;align-items:center;gap:var(--sp-3);padding:12px var(--sp-4);text-decoration:none;color:inherit;transition:background .15s}.activity-list__link:hover{background:var(--bg-700)}.activity-list__icon{width:28px;height:28px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:12px}.activity-list__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.activity-list__title{font-size:14px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-list__chev{color:var(--text-muted);font-size:11px}@media (max-width: 560px){.progress__overview{grid-template-columns:1fr}.progress-table th:nth-child(2),.progress-table td:nth-child(2){display:none}.progress-table th,.progress-table td{padding:10px 12px}}.recent-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary);min-width:0}.recent-list i{color:var(--success);flex-shrink:0}.recent-list__link{color:var(--text-secondary);text-decoration:none;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.recent-list__link:hover{color:var(--text-primary)}.recent-list .muted{flex-shrink:0}.home__card-actions{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-2)}.topbar__progress{text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);transition:background .15s,color .15s}.topbar__progress:hover{background:var(--bg-700);color:var(--text-primary)}.resources__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-7)}.resource-card{display:flex;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;color:inherit;transition:border-color .15s,background .15s,transform .15s}.resource-card:hover{border-color:var(--border-strong);background:var(--bg-700);transform:translateY(-1px)}.resource-card__icon{width:40px;height:40px;flex-shrink:0;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:16px}.resource-card__body{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.resource-card__title{font-size:15px;font-weight:600;color:var(--text-primary)}.resource-card__desc{font-size:13px;line-height:1.55;color:var(--text-secondary)}.resource-card__chev{color:var(--text-muted);font-size:12px;margin-top:4px}.resources__section{margin-bottom:var(--sp-7)}.resources__section-title{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 var(--sp-4)}.glossary{display:flex;flex-direction:column;gap:var(--sp-5)}.glossary__controls{display:flex;flex-direction:column;gap:var(--sp-3)}.search-field{position:relative;display:flex;align-items:center}.search-field>i{position:absolute;left:14px;color:var(--text-muted);font-size:13px;pointer-events:none}.search-field input{width:100%;padding:11px 40px;background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font:inherit;font-size:14px;transition:border-color .15s}.search-field input::placeholder{color:var(--text-muted)}.search-field input:focus{outline:none;border-color:var(--accent)}.search-field__clear{position:absolute;right:10px;background:none;border:0;width:24px;height:24px;display:grid;place-items:center;color:var(--text-muted);cursor:pointer;border-radius:4px}.search-field__clear:hover{color:var(--text-primary);background:var(--bg-700)}.chip-group{display:flex;flex-wrap:wrap;gap:6px}.chip-button{padding:6px 12px;background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:999px;color:var(--text-secondary);font:inherit;font-size:13px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}.chip-button:hover{border-color:var(--border-strong);color:var(--text-primary)}.chip-button.is-active{background:var(--accent-soft);border-color:var(--accent);color:var(--text-primary)}.glossary__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}.glossary-entry{padding:var(--sp-5);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--sp-3)}.glossary-entry__head{display:flex;align-items:center;gap:var(--sp-3)}.glossary-entry__term{margin:0;font-size:16px;font-weight:600}.glossary-entry__tag{font-size:10px;font-weight:600;letter-spacing:.06em;padding:2px 8px;border-radius:4px;text-transform:uppercase}.glossary-entry__tag.tag-html{background:var(--accent-soft);color:var(--accent)}.glossary-entry__tag.tag-css{background:#4d8bf026;color:var(--accent-blue)}.glossary-entry__tag.tag-javascript{background:#d99b3a26;color:var(--warning)}.glossary-entry__tag.tag-general{background:var(--bg-600);color:var(--text-secondary)}.glossary-entry__def{margin:0;color:var(--text-secondary);line-height:1.65;font-size:14px}.glossary-entry__example{display:flex;flex-direction:column;gap:8px}.glossary-entry__example .code-block__pre{font-size:12px;padding:var(--sp-3) var(--sp-4)}.glossary-entry__note{margin:0;font-size:13px;color:var(--text-muted);line-height:1.55}.glossary__empty{padding:var(--sp-6);text-align:center;border:1px dashed var(--border-subtle);border-radius:var(--radius-md)}.glossary__foot{text-align:right;font-variant-numeric:tabular-nums}.ide-guide__section{margin-bottom:var(--sp-7);padding-bottom:var(--sp-6);border-bottom:1px solid var(--border-subtle)}.ide-guide__section:last-child{border-bottom:0}.ide-guide__section h2{font-size:18px;font-weight:600;margin:0 0 var(--sp-4)}.ide-guide__section h3{font-size:15px;font-weight:600;margin:var(--sp-5) 0 var(--sp-3)}.ide-guide__section p{line-height:1.7;color:var(--text-secondary);margin:0 0 var(--sp-4);max-width:70ch}.ide-guide__section ul,.ide-guide__section ol{margin:0 0 var(--sp-4);padding-left:22px;color:var(--text-secondary);line-height:1.75;max-width:70ch}.ide-guide__section li{margin:4px 0}.ide-guide__section code{background:var(--bg-700);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:.88em;color:var(--text-primary)}.ide-guide__section kbd{display:inline-block;padding:2px 6px;border-radius:4px;background:var(--bg-600);border:1px solid var(--border-strong);border-bottom-width:2px;font-family:var(--font-mono);font-size:12px;color:var(--text-primary)}.ide-guide__section .code-block__pre{margin-bottom:var(--sp-4);font-size:13px}.ide-guide__note{display:flex;align-items:flex-start;gap:10px;padding:var(--sp-4);background:var(--accent-soft);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;line-height:1.6}.ide-guide__note i{color:var(--accent);margin-top:3px;flex-shrink:0}.ide-guide__details{margin:var(--sp-4) 0;padding:var(--sp-4);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.ide-guide__details summary{cursor:pointer;font-weight:500;color:var(--text-primary);list-style:none;display:inline-flex;align-items:center;gap:8px}.ide-guide__details summary::marker{display:none}.ide-guide__details summary:before{content:"▸";color:var(--accent);transition:transform .15s}.ide-guide__details[open] summary:before{transform:rotate(90deg)}.ide-guide__details p{margin-top:var(--sp-3);margin-bottom:0}.ide-guide__figure{margin:var(--sp-4) 0;display:flex;flex-direction:column;gap:8px}.ide-guide__figure img{max-width:100%;border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.ide-guide__figure figcaption{font-size:12px;color:var(--text-muted)}.ide-guide__section--final{padding-top:var(--sp-4)}.ide-guide__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}.before-after{margin:var(--sp-5) 0;display:flex;flex-direction:column;gap:var(--sp-3)}.before-after__caption{font-size:13px;color:var(--text-secondary);line-height:1.55}.before-after__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}.before-after__pane{display:flex;flex-direction:column;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-800)}.before-after__label{margin:0;padding:8px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);background:var(--bg-700);border-bottom:1px solid var(--border-subtle)}.before-after__label--after{color:var(--accent)}.before-after__preview{width:100%;border:0;background:#fff;height:260px}.before-after__note{margin:0;font-size:13px;color:var(--text-muted);line-height:1.55}@media (max-width: 700px){.before-after__grid{grid-template-columns:1fr}}.auth-panel{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-4);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.auth-panel__title{margin:0;font-size:14px;font-weight:600;color:var(--text-primary)}.auth-panel__lead{margin:-4px 0 0;line-height:1.5}.auth-panel__form{display:flex;flex-direction:column;gap:var(--sp-3)}.auth-panel__field{display:flex;flex-direction:column;gap:6px}.auth-panel__label{font-size:12px;font-weight:500;color:var(--text-secondary)}.auth-panel__field input{width:100%;padding:8px 10px;background:var(--bg-700);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:inherit;font-size:13px;color:var(--text-primary);transition:border-color .15s,box-shadow .15s}.auth-panel__field input::placeholder{color:var(--text-muted)}.auth-panel__field input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px #2c6e8f26}.auth-panel__submit{justify-content:center;width:100%}.auth-panel__error{display:flex;align-items:flex-start;gap:6px;margin:0;padding:var(--sp-2) var(--sp-3);background:var(--danger-soft);border-radius:var(--radius-sm);color:var(--danger);line-height:1.5}.auth-panel__error i{margin-top:2px;flex-shrink:0}.auth-panel__toggle{background:none;border:0;padding:0;text-align:left;font-size:12px;color:var(--accent-link);cursor:pointer}.auth-panel__toggle:hover{color:var(--accent-link-hover);text-decoration:underline}.auth-panel__account{display:flex;align-items:center;gap:var(--sp-3)}.auth-panel__avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:600;font-size:14px;flex-shrink:0}.auth-panel__account-text{min-width:0;flex:1}.auth-panel__signed-label{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.auth-panel__email{margin:0;font-size:13px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-panel__hint{margin:0;display:flex;align-items:center;gap:6px}.auth-panel__hint i{color:var(--accent-blue)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--sp-6) var(--sp-4);background:var(--bg-900)}.auth-card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-6);background:var(--bg-800);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.auth-card__brand{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--text-primary);text-decoration:none;font-size:14px}.auth-card__mark{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:700}.auth-card__title{margin:0;font-size:22px;font-weight:600;letter-spacing:-.01em}.auth-card__subtitle{margin:-8px 0 0;color:var(--text-secondary);line-height:1.55}.auth-card__form{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-2)}.auth-card__field{display:flex;flex-direction:column;gap:6px}.auth-card__label{font-size:13px;font-weight:500;color:var(--text-secondary)}.auth-card__field input{width:100%;padding:10px 12px;background:var(--bg-900);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font:inherit;font-size:14px;color:var(--text-primary);transition:border-color .15s,box-shadow .15s}.auth-card__field input::placeholder{color:var(--text-muted)}.auth-card__field input:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 3px #2c6e8f26}.auth-card__error{display:flex;align-items:flex-start;gap:8px;margin:0;padding:10px 12px;background:var(--danger-soft);border-radius:var(--radius-sm);color:var(--danger);font-size:13px;line-height:1.5}.auth-card__error i{margin-top:2px;flex-shrink:0}.auth-card__submit{justify-content:center;width:100%;padding:11px 16px;font-size:14px}.auth-card__switch{margin:0;text-align:center;font-size:13px;color:var(--text-secondary)}.auth-card__switch-link{background:none;border:0;padding:0;color:var(--accent-link);font:inherit;font-weight:500;cursor:pointer}.auth-card__switch-link:hover{color:var(--accent-link-hover);text-decoration:underline}.auth-card__note{margin:0;display:flex;align-items:flex-start;gap:8px;padding-top:var(--sp-3);border-top:1px solid var(--border-subtle);line-height:1.55}.auth-card__note i{color:var(--text-muted);margin-top:2px;flex-shrink:0}@media (max-width: 480px){.auth-card{padding:var(--sp-5);border-radius:var(--radius-md)}.auth-card__title{font-size:19px}}.sidebar__signin-link{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;font-size:12px;color:var(--accent-link);text-decoration:none;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:background .15s,border-color .15s}.sidebar__signin-link:hover{background:var(--bg-700);border-color:var(--border-strong);color:var(--accent-link-hover)}