@font-face{font-family:Mona Sans;src:url(/fonts/mona-sans-vf.woff2)format("woff2");font-weight:200 900;font-stretch:75% 125%;font-display:swap}@font-face{font-family:Fragment Mono;src:url(/fonts/fragment-mono.woff2)format("woff2");font-weight:400;font-display:swap}@font-face{font-family:Twelve Accidentals;src:url(/fonts/twelve-accidentals.woff2)format("woff2");unicode-range:U+266D-266F;font-display:block;size-adjust:92%}@font-face{font-family:Mona Fallback;src:local(Arial);size-adjust:104%;ascent-override:96%;descent-override:28%;line-gap-override:0%}:root{--paper:#ecf0f5;--paper-2:#e1e6ed;--paper-3:#d4dae1;--ink:#111827;--ink-2:#3e4553;--muted:#4f5662;--rule:#b5bbc4;--rule-2:#ccd1d9;--night:#060a18;--night-2:#0f1423;--night-3:#1b2131;--night-ink:#e8edf4;--night-ink-2:#cad2dd;--night-muted:#a3abb9;--night-rule:#363d4c;--night-pool:#030511e0;--scrim:#060a1859;--veil:#ecf0f5e6;--pc-0:#f66e60;--pc-1:#2ae;--pc-2:#c2981b;--pc-3:#ac83f9;--pc-4:#41ba5d;--pc-5:#ee6b9e;--pc-6:#11b2c5;--pc-7:#e5811f;--pc-8:#7799fa;--pc-9:#96ab15;--pc-10:#d574d3;--pc-11:#0db89e;--pc-0-n:#fea195;--pc-1-n:#73c8fe;--pc-2-n:#e6b731;--pc-3-n:#c6aefd;--pc-4-n:#73d885;--pc-5-n:#fc9cbd;--pc-6-n:#2ed4e9;--pc-7-n:#fca865;--pc-8-n:#a3bcfd;--pc-9-n:#b5ca4e;--pc-10-n:#f199ee;--pc-11-n:#2cdabe;--fg:var(--ink);--fg-2:var(--ink-2);--fg-mute:var(--muted);--hair:var(--rule);--hair-2:var(--rule-2);--chip:var(--paper);--chip-2:var(--paper-2);--focus:var(--ink);--font-display:"Mona Sans", "Twelve Accidentals", "Mona Fallback", system-ui, sans-serif;--font-body:"Mona Sans", "Twelve Accidentals", "Mona Fallback", system-ui, sans-serif;--font-mono:"Fragment Mono", "Twelve Accidentals", ui-monospace, "Cascadia Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.1875rem;--text-lg:clamp(1.35rem, 1.1rem + .9vw, 1.75rem);--text-xl:clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);--text-display:clamp(2.6rem, 1.4rem + 4.6vw, 5.25rem);--track-display:-.032em;--track-tight:-.018em;--track-label:.09em;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--space-7:3rem;--space-8:4rem;--space-9:6rem;--col:clamp(9.5rem, 15vw, 15rem);--radius-s:6px;--radius-m:10px;--radius-pill:999px;--rule-w:1px;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-in:cubic-bezier(.55, 0, 1, .45);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-short:.14s;--dur-med:.26s;--dur-long:.52s;--z-stage:0;--z-ring:10;--z-copy:20;--z-chrome:30;--z-sheet:40;--z-toast:50;--shadow-1:0 1px 0 #ffffff80 inset, 0 8px 22px -14px #121a2d73}@supports (color:lab(0% 0 0)){:root{--paper:lab(94.648% -.65127 -2.93601);--paper-2:lab(91.1636% -.806958 -3.66591);--paper-3:lab(86.7482% -.88954 -4.41291);--ink:lab(8.12913% .90225 -11.5762);--ink-2:lab(29.1069% -.290096 -9.59094);--muted:lab(36.1046% -.62491 -8.13261);--rule:lab(75.5999% -.858247 -5.17888);--rule-2:lab(83.7321% -.888109 -4.4121);--night:lab(2.91413% .86461 -7.74866);--night-2:lab(6.47538% 1.2199 -11.3826);--night-3:lab(12.7698% 1.00677 -11.6578);--night-ink:lab(93.5997% -.807643 -3.66631);--night-ink-2:lab(83.7076% -1.08606 -6.64935);--night-muted:lab(69.7623% -1.0123 -8.14989);--night-rule:lab(25.598% .110924 -10.3215);--night-pool:lab(1.4646% .72559 -5.26698/.88);--scrim:lab(2.91413% .86461 -7.74866/.35);--veil:lab(94.648% -.65127 -2.93601/.9);--shadow-1:0 1px 0 lab(100% 0 0/.5) inset, 0 8px 22px -14px lab(9.20755% 1.52405 -14.3909/.45)}}.is-night{--veil:#060a18e0;--fg:var(--night-ink);--fg-2:var(--night-ink-2);--fg-mute:var(--night-muted);--hair:var(--night-rule);--hair-2:var(--night-2);--chip:var(--night-2);--chip-2:var(--night-3);--focus:var(--night-ink);--shadow-1:0 1px 0 #ffffff0f inset, 0 10px 24px -14px #000002cc}@supports (color:lab(0% 0 0)){.is-night{--veil:lab(2.91413% .86461 -7.74866/.88);--shadow-1:0 1px 0 lab(100% 0 0/.06) inset, 0 10px 24px -14px lab(.0984955% .135712 -.7238/.8)}}html,body{overflow-x:clip}html{background:var(--paper);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;scroll-padding-top:0}body{background:var(--paper);min-height:100%;color:var(--fg);font-family:var(--font-body);font-size:var(--text-base);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-feature-settings:"kern" 1;transition:color var(--dur-long) var(--ease-out);margin:0;font-weight:420;font-stretch:100%;line-height:1.55}body.is-night{background:var(--night);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}::selection{background:var(--fg);color:var(--chip)}a{color:inherit;text-underline-offset:.12em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}button{font:inherit;color:inherit}img,canvas,svg{display:block}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.skip{left:var(--space-4);top:var(--space-4);z-index:var(--z-toast);padding:var(--space-2) var(--space-4);background:var(--chip);color:var(--fg);border:var(--rule-w) solid var(--fg);border-radius:var(--radius-s);position:fixed;transform:translateY(-200%)}.skip:focus-visible{transform:none}#stage{width:100%;height:100vh;height:100lvh;z-index:var(--z-stage);opacity:0;transition:opacity .7s var(--ease-out);touch-action:pan-y;position:fixed;inset:0 0 auto}#stage.is-live{opacity:1}.stage-fallback{z-index:calc(var(--z-stage) - 1);background:var(--paper) url(/img/paper-day-1600.webp) center / cover no-repeat;height:100lvh;transition:opacity .7s var(--ease-out);position:fixed;inset:0}.gl-ok .stage-fallback{opacity:0}.is-night .stage-fallback{background-image:url(/img/paper-night-1600.webp)}.ring-ui{z-index:var(--z-ring);pointer-events:none;position:fixed;inset:0}.note{will-change:transform, opacity;pointer-events:none;position:absolute;top:0;left:0;transform:translate(-200px,-200px)}.note__label{font-family:var(--font-display);font-weight:640;font-stretch:108%;font-size:var(--text-sm);letter-spacing:.005em;white-space:nowrap;color:var(--fg);opacity:0;transition:color var(--dur-med) var(--ease-out);position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.note__label .alt{color:var(--fg-2);text-align:center;margin-top:-.15em;font-size:.82em;font-weight:520;display:block}.is-night .note__label:before{content:"";z-index:-1;background:radial-gradient(closest-side, var(--night-pool) 50%, transparent);position:absolute;inset:-.6em -.85em}.is-night .note__label{text-shadow:0 0 .12em var(--night)}.is-night .note__label .alt{color:var(--night-ink-2)}.note.is-black .note__label{text-align:center;font-size:.8rem;line-height:1.15}.note.is-black .note__label .alt{margin-top:.14em}.note.is-dim .note__label{opacity:.38}.note__hit{cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;position:absolute;top:0;left:0}.note__hit:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.ring-ui.is-quiet .note__hit{pointer-events:none}.ring-ui .tag{opacity:0;padding:var(--space-1) var(--space-2);background:var(--chip);color:var(--fg);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.02em;white-space:nowrap;pointer-events:none;border-radius:3px;position:absolute;top:0;left:0;transform:translate(-200px,-200px)}.chrome{z-index:var(--z-chrome);align-items:center;gap:var(--space-4);padding:max(var(--space-3), env(safe-area-inset-top)) clamp(var(--space-4), 3vw, var(--space-6)) var(--space-3);pointer-events:none;display:flex;position:fixed;inset:0 0 auto}.chrome>*{pointer-events:auto}.wordmark{font-family:var(--font-display);letter-spacing:-.02em;white-space:nowrap;padding-block:var(--space-1);font-size:1.32rem;font-weight:820;font-stretch:125%;line-height:1;text-decoration:none}.chrome__state{align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-1);font-weight:560;font-size:var(--text-sm);white-space:nowrap;cursor:pointer;background:0 0;border:0;display:none}.chrome__state svg{width:12px;height:12px}.chrome__tools{gap:var(--space-5);margin-left:auto;display:flex}.chrome__tools a{font-size:var(--text-sm);padding:var(--space-2) 0;white-space:nowrap;transition:background-size var(--dur-med) var(--ease-out);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;font-weight:560;text-decoration:none}.chrome__tools a:hover,.chrome__tools a[aria-current=page]{background-size:100% 1px}.order{border:var(--rule-w) solid var(--hair);border-radius:var(--radius-s);padding:var(--space-1);gap:var(--space-1);background:var(--chip);display:inline-flex}.order[hidden]{display:none}.order button{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);letter-spacing:.02em;cursor:pointer;white-space:nowrap;color:var(--fg-2);transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);background:0 0;border:0;border-radius:4px;font-weight:600}.order button[aria-pressed=true]{background:var(--fg);color:var(--chip)}.sound{align-items:center;gap:var(--space-2);border:var(--rule-w) solid var(--hair);background:var(--chip);border-radius:var(--radius-s);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);font-size:var(--text-xs);letter-spacing:.02em;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);font-weight:600;display:inline-flex}.sound svg{width:18px;height:18px}.sound .sound__off{opacity:1}.sound .sound__wave,.sound[aria-pressed=true] .sound__off{opacity:0}.sound[aria-pressed=true] .sound__wave{opacity:1}.sound:hover{border-color:var(--fg-2)}.sound:active{transform:translateY(1px)}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:2.5rem;padding:0 var(--space-4);border:var(--rule-w) solid var(--fg);border-radius:var(--radius-s);background:var(--chip);color:var(--fg);font-weight:600;font-size:var(--text-sm);letter-spacing:.005em;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform 90ms var(--ease-out);display:inline-flex}.btn:hover{background:var(--fg);color:var(--chip)}.btn:active{transform:translateY(1px)}.btn[aria-pressed=true]{background:var(--fg);color:var(--chip)}.btn:disabled{opacity:.4;cursor:not-allowed}button:disabled{opacity:.45;cursor:not-allowed}:is(.order button,.notepick button,.typepick button,.chordbtn,.neigh,.keys button):active{transform:translateY(1px)}.btn--quiet{border-color:var(--hair)}.btn--quiet:hover{border-color:var(--fg)}.btn--icon{width:2.5rem;padding:0}.btn svg{width:16px;height:16px}.link-btn{padding:var(--space-1) 0;cursor:pointer;text-underline-offset:.12em;min-height:24px;font:inherit;color:inherit;background:0 0;border:0;text-decoration:underline;text-decoration-thickness:1px}.link-btn:hover{text-decoration-thickness:2px}h1,h2,h3{font-family:var(--font-display);text-wrap:balance;overflow-wrap:anywhere;min-width:0;margin:0;font-style:normal}h1{font-size:var(--text-display);letter-spacing:var(--track-display);font-weight:800;font-stretch:125%;line-height:.98}h2{font-size:var(--text-xl);letter-spacing:var(--track-tight);font-weight:760;font-stretch:118%;line-height:1.06}p{text-wrap:pretty;margin:0}.readout{font-family:var(--font-mono);font-size:var(--text-sm);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--fg-2)}.readout--big{font-size:var(--text-lg);color:var(--fg);letter-spacing:-.01em}.hint{font-size:var(--text-sm);color:var(--fg-2)}.status{z-index:var(--z-chrome);right:clamp(var(--space-4), 3vw, var(--space-6));bottom:max(var(--space-4), env(safe-area-inset-bottom));gap:var(--space-4);padding:var(--space-2) var(--space-3);border-top:var(--rule-w) solid var(--hair);font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--fg);pointer-events:none;white-space:nowrap;align-items:baseline;display:flex;position:fixed}.status span:empty{display:none}.status__a{color:var(--fg)}.credits{z-index:var(--z-copy);padding:var(--space-6) clamp(var(--space-4), 4vw, var(--space-8)) calc(var(--space-9) + env(safe-area-inset-bottom));font-size:var(--text-xs);color:var(--fg-2);max-width:72ch;position:relative}.sheet{border:var(--rule-w) solid var(--hair);border-radius:var(--radius-m);background:var(--chip);color:var(--fg);padding:var(--space-5);width:min(22rem,100% - 2rem);box-shadow:var(--shadow-1)}.sheet::backdrop{background:var(--scrim,#060a1859)}@supports (color:lab(0% 0 0)){.sheet::backdrop{background:var(--scrim,lab(2.91413% .86461 -7.74866/.35))}}.sheet ol{margin:0 0 var(--space-4);padding:0;list-style:none}.sheet li a,.sheet li button{text-align:left;width:100%;padding:var(--space-3) 0;border:0;border-bottom:var(--rule-w) solid var(--hair-2);cursor:pointer;background:0 0;font-weight:560;text-decoration:none;display:block}.sheet li [aria-current=step]{font-weight:780}.play__midi{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-mute);margin-left:var(--space-2)}.keys{-webkit-user-select:none;user-select:none;touch-action:none;height:clamp(7.5rem,16vh,10.5rem);display:flex;position:relative}.keys button{border:var(--rule-w) solid var(--fg);background:var(--paper);min-width:0;color:var(--ink);border-radius:0 0 var(--radius-s) var(--radius-s);padding-bottom:var(--space-2);font-family:var(--font-mono);cursor:pointer;border-right-width:0;flex:1 1 0;justify-content:center;align-items:flex-end;font-size:.7rem;transition:background-color 80ms linear;display:flex;position:relative}.keys button:last-of-type{border-right-width:var(--rule-w)}.keys button.is-black{z-index:2;background:var(--ink);height:60%;color:var(--paper);border-color:var(--ink);border-right-width:var(--rule-w);position:absolute;top:0}.keys button.is-down{background:var(--paper-3)}.keys button.is-black.is-down{background:var(--ink-2)}.keys button .dot{border:1.5px solid var(--ink);opacity:0;border-radius:50%;width:10px;height:10px;margin-left:-5px;position:absolute;bottom:1.8rem;left:50%}.keys button.is-down .dot{opacity:1}.frets{-webkit-user-select:none;user-select:none;touch-action:none;grid-template-columns:2.2rem repeat(13,minmax(0,1fr));gap:0;display:grid;overflow-x:auto}.frets .string-name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--fg-2);align-items:center;display:flex}.frets button{border:0;border-left:2px solid var(--fg-mute);cursor:pointer;background:0 0;height:2.2rem;position:relative}.frets button:before{content:"";background:var(--fg-2);height:1px;position:absolute;top:50%;left:0;right:0}.frets button.is-open{border-left:4px solid var(--fg)}.frets button span{width:1.5rem;height:1.5rem;line-height:1.5rem;font-family:var(--font-mono);opacity:0;border-radius:50%;font-size:.62rem;display:inline-block;position:relative}.frets button.is-down span{opacity:1;background:var(--fg);color:var(--chip)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important}#stage,.stage-fallback{transition:opacity .15s linear!important}}