@import "https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap";html,body,#root{height:100%;margin:0;font-family:Roboto,sans-serif}:root{--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:30px}*{box-sizing:border-box}svg{width:100%;height:100%;font-family:Allerta Stencil,sans-serif}svg text{stroke-width:2px;stroke:#386fa0;font-size:clamp(42px,11vw,100px);animation:4s ease-out forwards stroke}@keyframes stroke{0%{fill:#1a83cc00;stroke:#386fa0;stroke-dashoffset:25%;stroke-dasharray:0 50%;stroke-width:2px}70%{fill:#1a83cc00;stroke:#386fa0}80%{fill:#1a83cc00;stroke:#386fa0;stroke-width:3px}to{fill:#1a83cc;stroke:#386fa000;stroke-dashoffset:-25%;stroke-dasharray:50% 0;stroke-width:0}}.wrapper{width:100%;max-width:1100px;min-height:clamp(160px,30vh,320px);padding:var(--space-sm);background-color:#0000;flex:1;place-items:center;display:grid}.app-shell{text-align:center;min-height:100dvh;padding:var(--space-md);background:radial-gradient(125% 125% at 50% 90%,#fff 40%,#475569 100%);place-items:stretch stretch;display:grid}.app-shell>div{align-items:center;gap:var(--space-xl);flex-direction:column;width:min(1100px,100%);min-height:0;margin:0 auto;display:flex}.input-view{width:100%}.result-view{align-items:center;gap:var(--space-sm);flex-direction:column;width:min(900px,100%);display:flex}.result-actions{gap:var(--space-sm);flex-wrap:wrap;justify-content:center;display:flex}.backend-panel{width:min(850px,100%);padding:var(--space-sm);background:#fff;border:1px solid #d3e3f3;border-radius:12px}.backend-status-row{margin:0 0 var(--space-sm) 0;justify-content:center;align-items:center;gap:var(--space-xs);font-weight:600;display:flex}.start-backend-btn{width:auto}.status-pill{border-radius:999px;padding:2px 8px;font-size:.9rem}.status-ready{color:#0e5f2a;background:#dff8e8}.status-not-ready{color:#8b1f1f;background:#ffe3e3}.input-group{justify-content:center;align-items:stretch;gap:var(--space-lg);flex-direction:row;width:min(900px,100%);display:flex}.input-group>*{flex:280px;min-width:220px}.generate-btn{width:min(320px,100%)}audio{width:min(560px,100%)}@media (width<=900px){.app-shell>div{gap:var(--space-lg)}.input-group{gap:var(--space-md)}}@media (width<=640px){.app-shell{padding:var(--space-sm)}.app-shell>div{gap:var(--space-md)}.wrapper{min-height:clamp(130px,26vh,220px)}.input-group{gap:var(--space-sm);flex-direction:column;width:100%}.input-group>*{min-width:0}.generate-btn{width:100%}.backend-status-row{flex-direction:column;gap:6px}.result-actions{flex-direction:column;width:100%}.result-actions>*{width:100%}}