*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#111;--surface:#1a1a1a;--border:#333;--text:#e0e0e0;--text-dim:#888;--accent:#4a9eff;--red:#ff4a4a;--green:#4aff7a;--radius:6px}body{background:var(--bg);color:var(--text);justify-content:center;min-height:100vh;padding:2rem 1rem;font-family:SF Mono,Fira Code,Cascadia Code,Consolas,monospace;display:flex}main{flex-direction:column;gap:1.5rem;width:100%;max-width:600px;display:flex}header{text-align:center}h1{font-size:1.4rem;font-weight:600}.subtitle{color:var(--text-dim);margin-top:.25rem;font-size:.8rem}.status-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.5rem;padding:.75rem 1rem;display:flex}.status-row{align-items:center;gap:.5rem;font-size:.8rem;display:flex}#status{flex:1}.badge{text-transform:uppercase;border-radius:3px;padding:2px 6px;font-size:.65rem;font-weight:600}.badge-gpu{color:var(--green);background:#1a3a1a;border:1px solid #2a5a2a}.badge-cpu{color:#ffaa4a;background:#3a2a1a;border:1px solid #5a3a1a}.progress-container{flex-direction:column;gap:.25rem;display:flex}.progress-track{background:var(--border);border-radius:2px;height:4px;overflow:hidden}.progress-fill{background:var(--accent);width:0%;height:100%;transition:width .2s}.progress-label{color:var(--text-dim);font-size:.65rem}.controls{align-items:center;gap:.75rem;display:flex}.controls label{color:var(--text-dim);font-size:.75rem}select{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;padding:.4rem .6rem;font-family:inherit;font-size:.8rem}button{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;border:none;padding:.5rem 1.2rem;font-family:inherit;font-size:.8rem;font-weight:600;transition:background .15s,opacity .15s}button:hover:not(:disabled){opacity:.85}button:disabled{opacity:.4;cursor:not-allowed}button.recording{background:var(--red)}.rec-dot{background:var(--red);border-radius:50%;width:10px;height:10px;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.output-section{flex-direction:column;gap:.5rem;display:flex}.output-section label{color:var(--text-dim);font-size:.75rem}.output-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);white-space:pre-wrap;word-break:break-word;min-height:120px;padding:1rem;font-size:.85rem;line-height:1.5}.metrics{color:var(--text-dim);font-size:.7rem}.metrics summary{cursor:pointer;color:var(--text-dim);padding:.25rem 0;font-size:.75rem;font-weight:600}.metrics summary:hover{color:var(--text)}.metrics dl{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:auto 1fr;gap:.2rem 1rem;margin-top:.5rem;padding:.5rem .75rem;display:grid}.metrics dt{color:var(--text-dim)}.metrics dd{color:var(--text);text-align:right}footer{border-top:1px solid var(--border);padding-top:1rem}footer p{color:var(--text-dim);font-size:.65rem;line-height:1.5}footer code{color:var(--accent);font-size:.65rem}