:root{color-scheme:light;--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:1.728rem;--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(97% .012 95);--color-paper-2:oklch(94.5% .018 95);--color-paper-3:oklch(91% .022 95);--color-ink:oklch(20% .014 255);--color-ink-2:oklch(29% .014 255);--color-muted:oklch(47% .014 255);--color-rule:oklch(87% .016 95);--color-accent:oklch(87% .175 96);--color-accent-deep:oklch(72% .16 92);--color-accent-ink:oklch(20% .014 255);--color-accent-2:oklch(50% .17 250);--color-accent-3:oklch(70% .2 22);--color-mint:oklch(82% .15 152);--color-mint-deep:oklch(48% .12 155);--color-focus:oklch(50% .17 250);--color-card:oklch(98.8% .007 95);--color-edge:oklch(83% .04 88);--color-fringe:oklch(99.2% .006 95);--color-kraft:oklch(63% .085 62);--color-sand:oklch(77% .1 76);--color-sugar:oklch(89% .035 236);--color-hill-1:oklch(94.5% .03 118);--color-hill-2:oklch(91.5% .045 135);--color-leaf:oklch(64% .15 150);--font-display:"M PLUS Rounded 1c", ui-rounded, "Hiragino Maru Gothic ProN", "Apple SD Gothic Neo", "Malgun Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;--font-body:var(--font-display);--font-outlier:ui-monospace, monospace;--radius-card:24px;--radius-stock:16px;--radius-input:14px;--radius-pill:999px;--rule-hair:1px;--shadow-card:0 1px 2px oklch(20% .014 255/.06), 0 12px 28px -14px oklch(20% .014 255/.22);--shadow-paper:drop-shadow(0 0 .6px oklch(20% .014 255/.32)) drop-shadow(1.5px 2.5px 1.5px oklch(20% .014 255/.1)) drop-shadow(6px 14px 16px oklch(20% .014 255/.13));--tracking-display:-.03em;--display-weight:600;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-snap:cubic-bezier(.22, 1, .36, 1);--wood-hi:oklch(60% .115 42);--wood:oklch(50% .12 38);--wood-lo:oklch(40% .1 34);--wood-grain:oklch(32% .08 32/.22);--darkwood-hi:oklch(46% .08 36);--darkwood:oklch(37% .075 33);--darkwood-lo:oklch(29% .06 30);--darkwood-grain:oklch(20% .04 30/.3);--metal-hi:oklch(95% .006 250);--metal:oklch(84% .01 250);--metal-lo:oklch(68% .014 250);--metal-grain:oklch(100% 0 0/.35);--brass-hi:oklch(88% .085 88);--brass:oklch(76% .1 80);--brass-lo:oklch(60% .09 70);--frame:oklch(52% .06 58);--frame-lo:oklch(42% .055 55);--cord:oklch(24% .03 50/.55);--pin:oklch(22% .03 40/.55);--pin-metal:oklch(40% .02 250/.55);--bar-label:oklch(96% .025 85/.92);--bar-label-metal:oklch(26% .02 255/.85);--bar-shadow:0 1px 0 oklch(20% .014 255/.25), 0 6px 10px -4px oklch(20% .014 255/.35);--bar-down-glow:oklch(98% .06 95/.34);--bar-out:oklch(97.5% .01 95/.8);--hint-bg:oklch(20% .014 255/.84);--hint-ink:oklch(97% .012 95);--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--fibre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='.004 .06' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .35 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}*,: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(1.06)brightness(1.04)}body{background:var(--grain), var(--color-paper);font-weight:500;line-height:1.6}h1,h2,h3{font-weight:700}a{color:var(--color-accent-2)}a:hover{text-decoration-thickness:2px}.topbar{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:64px;display:flex}.wordmark{white-space:nowrap;align-items:center;gap:var(--space-xs);color:var(--color-ink);font-weight:700;font-size:var(--text-lg);letter-spacing:-.01em;text-decoration:none;display:inline-flex}.wordmark svg{width:26px;height:26px}.wordmark-bar{fill:var(--wood)}.wordmark-bar--lit{fill:var(--color-accent-deep)}.wordmark:hover{text-decoration:none}.lang{position:relative}.lang summary{align-items:center;gap:var(--space-xs);min-height:40px;padding:0 var(--space-sm);border-radius:var(--radius-pill);cursor:pointer;color:var(--color-ink-2);font-size:var(--text-sm);background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge);transition:translate var(--dur-micro) var(--ease-snap);list-style:none;display:inline-flex}.lang summary::-webkit-details-marker{display:none}.lang summary svg{fill:none;stroke:currentColor;stroke-width:1.3px;width:16px;height:16px}.lang summary:hover{translate:0 -1px}.lang summary:active{translate:0 2px}.lang ul{right:0;top:calc(100% + var(--space-xs));z-index:var(--z-dropdown);padding:var(--space-xs);border-radius:var(--radius-stock);background:var(--color-card);min-width:200px;box-shadow:inset 0 0 0 1px var(--color-rule), var(--shadow-card);margin:0;list-style:none;position:absolute}.lang a{padding:var(--space-xs) var(--space-sm);color:var(--color-ink);font-size:var(--text-sm);border-radius:10px;text-decoration:none;display:block}.lang a:hover{background:var(--color-paper-2)}.lang a[aria-current=page]{background:var(--color-ink);color:var(--color-paper)}.stage{padding-top:var(--space-xs);padding-bottom:var(--space-2xl)}.stage-head{justify-content:space-between;align-items:baseline;gap:var(--space-xs) var(--space-xl);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.stage-head h1{font-size:var(--text-2xl)}.stage-head .lead{color:var(--color-ink-2)}.panel{border-radius:var(--radius-card);background:var(--grain), var(--color-card);box-shadow:inset 0 0 0 1px var(--color-rule), var(--shadow-card);padding:var(--space-md) var(--space-lg) var(--space-lg)}.xylo-controls{align-items:center;gap:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.xylo-controls>.ctl:last-child{margin-left:auto}.ctl{align-items:center;gap:var(--space-xs);min-height:44px;display:flex}.ctl-label{font-size:var(--text-sm);color:var(--color-muted)}.ctl-hint{font-size:var(--text-xs);color:var(--color-muted)}.ctl-status{min-width:9ch;font-size:var(--text-sm);color:var(--color-muted)}.ctl-status:empty{min-width:0}.link-btn{color:var(--color-accent-2);font-size:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.select{position:relative}.select select{appearance:none;min-height:40px;padding:0 var(--space-xl) 0 var(--space-sm);border:1px solid var(--color-kraft);border-radius:var(--radius-input);background:var(--grain), var(--color-accent);color:var(--color-accent-ink);font-weight:700;font-size:var(--text-md);cursor:pointer;box-shadow:0 4px 0 0 var(--color-accent-deep);transition:translate var(--dur-micro) var(--ease-snap)}.select select:hover{translate:0 -1px}.select select:active{translate:0 3px}.select select:disabled{opacity:.55;cursor:not-allowed}.select-caret{fill:none;width:12px;height:12px;stroke:var(--color-accent-ink);stroke-width:1.8px;pointer-events:none;position:absolute;top:50%;right:12px;translate:0 -50%}.fader{--level:50%;appearance:none;cursor:pointer;background:0 0;width:84px;height:24px}.fader::-webkit-slider-runnable-track{border-radius:var(--radius-pill);background:linear-gradient(to right, var(--color-accent-deep) var(--level), var(--color-paper-3) var(--level));height:8px;box-shadow:inset 0 0 0 1px var(--color-rule)}.fader::-moz-range-track{border-radius:var(--radius-pill);background:linear-gradient(to right, var(--color-accent-deep) var(--level), var(--color-paper-3) var(--level));height:8px;box-shadow:inset 0 0 0 1px var(--color-rule)}.fader::-webkit-slider-thumb{appearance:none;width:16px;height:16px;margin-top:calc(-1 * var(--space-2xs));background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-edge), 0 2px 0 0 var(--color-edge);border-radius:50%}.fader::-moz-range-thumb{background:var(--color-card);width:16px;height:16px;box-shadow:inset 0 0 0 1px var(--color-edge), 0 2px 0 0 var(--color-edge);border:0;border-radius:50%}.fader:hover::-webkit-slider-thumb{box-shadow:inset 0 0 0 1px var(--color-ink-2), 0 2px 0 0 var(--color-edge)}.fader:disabled{opacity:.5;cursor:not-allowed}.switch{border-radius:var(--radius-pill);background:var(--color-paper-3);width:48px;height:28px;box-shadow:inset 0 0 0 1px var(--color-edge);cursor:pointer;border:0;padding:0;position:relative}.switch-knob{background:var(--color-card);width:20px;height:20px;box-shadow:0 1px 2px var(--color-edge);transition:transform var(--dur-short) var(--ease-snap);border-radius:50%;position:absolute;top:4px;left:4px}.switch:hover{box-shadow:inset 0 0 0 1px var(--color-muted)}.switch[aria-checked=true]{background:var(--color-mint-deep);box-shadow:none}.switch[aria-checked=true] .switch-knob{transform:translate(20px)}.stepper{border-radius:var(--radius-input);background:var(--color-card);box-shadow:inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge);align-items:center;display:inline-flex}.stepper-btn{width:36px;height:40px;color:var(--color-ink);cursor:pointer;border-radius:var(--radius-input);background:0 0;border:0;place-items:center;display:grid}.stepper-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;width:12px;height:12px}.stepper-btn:hover{background:var(--color-paper-2)}.stepper-btn:active svg{translate:0 1px}.stepper-btn:disabled{color:var(--color-rule);cursor:not-allowed;background:0 0}.stepper-value{text-align:center;min-width:4.4ch;font-size:var(--text-sm)}.seg{gap:var(--space-3xs);padding:var(--space-2xs);border-radius:var(--radius-input);background:var(--color-paper-2);box-shadow:inset 0 0 0 1px var(--color-rule);display:inline-flex}.seg-btn{min-height:32px;padding:0 var(--space-sm);color:var(--color-ink-2);font-size:var(--text-sm);cursor:pointer;background:0 0;border:0;border-radius:11px}.seg-btn:hover{background:var(--color-card)}.seg-btn[aria-checked=true]{background:var(--color-ink);color:var(--color-paper)}.btn{--edge:4px;min-height:44px;padding:0 var(--space-md);border-radius:var(--radius-stock);background:var(--grain), var(--color-card);color:var(--color-ink);font-weight:700;font-size:var(--text-sm);cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-rule), 0 var(--edge) 0 0 var(--color-edge);transition:translate var(--dur-micro) var(--ease-snap);border:0;justify-content:center;align-items:center;text-decoration:none;display:inline-flex}.btn--small{min-height:40px}.btn:hover{text-decoration:none;translate:0 -2px}.btn:active{translate:0 3px}.btn:disabled{opacity:.5;cursor:not-allowed;translate:none}.btn[aria-pressed=true]{background:var(--color-ink);color:var(--color-paper);box-shadow:0 var(--edge) 0 0 var(--color-ink-2)}.icon-btn{border-radius:var(--radius-input);background:var(--color-card);width:44px;height:44px;color:var(--color-ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge);transition:translate var(--dur-micro) var(--ease-snap);border:0;flex:none;place-items:center;display:grid}.icon-btn svg{fill:none;stroke:currentColor;stroke-width:1.8px;width:16px;height:16px}.icon-btn:hover{translate:0 -1px}.icon-btn:active{translate:0 2px}.icon-btn:disabled{color:var(--color-rule);cursor:not-allowed;translate:none}.xylo-note{margin:calc(-1 * var(--space-xs)) 0 var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}.xylo-range{align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);display:flex}.minimap{border-radius:var(--radius-input);background:var(--color-paper-2);height:44px;box-shadow:inset 0 0 0 1px var(--color-rule);cursor:pointer;touch-action:none;flex:1;position:relative;overflow:hidden}.minimap-bars{position:absolute;inset:6px 4px}.minimap-bar{width:calc(3.84615% - 2px);height:calc(100% * var(--len));background:var(--wood);border-radius:2px;position:absolute;top:50%;translate:1px -50%}.minimap-bar.is-out{opacity:.3}.minimap-bar.is-down{background:var(--color-accent-deep)}.minimap-window{box-shadow:inset 0 0 0 2px var(--color-ink);background:color-mix(in oklab, var(--color-accent) 22%, transparent);pointer-events:none;transition:transform var(--dur-micro) var(--ease-snap);border-radius:10px;position:absolute;top:2px;bottom:2px;left:0}.xylo{--surface-h:330px;--row-h:calc(var(--surface-h) * .41);--row-gap:calc(var(--surface-h) * .035);--tube-h:calc(var(--surface-h) - 2 * var(--row-h) - var(--row-gap));--bar-hi:var(--wood-hi);--bar:var(--wood);--bar-lo:var(--wood-lo);--bar-grain:var(--wood-grain);--bar-pin:var(--pin);--bar-ink:var(--bar-label)}.xylo[data-material=dark-wood]{--bar-hi:var(--darkwood-hi);--bar:var(--darkwood);--bar-lo:var(--darkwood-lo);--bar-grain:var(--darkwood-grain)}.xylo[data-material=metal]{--bar-hi:var(--metal-hi);--bar:var(--metal);--bar-lo:var(--metal-lo);--bar-grain:var(--metal-grain);--bar-pin:var(--pin-metal);--bar-ink:var(--bar-label-metal)}.bars{height:var(--surface-h);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:pointer;position:relative;overflow:hidden}.bars-track{transition:transform var(--dur-short) var(--ease-snap);position:absolute;inset:0 auto 0 0}.row{height:var(--row-h);background:linear-gradient(to bottom, var(--frame), var(--frame-lo));clip-path:polygon(0 4%,100% 25%,100% 75%,0 96%);opacity:.22;position:absolute;left:0;right:0}.row--sharp{top:0}.row--natural{top:calc(var(--row-h) + var(--row-gap))}.tube{top:calc(var(--row-h) * 1.5 + var(--row-gap));width:calc(100% / var(--nats));height:calc(var(--row-h) / 2 + var(--tube-h) * var(--len));position:absolute}.tube:before{content:"";background:linear-gradient(to right, var(--brass-lo), var(--brass-hi) 38%, var(--brass) 70%, var(--brass-lo));border-radius:0 0 999px 999px;position:absolute;inset:0 30%}.tubes{pointer-events:none;position:absolute;inset:0}.bar{z-index:var(--z-base);width:calc(100% / var(--nats));padding-inline:var(--space-3xs);height:calc(var(--row-h) * var(--len));background-clip:content-box;background-image:repeating-linear-gradient(to right, transparent 0 5px, var(--bar-grain) 5px 6px, transparent 6px 11px), linear-gradient(to right, var(--bar-hi), var(--bar) 45%, var(--bar-lo));box-shadow:none;filter:drop-shadow(0 1px 0 var(--cord)) drop-shadow(1px 5px 5px var(--cord));transition:transform 60ms var(--ease-snap);border-radius:7px;position:absolute}.bar--natural{top:calc(var(--row-h) * (1.5 - var(--len) / 2) + var(--row-gap))}.bar--sharp{top:calc(var(--row-h) * (.5 - var(--len) / 2))}.bar:before,.bar:after{content:"";background:var(--bar-pin);border-radius:50%;width:6px;height:6px;position:absolute;left:50%;translate:-50%}.bar:before{top:22%}.bar:after{bottom:22%}.bar.is-down{background-image:linear-gradient(var(--bar-down-glow), var(--bar-down-glow)), repeating-linear-gradient(to right, transparent 0 5px, var(--bar-grain) 5px 6px, transparent 6px 11px), linear-gradient(to right, var(--bar-hi), var(--bar) 45%, var(--bar-lo));transform:translateY(2px)}.bar.is-out{cursor:not-allowed;--bar-ink:var(--color-muted);background-image:linear-gradient(var(--bar-out), var(--bar-out)), repeating-linear-gradient(to right, transparent 0 5px, var(--bar-grain) 5px 6px, transparent 6px 11px), linear-gradient(to right, var(--bar-hi), var(--bar) 45%, var(--bar-lo));filter:none}.bar.is-out:before,.bar.is-out:after{opacity:.3}.bar-label{text-align:center;font-size:var(--text-xs);color:var(--bar-ink);pointer-events:none;font-weight:700;line-height:1;position:absolute;bottom:6px;left:0;right:0}.bar--sharp .bar-label{bottom:5px}.bars-hint{z-index:var(--z-raised);padding:var(--space-xs) var(--space-md);border-radius:var(--radius-pill);background:var(--hint-bg);color:var(--hint-ink);font-size:var(--text-sm);width:max-content;max-width:calc(100% - var(--space-lg));text-align:center;pointer-events:none;margin:0;line-height:1.35;position:absolute;bottom:14px;left:50%;translate:-50%}.section{padding-block:var(--space-2xl)}.section h2{font-size:var(--text-xl)}.section-intro{margin-top:var(--space-sm);max-width:62ch;color:var(--color-ink-2)}.howto-grid{gap:var(--space-xl) var(--gap-columns);grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;display:grid}.steps{margin:var(--space-lg) 0 0;counter-reset:step;gap:var(--space-sm);max-width:54ch;padding:0;list-style:none;display:grid}.steps li{counter-increment:step;gap:var(--space-sm);grid-template-columns:32px minmax(0,1fr);align-items:baseline;display:grid}.steps li:before{content:counter(step);background:var(--color-accent);width:28px;height:28px;color:var(--color-accent-ink);font-weight:700;font-size:var(--text-sm);border-radius:50%;place-items:center;display:grid}.keymap{gap:var(--space-md);display:grid}.keymap figure{padding:var(--space-md);border-radius:var(--radius-card);background:var(--grain), var(--color-card);box-shadow:inset 0 0 0 1px var(--color-rule), var(--shadow-card);margin:0;overflow-x:auto}.keymap figcaption{margin-bottom:var(--space-sm);font-size:var(--text-sm);color:var(--color-muted)}.keymap-row{gap:var(--space-2xs);margin:0;padding:0;list-style:none;display:flex}.keymap-row--sharp{padding-left:var(--space-lg);margin-bottom:var(--space-xs)}.keycap{justify-items:center;gap:var(--space-3xs);width:44px;padding:var(--space-2xs) 0;background:var(--color-paper-2);box-shadow:inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge);border-radius:10px;flex:none;display:grid}.keycap b{font-size:var(--text-sm);line-height:1.2}.keycap span{font-size:var(--text-xs);color:var(--color-muted);line-height:1.2}.keycap--sharp{background:var(--color-ink);box-shadow:0 3px 0 0 var(--color-ink-2);color:var(--color-paper)}.keycap--sharp span{color:var(--color-rule)}.keymap-gap{visibility:hidden}.section--sounds{background:var(--grain), var(--color-paper-2)}.sound-list{gap:var(--space-md);margin:var(--space-lg) 0 0;grid-template-columns:repeat(5,minmax(0,1fr));padding:0;list-style:none;display:grid}.sound{gap:var(--space-sm);padding:var(--space-lg);border-radius:var(--radius-card);background:var(--grain), var(--color-card);box-shadow:inset 0 0 0 1px var(--color-rule), var(--shadow-card);flex-direction:column;display:flex}.sound:before{content:"";background:linear-gradient(to bottom, var(--wood-hi), var(--wood) 55%, var(--wood-lo));border-radius:7px;width:56px;height:14px}.sound[data-material-of=marimba]:before{background:linear-gradient(to bottom, var(--darkwood-hi), var(--darkwood) 55%, var(--darkwood-lo))}.sound[data-material-of=glockenspiel]:before,.sound[data-material-of=vibraphone]:before{background:linear-gradient(to bottom, var(--metal-hi), var(--metal) 55%, var(--metal-lo))}.sound h3{font-size:var(--text-lg)}.sound p{color:var(--color-ink-2);font-size:var(--text-sm);flex:1}.sound .btn{align-self:flex-start}.about-cols{gap:var(--gap-columns);margin-top:var(--space-lg);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.about-cols p{color:var(--color-ink-2)}.faq-list{margin:var(--space-lg) 0 0;border-top:1px solid var(--color-rule);max-width:820px;padding:0;list-style:none}.faq-list li{border-bottom:1px 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-weight:700;list-style:none;display:flex}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary svg{fill:none;stroke:currentColor;stroke-width:1.6px;width:16px;height:16px;transition:transform var(--dur-short) var(--ease-snap);flex:none}.faq-list summary:hover{color:var(--color-accent-2)}.faq-list details[open] summary svg{transform:rotate(45deg)}.faq-list details p{padding-bottom:var(--space-md);color:var(--color-ink-2)}.ad{padding-block:var(--space-lg)}.ad-box{min-height:280px}.ad:has(ins[data-ad-status=unfilled]){display:none}.footer{margin-top:var(--space-2xl);padding:var(--space-2xl) 0 var(--space-xl);background:var(--grain), var(--color-ink);color:var(--color-paper);clip-path:polygon(0% 9px,2.1% 5.4px,4.2% 2.8px,6.2% 5px,8.3% 6.2px,10.4% 7.7px,12.5% 10px,14.6% 5px,16.7% 4.2px,18.8% 9.9px,20.8% 11.1px,22.9% 6.1px,25% 9.2px,27.1% 10px,29.2% 11.9px,31.2% 13.2px,33.3% 14.4px,35.4% 9.3px,37.5% 5.1px,39.6% 9.6px,41.7% 13.3px,43.8% 12.1px,45.8% 13.9px,47.9% 14.1px,50% 14.1px,52.1% 10.5px,54.2% 5.2px,56.2% 5.6px,58.3% 3.9px,60.4% 9.6px,62.5% 11.2px,64.6% 12.8px,66.7% 11.9px,68.8% 6.7px,70.8% 6.8px,72.9% 5.9px,75% 8.2px,77.1% 10.1px,79.2% 12.5px,81.2% 13.8px,83.3% 9.6px,85.4% 10.2px,87.5% 8px,89.6% 4.5px,91.7% 3px,93.8% 8.9px,95.8% 7.6px,97.9% 7.3px,100% 6.2px,100% 100%,0 100%)}.footer-grid{gap:var(--space-lg);display:grid}.footer-langs{gap:var(--space-xs) var(--space-md);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.footer a{color:var(--color-paper);text-decoration-color:var(--color-muted)}.footer a:hover{text-decoration-color:var(--color-accent)}.footer a[aria-current=page]{color:var(--color-accent);text-decoration:none}.footer :focus-visible{outline-color:var(--color-accent)}.footer-bottom{gap:var(--space-md);font-size:var(--text-sm);color:var(--color-rule);flex-wrap:wrap;display:flex}.prose{max-width:760px;padding-block:var(--space-xl) var(--space-3xl)}.prose h1{font-size:var(--text-2xl);margin-bottom:var(--space-md)}.prose h2{font-size:var(--text-lg);margin:var(--space-xl) 0 var(--space-xs)}.prose p+p{margin-top:var(--space-sm)}.prose-action{margin-top:var(--space-xl)}@media (width<=75rem){.sound-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}}@media (width<=60rem){.howto-grid{grid-template-columns:minmax(0,1fr)}.about-cols{gap:var(--space-md);grid-template-columns:minmax(0,1fr)}}@media (width<=40rem){.topbar{min-height:56px}.stage-head{margin-bottom:var(--space-sm)}.stage-head h1{font-size:var(--text-xl)}.stage-head .lead{font-size:var(--text-sm)}.panel{padding:var(--space-sm) var(--space-sm) var(--space-md);border-radius:var(--radius-stock)}.xylo{--surface-h:290px}.xylo-controls{gap:var(--space-xs) var(--space-md)}.ctl--sound{flex-basis:100%}.fader{width:84px}.section{padding-block:var(--space-xl)}}