:root{
  --paper:#f5f6f4; --panel:#ffffff; --ink:#1d2a2f; --muted:#64757b;
  --line:#d9dfdd; --teal:#0e5a63; --teal-d:#0a444b; --live:#d9482b; --interim:#8a979b; --on-teal:#fff;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#101719; --panel:#172124; --ink:#e6eeee; --muted:#8fa2a7; --line:#2a393d; --teal:#4fb3bf; --teal-d:#7fcbd4; --live:#ff7a5c; --interim:#7b8c91; --on-teal:#06262a;}
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 "Public Sans",system-ui,sans-serif;display:flex;flex-direction:column}
header{padding:20px clamp(16px,4vw,40px) 12px}
h1{margin:0;font-size:1.35rem;font-weight:700}
header p{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0 clamp(16px,4vw,40px) 14px}
select,button{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
select:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
button{cursor:pointer}
button:hover{border-color:var(--teal)}
#mic{background:var(--teal);color:var(--on-teal);border-color:var(--teal);font-weight:500;display:flex;align-items:center;gap:8px;padding:9px 18px}
#mic:hover{background:var(--teal-d)}
#mic.on{background:var(--live);border-color:var(--live);color:#fff}
.dot{width:10px;height:10px;border-radius:50%;background:currentColor}
#mic.on .dot{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){#mic.on .dot{animation:none}}
.spacer{flex:1}
#status{font-size:.85rem;color:var(--muted)}
#status.err{color:var(--live)}
main{flex:1;min-height:0;margin:0 clamp(16px,4vw,40px) clamp(16px,3vw,28px);background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;overflow:hidden}
.heads,.row{display:grid;grid-template-columns:1fr 1fr}
.heads{border-bottom:1px solid var(--line);font-weight:500;font-size:.85rem;color:var(--muted)}
.heads div{padding:10px 18px}
.heads div+div,.row .t{border-left:1px solid var(--line)}
#log{flex:1;overflow-y:auto}
.row{border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row div{padding:12px 18px;overflow-wrap:anywhere}
.row .t{color:var(--teal-d);font-weight:500}
.row.interim .s,.row.interim .t{color:var(--interim);font-weight:400}
.empty{padding:36px 18px;color:var(--muted);text-align:center}
@media (max-width:640px){
  .heads,.row{grid-template-columns:1fr}
  .heads div+div{display:none}
  .row .t{border-left:0;padding-top:0}
}