:root{--color-primary:#1a1a1a;--color-secondary:#2d2d2d;--color-background:#fff;--color-surface:#fafafa;--color-brand:#ff6b4a;--color-brand-light:#ffe8e3;--color-brand-deep:#e85a3d;--color-border:#e5e5ea;--color-border-medium:#d1d1d6;--color-text:#1a1a1a;--color-text-secondary:#48484a;--color-text-muted:#8e8e93;--color-success:#34c759;--color-warning:#ff9500;--color-error:#ff3b30;--font-sans:"Questrial", system-ui, -apple-system, sans-serif;--font-mono:"SF Mono", ui-monospace, SFMono-Regular, monospace;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}html{overflow-x:hidden}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-background);font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}.container{max-width:1200px;margin:0 auto;padding:0 24px}.header{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);z-index:100;background:#ffffffe6;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;height:64px;display:flex}.logo{color:var(--color-primary);letter-spacing:-.3px;align-items:center;font-size:20px;font-weight:500;display:flex}.logo img{width:auto;height:32px}.logo span{color:var(--color-brand)}.nav{gap:24px;display:flex}.nav-link{color:var(--color-text-secondary);padding:8px 0;font-size:14px;font-weight:500;transition:color .2s}.nav-link:hover{color:var(--color-brand)}.mobile-toggle{cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;padding:0;display:none}@media (width<=768px){.mobile-toggle,.nav{display:flex}}.hamburger{background:var(--color-text);width:20px;height:2px;transition:background .2s;position:relative}.hamburger:before,.hamburger:after{content:"";background:var(--color-text);width:100%;height:2px;transition:transform .2s;position:absolute;left:0}.hamburger:before{top:-6px}.hamburger:after{top:6px}.hamburger.open{background:0 0}.hamburger.open:before{transform:translateY(6px)rotate(45deg)}.hamburger.open:after{transform:translateY(-6px)rotate(-45deg)}.hero{background:linear-gradient(180deg, #fff8f6 0%, var(--color-background) 100%);text-align:center;padding:96px 0}.hero-title{letter-spacing:-.5px;color:var(--color-primary);margin-bottom:20px;font-size:56px;font-weight:400;line-height:1.1}.hero-subtitle{color:var(--color-text-muted);max-width:560px;margin:0 auto 40px;font-size:17px;line-height:1.6}.hero-actions{justify-content:center;gap:16px;display:flex}.btn{border-radius:var(--radius-full);cursor:pointer;justify-content:center;align-items:center;padding:12px 24px;font-size:15px;font-weight:500;transition:all .2s;display:inline-flex}.btn-primary{background:var(--color-brand);color:#fff;border:none}.btn-primary:hover{background:var(--color-brand-deep)}.btn-secondary{background:var(--color-background);color:var(--color-primary);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-surface)}.btn-brand{background:var(--color-brand);color:#fff;border:none}.section{padding:96px 0}.section-header{text-align:center;margin-bottom:48px}.section-title{letter-spacing:-.3px;margin-bottom:16px;font-size:36px;font-weight:400;line-height:1.2}.section-subtitle{color:var(--color-text-muted);max-width:560px;margin:0 auto;font-size:17px}.cards-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px;transition:border-color .2s,box-shadow .2s}.card:hover{border-color:var(--color-border-medium);box-shadow:0 4px 12px #0000000d}.card-title{margin-bottom:8px;font-size:18px;font-weight:500;line-height:1.4}.card-desc{color:var(--color-text-muted);font-size:14px}.card-link{color:var(--color-brand);cursor:pointer;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:500;display:inline-flex}.path-card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:32px}.path-card-header{align-items:center;gap:16px;margin-bottom:16px;display:flex}.path-card-icon{background:var(--color-brand-light);border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.path-card-title{font-size:18px;font-weight:500}.path-card-meta{color:var(--color-text-muted);margin-bottom:16px;font-size:14px}.path-card-modules{flex-wrap:wrap;gap:8px;display:flex}.badge{border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-secondary);letter-spacing:.5px;padding:6px 12px;font-size:12px;font-weight:500;display:inline-block}.roadmap{background:var(--color-surface);padding:64px 0}.roadmap-steps{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.roadmap-step{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-full);align-items:center;gap:12px;padding:12px 24px;display:flex}.roadmap-step-number{background:var(--color-brand);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:14px;font-weight:500;display:flex}.roadmap-arrow{color:var(--color-text-muted);font-size:20px}.project-card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:24px}.project-image{background:var(--color-surface);border-radius:var(--radius-md);width:100%;height:160px;color:var(--color-text-muted);justify-content:center;align-items:center;margin-bottom:16px;font-size:48px;display:flex}.project-title{margin-bottom:8px;font-size:18px;font-weight:500}.project-desc{color:var(--color-text-muted);margin-bottom:12px;font-size:14px}.project-tags{flex-wrap:wrap;gap:8px;display:flex}.tag{background:var(--color-brand-light);color:var(--color-brand-deep);border-radius:var(--radius-sm);padding:4px 8px;font-size:12px}.features-grid{grid-template-columns:repeat(3,1fr);gap:32px;display:grid}.feature{text-align:center}.feature-icon{background:var(--color-surface);border-radius:var(--radius-lg);justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 16px;font-size:28px;display:flex}.feature-title{margin-bottom:8px;font-size:17px;font-weight:500}.feature-desc{color:var(--color-text-muted);font-size:14px}.footer{border-top:1px solid var(--color-border);background:var(--color-background);padding:64px 0 32px}.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;display:grid}.footer-brand{flex-direction:column;gap:16px;display:flex}.footer-logo{color:var(--color-text);font-size:24px;font-weight:700;text-decoration:none}.footer-desc{color:var(--color-text-muted);max-width:280px;font-size:14px;line-height:1.6}.footer-social{gap:12px;display:flex}.social-link{background:var(--color-surface);width:40px;height:40px;color:var(--color-text-muted);border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex}.social-link:hover{background:var(--color-primary);color:#fff}.footer-section{flex-direction:column;gap:16px;display:flex}.footer-title{color:var(--color-text);text-transform:uppercase;letter-spacing:.5px;font-size:14px;font-weight:600}.footer-list{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.footer-link{color:var(--color-text-muted);font-size:14px;text-decoration:none;transition:color .2s}.footer-link:hover{color:var(--color-primary)}.footer-bottom{border-top:1px solid var(--color-border);text-align:center;padding-top:32px}.footer-copyright{color:var(--color-text-muted);font-size:14px}@media (width<=1024px){.cards-grid,.features-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.container{padding:0 16px}.nav{background:var(--color-background);border-bottom:1px solid var(--color-border);opacity:0;visibility:hidden;z-index:99;flex-direction:column;gap:16px;padding:24px;transition:all .3s;position:fixed;top:64px;left:0;right:0;transform:translateY(-100%)}.nav.nav-open{opacity:1;visibility:visible;transform:translateY(0)}.nav-link{border-bottom:1px solid var(--color-border);padding:12px 0}.mobile-toggle{display:flex}.hero{padding:48px 0}.hero-title{letter-spacing:-.3px;font-size:36px}.hero-subtitle{font-size:16px}.cards-grid,.features-grid{grid-template-columns:1fr}.section{padding:48px 0}.section-title{font-size:28px}.hero-actions{flex-direction:column;align-items:center}.btn{text-align:center;width:100%}.footer-grid{grid-template-columns:1fr;gap:32px}.footer-brand{text-align:center;align-items:center}.footer-desc{max-width:100%}.footer-section{text-align:center}.footer-list{align-items:center}.footer-bottom{text-align:center}.sidebar{z-index:99;transition:transform .3s;position:fixed;inset:64px 0 0;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.lesson-page-layout{flex-direction:column}.lesson-main{padding:24px 0}.lesson-content h1{font-size:28px}.lesson-content h2{font-size:20px}.lesson-nav{flex-direction:column;gap:16px}.lesson-nav-next{text-align:left}.path-module-header,.path-lesson-link{padding:16px}.code-block{border-radius:0;margin:16px -24px}.info-table{margin:16px -24px}.breadcrumb-list{flex-wrap:wrap}table,thead,tbody,th,td,tr{display:block}.info-table thead{display:none}.info-table tr{border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:16px}.info-table td{border:none;border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.info-table td:last-child{border-bottom:none}.info-table td:before{content:attr(data-label);color:var(--color-text);font-weight:600}}@media (width<=480px){.hero-title{font-size:28px}.hero-subtitle{font-size:14px}.section-title{font-size:24px}.btn{padding:12px 20px;font-size:14px}.logo img{height:28px}}.content-wrapper{max-width:800px;margin:0 auto;padding:32px 0}.content-wrapper h1{color:var(--color-text);margin-bottom:24px;font-size:36px;font-weight:600}.content-wrapper h2{color:var(--color-text);margin:32px 0 16px;font-size:24px;font-weight:600}.content-wrapper p{color:var(--color-text-secondary);margin-bottom:16px;font-size:16px;line-height:1.7}.content-wrapper ul,.content-wrapper ol{margin:16px 0;padding-left:24px}.content-wrapper li{color:var(--color-text-secondary);margin-bottom:8px;font-size:16px;line-height:1.7}.content-wrapper a{color:var(--color-primary)}.blog-category{background:var(--color-brand-light);color:var(--color-brand-deep);border-radius:var(--radius-full);padding:4px 12px;font-size:12px;font-weight:500;display:inline-block}.blog-meta{color:var(--color-text-muted);gap:16px;margin-bottom:16px;font-size:14px;display:flex}.sidebar{background:var(--color-surface);border-right:1px solid var(--color-border);min-width:280px;padding:24px 0}.sidebar-nav{flex-direction:column;gap:8px;display:flex}.sidebar-module{border-bottom:1px solid var(--color-border)}.sidebar-module-title{width:100%;color:var(--color-text);cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:600;display:flex}.sidebar-module-title:hover{background:var(--color-background)}.module-icon{color:var(--color-text-muted);font-size:10px}.sidebar-lessons{padding:0 16px 16px 32px;list-style:none}.sidebar-lesson-link{color:var(--color-text-secondary);border-radius:var(--radius-sm);padding:8px 12px;font-size:14px;text-decoration:none;display:block}.sidebar-lesson-link:hover{background:var(--color-background);color:var(--color-text)}.sidebar-lesson-link.active{background:var(--color-brand-light);color:var(--color-brand-deep);font-weight:500}.code-block{background:var(--color-secondary);border-radius:var(--radius-md);margin:16px 0;overflow:hidden}.code-block-header{background:var(--color-primary);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.code-language{color:var(--color-text-muted);font-size:12px;font-family:var(--font-mono)}.code-copy-btn{background:var(--color-brand);border-radius:var(--radius-sm);color:#fff;cursor:pointer;border:none;padding:4px 12px;font-size:12px}.code-copy-btn:hover{background:var(--color-brand-deep)}.code-content{font-family:var(--font-mono);color:#d4d4d4;margin:0;padding:16px;font-size:14px;line-height:1.6;overflow-x:auto}.code-content code{font-family:inherit}.line-number{width:32px;color:var(--color-text-muted);-webkit-user-select:none;user-select:none;display:inline-block}.progress-bar{margin:16px 0}.progress-label{color:var(--color-text-secondary);justify-content:space-between;margin-bottom:8px;font-size:14px;display:flex}.progress-track{background:var(--color-border);border-radius:var(--radius-full);height:8px;overflow:hidden}.progress-fill{background:var(--color-brand);border-radius:var(--radius-full);height:100%;transition:width .3s}.breadcrumb{margin-bottom:24px}.breadcrumb-list{flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:0;list-style:none;display:flex}.breadcrumb-item{align-items:center;gap:4px;display:flex}.breadcrumb-link{color:var(--color-brand);font-size:14px;text-decoration:none}.breadcrumb-link:hover{text-decoration:underline}.breadcrumb-current{color:var(--color-text);font-size:14px}.breadcrumb-separator{color:var(--color-text-muted);font-size:14px}.btn-sm{padding:8px 16px;font-size:14px}.btn-lg{padding:16px 32px;font-size:18px}.card-hoverable{cursor:pointer}.card-hoverable:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000001a}.badge-default{background:var(--color-surface);color:var(--color-text-secondary)}.badge-success{color:var(--color-success);background:#e6f7ef}.badge-warning{color:var(--color-warning);background:#fff4e6}.path-modules{flex-direction:column;gap:24px;margin:32px 0;display:flex}.path-module{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.path-module-header{background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:20px 24px}.path-module-title{color:var(--color-text);margin:0 0 8px;font-size:20px;font-weight:600}.path-module-desc{color:var(--color-text-secondary);margin:0;font-size:14px}.path-module-lessons{margin:0;padding:0;list-style:none}.path-lesson-link{color:var(--color-text);border-bottom:1px solid var(--color-border);align-items:center;gap:12px;padding:16px 24px;text-decoration:none;transition:background .2s;display:flex}.path-lesson-link:last-child{border-bottom:none}.path-lesson-link:hover{background:var(--color-surface)}.lesson-icon{font-size:18px}.path-cta{text-align:center;background:var(--color-surface);border-radius:var(--radius-lg);margin-top:32px;padding:32px}.path-cta p{color:var(--color-text);margin-bottom:16px;font-size:18px}.lesson-page-layout{min-height:calc(100vh - 80px);display:flex}.lesson-main{flex:1;padding:32px 0;overflow-y:auto}.lesson-content{max-width:800px;margin:0 auto}.lesson-content h1{color:var(--color-text);margin-bottom:16px;font-size:36px;font-weight:600}.lesson-content h2{color:var(--color-text);margin:32px 0 16px;font-size:24px;font-weight:600}.lesson-content h3{color:var(--color-text);margin:24px 0 12px;font-size:20px;font-weight:600}.lesson-content p{color:var(--color-text-secondary);margin-bottom:16px;font-size:16px;line-height:1.7}.lesson-content ul,.lesson-content ol{margin:16px 0;padding-left:24px}.lesson-content li{color:var(--color-text-secondary);margin-bottom:8px;font-size:16px;line-height:1.7}.lesson-intro{color:var(--color-text);border-bottom:1px solid var(--color-border);margin-bottom:32px;padding-bottom:24px;font-size:18px}.info-box{background:var(--color-surface);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);margin:24px 0;padding:16px 20px}.info-box h4{color:var(--color-primary);margin-bottom:8px;font-size:14px;font-weight:600}.info-box p{color:var(--color-text-secondary);margin:0;font-size:14px}.info-table{margin:16px 0;overflow-x:auto}.info-table table{border-collapse:collapse;width:100%}.info-table th,.info-table td{text-align:left;border:1px solid var(--color-border);padding:12px 16px}.info-table th{background:var(--color-surface);font-weight:600}.lesson-nav{border-top:1px solid var(--color-border);justify-content:space-between;margin-top:48px;padding-top:24px;display:flex}.lesson-nav-prev,.lesson-nav-next{flex-direction:column;gap:4px;display:flex}.lesson-nav-next{text-align:right}.nav-label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:12px}.nav-link{color:var(--color-brand);font-size:16px;text-decoration:none}.nav-link:hover{text-decoration:underline}