:root{--yellow: #cfff00;--grey-light: #efefef;--purple: #9f81ff;--dark: #012131;--pill-bg: #04141d;--inactive: #5c6e72;--video-bg: #07151c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#000;font-family:Segoe UI,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;overscroll-behavior:none}#app{height:100dvh;margin:0 auto;max-width:480px;position:relative;overflow:hidden}.screen{height:100%;display:flex;flex-direction:column;background:var(--dark);position:relative}.video-zone{position:relative;width:100%;aspect-ratio:1 / 1;max-height:60dvh;flex:none;background:var(--video-bg);overflow:hidden}.video{display:block;width:100%;height:100%;object-fit:cover;background:var(--video-bg)}.video-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.video-placeholder svg{width:86px;height:86px;opacity:.35}.video-placeholder polygon{fill:none;stroke:#fff;stroke-width:3}.replay-btn{position:absolute;right:18px;bottom:-30px;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;z-index:5;display:none}.replay-btn img{width:100%;height:100%;display:block}.controls{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;padding:22px 20px 16px;min-height:0;overflow-y:auto}.caption{color:var(--grey-light);text-align:center;font-size:20px;line-height:1.35;letter-spacing:.2px;min-height:2.7em;margin-bottom:18px;display:flex;align-items:center;justify-content:center}.pill{width:100%;display:flex;align-items:center;gap:6px;min-height:64px;padding:0 12px 0 22px;border-radius:999px;background:var(--pill-bg);border:1.5px solid var(--inactive);transition:border-color .15s ease}.text-input{flex:1 1 auto;min-width:0;display:none;border:0;outline:0;background:transparent;color:var(--yellow);font-size:18px;font-family:inherit}.text-input::placeholder{color:#cfff0080}.waveform{flex:1 1 auto;min-width:0;height:40px;display:none}.dots{flex:1 1 auto;display:none;align-items:center;gap:6px;padding-left:4px}.dots span{width:6px;height:6px;border-radius:50%;background:var(--inactive);animation:dot 1.2s infinite ease-in-out}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}@keyframes dot{0%,60%,to{opacity:.25}30%{opacity:1}}.icon-btn{flex:none;width:46px;height:46px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}.icon-btn img{width:100%;height:100%;object-fit:contain;display:block}.icon-btn:disabled{cursor:default}.languages{display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:center;margin:22px 0 6px}.lang{position:relative;width:60px;height:60px;padding:0;border:0;background:none;cursor:pointer}.lang img{width:100%;height:100%;display:block}.lang .lang-active{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .12s ease}.lang.selected .lang-active{opacity:1}.lang.lang-text{display:grid;place-items:center;border-radius:50%;border:2px solid var(--inactive);background:var(--pill-bg);color:var(--grey-light);font-family:inherit;font-size:17px;font-weight:700;line-height:1;transition:border-color .12s ease,color .12s ease}.lang.lang-text.selected{border-color:var(--yellow);color:var(--yellow)}.logo{width:230px;max-width:80%;margin-top:auto;align-self:center;opacity:.95;object-fit:contain}.screen[data-state=wait] .text-input,.screen[data-state=keyboard] .text-input,.screen[data-state=eager] .text-input,.screen[data-state=listening] .waveform{display:block}.screen[data-state=processing] .dots,.screen[data-state=response] .dots{display:flex}.screen[data-state=wait] .pill,.screen[data-state=keyboard] .pill,.screen[data-state=eager] .pill,.screen[data-state=listening] .pill{border-color:var(--yellow)}.screen[data-state=response] .replay-btn{display:block}.screen.keyboard-open .languages,.screen.keyboard-open .logo{display:none}.screen.keyboard-open .video-zone{max-height:26dvh}.policy-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column;padding:28px 22px 24px;background:#2d0202db;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:20}.screen[data-state=policy] .policy-overlay{display:flex}.policy-text{flex:1 1 auto;overflow-y:auto;color:#fff;font-size:15px;line-height:1.55;white-space:pre-wrap;margin-bottom:20px;padding-right:6px}.policy-actions{display:flex;gap:14px;flex:none}.policy-btn{flex:1 1 0;min-height:54px;border-radius:999px;font-size:17px;font-weight:700;font-family:inherit;cursor:pointer;border:2px solid var(--yellow)}.policy-btn.confirm{background:var(--yellow);color:var(--dark)}.policy-btn.cancel{background:transparent;color:var(--yellow)}.devbar{position:fixed;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;padding:6px;background:#000000a8;z-index:50;font-size:11px}.devbar.hidden{display:none}.devbar button{background:#16323d;color:#cfe;border:1px solid #2c4a55;border-radius:6px;padding:4px 8px;cursor:pointer;font-family:inherit}.devbar button.active{background:var(--yellow);color:var(--dark);border-color:var(--yellow);font-weight:700}.screen.video-playing .video-placeholder{display:none}.error-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;padding:32px;background:var(--dark);z-index:40}.error-overlay.visible{display:flex}.error-text{color:var(--grey-light);text-align:center;font-size:18px;line-height:1.5;max-width:320px}
