:where(:root){--ui-ink:#121212;--ui-paper:#fff;--ui-backdrop:#14141e59;--ui-shadow:0 10px 30px #14142829;--ui-good:#c8ebd5;--ui-good-edge:#93cfaa;--ui-good-ink:#12391f;--ui-accent:#f9e3a1;--ui-radius:1rem;--ui-font-display:Georgia, "Times New Roman", Times, serif;--ui-ease-out:cubic-bezier(.22, 1, .36, 1);--ui-ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ui-dur-fast:.12s;--ui-dur:.2s;--ui-dur-slow:.32s}@media (prefers-color-scheme:dark){:where(:root){--ui-ink:#f3f1fa;--ui-paper:#15141b;--ui-backdrop:#0009;--ui-shadow:0 10px 30px #00000080;--ui-good:#1e3a2b;--ui-good-edge:#2f5c43;--ui-good-ink:#d4f1df}}.ui-modal-backdrop{z-index:20;background:var(--ui-backdrop);animation:ui-fade-in var(--ui-dur) var(--ui-ease-out);place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.ui-modal{border-radius:var(--ui-radius);background:var(--ui-paper);width:min(100%,30rem);max-height:calc(100vh - 2rem);color:var(--ui-ink);box-shadow:var(--ui-shadow);animation:ui-slide-up var(--ui-dur-slow) var(--ui-ease-spring);padding:1.5rem;position:relative;overflow-y:auto}.ui-modal__close{width:2.5rem;height:2.5rem;color:var(--ui-ink);cursor:pointer;background:0 0;border:0;border-radius:50%;font-size:1.75rem;line-height:1;position:absolute;top:.5rem;right:.5rem}.ui-modal__title{font-family:var(--ui-font-display);margin:0;padding-right:2rem;font-size:1.75rem}.ui-toast-region{pointer-events:none;place-items:center;display:grid}.ui-toast{background:var(--ui-ink);color:var(--ui-paper);white-space:nowrap;animation:ui-pop-in var(--ui-dur) var(--ui-ease-spring);border-radius:999px;margin:0;padding:.5rem 1rem;font-weight:700}.ui-toast--good{border:1px solid var(--ui-good-edge);background:var(--ui-good);color:var(--ui-good-ink)}.ui-icon-button{border:2px solid var(--ui-ink);width:2.25rem;height:2.25rem;color:var(--ui-ink);cursor:pointer;transition:transform var(--ui-dur-fast) var(--ui-ease-out);background:0 0;border-radius:50%;place-items:center;font:700 1.125rem/1 system-ui,sans-serif;display:grid}.ui-icon-button:active{transform:scale(.94)}:is(.ui-icon-button,.ui-modal__close):focus-visible{outline:3px solid var(--ui-ink);outline-offset:2px}@keyframes ui-fade-in{0%{opacity:0}}@keyframes ui-slide-up{0%{opacity:0;transform:translateY(1rem)scale(.98)}}@keyframes ui-pop-in{0%{opacity:0;transform:translateY(-.5rem)scale(.96)}}@media (prefers-reduced-motion:reduce){:is(.ui-modal-backdrop,.ui-modal,.ui-toast,.ui-icon-button){transition:none;animation:none}}:where(:root){--ui-intro-accent:#f0a25e;--ui-intro-glow:#ffd9a3;--ui-egg-outline:#1b2a6b;--ui-egg-highlight:#fff;--ui-egg-shell:#eaf7ff;--ui-egg-shade:#9fcff5;--ui-egg-seam:#6fd8ff;--ui-egg-visor:#0e1c40}@font-face{font-family:"Press Start 2P";src:url(/assets/press-start-2p-xj9lRvVs.woff2)format("woff2");font-display:swap}.ui-intro{z-index:100;cursor:pointer;place-items:center;display:grid;position:fixed;inset:0;overflow:hidden}.ui-intro--skip{animation:.2s ease-out forwards ui-intro-out}.ui-intro__cells{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(12,1fr);display:grid;position:absolute;inset:0}@media (orientation:portrait){.ui-intro__cells{grid-template-rows:repeat(12,1fr);grid-template-columns:repeat(8,1fr)}}.ui-intro__cell{animation:.12s step-end forwards ui-intro-bit-out;animation-delay:calc(2.75s + var(--d,0) * 70ms);background:#070a12}.ui-intro__cell--d1{--d:1}.ui-intro__cell--d2{--d:2}.ui-intro__cell--d3{--d:3}.ui-intro__cell--d4{--d:4}.ui-intro__cell--d5{--d:5}.ui-intro__cell--d6{--d:6}.ui-intro__cell--d7{--d:7}.ui-intro__stage{justify-items:center;gap:1.25rem;animation:.3s ease-in 2.5s forwards ui-intro-out;display:grid;position:relative}.ui-intro__stage:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff09 0 1px,#0000 1px 3px);position:fixed;inset:0}.ui-intro__art{width:min(86vmin,26rem);height:auto;overflow:visible}.ui-px-k{fill:var(--ui-egg-outline)}.ui-px-s{fill:var(--ui-egg-highlight)}.ui-px-m{fill:var(--ui-egg-shell)}.ui-px-d{fill:var(--ui-egg-shade)}.ui-px-a,.ui-px-c{fill:var(--ui-egg-seam)}.ui-px-l{fill:var(--ui-egg-visor)}.ui-px-y{fill:var(--ui-intro-accent)}.ui-px-r{fill:#ff6b6b}.ui-px-g{fill:#6fe0a8}.ui-intro__egg{transform-box:fill-box;transform-origin:50% 100%;animation:.3s ease-out both ui-intro-fade-in,.8s ease-in-out .4s ui-intro-wobble}.ui-intro__base .ui-px-a{animation:.45s ease-in .9s both ui-intro-seam}.ui-intro__eq{fill:#7ff0c8;transform-box:fill-box;transform-origin:50% 100%;animation:.36s steps(3,end) .3s infinite alternate ui-intro-eq;transform:scaleY(.25)}.ui-intro__eq--1{animation-duration:.28s}.ui-intro__eq--2{animation-duration:.42s}.ui-intro__eq--3{animation-duration:.31s}.ui-intro__cap{transform-box:fill-box;transform-origin:50%;animation:.9s cubic-bezier(.3,.7,.4,1) 1.3s both ui-intro-cap}.ui-intro__bit{opacity:0;animation:.8s cubic-bezier(.25,.8,.4,1) 1.3s both ui-intro-bit}.ui-intro__bit--0{--bx:-9px;--by:18px;--br:-90deg}.ui-intro__bit--1{--bx:-5px;--by:18px;--br:140deg}.ui-intro__bit--2{--bx:-2px;--by:18px;--br:60deg}.ui-intro__bit--3{--bx:3px;--by:18px;--br:-40deg}.ui-intro__bit--4{--bx:7px;--by:18px;--br:200deg}.ui-intro__bit--5{--bx:11px;--by:18px;--br:90deg}.ui-intro__bloom{transform-box:fill-box;transform-origin:50%;opacity:0;animation:.9s ease-out 1.3s forwards ui-intro-bloom;transform:scale(0)}.ui-intro__hatchling{transform-box:fill-box;transform-origin:50% 100%;opacity:0;animation:.6s cubic-bezier(.2,.9,.3,1.2) 1.45s forwards ui-intro-hatch,.6s steps(2,end) 2.05s infinite alternate ui-intro-bob}.ui-intro__floor{fill:#2aa7e6;opacity:.35}.ui-intro__bloom-core{stop-color:#fffbe8}.ui-intro__bloom-mid{stop-color:var(--ui-intro-glow)}.ui-intro__bloom-edge{stop-color:var(--ui-intro-accent)}.ui-intro__logo{letter-spacing:.04em;color:#0000;opacity:0;background-image:linear-gradient(105deg,#0000 42%,#fffffff2 50%,#0000 58%),linear-gradient(#fff 0%,#cfdbeb 44%,#6c82a8 50%,#9fb2cf 72%,#eef3fa 100%);background-position:150% 0,0 0;background-size:300% 100%,100% 100%;-webkit-background-clip:text;background-clip:text;margin:0;font-family:"Press Start 2P",ui-monospace,monospace;font-size:clamp(1.25rem,6vw,2.25rem);animation:.35s ease-out 1.95s forwards ui-intro-logo,.6s ease-in-out 2.15s forwards ui-intro-glint}@keyframes ui-intro-fade-in{0%{opacity:0}}@keyframes ui-intro-out{to{opacity:0;visibility:hidden}}@keyframes ui-intro-bit-out{to{opacity:0}}@keyframes ui-intro-wobble{0%,to{transform:rotate(0)}15%{transform:rotate(-7deg)}35%{transform:rotate(6deg)}50%{transform:rotate(0)}65%{transform:rotate(-9deg)}85%{transform:rotate(8deg)}}@keyframes ui-intro-seam{to{fill:#d8f6ff;filter:drop-shadow(0 0 1.5px #7fdcff)}}@keyframes ui-intro-eq{to{transform:scaleY(1)}}@keyframes ui-intro-cap{0%{transform:translate(0)rotate(0)}35%{transform:translate(6px,-15px)rotate(30deg)}to{transform:translate(18px,20px)rotate(172deg)}}@keyframes ui-intro-bit{0%{opacity:1;transform:translate(0)rotate(0)}30%{opacity:1;transform:translate(calc(var(--bx) * .5), -6px) rotate(calc(var(--br) * .4))}to{opacity:1;transform:translate(var(--bx), var(--by)) rotate(var(--br))}}@keyframes ui-intro-bloom{0%{opacity:0;transform:scale(0)}35%{opacity:.95;transform:scale(1)}to{opacity:.55;transform:scale(.85)}}@keyframes ui-intro-hatch{0%{opacity:0;transform:translateY(12px)scale(.5)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes ui-intro-bob{to{transform:translateY(-1px)}}@keyframes ui-intro-logo{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes ui-intro-glint{to{background-position:-50% 0,0 0}}.ui-intro--hub:before{content:"";z-index:2;pointer-events:none;background:#fff;animation:.35s ease-out forwards ui-intro-out;position:absolute;inset:0}.ui-intro__beam{z-index:1;filter:blur(2px);pointer-events:none;background:linear-gradient(90deg,#0000,#6fd8ff8c,#fff,#6fd8ff8c,#0000);width:min(30vmin,9rem);animation:.3s ease-in .3s forwards ui-intro-out;position:absolute;top:0;bottom:30%;left:50%;transform:translate(-50%)}.ui-intro--hub .ui-intro__egg{animation:.4s cubic-bezier(.3,1.4,.5,1) both ui-intro-drop,.8s ease-in-out .4s ui-intro-wobble}@keyframes ui-intro-drop{0%{opacity:0;transform:translateY(-60px)}}@media (prefers-reduced-motion:reduce){.ui-intro{display:none}}:root{--color-bg:#f7f2e8;--color-surface:#fffdf8;--color-sunk:#efe7d6;--color-text:#221d16;--color-muted:#625a4d;--color-line:#d8ccb4;--color-accent:#b4490e;--color-accent-ink:#fff;--color-accent-soft:#f6dcc4;--color-focus:#1f5fbf;--color-ok:#1f6f43;--color-notice:#7a4b00;--color-key-white:#fff;--color-key-black:#2a241c;--color-key-on:#e07a2f;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--radius:.625rem;--radius-small:.375rem;--shadow:0 1px 0 #221d160f, 0 6px 18px -10px #221d1640;--font-body:system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--text-small:.875rem;--text-body:1rem;--text-large:1.25rem;--text-chord:1.5rem;--text-title:2rem;--motion:.18s cubic-bezier(.2, .7, .2, 1);--plastic-shine:linear-gradient(#ffffffb3, #fff0 60%);--plastic-edge:inset 0 1px 0 #fffc, 0 1px 0 #221d1614;--lcd-bg:#1d1a12;--lcd-ink:#f3b56b;--transport-height:7.5rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-bg:#15171c;--color-surface:#1d2027;--color-sunk:#262a33;--color-text:#f1ece2;--color-muted:#b3ab9c;--color-line:#3a3f4a;--color-accent:#f0a25e;--color-accent-ink:#1a1206;--color-accent-soft:#4a3220;--color-focus:#8ab4ff;--color-ok:#6fd39b;--color-notice:#f3c26b;--color-key-white:#e9e4da;--color-key-black:#0d0e11;--color-key-on:#f0a25e;--shadow:0 1px 0 #0000004d, 0 8px 22px -12px #000000b3;--plastic-shine:linear-gradient(#ffffff12, #fff0 60%);--plastic-edge:inset 0 1px 0 #ffffff14, 0 1px 0 #0006;--lcd-bg:#0e0d0a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--color-bg:#15171c;--color-surface:#1d2027;--color-sunk:#262a33;--color-text:#f1ece2;--color-muted:#b3ab9c;--color-line:#3a3f4a;--color-accent:#f0a25e;--color-accent-ink:#1a1206;--color-accent-soft:#4a3220;--color-focus:#8ab4ff;--color-ok:#6fd39b;--color-notice:#f3c26b;--color-key-white:#e9e4da;--color-key-black:#0d0e11;--color-key-on:#f0a25e;--shadow:0 1px 0 #0000004d, 0 8px 22px -12px #000000b3;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--plastic-shine:linear-gradient(#ffffff12, #fff0 60%);--plastic-edge:inset 0 1px 0 #ffffff14, 0 1px 0 #0006;--lcd-bg:#0e0d0a}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);margin:0;line-height:1.5}h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.2}h2{font-size:var(--text-large)}h3{font-size:var(--text-body);margin-top:var(--space-4)}a{color:var(--color-accent)}code{font-family:var(--font-mono)}button,input,select{font:inherit;color:inherit}button{min-height:2.75rem;padding:var(--space-2) var(--space-4);border:1px solid var(--color-line);border-radius:var(--radius-small);background:var(--plastic-shine), var(--color-surface);box-shadow:var(--plastic-edge);cursor:pointer;transition:background var(--motion), border-color var(--motion), box-shadow var(--motion), transform var(--motion)}button:hover:not(:disabled){border-color:var(--color-accent)}button:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 1px 2px #00000026}button:disabled{cursor:not-allowed;opacity:.5}button[aria-pressed=true]{background:var(--plastic-shine), var(--color-accent-soft);border-color:var(--color-accent)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}input[type=text],input[type=number],select{width:100%;min-height:2.75rem;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-small);background:var(--color-surface)}input[type=range]{width:100%;min-height:2.75rem;accent-color:var(--color-accent)}input[type=checkbox]{width:1.5rem;height:1.5rem;accent-color:var(--color-accent)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.skip{left:var(--space-4);padding:var(--space-2) var(--space-4);background:var(--color-surface);border-radius:var(--radius-small);position:absolute;top:-3rem}.skip:focus{top:var(--space-2)}.muted{color:var(--color-muted)}.notice{color:var(--color-notice);font-size:var(--text-small);margin:var(--space-2) 0}.empty{color:var(--color-muted);margin:var(--space-4) 0}.app{max-width:72rem;padding:var(--space-4) var(--space-4) calc(var(--transport-height) + var(--space-6));margin:0 auto}.masthead{justify-content:space-between;align-items:flex-start;gap:var(--space-3) var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap;display:flex}.masthead h1{font-size:var(--text-title);letter-spacing:-.01em}.masthead__dot{background:var(--color-accent);border-radius:50%;width:.45em;height:.45em;margin-left:.12em;display:inline-block}.masthead__tag{margin:var(--space-1) 0 0;color:var(--color-muted)}.theme-toggle{font-size:var(--text-small);white-space:nowrap}.masthead__switches,.effects-toggles{gap:var(--space-2);flex-wrap:wrap;display:flex}@media (width<=40rem){.masthead__switches{width:100%}}.chip-toggle{font-size:var(--text-small)}.chip-toggle:before{content:"";width:.5rem;height:.5rem;margin-right:var(--space-2);background:var(--color-line);vertical-align:.05em;border-radius:50%;display:inline-block}.chip-toggle[aria-pressed=true]:before{background:var(--color-ok);box-shadow:0 0 6px var(--color-ok)}.layout,.layout__pair{gap:var(--space-4);display:grid}@media (width>=60rem){.layout__pair{grid-template-columns:1.15fr 1fr;align-items:start}}.panel{background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-4);min-width:0}.panel__head{justify-content:space-between;align-items:baseline;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.panel__head p{font-size:var(--text-small);margin:0}.field{gap:var(--space-1);min-width:0;display:grid}.field label{font-size:var(--text-small);font-weight:600}.field__hint{font-size:var(--text-small);color:var(--color-muted);margin:0}.field--check{align-items:center;gap:var(--space-2);display:flex}.settings{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.field--wide,.field--bpm{grid-column:1/-1}@media (width>=48rem){.settings{grid-template-columns:2fr 1fr 1fr 1fr 2fr;align-items:end}.field--wide,.field--bpm{grid-column:auto}}.bpm{gap:var(--space-2);grid-template-columns:5rem 1fr;align-items:center;display:grid}.bars{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}@media (width>=40rem){.bars{grid-template-columns:repeat(4,minmax(0,1fr))}}.bar{gap:var(--space-1);padding:var(--space-2);border-radius:var(--radius-small);background:var(--color-sunk);transition:border-color var(--motion), background var(--motion);border:2px solid #0000;padding-top:1.4rem;display:flex;position:relative}.bar--playing{border-color:var(--color-accent);background:var(--color-accent-soft)}.bar__number{top:.2rem;left:var(--space-2);color:var(--color-muted);font-variant-numeric:tabular-nums;font-size:.75rem;position:absolute}.slot{min-width:0;min-height:4.25rem;padding:var(--space-2) var(--space-1);background:var(--color-surface);flex:1 1 0;align-content:center;justify-items:center;gap:.1rem;display:grid;position:relative}.slot__symbol{font-family:var(--font-display);font-size:var(--text-chord);overflow-wrap:anywhere;font-weight:600;line-height:1.1}.bar--split .slot__symbol{font-size:var(--text-large)}.slot__roman{color:var(--color-muted);font-size:.8rem}.slot--empty .slot__symbol{color:var(--color-muted)}.slot--selected,.slot[aria-pressed=true]{border:2px solid var(--color-accent);background:var(--color-surface);box-shadow:0 0 0 3px var(--color-accent-soft)}.slot--selected:before{--bracket:linear-gradient(var(--color-accent), var(--color-accent));content:"";pointer-events:none;background:var(--bracket) top left / 10px 3px, var(--bracket) top left / 3px 10px, var(--bracket) top right / 10px 3px, var(--bracket) top right / 3px 10px, var(--bracket) bottom left / 10px 3px, var(--bracket) bottom left / 3px 10px, var(--bracket) bottom right / 10px 3px, var(--bracket) bottom right / 3px 10px;background-repeat:no-repeat;animation:.18s steps(3,end) bracket-in;position:absolute;inset:-7px}@keyframes bracket-in{0%{opacity:0;inset:-13px}}.slot__symbol{animation:.22s cubic-bezier(.3,1.6,.5,1) slot-pop}@keyframes slot-pop{0%{transform:scale(.7)}}.slot__lock{font-size:.75rem;position:absolute;top:.15rem;right:.25rem}.toolbar,.actions,.tabs,.stepper{gap:var(--space-2);flex-wrap:wrap;display:flex}.toolbar{margin-top:var(--space-3)}.toolbar button{font-size:var(--text-small)}.dial{align-items:center;gap:var(--space-2);font-size:var(--text-small);grid-template-columns:auto 1fr auto;font-weight:600;display:grid}.idea-list{margin:var(--space-3) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.idea{gap:var(--space-2);grid-template-columns:1fr auto;display:grid}.idea__use{gap:var(--space-1) var(--space-3);text-align:left;padding:var(--space-2) var(--space-3);grid-template-columns:3.25rem 1fr;align-items:center;display:grid}.idea__chord{grid-row:span 2;display:grid}@media (width>=40rem){.idea__use{grid-template-columns:4.5rem 1fr}}.idea__symbol{font-family:var(--font-display);font-size:var(--text-large);font-weight:600}.idea__roman{color:var(--color-muted);font-size:.8rem}.idea__why{font-size:var(--text-small)}.idea__tags{gap:var(--space-1);flex-wrap:wrap;display:flex}.tag{padding:0 var(--space-2);background:var(--color-sunk);color:var(--color-muted);border-radius:999px;font-size:.75rem}.idea__hear{min-width:2.75rem;color:var(--color-accent);padding:0}.voicing__controls{gap:var(--space-2);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.voicing__views{gap:var(--space-4);margin-top:var(--space-4);display:grid}.voicing__guitar{justify-items:center;gap:var(--space-2);display:grid}.voicing__shape{margin:0}.guitar{width:min(13rem,100%);height:auto}.guitar__fret,.guitar__string{stroke:var(--color-muted);stroke-width:1.2px}.guitar__nut{fill:var(--color-text)}.guitar__dot{fill:var(--color-accent)}.guitar__open{fill:none;stroke:var(--color-text);stroke-width:1.6px}.guitar__mark,.guitar__base,.guitar__note{fill:var(--color-text);font-size:13px;font-family:var(--font-body)}.guitar__note{fill:var(--color-muted);font-size:11px}.piano{gap:var(--space-2);margin:0;display:grid}.piano svg{width:100%;height:auto}.piano figcaption{font-size:var(--text-small);text-align:center}.piano__white{fill:var(--color-key-white);stroke:var(--color-line)}.piano__black{fill:var(--color-key-black)}.piano__white--on,.piano__black--on{fill:var(--color-key-on)}.piano__dot{fill:var(--color-accent-ink)}.stepper{font-size:var(--text-small);justify-content:center;align-items:center}.melody__controls{align-items:end;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.melody__nav{align-items:center;gap:var(--space-2);display:flex}.melody__bar{font-size:var(--text-small);text-align:center;min-width:6.5rem;font-weight:600}.roll__scroll{border:1px solid var(--color-line);border-radius:var(--radius-small);background:var(--color-surface);max-height:22rem;overflow:auto}.roll{grid-template-columns:3.25rem repeat(8,minmax(1.75rem,1fr));display:grid}.roll--cols-6{grid-template-columns:3.25rem repeat(6,minmax(1.75rem,1fr))}.roll__row{display:contents}.roll__corner,.roll__beat{z-index:2;background:var(--color-surface);border-bottom:1px solid var(--color-line);position:sticky;top:0}.roll__corner{z-index:3;left:0}.roll__beat{padding:var(--space-1) 0;color:var(--color-muted);justify-items:center;font-size:.75rem;display:grid}.roll__beat--strong{color:var(--color-text);font-weight:700}.roll__chord{min-height:1.1em;color:var(--color-accent);white-space:nowrap;font-weight:700}.roll__pitch{z-index:1;padding:0 var(--space-2);background:var(--color-surface);border-right:1px solid var(--color-line);white-space:nowrap;font-size:.75rem;line-height:1.5rem;position:sticky;left:0}.roll__pitch--outside{background:var(--color-sunk);color:var(--color-muted)}.roll__row--tonic .roll__pitch{font-weight:700}.roll__cell{border-left:1px solid color-mix(in srgb, var(--color-line) 55%, transparent);border-bottom:1px solid color-mix(in srgb, var(--color-line) 40%, transparent);cursor:pointer;height:1.5rem;transition:background-color var(--motion)}.roll__cell--strong{border-left-color:var(--color-line)}.roll__cell--scale{background:color-mix(in srgb, var(--color-sunk) 70%, transparent)}.roll__cell--chord{background:color-mix(in srgb, var(--color-accent-soft) 85%, transparent)}.roll__cell--outside{background:0 0}.roll__cell:hover{background:color-mix(in srgb, var(--color-accent) 25%, transparent)}.roll__cell:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.roll__cell--on,.roll__cell--held{background:var(--color-accent);box-shadow:inset 0 2px #ffffff59}.roll__cell--on{border-radius:var(--radius-small) 0 0 var(--radius-small);animation:.16s cubic-bezier(.3,1.5,.5,1) roll-pop}.roll__cell--held{opacity:.75}.roll__cell--outside.roll__cell--on,.roll__cell--outside.roll__cell--held{background:var(--color-notice)}.roll--playing .roll__beat{border-bottom-color:var(--color-accent)}@keyframes roll-pop{0%{transform:scale(.6)}}.melody__notes{margin:var(--space-3) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.melody-note{gap:0 var(--space-2);padding:var(--space-2);border-left:3px solid var(--color-line);background:var(--color-sunk);border-radius:var(--radius-small);font-size:var(--text-small);grid-template-columns:3.25rem 1fr;display:grid}.melody-note--chord{border-left-color:var(--color-accent)}.melody-note--outside{border-left-color:var(--color-notice)}.melody-note__name{font-weight:700;font-size:var(--text-body);grid-row:span 2}.melody-note__when{color:var(--color-muted)}.roll__row--unsingable .roll__cell:not(.roll__cell--on,.roll__cell--held){background-image:repeating-linear-gradient(135deg, transparent 0 4px, color-mix(in srgb, var(--color-notice) 18%, transparent) 4px 6px)}.roll__row--unsingable .roll__pitch{color:var(--color-notice);text-decoration:line-through;text-decoration-thickness:1px}.melody-note--warn{border-left-color:var(--color-notice)}.melody-note__warn{color:var(--color-notice);grid-column:2;font-weight:600}.melody-note__warn:before{content:"⚠ "}.melody__empty,.melody__summary{margin:var(--space-3) 0 0;font-size:var(--text-small)}.lyrics{margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-line)}.lyrics summary{cursor:pointer;font-weight:600}.lyrics[open] summary{margin-bottom:var(--space-3)}.lyrics__syllables{gap:var(--space-1);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.syllable{min-width:2.75rem;min-height:2.75rem;padding:var(--space-1) var(--space-2);font-size:var(--text-small);justify-items:center;display:grid}.syllable--stressed{text-transform:uppercase;border-top:3px solid var(--color-accent);font-weight:700}.syllable--waiting{border-style:dashed}.syllable__beat{color:var(--color-muted);font-size:.7rem}.lyrics__flags{margin:var(--space-3) 0 0;padding-left:var(--space-4);font-size:var(--text-small);color:var(--color-notice)}.roll__beat--cursor{box-shadow:inset 0 -3px 0 var(--color-focus)}.guitar-tab{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-line)}.guitar-tab__head{justify-content:space-between;align-items:end;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.guitar-tab__head h3{font-size:var(--text-large);margin:0}.guitar-tab__head p{font-size:var(--text-small);flex:12rem;margin:0}.tab__scroll{overflow-x:auto}.tab{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-size:var(--text-small);table-layout:fixed}.tab th{color:var(--color-muted);width:2.25rem;font-size:.75rem;font-weight:600}.tab thead th{padding-bottom:var(--space-1)}.tab__fret{text-align:center;background:linear-gradient(var(--color-line), var(--color-line)) center / 100% 1px no-repeat;height:1.5rem;font-weight:700;position:relative}.tab__fret:not(:empty){background-image:linear-gradient(var(--color-surface), var(--color-surface)), linear-gradient(var(--color-line), var(--color-line));color:var(--color-accent);background-position:50%;background-repeat:no-repeat;background-size:1.5em 100%,100% 1px}.tab__fret--stretch{color:var(--color-notice);-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.fretboard{margin-top:var(--space-4);grid-template-columns:2.25rem repeat(4,minmax(2.5rem,1fr));max-width:26rem;display:grid}.fretboard--cols-5{grid-template-columns:2.25rem repeat(5,minmax(2.5rem,1fr))}.fretboard__string{display:contents}.fretboard__number,.fretboard__name{color:var(--color-muted);text-align:center;align-self:center;font-size:.75rem}.fretboard__name{font-weight:600}.fret{box-shadow:none;border:0;border-right:2px solid var(--color-line);background:linear-gradient(var(--color-muted), var(--color-muted)) center / 100% 1px no-repeat;cursor:pointer;border-radius:0;min-height:2rem;padding:0;position:relative}.fret:disabled{cursor:not-allowed;opacity:.4}.fret__dot{width:.55rem;height:.55rem;transition:transform var(--motion);border-radius:50%;margin:auto;display:block}.fret--box .fret__dot{background:var(--color-sunk);border:2px solid var(--color-muted);width:.9rem;height:.9rem}.fret--chord .fret__dot{border-color:var(--color-accent);background:var(--color-accent-soft)}.fret--tonic .fret__dot{background:var(--color-accent);border-color:var(--color-accent)}.fret:hover .fret__dot,.fret:focus-visible .fret__dot{transform:scale(1.25)}.fret:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}.preset{gap:var(--space-1);margin-bottom:var(--space-4);display:grid}.preset label{font-size:var(--text-small);font-weight:600}.preset__row{gap:var(--space-2);grid-template-columns:1fr auto;display:grid}.saved{margin:var(--space-2) 0 0;gap:var(--space-2);padding:0;list-style:none;display:grid}.saved li{gap:var(--space-2);grid-template-columns:1fr auto auto auto;align-items:center;display:grid}.saved__title{overflow-wrap:anywhere}.transport{z-index:10;gap:var(--space-2) var(--space-3);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));background:var(--color-surface);border-top:1px solid var(--color-line);grid-template-columns:repeat(6,minmax(0,1fr));align-items:end;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px -16px #00000059}.transport>.field{grid-column:span 2}.transport__play{background:var(--color-accent);border-color:var(--color-accent);min-height:3rem;color:var(--color-accent-ink);grid-column:1/4;font-weight:700}.transport__play[aria-pressed=true]{background:var(--color-text);border-color:var(--color-text);color:var(--color-bg)}.transport__status{font-size:var(--text-small);color:var(--color-muted);font-variant-numeric:tabular-nums;grid-column:4/7;align-self:center;margin:0}.lcd{padding:var(--space-1) var(--space-2);border-radius:var(--radius-small);background:repeating-linear-gradient(0deg, #ffffff08 0 1px, transparent 1px 3px), var(--lcd-bg);color:var(--lcd-ink);font-family:var(--font-mono);letter-spacing:.04em;text-shadow:0 0 6px #f3b56b73;text-transform:uppercase;font-size:.8rem;box-shadow:inset 0 1px 3px #0009}@media (width>=48rem){.transport{padding-left:max(var(--space-4), calc((100vw - 72rem) / 2 + var(--space-4)));padding-right:max(var(--space-4), calc((100vw - 72rem) / 2 + var(--space-4)));grid-template-columns:12rem 1fr 12rem 10rem auto;align-items:center}.transport__play,.transport__status,.transport>.field{grid-column:auto}:root{--transport-height:4.5rem}}.about{margin-top:var(--space-8);color:var(--color-muted);font-size:var(--text-small);max-width:44rem}.about summary{cursor:pointer;color:var(--color-text);align-items:center;min-height:2.75rem;font-weight:600;display:flex}.about h2{font-size:var(--text-body);color:var(--color-text);margin-top:var(--space-4)}.about__maker{margin-top:var(--space-4)}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}