.web-app-nav{background:var(--web-surface-nav);z-index:100;padding:16px 0;display:flex;position:fixed;bottom:0;left:0;right:0}.web-app-nav__tab{cursor:pointer;color:var(--web-text-muted);background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:0;font-family:Outfit,sans-serif;font-size:12px;font-weight:500;text-decoration:none;display:flex}.web-app-nav__tab--active{color:var(--web-text-primary)}.web-app-nav__tab-icon{justify-content:center;align-items:center;width:24px;height:24px;display:flex}@media (width>=768px){.web-app-nav{display:none}}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--web-border-subtle) var(--web-surface-canvas)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--web-surface-canvas)}::-webkit-scrollbar-thumb{background:var(--web-border-subtle);border-radius:var(--web-radius-pill);border:2px solid var(--web-surface-canvas)}::-webkit-scrollbar-thumb:hover{background:var(--web-text-muted)}::-webkit-scrollbar-corner{background:var(--web-surface-canvas)}body{min-width:320px;min-height:100vh;margin:0}a{color:inherit;text-decoration:none}#root{min-height:100vh}.app-shell{min-height:100vh;padding:2rem 2rem 80px}.app-frame{gap:2rem;width:min(1100px,100%);margin:0 auto 4rem;display:grid}@media (width>=768px){.app-frame{margin-bottom:0}}.app-frame--home,.app-frame--generate{display:block}.app-frame.app-frame--generate{margin-bottom:0}@media (width>=768px){.app-shell--home,.app-shell--generate{padding:0}.app-frame--home,.app-frame--generate{width:100%;max-width:none;margin:0;display:block}.app-frame--home{flex-direction:column;gap:0;height:100dvh;display:flex;overflow:hidden}}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;display:flex}.app-kicker{max-width:32ch;color:var(--web-text-secondary);margin:.35rem 0 0}.app-nav{flex-wrap:wrap;gap:.75rem;display:flex}.app-nav__link,.app-cta{border-radius:var(--web-radius-pill);border:1px solid var(--web-border-subtle);color:var(--web-text-primary);background:#ffffff0d;justify-content:center;align-items:center;padding:.8rem 1rem;transition:transform .14s,background-color .14s,border-color .14s;display:inline-flex}.app-nav__link:hover,.app-cta:hover{background:#ffffff1a;transform:translateY(-1px)}.app-nav__link--active{background:#7dd3c724;border-color:#7dd3c76b}.app-nav__link:focus-visible,.app-cta:focus-visible{outline:2px solid var(--web-text-accent);outline-offset:3px}.page-actions{flex-wrap:wrap;gap:.75rem;display:flex}.app-cta{width:fit-content}.app-nav__button,.toast__dismiss{font:inherit;cursor:pointer}.app-nav__button:hover,.toast__dismiss:hover{background:#ffffff1a;transform:translateY(-1px)}.toast-stack{z-index:30;gap:.75rem;width:min(360px,100vw - 2rem);display:grid;position:fixed;top:1.5rem;right:1.5rem}.toast{border:1px solid var(--web-border-subtle);box-shadow:var(--web-shadow-panel);background:#09191ef0;border-radius:1rem;justify-content:space-between;gap:1rem;padding:1rem;display:flex}.toast--success{border-color:#7dd3c76b}.toast--error{border-color:#f79b8c6b}.toast__dismiss{color:var(--web-text-accent);background:0 0;border:0}@media (width<=640px){.app-shell{padding:0}.hero-copy h1{max-width:none}.toast-stack{width:auto;left:1rem;right:1rem}}:root{--web-surface-canvas:#090b0b;--web-surface-panel:#272a2a;--web-surface-panel-deep:#181b1b;--web-surface-success-soft:hsl(from var(--web-accent-strong) h s calc(l - 34));--web-surface-subtle:#1e1e1e33;--web-surface-badge:#0000001a;--web-surface-nav:#090b0b;--web-text-primary:#fff;--web-text-soft:#e4e7e7;--web-text-secondary:#a0aaab;--web-text-muted:#707a7b;--web-text-on-accent:#090b0b;--web-text-accent:var(--web-accent-from);--web-accent-from:#a2faac;--web-accent-to:#d7f25c;--web-accent-gradient:linear-gradient(to right, var(--web-accent-from), var(--web-accent-to));--web-accent-strong:hsl(from var(--web-accent-from) h 95 44);--web-border-subtle:#3f4647;--web-status-loading:#f4d27c;--web-status-success:#a2faac;--web-status-error:#f79b8c;--web-radius-card:1.25rem;--web-radius-pill:999px;--web-radius-soft:1rem;--web-radius-badge:.357rem;--web-radius-tile:.875rem;--web-surface-selected:color-mix(in srgb, var(--web-accent-from) 10%, transparent);--web-border-selected:var(--web-accent-from);--web-surface-tile:var(--web-surface-panel-deep);--web-shadow-panel:0 22px 48px #08161b47;color:var(--web-text-primary);background:var(--web-surface-canvas);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Outfit,Inter Tight,Segoe UI,sans-serif;font-weight:400;line-height:1.5}.page-stack{gap:1.5rem;display:grid}.page-stack--compact{gap:12px}.section-split{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;gap:1.5rem;display:grid}.hero-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:stretch;gap:1.5rem;display:grid}.hero-copy{align-content:center;gap:1.25rem;display:grid}.hero-copy h1{max-width:11ch;margin:0;font-size:clamp(2.6rem,6vw,5.2rem);line-height:.98}.pill-row,.button-row{flex-wrap:wrap;gap:.75rem;display:flex}.inline-links{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.24em;color:var(--web-text-accent);margin:0;font-size:.75rem;font-weight:700}.lede{max-width:58ch;color:var(--web-text-secondary);margin:0;font-size:1.05rem}.helper-copy{color:var(--web-text-secondary);margin:0}.inline-link{color:var(--web-text-accent)}.web-pill{border-radius:var(--web-radius-pill);background:var(--web-surface-subtle);border:1px solid var(--web-border-subtle);align-items:center;padding:.7rem .95rem;font-size:.95rem;display:inline-flex}.tab-strip{border-radius:var(--web-radius-pill);border:1px solid var(--web-border-subtle);background:#ffffff0d;flex-wrap:wrap;gap:.75rem;padding:.5rem;display:inline-flex}.tab-link{border-radius:var(--web-radius-pill);color:var(--web-text-secondary);justify-content:center;align-items:center;padding:.8rem 1rem;display:inline-flex}.tab-link--active{color:var(--web-text-primary);background:#7dd3c724}.form-stack{gap:1rem;display:grid}.field-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.field-stack{gap:.45rem;display:grid}.field-label{font-size:.95rem;font-weight:700}.field-input,.field-textarea,.field-select{border:1px solid var(--web-border-subtle);width:100%;color:var(--web-text-primary);font:inherit;background:#ffffff0f;border-radius:1rem;padding:.9rem 1rem}.field-textarea{resize:vertical;min-height:8rem}.result-media-frame{border:1px solid var(--web-border-subtle);background:#ffffff0a;border-radius:1.1rem;overflow:hidden}.result-media{width:100%;height:auto;display:block}.modal-scrim{z-index:40;background:#050c0fb8;place-items:center;padding:1.5rem;display:grid;position:fixed;inset:0}.modal-card{width:min(560px,100%)}.web-panel{border-radius:var(--web-radius-soft);border:1px solid var(--web-border-subtle);background:var(--web-surface-panel);box-shadow:var(--web-shadow-panel);gap:1rem;padding:1.5rem;display:grid}.app-page-vt{view-transition-name:app-page}.web-app-nav{view-transition-name:app-bottom-nav}@media (prefers-reduced-motion:no-preference){::view-transition-old(app-page){animation-duration:.3s;animation-timing-function:cubic-bezier(.32,.72,0,1);animation-fill-mode:both}::view-transition-new(app-page){animation-duration:.3s;animation-timing-function:cubic-bezier(.32,.72,0,1);animation-fill-mode:both}html[data-nav-direction=forward]::view-transition-new(app-page){animation-name:web-vt-enter-from-right}html[data-nav-direction=forward]::view-transition-old(app-page){animation-name:web-vt-exit-to-left}html[data-nav-direction=back]::view-transition-old(app-page){animation-name:web-vt-exit-to-right}html[data-nav-direction=back]::view-transition-new(app-page){animation-name:web-vt-enter-from-left}}@keyframes web-vt-enter-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes web-vt-exit-to-left{0%{transform:translate(0)}to{transform:translate(-25%)}}@keyframes web-vt-exit-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes web-vt-enter-from-left{0%{opacity:.4;transform:translate(-25%)}to{opacity:1;transform:translate(0)}}
