:root {
  color-scheme: light;
  --background:#f3f6fb; --surface:#fff; --text:#14213d; --muted:#61708a;
  --blue:#155eef; --red:#d92d20; --green:#067647; --amber:#b54708; --border:#dce3ee;
}
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:radial-gradient(circle at top right,#dce8ff,transparent 35%),var(--background); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button { font:inherit; touch-action:manipulation; }
.app { width:min(100%,700px); margin:0 auto; padding:max(24px,env(safe-area-inset-top)) 18px max(48px,env(safe-area-inset-bottom)); }
header { margin-bottom:24px; }
.eyebrow { margin:0 0 6px; color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(2.1rem,10vw,3.3rem); line-height:.95; letter-spacing:-.045em; }
h2 { margin:0; font-size:1.35rem; }
h3 { margin:0 0 10px; color:var(--muted); font-size:.9rem; }
.recorder { padding:28px 20px; border:1px solid rgba(220,227,238,.8); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(20,33,61,.12); text-align:center; }
.status { min-height:24px; color:var(--muted); font-weight:650; }
.status.error { color:var(--red); } .status.success { color:var(--green); }
.timer { margin:18px 0 22px; font-size:clamp(3.5rem,18vw,6.4rem); font-weight:750; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.record-button { display:flex; width:100%; min-height:88px; align-items:center; justify-content:center; gap:14px; border:0; border-radius:22px; background:var(--blue); box-shadow:0 12px 24px rgba(21,94,239,.26); color:#fff; cursor:pointer; font-size:clamp(1.25rem,5.5vw,1.55rem); font-weight:800; }
.record-button:active { transform:translateY(1px); }
.record-button:disabled { cursor:not-allowed; opacity:.55; box-shadow:none; }
.record-button.recording { background:var(--red); box-shadow:0 12px 24px rgba(217,45,32,.25); }
.record-button.sending { background:var(--muted); }
.record-dot { width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:currentColor; }
.recording .record-dot { animation:pulse 1.25s infinite; }
@keyframes pulse { 50% { transform:scale(.68); opacity:.48; } }
@media (prefers-reduced-motion:reduce) { .recording .record-dot { animation:none; } }
.hint { margin:14px 0 0; color:var(--muted); font-size:.88rem; }
.transcript-box { margin-top:22px; padding:16px; border:1px solid var(--border); border-radius:16px; background:#f8faff; text-align:left; }
.transcript-box p { max-height:170px; margin:0; overflow-y:auto; line-height:1.55; white-space:pre-wrap; }
.history { margin-top:34px; }
.section-heading,.memo-meta,.memo-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-heading { margin-bottom:14px; }
.link-button,.retry-button { border:0; background:transparent; color:var(--blue); cursor:pointer; font-size:.9rem; font-weight:750; padding:10px 4px; }
.empty-history { padding:26px 18px; border:1px dashed #bcc8da; border-radius:18px; color:var(--muted); text-align:center; }
#history-list { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.memo-card { padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--surface); }
.memo-meta { color:var(--muted); font-size:.82rem; }
.memo-text { display:-webkit-box; margin:12px 0 0; overflow:hidden; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.memo-actions { margin-top:12px; }
.badge { border-radius:999px; padding:5px 9px; font-size:.76rem; font-weight:800; }
.badge.sent { background:#dcfae6; color:var(--green); }
.badge.failed { background:#fee4e2; color:var(--red); }
.badge.pending { background:#fffaeb; color:var(--amber); }
.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; }
@media (min-width:620px) { .app { padding-inline:28px; } .recorder { padding:36px; } }