:root{--navy:#122440;--ink:#17364a;--muted:#657c89;--teal:#7651a8;--dark-teal:#583c82;--pale:#f2ecfa;--border:#d1c1e5;--background:#f6f8fa;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--background);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #c48418;outline-offset:4px}button{color:inherit}button:hover:not(:disabled){filter:brightness(.96)}.masthead{background:var(--navy);border-top:4px solid var(--teal);color:white}.brand-row{min-height:106px;display:flex;align-items:center;justify-content:center;gap:18px;padding:20px}.brand{display:inline-flex;align-items:center;gap:12px;color:inherit}.brand>span{display:flex;flex-direction:column;gap:6px;font:700 34px/.95 Georgia,'Times New Roman',serif;letter-spacing:-.055em}.brand small{font:600 12px/1 Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;padding-left:2px}.companion{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px}.companion:hover{background:#ffffff12}main{width:min(1200px,100%);margin:0 auto;padding:25px 36px 46px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.14em;line-height:1.5;margin:0;color:var(--muted)}.selectors{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}.selector{min-width:0}.scroll-shell{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0}.tile-row{display:flex;flex:0 1 auto;width:max-content;gap:6px;overflow:auto;scrollbar-width:thin;scrollbar-color:#b29acb transparent;scroll-behavior:smooth;padding:7px;background:var(--pale);border:1px solid var(--border);border-radius:12px;min-width:0;overscroll-behavior-x:contain}.tile{flex:0 0 100px;min-height:72px;border:1px solid #c6b3df;border-radius:7px;background:white;padding:9px 8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;font-size:12px;line-height:1.3;max-width:180px;min-width:100px}.tile .symbol{height:18px;display:flex;align-items:center;color:var(--teal)}.tile svg{height:18px;width:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tile small{color:var(--muted);font-size:10px;white-space:nowrap}.tile[aria-pressed=true]{color:white;background:var(--dark-teal);border-color:var(--dark-teal);box-shadow:0 2px 3px #7651a818}.tile[aria-pressed=true] small,.tile[aria-pressed=true] .symbol{color:#eadfff}.sections .tile{flex:0 0 104px;min-width:104px;min-height:66px;padding:9px 10px}.sections .tile>span{text-wrap:balance;overflow-wrap:anywhere}.beat-numbers{flex:0 1 auto;width:max-content}.beat-numbers .tile{flex:0 0 44px;min-width:44px;min-height:44px;font-size:16px;font-weight:700;padding:8px;position:relative}.tile.review:after{content:'';width:4px;height:4px;background:currentColor;border-radius:50%;position:absolute;bottom:3px;opacity:.5}.scroll-arrow{flex:0 0 24px;width:24px;height:44px;background:transparent;border:0;color:#7e659f;font-size:28px;font-weight:400;padding:0}.scroll-arrow:disabled{opacity:.17}.practice{background:white;border:1px solid #dbe3e7;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px #12244004}.score-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,310px) auto;align-items:center;gap:24px;padding:25px 30px 10px}.score-heading h1{font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:-.02em;font-weight:700;line-height:1.25;margin:6px 0}.beat-badge{display:flex;flex-direction:column;justify-content:center;text-align:center;min-width:65px;height:62px;border:1px solid var(--border);background:var(--pale);border-radius:10px;font-size:27px;font-weight:700;color:var(--dark-teal)}.beat-badge small{font-size:9px;font-weight:700;letter-spacing:.14em;line-height:1.8}.score-scroll{overflow:hidden;padding:17px 22px 5px}.score-canvas{position:relative;width:100%;min-width:0;min-height:160px;display:flex;align-items:center;justify-content:center}.score-canvas img{display:block;width:100%;max-width:100%;min-width:0;height:auto}.score-canvas:has(img:not([hidden])){min-height:0}.playhead{position:absolute;top:8%;bottom:8%;width:2px;background:#7651a8;box-shadow:0 0 0 5px #7651a817;pointer-events:none;transition:none}.playhead:before{content:'';position:absolute;top:-6px;left:-4px;border:5px solid transparent;border-top-color:#7651a8}.pulse-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;min-height:34px;align-items:center;padding:0 15px 14px}.pulse{display:flex;align-items:center;justify-content:center;border:1px solid #e5d9ef;border-radius:50%;width:22px;height:22px;color:#9580aa;font-size:10px;transition:background 60ms}.pulse.active{background:var(--teal);border-color:var(--teal);color:white}.transport{padding:16px 20px;border-top:1px solid #e7eeee;background:#f5f0fa}.control-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;width:100%;margin:0 auto}.play-buttons{display:flex;flex:none;align-items:center;gap:9px}.play-button{display:flex;gap:12px;align-items:center;justify-content:center;min-width:150px;height:50px;border:0;border-radius:8px;background:var(--teal);color:white;font-weight:700;font-size:14px}.play-button #play-icon{font-size:15px}.icon-button{width:40px;height:44px;background:white;border:1px solid #ddd1e9;border-radius:7px;font-size:20px}.icon-button#stop{font-size:14px}.tempo{width:310px;max-width:100%}.tempo>label{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.14em;font-weight:700;color:var(--muted)}.tempo>label span{letter-spacing:0;font-size:10px;font-weight:400}.tempo-value{display:flex;align-items:center;gap:8px;margin:5px 0 1px}.tempo-value>button{height:36px;min-width:36px;border:1px solid #d6c8e4;background:white;border-radius:6px;font-size:20px}.tempo-value .tap{margin-left:auto;min-width:48px;font-size:11px;font-weight:700}.tempo-value>span{font-size:10px;color:var(--muted);align-self:center}.tempo input[type=number]{width:66px;border:0;background:transparent;color:var(--ink);font-size:28px;font-weight:700;padding:0;text-align:center;-moz-appearance:textfield}.tempo input::-webkit-inner-spin-button,.tempo input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=range]{accent-color:var(--teal);height:24px;cursor:pointer;margin:0}#tempo-slider{width:100%}.settings{display:flex;flex:0 1 auto;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;max-width:100%;color:#756188;font-size:11px;white-space:nowrap}.settings label{display:flex;align-items:center;gap:7px;min-height:26px;cursor:pointer}.settings input[type=checkbox]{width:15px;height:15px;accent-color:var(--teal);margin:0}.volume{margin-left:0}.volume input{width:80px}.notice{margin:0 30px 18px;border-left:3px solid #d2ad66;padding:9px 12px;background:#fffbf3;color:#826023;font-size:12px;line-height:1.5}footer{background:var(--navy);color:#c7d5eb;text-align:center;padding:30px 20px}footer .brand{color:white}footer .brand>span{font-size:27px}footer .brand small{font-size:10px}footer a:hover{text-decoration:underline;text-underline-offset:3px}.skip{position:fixed;left:10px;top:-80px;z-index:10;background:white;padding:12px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#error{padding:15px;background:#fff0ed;color:#8b3025;border-radius:8px;font-size:13px}@media(min-width:1150px){.categories .tile{flex-basis:100px}.beat-numbers{max-width:100%}}@media(max-width:760px){main{padding:18px 14px 30px}.selector{display:block}.selectors{gap:11px}.tile-row{padding:6px;gap:5px}.categories .tile{flex-basis:97px;min-width:97px;font-size:11px;min-height:68px}.sections .tile{flex-basis:100px;min-width:100px;min-height:64px;font-size:11px}.beat-numbers .tile{min-height:44px}.score-heading{grid-template-columns:minmax(0,1fr) 220px 54px;padding:19px 18px 8px;gap:12px}.score-heading .tempo-value{gap:5px}.score-heading .tempo input[type=number]{width:52px}.score-heading .tempo-value>button{min-width:32px}.score-heading .tempo-value .tap{min-width:36px}.score-heading h1{font-size:21px}.beat-badge{min-width:54px;height:55px;font-size:24px}.score-scroll{padding:8px 8px 5px}.score-canvas{min-width:0}.transport{padding:12px}.control-bar{gap:8px 12px}.play-buttons{gap:6px}.play-button{min-width:118px;font-size:12px;gap:8px}.play-buttons .icon-button{width:32px}.tempo{width:min(370px,100%)}.settings{gap:12px;font-size:10px}.volume{margin-left:0}.notice{margin:0 18px 18px}.masthead .brand-row{min-height:94px;padding:17px}.brand>span{font-size:31px}}@media(prefers-reduced-motion:reduce){.tile-row{scroll-behavior:auto}.pulse{transition:none}}

@media(max-width:600px){.score-heading{grid-template-columns:minmax(0,1fr) 54px}.score-heading h1{grid-column:1/-1}.score-heading .tempo{width:100%;max-width:310px}}

.footer-brands{display:flex;align-items:center;justify-content:center;gap:22px}.footer-brands .companion{width:56px;height:56px}.footer-brands .companion img{display:block;object-fit:contain}

@media(max-width:760px){
  .score-heading h1{overflow-wrap:anywhere}
  .play-buttons .icon-button{width:44px}
  .settings label{min-height:44px}
  .settings .volume input{width:64px}
  .score-heading .tempo-value>button{min-width:44px;height:44px}
  .score-heading .tempo-value .tap{min-width:44px}
  .score-heading .tempo-value>span{display:none}
}
@media(max-width:360px){
  .score-heading h1{grid-column:1;grid-row:1}
  .score-heading .beat-badge{grid-column:2;grid-row:1}
  .score-heading .tempo{grid-column:1/-1;grid-row:2}
  .play-button{min-width:100px}
}

.notation-row{display:flex;align-items:center;position:relative;min-width:0}.notation-row .score-canvas{flex:1;min-width:0;width:0}.notation-row .instrument-guide{flex:0 0 58px;width:58px;height:100%;position:absolute;left:0;top:0;overflow:visible}.notation-row{padding-left:58px}

#score-scroll .notation-row+.notation-row{margin-top:14px}

.practice-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;margin-top:22px;font-size:14px}.practice-links a{padding:9px 4px}

.practice-icons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;padding:4px 0}.practice-icons a{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px}.practice-icons img{display:block;width:46px;height:46px;object-fit:contain}.practice-icons a:hover{background:#ffffff16}.practice-icons a:focus-visible{outline:3px solid #d4a54a;outline-offset:4px}.practice-icons a[aria-current="page"]{background:#ffffff0c}

@media(max-width:400px){.practice-icons{gap:10px}}