.stem-demo[data-astro-cid-msq2fnxh]{--background:var(--color-ink);--text:var(--color-paper);--muted:var(--color-paper-dim);--line:var(--color-rule);--silence:color-mix(in srgb, var(--color-rule) 80%, var(--color-paper) 20%);--blue:var(--color-cobalt);--violet:var(--studio-violet);--coral:var(--color-signal);--focus:var(--color-signal);--control-border:color-mix(in srgb, var(--color-paper) 60%, var(--color-rule));--track-label:90px;--file-label:70px;padding-block:clamp(2.5rem,5vw,4rem)}.stem-demo[data-astro-cid-msq2fnxh] [data-astro-cid-msq2fnxh][hidden]{display:none!important}.stem-demo[data-astro-cid-msq2fnxh] button[data-astro-cid-msq2fnxh],.stem-demo[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]{font:inherit}.stem-demo[data-astro-cid-msq2fnxh] a[data-astro-cid-msq2fnxh]{text-underline-offset:.22em}.stem-demo[data-astro-cid-msq2fnxh] button[data-astro-cid-msq2fnxh],.stem-demo[data-astro-cid-msq2fnxh] a[data-astro-cid-msq2fnxh],.stem-demo[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]{-webkit-tap-highlight-color:transparent}.sr-only[data-astro-cid-msq2fnxh]{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}h1[data-astro-cid-msq2fnxh],h2[data-astro-cid-msq2fnxh],h3[data-astro-cid-msq2fnxh],p[data-astro-cid-msq2fnxh]{margin:0}h1[data-astro-cid-msq2fnxh]{letter-spacing:-.045em;font-size:clamp(40px,5.05vw,72px);font-weight:760;line-height:1.1}.intro[data-astro-cid-msq2fnxh]{color:var(--muted);letter-spacing:-.012em;margin-top:12px;font-size:clamp(18px,1.8vw,25px);line-height:1.45}.scenarios[data-astro-cid-msq2fnxh]{border:0;flex-wrap:wrap;gap:24px 66px;min-width:0;margin:31px 0 28px;padding:0;display:flex}.scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]{cursor:pointer;min-height:42px;color:var(--text);align-items:center;gap:18px;font-size:clamp(18px,1.65vw,23px);line-height:1.35;display:inline-flex}.scenarios[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]{-webkit-appearance:none;appearance:none;border:2px solid var(--control-border);cursor:pointer;background:0 0;border-radius:50%;flex:0 0 32px;width:32px;height:32px;margin:0}.scenarios[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]:checked{border-color:var(--blue);background:radial-gradient(circle, var(--blue) 0 43%, transparent 47%)}.scenarios[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]:checked+span[data-astro-cid-msq2fnxh]{color:var(--text);font-weight:650}.timeline[data-astro-cid-msq2fnxh]{margin:0}.timeline-visual[data-astro-cid-msq2fnxh]{grid-template-columns:var(--track-label) minmax(0, 1fr) var(--file-label);grid-template-rows:38px repeat(3,48px);row-gap:20px;display:grid;position:relative}.ruler[data-astro-cid-msq2fnxh]{color:var(--text);grid-area:1/2;justify-content:space-between;align-items:flex-start;padding-top:3px;font-size:17px;display:flex}.ruler[data-astro-cid-msq2fnxh] span[data-astro-cid-msq2fnxh]:not(:first-child):not(:last-child){transform:translate(-2px)}.file-heading[data-astro-cid-msq2fnxh]{text-align:right;color:var(--muted);grid-area:1/3;padding-top:4px;font-size:11px;line-height:1.2}.grid-lines[data-astro-cid-msq2fnxh]{top:38px;bottom:-8px;left:var(--track-label);right:var(--file-label);z-index:2;pointer-events:none;position:absolute}.grid-lines[data-astro-cid-msq2fnxh]>i[data-astro-cid-msq2fnxh]{border-left:1px dashed var(--muted);opacity:.75;position:absolute;top:0;bottom:0}.grid-lines[data-astro-cid-msq2fnxh]>i[data-astro-cid-msq2fnxh]:first-child{left:0}.grid-lines[data-astro-cid-msq2fnxh]>i[data-astro-cid-msq2fnxh]:nth-child(2){left:33.3333%}.grid-lines[data-astro-cid-msq2fnxh]>i[data-astro-cid-msq2fnxh]:nth-child(3){left:66.6667%}.grid-lines[data-astro-cid-msq2fnxh]>i[data-astro-cid-msq2fnxh]:nth-child(4){right:0}.playhead[data-astro-cid-msq2fnxh]{background:var(--text);z-index:5;opacity:0;width:2px;position:absolute;top:0;bottom:0;left:0}.playhead[data-astro-cid-msq2fnxh].is-active{opacity:.9}.track-name[data-astro-cid-msq2fnxh]{align-items:center;padding-right:10px;font-size:20px;font-weight:550;display:flex}.track-lane[data-astro-cid-msq2fnxh]{z-index:1;min-width:0;position:relative}.file[data-astro-cid-msq2fnxh]{--file-width:100%;--sound-start:0%;--sound-width:100%;height:100%;width:var(--file-width);border:1px solid var(--control-border);background:repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 13%, transparent) 6px 8px), var(--silence);border-radius:5px;position:relative;overflow:hidden}.sound[data-astro-cid-msq2fnxh]{top:-1px;bottom:-1px;left:var(--sound-start);width:var(--sound-width);background:var(--track-color);position:absolute}.drums[data-astro-cid-msq2fnxh]{--track-color:var(--blue)}.bass[data-astro-cid-msq2fnxh]{--track-color:var(--violet)}.melody[data-astro-cid-msq2fnxh]{--track-color:var(--coral)}.file-duration[data-astro-cid-msq2fnxh]{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:flex-end;align-items:center;font-size:16px;display:flex}.legend[data-astro-cid-msq2fnxh]{color:var(--muted);margin:24px 0 0 var(--track-label);flex-wrap:wrap;align-items:center;gap:10px 24px;font-size:13px;line-height:1.4;display:flex}.legend[data-astro-cid-msq2fnxh]>span[data-astro-cid-msq2fnxh]{align-items:center;gap:7px;display:inline-flex}.legend[data-astro-cid-msq2fnxh] i[data-astro-cid-msq2fnxh]{border-radius:2px;width:16px;height:11px;display:inline-block}.sound-key[data-astro-cid-msq2fnxh]{background:var(--blue)}.silence-key[data-astro-cid-msq2fnxh]{border:1px solid var(--control-border);background:repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--muted) 40%, transparent) 3px 5px), var(--silence)}audio[data-astro-cid-msq2fnxh]{width:100%;margin:30px 0 0}.transport[data-astro-cid-msq2fnxh]{align-items:center;gap:24px;margin-top:26px;display:flex}.transport[data-astro-cid-msq2fnxh] button[data-astro-cid-msq2fnxh]{cursor:pointer;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}.play-button[data-astro-cid-msq2fnxh]{background:var(--text);width:68px;height:68px;color:var(--background);border:0}.play-button[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{fill:currentColor;width:31px;height:31px}.play-button[data-astro-cid-msq2fnxh]>span[data-astro-cid-msq2fnxh]{align-items:center;display:inline-flex}.play-button[data-astro-cid-msq2fnxh] .play-icon[data-astro-cid-msq2fnxh]{margin-left:4px}.restart-button[data-astro-cid-msq2fnxh]{border:1.5px solid var(--control-border);width:60px;height:60px;color:var(--text);background:0 0}.restart-button[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{width:29px;height:29px}.transport[data-astro-cid-msq2fnxh] button[data-astro-cid-msq2fnxh]:hover:not(:disabled){box-shadow:0 0 0 4px color-mix(in srgb, var(--text) 10%, transparent)}.transport[data-astro-cid-msq2fnxh] button[data-astro-cid-msq2fnxh]:disabled,#stem-seek[data-astro-cid-msq2fnxh]:disabled{opacity:.45;cursor:wait}.seek-wrap[data-astro-cid-msq2fnxh]{flex:1;align-items:center;min-width:80px;display:flex}#stem-seek[data-astro-cid-msq2fnxh]{--progress:0%;-webkit-appearance:none;appearance:none;cursor:pointer;width:100%;height:32px;accent-color:var(--text);background:0 0;margin:0}#stem-seek[data-astro-cid-msq2fnxh]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--text) var(--progress), var(--silence) var(--progress));border-radius:8px;height:7px}#stem-seek[data-astro-cid-msq2fnxh]::-moz-range-track{background:var(--silence);border-radius:8px;height:7px}#stem-seek[data-astro-cid-msq2fnxh]::-moz-range-progress{background:var(--text);border-radius:8px;height:7px}#stem-seek[data-astro-cid-msq2fnxh]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--text);border:0;border-radius:50%;width:24px;height:24px;margin-top:-8.5px}#stem-seek[data-astro-cid-msq2fnxh]::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:24px;height:24px}.time[data-astro-cid-msq2fnxh]{color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;min-width:95px;font-size:18px}.player-caption[data-astro-cid-msq2fnxh]{color:var(--muted);margin-top:14px;font-size:13px;line-height:1.5}.scenario-explanation[data-astro-cid-msq2fnxh]{max-width:1050px;min-height:34px;margin-top:12px;font-size:23px;line-height:1.45}.status[data-astro-cid-msq2fnxh]{color:var(--focus);font-size:14px;line-height:1.45}.status[data-astro-cid-msq2fnxh]:not(:empty),.no-script[data-astro-cid-msq2fnxh]{margin-top:12px}.practice[data-astro-cid-msq2fnxh]{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;gap:42px;margin-top:32px;padding:38px 0 34px;display:grid}h2[data-astro-cid-msq2fnxh]{letter-spacing:-.035em;font-size:clamp(30px,3.3vw,46px);font-weight:760;line-height:1.1}.practice-intro[data-astro-cid-msq2fnxh]>p[data-astro-cid-msq2fnxh]{color:var(--muted);max-width:560px;margin:15px 0 25px;font-size:21px;line-height:1.5}.download[data-astro-cid-msq2fnxh]{background:var(--blue);border-radius:7px;justify-content:space-between;align-items:center;gap:26px;min-height:62px;padding:17px 30px;font-size:20px;font-weight:600;line-height:1.3;text-decoration:none;display:inline-flex}.download[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{flex:none;width:26px;height:26px}.download[data-astro-cid-msq2fnxh]:hover{background:var(--color-cobalt-dim)}.steps[data-astro-cid-msq2fnxh]{border-left:1px solid var(--line);counter-reset:steps;margin:0;padding:0 0 0 42px;list-style:none}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]{counter-increment:steps;gap:22px;display:flex}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]+li[data-astro-cid-msq2fnxh]{margin-top:19px}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]:before{content:counter(steps);background:var(--silence);width:44px;height:44px;color:var(--text);border-radius:50%;flex:0 0 44px;justify-content:center;align-items:center;font-size:22px;display:flex}h3[data-astro-cid-msq2fnxh]{font-size:17px;font-weight:650;line-height:1.5}.steps[data-astro-cid-msq2fnxh] p[data-astro-cid-msq2fnxh]{color:var(--muted);margin-top:2px;font-size:16px;line-height:1.45}.source-note[data-astro-cid-msq2fnxh]{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:15px 30px;padding:20px 0 26px;font-size:14px;line-height:1.5;display:flex}.source-note[data-astro-cid-msq2fnxh] a[data-astro-cid-msq2fnxh]{color:var(--text);align-items:center;gap:9px;text-decoration:none;display:inline-flex}.source-note[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{width:18px;height:18px}@media (width<=1000px){.scenarios[data-astro-cid-msq2fnxh]{gap:20px 32px}.scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]{gap:12px}.scenarios[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]{flex-basis:28px;width:28px;height:28px}.practice[data-astro-cid-msq2fnxh]{gap:28px}.steps[data-astro-cid-msq2fnxh]{padding-left:28px}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]{gap:15px}.practice-intro[data-astro-cid-msq2fnxh]>p[data-astro-cid-msq2fnxh]{font-size:19px}.download[data-astro-cid-msq2fnxh]{padding:16px 22px;font-size:18px}}@media (width<=700px){.stem-demo[data-astro-cid-msq2fnxh]{--track-label:64px;--file-label:42px}h1[data-astro-cid-msq2fnxh]{letter-spacing:-.04em;font-size:clamp(36px,7vw,49px);line-height:1.05}.intro[data-astro-cid-msq2fnxh]{margin-top:18px;font-size:18px}.scenarios[data-astro-cid-msq2fnxh]{gap:8px;margin:23px 0 25px;display:grid}.scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]{min-height:44px;font-size:17px}.timeline-visual[data-astro-cid-msq2fnxh]{grid-template-rows:32px repeat(3,34px);row-gap:16px}.grid-lines[data-astro-cid-msq2fnxh]{top:32px;bottom:-5px}.track-name[data-astro-cid-msq2fnxh]{padding-right:5px;font-size:15px}.ruler[data-astro-cid-msq2fnxh]{font-size:13px}.file-heading[data-astro-cid-msq2fnxh]{text-align:right;font-size:10px}.file-duration[data-astro-cid-msq2fnxh]{font-size:13px}.legend[data-astro-cid-msq2fnxh]{gap:8px 15px;margin:20px 0 0;font-size:11px}.legend[data-astro-cid-msq2fnxh]>span[data-astro-cid-msq2fnxh]:last-child{flex-basis:100%}.transport[data-astro-cid-msq2fnxh]{grid-template-columns:54px 46px 1fr;gap:15px;margin-top:25px;display:grid}.play-button[data-astro-cid-msq2fnxh]{width:54px;height:54px}.play-button[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{width:25px;height:25px}.restart-button[data-astro-cid-msq2fnxh]{width:46px;height:46px}.restart-button[data-astro-cid-msq2fnxh] svg[data-astro-cid-msq2fnxh]{width:25px;height:25px}.seek-wrap[data-astro-cid-msq2fnxh]{grid-area:1/3;min-width:0}.time[data-astro-cid-msq2fnxh]{grid-column:3;min-width:0;margin-top:-10px;font-size:14px}#stem-seek[data-astro-cid-msq2fnxh]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-6.5px}#stem-seek[data-astro-cid-msq2fnxh]::-moz-range-thumb{width:20px;height:20px}.player-caption[data-astro-cid-msq2fnxh]{margin-top:11px;font-size:12px}.scenario-explanation[data-astro-cid-msq2fnxh]{margin-top:12px;font-size:19px}.practice[data-astro-cid-msq2fnxh]{grid-template-columns:1fr;gap:30px;margin-top:28px;padding-top:28px}h2[data-astro-cid-msq2fnxh]{font-size:32px}.practice-intro[data-astro-cid-msq2fnxh]>p[data-astro-cid-msq2fnxh]{margin:13px 0 22px;font-size:18px}.download[data-astro-cid-msq2fnxh]{min-height:58px;padding:16px 22px;font-size:17px}.steps[data-astro-cid-msq2fnxh]{border:0;padding:0}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]+li[data-astro-cid-msq2fnxh]{margin-top:22px}.steps[data-astro-cid-msq2fnxh] li[data-astro-cid-msq2fnxh]:before{flex-basis:38px;width:38px;height:38px;font-size:19px}.steps[data-astro-cid-msq2fnxh] p[data-astro-cid-msq2fnxh]{font-size:15px}.source-note[data-astro-cid-msq2fnxh]{padding-top:20px;font-size:12px}}.track-name[data-astro-cid-msq2fnxh]{grid-column:1}.track-lane[data-astro-cid-msq2fnxh]{grid-column:2}.file-duration[data-astro-cid-msq2fnxh]{grid-column:3}.row-drums[data-astro-cid-msq2fnxh]{grid-row:2}.row-bass[data-astro-cid-msq2fnxh]{grid-row:3}.row-melody[data-astro-cid-msq2fnxh]{grid-row:4}.practice-intro[data-astro-cid-msq2fnxh]>.terminology[data-astro-cid-msq2fnxh]{margin-block:-8px 22px;font-size:15px;line-height:1.6}.download[data-astro-cid-msq2fnxh]{font-family:var(--font-sans);letter-spacing:normal}.source-note[data-astro-cid-msq2fnxh]{padding-bottom:0}.takeaway[data-astro-cid-msq2fnxh]{max-width:65rem;color:var(--muted);margin:0 0 2rem;font-size:1rem;line-height:1.65}.stem-breadcrumb[data-astro-cid-msq2fnxh]{color:var(--muted);flex-wrap:wrap;align-items:center;gap:.65rem;margin-bottom:1.8rem;font-size:.8rem;display:flex}.stem-breadcrumb[data-astro-cid-msq2fnxh] a[data-astro-cid-msq2fnxh]{align-items:center;min-height:44px;text-decoration:underline;display:inline-flex}.stem-breadcrumb[data-astro-cid-msq2fnxh] [data-astro-cid-msq2fnxh][aria-current]{color:var(--text)}.stem-demo--embedded[data-astro-cid-msq2fnxh]{max-width:960px;padding:24px}.embed-byline[data-astro-cid-msq2fnxh]{color:var(--muted);font:11px/1.5 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}.stem-demo--embedded[data-astro-cid-msq2fnxh] h1[data-astro-cid-msq2fnxh]{max-width:720px;font-size:clamp(28px,4.8vw,44px);line-height:1.05}.stem-demo--embedded[data-astro-cid-msq2fnxh] .intro[data-astro-cid-msq2fnxh]{margin-top:12px;font-size:16px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh]{gap:8px 22px;margin:20px 0}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]{gap:9px;min-height:44px;font-size:15px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh] input[data-astro-cid-msq2fnxh]{flex-basis:24px;width:24px;height:24px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .timeline-visual[data-astro-cid-msq2fnxh]{grid-template-rows:28px repeat(3,30px);row-gap:12px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .grid-lines[data-astro-cid-msq2fnxh]{top:28px;bottom:0}.stem-demo--embedded[data-astro-cid-msq2fnxh] .track-name[data-astro-cid-msq2fnxh]{font-size:15px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .legend[data-astro-cid-msq2fnxh]{gap:6px 14px;margin-top:16px;font-size:11px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .transport[data-astro-cid-msq2fnxh]{gap:16px;margin-top:18px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .play-button[data-astro-cid-msq2fnxh]{width:52px;height:52px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .restart-button[data-astro-cid-msq2fnxh]{width:46px;height:46px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenario-explanation[data-astro-cid-msq2fnxh]{min-height:0;margin-top:10px;font-size:17px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .time[data-astro-cid-msq2fnxh]{font-size:14px}.embed-footer[data-astro-cid-msq2fnxh]{border-top:1px solid var(--line);margin-top:12px;padding-top:12px;font-size:13px;line-height:1.55}.embed-footer[data-astro-cid-msq2fnxh] p[data-astro-cid-msq2fnxh]{color:var(--muted)}.embed-footer[data-astro-cid-msq2fnxh] a[data-astro-cid-msq2fnxh]{min-height:44px;color:var(--text);align-items:center;gap:8px;font-weight:650;text-decoration:underline;display:inline-flex}@media (width<=420px){.stem-demo--embedded[data-astro-cid-msq2fnxh]{--track-label:58px;--file-label:32px;padding:18px 16px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh]{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]{gap:7px;font-size:14px}.stem-demo--embedded[data-astro-cid-msq2fnxh] .scenarios[data-astro-cid-msq2fnxh] label[data-astro-cid-msq2fnxh]:last-child{grid-column:1/-1}}