: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[data-action=scroll-delay]{margin-left:auto}.controls button[data-action=scroll-delay][data-state=off]{color:#6f5b22;background:#fff8df}.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{position:relative;min-height:280px;padding:18px;border-radius:12px;background:#f5f7f5}.transcript-grid h3{color:#53615b;font-size:13px}.transcript-grid ol{width:100%;max-height:320px;margin:12px 0 0;padding:0 8px 54px 44px;overflow:auto;scrollbar-gutter:stable}.transcript-grid li{margin-bottom:8px;line-height:1.45}.transcript-jump{position:absolute;right:30px;bottom:28px;min-height:38px;border:1px solid #b9c7c0;border-radius:999px;color:#fff;background:#16624b;padding:8px 14px;box-shadow:0 5px 18px #16624b33;cursor:pointer}.transcript-jump[hidden]{display:none}.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}.controls button[data-action=scroll-delay]{margin-left:0}.transcript-jump{right:26px;bottom:24px}}