:root{color:#17201d;background:#eef2ed;font-family:Segoe UI,Noto Sans KR,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}button{font:inherit}main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:48px 0 80px}.page-header{max-width:760px;margin-bottom:32px}.eyebrow{color:#16624b;font-size:12px;font-weight:800;letter-spacing:.14em}h1{margin:8px 0 12px;font-size:clamp(32px,5vw,56px);letter-spacing:-.04em}h2,h3{margin:0}.page-header>p:last-child{color:#52615b;line-height:1.7}.channels{display:grid;grid-template-columns:1fr;gap:20px}.channel,.event-panel{background:#fff;border:1px solid #d5ddd8;border-radius:18px;box-shadow:0 10px 30px #1c302712}.channel{padding:32px;border-radius:22px}.channel-heading{display:flex;align-items:start;justify-content:space-between;gap:16px}.channel-label{color:#65736d;font-size:13px}.channel h2{margin-top:4px;font-size:28px}.status{border-radius:999px;background:#edf1ee;padding:7px 11px;font-size:12px;font-weight:700}.status[data-state=ready]{color:#086440;background:#dff5e9}.status[data-state=error]{color:#9c241f;background:#ffe9e6}.status[data-state=connecting],.status[data-state=resuming]{color:#75520a;background:#fff2ce}.meter{height:6px;margin:22px 0;overflow:hidden;border-radius:999px;background:#e8ece9}.meter span{display:block;width:0;height:100%;background:#22a574;transition:width 80ms linear}.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}.controls button{min-height:44px;border:1px solid #cdd6d1;border-radius:11px;background:#f7f9f7;padding:10px 16px;cursor:pointer}.controls button[data-action=start]{color:#fff;border-color:#16624b;background:#16624b}.controls button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible{outline:3px solid #7bc7aa;outline-offset:2px}.transcript-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.transcript-grid section{min-height:280px;padding:18px;border-radius:12px;background:#f5f7f5}.transcript-grid h3{color:#53615b;font-size:13px}.transcript-grid ol{max-height:320px;margin:12px 0 0;padding-left:22px;overflow:auto}.transcript-grid li{margin-bottom:8px;line-height:1.45}.error{min-height:20px;margin:14px 0 0;color:#a12c26;font-family:ui-monospace,monospace;font-size:12px}.event-panel{margin-top:20px;padding:24px}.event-panel h2{font-size:18px}.event-panel ol{max-height:220px;overflow:auto;color:#52615b;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}@media(max-width:640px){main{width:min(100% - 20px,1180px);padding-top:28px}.channel{padding:18px}.transcript-grid{grid-template-columns:1fr}.transcript-grid section{min-height:210px;padding:14px}}