body{font-family:system-ui,sans-serif;margin:0;background:#0f1117;color:#e6e6e6}header,main{padding:12px 16px;max-width:1200px;margin:auto}
h1{margin:0 0 4px;font-size:28px}h2{font-size:18px;margin:12px 0 6px}button{background:#4f8cff;color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:15px;cursor:pointer}
select{padding:6px;font-size:15px}ul{list-style:none;padding:0}li{padding:6px 0;border-bottom:1px solid #2a2d36;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.state{padding:2px 8px;border-radius:10px;background:#333;font-size:13px}.state.playing{background:#2f7d4f}.state.paused{background:#8a6d1f}.state.waiting{background:#555}.state.ended{background:#7a2f2f}
.row{display:flex;gap:12px;flex-wrap:wrap}.frame{flex:1 1 640px}.hint{color:#aab;line-height:1.5}
.panel{flex:1 1 300px}pre{background:#161922;padding:8px;border-radius:6px;font-size:12px;overflow:auto;max-height:300px;white-space:pre-wrap}
@media (max-width:700px){.frame{flex-basis:100%}}