.film{--film-plate:url(/film/film-scratches.png);--film-frame-cycle:0.66s;--film-strength:0.55;position:fixed;inset:0;z-index:45;pointer-events:none;mix-blend-mode:difference;opacity:var(--film-strength)}.film-plate{position:absolute;inset:0;background-image:var(--film-plate);background-repeat:repeat;background-size:auto 115%;animation:film-frames var(--film-frame-cycle) step-end infinite}[data-theme=dark] .film{--film-strength:0.38}@keyframes film-frames{0%{background-position:0 0}12.5%{background-position:100% 20%}25%{background-position:35% 100%}37.5%{background-position:80% 60%}50%{background-position:10% 45%}62.5%{background-position:60% 15%}75%{background-position:95% 85%}87.5%{background-position:25% 70%}}@media (prefers-reduced-motion:reduce){.film-plate{background-position:35% 100%;animation:none}}.toy{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-soft);background:var(--toy-paper);color:var(--toy-ink);font-family:var(--font-grotesk);text-transform:none;container-type:size;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.toy:focus{outline:none}.toy:focus-visible{outline:2px solid var(--text-primary);outline-offset:3px}.toy:after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--border);pointer-events:none}:where(.toy) button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}.toy[data-toy=drummies]{--toy-paper:#ffffff;--toy-ink:#000000}.toy[data-toy=choirpractice]{--toy-paper:#f7f3ec;--toy-ink:#1a1a1a;--toy-amber:#e8a000}.toy[data-toy=loft]{--toy-paper:#f6f2ea;--toy-ink:#1c1b19;--toy-pop:#8b1a1a}.toy-close{position:absolute;top:3cqi;right:3cqi;z-index:4;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:999px;background:color-mix(in srgb,var(--toy-ink) 7%,transparent);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out)}.toy-close:hover{background:color-mix(in srgb,var(--toy-ink) 14%,transparent)}.toy-close:focus-visible{outline:2px solid var(--toy-ink);outline-offset:1px}.toy-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}.toy-drummies{position:absolute;inset:0}.toy-drummies-bar{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:1cqi;height:15cqi;padding:0 calc(28px + 5cqi) 0 5cqi}.toy-drummies-bpm{margin-right:auto;font-family:var(--font-mono);font-size:5.6cqi;line-height:1}.toy-drummies-bpm small{margin-left:.25em;font-size:.6em}.toy-drummies-mark{width:10cqi;height:10cqi;padding:1.8cqi;border:0;border-radius:2cqi;background:none;cursor:pointer}.toy-drummies-mark:disabled{opacity:.2;cursor:default}.toy-drummies-mark img,.toy-drummies-playhead img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.toy-drummies-playhead{position:absolute;top:14cqi;left:5cqi;width:3.4cqi;height:4.2cqi;pointer-events:none}.toy-drummies-playhead[hidden]{display:none}.toy-drummies-kit{position:absolute;inset:20cqi 3cqi 3cqi;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr 1fr 1.35fr;grid-gap:1cqi;gap:1cqi}.toy-drummies-drum{position:relative;min-width:0;min-height:0;padding:0;border:0;border-radius:3cqi;background:none;cursor:pointer;touch-action:manipulation}.toy-drummies-drum:focus-visible{outline:2px solid var(--toy-ink);outline-offset:-2px}.toy-drummies-drum[data-drum=hat_closed]{grid-area:1/1/2/3}.toy-drummies-drum[data-drum=hat_open]{grid-area:1/3/2/5}.toy-drummies-drum[data-drum=bass808]{grid-area:1/5/2/7}.toy-drummies-drum[data-drum=snare]{grid-area:2/1/3/4}.toy-drummies-drum[data-drum=clap]{grid-area:2/4/3/7}.toy-drummies-drum[data-drum=kick]{grid-area:3/2/4/6}.toy-drummies-drum img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;pointer-events:none}.toy-drummies-drum[data-hit] .toy-drummies-rest,.toy-drummies-hit{opacity:0}.toy-drummies-drum[data-hit] .toy-drummies-hit{opacity:1}.toy-drummies-drum[data-cleared]{animation:toy-cleared .45s ease-out}@keyframes toy-cleared{30%{opacity:.15}}.toy-choir{position:absolute;inset:0}.toy-choir-caption{position:absolute;top:5.6cqi;left:5cqi;right:calc(28px + 6cqi);margin:0;overflow:hidden;font-size:3.5cqi;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis}.toy-choir-creature{position:absolute;top:12cqi;left:0;width:100%;height:42cqi;fill:var(--toy-ink);pointer-events:none}.toy-choir-readout{position:absolute;top:54.5cqi;left:0;right:0;height:8cqi;margin:0;font-size:7.4cqi;line-height:1;letter-spacing:-.02em;text-align:center}.toy-choir-row{position:absolute;top:65cqi;left:3cqi;right:3cqi;display:flex;gap:1.6cqi;height:9cqi}.toy-choir-chip{flex:1 1;padding:0;border:0;border-radius:0;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--toy-ink) 40%,transparent);font-size:3.8cqi;cursor:pointer}.toy-choir-chip[aria-checked=true]{background:var(--toy-ink);color:var(--toy-paper);box-shadow:none}.toy-choir-chip:focus-visible,.toy-choir-key:focus-visible{outline:2px solid var(--toy-amber);outline-offset:-2px}.toy-choir-piano{left:3cqi;right:3cqi;bottom:3cqi;height:21cqi;box-shadow:inset 0 0 0 1px var(--toy-ink);touch-action:none}.toy-choir-key,.toy-choir-piano{position:absolute;cursor:pointer}.toy-choir-key{top:0;bottom:0;width:calc(100% / 7);padding:0;border:0;border-radius:0;background:transparent;box-shadow:inset -1px 0 0 var(--toy-ink)}.toy-choir-key:nth-child(7){box-shadow:none}.toy-choir-key[data-black]{z-index:1;bottom:40%;width:calc(100% / 7 * .6);background:var(--toy-ink);box-shadow:none}.toy-choir-key[data-lit]{background:var(--toy-amber)}.toy-choir-key[data-black][data-lit]{box-shadow:inset 0 0 0 1px var(--toy-ink)}.toy-choir-key[data-dot]:after{content:"";position:absolute;left:50%;bottom:12%;width:1.6cqi;height:1.6cqi;border-radius:50%;background:var(--toy-ink);transform:translateX(-50%)}.toy-choir-key[data-dot=home]:after{width:2.6cqi;height:2.6cqi}.toy-choir-key[data-black][data-dot]:after{background:var(--toy-paper)}.toy-choir-key[data-black][data-lit][data-dot]:after{background:var(--toy-ink)}.toy-choir-key-name{position:absolute;left:0;right:0;bottom:30%;font-size:3.4cqi;line-height:1;text-align:center;color:var(--toy-ink)}.toy-loft{position:absolute;inset:0;display:flex;flex-direction:column;padding:4.2cqi 4.5cqi 3cqi}.toy-loft-chips{display:flex;align-items:center;gap:1.6cqi;height:8cqi;padding-right:30px}.toy-loft-chip{padding:1.2cqi 2.6cqi;border-radius:999px;background:color-mix(in srgb,var(--toy-ink) 7%,transparent);font-size:3.6cqi;line-height:1}.toy-loft-roll{position:relative;flex:1 1;margin-top:3cqi;overflow:hidden;border-radius:3cqi;background:color-mix(in srgb,var(--toy-ink) 4%,transparent);touch-action:none;cursor:crosshair}.toy-loft-lane{position:absolute;left:0;right:0;height:1px;background:color-mix(in srgb,var(--toy-ink) 7%,transparent)}.toy-loft-lane[data-root]{background:color-mix(in srgb,var(--toy-ink) 16%,transparent)}.toy-loft-beat{position:absolute;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--toy-ink) 6%,transparent)}.toy-loft-beat[data-bar]{background:color-mix(in srgb,var(--toy-ink) 16%,transparent)}.toy-loft-note{position:absolute;height:4.2%;min-height:5px;border-radius:2px;background:var(--toy-ink);transform:translateY(-50%);transform-origin:left center;animation:toy-loft-snap .46s cubic-bezier(.34,1.56,.64,1) backwards}.toy-loft-note[data-on]{background:var(--toy-pop)}@keyframes toy-loft-snap{0%{opacity:0;transform:translateY(-50%) scaleX(.15)}to{opacity:1;transform:translateY(-50%) scaleX(1)}}.toy-loft-roll[data-still] .toy-loft-note{animation:none}.toy-loft-trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.toy-loft-trace polyline{fill:none;stroke:var(--toy-pop);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .42s ease-out}.toy-loft-trace[data-fading] polyline{opacity:0}.toy-loft-playhead{position:absolute;top:0;bottom:0;width:1.5px;margin-left:-.75px;background:color-mix(in srgb,var(--toy-ink) 45%,transparent);pointer-events:none}.toy-loft-playhead[hidden]{display:none}.toy-loft-roll[data-humming] .toy-loft-playhead{background:var(--toy-pop)}.toy-loft-hint{position:absolute;inset:0;display:grid;place-items:center;font-size:4.2cqi;color:color-mix(in srgb,var(--toy-ink) 55%,transparent);pointer-events:none}.toy-loft-foot{display:flex;align-items:center;justify-content:space-between;gap:2cqi;height:9cqi;margin-top:1.5cqi;font-size:4cqi}.toy-loft-take{overflow:hidden;color:color-mix(in srgb,var(--toy-ink) 70%,transparent);white-space:nowrap;text-overflow:ellipsis}.toy-loft-clear{flex:none;padding:1cqi 0;border:0;background:none;color:var(--toy-pop);cursor:pointer}.toy-loft-clear:disabled{color:color-mix(in srgb,var(--toy-ink) 30%,transparent);cursor:default}