:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#f0e6d8;--ink-dim:#f0e6d870;--ink-faint:#f0e6d842;--gold:#e8b877;--rec:#f0563f}*{box-sizing:border-box}html,body{height:100%}body{color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#070609;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.5;overflow:hidden}#stage{width:100%;height:100%;display:block;position:fixed;inset:0}.bar{z-index:2;letter-spacing:.02em;pointer-events:none;align-items:center;gap:1rem;padding:.85rem 1.3rem;font-size:.78rem;display:flex;position:fixed;left:0;right:0}.bar :where(button,a){pointer-events:auto}.bar--top{flex-wrap:wrap;justify-content:space-between;top:0}.bar__left,.bar__right{align-items:center;gap:.9rem;min-width:0;display:flex}.bar__left{flex-wrap:wrap}.bar--bottom{grid-template-columns:1fr auto 1fr;align-items:end;padding-bottom:1rem;display:grid;bottom:0}h1{letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;margin:0;font-size:.78rem;font-weight:400}.now-playing{letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap;opacity:0;font-size:.78rem;transition:opacity .3s}body[data-mode=open] .now-playing{opacity:1}a{color:var(--ink-dim);text-decoration:none;transition:color .16s}a:hover,a:focus-visible{color:var(--ink)}.instrument-nav{flex-wrap:wrap;place-content:flex-end;gap:.8rem;display:flex}.instrument-nav a{letter-spacing:.1em;text-transform:uppercase;color:#f0e6d842;white-space:nowrap;border-bottom:1px solid #0000;font-size:.72rem}.instrument-nav a:hover,.instrument-nav a:focus-visible{color:var(--ink);border-bottom-color:#e8b87780}.instrument-nav a[aria-current=true]{color:var(--gold)}button{font:inherit;color:var(--ink-dim);cursor:pointer;background:#f0e6d80a;border:1px solid #f0e6d824;border-radius:999px;padding:.32rem .9rem;font-size:.78rem;transition:color .16s,border-color .16s,background-color .16s,opacity .2s}button:hover:not(:disabled),button:focus-visible{color:var(--ink);border-color:#f0e6d857}button:disabled{opacity:.3;cursor:default}.transport{flex-direction:column;grid-column:2;align-items:center;gap:.55rem;display:flex}.transport__buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:.55rem;display:flex}.record:before{content:"";vertical-align:.05em;background:currentColor;border-radius:50%;width:.5em;height:.5em;margin-right:.5em;display:inline-block}.transport[data-state=recording] .record{color:#fff;border-color:var(--rec);background:#f0563f38;animation:1.4s ease-in-out infinite pulse}.transport[data-state=playing] #play{color:var(--ink);border-color:#e8b87773}@keyframes pulse{0%,to{box-shadow:0 0 #f0563f59}50%{box-shadow:0 0 0 7px #f0563f00}}.legend{color:var(--ink-faint);text-align:center;margin:0;font-size:.7rem}.legend kbd{font:inherit;color:var(--ink-dim);border:1px solid #f0e6d829;border-radius:3px;padding:0 .28em}#invitation{z-index:1;text-align:center;pointer-events:none;place-content:center;justify-items:center;gap:.6rem;padding:2rem;transition:opacity 1s;display:grid;position:fixed;inset:0}#invitation.gone{opacity:0}#invitation p{letter-spacing:.01em;margin:0;font-size:clamp(1.15rem,3.2vw,1.7rem);font-weight:300;animation:4.2s ease-in-out infinite breathe}#invitation small{color:var(--ink-dim);font-size:.82rem}@keyframes breathe{0%,to{opacity:.48}50%{opacity:1}}@media (prefers-reduced-motion:reduce){#invitation p,.transport[data-state=recording] .record{animation:none}#invitation p{opacity:.92}}.back{opacity:0;pointer-events:none;transition:opacity .26s}body[data-mode=open] .back{opacity:1;pointer-events:auto}.instrument-keys{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;opacity:0;font-size:.72rem;transition:opacity .3s}body[data-mode=open] .instrument-keys{opacity:1}.demo{color:var(--gold);background:#e8b87714;border-color:#e8b87757}.demo:hover,.demo:focus-visible{color:#fff;background:#e8b87729;border-color:#e8b877b3}@media (width<=60rem){.instrument-keys{display:none}}@media (width<=48rem){.bar--bottom{grid-template-columns:1fr;justify-items:center;gap:.7rem}.bar__spacer{display:none}.transport{order:2;grid-column:1}.instrument-nav{order:1;justify-content:center}.legend{display:none}.bar{gap:.7rem;padding:.7rem .9rem}}@media (width<=30rem){.instrument-nav{gap:.6rem}h1{font-size:.68rem}}