:root { color-scheme: light; --ink:#1d2521; --muted:#68716b; --paper:#f5f2eb; --card:#fffdf8; --green:#235a45; --orange:#e36c37; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:radial-gradient(#938b7b 0.6px, transparent 0.6px); background-size:8px 8px; }
main { position:relative; width:min(100%,520px); margin:auto; padding:48px 22px calc(40px + env(safe-area-inset-bottom)); }
.eyebrow { color:var(--green); font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:12px 0 14px; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(36px,10vw,54px); line-height:1.15; letter-spacing:-.04em; }
header p { margin:0; color:var(--muted); line-height:1.75; font-size:15px; }
.recorder { margin-top:40px; padding:36px 22px 30px; border:1px solid #ded9ce; border-radius:28px; background:rgba(255,253,248,.86); text-align:center; box-shadow:0 18px 50px rgba(34,46,39,.08); }
.status-icon { display:grid; place-items:center; width:92px; height:92px; margin:auto; border-radius:50%; background:var(--green); color:white; font-size:40px; font-weight:800; box-shadow:0 12px 30px rgba(35,90,69,.25); }
.pulse-ring { display:grid; place-items:center; width:184px; height:184px; margin:auto; border-radius:50%; background:rgba(35,90,69,.08); transition:.25s; }
#record { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; width:144px; height:144px; border:0; border-radius:50%; background:var(--green); color:white; font:700 16px inherit; box-shadow:0 12px 30px rgba(35,90,69,.25); -webkit-tap-highlight-color:transparent; }
#record:disabled { opacity:.6; }
.mic { font-size:25px; color:#ffddd0; }
.recording .pulse-ring { animation:pulse 1.4s infinite; background:rgba(227,108,55,.12); }
.recording #record { background:var(--orange); }
.recording .mic { width:20px; height:20px; border-radius:4px; background:white; color:transparent; }
@keyframes pulse { 50% { transform:scale(1.04); box-shadow:0 0 0 14px rgba(227,108,55,.08); } }
.recorder h2 { margin:24px 0 5px; font-size:20px; }
.recorder p { margin:0; color:var(--muted); font-size:14px; }
#timer { display:block; margin-top:12px; font:600 14px ui-monospace,monospace; letter-spacing:.08em; color:var(--green); }
.result,.setup { margin-top:18px; padding:25px; border-radius:22px; background:var(--card); border:1px solid #ded9ce; }
.saved { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.12em; }
.result h2,.setup h2 { margin:12px 0 8px; font:700 24px Georgia,"Yu Mincho",serif; }
.result p,.setup p { color:var(--muted); line-height:1.7; white-space:pre-line; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0; }
.tags span { padding:5px 9px; border-radius:999px; background:#edf2ee; color:var(--green); font-size:12px; }
.result a { color:var(--green); font-weight:700; text-decoration:none; }
code { padding:2px 5px; background:#eee9de; border-radius:5px; }
@media (min-width:700px) { main { padding-top:70px; } }