:root { --bg:#1a1a1e; --panel:#26262b; --text:#f0f0f2; --muted:#9999a5;
         --accent:#5b8def; --danger:#e85757; --ok:#5bc98c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
       min-height:100vh; display:flex; justify-content:center; }
main { max-width:640px; width:100%; padding:2rem 1.5rem; }
h1 { font-size:1.5rem; font-weight:600; margin:0 0 0.25rem; }
.subtitle { font-size:0.85rem; font-weight:400; color:var(--muted); }
.status { display:inline-block; padding:0.25rem 0.75rem; border-radius:999px;
          font-size:0.75rem; margin:0.5rem 0 1.5rem; background:var(--panel); }
.status.connecting { color:var(--muted); }
.status.ready { color:var(--ok); }
.status.recording { color:var(--danger); }
.status.thinking, .status.speaking { color:var(--accent); }
.status.error { color:var(--danger); background:#3a2222; }
.talk-btn { width:100%; padding:1.5rem; font-size:1.1rem; border:none;
            border-radius:16px; background:var(--panel); color:var(--text);
            cursor:pointer; display:flex; gap:0.75rem; align-items:center;
            justify-content:center; transition:transform 0.08s,background 0.08s; }
.talk-btn:hover { background:#2f2f37; }
.talk-btn:disabled { opacity:0.45; cursor:not-allowed; }
.talk-btn.recording { background:var(--danger); transform:scale(0.98); }
.talk-btn .icon { font-size:1.5rem; }
.hint { text-align:center; color:var(--muted); font-size:0.8rem; margin:0.75rem 0 1.5rem; }
kbd { background:#3a3a42; padding:0.1rem 0.35rem; border-radius:4px; font-family:monospace; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:0.75rem; margin-bottom:1.5rem; }
.metric { background:var(--panel); border-radius:10px; padding:0.75rem; text-align:center; }
.metric-label { font-size:0.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
.metric-value { font-size:1.25rem; font-weight:600; margin-top:0.25rem; }
.history { display:flex; flex-direction:column; gap:0.5rem; margin-bottom:2rem; }
.history-item { background:var(--panel); padding:0.75rem 1rem; border-radius:10px; font-size:0.9rem; line-height:1.5; }
.history-item.user { color:var(--muted); font-style:italic; }
.history-item .meta { font-size:0.7rem; color:var(--muted); margin-top:0.25rem; }
.about { color:var(--muted); font-size:0.85rem; background:var(--panel); border-radius:10px; padding:0.75rem 1rem; }
.about summary { cursor:pointer; }
.about ol { padding-left:1.25rem; }
.about code { background:#3a3a42; padding:0.1rem 0.3rem; border-radius:3px; font-size:0.8rem; }