.demo{gap:36px;display:grid}.moment{border-top:1px solid var(--hair);gap:20px;padding-top:40px;display:grid}.section-head+.moment{border-top:0;padding-top:0}@media (width<=899px){.moment{align-content:start;min-height:0}}.moment-copy{gap:10px;display:grid}.moment-step{color:var(--muted);font-size:.875rem;font-weight:600}.moment-stage{justify-items:center;gap:16px;display:grid;position:relative}.moment-stage>.motion-svg{max-width:34rem}.keyboard-stage>.motion-svg{max-width:48rem;overflow:hidden}.keyboard-stage>.motion-svg[data-cropped]{-webkit-mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000);mask-image:linear-gradient(90deg,#0000,#000 24px calc(100% - 24px),#0000)}.chord-keys{overflow:hidden}.moment-feedback{gap:6px;width:100%;max-width:34rem;font-size:1.0625rem;line-height:1.5;display:grid}.moment-feedback p{animation:.26s cubic-bezier(.16,1,.3,1) both line-in}@keyframes line-in{0%{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.moment-feedback p{animation:none}}.moment-actions{flex-wrap:wrap;align-items:center;gap:12px;width:100%;max-width:34rem;min-height:52px;display:flex}.moment-prompt{color:var(--paper);font-size:1rem}.moment-prompt:not([data-live]){color:var(--muted)}.key-hit:focus-visible{stroke:var(--color-engrave-ink,#0b1420);stroke-width:3px;outline:none}.key-hit-black:focus-visible{stroke:var(--color-focus-ring,#f2eee5)}.chord-drawings{justify-items:center;gap:8px;width:100%;display:grid}.chord-keys{max-width:26rem}.chord-staff-wrap{grid-template-columns:auto auto;align-items:center;gap:8px 20px;display:grid}.chord-staff{width:180px;height:auto;display:block}.chord-name{font-family:var(--font-serif-display);align-items:baseline;gap:.6rem;font-size:clamp(1.75rem,1.3rem + 1.4vw,2.5rem);line-height:1.05;display:flex}.chord-symbol{font-family:var(--font-body);color:var(--muted);font-size:1rem;font-weight:600}.moment-more{text-align:center;justify-self:center;width:100%;max-width:34rem}.moment-more a{min-height:44px;color:var(--sound);text-underline-offset:.3em;align-items:center;font-size:.9375rem;text-decoration:underline;display:inline-flex}.demo-close{width:100%;max-width:34rem;color:var(--muted);justify-self:center;padding-top:12px;font-size:1.0625rem}.demo-close a{min-height:44px;color:var(--paper);align-items:center;gap:.35em;font-weight:600;text-decoration:underline;display:inline-flex}.demo-close a span{color:var(--sound)}@media (width>=900px){.demo{gap:64px}.moment{grid-template:"copy stage""feedback stage""actions stage"1fr"close close"/minmax(0,5fr) minmax(0,7fr);align-content:start;gap:20px clamp(32px,5vw,96px);padding-top:96px}.moment-copy{grid-area:copy}.demo-close{grid-area:close;justify-self:start;max-width:none;padding-top:32px}.moment-stage{display:contents}.moment-stage:before{display:none}.moment-stage>.motion-svg,.moment-stage>.chord-drawings{background:radial-gradient(closest-side,#acdbe41a,#0000);grid-area:stage;place-self:start center}.moment-feedback{grid-area:feedback}.moment-actions{grid-area:actions;align-self:start}.chord-drawings{grid-template-columns:auto auto;align-items:center;gap:32px}.chord-staff-wrap{grid-template-columns:auto}}.method{gap:40px;display:grid}.method-copy{align-content:start;gap:28px;display:grid}.method-lines li{border-bottom:1px solid var(--hair);font-family:var(--font-serif-display);color:var(--paper);grid-template-columns:2.5rem 1fr;align-items:baseline;padding-block:16px;font-size:clamp(1.375rem,1rem + 1.1vw,2rem);line-height:1.2;transition:color .26s;display:grid}.method-lines:has([data-active]) li:not([data-active]){color:#f5f1e780}.method-index{font-family:var(--font-body);color:var(--sound);font-size:.875rem;font-weight:600}.method-support{color:var(--muted);max-width:36rem}.method-video{justify-items:center;gap:12px;margin:0;display:grid}.method-screen{aspect-ratio:540/1012;border:1px solid var(--hair-strong);background:#0b1822;border-radius:28px;width:min(100%,22rem);position:relative;overflow:hidden}.method-screen video{cursor:pointer;width:100%;height:100%;display:block}.method-play{width:72px;height:72px;color:var(--color-background);background:#f8f4eae6;border-radius:50%;place-items:center;margin:-36px 0 0 -36px;font-size:1.25rem;transition:opacity .18s,background-color .18s;display:grid;position:absolute;top:50%;left:50%}.method-video[data-playing] .method-play{opacity:0}.method-video[data-playing] .method-play:focus-visible{opacity:1}@media (hover:hover) and (pointer:fine){.method-play:hover{background:#fff}.method-video[data-playing] .method-screen:hover .method-play{opacity:1}}.method-video figcaption{color:var(--muted);text-align:center;font-size:.875rem}@media (width>=900px){.method{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center;column-gap:clamp(32px,6vw,120px)}.method-screen{width:min(27rem,44.8221svh)}}.landing-shell .motion-svg{touch-action:manipulation}.landing-shell .site-header{flex-wrap:wrap}