@layer document,settings,elements,components,layout;@layer document{:where(:root){--document∙background: light-dark(var(--color∙neutral-000), var(--color∙neutral-950));--document∙font-size: 16px;--document∙font-family: Inter}@font-face{font-display:swap;font-family:Inter;font-style:normal;font-weight:100 900;src:url(/assets/inter-DiVDrmQJ.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html{color-scheme:light dark;font-size:var(--document∙font-size);font-style:normal;font-weight:400;font-family:var(--document∙font-family),system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-optical-sizing:auto}body{background:var(--document∙background)}}@layer settings{:where(:root){--color∙neutral-000: oklch(100% 0 266);--color∙neutral-050: oklch( 98% 0 266);--color∙neutral-100: oklch( 96% .01 266);--color∙neutral-200: oklch( 91% .01 266);--color∙neutral-300: oklch( 85% .01 266);--color∙neutral-400: oklch( 70% .02 266);--color∙neutral-500: oklch( 56% .02 266);--color∙neutral-600: oklch( 45% .02 266);--color∙neutral-700: oklch( 31% .02 266);--color∙neutral-800: oklch( 26% .02 266);--color∙neutral-900: oklch( 22% .02 266);--color∙neutral-950: oklch( 18% .02 266);--color∙blue-100: oklch(95% .05 267);--color∙blue-200: oklch(90% .1 267);--color∙blue-300: oklch(83% .2 267);--color∙blue-400: oklch(76% .25 267);--color∙blue-500: oklch(69% .31 267);--color∙blue-600: oklch(62% .27 267);--color∙blue-700: oklch(55% .2 267);--color∙blue-800: oklch(48% .2 267);--color∙blue-900: oklch(41% .1 267);--color∙blue-950: oklch(29% .12 267);--color∙orange-100: oklch(97% .05 62);--color∙orange-200: oklch(90% .1 62);--color∙orange-300: oklch(83% .2 62);--color∙orange-400: oklch(76% .25 62);--color∙orange-500: oklch(69% .31 62);--color∙orange-600: oklch(62% .27 62);--color∙orange-700: oklch(55% .2 62);--color∙orange-800: oklch(48% .2 62);--color∙orange-900: oklch(41% .1 62);--color∙yellow-100: oklch(97% .05 101);--color∙yellow-200: oklch(90% .1 101);--color∙yellow-300: oklch(83% .2 101);--color∙yellow-400: oklch(76% .25 101);--color∙yellow-500: oklch(69% .31 101);--color∙yellow-600: oklch(62% .27 101);--color∙yellow-700: oklch(55% .2 101);--color∙yellow-800: oklch(48% .2 101);--color∙yellow-900: oklch(41% .1 101);--color∙red-100: oklch(97% .05 25);--color∙red-200: oklch(90% .1 25);--color∙red-300: oklch(83% .2 25);--color∙red-400: oklch(76% .25 25);--color∙red-500: oklch(69% .31 25);--color∙red-600: oklch(62% .27 25);--color∙red-700: oklch(55% .2 25);--color∙red-800: oklch(48% .2 25);--color∙red-900: oklch(41% .1 25);--color∙green-100: oklch(97% .05 145);--color∙green-200: oklch(90% .1 145);--color∙green-300: oklch(83% .2 145);--color∙green-400: oklch(76% .25 145);--color∙green-500: oklch(69% .31 145);--color∙green-600: oklch(62% .27 145);--color∙green-700: oklch(55% .2 145);--color∙green-800: oklch(48% .2 145);--color∙green-900: oklch(41% .1 145);--color∙purple-100: oklch(97% .05 295);--color∙purple-200: oklch(90% .1 295);--color∙purple-300: oklch(83% .2 295);--color∙purple-400: oklch(76% .25 295);--color∙purple-500: oklch(69% .31 295);--color∙purple-600: oklch(62% .27 295);--color∙purple-700: oklch(55% .2 295);--color∙purple-800: oklch(48% .2 295);--color∙purple-900: oklch(41% .1 295);--color∙pink-100: oklch(97% .05 346);--color∙pink-200: oklch(90% .1 346);--color∙pink-300: oklch(83% .2 346);--color∙pink-400: oklch(76% .25 346);--color∙pink-500: oklch(69% .31 346);--color∙pink-600: oklch(62% .27 346);--color∙pink-700: oklch(55% .2 346);--color∙pink-800: oklch(48% .2 346);--color∙pink-900: oklch(41% .1 346);--color∙teal-100: oklch(97% .05 190);--color∙teal-200: oklch(90% .1 190);--color∙teal-300: oklch(83% .2 190);--color∙teal-400: oklch(76% .25 190);--color∙teal-500: oklch(69% .31 190);--color∙teal-600: oklch(62% .27 190);--color∙teal-700: oklch(55% .2 190);--color∙teal-800: oklch(48% .2 190);--color∙teal-900: oklch(41% .1 190)}}@layer settings{:where(:root){--ratio∙enharmonic: 1;--ratio∙schisma: 1.001;--ratio∙minor-diesis: 1.008;--ratio∙diesis: 1.014;--ratio∙minor-second: 1.067;--ratio∙major-second: 1.125;--ratio∙minor-third: 1.2;--ratio∙major-third: 1.25;--ratio∙perfect-fourth: 1.333;--ratio∙augmented-fourth: 1.414;--ratio∙perfect-fifth: 1.5;--ratio∙golden: 1.5;--ratio∙typescale: var(--ratio∙perfect-fourth)}}@layer settings{:where(:root){--focus-ring∙box-shadow: 0 0 0 .25rem var(--focus-ring∙color);--focus-ring∙color: light-dark(var(--color∙blue-700), var(--color∙blue-900));--focus-ring∙offset: .25rem;--focus-ring∙width: .125rem}}@layer elements{:where(:root){--heading·color: light-dark(var(--color∙neutral-950), var(--color∙neutral-100))}:where(h1,h2,h3,h4,h5,h6){--font-size: 1rem;--font-weight: 400;--line-height: 1.3;color:var(--heading·color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-wrap:pretty}:where(h1){--font-size: calc(1rem*pow(var(--ratio∙typescale), 5)) }:where(h2){--font-size: calc(1rem*pow(var(--ratio∙typescale), 4)) }:where(h3){--font-size: calc(1rem*pow(var(--ratio∙typescale), 3)) }:where(h4){--font-size: calc(1rem*pow(var(--ratio∙typescale), 2)) }:where(h5){--font-size: calc(1rem * var(--ratio∙typescale))}}@layer elements{:where(:root){--link∙color: light-dark(var(--color∙neutral-900), var(--color∙neutral-200))}:where(a){color:var(--link∙color);font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline}}@layer elements{:where(p){--font-size: 1.25rem;--font-weight: 400;--line-height: 1.75;color:light-dark(var(--color∙neutral-700),var(--color∙neutral-200));font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-wrap:pretty}:where(p>em){color:light-dark(var(--color∙neutral-950),var(--color∙neutral-100));font-style:normal}:where(p):has(+*){margin-bottom:2rem}}@layer components{:where(:root){--key·background: light-dark(var(--color∙neutral-000), var(--color∙neutral-200));--key·block-size: 12.5rem;--key·border: light-dark(var(--color∙neutral-300), var(--color∙neutral-200));--key·color: light-dark(var(--color∙neutral-600), var(--color∙neutral-800));--key·font-size: .875rem;--key·inline-size: 4rem}:where(.piano){display:flex;gap:4px;position:relative}:where(.key){background:var(--key·background);block-size:var(--key·block-size);border-radius:0 0 .5rem .5rem;border:1px solid var(--key·border);color:var(--key·color);cursor:pointer;display:flex;align-items:flex-end;justify-content:center;font-size:var(--key·font-size);font-weight:500;inline-size:var(--key·inline-size);padding-bottom:1rem;-webkit-user-select:none;user-select:none}:where(.key).is-black{--key·background: linear-gradient( to bottom, var(--color∙neutral-800) 0%, var(--color∙neutral-950) 100% );--key·block-size: 8.125rem;--key·color: light-dark(var(--color∙neutral-400), var(--color∙neutral-300));--key·font-size: .75rem;--key·inline-size: 2.5rem;border:none;margin-inline-start:-1.375rem;margin-inline-end:-1.375rem;z-index:1}}@layer layout{:where(:root){--layout∙background: light-dark(var(--color∙neutral-000), var(--color∙neutral-950));--layout∙block-size: 100dvh;--layout∙inline-size: 50rem;--layout∙padding-inline: 1rem}:where(.layout){background:var(--layout∙background);block-size:var(--layout∙block-size);display:flex;flex-direction:column;gap:4rem;height:var(--layout∙block-size);justify-content:center;margin:0 auto;padding-inline:var(--layout∙padding-inline);max-width:var(--layout∙inline-size)}}