@font-face{font-family:Lilita One;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/3b0bcebad1fd47d9-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Lilita One;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/043945717efb3a31-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Lilita One Fallback;src:local("Arial");ascent-override:96.14%;descent-override:22.91%;line-gap-override:0.00%;size-adjust:96.01%}.__className_aa659e{font-family:Lilita One,Lilita One Fallback;font-weight:400;font-style:normal}.__variable_aa659e{--font-display:"Lilita One","Lilita One Fallback"}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/d57a24ec54448a8e-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/bc08e10e1c60a660-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/7c309a1f4c99f6b1-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Atkinson Hyperlegible;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/9816a0e0ed309b6c-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Atkinson Hyperlegible Fallback;src:local("Arial");ascent-override:95.60%;descent-override:29.18%;line-gap-override:0.00%;size-adjust:99.37%}.__className_de0309{font-family:Atkinson Hyperlegible,Atkinson Hyperlegible Fallback;font-style:normal}.__variable_de0309{--font-text:"Atkinson Hyperlegible","Atkinson Hyperlegible Fallback"}:root{color-scheme:light;--ink:#1f1a33;--paper:#ffffff;--body:#ffc83a;--well:#251f3d;--well-edge:#120e22;--cell:#37305a;--cell-alt:#2f2950;--cell-now:#4b4378;--drum-on:#fff4da;--focus:#1f6fff;--display:var(--font-display),"Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;--text:var(--font-text),Verdana,system-ui,sans-serif;--label-w:56px;--cell-min:24px;--gap:4px}*,:after,:before{box-sizing:border-box}body{margin:0;background:var(--body);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5}button,input{font:inherit;color:inherit}:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.toy{min-height:100vh;min-height:100dvh;max-width:1600px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px));display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;grid-gap:12px;gap:12px}.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"mark songs link";align-items:center;grid-gap:10px 28px;gap:10px 28px}@media (max-width:1279px){.topbar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"mark link" "songs songs"}.teachers{align-self:center}}.wordmark{grid-area:mark;font-family:var(--display);font-weight:400;font-size:30px;line-height:1;margin:0}.songs{grid-area:songs;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.songs-label{position:absolute;width:1px;height:1px;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.teachers{grid-area:link;align-self:start;font-size:14px;font-weight:700;color:var(--ink);opacity:.75;text-underline-offset:3px}.teachers:hover{opacity:1}.card,.tool{border:0;cursor:pointer;background:var(--paper);color:var(--ink);font-weight:700;font-size:15px;box-shadow:0 3px 0 rgba(31,26,51,.28);transition:transform .06s,box-shadow .06s}.tool{border-radius:999px;padding:8px 15px}.card:active,.tool:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(31,26,51,.28)}.card{display:grid;justify-items:center;grid-gap:4px;gap:4px;width:120px;padding:7px 4px 6px;border-radius:14px;font-size:12.5px;line-height:1.15;white-space:nowrap}.card[aria-pressed=true]{background:var(--well);color:var(--body)}.thumb{display:block;width:100%;height:40px;border-radius:7px;background:var(--well);color:var(--drum-on)}.card[aria-pressed=true] .thumb{background:var(--well-edge)}.well{background:var(--well);border-radius:18px;padding:12px;box-shadow:inset 0 3px 0 var(--well-edge)}.grid,.well{display:grid}.grid{grid-template-columns:var(--label-w) repeat(var(--steps,16),minmax(0,1fr));grid-template-rows:repeat(8,minmax(var(--cell-min),1fr)) auto repeat(3,minmax(var(--cell-min),1fr));grid-gap:var(--gap);gap:var(--gap);touch-action:none;-moz-user-select:none;user-select:none;-webkit-user-select:none}.label{display:flex;align-items:center;justify-content:center;font-family:var(--display)}.label.note span{display:grid;place-items:center;width:min(100%,40px);height:min(86%,40px);border-radius:9px;background:var(--row);color:var(--well);font-size:18px}.label.drum{color:var(--drum-on);position:relative}.label.lit span,.label.lit svg,.label.tap span,.label.tap svg{animation:flash .32s cubic-bezier(.2,.8,.2,1)}.label.note.lit span{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 14px 3px var(--row);filter:brightness(1.12)}.label.drum.lit{color:#ffffff}.label.drum.lit svg{filter:drop-shadow(0 0 5px rgba(255,244,218,.9))}@keyframes flash{0%{transform:scale(1.3)}to{transform:scale(1)}}.label.drum svg{position:absolute;inset:0;margin:auto;width:min(100%,34px);height:min(90%,34px)}.divider{grid-column:1/-1;height:2px;margin-block:3px;background:rgba(255,244,218,.14);border-radius:2px}.cell{border:0;padding:0;margin:0;border-radius:7px;background:var(--cell);cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}.cell.alt{background:var(--cell-alt)}.cell.now{background:var(--cell-now)}.cell.note.on{background:var(--row);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.4)}.cell.note.on.now{filter:brightness(1.18) saturate(1.1)}.cell.drum{container-type:size}.cell.drum:after{content:"";position:absolute;left:50%;top:50%;width:50%;width:min(60cqw,58cqh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(255,244,218,.2)}.cell.drum.on:after{background:var(--drum-on);border-color:var(--drum-on)}.cell.drum.on.now:after{background:#ffffff;box-shadow:0 0 0 3px rgba(255,244,218,.35)}.cell.on.now{animation:pop .24s cubic-bezier(.2,.8,.2,1)}@keyframes pop{0%{transform:scale(1.14)}to{transform:scale(1)}}.controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}.play{width:72px;height:72px;flex:none;border:0;border-radius:50%;cursor:pointer;background:var(--well);color:var(--body);display:grid;place-items:center;box-shadow:0 5px 0 var(--well-edge);transition:transform .06s,box-shadow .06s}.play:active{transform:translateY(3px);box-shadow:0 2px 0 var(--well-edge)}.group{display:grid;grid-gap:4px;gap:4px}.group-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(31,26,51,.72);padding-left:4px}.seg{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(31,26,51,.14)}.seg button{border:0;background:transparent;cursor:pointer;min-height:42px;padding:6px 12px;border-radius:10px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:15px}.seg button[aria-pressed=true]{background:var(--paper);box-shadow:0 3px 0 rgba(31,26,51,.25)}.seg .pic{flex-direction:column;justify-content:center;gap:1px;min-width:62px;min-height:58px;padding:5px 6px 4px;font-size:12.5px;line-height:1.15}.seg .pic svg{width:30px;height:30px}.tools{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}.tool{display:flex;align-items:center;gap:6px;border-radius:12px;min-height:42px}.tools .tool{flex-direction:column;justify-content:center;gap:2px;min-width:60px;min-height:58px;padding:5px 8px 4px;font-size:12.5px;line-height:1.15}.tools .tool svg{width:24px;height:24px}.tool:disabled{opacity:.45;cursor:default}svg{flex:none}.lessons{max-width:920px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top, 0px)) 16px 64px;display:grid;grid-gap:18px;gap:18px}.lessons h1,.lessons h2,.lessons h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0}.lessons h1{font-size:42px}.lessons h2{font-size:30px;margin-top:14px}.lessons h3{font-size:25px}.lessons h4{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(31,26,51,.72)}.lede{margin:0;max-width:62ch;font-size:19px}.lessons a.tool{display:inline-flex;width:-moz-fit-content;width:fit-content;text-decoration:none}.lessons .back{justify-self:start}.lessons .tool svg{width:18px;height:18px}.steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));grid-gap:12px;gap:12px}.steps li{counter-increment:step;position:relative;min-height:56px;padding:12px 14px 12px 58px;border-radius:16px;background:var(--paper);box-shadow:0 3px 0 rgba(31,26,51,.2)}.steps li:before{content:counter(step);position:absolute;left:14px;top:12px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--well);color:var(--body);font-family:var(--display);font-size:18px}.lesson-list{list-style:none;margin:0;padding:0;display:grid;grid-gap:16px;gap:16px}.lesson{display:grid;grid-gap:12px;gap:12px;padding:18px 22px 20px;border-radius:20px;background:var(--paper);box-shadow:0 4px 0 rgba(31,26,51,.2)}.lesson p,.tags{margin:0}.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}.tags li{padding:2px 11px;border-radius:999px;background:rgba(31,26,51,.09);font-size:13px;font-weight:700}.say{margin:0;padding-left:1.3em;display:grid;grid-gap:4px;gap:4px}.lesson-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.lesson-actions .tool{background:var(--well);color:var(--body);box-shadow:0 3px 0 var(--well-edge)}.copy-note{font-size:14px;font-weight:700}.copy-url{flex:1 1 280px;min-width:0;padding:8px 10px;border:2px solid var(--well);border-radius:10px;font-size:14px}.notes{margin:0;padding-left:1.2em;display:grid;grid-gap:8px;gap:8px;max-width:70ch}.toast-slot{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));display:flex;justify-content:center;pointer-events:none}.toast{pointer-events:auto;max-width:560px;width:100%;background:var(--well);color:var(--drum-on);border-radius:16px;padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;box-shadow:0 12px 30px rgba(18,14,34,.35)}.toast p{margin:0;font-weight:700;flex-basis:100%}.toast p:only-child{flex-basis:auto}.toast input{flex:1 1 240px;min-width:0;border:0;border-radius:10px;padding:8px 10px;background:var(--paper);color:var(--ink);font-size:14px}@media (max-width:620px){:root{--label-w:38px;--gap:3px}.toy{padding-inline:10px;gap:10px}.wordmark{font-size:24px}.well{padding:8px;border-radius:14px}.label.note span{font-size:15px;border-radius:7px}.songs{flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;margin-inline:-10px;padding:0 10px 5px}.card{flex:none;width:112px;font-size:11.5px}.thumb{height:32px}.tools{margin-left:0}.seg button{padding:6px 9px;font-size:14px}.seg .pic{padding:5px 4px 4px;font-size:12px}.seg .pic,.tools .tool{min-width:54px}.lessons h1{font-size:32px}.lessons h2{font-size:26px}.lesson{padding:16px 16px 18px}}@media (max-width:960px){.well.long{overflow-x:auto}.well.long .grid{min-width:calc(var(--label-w) + var(--steps) * (22px + var(--gap)));touch-action:pan-x}}@media (prefers-reduced-motion:reduce){.card,.play,.tool{transition:none}.cell.on.now,.label.lit span,.label.lit svg,.label.tap span,.label.tap svg{animation:none}}