:root{color-scheme:dark;--space-3xs:2px;--space-2xs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--space-3xl:96px;--space-4xl:144px;--text-xs:.75rem;--text-sm:.875rem;--text-md:1rem;--text-lg:1.2rem;--text-xl:1.44rem;--text-2xl:1.728rem;--text-3xl:2.074rem;--text-display-s:1.44rem;--text-display:2.074rem;--text-section:1.2rem;--text-title:1rem;--text-lead:1rem;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.7, 0, .84, 0);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--dur-micro:.12s;--dur-short:.22s;--dur-long:.42s;--color-error:oklch(52% .19 27);--color-success:oklch(50% .12 150);--container:1440px;--gutter:64px;--gap-columns:32px;--section-gap-s:120px;--section-gap:144px;--section-gap-l:176px;--z-base:1;--z-raised:10;--z-dropdown:100;--z-sticky:200;--z-sticky-nav:300;--z-modal:400;--z-toast:500;--z-tooltip:600;--color-paper:oklch(13.2% .022 258);--color-paper-2:oklch(16.4% .022 258);--color-paper-3:oklch(19.6% .02 258);--color-ink:oklch(93.5% .012 85);--color-ink-2:oklch(84% .014 85);--color-muted:oklch(72% .02 255);--color-rule:oklch(27% .02 258);--color-rule-2:oklch(21% .02 258);--color-accent:oklch(82% .095 68);--color-accent-soft:oklch(36% .05 66);--color-accent-ink:oklch(20% .03 62);--color-focus:oklch(82% .095 68);--color-band:oklch(10.5% .02 258);--color-band-ink:oklch(93.5% .012 85);--color-slot:oklch(30% .03 258);--metal-hi:oklch(44% .012 255);--metal-lo:oklch(25% .014 255);--ivory-hi:oklch(96% .012 85);--ivory-lo:oklch(86.5% .016 82);--ivory-shade:oklch(74% .02 80);--ebony-hi:oklch(33% .012 255);--ebony-lo:oklch(15% .014 258);--key-label:oklch(46% .02 255);--key-label-dark:oklch(78% .02 255);--edge-light:inset 0 1px 0 oklch(100% 0 0/.09);--shadow-part:0 1px 0 oklch(0% 0 0/.5), 0 10px 18px -6px oklch(0% 0 0/.55);--shadow-panel:0 1px 0 oklch(0% 0 0/.45), 0 30px 60px -20px oklch(0% 0 0/.7);--glow:oklch(82% .095 68/.55);--shade-strong:oklch(0% 0 0/.65);--shade:oklch(0% 0 0/.5);--shade-soft:oklch(0% 0 0/.35);--sheen:oklch(100% 0 0/.07);--sheen-strong:oklch(100% 0 0/.35);--accent-wash:oklch(82% .095 68/.12);--color-hint:oklch(13.2% .022 258/.86);--font-display:"Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Hiragino Sans", "Yu Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;--font-outlier:"JetBrains Mono", ui-monospace, monospace;--radius-card:20px;--radius-part:6px;--radius-pill:999px;--rule-hair:1px;--shadow-card:none;--tracking-display:-.035em;--display-weight:400}*,:before,:after{box-sizing:border-box}html,body{overflow-x:clip}html{scrollbar-color:var(--color-muted) var(--color-paper);scroll-padding-top:var(--space-3xl)}body{background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-md);-webkit-font-smoothing:antialiased;caret-color:var(--color-accent);margin:0;line-height:1.55}::selection{background:color-mix(in oklab, var(--color-accent) 22%, transparent);color:var(--color-ink)}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}a{color:inherit;text-underline-offset:.16em;text-decoration-thickness:1px}h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight,700);font-synthesis:none;letter-spacing:var(--tracking-display);overflow-wrap:break-word;text-wrap:balance;min-width:0;margin:0;line-height:1.05}h1{max-width:20ch;font-size:var(--text-display)}h2{max-width:30ch;font-size:var(--text-section)}h3{max-width:40ch;font-size:var(--text-title);line-height:1.2}.lead{font-size:var(--text-lead);max-width:52ch;line-height:1.45}p{text-wrap:pretty;margin:0}p:not([class]){max-width:65ch}img,video{max-width:100%;height:auto;display:block}svg{display:block}[hidden]{display:none!important}button,input,select,textarea{font:inherit}.container{width:100%;max-width:var(--container);padding-inline:var(--gutter);box-sizing:border-box;margin-inline:auto}.num,.figure,td.num{font-variant-numeric:tabular-nums}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}[data-slot]{background:linear-gradient(160deg, var(--color-paper-2,var(--color-paper)), var(--color-paper-3,var(--color-paper)));position:relative;overflow:hidden}[data-slot]>img{object-fit:cover;z-index:1;width:100%;height:100%;position:absolute;inset:0}[data-slot]:has(>img)>:not(img):not([data-keep]){display:none!important}@media (width<=60rem){:root{--gutter:24px;--section-gap-s:80px;--section-gap:96px;--section-gap-l:120px}}@media (width<=40rem){:root{--gutter:16px;--section-gap-s:56px;--section-gap:72px;--section-gap-l:96px;--gap-columns:16px}}@media (prefers-reduced-motion:reduce){:not(.keep-motion),:not(.keep-motion):before,:not(.keep-motion):after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-slot]>img{filter:saturate(.65)contrast(.97)sepia(.14)}body{background:radial-gradient(120% 60% at 50% -10%, var(--color-paper-3), transparent 70%), var(--color-paper);color:var(--color-ink);font-size:1.0625rem;line-height:1.6}h1{font-size:var(--text-display);max-width:24ch;font-weight:400}h2{font-size:var(--text-2xl);max-width:32ch;font-weight:400}h3{font-size:var(--text-lg);font-weight:500}.muted{color:var(--color-muted)}.topbar{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:64px;display:flex}.wordmark{align-items:center;gap:var(--space-xs);font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);letter-spacing:-.02em;color:var(--color-ink);min-height:44px;text-decoration:none;display:inline-flex}.wordmark svg{width:22px;height:22px}.wordmark svg rect{fill:var(--ivory-hi)}.wordmark svg .wordmark-black{fill:var(--color-paper)}.wordmark svg .wordmark-lit{fill:var(--color-accent)}.lang{position:relative}.lang summary{align-items:center;gap:var(--space-xs);min-height:40px;padding:0 var(--space-md);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);background:linear-gradient(var(--color-paper-2), var(--color-paper-3));box-shadow:var(--edge-light);color:var(--color-ink-2);font-size:var(--text-sm);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);font-weight:500;list-style:none;display:inline-flex}.lang summary::-webkit-details-marker{display:none}.lang summary:hover{border-color:var(--color-muted);color:var(--color-ink)}.lang summary svg{stroke:currentColor;fill:none;stroke-width:1.4px;width:16px;height:16px}.lang[open] summary{border-color:var(--color-muted);color:var(--color-ink)}.lang ul{right:0;top:calc(100% + var(--space-xs));z-index:var(--z-dropdown);padding:var(--space-xs);background:linear-gradient(var(--color-paper-2), var(--color-paper-3));min-width:200px;box-shadow:var(--edge-light), var(--shadow-panel);border-radius:14px;margin:0;list-style:none;position:absolute}.lang a{min-height:40px;padding:0 var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm);border-radius:8px;align-items:center;text-decoration:none;display:flex}.lang a:hover{background:var(--color-rule-2);color:var(--color-ink)}.lang a[aria-current=page]{color:var(--color-accent)}.stage{padding-top:var(--space-lg)}.stage-head{justify-content:space-between;align-items:baseline;gap:var(--space-xs) var(--space-xl);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.stage-head .lead{color:var(--color-muted);max-width:46ch}.panel{border-radius:var(--radius-card);background:linear-gradient(var(--color-paper-2), var(--color-paper-3));box-shadow:var(--edge-light), var(--shadow-panel);padding:var(--space-md) var(--space-lg) var(--space-lg)}.piano-controls{align-items:center;gap:var(--space-sm) var(--space-xl);padding-bottom:var(--space-md);border-bottom:var(--rule-hair) solid var(--color-rule);flex-wrap:wrap;display:flex}.ctl{align-items:center;gap:var(--space-sm);min-height:44px;display:flex}.ctl-label{color:var(--color-muted);font-size:var(--text-sm);font-weight:500}.ctl-value{min-width:2.2ch;color:var(--color-ink-2);font-size:var(--text-sm);font-variant-numeric:tabular-nums;font-weight:500}.ctl-hint{color:var(--color-muted);font-size:var(--text-xs)}.ctl-status{min-width:9ch;color:var(--color-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.link-btn{color:var(--color-accent);text-underline-offset:.16em;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.select{display:inline-flex;position:relative}.select select{appearance:none;min-height:40px;padding:0 var(--space-xl) 0 var(--space-md);border:var(--rule-hair) solid var(--color-muted);border-radius:var(--radius-pill);background:linear-gradient(var(--metal-hi), var(--metal-lo));box-shadow:var(--edge-light), var(--shadow-part);color:var(--color-ink);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out);font-weight:500}.select select:hover{border-color:var(--color-ink-2)}.select select option{background:var(--color-paper-2);color:var(--color-ink)}.select-caret{pointer-events:none;fill:none;width:12px;height:12px;stroke:var(--color-ink-2);stroke-width:1.5px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.fader{--level:50%;appearance:none;cursor:pointer;background:0 0;width:112px;height:28px;margin:0}.fader::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--color-accent) 0 var(--level), transparent var(--level)), var(--color-band);height:6px;box-shadow:inset 0 1px 2px var(--shade-strong), 0 1px 0 var(--sheen);border-radius:3px}.fader::-moz-range-track{background:var(--color-band);height:6px;box-shadow:inset 0 1px 2px var(--shade-strong), 0 1px 0 var(--sheen);border-radius:3px}.fader::-moz-range-progress{background:var(--color-accent);border-radius:3px;height:6px}.fader::-webkit-slider-thumb{appearance:none;border:var(--rule-hair) solid var(--shade);background:linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 2px no-repeat, repeating-linear-gradient(0deg, var(--sheen) 0 1px, transparent 1px 3px), linear-gradient(var(--metal-hi), var(--metal-lo));width:16px;height:24px;box-shadow:var(--edge-light), var(--shadow-part);border-radius:4px;margin-top:-9px}.fader::-moz-range-thumb{border:var(--rule-hair) solid var(--shade);background:linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 2px no-repeat, repeating-linear-gradient(0deg, var(--sheen) 0 1px, transparent 1px 3px), linear-gradient(var(--metal-hi), var(--metal-lo));width:16px;height:24px;box-shadow:var(--edge-light), var(--shadow-part);border-radius:4px}.fader:focus-visible{outline:2px solid var(--color-focus);outline-offset:4px;border-radius:4px}.switch{border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-band);width:48px;height:28px;box-shadow:inset 0 1px 3px var(--shade-strong);cursor:pointer;transition:background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);padding:0;position:relative}.switch:after{content:"";position:absolute;inset:-9px -4px}.switch-knob{background:linear-gradient(var(--metal-hi), var(--metal-lo));width:20px;height:20px;box-shadow:var(--edge-light), var(--shadow-part);transition:transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);border-radius:50%;position:absolute;top:3px;left:3px}.switch:hover{border-color:var(--color-muted)}.switch[aria-checked=true]{background:var(--color-accent-soft);border-color:var(--color-accent)}.switch[aria-checked=true] .switch-knob{background:radial-gradient(circle at 50% 50%, var(--color-accent) 0 3px, transparent 3.5px), linear-gradient(var(--metal-hi), var(--metal-lo));transform:translate(20px)}.stepper{align-items:center;gap:var(--space-xs);display:inline-flex}.stepper-btn,.icon-btn{border:var(--rule-hair) solid var(--color-rule);background:linear-gradient(var(--metal-hi), var(--metal-lo));width:36px;height:36px;box-shadow:var(--edge-light), var(--shadow-part);color:var(--color-ink);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);border-radius:50%;place-items:center;padding:0;display:inline-grid}.stepper-btn svg,.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}.stepper-btn:hover:not(:disabled),.icon-btn:hover:not(:disabled){border-color:var(--color-muted)}.stepper-btn:active:not(:disabled),.icon-btn:active:not(:disabled){transform:translateY(1px)}.stepper-btn:disabled,.icon-btn:disabled{background:var(--color-paper-2);box-shadow:none;color:var(--color-muted);cursor:not-allowed}.stepper-value{text-align:center;min-width:3ch;font-family:var(--font-display);font-size:var(--text-lg);font-variant-numeric:tabular-nums lining-nums}.seg{padding:var(--space-2xs);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);background:var(--color-band);box-shadow:inset 0 1px 3px var(--shade-strong);display:inline-flex}.seg-btn{min-height:32px;padding:0 var(--space-sm);border-radius:var(--radius-pill);color:var(--color-muted);font-size:var(--text-sm);cursor:pointer;transition:color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);background:0 0;border:0;font-weight:500}.seg-btn:hover{color:var(--color-ink)}.seg-btn[aria-checked=true]{background:linear-gradient(var(--metal-hi), var(--metal-lo));box-shadow:var(--edge-light), var(--shadow-part);color:var(--color-ink)}.btn{min-height:44px;padding:0 var(--space-lg);border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-pill);background:linear-gradient(var(--metal-hi), var(--metal-lo));box-shadow:var(--edge-light), var(--shadow-part);color:var(--color-ink);font:500 var(--text-md)/1 var(--font-body);cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.btn:hover:not(:disabled){border-color:var(--color-muted)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{background:var(--color-paper-2);box-shadow:none;color:var(--color-muted);cursor:not-allowed}.btn--small{min-height:36px;padding:0 var(--space-md);font-size:var(--text-sm)}.btn[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-ink);box-shadow:inset 0 1px 0 var(--sheen-strong), var(--shadow-part)}.piano-range{align-items:center;gap:var(--space-sm);padding:var(--space-md) 0 var(--space-sm);display:flex}.minimap{border-radius:var(--radius-part);background:repeating-linear-gradient(90deg, var(--ivory-lo) 0 calc(100% / 52 - 1px), var(--ivory-shade) calc(100% / 52 - 1px) calc(100% / 52));height:30px;box-shadow:inset 0 1px 3px var(--shade);cursor:pointer;touch-action:none;flex:1;position:relative}.minimap-keys{border-radius:inherit;position:absolute;inset:0;overflow:hidden}.minimap-black{background:var(--ebony-lo);border-radius:0 0 1px 1px;width:1.15385%;height:58%;position:absolute;top:0}.minimap-white{width:1.92308%;position:absolute;top:0;bottom:0}.minimap-black.is-down,.minimap-white.is-down{background:var(--color-accent)}.minimap-window{border:2px solid var(--color-accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--shade), 0 0 14px var(--glow);pointer-events:none;transition:transform var(--dur-short) var(--ease-out);border-radius:7px;position:absolute;top:-3px;bottom:-3px;left:0}.minimap:focus-visible{outline:2px solid var(--color-focus);outline-offset:5px}.keys{background:var(--ebony-lo);height:clamp(180px,21vw,290px);box-shadow:inset 0 8px 0 var(--color-band), inset 0 9px 0 var(--sheen), 0 1px 0 var(--sheen);padding-top:var(--space-xs);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;border-radius:4px 4px 12px 12px;position:relative;overflow:hidden}.keys-track{transition:transform var(--dur-long) var(--ease-out);position:absolute;top:8px;bottom:0;left:0}.key{position:absolute;top:0}.key--white{border-right:1px solid var(--ivory-shade);background:linear-gradient(180deg, var(--ivory-lo) 0%, var(--ivory-hi) 12%, var(--ivory-hi) 84%, var(--ivory-lo) 100%);width:1.92308%;box-shadow:inset 0 -7px 0 var(--ivory-lo), inset 0 -8px 0 var(--ivory-shade);border-radius:0 0 6px 6px;bottom:0}.key--black{z-index:2;background:linear-gradient(180deg, var(--ebony-lo) 0%, var(--ebony-hi) 70%, var(--ebony-lo) 100%);width:1.15385%;height:62%;box-shadow:inset 0 -9px 0 var(--ebony-lo), inset 1px 0 0 var(--sheen), 0 4px 6px var(--shade);border-radius:0 0 4px 4px}.key--white.is-down{background:linear-gradient(180deg, var(--ivory-shade) 0%, var(--ivory-lo) 16%, var(--ivory-lo) 88%, var(--color-accent) 100%);box-shadow:inset 0 -3px 0 var(--color-accent), inset 0 8px 10px -6px var(--shade-soft)}.key--black.is-down{background:linear-gradient(180deg, var(--ebony-lo) 0%, var(--ebony-hi) 80%, var(--color-accent) 100%);box-shadow:inset 0 -4px 0 var(--color-accent), 0 2px 3px var(--shade), 0 0 16px var(--glow)}.key-label{text-align:center;font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--key-label);pointer-events:none;font-weight:500;line-height:1;position:absolute;bottom:14px;left:0;right:0}.key--black .key-label{color:var(--key-label-dark);bottom:14px}.key--white.is-mapped{background:linear-gradient(180deg, var(--ivory-lo) 0%, var(--ivory-hi) 12%, var(--ivory-hi) 84%, var(--ivory-lo) 100%)}.key--white.is-mapped.is-down{background:linear-gradient(180deg, var(--ivory-shade) 0%, var(--ivory-lo) 16%, var(--ivory-lo) 88%, var(--color-accent) 100%)}.keys-hint{z-index:3;max-width:calc(100% - 24px);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-pill);background:var(--color-hint);color:var(--color-ink);font-size:var(--text-xs);text-align:center;pointer-events:none;margin:0;line-height:1.35;position:absolute;top:16px;left:50%;transform:translate(-50%)}.ad{margin-block:var(--space-2xl)}.ad-box{min-height:280px}.ad:has(ins[data-ad-status=unfilled]){display:none}.section{padding-block:var(--space-2xl);border-top:var(--rule-hair) solid var(--color-rule)}.section>.container>h2{margin-bottom:var(--space-md)}.section p{color:var(--color-muted)}.section-intro{max-width:60ch;margin-bottom:var(--space-xl)}.howto-grid{gap:var(--space-xl) var(--gap-columns);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;display:grid}.steps{counter-reset:step;margin:0;padding:0;list-style:none}.steps li{counter-increment:step;gap:var(--space-sm);padding-block:var(--space-sm);border-top:var(--rule-hair) solid var(--color-rule);color:var(--color-ink-2);grid-template-columns:2.4rem minmax(0,1fr);display:grid}.steps li:before{content:counter(step);font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-accent);font-variant-numeric:tabular-nums;line-height:1.2}.kbd{font-family:var(--font-body);color:var(--color-ink);font-weight:500}.keymap{gap:var(--space-lg);min-width:0;display:grid}.keymap figure{min-width:0;padding-bottom:var(--space-xs);scrollbar-width:thin;margin:0;overflow-x:auto}.keymap figcaption{color:var(--color-muted);font-size:var(--text-sm);margin-bottom:var(--space-xs)}.keymap-row{gap:var(--space-xs);flex-wrap:nowrap;width:max-content;margin:0;padding:0;list-style:none;display:flex}.keymap-row--black{padding-left:26px}.keymap-row--white{margin-top:var(--space-xs)}.keymap-gap{visibility:hidden}.keycap{border-radius:var(--radius-part);background:linear-gradient(var(--ivory-hi), var(--ivory-lo));width:44px;height:52px;box-shadow:inset 0 -3px 0 var(--ivory-shade), var(--shadow-part);color:var(--color-paper);flex:none;align-content:center;place-items:center;line-height:1.1;display:grid}.keycap b{font-family:var(--font-display);font-weight:500;font-size:var(--text-md)}.keycap span{color:var(--key-label);font-variant-numeric:tabular-nums;font-size:.6875rem}.keycap--black{background:linear-gradient(var(--ebony-hi), var(--ebony-lo));box-shadow:inset 0 -3px 0 var(--shade), var(--shadow-part);color:var(--color-ink)}.keycap--black span{color:var(--key-label-dark)}.sound-list{margin:0;padding:0;list-style:none}.sound{gap:var(--space-xs) var(--gap-columns);padding-block:var(--space-lg);border-top:var(--rule-hair) solid var(--color-rule);grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto;align-items:center;display:grid}.sound:last-child{border-bottom:var(--rule-hair) solid var(--color-rule)}.sound h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);letter-spacing:-.02em}.sound .btn[aria-pressed=true]{pointer-events:none}.about-cols{columns:2 22rem;column-gap:var(--gap-columns)}.about-cols p{break-inside:avoid;margin-bottom:var(--space-md)}.faq-list{margin:0;padding:0;list-style:none}.faq-list details{border-top:var(--rule-hair) solid var(--color-rule)}.faq-list li:last-child details{border-bottom:var(--rule-hair) solid var(--color-rule)}.faq-list summary{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:56px;padding-block:var(--space-sm);cursor:pointer;font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-ink);list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary svg{fill:none;width:16px;height:16px;stroke:var(--color-muted);stroke-width:1.5px;transition:transform var(--dur-short) var(--ease-out);flex:none}.faq-list details[open] summary svg{transform:rotate(45deg)}.faq-list summary:hover svg{stroke:var(--color-ink)}.faq-list details p{padding-bottom:var(--space-lg);max-width:70ch}.footer{padding-block:var(--space-2xl) var(--space-xl);border-top:var(--rule-hair) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}.footer-grid{gap:var(--space-lg);display:grid}.footer a{color:var(--color-ink-2)}.footer a:hover{color:var(--color-ink);text-decoration-color:var(--color-accent)}.footer-langs{gap:var(--space-xs) var(--space-md);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.footer-langs a[aria-current=page]{color:var(--color-accent)}.footer-bottom{justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;display:flex}.prose{padding-block:var(--space-xl) var(--space-3xl)}.prose h1{margin-bottom:var(--space-lg)}.prose h2{font-size:var(--text-xl);margin:var(--space-xl) 0 var(--space-sm)}.prose p,.prose li{color:var(--color-muted);max-width:70ch}.prose p+p{margin-top:var(--space-sm)}@media (width<=60rem){.howto-grid,.sound{grid-template-columns:minmax(0,1fr)}.sound .btn{justify-self:start}.piano-controls{gap:var(--space-xs) var(--space-lg)}}@media (width<=40rem){.panel{padding:var(--space-sm) var(--space-sm) var(--space-md);border-radius:16px}.fader{width:92px}.keys{height:clamp(170px,46vw,240px)}.stage-head{margin-bottom:var(--space-md)}.keycap{width:36px;height:46px}.keymap-row--black{padding-left:22px}}@media (orientation:landscape) and (height<=32rem){.keys{height:52vh}}