:root{--bg:#fff;--surface:#f7f8fa;--border:#e5e7eb;--text:#1a1a2e;--text-secondary:#6b7280;--primary:#0f3460;--primary-light:#e8f0fe;--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--radius:12px;--radius-sm:8px}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--text);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.app{flex-direction:column;min-height:100vh;display:flex}.main{flex:1}.nav{border-bottom:1px solid var(--border);background:var(--bg);justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.nav-logo{color:var(--primary);font-size:1.25rem;font-weight:700;text-decoration:none}.nav-links{gap:1.5rem;display:flex}.nav-links a{color:var(--text-secondary);font-size:.9rem;font-weight:500;text-decoration:none;transition:color .15s}.nav-links a:hover{color:var(--primary)}.container{max-width:900px;margin:0 auto;padding:2rem}.container-wide{max-width:1100px;margin:0 auto;padding:2rem}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-outline{color:var(--text);border:1px solid var(--border);background:0 0}.btn-outline:hover{background:var(--surface)}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-sm{padding:.4rem .9rem;font-size:.8rem}.btn-lg{padding:1rem 2rem;font-size:1rem}.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}.card-header{margin-bottom:1rem;font-size:1.1rem;font-weight:600}.input,.select,.textarea{border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);background:var(--bg);padding:.75rem;font-size:.9rem;transition:border-color .15s}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);outline:none}.textarea{resize:vertical;min-height:80px}.label{color:var(--text);margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.hint{color:var(--text-secondary);margin-top:.25rem;font-size:.8rem}.toggle{align-items:center;gap:1rem;padding:.75rem 0;display:flex}.toggle-switch{flex-shrink:0;width:40px;height:22px;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{cursor:pointer;background:#d1d5db;border-radius:22px;transition:all .2s;position:absolute;inset:0}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:all .2s;position:absolute;bottom:2px;left:2px}.toggle-switch input:checked+.toggle-slider{background:var(--primary)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px)}.toggle-label{font-size:.9rem}.toggle-value{max-width:120px;margin-left:auto}.tag{border-radius:999px;padding:.2rem .6rem;font-size:.75rem;font-weight:500;display:inline-block}.tag-success{color:#065f46;background:#d1fae5}.tag-warning{color:#92400e;background:#fef3c7}.tag-info{background:var(--primary-light);color:var(--primary)}.grid-2{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}.grid-3{grid-template-columns:1fr 1fr 1fr;gap:1.5rem;display:grid}.hero{text-align:center;background:linear-gradient(135deg, var(--primary) 0%, #1a1a2e 100%);color:#fff;padding:5rem 2rem 3rem}.hero h1{letter-spacing:-.02em;margin-bottom:1rem;font-size:2.5rem}.hero p{opacity:.85;max-width:600px;margin:0 auto 2rem;font-size:1.15rem}.response-card{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1rem;padding:1.25rem}.response-card-header{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.response-stars{font-size:1.1rem}.response-model{background:var(--surface);border-radius:999px;padding:.2rem .5rem;font-size:.75rem;font-weight:500}.response-sample{background:var(--surface);border-radius:var(--radius-sm);color:var(--text-secondary);margin-bottom:.75rem;padding:.75rem;font-size:.85rem}.response-text{white-space:pre-wrap;font-size:.95rem;line-height:1.6}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:24px;height:24px;margin:2rem auto;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.steps{gap:.5rem;margin-bottom:2rem;display:flex}.step{text-align:center;border-radius:var(--radius-sm);background:var(--surface);color:var(--text-secondary);flex:1;padding:.75rem;font-size:.85rem;font-weight:500}.step.active{background:var(--primary);color:#fff}.step.done{background:var(--success);color:#fff}.alert{border-radius:var(--radius-sm);margin-bottom:1rem;padding:1rem;font-size:.9rem}.alert-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.alert-success{color:#065f46;background:#f0fdf4;border:1px solid #bbf7d0}@media (width<=768px){.grid-2,.grid-3{grid-template-columns:1fr}.hero h1{font-size:1.75rem}.container{padding:1rem}}.landing-nav{z-index:100;background:0 0;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:absolute;top:0;left:0;right:0}.landing-logo{color:#fff;font-size:1.25rem;font-weight:700;text-decoration:none}.landing-nav-links{align-items:center;gap:1.5rem;display:flex}.landing-nav-links a:not(.btn){color:#ffffffbf;font-size:.9rem;font-weight:500;text-decoration:none;transition:color .15s}.landing-nav-links a:not(.btn):hover{color:#fff}.landing-hero{text-align:center;color:#fff;background:linear-gradient(135deg,#0f3460 0%,#1a1a2e 50%,#0f3460 100%);padding:8rem 2rem 5rem;position:relative;overflow:hidden}.landing-hero-bg{pointer-events:none;background:radial-gradient(at 50% 0,#ffffff0f 0%,#0000 60%);position:absolute;inset:0}.landing-badge{color:#fffc;background:#ffffff14;border:1px solid #ffffff26;border-radius:999px;margin-bottom:1.5rem;padding:.35rem 1.1rem;font-size:.8rem;display:inline-block}.landing-hero-title{letter-spacing:-.02em;max-width:700px;margin:0 auto 1rem;font-size:2.75rem;font-weight:700;line-height:1.2}.landing-hero-sub{opacity:.8;max-width:600px;margin:0 auto 2rem;font-size:1.1rem;line-height:1.6}.landing-hero-input{gap:.75rem;max-width:640px;margin:0 auto;display:flex}.landing-input{border-radius:var(--radius-sm);color:#fff;background:#ffffff1a;border:1px solid #fff3;flex:1;padding:.9rem 1.25rem;font-size:1rem}.landing-input::placeholder{color:#fff6}.landing-input:focus{background:#ffffff26;border-color:#fff6;outline:none}.landing-hero-hint{opacity:.5;margin-top:1rem;font-size:.8rem}.landing-section{padding:5rem 0}.landing-section-alt{background:var(--surface)}.landing-section-title{text-align:center;margin-bottom:.75rem;font-size:1.8rem;font-weight:700}.landing-section-sub{text-align:center;color:var(--text-secondary);margin-bottom:3rem;font-size:1rem}.landing-steps{grid-template-columns:repeat(3,1fr);gap:2rem;display:grid}.landing-step-card{text-align:center;padding:2rem 1.5rem}.landing-step-num{background:var(--primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 1rem;font-size:1.25rem;font-weight:700;display:flex}.landing-step-card h3{margin-bottom:.5rem;font-size:1.05rem}.landing-step-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.landing-features{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.landing-feature-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem;transition:box-shadow .2s,transform .2s}.landing-feature-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000000f}.landing-feature-icon{margin-bottom:.75rem;font-size:2rem}.landing-feature-card h3{margin-bottom:.5rem;font-size:1rem}.landing-feature-card p{color:var(--text-secondary);font-size:.85rem;line-height:1.6}.landing-example{max-width:600px;margin:0 auto}.landing-response-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);margin-bottom:1rem;padding:1.25rem}.landing-response-header{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.landing-response-stars{font-size:1rem;font-weight:600}.landing-response-sample{background:var(--surface);border-radius:var(--radius-sm);color:var(--text-secondary);margin-bottom:.75rem;padding:.75rem;font-size:.85rem}.landing-response-text{color:var(--text);font-size:.9rem;line-height:1.7}.landing-tech-grid{grid-template-columns:1fr 1fr;gap:2rem;max-width:700px;margin:0 auto;display:grid}.landing-tech-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:2rem}.landing-tech-name{margin-bottom:.25rem;font-size:1.25rem;font-weight:700}.landing-tech-use{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem;font-size:.8rem;font-weight:600}.landing-tech-card p{color:var(--text-secondary);font-size:.9rem;line-height:1.6}.landing-tech-note{text-align:center;color:var(--text-secondary);margin-top:2rem;font-size:.85rem;font-style:italic}.landing-cta{color:#fff;background:linear-gradient(135deg,#0f3460 0%,#1a1a2e 100%);padding:5rem 2rem}.landing-cta-title{margin-bottom:.75rem;font-size:2rem;font-weight:700}.landing-cta-sub{opacity:.8;max-width:500px;margin:0 auto;font-size:1.05rem;line-height:1.5}.landing-footer{color:#ffffff80;background:#111;padding:3rem 2rem 1.5rem;font-size:.85rem}.landing-footer-inner{justify-content:space-between;align-items:flex-start;gap:2rem;margin-bottom:2rem;display:flex}.landing-footer-brand p{margin-top:.5rem;font-size:.8rem}.landing-footer-links{flex-direction:column;gap:.5rem;display:flex}.landing-footer-links a{color:#ffffff80;text-decoration:none;transition:color .15s}.landing-footer-links a:hover{color:#fff}.landing-footer-bottom{text-align:center;border-top:1px solid #ffffff1a;padding-top:1.5rem}@media (width<=768px){.landing-hero-title{font-size:1.75rem}.landing-hero-input{flex-direction:column}.landing-steps{grid-template-columns:1fr;gap:1rem}.landing-features,.landing-tech-grid{grid-template-columns:1fr}.landing-nav{padding:.75rem 1rem}.landing-nav-links a:not(.btn){display:none}.landing-footer-inner{text-align:center;flex-direction:column}}