:root{--fk-color-primary:#3f63e0;--fk-color-primary-strong:#2c4bc2;--fk-color-primary-soft:#f1f4fe;--fk-color-accent:#1f9d62;--fk-color-accent-strong:#187b4d;--fk-color-accent-soft:#e9f6ef;--fk-color-bg:#fff;--fk-color-surface:#fff;--fk-color-surface-muted:#eff1f4;--fk-color-surface-soft:#f7f8fa;--fk-color-text:#0b0d12;--fk-color-text-muted:#697180;--fk-color-text-faint:#9aa2ae;--fk-color-text-inverse:#f7f8fa;--fk-color-border:#e4e7ec;--fk-color-border-strong:#d0d5dc;--fk-color-success:#1f9d62;--fk-color-warning:#c77e14;--fk-color-danger:#d64545;--fk-color-info:#3f63e0;--fk-color-action:#0b0d12;--fk-color-action-hover:#30353e;--fk-chart-green:#2c9bad;--fk-chart-blue:#3f63e0;--fk-chart-purple:#7a5ae0;--fk-chart-orange:#c77e14;--fk-space-1:4px;--fk-space-2:8px;--fk-space-3:12px;--fk-space-4:16px;--fk-space-5:20px;--fk-space-6:24px;--fk-space-8:32px;--fk-space-10:40px;--fk-space-12:48px;--fk-radius-xs:3px;--fk-radius-sm:5px;--fk-radius-md:7px;--fk-radius-lg:10px;--fk-radius-xl:12px;--fk-radius-pill:999px;--fk-shadow-sm:0 1px 2px #0b0d120d;--fk-shadow-md:0 8px 24px #0b0d1214;--fk-shadow-lg:0 24px 60px #0b0d121f;--fk-ease:cubic-bezier(.3, 0, 0, 1);--fk-time-instant:80ms;--fk-time-fast:.12s;--fk-time-base:.16s;--fk-font-sans:Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--fk-font-mono:"Geist Mono", "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--fk-letter-tight:-.035em;--fk-letter-normal:-.01em}.fk-tnum{font-variant-numeric:tabular-nums}:root{color:var(--fk-color-text);background:var(--fk-color-bg);font-family:var(--fk-font-sans);font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.shell{min-height:100vh;padding:24px}.workspace{grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:24px;max-width:1440px;margin:0 auto;display:grid}.input-pane,.preview-pane{min-height:calc(100vh - 48px)}.input-pane{border:1px solid var(--fk-color-border);border-radius:var(--fk-radius-lg);background:var(--fk-color-surface);box-shadow:var(--fk-shadow-sm);padding:28px}.brand{color:var(--fk-color-primary);align-items:center;gap:10px;font-weight:850;display:inline-flex}h1{letter-spacing:var(--fk-letter-tight);margin:26px 0 16px;font-size:clamp(38px,5vw,58px);line-height:.98}.lede{color:var(--fk-color-text-muted);margin:0;font-size:17px;line-height:1.65}.generator-form{gap:16px;margin-top:32px;display:grid}label{color:var(--fk-color-text);gap:7px;font-weight:720;display:grid}label span,.caption{letter-spacing:.1em;text-transform:uppercase;color:var(--fk-color-text-muted);font-size:12px;font-weight:820}input{border:1px solid var(--fk-color-border);border-radius:var(--fk-radius-md);background:var(--fk-color-surface);width:100%;min-height:48px;color:var(--fk-color-text);padding:0 14px}input:focus{outline:3px solid var(--fk-color-primary-soft);border-color:var(--fk-color-primary)}button{border-radius:var(--fk-radius-md);background:var(--fk-color-primary);min-height:48px;color:var(--fk-color-text-inverse);cursor:pointer;border:0;justify-content:center;align-items:center;gap:9px;padding:0 18px;font-weight:820;display:inline-flex}button:hover:not(:disabled){background:var(--fk-color-primary-strong)}button:disabled{cursor:wait;opacity:.72}.spin{animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.notes,.error{border-radius:var(--fk-radius-md);margin-top:22px;padding:16px}.notes{background:var(--fk-color-accent-soft);color:var(--fk-color-text);border:1px solid var(--fk-color-border)}.notes p{margin:8px 0 0;line-height:1.55}.error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}.preview-pane{border-radius:var(--fk-radius-lg);background:var(--fk-color-surface-muted);border:1px solid var(--fk-color-border);overflow:hidden}.empty-state{min-height:calc(100vh - 48px);color:var(--fk-color-text-muted);place-content:center;justify-items:center;gap:16px;display:grid}.preview-toolbar{background:var(--fk-color-surface);border-bottom:1px solid var(--fk-color-border);justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:12px 18px;display:flex}.preview-toolbar div{gap:4px;display:grid}.preview-toolbar button{min-width:146px}.generated-site{background:var(--fk-color-surface);height:calc(100vh - 121px);overflow:auto}.generated-hero{grid-template-columns:minmax(0,1.05fr) minmax(260px,.95fr);align-items:center;gap:36px;min-height:76vh;padding:54px;display:grid}.app-icon{border-radius:18px;width:74px;height:74px;box-shadow:0 18px 38px #00000026}.generated-hero h2{letter-spacing:var(--fk-letter-tight);margin:22px 0 16px;font-size:clamp(48px,8vw,92px);line-height:.92}.generated-hero p,.generated-block p,.plans p{color:var(--fk-color-text-muted);font-size:17px;line-height:1.65}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.hero-actions a{border-radius:var(--fk-radius-md);background:var(--fk-color-primary);min-height:46px;color:var(--fk-color-text-inverse);align-items:center;gap:8px;padding:0 16px;font-weight:800;text-decoration:none;display:inline-flex}.hero-actions .secondary-link{color:var(--fk-color-text);border:1px solid var(--fk-color-border-strong);background:0 0}.phone-shot{object-fit:contain;filter:drop-shadow(0 30px 50px #00000038);border-radius:30px;justify-self:center;width:min(100%,420px);max-height:650px}.generated-grid,.plans{border-top:1px solid var(--fk-color-border);padding:40px 54px}.generated-grid{grid-template-columns:repeat(3,1fr);gap:22px;display:grid}.generated-block span{color:var(--fk-color-primary);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:820}.generated-block h3,.plans h3{letter-spacing:var(--fk-letter-normal);margin:10px 0;font-size:24px;line-height:1.15}.plan-list{gap:8px;margin-top:18px;display:grid}.plan-row{border-bottom:1px solid var(--fk-color-border);justify-content:space-between;gap:18px;padding:14px 0;display:flex}.plan-row span{color:var(--fk-color-text-muted);text-align:right}@media (width<=980px){.workspace,.generated-hero,.generated-grid{grid-template-columns:1fr}.input-pane,.preview-pane,.empty-state{min-height:auto}.generated-site{height:auto;overflow:visible}.generated-hero,.generated-grid,.plans{padding:34px 24px}}@media (width<=620px){.shell{padding:12px}.input-pane{padding:20px}.preview-toolbar,.plan-row{flex-direction:column;align-items:flex-start}.preview-toolbar button{width:100%}.plan-row span{text-align:left}}
