:root { --bg:#0f1115; --fg:#e6e6e6; --muted:#9aa4ad; --card:#151823; --accent:#6ea8fe; }
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:15px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto}
.wrap{max-width:980px;margin:24px auto;padding:16px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
h2{margin:0;font-weight:700}
.muted{color:var(--muted)}
.controls{display:flex;gap:8px;align-items:center;margin:12px 0}
button{background:#1f2639;color:#fff;border:1px solid #2a3350;padding:10px 14px;border-radius:12px;cursor:pointer}
button:disabled{opacity:.5;cursor:not-allowed}
.panes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pane{background:var(--card);border:1px solid #22283a;border-radius:14px;padding:12px}
.pane h3{margin:0 0 8px 0;font-size:14px;color:#cfd7ff}
.box{min-height:80px;background:#0d101a;border:1px dashed #2a3350;border-radius:10px;padding:10px;white-space:pre-wrap;word-break:break-word}
.box.final{border-style:solid}
footer{margin-top:16px;border-top:1px solid #1c2235;padding-top:10px}
audio{width:100%;margin-top:8px}