@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/f4b234103afdc32a-s.197tvtifbphtu.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/0b60d5f95c5f3f76-s.2e115y8-hourl.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque;font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;src:url(../media/8056169c9d560660-s.p.41rroleoq1br7.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Bricolage Grotesque Fallback;src:local(Arial);ascent-override:88.21%;descent-override:25.61%;line-gap-override:0.0%;size-adjust:105.43%}.NjNj1a_className{font-family:Bricolage Grotesque,Bricolage Grotesque Fallback;font-style:normal}.NjNj1a_variable{--font-bricolage:"Bricolage Grotesque", "Bricolage Grotesque Fallback"}
:root{--ivory:#f8f5ee;--key-white:#fffdf8;--ebony:#17120f;--ebony-soft:#5f554c;--ebony-lift:#1f1914;--felt:#b5232d;--felt-deep:#a3202a;--felt-glow:#ff9d92;--hairline:#ddd5c6;--hairline-dark:#3a312b;--smoke:#b5aa9e;--color-bg:var(--ivory);--color-surface:var(--key-white);--color-text:var(--ebony);--color-muted:var(--ebony-soft);--color-rule:var(--hairline);--color-accent:var(--felt-deep);--color-focus:var(--felt-deep);--color-felt:var(--felt);--color-on-felt:var(--key-white);--color-ebony:var(--ebony);--color-on-ebony:var(--ivory);--color-paper:var(--key-white);--color-ink-on-paper:var(--ebony);--color-on-note:var(--ebony);--color-right:var(--note-g);--note-a:#00b5c5;--note-b:#589eff;--note-c:#ba7afb;--note-d:#f164af;--note-e:#ff645f;--note-f:#c69700;--note-g:#27bd53;--quality-perfect:#3bcddc;--quality-major:#eab600;--quality-minor:#b98cea;--quality-tritone:#ff706a;--step--1:clamp(.9rem, .8706rem + .1468vw, .9844rem);--step-0:clamp(1.125rem, 1.0598rem + .3261vw, 1.3125rem);--step-1:clamp(1.4063rem, 1.2867rem + .5977vw, 1.75rem);--step-2:clamp(1.7578rem, 1.5577rem + 1.0007vw, 2.3332rem);--step-3:clamp(2.1973rem, 1.8795rem + 1.5889vw, 3.1109rem);--step-4:clamp(2.7466rem, 2.2592rem + 2.4368vw, 4.1477rem);--step-5:clamp(3.4332rem, 2.7039rem + 3.6469vw, 5.5302rem);--leading-tightest:1;--leading-tighter:1.1;--leading-tight:1.2;--leading-snug:1.3;--leading-body:1.55;--space-3xs:clamp(.2813rem, .2649rem + .0815vw, .3281rem);--space-2xs:clamp(.5625rem, .5299rem + .163vw, .6563rem);--space-xs:clamp(.8438rem, .7948rem + .2446vw, .9844rem);--space-s:clamp(1.125rem, 1.0598rem + .3261vw, 1.3125rem);--space-m:clamp(1.6875rem, 1.5897rem + .4891vw, 1.9688rem);--space-l:clamp(2.25rem, 2.1196rem + .6522vw, 2.625rem);--space-xl:clamp(3.375rem, 3.1793rem + .9783vw, 3.9375rem);--space-2xl:clamp(4.5rem, 4.2391rem + 1.3043vw, 5.25rem);--space-3xl:clamp(6.75rem, 6.3587rem + 1.9565vw, 7.875rem);--space-3xs-2xs:clamp(.2813rem, .1508rem + .6522vw, .6563rem);--space-2xs-xs:clamp(.5625rem, .4158rem + .7337vw, .9844rem);--space-xs-s:clamp(.8438rem, .6807rem + .8152vw, 1.3125rem);--space-s-m:clamp(1.125rem, .8315rem + 1.4674vw, 1.9688rem);--space-m-l:clamp(1.6875rem, 1.3614rem + 1.6304vw, 2.625rem);--space-l-xl:clamp(2.25rem, 1.663rem + 2.9348vw, 3.9375rem);--space-xl-2xl:clamp(3.375rem, 2.7228rem + 3.2609vw, 5.25rem);--space-2xl-3xl:clamp(4.5rem, 3.3261rem + 5.8696vw, 7.875rem);--space-s-l:clamp(1.125rem, .6033rem + 2.6087vw, 2.625rem);--space-m-2xl:clamp(1.6875rem, .4484rem + 6.1957vw, 5.25rem);--font-body:var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;--font-weight-regular:400;--font-weight-bold:700;--font-weight-display:800;--measure:34em;--page-max:72rem;--gutter:var(--space-s-m);--radius:.25rem;--tap:2.75rem;--stroke-heavy:.25rem;--nudge:.375rem;--kbd-height:clamp(7rem, 24vh, 14rem);--kbd-height-short:clamp(5rem, 28vh, 9rem);--black-key-width:.6;--black-key-overhang:.3;--black-key-height:58%}@supports (color:lab(0% 0 0)){:root{--note-a:lab(66.78% -54.6899 -29.4045);--note-b:lab(63.7467% 4.75836 -66.2537);--note-c:lab(62.312% 43.9617 -55.815);--note-d:lab(62.639% 60.6604 -11.7526);--note-e:lab(63.3139% 59.7937 35.1683);--note-f:lab(65.357% 14.3828 136.876);--note-g:lab(67.5217% -56.1039 41.2814);--quality-perfect:lab(75.5217% -35.5955 -18.9476);--quality-major:lab(77.0726% 10.7083 83.773);--quality-minor:lab(65.5522% 31.001 -41.49);--quality-tritone:lab(65.6379% 59.7559 34.9846)}}@media (prefers-color-scheme:dark){:root{--color-bg:var(--ebony);--color-surface:var(--ebony-lift);--color-text:var(--ivory);--color-muted:var(--smoke);--color-rule:var(--hairline-dark);--color-accent:var(--felt-glow);--color-focus:var(--felt-glow)}}@layer base{*,:before,:after{box-sizing:border-box}html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background-color:var(--color-bg)}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}body{background-color:var(--color-bg);min-height:100vh;color:var(--color-text);font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);margin:0}h1,h2,h3{font-weight:var(--font-weight-display);text-wrap:balance;margin:0}p,ol,ul{margin:0}p,li{text-wrap:pretty}a{color:var(--color-accent);text-underline-offset:.2em;text-decoration-line:underline;text-decoration-thickness:1px}a:hover{color:var(--color-text);text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}}@layer components{.skip-link{left:var(--gutter);top:var(--space-2xs);padding:var(--space-2xs) var(--space-s);background-color:var(--color-ebony);color:var(--color-on-ebony);position:absolute;transform:translateY(-300%)}.skip-link:focus{transform:none}.page{width:100%;max-width:var(--page-max);padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));margin-inline:auto}.button{min-height:var(--tap);padding:var(--space-2xs) var(--space-m);border:var(--stroke-heavy) solid transparent;border-radius:var(--radius);background-color:var(--color-felt);color:var(--color-on-felt);font:inherit;font-weight:var(--font-weight-bold);line-height:var(--leading-tight);cursor:pointer;align-items:center;text-decoration:none;display:inline-flex}.button:hover{color:var(--color-on-felt);text-underline-offset:.2em;text-decoration:underline;text-decoration-thickness:2px}.button--secondary{color:var(--color-text);border:var(--stroke-heavy) solid var(--color-text);background-color:#0000}.button--secondary:hover{background-color:var(--color-text);color:var(--color-bg)}.link-button{color:var(--color-accent);font:inherit;text-underline-offset:.2em;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.tap-target{min-height:var(--tap);align-items:center;display:inline-flex}.small{font-size:var(--step--1);line-height:var(--leading-snug);color:var(--color-muted)}}:root{--header-height:calc(var(--tap) + var(--space-xs) * 2 + env(safe-area-inset-top))}.site-header{justify-content:space-between;align-items:center;gap:var(--space-s);min-height:var(--header-height);padding-block:var(--space-xs);padding-top:calc(var(--space-xs) + env(safe-area-inset-top));display:flex}.brand{font-weight:var(--font-weight-display);font-size:var(--step-1);line-height:var(--leading-tight);color:var(--color-text);text-decoration:none}.hero{gap:var(--space-l);padding-block:var(--space-xl-2xl) var(--space-l-xl);display:grid}.hero__title{font-size:var(--step-5);line-height:var(--leading-tightest)}.hero__title span{display:block}@media (max-width:64rem){.hero{min-height:calc(100vh - var(--header-height));min-height:calc(100svh - var(--header-height));padding-block:var(--space-m) calc(var(--space-m) + env(safe-area-inset-bottom));grid-template-rows:repeat(4,auto) 1fr;align-content:start}.octave{max-width:none;height:auto;min-height:clamp(7rem,22vw,14rem)}}.hero__lede{max-width:var(--measure);font-size:var(--step-1);line-height:var(--leading-snug)}.hero__note{align-items:center;column-gap:var(--space-s);flex-wrap:wrap;display:flex}.hero__actions{align-items:center;gap:var(--space-s);flex-wrap:wrap;display:flex}.octave{border:1px solid var(--color-rule);border-radius:var(--radius);max-width:44rem;height:clamp(7rem,22vw,14rem);display:flex;position:relative;overflow:hidden}.octave__white{background-color:var(--color-paper);border-right:1px solid var(--color-rule);flex:1}.octave__white:last-child{border-right:0}.octave__black{width:8.57143%;height:58%;top:0;left:calc(100% / 7 * var(--at) - 100% / 7 * .3);background-color:var(--color-ebony);border-radius:0 0 var(--radius) var(--radius);position:absolute}.octave__white[data-note],.octave__black[data-note]{background-color:var(--lit)}.octave [data-note=c]{--lit:var(--note-c)}.octave [data-note=d]{--lit:var(--note-d)}.octave [data-note=e]{--lit:var(--note-e)}.octave [data-note=f]{--lit:var(--note-f)}.octave [data-note=g]{--lit:var(--note-g)}@media (prefers-reduced-motion:no-preference){.octave [data-note]{animation:.6s ease-out both key-lights;animation-delay:calc(var(--order) * .18s + .3s)}@keyframes key-lights{0%{background-color:var(--color-paper)}}}.band{padding-block:var(--space-m-2xl);position:relative}.band:before{content:"";top:0;inset-inline:var(--gutter);border-top:1px solid var(--color-rule);position:absolute}.band__grid{gap:var(--space-m);display:grid}@media (min-width:48rem){.band__grid{column-gap:var(--space-l);grid-template-columns:minmax(10rem,1fr) 3fr}}.band__title{font-size:var(--step-2);line-height:var(--leading-tight)}.band__body{gap:var(--space-s);max-width:var(--measure);display:grid}.steps{gap:var(--space-m);counter-reset:step;padding:0;list-style:none;display:grid}.steps li{grid-template-columns:var(--space-xl) 1fr;counter-increment:step;align-items:baseline;display:grid}.steps li:before{content:counter(step);font-size:var(--step-4);line-height:var(--leading-tightest);font-weight:var(--font-weight-display);color:var(--color-accent)}.site-footer{padding-block:var(--space-l);border-top:1px solid var(--color-rule)}