*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100vh;font-family:var(--font-sans);font-size:var(--fs-md);font-weight:400;line-height:1.6;color:var(--text);background-color:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}button{background:none;border:none;cursor:pointer}a{color:inherit;text-decoration:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;letter-spacing:-.012em}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}:root{--font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--fs-2xs: .6875rem;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-md: .9375rem;--fs-lg: 1rem;--fs-xl: 1.1875rem;--fs-2xl: 1.375rem;--fs-3xl: 1.75rem;--fs-4xl: 2.125rem;--fs-5xl: 2.5rem;--sp-1: .25rem;--sp-2: .5rem;--sp-3: .75rem;--sp-4: 1rem;--sp-5: 1.25rem;--sp-6: 1.5rem;--sp-8: 2rem;--sp-10: 2.5rem;--sp-12: 3rem;--sp-16: 4rem;--sp-20: 5rem;--r-sm: .375rem;--r-md: .5rem;--r-lg: .75rem;--r-xl: 1rem;--r-2xl: 1.25rem;--r-full: 9999px;--bg: #f7f8fa;--surface: #ffffff;--surface-2: #f1f3f6;--surface-3: #e6e9ee;--surface-inset: #f7f8fa;--border: #e3e7ec;--border-strong: #cdd4dc;--text: #101828;--text-muted: #4a5567;--text-subtle: #6b7686;--text-faint: #98a2b3;--accent: #059669;--accent-hover: #047857;--accent-contrast: #ffffff;--accent-soft-bg: #ecfdf5;--accent-soft-text: #047857;--accent-soft-border: #a7f3d0;--grad-from: #059669;--grad-to: #2563eb;--grad-from-hover: #047857;--grad-to-hover: #1d4ed8;--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);--shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .08);--shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .12);--shadow-xl: 0 20px 40px -10px rgba(16, 24, 40, .16);--t-fast: .15s ease;--t-base: .2s ease;--t-slow: .3s ease;--header-h: 4rem;--sidebar-w: 18rem;--container: 80rem;--page-pad: 1.25rem;color-scheme:light}:root.dark{--bg: #000000;--surface: #0d0d0d;--surface-2: #161616;--surface-3: #212121;--surface-inset: #080808;--border: #262626;--border-strong: #383838;--text: #f5f5f5;--text-muted: #a8a8a8;--text-subtle: #8c8c8c;--text-faint: #6b6b6b;--accent: #10b981;--accent-hover: #34d399;--accent-contrast: #04120c;--accent-soft-bg: rgba(16, 185, 129, .13);--accent-soft-text: #6ee7b7;--accent-soft-border: rgba(16, 185, 129, .32);--grad-from: #10b981;--grad-to: #3b82f6;--grad-from-hover: #34d399;--grad-to-hover: #60a5fa;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .7);--shadow-md: 0 4px 10px -2px rgba(0, 0, 0, .75);--shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, .85);--shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, .9);color-scheme:dark}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--surface-2)}::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--grad-from),var(--grad-to));border-radius:var(--r-full)}::-webkit-scrollbar-thumb:hover{background:linear-gradient(to bottom,var(--grad-from-hover),var(--grad-to-hover))}.scroll-slim::-webkit-scrollbar{width:6px;height:6px}.scroll-slim::-webkit-scrollbar-track{background:transparent}.scroll-slim::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--r-full)}@keyframes fade-in-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse-fade{50%{opacity:.45}}.animate-fade-in-up{animation:fade-in-up .8s ease-out forwards}.animate-fade-in{animation:fade-in 1s ease-out forwards}.animate-spin{animation:spin 1s linear infinite}.app-shell{display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg)}.container,.header-inner,.workspace{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--page-pad)}.container-narrow{width:100%;max-width:56rem;margin-inline:auto}.page-main{flex:1;padding-bottom:var(--sp-12)}.page-main>.section:last-child,.page-main>.container>.section:last-child,.page-main>.workspace>.section:last-child{padding-bottom:0}.workspace{display:flex;flex:1;background-color:var(--bg)}.section{padding-block:var(--sp-10)}.section-title{font-size:var(--fs-2xl);letter-spacing:-.02em;color:var(--text);margin-bottom:var(--sp-2)}.section-sub{max-width:44rem;color:var(--text-muted)}.stack-sm>*+*{margin-top:var(--sp-2)}.stack>*+*{margin-top:var(--sp-4)}.stack-lg>*+*{margin-top:var(--sp-6)}@media (min-width: 640px){:root{--page-pad: 1.5rem}}@media (min-width: 1024px){:root{--page-pad: 2rem}.section{padding-block:var(--sp-12)}}.text-muted{color:var(--text-muted)}.text-subtle{color:var(--text-subtle)}.text-sm{font-size:var(--fs-sm)}.text-xs{font-size:var(--fs-xs)}.mono{font-family:var(--font-mono)}.gradient-text{background-image:linear-gradient(to right,var(--grad-from),var(--grad-to));-webkit-background-clip:text;background-clip:text;color:transparent}.clamp-1{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.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}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:.5rem 1rem;border-radius:var(--r-md);border:1px solid transparent;font-size:var(--fs-sm);font-weight:600;white-space:nowrap;transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base),box-shadow var(--t-base),transform var(--t-base)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-solid{background-color:var(--accent);color:var(--accent-contrast)}.btn-solid:hover:not(:disabled){background-color:var(--accent-hover)}.btn-outline{background-color:var(--surface);border-color:var(--border-strong);color:var(--text-muted)}.btn-outline:hover:not(:disabled){background-color:var(--surface-2);color:var(--text)}.btn-ghost{background-color:var(--surface-2);color:var(--text-muted)}.btn-ghost:hover:not(:disabled){background-color:var(--surface-3);color:var(--text)}.btn-gradient{background-image:linear-gradient(to right,var(--grad-from),var(--grad-to));color:#fff;box-shadow:var(--shadow-md)}.btn-gradient:hover:not(:disabled){background-image:linear-gradient(to right,var(--grad-from-hover),var(--grad-to-hover));box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-lg{padding:.875rem 1.75rem;font-size:var(--fs-md);border-radius:var(--r-lg)}.btn-block{width:100%}.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-2);border-radius:var(--r-md);background-color:var(--surface-2);color:var(--text-muted);border:1px solid transparent;transition:background-color var(--t-base),color var(--t-base)}.icon-btn:hover{background-color:var(--surface-3);color:var(--text)}.icon-btn-bordered{background-color:var(--surface);border-color:var(--border-strong)}.icon-btn-bordered:hover{background-color:var(--surface-2)}.field-label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-bottom:var(--sp-2)}.input,.select{width:100%;padding:.5rem .75rem;border-radius:var(--r-md);border:1px solid var(--border-strong);background-color:var(--surface);color:var(--text);font-size:var(--fs-sm);transition:border-color var(--t-base),box-shadow var(--t-base)}.input::placeholder{color:var(--text-faint)}.input:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft-bg)}.input-search{padding-left:2.25rem}.search-wrap{position:relative;display:flex;align-items:center}.search-wrap>.search-icon{position:absolute;left:.75rem;color:var(--text-faint);pointer-events:none}.search-wrap>.search-clear{position:absolute;right:.75rem;color:var(--text-faint);line-height:1}.search-wrap>.search-clear:hover{color:var(--text)}.card{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:border-color var(--t-slow),box-shadow var(--t-slow),transform var(--t-slow)}.card-pad{padding:var(--sp-5)}.card-hover:hover{border-color:var(--accent-soft-border);box-shadow:var(--shadow-lg)}.card-lift:hover{transform:translateY(-4px)}.panel{background-color:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5)}.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:.125rem .5rem;border-radius:var(--r-full);background-color:var(--surface-2);color:var(--text-muted);font-size:var(--fs-xs);font-weight:600}.badge-accent{background-color:var(--accent-soft-bg);color:var(--accent-soft-text)}.pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.5rem 1rem;border-radius:var(--r-full);background-color:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}.divider{border:0;border-top:1px solid var(--border)}.spinner{border-radius:var(--r-full);border:2px solid var(--border-strong);border-top-color:var(--accent);animation:spin 1s linear infinite}.spinner-sm{width:1rem;height:1rem}.spinner-md{width:2rem;height:2rem}.spinner-lg{width:3rem;height:3rem}.spinner-center{display:flex;align-items:center;justify-content:center;min-height:100vh}.skeleton{animation:pulse-fade 2s cubic-bezier(.4,0,.6,1) infinite}.skeleton>*+*{margin-top:var(--sp-4)}.skeleton-bar{background-color:var(--surface-3);border-radius:var(--r-md);height:1rem}.skeleton-bar-title{height:1.5rem;width:75%}.skeleton-bar-full{width:100%}.skeleton-bar-partial{width:83%}.skeleton-block{height:12rem;background-color:var(--surface-3);border-radius:var(--r-md)}.empty-state{text-align:center;padding-block:var(--sp-12);color:var(--text-muted)}.empty-state .empty-icon{color:var(--text-faint);margin:0 auto var(--sp-4)}.empty-state h3{font-size:var(--fs-lg);color:var(--text);margin-bottom:var(--sp-2)}.empty-state p{font-size:var(--fs-sm);max-width:28rem;margin-inline:auto}.progress-track{width:100%;height:.375rem;background-color:var(--surface-3);border-radius:var(--r-full);overflow:hidden}.progress-fill{height:100%;background-color:var(--accent);border-radius:var(--r-full);transition:width var(--t-slow)}.lang-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--r-md);border:1px solid var(--li-border, var(--border));background-color:var(--li-bg, var(--surface-2));color:var(--li-text, var(--text-muted));font-weight:700;line-height:1}.lang-icon-sm{width:1.5rem;height:1.5rem;font-size:var(--fs-xs)}.lang-icon-md{width:2rem;height:2rem;font-size:var(--fs-sm)}.lang-icon-lg{width:2.5rem;height:2.5rem;font-size:var(--fs-md)}.lang-icon-xl{width:3rem;height:3rem;font-size:var(--fs-lg)}.lang-icon-yellow{--li-bg: #fef9c3;--li-text: #854d0e;--li-border: #fde68a}.lang-icon-blue{--li-bg: #dbeafe;--li-text: #1e40af;--li-border: #bfdbfe}.lang-icon-orange{--li-bg: #ffedd5;--li-text: #9a3412;--li-border: #fed7aa}.lang-icon-purple{--li-bg: #f3e8ff;--li-text: #6b21a8;--li-border: #e9d5ff}.lang-icon-indigo{--li-bg: #e0e7ff;--li-text: #3730a3;--li-border: #c7d2fe}.lang-icon-cyan{--li-bg: #cffafe;--li-text: #155e75;--li-border: #a5f3fc}.lang-icon-pink{--li-bg: #fce7f3;--li-text: #9d174d;--li-border: #fbcfe8}.lang-icon-red{--li-bg: #fee2e2;--li-text: #991b1b;--li-border: #fecaca}.lang-icon-green,.lang-icon-emerald{--li-bg: #d1fae5;--li-text: #065f46;--li-border: #a7f3d0}.lang-icon-gray{--li-bg: var(--surface-2);--li-text: var(--text-muted);--li-border: var(--border)}:root.dark .lang-icon-yellow{--li-bg: rgba(234, 179, 8, .14);--li-text: #fde047;--li-border: rgba(234, 179, 8, .3)}:root.dark .lang-icon-blue{--li-bg: rgba(59, 130, 246, .14);--li-text: #93c5fd;--li-border: rgba(59, 130, 246, .3)}:root.dark .lang-icon-orange{--li-bg: rgba(249, 115, 22, .14);--li-text: #fdba74;--li-border: rgba(249, 115, 22, .3)}:root.dark .lang-icon-purple{--li-bg: rgba(168, 85, 247, .14);--li-text: #d8b4fe;--li-border: rgba(168, 85, 247, .3)}:root.dark .lang-icon-indigo{--li-bg: rgba(99, 102, 241, .14);--li-text: #a5b4fc;--li-border: rgba(99, 102, 241, .3)}:root.dark .lang-icon-cyan{--li-bg: rgba(6, 182, 212, .14);--li-text: #67e8f9;--li-border: rgba(6, 182, 212, .3)}:root.dark .lang-icon-pink{--li-bg: rgba(236, 72, 153, .14);--li-text: #f9a8d4;--li-border: rgba(236, 72, 153, .3)}:root.dark .lang-icon-red{--li-bg: rgba(239, 68, 68, .14);--li-text: #fca5a5;--li-border: rgba(239, 68, 68, .3)}:root.dark .lang-icon-green,:root.dark .lang-icon-emerald{--li-bg: rgba(16, 185, 129, .14);--li-text: #6ee7b7;--li-border: rgba(16, 185, 129, .3)}.cat-icon-web{color:#2563eb}.cat-icon-mobile{color:#059669}.cat-icon-enterprise{color:#7c3aed}.cat-icon-system{color:var(--text-muted)}.cat-icon-backend{color:#ea580c}.cat-icon-database{color:#4f46e5}.cat-icon-general,.cat-icon-other{color:var(--text-muted)}:root.dark .cat-icon-web{color:#60a5fa}:root.dark .cat-icon-mobile{color:#34d399}:root.dark .cat-icon-enterprise{color:#c084fc}:root.dark .cat-icon-backend{color:#fb923c}:root.dark .cat-icon-database{color:#818cf8}.section-tight{padding-block:var(--sp-8)}.section-alt{background:var(--surface-2);border-block:1px solid var(--border)}.section-alt-inset{padding:var(--sp-8);margin-block:var(--sp-8);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-2xl)}.page-head{padding-block:var(--sp-10) var(--sp-4)}.page-title{font-size:var(--fs-3xl);letter-spacing:-.02em}.eyebrow{margin-bottom:var(--sp-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}.view-all{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--accent);white-space:nowrap}.view-all:hover{color:var(--accent-hover)}.result-count{margin-bottom:var(--sp-5);font-size:var(--fs-sm);color:var(--text-subtle)}.skip-link{position:absolute;left:var(--sp-4);top:-3rem;z-index:200;padding:var(--sp-2) var(--sp-4);background:var(--accent);color:var(--accent-contrast);border-radius:var(--r-md);font-weight:600;transition:top var(--t-fast)}.skip-link:focus{top:var(--sp-3)}.link-accent{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:600;color:var(--accent);background:none;border:none;padding:0;cursor:pointer}.link-accent:hover{color:var(--accent-hover);text-decoration:underline}.link-accent:disabled{color:var(--text-faint);cursor:default;text-decoration:none}.overlay-dim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fade-in var(--t-fast)}.spin{animation:spin 1s linear infinite}.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:.15rem var(--sp-2);border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);font-size:var(--fs-xs);font-weight:700;line-height:1.5;white-space:nowrap}.badge-neutral{background:var(--accent-soft-bg);border-color:var(--accent-soft-border);color:var(--accent-soft-text)}.badge-muted{background:var(--surface-2);border-color:var(--border);color:var(--text-subtle)}.badge-success{background:color-mix(in srgb,#10b981 14%,transparent);border-color:color-mix(in srgb,#10b981 34%,transparent);color:#047857}.badge-warning{background:color-mix(in srgb,#f59e0b 16%,transparent);border-color:color-mix(in srgb,#f59e0b 36%,transparent);color:#b45309}.badge-danger{background:color-mix(in srgb,#ef4444 14%,transparent);border-color:color-mix(in srgb,#ef4444 34%,transparent);color:#b91c1c}:root.dark .badge-success{color:#6ee7b7}:root.dark .badge-warning{color:#fcd34d}:root.dark .badge-danger{color:#fca5a5}.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);gap:var(--sp-2)}.btn-success{background:color-mix(in srgb,#10b981 16%,transparent);border:1px solid color-mix(in srgb,#10b981 40%,transparent);color:var(--accent-soft-text)}.btn-success:hover{background:color-mix(in srgb,#10b981 24%,transparent)}.btn-danger{background:#dc2626;border:1px solid #dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.chip{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-full);background:var(--surface);color:var(--text-muted);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all var(--t-fast)}.chip:hover{border-color:var(--accent);color:var(--text)}.chip-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.chip-static{cursor:default;background:var(--surface-2)}.chip-static:hover{border-color:var(--border);color:var(--text-muted)}.field{display:block;margin-bottom:var(--sp-4)}.field-label{display:block;margin-bottom:var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}.textarea{width:100%;resize:vertical;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6}.kbd{display:inline-flex;align-items:center;padding:.1rem .4rem;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:var(--r-sm);background:var(--surface-2);color:var(--text-subtle);font-family:var(--font-mono);font-size:var(--fs-2xs);font-weight:600;line-height:1.5}.progress-wrap{display:flex;align-items:center;gap:var(--sp-3);width:100%}.progress{flex:1;height:.5rem;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}.progress-sm{height:.3125rem}.progress-lg{height:.75rem}.progress-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--grad-from),var(--grad-to));transition:width var(--t-slow)}.progress-value{font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);min-width:2.5rem;text-align:right}.ring{position:relative;display:grid;place-items:center}.ring svg{transform:rotate(0)}.ring-track{stroke:var(--surface-3)}.ring-fill{stroke:var(--accent);transition:stroke-dashoffset var(--t-slow)}.ring-center{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1.2}.ring-value{font-size:var(--fs-2xl);font-weight:800}.ring-label{font-size:var(--fs-xs);color:var(--text-subtle)}.stat{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.stat-glyph{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-md);background:var(--accent-soft-bg);color:var(--accent-soft-text);flex-shrink:0}.stat-value{font-size:var(--fs-xl);font-weight:800;line-height:1.2}.stat-caption{font-size:var(--fs-xs);color:var(--text-subtle)}.tick-list{display:flex;flex-direction:column;gap:var(--sp-2)}.tick-list li{display:flex;align-items:flex-start;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-muted)}.tick-list svg{flex-shrink:0;margin-top:.2rem;color:var(--accent)}.tick-list-lg li{font-size:var(--fs-md);color:var(--text)}.bullet-list{padding-left:var(--sp-5);list-style:disc}.bullet-list li{margin-bottom:var(--sp-2);color:var(--text-muted)}.detail-list{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);font-size:var(--fs-sm)}.detail-list dt{font-weight:700;color:var(--text-subtle)}.detail-list dd{color:var(--text-muted)}.prose h2{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-lg)}.prose p{margin-bottom:var(--sp-3);color:var(--text-muted)}.prose code{padding:.1rem .35rem;border-radius:var(--r-sm);background:var(--surface-2);font-family:var(--font-mono);font-size:.875em}.callout{display:flex;gap:var(--sp-3);padding:var(--sp-4);margin-block:var(--sp-4);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-lg);background:var(--surface-2)}.callout-icon{flex-shrink:0;margin-top:.15rem}.callout-title{margin-bottom:var(--sp-1);font-weight:700}.callout-text{font-size:var(--fs-sm);color:var(--text-muted)}.callout-note{border-left-color:#3b82f6}.callout-note .callout-icon{color:#3b82f6}.callout-tip{border-left-color:var(--accent)}.callout-tip .callout-icon{color:var(--accent)}.callout-warning{border-left-color:#f59e0b}.callout-warning .callout-icon{color:#f59e0b}.callout-success{border-left-color:#10b981}.callout-success .callout-icon{color:#10b981}.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg)}.compare-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:44rem}.compare-table th,.compare-table td{padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}.compare-table thead th{background:var(--surface-2);font-weight:700;white-space:nowrap}.compare-table tbody th{font-weight:700;color:var(--text);width:12rem}.compare-table td{color:var(--text-muted)}.compare-table tbody tr:last-child th,.compare-table tbody tr:last-child td{border-bottom:none}.compare-th{display:inline-flex;align-items:center;gap:var(--sp-2)}.lang-icon-hero{width:4.5rem;height:4.5rem;border-radius:var(--r-xl);font-size:var(--fs-xl)}.tabs{display:flex;gap:var(--sp-1);margin-block:var(--sp-6) var(--sp-5);border-bottom:1px solid var(--border);overflow-x:auto}.tab{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);border-bottom:2px solid transparent;color:var(--text-subtle);font-weight:600;white-space:nowrap;transition:all var(--t-fast)}.tab:hover{color:var(--text)}.tab-active{border-bottom-color:var(--accent);color:var(--text)}.tab-count{padding:0 var(--sp-2);border-radius:var(--r-full);background:var(--surface-3);font-size:var(--fs-xs)}.tab-panel{animation:fade-in var(--t-base)}.site-header{position:sticky;top:0;z-index:80;height:var(--header-h);background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;gap:var(--sp-4);height:100%}.header-left{display:flex;align-items:center;gap:var(--sp-2)}.brand{display:flex;align-items:center;gap:var(--sp-3)}.brand-mark{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-md);background:linear-gradient(135deg,var(--grad-from),var(--grad-to));color:#fff;flex-shrink:0}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-name{font-weight:800;letter-spacing:-.02em}.brand-tag{font-size:var(--fs-2xs);color:var(--text-subtle)}.header-nav{display:none;align-items:center;gap:var(--sp-1);margin-inline:auto}.header-nav-link{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);transition:all var(--t-fast)}.header-nav-link:hover{background:var(--surface-2);color:var(--text)}.header-nav-link-active{color:var(--accent);background:var(--accent-soft-bg)}.header-right{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}.search-trigger{display:none;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);color:var(--text-subtle);font-size:var(--fs-sm);transition:all var(--t-fast)}.search-trigger:hover{border-color:var(--accent);color:var(--text)}.search-trigger-text{min-width:6rem;text-align:left}.header-progress{display:none;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:700}.header-xp,.header-streak{display:inline-flex;align-items:center;gap:var(--sp-1)}.header-xp{color:var(--accent)}.header-streak{color:#f97316}.avatar-btn{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:var(--r-full);border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);transition:all var(--t-fast)}.avatar-btn:hover{border-color:var(--accent);color:var(--accent)}.header-drawer{position:fixed;inset:var(--header-h) 0 auto 0;z-index:70;display:flex;flex-direction:column;padding:var(--sp-3);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-lg);animation:fade-in-up var(--t-base)}.header-drawer-link{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-weight:600;color:var(--text-muted)}.header-drawer-link:hover{background:var(--surface-2);color:var(--text)}.header-drawer-link-active{background:var(--accent-soft-bg);color:var(--accent)}@media (min-width: 640px){.search-trigger{display:inline-flex}}@media (min-width: 900px){.header-progress{display:inline-flex}}@media (min-width: 1180px){.header-nav{display:flex}.menu-toggle{display:none}}.palette-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;justify-content:center;padding:var(--sp-4);padding-top:10vh;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fade-in var(--t-fast)}.palette{display:flex;flex-direction:column;width:min(40rem,100%);max-height:70vh;border:1px solid var(--border-strong);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-xl);overflow:hidden;animation:fade-in-up var(--t-base)}.palette-input-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-bottom:1px solid var(--border)}.palette-input-icon{color:var(--text-subtle);flex-shrink:0}.palette-input{flex:1;border:none;background:none;outline:none;font-size:var(--fs-lg)}.palette-input::placeholder{color:var(--text-faint)}.palette-loading{color:var(--text-subtle)}.palette-results{flex:1;overflow-y:auto;padding:var(--sp-2)}.palette-group{padding:var(--sp-3) var(--sp-3) var(--sp-1);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}.palette-item{display:flex;align-items:center;gap:var(--sp-3);width:100%;padding:var(--sp-3);border-radius:var(--r-md);text-align:left;color:var(--text-muted)}.palette-item-active{background:var(--accent-soft-bg);color:var(--text)}.palette-item-icon{flex-shrink:0;color:var(--text-subtle)}.palette-item-active .palette-item-icon{color:var(--accent)}.palette-item-title{flex:1;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.palette-item-sub{font-size:var(--fs-xs);color:var(--text-subtle);white-space:nowrap}.palette-item-enter{color:var(--accent);flex-shrink:0}.palette-empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--text-subtle)}.palette-foot{display:flex;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);background:var(--surface-2);font-size:var(--fs-xs);color:var(--text-subtle)}.palette-foot span{display:inline-flex;align-items:center;gap:var(--sp-1)}.workspace{display:flex;gap:var(--sp-8);min-height:calc(100vh - var(--header-h))}.sidebar{position:fixed;top:var(--header-h);left:0;z-index:70;width:var(--sidebar-w);height:calc(100vh - var(--header-h));overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);transform:translate(-100%);transition:transform var(--t-base)}body:has(.sidebar-open){overflow:hidden}.sidebar-open{transform:translate(0);box-shadow:var(--shadow-xl)}.sidebar-close{display:flex;justify-content:flex-end;padding:var(--sp-3) var(--sp-3) 0}.sidebar-scroll{padding:var(--sp-3) var(--sp-3) var(--sp-8)}.sidebar-group{margin-bottom:var(--sp-4)}.sidebar-group-head{display:flex;align-items:center;gap:var(--sp-2);width:100%;padding:var(--sp-2) var(--sp-3);color:var(--text-subtle);text-align:left}.sidebar-group-toggle:hover{color:var(--text)}.sidebar-group-title{flex:1;font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase}.sidebar-nav{display:flex;flex-direction:column;gap:1px}.nav-link{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--text-muted);transition:background var(--t-fast),color var(--t-fast)}.nav-link:hover{background:var(--surface-2);color:var(--text)}.nav-link-active{background:var(--accent-soft-bg);color:var(--accent-soft-text);font-weight:600}.nav-link-label{flex:1;min-width:0}.nav-link-time{font-size:var(--fs-xs);color:var(--text-faint);flex-shrink:0}.nav-link-chevron{color:var(--text-faint);flex-shrink:0}.lesson-tick{display:grid;place-items:center;width:1.375rem;height:1.375rem;flex-shrink:0;border:1px solid var(--border-strong);border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:700;color:var(--text-subtle)}.lesson-tick-done{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.sidebar-foot{padding:var(--sp-4) var(--sp-3);border-top:1px solid var(--border);margin-top:var(--sp-4)}@media (min-width: 1024px){.sidebar{position:sticky;align-self:flex-start;flex-shrink:0;transform:none;box-shadow:none}.sidebar-close{display:none}}.workspace-body{flex:1;min-width:0}.site-footer{margin-top:auto;padding-block:var(--sp-12) var(--sp-6);background:var(--surface-2);border-top:1px solid var(--border)}.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}.footer-brand .brand{margin-bottom:var(--sp-4)}.footer-blurb{max-width:24rem;margin-bottom:var(--sp-4);font-size:var(--fs-sm);color:var(--text-subtle)}.footer-social{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--border);border-radius:var(--r-md);color:var(--text-muted)}.footer-social:hover{border-color:var(--accent);color:var(--accent)}.footer-col-title{margin-bottom:var(--sp-3);font-size:var(--fs-sm);font-weight:700}.footer-col li{margin-bottom:var(--sp-2)}.footer-col a{font-size:var(--fs-sm);color:var(--text-subtle)}.footer-col a:hover{color:var(--accent)}.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--border);font-size:var(--fs-sm);color:var(--text-subtle)}.footer-made{display:inline-flex;align-items:center;gap:var(--sp-1)}.footer-heart{color:#ef4444}@media (min-width: 640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.footer-grid{grid-template-columns:2fr repeat(4,1fr)}}.hero{padding-block:var(--sp-12) var(--sp-10)}.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-items:center}.hero-copy{animation:fade-in-up var(--t-slow)}.hero-title{margin-block:var(--sp-5) var(--sp-4);font-size:clamp(1.875rem,4vw,var(--fs-5xl));letter-spacing:-.03em;line-height:1.12}.hero-sub{max-width:36rem;margin-bottom:var(--sp-6);font-size:var(--fs-lg);color:var(--text-muted)}.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-4)}.hero-resume{margin-bottom:var(--sp-6);font-size:var(--fs-sm);color:var(--text-subtle)}.hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp-5);padding-top:var(--sp-6);border-top:1px solid var(--border)}.hero-stats li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-subtle)}.hero-stats svg{color:var(--accent)}.hero-stats strong{color:var(--text);font-size:var(--fs-md)}.hero-editor{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden}.hero-editor-bar{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-bottom:1px solid var(--border)}.hero-dot{width:.65rem;height:.65rem;border-radius:var(--r-full)}.hero-dot-red{background:#ef4444}.hero-dot-amber{background:#f59e0b}.hero-dot-green{background:#10b981}.hero-editor-file{margin-left:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-subtle)}.hero-editor-lang{margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--accent)}.hero-editor-code{padding:var(--sp-5);min-height:11rem;font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7;color:var(--text);overflow-x:auto;animation:fade-in var(--t-slow)}.hero-terminal{padding:var(--sp-4) var(--sp-5);background:var(--surface-inset);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:var(--fs-xs);animation:fade-in var(--t-slow)}.hero-terminal-head{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em}.hero-terminal-line{color:var(--accent);line-height:1.8}.hero-editor-tabs{display:flex;justify-content:center;gap:var(--sp-2);padding:var(--sp-3);border-top:1px solid var(--border)}.hero-tab-dot{width:.4rem;height:.4rem;border-radius:var(--r-full);background:var(--surface-3);transition:background var(--t-base)}.hero-tab-dot-on{background:var(--accent);width:1.2rem}@media (min-width: 1024px){.hero-grid{grid-template-columns:1.1fr 1fr}}.resume-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-4)}.resume-card{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.resume-card:hover{border-color:var(--accent);transform:translateY(-2px)}.resume-card-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-3)}.resume-card-head h3{font-size:var(--fs-md)}.resume-percent{font-size:var(--fs-sm);font-weight:700;color:var(--accent)}.resume-meta{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-subtle)}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-5)}.feature-card{padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface)}.feature-icon{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:var(--sp-4);border-radius:var(--r-lg);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.feature-title{margin-bottom:var(--sp-2);font-size:var(--fs-lg)}.feature-body{font-size:var(--fs-sm);color:var(--text-muted)}.split-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-10)}@media (min-width: 900px){.split-grid{grid-template-columns:1fr 1fr}}.mini-list{display:flex;flex-direction:column;gap:var(--sp-2)}.mini-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.mini-card:hover{border-color:var(--accent);transform:translate(3px)}.mini-card>div{flex:1;min-width:0}.mini-card h3{font-size:var(--fs-sm);margin-bottom:.1rem}.mini-card p{font-size:var(--fs-xs);color:var(--text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-icon{display:grid;place-items:center;width:2.25rem;height:2.25rem;flex-shrink:0;border-radius:var(--r-md);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.mini-meta{font-size:var(--fs-xs);color:var(--text-subtle);white-space:nowrap;flex-shrink:0}.cta-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-8);border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--surface)}.cta-panel h2{margin-bottom:var(--sp-2);font-size:var(--fs-2xl)}.cta-panel p{max-width:34rem;color:var(--text-muted)}.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:var(--sp-5)}.lang-card{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-base)}.lang-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.lang-card-link{display:flex;flex-direction:column;gap:var(--sp-4);height:100%;padding:var(--sp-5)}.lang-card-head{display:flex;align-items:flex-start;gap:var(--sp-3)}.lang-card-heading{flex:1;min-width:0}.lang-card-title{font-size:var(--fs-lg)}.lang-card-tagline{font-size:var(--fs-xs);color:var(--text-subtle)}.lang-card-chevron{color:var(--text-faint);transition:transform var(--t-fast),color var(--t-fast)}.lang-card:hover .lang-card-chevron{color:var(--accent);transform:translate(3px)}.lang-card-body{font-size:var(--fs-sm);color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.lang-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.lang-card-meta li{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-subtle)}.lang-card-progress{display:flex;align-items:center;gap:var(--sp-3)}.lang-card-percent{font-size:var(--fs-xs);font-weight:700;color:var(--accent)}.lang-card-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border)}.lang-card-cta{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:700;color:var(--accent)}.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-4);margin-bottom:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.filter-bar-simple{justify-content:space-between}.filter-search{flex:1;min-width:14rem}.filter-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}.filter-field{display:block}.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);padding-block:var(--sp-5);font-size:var(--fs-sm);color:var(--text-subtle)}.breadcrumb-item,.breadcrumb a{display:inline-flex;align-items:center;gap:var(--sp-1)}.breadcrumb a:hover{color:var(--accent)}.crumb-sep{color:var(--text-faint);margin-inline:var(--sp-1)}.crumb-current{display:inline-flex;align-items:center;gap:var(--sp-1);color:var(--text);font-weight:600}.lang-hero{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-bottom:var(--sp-8);border-bottom:1px solid var(--border)}.lang-hero-main{display:flex;gap:var(--sp-5);align-items:flex-start}.lang-hero-copy{flex:1;min-width:0}.lang-hero-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}.lang-hero-tagline{margin-block:var(--sp-2) var(--sp-4);font-size:var(--fs-lg);color:var(--accent);font-weight:600}.lang-hero-summary{max-width:44rem;margin-bottom:var(--sp-5);color:var(--text-muted)}.lang-hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.stat-panel{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface)}.stat-panel-title{display:flex;align-items:center;gap:var(--sp-2);margin-block:var(--sp-5) var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--text-subtle)}.stat-panel-title:first-child{margin-top:0}.stat-panel-row{display:flex;align-items:center;justify-content:space-between;padding-block:var(--sp-2);font-size:var(--fs-sm);border-bottom:1px solid var(--border)}.stat-panel-row span{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-subtle)}.stat-panel-progress{margin-top:var(--sp-5)}.stat-panel-progress-head{display:flex;justify-content:space-between;margin-bottom:var(--sp-2);font-size:var(--fs-sm)}.stat-panel-note{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-subtle)}@media (min-width: 1024px){.lang-hero{grid-template-columns:1fr 20rem}}.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-4)}.info-card{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.info-card h3{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em}.path{display:flex;flex-direction:column}.path-section{display:flex;gap:var(--sp-4)}.path-marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}.path-number{display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--border-strong);border-radius:var(--r-full);background:var(--surface);font-weight:700;color:var(--text-subtle)}.path-number-done{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.path-line{flex:1;width:2px;margin-block:var(--sp-2);background:var(--border)}.path-section:last-child .path-line{display:none}.path-body{flex:1;min-width:0;padding-bottom:var(--sp-8)}.path-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}.path-title{font-size:var(--fs-lg)}.path-meta{margin-top:.15rem;font-size:var(--fs-xs);color:var(--text-subtle)}.lesson-list{display:flex;flex-direction:column;gap:1px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--border)}.lesson-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface);transition:background var(--t-fast)}.lesson-row:hover{background:var(--surface-2)}.lesson-row-done .lesson-row-title{color:var(--text-subtle)}.lesson-row-title{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lesson-row-meta{display:flex;gap:var(--sp-3);flex-shrink:0}.lesson-row-meta span{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-subtle)}.lesson-row-arrow{color:var(--text-faint);flex-shrink:0}.lesson-row:hover .lesson-row-arrow{color:var(--accent)}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--sp-6)}.related-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em}.inline-code{padding:.1em .35em;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface-2);font-family:var(--font-mono);font-size:.875em;color:var(--text);word-break:break-word}.lesson-block{scroll-margin-top:calc(var(--header-h) + var(--sp-4));margin-top:var(--sp-8);padding:var(--sp-5) var(--sp-6);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface)}.lesson-block-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-lg);color:var(--text)}.icon-objective{color:var(--accent)}.icon-pitfall{color:#d97706}.icon-key{color:#2563eb}.icon-practice{color:#7c3aed}:root.dark .icon-pitfall{color:#fbbf24}:root.dark .icon-key{color:#60a5fa}:root.dark .icon-practice{color:#a78bfa}.pitfall-list{display:grid;gap:var(--sp-4)}.pitfall{padding-left:var(--sp-4);border-left:2px solid var(--border-strong)}.pitfall-title{margin-bottom:var(--sp-1);font-size:var(--fs-md);color:var(--text)}.pitfall-body{font-size:var(--fs-md);color:var(--text-muted)}.lesson-block-accent{background:var(--surface-2)}.key-list{display:grid;gap:var(--sp-2)}.key-list li{position:relative;padding-left:var(--sp-5);color:var(--text-muted)}.key-list li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:var(--r-full);background:var(--accent)}.lesson-block-practice{background:var(--surface-2)}.practice-task{margin-bottom:var(--sp-3);color:var(--text-muted)}.practice-hint{margin-bottom:var(--sp-4);font-size:var(--fs-md)}.practice-hint>summary{cursor:pointer;color:var(--accent);font-weight:600}.practice-hint>p{margin-top:var(--sp-2);padding:var(--sp-3);border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);color:var(--text-muted)}.lesson-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-8);padding-bottom:var(--sp-12)}.lesson-main{min-width:0;max-width:52rem}.lesson-head{padding-bottom:var(--sp-6);border-bottom:1px solid var(--border);margin-bottom:var(--sp-8);scroll-margin-top:calc(var(--header-h) + var(--sp-4))}.lesson-kicker{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3)}.lesson-section{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}.lesson-title{font-size:var(--fs-3xl);letter-spacing:-.025em}.lesson-desc{margin-top:var(--sp-3);font-size:var(--fs-lg);color:var(--text-muted)}.lesson-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-4)}.lesson-meta span{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--text-subtle)}.lesson-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-5)}.lesson-body{display:flex;flex-direction:column;gap:var(--sp-10)}.example{scroll-margin-top:calc(var(--header-h) + var(--sp-4))}.example-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}.example-badge{display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--r-md);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.example-title{flex:1;font-size:var(--fs-xl)}.example-meta{font-size:var(--fs-xs);color:var(--text-subtle)}.example-body{display:flex;flex-direction:column;gap:var(--sp-4)}.subcard{padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.subcard-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--text-subtle);text-transform:uppercase;letter-spacing:.04em}.icon-output{color:#f59e0b}.icon-explain{color:#3b82f6}.output-block{padding:var(--sp-4);border-radius:var(--r-md);background:var(--surface-inset);border:1px solid var(--border);font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.7;color:var(--accent);white-space:pre-wrap;overflow-x:auto}.explain-text{color:var(--text-muted)}.lesson-complete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-6);margin-top:var(--sp-10);border:1px solid var(--accent-soft-border);border-radius:var(--r-xl);background:var(--accent-soft-bg);scroll-margin-top:calc(var(--header-h) + var(--sp-4))}.lesson-complete h2{font-size:var(--fs-lg)}.lesson-complete p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--text-muted)}.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-8)}.pager-link{display:flex;align-items:center;gap:var(--sp-3);height:100%;padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.pager-link:hover{border-color:var(--accent)}.pager-link-next{justify-content:flex-end}.pager-icon{color:var(--text-faint);flex-shrink:0}.pager-copy{min-width:0;display:flex;flex-direction:column}.pager-copy-right{text-align:right}.pager-kicker{font-size:var(--fs-xs);color:var(--text-subtle)}.pager-title{font-weight:600}.lesson-aside{display:none}.lesson-aside-inner{position:sticky;top:calc(var(--header-h) + var(--sp-6));max-height:calc(100vh - var(--header-h) - var(--sp-10));overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-6)}.aside-block{padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)}.aside-block:last-child{border-bottom:none}.aside-title{margin-bottom:var(--sp-3);font-size:var(--fs-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-subtle)}.aside-note{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-subtle)}.aside-link{margin-top:var(--sp-3);font-size:var(--fs-sm)}.toc{display:flex;flex-direction:column;gap:1px}.toc-link{padding:var(--sp-2) var(--sp-3);border-left:2px solid var(--border);font-size:var(--fs-sm);color:var(--text-subtle);transition:all var(--t-fast)}.toc-link:hover{color:var(--text);border-left-color:var(--border-strong)}.toc-link-active{border-left-color:var(--accent);color:var(--accent);font-weight:600}.aside-nav{display:flex;flex-direction:column;gap:1px}.aside-nav-link{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--text-subtle)}.aside-nav-link:hover{background:var(--surface-2);color:var(--text)}.aside-nav-link-active{color:var(--accent);font-weight:600}.aside-nav-check{color:var(--accent);flex-shrink:0}@media (min-width: 1280px){.lesson-layout{grid-template-columns:minmax(0,1fr) 16rem}.lesson-aside{display:block}}.code-block{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}.code-block-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--surface-2);border-bottom:1px solid var(--border)}.code-block-lang{font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}.code-block-lines{font-size:var(--fs-xs);color:var(--text-faint)}.code-block-actions{display:flex;align-items:center;gap:var(--sp-1);margin-left:auto}.code-action{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:var(--r-sm);color:var(--text-faint);transition:all var(--t-fast)}.code-action:hover{background:var(--surface-3);color:var(--text)}.code-action-on{color:var(--accent)}.copy-btn{display:inline-flex;align-items:center;gap:var(--sp-1);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:600;color:var(--text-muted);transition:all var(--t-fast)}.copy-btn:hover{background:var(--surface-3);color:var(--text)}.code-block-body{position:relative}.code-block-clipped{max-height:26rem;overflow:hidden}.code-expand{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-6) var(--sp-3) var(--sp-3);background:linear-gradient(to bottom,transparent,var(--surface) 55%);font-size:var(--fs-sm);font-weight:600;color:var(--accent)}.code-block .cm-editor{font-family:var(--font-mono);font-size:var(--fs-sm)}.code-block .cm-editor.cm-focused{outline:none}.code-block .cm-gutters{border-right:1px solid var(--border)}.playground{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);overflow:hidden}.playground-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface-2);border-bottom:1px solid var(--border)}.playground-lang{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;color:var(--accent)}.playground-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-left:auto}.playground-note{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-subtle)}.playground-panes{display:grid;grid-template-columns:1fr}.playground-editor{border-bottom:1px solid var(--border);overflow:auto}.playground-editor .cm-editor{height:100%;font-family:var(--font-mono);font-size:var(--fs-sm)}.playground-output{display:flex;flex-direction:column;background:var(--surface-inset)}.playground-output-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-4);border-bottom:1px solid var(--border);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle)}.playground-duration{font-family:var(--font-mono);text-transform:none;letter-spacing:0;color:var(--text-faint)}.playground-output-body{flex:1;padding:var(--sp-4);overflow:auto}.playground-hint{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--text-subtle)}.preview-frame-wrap{display:flex;flex-direction:column;gap:var(--sp-3);height:100%;min-height:0}.preview-frame{flex:1;width:100%;min-height:14rem;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}.preview-markup{flex-shrink:0;font-size:var(--fs-sm)}.preview-markup>summary{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;color:var(--text-subtle);list-style:none}.preview-markup>summary::-webkit-details-marker{display:none}.preview-markup>summary:hover{color:var(--text)}.preview-markup pre{margin-top:var(--sp-2);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);overflow-x:auto;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.6;color:var(--text-muted)}.playground-hint code{font-family:var(--font-mono);color:var(--accent)}@media (min-width: 1024px){.playground-panes{grid-template-columns:1fr 1fr}.playground-editor{border-bottom:none;border-right:1px solid var(--border)}}.console-log{display:flex;flex-direction:column;gap:var(--sp-1);font-family:var(--font-mono);font-size:var(--fs-sm)}.console-line{display:flex;gap:var(--sp-2);padding-block:.1rem}.console-marker{color:var(--text-faint);flex-shrink:0}.console-text{white-space:pre-wrap;word-break:break-word}.console-warn .console-text{color:#f59e0b}.console-error .console-text{color:#ef4444}.console-return .console-text{color:var(--accent)}.run-notice{display:flex;gap:var(--sp-3);padding:var(--sp-3);margin-bottom:var(--sp-3);border-radius:var(--r-md);font-size:var(--fs-sm)}.run-notice svg{flex-shrink:0;margin-top:.1rem}.run-notice-error{background:color-mix(in srgb,#ef4444 12%,transparent);color:#b91c1c}.run-notice-warn{background:color-mix(in srgb,#f59e0b 14%,transparent);color:#b45309}:root.dark .run-notice-error{color:#fca5a5}:root.dark .run-notice-warn{color:#fcd34d}.test-results{margin-top:var(--sp-4)}.test-summary{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);margin-bottom:var(--sp-3);border-radius:var(--r-md);background:color-mix(in srgb,#ef4444 12%,transparent);color:#b91c1c;font-weight:700;font-size:var(--fs-sm)}.test-summary-pass{background:color-mix(in srgb,#10b981 14%,transparent);color:#047857}:root.dark .test-summary{color:#fca5a5}:root.dark .test-summary-pass{color:#6ee7b7}.test-list{display:flex;flex-direction:column;gap:var(--sp-2)}.test-item{padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}.test-item-head{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);font-weight:600}.test-pass .test-item-head svg{color:#10b981}.test-fail{border-color:color-mix(in srgb,#ef4444 40%,transparent)}.test-fail .test-item-head svg{color:#ef4444}.test-detail{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-1) var(--sp-3);margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--border);font-size:var(--fs-xs)}.test-detail dt{font-weight:700;color:var(--text-subtle)}.test-detail dd code{font-family:var(--font-mono);word-break:break-word}.test-preview{padding:var(--sp-4);margin-top:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.test-preview h2{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2);font-size:var(--fs-sm);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em}.test-preview li{padding-block:var(--sp-1);font-size:var(--fs-sm);color:var(--text-muted)}.test-preview li:before{content:"· ";color:var(--text-faint)}.playground-page{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}.playground-side{min-width:0}.example-switcher{display:flex;flex-direction:column;gap:var(--sp-1)}.example-switch{padding:var(--sp-2) var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);text-align:left;font-size:var(--fs-sm);color:var(--text-muted);transition:all var(--t-fast)}.example-switch:hover{border-color:var(--accent);color:var(--text)}.example-switch-on{background:var(--accent-soft-bg);border-color:var(--accent-soft-border);color:var(--accent-soft-text);font-weight:600}@media (min-width: 1024px){.playground-page{grid-template-columns:16rem minmax(0,1fr)}}.practice-summary{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface)}.practice-summary-main h2{margin-bottom:var(--sp-3);font-size:var(--fs-lg)}.practice-summary-note{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--text-subtle)}.practice-summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--sp-3)}@media (min-width: 900px){.practice-summary{grid-template-columns:1fr 1.2fr;align-items:center}}.practice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-4)}.practice-card{display:flex;flex-direction:column;padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-fast)}.practice-card:hover{border-color:var(--accent);transform:translateY(-2px)}.practice-card-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:var(--sp-3);border-radius:var(--r-lg);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.practice-card h3{margin-bottom:var(--sp-2);font-size:var(--fs-md)}.practice-card p{flex:1;font-size:var(--fs-sm);color:var(--text-muted)}.practice-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);font-size:var(--fs-xs);font-weight:600;color:var(--accent)}.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--sp-4)}.tier-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-fast)}.tier-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.tier-beginner{border-left-color:#10b981}.tier-intermediate{border-left-color:#f59e0b}.tier-advanced{border-left-color:#ef4444}.tier-card-head{display:flex;align-items:baseline;justify-content:space-between}.tier-card-head h3{font-size:var(--fs-lg)}.tier-card-head span{font-size:var(--fs-xs);color:var(--text-subtle)}.tier-card p{flex:1;font-size:var(--fs-sm);color:var(--text-muted)}.tier-card-foot{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:600;color:var(--accent)}.challenge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--sp-4)}.challenge-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-fast)}.challenge-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}.challenge-card-solved{border-color:var(--accent-soft-border);background:var(--accent-soft-bg)}.challenge-card-head{display:flex;align-items:flex-start;gap:var(--sp-3)}.challenge-card-heading{flex:1;min-width:0}.challenge-card-heading h3{font-size:var(--fs-md)}.challenge-card-lang{font-size:var(--fs-xs);color:var(--text-subtle)}.challenge-solved{color:var(--accent)}.challenge-card-desc{font-size:var(--fs-sm);color:var(--text-muted)}.challenge-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border)}.challenge-card-meta{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-subtle)}.challenge-layout{display:grid;grid-template-columns:1fr;gap:var(--sp-6)}.challenge-problem{min-width:0}.challenge-problem-head{padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--border)}.challenge-badges{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-3)}.challenge-title{font-size:var(--fs-2xl)}.challenge-stats{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-3)}.challenge-stats li{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);color:var(--text-subtle)}.example-pair{display:grid;gap:var(--sp-2);padding:var(--sp-3);margin-bottom:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}.example-pair-label{display:block;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint)}.example-pair code{font-family:var(--font-mono);font-size:var(--fs-sm);word-break:break-word}.example-pair-note{font-size:var(--fs-xs);color:var(--text-subtle)}.hints{margin-top:var(--sp-6)}.hints-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle)}.solution-block{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--border)}.solution-block .code-block{margin-bottom:var(--sp-3)}.challenge-workspace{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}.solved-banner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--accent-soft-border);border-radius:var(--r-lg);background:var(--accent-soft-bg);color:var(--accent-soft-text);animation:fade-in-up var(--t-base)}.solved-banner>div{display:flex;flex-direction:column;flex:1}.solved-banner span{font-size:var(--fs-sm)}.output-challenge{display:flex;flex-direction:column;gap:var(--sp-4)}.output-challenge-actions{display:flex;align-items:center;gap:var(--sp-3)}.verdict{display:inline-flex;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--fs-sm)}.verdict-pass{color:var(--accent)}.verdict-fail{color:#ef4444}.challenge-footer-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--border)}@media (min-width: 1100px){.challenge-layout{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}.challenge-problem{position:sticky;top:calc(var(--header-h) + var(--sp-4));max-height:calc(100vh - var(--header-h) - var(--sp-8));overflow-y:auto;padding-right:var(--sp-3)}}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--sp-5)}.project-card{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-base)}.project-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.project-card-link{display:flex;flex-direction:column;gap:var(--sp-3);height:100%;padding:var(--sp-5)}.project-card-head{display:flex;align-items:flex-start;gap:var(--sp-3)}.project-card-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:var(--r-lg);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.project-card-head>div{flex:1;min-width:0}.project-card-head h3{font-size:var(--fs-lg)}.project-card-tagline{font-size:var(--fs-xs);color:var(--text-subtle)}.project-card-summary{font-size:var(--fs-sm);color:var(--text-muted)}.project-card-stack{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}.project-tech{padding:.1rem var(--sp-2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-xs);color:var(--text-subtle)}.project-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border)}.project-card-meta{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);color:var(--text-subtle)}.project-card-cta{display:inline-flex;align-items:center;gap:var(--sp-1);margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--accent)}.project-hero{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-bottom:var(--sp-8);border-bottom:1px solid var(--border)}.project-hero-copy{min-width:0}.project-hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}.stack-list{display:flex;flex-direction:column;gap:var(--sp-2)}.stack-link{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}.stack-link:hover{background:var(--surface-2);color:var(--accent)}.stack-link span{flex:1}@media (min-width: 1024px){.project-hero{grid-template-columns:1fr 20rem}}.project-body{max-width:52rem}.step-list{display:flex;flex-direction:column;gap:var(--sp-4)}.step{display:flex;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.step-number{display:grid;place-items:center;width:2rem;height:2rem;flex-shrink:0;border-radius:var(--r-full);background:var(--accent-soft-bg);color:var(--accent-soft-text);font-weight:700;font-size:var(--fs-sm)}.step-body h3{margin-bottom:var(--sp-1);font-size:var(--fs-md)}.step-body p{font-size:var(--fs-sm);color:var(--text-muted)}.outcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--sp-3)}.outcome-card{display:flex;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}.outcome-card svg{flex-shrink:0;color:var(--accent)}.outcome-card p{font-size:var(--fs-sm);color:var(--text-muted)}.stage-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5)}.stage-chip{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;border:1px solid var(--border);color:var(--text-subtle)}.stage-0{border-color:color-mix(in srgb,#10b981 45%,transparent);color:#059669}.stage-1{border-color:color-mix(in srgb,#3b82f6 45%,transparent);color:#2563eb}.stage-2{border-color:color-mix(in srgb,#f59e0b 45%,transparent);color:#b45309}.stage-3{border-color:color-mix(in srgb,#a855f7 45%,transparent);color:#7e22ce}:root.dark .stage-0{color:#6ee7b7}:root.dark .stage-1{color:#93c5fd}:root.dark .stage-2{color:#fcd34d}:root.dark .stage-3{color:#d8b4fe}.roadmap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--sp-5)}.roadmap-card{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-base)}.roadmap-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.roadmap-card-link{display:flex;flex-direction:column;gap:var(--sp-3);height:100%;padding:var(--sp-5)}.roadmap-card-head{display:flex;align-items:flex-start;gap:var(--sp-3)}.roadmap-card-icon{display:grid;place-items:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:var(--r-lg);background:var(--accent-soft-bg);color:var(--accent-soft-text)}.roadmap-card-head h3{font-size:var(--fs-lg)}.roadmap-card-head p{font-size:var(--fs-xs);color:var(--text-subtle)}.roadmap-card-summary{font-size:var(--fs-sm);color:var(--text-muted)}.roadmap-card-langs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}.roadmap-more{font-size:var(--fs-xs);color:var(--text-subtle)}.roadmap-card-progress{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);font-weight:700;color:var(--accent)}.roadmap-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-subtle)}.roadmap-card-foot span{display:inline-flex;align-items:center;gap:var(--sp-1)}.roadmap-card-cta{margin-left:auto;font-weight:700;color:var(--accent)}.roadmap-hero{display:grid;grid-template-columns:1fr;gap:var(--sp-6);padding-bottom:var(--sp-8);border-bottom:1px solid var(--border)}.roadmap-hero-progress{max-width:28rem;margin-top:var(--sp-5)}.roadmap-hero-progress-head{display:flex;justify-content:space-between;margin-bottom:var(--sp-2);font-size:var(--fs-sm)}@media (min-width: 1024px){.roadmap-hero{grid-template-columns:1fr 20rem}}.roadmap-path{display:flex;flex-direction:column;gap:var(--sp-6)}.roadmap-stage{padding:var(--sp-5);border:1px solid var(--border);border-left-width:3px;border-radius:var(--r-xl);background:var(--surface)}.roadmap-stage-0{border-left-color:#10b981}.roadmap-stage-1{border-left-color:#3b82f6}.roadmap-stage-2{border-left-color:#f59e0b}.roadmap-stage-3{border-left-color:#a855f7}.roadmap-stage-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}.roadmap-stage-badge{padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);background:var(--surface-2);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle)}.roadmap-stage-head h3{font-size:var(--fs-lg)}.roadmap-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:var(--sp-3)}.roadmap-step{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2)}.roadmap-step-track{background:var(--surface);transition:all var(--t-fast)}.roadmap-step-track:hover{border-color:var(--accent);transform:translateY(-2px)}.roadmap-step-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}.roadmap-step-body h4{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-md)}.roadmap-step-body p{font-size:var(--fs-xs);color:var(--text-subtle)}.roadmap-step-dot{color:var(--text-faint);margin-top:.15rem}.roadmap-step-percent{font-size:var(--fs-xs);font-weight:700;color:var(--accent)}.roadmap-step-tag{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--sp-5)}.compare-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);transition:all var(--t-base)}.compare-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-md)}.compare-card-heads{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.compare-side{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);font-weight:700;font-size:var(--fs-sm)}.compare-versus{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}.compare-card-tagline{font-size:var(--fs-sm);font-weight:600;color:var(--accent);text-align:center}.compare-card-summary{font-size:var(--fs-sm);color:var(--text-muted)}.compare-card-cta{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--border);font-size:var(--fs-sm);font-weight:700;color:var(--accent)}.comparison-hero{padding-bottom:var(--sp-8)}.comparison-summary{max-width:48rem}.comparison-heads{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}.comparison-head-card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);text-align:center;transition:all var(--t-fast)}.comparison-head-card:hover{border-color:var(--accent);transform:translateY(-2px)}.comparison-head-card h2{font-size:var(--fs-xl)}.comparison-head-card p{font-size:var(--fs-sm);color:var(--text-subtle)}.comparison-head-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--sp-3);margin-block:var(--sp-2);font-size:var(--fs-xs);color:var(--text-subtle)}.comparison-head-cta{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-sm);font-weight:700;color:var(--accent)}.compare-code{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}.compare-code-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-md)}@media (min-width: 900px){.compare-code{grid-template-columns:1fr 1fr}}.choose-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4);margin-bottom:var(--sp-4)}.choose-card{padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface)}.choose-card h3{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-md)}@media (min-width: 900px){.choose-grid{grid-template-columns:1fr 1fr}}.resource-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--sp-4)}.resource-card{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.resource-card:hover{border-color:var(--accent);transform:translateY(-2px)}.resource-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.resource-card-head h3{font-size:var(--fs-md)}.resource-card-head svg{color:var(--text-faint);flex-shrink:0}.resource-card:hover .resource-card-head svg{color:var(--accent)}.resource-card p{flex:1;font-size:var(--fs-sm);color:var(--text-muted)}.resource-host{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-faint)}.dash-hero{display:grid;grid-template-columns:1fr;gap:var(--sp-6);align-items:center;padding:var(--sp-6);border:1px solid var(--border);border-radius:var(--r-2xl);background:var(--surface)}.dash-ring{display:grid;place-items:center}.dash-hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--sp-3)}@media (min-width: 900px){.dash-hero{grid-template-columns:auto 1fr}}.recent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:var(--sp-3)}.recent-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.recent-card:hover{border-color:var(--accent);transform:translateY(-2px)}.recent-card-body{flex:1;min-width:0}.recent-card-body h3{font-size:var(--fs-sm)}.recent-card-body p{font-size:var(--fs-xs);color:var(--text-subtle)}.recent-card-play{color:var(--accent);flex-shrink:0}.dash-columns{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}@media (min-width: 900px){.dash-columns{grid-template-columns:1fr 1fr}}.dash-section-title{margin-bottom:var(--sp-3);font-size:var(--fs-lg)}.dash-empty{font-size:var(--fs-sm);color:var(--text-subtle)}.skill-list{display:flex;flex-direction:column;gap:var(--sp-3)}.skill-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.skill-row:hover{border-color:var(--accent)}.skill-row-body{flex:1;min-width:0}.skill-row-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)}.skill-row-head h3{font-size:var(--fs-md)}.skill-row-meta{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-subtle)}.skill-row-arrow{color:var(--text-faint);flex-shrink:0}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:var(--sp-4)}.achievement{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-xl);background:var(--surface);text-align:center;opacity:.55;filter:grayscale(1)}.achievement-earned{opacity:1;filter:none;border-color:var(--accent-soft-border);background:var(--accent-soft-bg)}.achievement-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--r-full);background:var(--surface-2);color:var(--text-subtle)}.achievement-earned .achievement-icon{background:var(--accent);color:var(--accent-contrast)}.achievement h3{font-size:var(--fs-md)}.achievement p{font-size:var(--fs-xs);color:var(--text-subtle)}.danger-zone{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-5);margin-top:var(--sp-10);border:1px solid color-mix(in srgb,#ef4444 35%,var(--border));border-radius:var(--r-xl);background:var(--surface)}.danger-zone h2{margin-bottom:var(--sp-1);font-size:var(--fs-md)}.danger-zone p{max-width:34rem;font-size:var(--fs-sm);color:var(--text-subtle)}.danger-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.result-group{margin-bottom:var(--sp-8)}.result-group-title{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-3);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle)}.result-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--sp-3)}.result-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);transition:all var(--t-fast)}.result-card:hover{border-color:var(--accent);transform:translateY(-2px)}.result-card-body{flex:1;min-width:0}.result-card-body h3{font-size:var(--fs-md)}.result-card-body p{font-size:var(--fs-sm);color:var(--text-subtle)}.result-card-wide{grid-column:1 / -1}.result-snippet{margin-top:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.7;color:var(--text-muted);white-space:pre-wrap;word-break:break-word}.result-where{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--accent)}.error-page{display:grid;place-items:center;min-height:70vh;padding:var(--sp-8) var(--sp-5)}.error-inner{max-width:36rem;text-align:center}.error-code{font-size:3.25rem;font-weight:800;line-height:1;letter-spacing:-.04em;background:linear-gradient(135deg,var(--grad-from),var(--grad-to));-webkit-background-clip:text;background-clip:text;color:transparent}.error-title{margin-block:var(--sp-4) var(--sp-3);font-size:var(--fs-2xl)}.error-text{margin-bottom:var(--sp-5);color:var(--text-muted)}.error-detail{padding:var(--sp-3);margin-bottom:var(--sp-5);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-family:var(--font-mono);font-size:var(--fs-xs);text-align:left;white-space:pre-wrap;word-break:break-word;color:var(--text-muted)}.error-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3)}.error-suggestions{margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--border)}.error-suggestions h2{margin-bottom:var(--sp-4);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle)}.error-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--sp-2)}.error-link{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);transition:all var(--t-fast)}.error-link:hover{border-color:var(--accent);color:var(--accent)}.error-link svg:last-child{margin-left:auto}@media print{.site-header,.site-footer,.sidebar,.lesson-aside,.pager,.lesson-actions,.code-block-actions{display:none!important}.workspace-body{margin-left:0}.code-block-clipped{max-height:none}}