:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f6f7fb;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:280px;margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}.voice-app{width:min(100%,680px);min-height:100svh;padding:max(28px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(36px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));text-align:center;grid-template-rows:auto 1fr auto;gap:32px;margin:0 auto;display:grid}.app-header{justify-content:center;align-items:center;gap:12px;display:flex}.app-header img{border-radius:13px}.brand-copy{text-align:left;gap:2px;display:grid}h1{letter-spacing:-.04em;margin:0;font-size:clamp(1.3rem,5vw,1.7rem);font-weight:750}.brand-copy>span{color:#697080;letter-spacing:.08em;font-size:.75rem;font-weight:600}.recorder{align-self:center;padding:36px 0}.status{color:#576176;min-height:1.5em;margin:0 0 30px;line-height:1.5}.actions{justify-content:center;gap:clamp(16px,5vw,32px);display:flex}.audio-button{aspect-ratio:1;color:#172033;cursor:pointer;touch-action:manipulation;background:#fff;border:1px solid #dfe5ef;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:clamp(112px,34vw,168px);transition:transform .15s,background .15s,box-shadow .15s;display:flex;box-shadow:0 10px 32px #1720330c}.emoji{font-size:clamp(42px,12vw,62px);line-height:1.15}.button-label{font-size:.85rem;font-weight:650}.audio-button:active:not(:disabled){transform:scale(.95)}.audio-button:focus-visible{outline-offset:6px;outline:3px solid #365dbb}.audio-button:disabled{opacity:.5;cursor:wait}[data-phase=playing] .audio-button:disabled{cursor:default}[data-phase=playing] .reverse-button:disabled{opacity:1}.stop-button{background:#fff0f0;border-color:#edb8b8;box-shadow:0 0 0 10px #fbe5e580}.reverse-button{background:#e9efff;border-color:#cbd8f7}[data-phase=recording] .status{color:#a52b35}[data-phase=playing] .reverse-button{box-shadow:0 0 0 10px #dce6ff80}.error{color:#a52b35;max-width:350px;margin:28px auto 0;font-size:.95rem;line-height:1.5}.timer-area{gap:6px;display:grid}.timer-label{color:#576176;font-size:.8rem}.timer{letter-spacing:.03em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,8vw,2.75rem);font-weight:450}@media (hover:hover){.audio-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 14px 36px #17203316}}@media (prefers-reduced-motion:reduce){.audio-button{transition:none}}