:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--background:#000;--text:#fff;--pending:#b4b4b4;--muted:#9a9a9a;--panel:#1e1e20e0;--panel-border:#ffffff24;--hover:#ffffff1f;--accent:#2563eb;--accent-hover:#1d4ed8;--danger:#dc2626;--danger-hover:#b91c1c;--focus:#93c5fd;--outline:#ffffff73;--band:#ffffff0d;--pad:clamp(12px, 3vmin, 48px);--margin-top:20;--margin-bottom:20;--margin-side:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}*{box-sizing:border-box}html,body{background:var(--background);height:100%;color:var(--text);margin:0;overflow:hidden}.stage{padding:max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right)) max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.box{margin:calc(var(--margin-top) * 1dvh) calc(var(--margin-side) * 1dvw) calc(var(--margin-bottom) * 1dvh);flex:none;position:relative;overflow:hidden}.text{overflow-wrap:break-word;will-change:transform;margin:0;font-weight:600;position:absolute;bottom:0;left:0;right:0}.text .pending{color:var(--pending)}body.adjusting .box{outline:2px dashed var(--outline);background:var(--band)}.hint{top:calc(var(--margin-top) * 1dvh);right:calc(var(--margin-side) * 1dvw);bottom:calc(var(--margin-bottom) * 1dvh);left:calc(var(--margin-side) * 1dvw);padding:var(--pad);text-align:center;color:var(--muted);pointer-events:none;place-content:center;display:grid;position:fixed}.hint[hidden]{display:none}.hint h1{color:var(--text);margin:0 0 .3em;font-size:clamp(2.5rem,9vw,7rem);font-weight:700;line-height:1.05}.hint p{margin:0;font-size:clamp(1.1rem,2.6vw,2rem);line-height:1.4}kbd{border:1px solid var(--panel-border);font:inherit;color:var(--text);border-radius:.3em;padding:.05em .4em}.controls{top:var(--pad);right:var(--pad);z-index:10;border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;align-items:center;gap:4px;padding:6px;font-size:15px;transition:opacity .3s;display:flex;position:fixed}body.quiet{cursor:none}body.quiet .controls{opacity:0;pointer-events:none}.controls button{min-width:44px;min-height:44px;color:var(--text);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-weight:600;display:inline-flex}.controls button:hover{background:var(--hover)}.controls button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.controls button:disabled{cursor:default;opacity:.7}.icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px}.controls .record{background:var(--accent);min-width:112px}.controls .record:hover:not(:disabled){background:var(--accent-hover)}body[data-state=recording] .controls .record{background:var(--danger)}body[data-state=recording] .controls .record:hover{background:var(--danger-hover)}.icon-stop{fill:currentColor;stroke:none}.icon-stop,.icon-exit,.spinner,.listening,body[data-state=recording] .icon-start{display:none}body[data-state=recording] .icon-stop{display:block}body[data-state=connecting] .icon-start,body[data-state=stopping] .icon-start{display:none}body[data-state=connecting] .spinner,body[data-state=stopping] .spinner{display:block}.spinner{border:2px solid;border-top-color:#0000;border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}body.fullscreen .icon-enter{display:none}body.fullscreen .icon-exit{display:block}body[data-state=recording] .listening{background:var(--danger);border-radius:50%;width:10px;height:10px;margin:0 8px;animation:1.6s ease-in-out infinite pulse;display:block}.panel{top:calc(var(--pad) + 66px);right:var(--pad);z-index:10;width:min(320px, calc(100vw - 2 * var(--pad)));border:1px solid var(--panel-border);background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;gap:16px;padding:16px;font-size:15px;display:grid;position:fixed}.panel[hidden]{display:none}.slider{grid-template-columns:1fr auto;align-items:center;gap:6px;display:grid}.slider output{color:var(--muted);font-variant-numeric:tabular-nums}.slider input{width:100%;accent-color:var(--accent);grid-column:1/-1;margin:0}.logos{--logo-height:clamp(28px, 5.5vmin, 56px);bottom:max(var(--pad), env(safe-area-inset-bottom));left:max(var(--pad), env(safe-area-inset-left));align-items:center;gap:calc(var(--logo-height) * .6);display:flex;position:fixed}.logo{opacity:.7;display:block}.logo:hover,.logo:focus-visible{opacity:1}.logo:focus-visible{outline:2px solid var(--focus);outline-offset:4px}.logo img{height:var(--logo-height);display:block}.error{bottom:var(--pad);z-index:10;width:max-content;max-width:min(calc(100vw - 2 * var(--pad)), 640px);color:#fff;background:#7f1d1d;border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.4;position:fixed;left:50%;transform:translate(-50%)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.3}}@media (width<=480px){.controls .record{min-width:44px}.controls .label{display:none}}@media (prefers-reduced-motion:reduce){.spinner,body[data-state=recording] .listening{animation:none}}