.app{min-height:100vh}section{padding:100px 0}.container{max-width:1140px;margin:0 auto;padding:0 24px}.nav{z-index:100;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);background:#0a0a0fcc;padding:16px 0;transition:all .3s;position:fixed;top:0;left:0;right:0}.nav .container{justify-content:space-between;align-items:center;display:flex}.nav-logo{color:var(--text-primary);align-items:center;gap:10px;font-size:18px;font-weight:700;display:flex}.nav-logo .logo-icon{background:var(--accent-cyan);border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;font-size:16px;display:flex}.nav-links{gap:32px;list-style:none;display:flex}.nav-links a{color:var(--text-secondary);font-size:14px;font-weight:500;transition:color .2s}.nav-links a:hover{color:var(--text-primary)}.nav-cta{background:var(--accent-cyan);color:#000;cursor:pointer;font-size:15px;font-weight:600;font-family:var(--font-sans);border:none;border-radius:10px;padding:10px 24px;transition:opacity .2s}.nav-cta:hover{opacity:.9}.hero{text-align:center;padding:160px 0 100px;position:relative;overflow:hidden}.hero:before{display:none}.hero-badge{background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);border-radius:100px;align-items:center;gap:8px;margin-bottom:32px;padding:6px 16px;font-size:13px;display:inline-flex}.hero-badge .dot{background:var(--accent-teal);border-radius:50%;width:6px;height:6px;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.hero h1{letter-spacing:-2px;max-width:800px;margin-bottom:24px;margin-left:auto;margin-right:auto;font-size:72px;font-weight:800;line-height:1.05}.hero h1 .gradient-text{color:var(--accent-cyan)}.hero-subtitle{color:var(--text-secondary);max-width:600px;margin:0 auto 40px;font-size:20px;line-height:1.6}.hero-buttons{justify-content:center;gap:16px;margin-bottom:64px;display:flex}.btn-primary{background:var(--accent-cyan);color:#000;cursor:pointer;font-size:16px;font-weight:600;font-family:var(--font-sans);border:none;border-radius:12px;padding:14px 32px;transition:all .2s}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-secondary{border:1px solid var(--border);color:var(--text-primary);cursor:pointer;font-size:16px;font-weight:600;font-family:var(--font-sans);background:0 0;border-radius:12px;padding:14px 32px;transition:all .2s}.btn-secondary:hover{border-color:var(--text-muted);background:var(--bg-card)}.hero-image{max-width:900px;margin:0 auto}.hero-image img{width:100%;height:100%;display:block}.hero-image .placeholder{aspect-ratio:16/9;background:var(--bg-card);width:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:14px;display:flex}.placeholder-label{font-family:var(--font-mono);background:var(--bg-secondary);border:1px solid var(--border);border-radius:4px;padding:4px 12px;font-size:12px}.features{background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.section-header{text-align:center;margin-bottom:64px}.section-label{text-transform:uppercase;letter-spacing:2px;color:var(--accent-cyan);margin-bottom:16px;font-size:13px;font-weight:600}.section-title{letter-spacing:-1px;margin-bottom:16px;font-size:44px;font-weight:700}.section-subtitle{color:var(--text-secondary);max-width:560px;margin:0 auto;font-size:18px}.features-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.feature-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:32px;transition:all .3s}.feature-card:hover{background:var(--bg-card-hover);border-color:#00d4ff4d;transform:translateY(-2px)}.feature-card.featured{grid-column:span 2}.feature-icon{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin-bottom:20px;font-size:24px;display:flex}.feature-card h3{margin-bottom:8px;font-size:18px;font-weight:600}.feature-card p{color:var(--text-secondary);font-size:14px;line-height:1.6}.feature-card .feature-image{border:1px solid var(--border);border-radius:12px;margin-top:24px;overflow:hidden}.feature-card .feature-image img{width:100%;display:block}.feature-card .feature-image .placeholder{aspect-ratio:16/9;background:var(--bg-secondary);width:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex}.how-it-works{position:relative}.steps{flex-direction:column;gap:80px;display:flex}.step{grid-template-columns:1fr 1fr;align-items:center;gap:64px;display:grid}.step.reverse{direction:rtl}.step.reverse>*{direction:ltr}.step-number{font-family:var(--font-mono);color:var(--accent-cyan);align-items:center;gap:8px;margin-bottom:12px;font-size:13px;font-weight:600;display:flex}.step-number:after{content:"";background:var(--border);flex:1;max-width:60px;height:1px}.step h3{letter-spacing:-.5px;margin-bottom:16px;font-size:28px;font-weight:700}.step p{color:var(--text-secondary);margin-bottom:20px;font-size:16px;line-height:1.7}.step-shortcut{font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--border);color:var(--accent-cyan);border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:13px;display:inline-flex}.step-image img{width:100%;height:100%;display:block}.step-image .placeholder{aspect-ratio:4/3;background:var(--bg-card);width:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex}.modes{background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.modes-grid{grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.mode-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .3s;position:relative;overflow:hidden}.mode-card:before{content:"";height:3px;position:absolute;top:0;left:0;right:0}.mode-card:hover{border-color:#ffffff1a;transform:translateY(-3px)}.mode-card.code:before{background:var(--accent-cyan)}.mode-card.walkthrough:before{background:var(--accent-purple)}.mode-card.dsa:before{background:var(--accent-teal)}.mode-card.design:before{background:var(--accent-orange)}.mode-card.sql:before{background:var(--accent-pink)}.mode-card.debug:before{background:var(--accent-yellow)}.mode-card:hover.code{box-shadow:0 8px 30px #00d4ff1a}.mode-card:hover.walkthrough{box-shadow:0 8px 30px #a78bfa1a}.mode-card:hover.dsa{box-shadow:0 8px 30px #34d3991a}.mode-card:hover.design{box-shadow:0 8px 30px #f973161a}.mode-card:hover.sql{box-shadow:0 8px 30px #f472b61a}.mode-card:hover.debug{box-shadow:0 8px 30px #facc151a}.mode-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.mode-shortcut{font-family:var(--font-mono);border:1px solid var(--border);color:var(--text-muted);background:var(--bg-secondary);border-radius:6px;padding:4px 10px;font-size:12px}.mode-card h3{margin-bottom:10px;font-size:18px;font-weight:600}.mode-card p{color:var(--text-secondary);font-size:14px;line-height:1.6}.mode-emoji{font-size:28px}.shortcuts .container{max-width:800px}.shortcuts-table{border:1px solid var(--border);border-spacing:0;border-radius:16px;width:100%;margin-top:48px;overflow:hidden}.shortcuts-table thead{background:var(--bg-card)}.shortcuts-table th{text-align:left;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);border-bottom:1px solid var(--border);padding:14px 24px;font-size:13px;font-weight:600}.shortcuts-table td{border-bottom:1px solid #2a2a3a80;padding:14px 24px;font-size:14px}.shortcuts-table tr:last-child td{border-bottom:none}.shortcuts-table tbody tr{transition:background .15s}.shortcuts-table tbody tr:hover{background:var(--bg-card)}.kbd{font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--border);color:var(--accent-cyan);white-space:nowrap;border-radius:6px;padding:4px 10px;font-size:12px}.why-section{background:var(--bg-secondary);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.why-grid{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:48px;display:grid}.why-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:32px}.why-card h3{margin-bottom:10px;font-size:18px;font-weight:600}.why-card p{color:var(--text-secondary);font-size:14px;line-height:1.7}.why-icon{margin-bottom:16px;font-size:28px}.setup{text-align:center}.setup-steps{text-align:left;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;display:grid}.setup-step{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:28px}.setup-step-num{font-family:var(--font-mono);color:var(--accent-cyan);margin-bottom:16px;font-size:12px;font-weight:600}.setup-step h3{margin-bottom:8px;font-size:16px;font-weight:600}.setup-step p{color:var(--text-secondary);font-size:14px;line-height:1.6}.setup-code{background:var(--bg-card);border:1px solid var(--border);text-align:left;border-radius:16px;max-width:600px;margin-top:48px;margin-left:auto;margin-right:auto;padding:28px}.setup-code pre{font-family:var(--font-mono);color:var(--text-secondary);font-size:14px;line-height:1.8;overflow-x:auto}.setup-code pre .comment{color:var(--text-muted)}.setup-code pre .cmd{color:var(--accent-cyan)}.cta{text-align:center;padding:120px 0;position:relative}.cta:before{display:none}.cta h2{letter-spacing:-1px;margin-bottom:16px;font-size:48px;font-weight:700}.cta p{color:var(--text-secondary);margin-bottom:32px;font-size:18px}.footer{border-top:1px solid var(--border);text-align:center;padding:40px 0}.footer p{color:var(--text-muted);font-size:13px}@media (width<=1024px){.hero h1{font-size:56px}.section-title{font-size:36px}.step{gap:40px}.step h3{font-size:24px}.features-grid{grid-template-columns:1fr 1fr}.feature-card.featured{grid-column:span 2}.modes-grid{grid-template-columns:repeat(2,1fr)}.cta h2{font-size:40px}}@media (width<=768px){section{padding:40px 0}.hero{padding:100px 0 40px}.nav-logo-text{font-size:16px}.nav-logo .logo-icon{width:34px;height:34px;font-size:15px}.how-it-works-btn{display:none}.hero h1{letter-spacing:-1px;font-size:40px}.hero-subtitle{font-size:16px}.hero-buttons{flex-direction:column;align-items:center;gap:12px}.hero-buttons .btn-primary,.hero-buttons .btn-secondary{width:100%;max-width:300px}.features-grid{grid-template-columns:1fr}.feature-card.featured{grid-column:span 1}.step{grid-template-columns:1fr;gap:32px}.step.reverse{direction:ltr}.modes-grid{grid-template-columns:1fr}.section-title{font-size:32px}.section-subtitle{font-size:16px}.nav-links{display:none}.why-grid,.setup-steps{grid-template-columns:1fr}.cta h2{font-size:32px}.cta p{font-size:16px}.cta{padding:50px 0}.steps{gap:48px}.section-header{margin-bottom:40px}.shortcuts-table th,.shortcuts-table td{padding:10px 14px;font-size:13px}.step h3{font-size:22px}.step p{font-size:15px}}@media (width<=480px){.container{padding:0 16px}section{padding:32px 0}.hero{padding:90px 0 32px}.hero h1{letter-spacing:-.5px;font-size:32px}.hero-subtitle{font-size:15px}.hero-buttons,.section-header{margin-bottom:40px}.section-title{font-size:26px}.section-subtitle{font-size:14px}.section-label{font-size:11px}.step h3{font-size:20px}.step p{font-size:14px}.nav-logo{font-size:15px}.nav-cta{padding:10px 20px;font-size:14px}.cta h2{font-size:26px}.cta p{font-size:15px}.cta{padding:40px 0}.steps{gap:36px}.section-header{margin-bottom:28px}.shortcuts-table th,.shortcuts-table td{padding:8px 10px;font-size:12px}.kbd{padding:3px 7px;font-size:11px}.setup-step{padding:20px}.hero-image{border-radius:12px}}.get-started-page{flex-direction:column;min-height:100vh;display:flex}.get-started-content{text-align:center;justify-content:center;align-items:center;padding:120px 24px 60px;display:flex}.get-started-content h1{letter-spacing:-1px;margin-bottom:12px;font-size:44px;font-weight:700}.get-started-subtitle{color:var(--text-secondary);margin-bottom:48px;font-size:16px}.info-list{text-align:left;max-width:460px;margin:0 auto;padding-left:20px;list-style:decimal}.info-list li{color:var(--text-secondary);padding:8px 0;font-size:15px}.info-list li strong{color:var(--text-primary)}.info-list a{color:var(--accent-cyan);font-weight:600}.qr-section{margin-bottom:32px}.qr-image{border-radius:16px;display:inline-block;overflow:hidden}.qr-image img{object-fit:contain;border-radius:8px;width:320px;height:320px;display:block}@media (width<=768px){.get-started-content{padding:100px 20px 60px}.get-started-content h1{font-size:32px}.get-started-subtitle{margin-bottom:32px}.qr-image img{width:100%;max-width:320px;height:auto}}@media (width<=480px){.get-started-content{padding:90px 16px 48px}.get-started-content h1{font-size:26px}.get-started-subtitle{margin-bottom:24px;font-size:14px}.qr-image img{width:100%;max-width:300px;height:auto}.qr-section{margin-bottom:24px}.info-list li{font-size:14px}}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0f;--bg-secondary:#111118;--bg-card:#16161f;--bg-card-hover:#1c1c28;--border:#2a2a3a;--text-primary:#f0f0f5;--text-secondary:#9898aa;--text-muted:#6a6a7a;--accent-cyan:#00d4ff;--accent-purple:#a78bfa;--accent-teal:#34d399;--accent-orange:#f97316;--accent-pink:#f472b6;--accent-yellow:#facc15;--accent-blue:#3b82f6;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "SF Mono", "Fira Code", monospace}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}a{color:var(--accent-cyan);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-cyan)}::selection{color:#fff;background:#00d4ff4d}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}img{max-width:100%;height:auto}