:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#e7edf0;background:#11171c;--cyan:#69cbd6;--muted:#98a8b1}
*{box-sizing:border-box}body{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:22px 24px 14px;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:48px 48px}
.page-header,main,footer{width:min(100%,1600px)}.page-header{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px}h1{font-size:18px;letter-spacing:.08em;font-weight:600;margin:0 0 7px;color:var(--cyan)}.page-header p{margin:0;font-size:13px;color:var(--muted)}.page-header .metadata{font-size:12px;line-height:1.6;text-align:right}main{width:min(100%,1600px,calc((100dvh - 194px)*1.777778));margin:auto 0}.player{position:relative;width:100%;aspect-ratio:16/9;background:#10161b;border:1px solid #34444e;border-top:2px solid #508b95;box-shadow:0 10px 36px #0004;overflow:hidden}canvas{display:block;width:100%;height:100%;background:#11171c}canvas:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:-3px}.loader{position:absolute;inset:0;display:grid;place-items:center;background:#131b21}.loader[hidden]{display:none}.loading-card{width:min(80%,440px)}h2{font-size:17px;font-weight:500;letter-spacing:.06em;line-height:1.5;color:#e7edf0;margin:0 0 28px}.loading-card p{font-size:11px;letter-spacing:.16em;color:var(--muted);margin:0 0 14px}progress{display:block;appearance:none;border:0;width:100%;height:3px;background:#2b3942;accent-color:var(--cyan)}progress::-webkit-progress-bar{background:#2b3942}progress::-webkit-progress-value{background:var(--cyan)}progress::-moz-progress-bar{background:var(--cyan)}#percentage{display:block;text-align:right;font-size:12px;color:var(--cyan);margin-top:10px;font-variant-numeric:tabular-nums}#messages{position:absolute;left:5%;right:5%;top:16px;pointer-events:none}#messages p{padding:12px 16px;font-size:13px;line-height:1.5;max-height:40vh;overflow:auto;pointer-events:auto}.error{background:#4b2429;color:#ffe7e8;border:1px solid #a76c73}.warning{background:#393326;color:#f0dfb5}.player-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;color:var(--muted);font-size:10px;letter-spacing:.07em}button{font:inherit;letter-spacing:.08em;color:#dce8ed;background:#1e2b33;border:1px solid #405762;padding:8px 13px;cursor:pointer}button:hover:not(:disabled){border-color:var(--cyan);color:var(--cyan)}button:disabled{opacity:.4;cursor:default}footer{font-size:11px;letter-spacing:.03em;color:var(--muted);padding-top:12px;border-top:1px solid #2b3942;margin-top:10px}canvas:fullscreen{width:100vw;height:100vh;border:0;outline:0}
@media(max-width:850px){body{padding:16px 12px 12px}.metadata{display:none}h1{font-size:15px}main{width:100%;margin:auto 0}.detail{display:none}.page-header{margin-bottom:12px}h2{font-size:13px;margin-bottom:18px}.loading-card p{font-size:9px}}
@media(max-height:500px){body{padding:8px 12px}.page-header{margin-bottom:8px}h1{font-size:13px}.page-header p{font-size:11px}main{width:min(100%,calc((100dvh - 130px)*1.777778))}footer{padding-top:8px;margin-top:0}}