:root{--bg:#1B1F3B;--surface:#272C57;--text:#F4F1FF;--muted:#A9ADD6;--accent:#FFC857;--accentText:#1B1F3B}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:18px/1.5 Georgia,'Times New Roman',serif}
main{max-width:30rem;margin:0 auto;padding:2.5rem 1.25rem;display:flex;flex-direction:column;gap:1.5rem}
h1{font-size:2.2rem;line-height:1.15;margin:0 0 .5rem}h2{font-size:1.8rem;margin:0}
header p{color:var(--muted);margin:0}
section{display:flex;flex-direction:column;gap:1rem}
input[type=text]{font:inherit;padding:.9rem 1rem;border-radius:.6rem;border:2px solid transparent;background:var(--surface);color:var(--text)}
input[type=text]::placeholder{color:var(--muted)}
button,.btn{font:600 1.05rem system-ui,sans-serif;cursor:pointer;text-align:center}
.big{display:block;padding:1.2rem;border:0;border-radius:.8rem;background:var(--accent);color:var(--accentText)}
.big.alt{background:var(--surface);color:var(--text);outline:2px solid var(--accent);outline-offset:-2px}
.ghost{background:none;border:0;color:var(--muted);padding:.6rem;text-decoration:underline}
.timer{font:600 3.5rem system-ui,sans-serif;text-align:center;margin:1rem 0}
.rec{background:#FF6B6B;color:#fff}
.error{background:#5a1f2e;padding:.8rem 1rem;border-radius:.6rem;margin:0}
#preview img{width:100%;border-radius:.8rem}#preview audio{width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}