:root{color:#10291d;background:#f2f5e8;font-family:Georgia,Times New Roman,serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button{color:#10291d;cursor:pointer;font:inherit;background:#f2f5e8;border:1px solid #10291d;border-radius:4px;min-height:3rem;padding:.7rem 1.4rem}button:hover{background:#dce8bd}button:focus-visible{outline-offset:3px;outline:3px solid #d54f30}.page{justify-content:center;align-items:center;min-height:100vh;padding:1.5rem;display:flex;position:relative;overflow:hidden}.recorder{text-align:center;background:#f2f5e8eb;border:1px solid #10291d;width:100%;max-width:34rem;padding:clamp(2rem,6vw,4rem);position:relative}.slot{color:#a23822;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.9rem}h1{margin:.5rem 0 1rem;font-size:clamp(2rem,5vw,3.2rem)}.status{max-width:26rem;min-height:3rem;margin:0 auto 1.5rem;line-height:1.45}.primary{color:#fff;background:#10291d;min-width:9rem;font-size:1.2rem}.primary:hover{background:#286043}.stop{background:#a23822}.countdown{color:#a23822;font-size:6rem;line-height:1}.actions{place-items:center;gap:.75rem;display:grid}audio,progress{width:100%;max-width:100%}progress{accent-color:#a23822;height:.75rem}.waveform{pointer-events:none;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.waveform{display:none}}