:root{--bg: #0f172a;--bg-elevated: #1e293b;--bg-hover: #334155;--text: #e2e8f0;--text-muted: #94a3b8;--accent: #38bdf8;--danger: #ef4444;--success: #22c55e;--radius: 16px;--shadow: 0 10px 30px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.app{max-width:560px;margin:0 auto;padding:24px 20px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;min-height:100dvh}.app__header{text-align:center;padding:16px 0 8px}.app__title{font-size:1.75rem;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.app__subtitle{color:var(--text-muted);font-size:.9rem;margin-top:4px}.app__stage{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px 0 32px}.mic-banner{width:100%;max-width:420px;background:#ef44441f;border:1px solid rgba(239,68,68,.45);color:#fca5a5;border-radius:12px;padding:12px 16px;font-size:.85rem;line-height:1.45;text-align:center}.waveform{width:100%;max-width:320px;height:64px;display:block}.app__mic-zone{display:flex;justify-content:center}.app__hint{color:var(--text-muted);font-size:.95rem;text-align:center;min-height:1.5em}.record-btn{position:relative;width:112px;height:112px;border-radius:50%;border:3px solid var(--accent);background:var(--bg-elevated);color:var(--accent);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,background .2s ease,box-shadow .2s ease;box-shadow:0 0 #38bdf800}.record-btn:focus{outline:none}.record-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.record-btn:active{transform:scale(.94)}.record-btn__icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.record-btn__icon svg{width:100%;height:100%}.record-btn__timer{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;opacity:0;transition:opacity .2s ease}.record-btn[data-state=recording]{background:#ef44441f;border-color:var(--danger);color:var(--danger);animation:pulse 1.2s ease-out infinite}.record-btn[data-state=recording] .record-btn__timer{opacity:1}.record-btn[data-state=processing]{border-color:var(--text-muted);color:var(--text-muted);animation:none}.record-btn[data-state=error]{border-color:var(--danger);color:var(--danger);animation:shake .4s ease}@keyframes pulse{0%{box-shadow:0 0 #ef444473}70%{box-shadow:0 0 0 18px #ef444400}to{box-shadow:0 0 #ef444400}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.recordings{margin-top:8px}.recordings__header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.recordings__title{font-size:1.1rem;font-weight:600}.recordings__count{color:var(--text-muted);font-size:.85rem}.recordings__list{list-style:none;display:flex;flex-direction:column;gap:10px}.recordings__item{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;background:var(--bg-elevated);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow)}.recordings__item.is-playing{box-shadow:0 0 0 1px var(--accent),var(--shadow)}.recordings__progress{position:absolute;bottom:0;left:0;height:3px;width:0%;background:var(--accent);pointer-events:none}.recordings__info{flex:1;display:flex;flex-direction:column;min-width:0}.recordings__duration{font-weight:600;font-variant-numeric:tabular-nums}.recordings__meta{color:var(--text-muted);font-size:.8rem}.recordings__waveform{width:100%;height:40px;margin-top:6px;display:block}.recordings__actions{display:flex;align-items:center;gap:8px}.recordings__play,.recordings__download,.recordings__delete{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:background .15s ease,transform .1s ease}.recordings__play:focus,.recordings__download:focus,.recordings__delete:focus{outline:none}.recordings__play:focus-visible,.recordings__download:focus-visible,.recordings__delete:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.recordings__play{background:#22c55e26;color:var(--success)}.recordings__play:hover{background:#22c55e4d}.recordings__item.is-playing .recordings__play{background:#38bdf840;color:var(--accent)}.recordings__download{background:#38bdf826;color:var(--accent)}.recordings__download:hover{background:#38bdf84d}.recordings__delete{background:#ef44441f;color:var(--danger)}.recordings__delete:hover{background:#ef444447}.recordings__play:active,.recordings__download:active,.recordings__delete:active{transform:scale(.92)}.recordings__play svg,.recordings__download svg,.recordings__delete svg{width:18px;height:18px}.recordings__empty{color:var(--text-muted);text-align:center;padding:24px 0;font-size:.9rem}.recordings__audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.app__footer{margin-top:auto;padding-top:24px;text-align:center;color:var(--text-muted);font-size:.8rem}@media (prefers-reduced-motion: reduce){.record-btn[data-state=recording]{animation:none}}