.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}.keyboard-stage .moment-feedback{order:-1}}.moment-copy{gap:6px;display:grid}.moment-step{color:var(--muted);font-size:1rem;font-weight:600}.moment-stage{justify-items:center;gap:16px;display:grid;position:relative}.moment-stage>.motion-svg{max-width:34rem}@media (width<=899px){.names-stage>.motion-svg{max-width:320px}}.keyboard-stage>.motion-svg{max-width:48rem;overflow:hidden}.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)}.names-stage [data-name-bead] [data-struck]{display:none}.names-stage[data-ready] [data-name-bead]>circle[stroke-opacity]{stroke-opacity:1;stroke-width:2px}.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-change{border-color:var(--paper)}.chord-change:active{background:color-mix(in oklch, var(--paper) 12%, transparent)}.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{justify-self:center;justify-items:start;gap:16px;width:100%;max-width:34rem;padding-top:12px;display:grid}.demo-close>p{color:var(--muted);font-size:1.0625rem}.demo-close-actions{justify-items:start;gap:8px;display:grid}.demo-close-jump{min-height:44px;color:var(--paper);align-items:center;gap:.35em;font-weight:600;text-decoration:underline;display:inline-flex}.demo-close-jump span{color:var(--sound)}@media (width>=900px){.demo{gap:64px}.moment{grid-template:"copy stage"1fr"feedback stage""actions stage"1fr/minmax(0,5fr) minmax(0,7fr);align-content:start;gap:20px clamp(32px,5vw,96px);padding-top:96px}.moment-copy{grid-area:copy;align-self:end}.demo-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-band{background:var(--color-surface-variant)}.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;display:grid}@media (width<=899px){.method{gap:28px}.method-copy{gap:20px}.method-lines li{padding-block:10px}}.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:9/16;border:1px solid var(--hair-strong);background:#0b1822;border-radius:28px;width:min(100%,22rem);position:relative;overflow:hidden}.method-screen video{width:100%;height:100%;display:block}.method-screen video:not([controls]){cursor:pointer}.method-play{white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 24px);min-height:72px;color:var(--color-background);background:#f8f4eae6;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:1rem;font-weight:600;display:flex;position:absolute;top:70%;left:50%;transform:translate(-50%,-50%)}@media (hover:hover) and (pointer:fine){.method-play:hover{background:#fff}}.method-description{width:min(100%,22rem);color:var(--muted);font-size:.9375rem}.method-error{text-align:center;justify-items:center;gap:8px;width:min(100%,22rem);display:grid}.method-description summary{cursor:pointer;text-underline-offset:.2em;align-items:center;min-height:44px;text-decoration:underline;display:flex}.method-description p{padding-block:0 12px}.method-video figcaption{color:var(--muted);text-align:center;font-size:1rem}@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}.header-ebook{min-height:44px;color:var(--muted);align-items:center;padding:0 .5rem;font-size:.9375rem;text-decoration:none;display:inline-flex}@media (hover:hover) and (pointer:fine){.header-ebook:hover{color:var(--paper)}}@media (width>=900px){.header-ebook{padding:0 .75rem}}.mapa-card{border-top:1px solid var(--hair);grid-template-columns:minmax(0,1fr);align-items:start;gap:20px;padding-block:56px;display:grid}.mapa-card-cover{border:1px solid var(--hair-strong);width:min(40%,9rem);height:auto;display:block}.mapa-card-copy{justify-items:start;gap:12px;max-width:36rem;display:grid}.mapa-card-facts{color:var(--muted);letter-spacing:.01em;font-size:.875rem;font-weight:600}.landing-shell .mapa-card h2{font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem);line-height:1.05}.mapa-card-copy p:not(.mapa-card-facts,.mapa-card-price){color:var(--muted)}.mapa-card-price{color:var(--paper);font-size:1.25rem;font-weight:700}.mapa-card-price span{color:var(--muted);font-size:.875rem;font-weight:400}.mapa-card-link{border:1px solid var(--hair-strong);min-height:48px;color:var(--paper);border-radius:999px;align-items:center;gap:8px;padding:0 16px;font-weight:600;text-decoration:none;display:inline-flex}@media (width>=900px){.mapa-card{grid-template-columns:11rem minmax(0,1fr);gap:48px;padding-block:88px}.mapa-card-cover{width:100%}}.mapa-card-bonus{font-size:1rem}.mapa-card-bonus span{color:var(--paper);font-size:inherit}