:root{color:#1a1a1a;background:#fff;font-family:system-ui,sans-serif}body{max-width:1200px;margin:0 auto;padding:16px 24px}h1{margin:0 0 8px;font-size:1.6rem}.small{color:#555;font-size:.85rem}.piece-title{text-align:center;margin:8px 0 0;font-family:Times New Roman,Times,serif;font-size:2rem;font-weight:400}#score svg{display:block}#score .note.playing{color:#d9480f;fill:#d9480f;stroke:#d9480f}#player{z-index:1;background:#fff;flex-wrap:wrap;align-items:center;gap:16px;margin:16px 0;padding:12px 0;display:flex;position:sticky;bottom:0}#player.pinned{border-top:1px solid #c8ccd2}#player button{min-height:48px;font:inherit;color:#1a1a1a;cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:8px;padding:0 20px;font-size:1.1rem}#player button:disabled{opacity:.5;cursor:wait}#play{color:#fff;background:#1a1a1a;min-width:140px}.speed{align-items:center;gap:8px;display:flex}#exam-speed[aria-pressed=true]{background:#e7eefb;font-weight:600}#slower,#faster{width:48px;padding:0;font-size:1.5rem;line-height:1}.slider{width:220px;display:flex;position:relative}.slider:before{content:"";top:10px;bottom:10px;left:calc(14px + (100% - 28px) * var(--exam-at,.5));background:#1a1a1a;width:2px;margin-left:-1px;position:absolute}#speed{z-index:1;cursor:pointer;appearance:none;background:0 0;width:100%;height:48px;margin:0;position:relative}#speed::-webkit-slider-runnable-track{background:#c8ccd2;border-radius:3px;height:6px}#speed::-moz-range-track{background:#c8ccd2;border-radius:3px;height:6px}#speed::-webkit-slider-thumb{-webkit-appearance:none;background:#1a1a1a;border:3px solid #fff;border-radius:50%;width:28px;height:28px;margin-top:-11px;box-shadow:0 0 0 2px #1a1a1a}#speed::-moz-range-thumb{background:#1a1a1a;border:3px solid #fff;border-radius:50%;width:22px;height:22px;box-shadow:0 0 0 2px #1a1a1a}#speed:disabled{cursor:wait;opacity:.5}#tempo{white-space:nowrap;min-width:7.5em}#piece-info{margin:4px 0 0}footer{margin-top:32px}@media (width<=480px){#player{gap:8px}#player button{padding:0 12px}#play{min-width:88px}.speed{flex-wrap:wrap;flex-basis:100%}.slider{flex:1;width:auto}}
