*{box-sizing:border-box}:root{--ink:#232321;--muted:#7c7c75;--faint:#a9a9a2;--hairline:#e9e9e4;--right-hand:#ff5a1f;--left-hand:#2152ff;--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237c7c75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 4 4 4-4'/%3E%3C/svg%3E");color:var(--ink);font-synthesis:none;--buncss-light:initial;--buncss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;background:#fff;font-family:DM Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}body{margin:0}button,select,input,a{-webkit-tap-highlight-color:transparent}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid color-mix(in srgb,var(--left-hand)55%,transparent);outline-offset:3px}select:focus-visible{outline:2px solid color-mix(in srgb,var(--left-hand)55%,transparent);outline-offset:3px}input:focus-visible{outline:2px solid color-mix(in srgb,var(--left-hand)55%,transparent);outline-offset:3px}a:focus-visible{outline:2px solid color-mix(in srgb,var(--left-hand)55%,transparent);outline-offset:3px}main{display:flex;flex-direction:column;max-width:1800px;min-height:100svh;margin:auto;padding:28px 48px 24px}header{display:flex;justify-content:space-between;align-items: center}.brand{letter-spacing:-1px;text-decoration:none;color:var(--ink);font-size:24px;font-weight:500}.brand span{background:linear-gradient(in oklch 135deg,var(--right-hand),var(--left-hand));color:#0000;-webkit-background-clip:text;background-clip:text}select{appearance:none;cursor:pointer;background:var(--chevron)no-repeat right 12px center;border:1px solid var(--hairline);border-radius:999px;transition:border-color .2s,background-color .2s}select:hover{border-color:#d3d3cc}#song{padding:8px 34px 8px 15px;font-size:13px}.title{text-align:center;padding:44px 0 0}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;font-size:11px;font-weight:500}h1{letter-spacing:-1.5px;margin:0;font-family:Instrument Serif,Georgia,serif;font-size:clamp(46px,5.4vw,72px);font-weight:400;line-height:1}.composer{color:var(--muted);margin:10px 0 0;font-family:Instrument Serif,Georgia,serif;font-size:20px;font-style:italic}#stage{position:relative;flex:1;min-height:360px}#canvas{position:absolute;overflow:hidden;mask-image:linear-gradient(#0000,#00000029 3%,#00000080 6%,#000000d6 9%,#000 12% 88%,#000000d6 91%,#00000080 94%,#00000029 97%,#0000),linear-gradient(90deg,#0000,#00000029 5%,#00000080 10%,#000000d6 15%,#000 20% 80%,#000000d6 85%,#00000080 90%,#00000029 95%,#0000);mask-composite:intersect;inset:0}canvas{display:block;width:100%;height:100%}footer{width:min(680px,100%);margin:0 auto;padding:16px 0 8px}.transport{display:flex;border:1px solid var(--hairline);backdrop-filter:blur(12px);background:#ffffffd9;border-radius:999px;align-items: center;gap:14px;padding:7px 16px 7px 7px;box-shadow:0 1px 2px #1a1a1808,0 12px 32px -14px #1a1a1830}.icon-button{display:grid;color:var(--muted);background:0 0;border:0;border-radius:50%;flex-shrink:0;place-items: center;width:32px;height:32px;transition:color .2s,background-color .2s}.icon-button:hover{color:var(--ink);background:#f3f3f0}.icon-button[aria-pressed=true]{color:var(--left-hand)}.icon-button svg{width:17px;height:17px}button svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.playing .play,:not(.playing)>.pause,.muted .volume,:not(.muted)>.silent{display:none}.play-button{display:grid;background:var(--ink);color:#fff;border:0;border-radius:50%;flex-shrink:0;place-items: center;width:44px;height:44px;transition:background .2s,transform .15s}.play-button:hover{background:#45453f}.play-button:active{transform:scale(.95)}.play-button:disabled{opacity:.4;cursor:wait}.play-button svg{fill:currentColor;width:16px;height:16px}.play-button .play{margin-left:2px}input[type=range]{--track-fill:linear-gradient(var(--ink),var(--ink));appearance:none;background:var(--track-fill)0/var(--fill,0%)100% no-repeat,var(--hairline);cursor:pointer;border-radius:999px;height:4px;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .15s;box-shadow:0 0 0 1px #1a1a1826,0 1px 4px #1a1a1840}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:14px;height:14px;box-shadow:0 0 0 1px #1a1a1826,0 1px 4px #1a1a1840}#progress{--track-fill:linear-gradient(in oklch 90deg,var(--right-hand),var(--left-hand));flex:1;min-width:40px;margin:0 4px}#time{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}#speed{background-color:#f6f6f3;background-position:right 9px center;border-color:#0000;flex-shrink:0;padding:5px 26px 5px 11px;font-size:12px}#speed:hover{background-color:#efefeb}#status{text-align:center;color:var(--faint);min-height:16px;margin:14px 0 0;font-size:12px}.credit{text-align:center;color:#c4c4bd;margin:18px 0 0;font-family:Instrument Serif,Georgia,serif;font-size:14px;font-style:italic}.credit a{color:inherit;text-decoration:none;transition:color .2s}.credit a:hover{color:var(--muted)}.credit span{background:linear-gradient(in oklch 135deg,var(--right-hand),var(--left-hand));color:#0000;-webkit-background-clip:text;background-clip:text}.settings{position:fixed;border:1px solid var(--hairline);backdrop-filter:blur(12px);color:var(--ink);opacity:0;transition:opacity .15s,transform .15s,overlay .15s allow-discrete,display .15s allow-discrete;background:#fffffff2;border-radius:16px;width:240px;margin:0;padding:14px 16px 16px;inset:auto;transform:translateY(6px);box-shadow:0 1px 2px #1a1a1808,0 16px 40px -16px #1a1a1840}.settings:popover-open{opacity:1;transform:none}@starting-style{.settings:popover-open{opacity:0;transform:translateY(6px)}}.settings-head{display:flex;justify-content:space-between;align-items: center;margin-bottom:6px}.settings-title{letter-spacing:.16em;text-transform:uppercase;color:var(--faint);font-size:11px;font-weight:500}.text-button{color:var(--muted);background:0 0;border:0;border-radius:6px;margin-right:-6px;padding:4px 6px;font-size:12px}.text-button:hover{color:var(--ink);background:#f3f3f0}.setting{display:grid;gap:10px;padding-top:12px}.setting-label{display:flex;justify-content:space-between;font-size:13px}.setting-label output{color:var(--muted);font-variant-numeric:tabular-nums}@media (min-height:950px){.title{padding-top:72px}footer{padding-bottom:28px}}@media (max-width:650px){main{padding:20px 16px 16px}.brand{font-size:22px}#song{max-width:200px;font-size:12px}.title{padding-top:40px}.composer{font-size:18px}#stage{min-height:330px}.transport{gap:6px;padding-right:8px}#time,#view{display:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}