:root{color-scheme:light;--bg:#fbfbf8;--ink:#353633;--muted:#747670;--line:#dedfd9;--accent:#2d66c8;--chrome-tint:rgba(45,102,200,.055);font-family:Inter,"Microsoft YaHei",system-ui,sans-serif}
:root[data-theme=dark]{color-scheme:dark;--bg:#171a20;--ink:#e6e9ee;--muted:#a9b0bb;--line:#363c46;--accent:#91bafa;--chrome-tint:rgba(45,102,200,.09)}
.heading,footer{background:var(--chrome-tint)}
*{box-sizing:border-box}html,body{margin:0;width:100%;background:var(--bg);color:var(--ink)}a{touch-action:manipulation;color:var(--muted);text-decoration:none;font-size:12px;border-radius:4px;padding:6px 0;flex-shrink:0}a:hover{text-decoration:underline;color:var(--accent)}a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.player{display:flex;flex-direction:column;width:100%}.heading{display:flex;justify-content:space-between;align-items:center;height:104px;flex-shrink:0;padding:16px 24px;gap:16px}.eyebrow{font:500 10px/1.5 Consolas,monospace;letter-spacing:.12em;color:var(--muted);margin:0 0 6px}h1{margin:0;font-size:25px;font-weight:550;letter-spacing:-.035em}h1 span{display:block;margin:4px 0 0;letter-spacing:0;font-size:12px;font-weight:400;color:var(--muted)}.canvas{position:relative;width:100%;aspect-ratio:16/9;flex-shrink:0;overflow:hidden;background:#fff}iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;font-size:11px;color:var(--muted);height:44px;flex-shrink:0}#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.hint{font-size:10px;white-space:nowrap;flex-shrink:0}progress{display:block;border:0;width:100%;height:2px;flex-shrink:0;appearance:none}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent)}[hidden]{display:none!important}
:root:fullscreen .player{height:100dvh}:root:fullscreen .canvas{flex:1;min-height:0;aspect-ratio:auto}
:root[data-embedded="true"],:root[data-embedded="true"] body{overflow:hidden}
@media(max-width:640px){.heading{padding:16px}.heading h1{font-size:23px}.heading h1 span{font-size:11px}footer{padding:0 16px}.hint{display:none}}