:root{--paper:#f0ede5;--cream:#faf8f1;--ink:#292e27;--muted:#797c6f;--line:#d9dacb;--orange:#d96340;--olive:#69795c;--mono:"Space Grotesk",ui-monospace,monospace;font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;--level:0}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.48}a{color:inherit;text-underline-offset:4px}input[type=range]{accent-color:var(--orange);cursor:pointer;min-width:0}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #d9634080;outline-offset:4px}button,a,summary{touch-action:manipulation}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{max-width:1060px;margin:auto;min-height:74px;padding:18px 30px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;font:700 19px/1 var(--mono);letter-spacing:-.8px;text-decoration:none}.brand>svg{width:27px;height:27px;color:var(--orange)}.brand-light{color:#a1a292;font-weight:400}.about-link{font-size:12px;text-decoration:none;color:#6d7264}.about-link>span{margin-left:8px;color:var(--orange)}
main{max-width:1000px;margin:auto;padding:0 30px}.page-heading{display:flex;align-items:center;justify-content:space-between;margin:15px 0 24px;gap:20px}.eyebrow{font:600 10px/1.3 var(--mono);letter-spacing:1.6px;color:var(--orange);margin:0 0 9px}h1{font-size:clamp(25px,3vw,35px);line-height:1.25;letter-spacing:-1px;margin:0;font-weight:650}h1>span{font-weight:400}.heading-note{font-size:12px;line-height:1.8;color:var(--muted);margin:0;padding-left:22px;border-left:1px solid #c9cdbd}
.workbench{background:var(--cream);border:1px solid #c9cebd;border-radius:18px;box-shadow:0 5px 0 #dce0d1,0 16px 40px #3b493c08;overflow:hidden}.bench-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 22px;border-bottom:1px solid var(--line);background:#edf0e5;font-size:11px}.room-label{font-weight:650;display:flex;align-items:center;gap:7px}.status-dot{height:6px;width:6px;border-radius:50%;background:var(--orange)}.room-number{font:500 9px/1 var(--mono);color:#8c9380;margin-left:7px;letter-spacing:.7px}.local-note{font-size:10px;color:#929783}.performance-row{display:grid;grid-template-columns:minmax(0,1fr) 225px;border-bottom:1px solid var(--line)}.scene{position:relative;height:240px;overflow:hidden;background:radial-gradient(ellipse at 53% 72%,#e7decb70,transparent 65%),#f1eee4}.scene:after{content:"";position:absolute;width:100%;height:1px;background:#ddd8ca;bottom:25px;left:0}.cat-scene{position:absolute;height:231px;width:100%;bottom:17px;left:0;overflow:visible}.scene-sticker{position:absolute;top:22px;left:23px;font:600 11px/1.3 var(--mono);letter-spacing:.4px;transform:rotate(-8deg);color:#999e8a;z-index:1}.scene-sticker>span{display:block;color:#c39269;font-size:32px;margin-top:7px}.stage-readout{display:flex;align-items:center;gap:8px;position:absolute;bottom:9px;left:22px;right:20px;font-size:10px;color:#7b806e;z-index:2}.stage-caption{margin-left:auto;font-size:9px;letter-spacing:.5px;color:#a4a594}.signal{display:flex;align-items:center;gap:2px;height:12px;--level:0}.signal i{display:block;width:3px;height:calc(3px + var(--level)*9px);border-radius:2px;background:var(--olive)}.signal i:nth-child(2){height:calc(6px + var(--level)*6px)}.signal i:nth-child(3){height:calc(4px + var(--level)*8px)}.signal i:nth-child(4){height:calc(2px + var(--level)*9px)}
#cat-head{transform-box:fill-box;transform-origin:50% 90%}#paw-left,#paw-right{transform-box:fill-box;transform-origin:50% 10%;will-change:transform}.hit-marks,.music-flecks{opacity:0}.hit-left #paw-left{animation:paw-left-strike .24s cubic-bezier(.2,.7,.2,1)}.hit-right #paw-right{animation:paw-right-strike .24s cubic-bezier(.2,.7,.2,1)}.hit-left #hit-left,.hit-right #hit-right{animation:impact .24s ease-out}.hit-left .music-flecks,.hit-right .music-flecks{animation:note-pop .45s ease-out}.beat-pulse #cat-head{animation:head-nod .24s ease-out}.left-down #paw-left{transform:translate(4px,19px) rotate(-12deg)}.right-down #paw-right{transform:translate(-4px,19px) rotate(12deg)}.left-down #hit-left,.right-down #hit-right{opacity:1}
@keyframes paw-left-strike{0%{transform:translateY(-10px) rotate(12deg)}28%{transform:translate(6px,22px) rotate(-14deg)}55%{transform:translateY(-7px) rotate(5deg)}100%{transform:translateY(0) rotate(0)}}@keyframes paw-right-strike{0%{transform:translateY(-10px) rotate(-12deg)}28%{transform:translate(-6px,22px) rotate(14deg)}55%{transform:translateY(-7px) rotate(-5deg)}100%{transform:translateY(0) rotate(0)}}@keyframes impact{0%,10%{opacity:0}30%,55%{opacity:1}100%{opacity:0}}@keyframes note-pop{0%{opacity:0;transform:translateY(8px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-15px)}}@keyframes head-nod{0%,100%{transform:translateY(0) rotate(0)}35%{transform:translateY(5px) rotate(-3deg)}}
.metronome{padding:20px 20px 14px;border-left:1px solid var(--line);background:#f9f8f0}.control-caption{font-size:11px;display:flex;justify-content:space-between;align-items:center}.control-index{display:none}.tempo-display{display:flex;align-items:baseline;gap:6px;margin-top:14px}.tempo-display>output{font:500 47px/1 var(--mono);letter-spacing:-2px}.tempo-display>span{font:500 10px/1 var(--mono);color:#929784}.tempo-display>button{display:flex;align-items:center;gap:5px;margin-left:auto;align-self:center;padding:9px 9px;border:1px solid #bec9b4;border-radius:7px;font-size:10px;background:#e4eadb;white-space:nowrap}.tempo-display>button[aria-pressed=true]{background:var(--orange);color:#fff8ed;border-color:var(--orange)}.play-icon{font-size:8px}.beat-indicator{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:17px 0 15px}.beat-indicator>span{display:grid;place-content:center;height:25px;border:1px solid #d9decd;border-radius:5px;font:500 10px/1 var(--mono);color:#969d89;background:#edf0e7}.beat-indicator>span.active,.beat-indicator>span.on,.beat-indicator>span[aria-current=true]{color:#fff9ef;border-color:var(--orange);background:var(--orange);box-shadow:0 0 0 3px #d9634010}.tempo-slider{display:flex;align-items:center;gap:6px;font-size:8px;color:#969b8b;white-space:nowrap}.tempo-slider input{width:100%;margin:0;height:16px}.tempo-note{font-size:9px;line-height:1.7;color:#a0a593;margin:12px 0 0}
.instrument-controls{padding:12px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #e8e8dc;background:#faf9f3}.instrument-select{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted)}select{max-width:100%;border:1px solid #d4d9c9;background:#f0f2e9;border-radius:6px;font-size:11px;padding:7px 25px 7px 9px;outline-offset:2px}.volume-control{display:flex;align-items:center;gap:9px;color:#8e9582;font-size:10px}.volume-icon{font:500 13px/1 var(--mono);letter-spacing:-2px}.volume-control input{width:96px;margin:0;height:18px}.volume-control output{min-width:30px;font:500 10px/1 var(--mono)}
.playing-surface{padding:18px 22px 0}.section-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.section-label h2,.drum-heading h2{font-size:11px;line-height:1.3;margin:0;font-weight:600}.section-label>span{font-size:9px;color:#9a9e90}.section-label i{font-style:normal;margin:0 5px;color:#c4c8b7}.mobile-hint{display:none}.melody-keys{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;height:119px;padding:0 4px 4px;background:#b5bdab;border:4px solid #454d40;border-top:8px solid #454d40;border-radius:8px 8px 10px 10px;isolation:isolate;touch-action:none}.music-key{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;position:relative;min-width:0;padding:0 3px 9px;height:100%;border:1px solid #d1d4c6;border-bottom:5px solid #d7d6c6;border-radius:0 0 5px 5px;background:linear-gradient(100deg,#f9f8ef,#fffdf7 65%);box-shadow:0 2px 0 #858d7b30;color:#63705b;user-select:none;touch-action:none;transition:transform 60ms ease,background 60ms}.music-key kbd{font:600 13px/1 var(--mono);margin-top:3px}.music-key .note-label{font-size:9px;color:#9a9c8e}.music-key .note-sub{font-size:8px;color:#b2b5a5}.music-key.black,.music-key.black-key,.music-key[data-accidental=true]{position:absolute;left:calc(var(--key-position,1)*12.5% - 3.5%);top:-3px;z-index:2;width:7%;height:61%;padding:0 0 8px;gap:3px;border:1px solid #2e342c;border-bottom:6px solid #22291f;border-radius:0 0 5px 5px;background:linear-gradient(95deg,#333b30,#4b5445);color:#f6f0dc;box-shadow:1px 3px 2px #3d443d30}.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{font-size:8px;color:#a4ae9b}.music-key.black .note-sub,.music-key.black-key .note-sub,.music-key[data-accidental=true] .note-sub{display:none}.music-key.active,.music-key[aria-pressed=true]{transform:translateY(3px);background:#dee8cf;border-bottom-width:2px;box-shadow:inset 0 1px 6px #71826030;color:var(--orange)}.music-key.black.active,.music-key.black-key.active,.music-key[data-accidental=true].active{background:#5c7655;color:#fff9eb;border-bottom-width:3px}
.percussion-row{display:flex;align-items:center;gap:20px;margin-top:18px}.drum-heading{width:122px;flex:none}.drum-heading>span{display:block;font-size:8px;color:#a0a595;margin-top:6px}.drum-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;touch-action:none}.drum-pad{display:flex;align-items:center;gap:10px;min-width:0;min-height:53px;padding:8px 12px;background:var(--pad,#e8eddf);border:1px solid var(--pad-border,#d0d9c3);border-bottom:4px solid var(--pad-border,#d0d9c3);border-radius:7px;user-select:none;touch-action:none;text-align:left;transition:transform 60ms,filter 60ms}.drum-pad kbd{font:600 14px/1 var(--mono);min-width:12px}.drum-pad .pad-label{font-size:10px;display:block;white-space:nowrap}.drum-pad .pad-sub{font:400 7px/1.3 var(--mono);letter-spacing:.2px;display:block;margin-top:4px;color:#929a86}.drum-pad.active,.drum-pad[aria-pressed=true]{transform:translateY(3px);border-bottom-width:1px;filter:saturate(1.5) brightness(.96);box-shadow:inset 0 1px 5px #55644e12}.sound-status{margin:0;padding:13px 22px 15px;color:#9ba08e;font-size:9px;line-height:1.6}.sound-status.error{color:#b04d35}
.score-book{margin:23px 0 0;border-top:1px solid #cfd3c3;border-bottom:1px solid #cfd3c3}.score-book>summary{list-style:none;display:flex;align-items:center;gap:13px;padding:19px 2px;cursor:pointer}.score-book>summary::-webkit-details-marker{display:none}.score-book-icon{display:grid;place-content:center;flex:none;width:35px;height:35px;border:1px solid #c8cfb9;border-radius:7px;font-size:22px;color:var(--olive);transform:rotate(-7deg)}.score-book>summary strong{display:block;font-size:12px;font-weight:500}.score-book>summary small{display:block;color:#969d88;font-size:9px;margin-top:5px}.score-book-open{margin-left:auto;font-size:10px;color:#7e886d;white-space:nowrap}.score-book-open>span{display:inline-block;font-size:18px;vertical-align:middle;margin-left:10px}.score-book[open] .score-book-open>span{transform:rotate(45deg)}.score-content{padding:2px 0 20px}.score-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px}.score-toolbar select{min-width:200px}.score-actions{display:flex;gap:6px}.score-actions>button{background:transparent;border:1px solid #cbd3be;border-radius:6px;font-size:10px;padding:9px 12px}.score-actions>button:first-child{background:#e2e9d8}.song-info,.score-status{font-size:10px;line-height:1.8;color:#939b85}.score-rows{display:grid;gap:10px;margin-top:15px}.score-phrase{display:flex;align-items:stretch;gap:5px;flex-wrap:wrap}.score-note{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;padding:8px 7px;background:#f9f8f0;border:1px solid #d5dcc9;border-radius:6px;min-width:43px;min-height:65px;font:500 13px/1 var(--mono)}.score-note kbd{font:600 12px/1 var(--mono);color:#687a59;background:#e8edde;border-radius:3px;padding:3px 6px}.score-note small,.score-note .duration{font-size:8px;color:#959d87}.score-note.active,.score-note.playing{border-color:var(--orange);background:#f6e1d3}.closing-note{display:flex;align-items:center;justify-content:center;gap:13px;margin:27px 0;color:#8c9680}.closing-note>span{color:#b7805b;font-size:29px}.closing-note p{font-size:10px;line-height:1.9;margin:0}.closing-note strong{font-weight:400;color:#adb39f}.credits{font-size:10px;line-height:1.9;color:#939c86;max-width:760px;margin:20px auto 0}.credits summary{cursor:pointer;text-align:center;color:#adb39f;font-size:9px}.credits p{margin-top:12px}.credits a{color:#7d8a6e}.noscript{padding:20px;background:#f4ded3;font-size:13px}footer{max-width:1000px;margin:23px auto 0;padding:20px 30px 28px;display:flex;justify-content:space-between;align-items:center;gap:10px;color:#a6ad99;font:400 8px/1 var(--mono);letter-spacing:.5px}footer>a{font-family:inherit;text-decoration:none;font-size:9px;letter-spacing:0}.footer-cat{font-size:13px}
@media(min-width:1150px) and (min-height:850px){.page-heading{margin-top:28px;margin-bottom:28px}.scene{height:264px}.cat-scene{height:252px}.metronome{padding-top:28px}.tempo-note{margin-top:21px}.playing-surface{padding-top:22px}.melody-keys{height:132px}}
@media(max-width:720px){.site-header{padding:14px 20px;min-height:58px}.brand{font-size:17px}.about-link{font-size:10px}main{padding:0 16px}.page-heading{margin:12px 0 17px}.eyebrow{font-size:8px;margin-bottom:7px;letter-spacing:1.2px}h1{font-size:25px;letter-spacing:-.8px}.heading-note{display:none}.bench-topline{padding:10px 13px;font-size:10px}.room-number{font-size:8px;margin-left:4px}.local-note{font-size:8px}.workbench{border-radius:13px}.performance-row{grid-template-columns:minmax(0,1fr) 167px}.scene{height:199px}.cat-scene{height:181px;bottom:17px;width:125%;left:-13%}.scene-sticker{left:13px;top:14px;font-size:8px}.scene-sticker>span{font-size:22px;margin-top:5px}.stage-readout{left:13px;right:10px;font-size:8px;gap:5px}.stage-caption{display:none}.signal{gap:1.5px}.signal i{width:2px}.metronome{padding:15px 13px 10px}.control-caption{font-size:9px}.tempo-display{margin-top:14px;gap:4px}.tempo-display>output{font-size:36px}.tempo-display>span{font-size:8px}.tempo-display>button{font-size:9px;padding:8px 6px;gap:3px}.tempo-display .play-icon{font-size:7px}.beat-indicator{gap:5px;margin:13px 0}.beat-indicator>span{height:22px;font-size:9px}.tempo-slider{font-size:7px;gap:4px}.tempo-note{font-size:8px;margin-top:9px}.instrument-controls{padding:10px 13px;gap:8px}.instrument-select{gap:7px;font-size:9px}select{font-size:10px;padding:7px 21px 7px 7px}.volume-control{gap:5px}.volume-control input{width:62px}.volume-icon{display:none}.volume-control output{font-size:9px;min-width:26px}.playing-surface{padding:14px 13px 0}.section-label{margin-bottom:10px;gap:8px}.section-label h2,.drum-heading h2{font-size:10px}.section-label>span{font-size:8px}.section-label i{margin:0 2px}.melody-keys{height:110px;gap:3px;border-width:3px;border-top-width:7px;padding:0 3px 3px}.music-key{padding-bottom:8px;gap:3px}.music-key kbd{font-size:12px}.music-key .note-label{font-size:8px}.music-key .note-sub{font-size:7px}.music-key.black,.music-key.black-key,.music-key[data-accidental=true]{height:59%;border-bottom-width:5px}.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{font-size:7px}.percussion-row{margin-top:14px;gap:10px}.drum-heading{width:95px}.drum-heading>span{font-size:7px;line-height:1.7}.drum-pads{gap:5px}.drum-pad{min-height:48px;padding:7px 8px;gap:7px}.drum-pad kbd{font-size:12px}.drum-pad .pad-label{font-size:9px}.drum-pad .pad-sub{font-size:6px}.sound-status{padding:11px 13px 12px;font-size:8px}.score-book{margin-top:21px}.score-book>summary{padding:16px 1px;gap:10px}.score-book>summary strong{font-size:11px}.score-book>summary small{font-size:8px}.score-book-open{font-size:9px}.score-book-open>span{margin-left:4px}.closing-note{margin:24px 0}.credits{font-size:9px}footer{padding:20px 16px 26px;margin-top:18px}}
@media(max-width:480px){.performance-row{grid-template-columns:1fr}.scene{height:157px}.cat-scene{height:166px;width:100%;left:0;bottom:10px}.scene-sticker{top:15px;left:17px;font-size:8px}.scene-sticker>span{font-size:24px}.stage-readout{bottom:8px}.scene:after{bottom:24px}.metronome{display:grid;grid-template-columns:auto minmax(78px,1fr) minmax(60px,1fr);align-items:center;column-gap:14px;row-gap:8px;padding:10px 13px;border-left:0;border-top:1px solid var(--line)}.control-caption,.tempo-note{display:none}.tempo-display{margin:0;gap:3px}.tempo-display>output{font-size:28px;letter-spacing:-1px}.tempo-display>span{font-size:7px}.tempo-display>button{margin-left:9px;padding:9px 8px;font-size:9px}.beat-indicator{margin:0;gap:5px}.beat-indicator>span{height:24px;font-size:9px}.tempo-slider{grid-column:1/-1;font-size:8px;gap:9px}.tempo-slider input{height:12px}.instrument-controls{padding:9px 12px}.instrument-select>span{font-size:8px}.instrument-select{gap:6px}select{font-size:9px;padding:7px 17px 7px 6px}.volume-control input{width:57px}.volume-control output{font-size:8px;min-width:24px}.playing-surface{padding:12px 11px 0}.mobile-hint{display:inline}.desktop-hint{display:none}.section-label{margin-bottom:9px}.melody-keys{height:100px;gap:3px;border-radius:5px 5px 8px 8px}.music-key{padding:0 1px 7px;border-bottom-width:4px}.music-key kbd{font-size:11px}.music-key .note-label{font-size:8px}.music-key .note-sub{display:none}.music-key.black,.music-key.black-key,.music-key[data-accidental=true]{width:7.5%;left:calc(var(--key-position,1)*12.5% - 3.75%);height:60%;padding-bottom:8px;border-radius:0 0 4px 4px}.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{display:none}.music-key.black kbd,.music-key.black-key kbd,.music-key[data-accidental=true] kbd{font-size:10px}.percussion-row{margin-top:12px;display:block}.drum-heading{display:flex;align-items:center;justify-content:space-between;width:auto;margin-bottom:8px}.drum-heading>span{margin:0;font-size:8px}.drum-pads{gap:6px}.drum-pad{justify-content:center;gap:8px;min-height:45px;padding:7px 5px}.drum-pad .pad-sub{display:none}.drum-pad .pad-label{font-size:9px}.drum-pad kbd{font-size:12px}.sound-status{font-size:8px;padding:10px 12px 12px}.score-book>summary{gap:8px}.score-book-icon{width:29px;height:31px;font-size:18px}.score-book>summary strong{font-size:10px}.score-book>summary small{font-size:8px}.score-book-open{font-size:8px}.score-book-open>span{font-size:16px}.score-toolbar{align-items:stretch}.score-toolbar>label{min-width:0;flex:1}.score-toolbar select{min-width:0;width:100%}.score-actions{gap:4px}.score-actions>button{font-size:9px;padding:8px}.song-info,.score-status{font-size:9px}.score-note{min-width:34px;padding:7px 5px;min-height:58px;font-size:11px}.score-note kbd{font-size:10px}.score-phrase{gap:4px}.closing-note{margin:22px 0}.closing-note p{font-size:9px}.credits{font-size:9px}.credits summary{font-size:8px}footer{font-size:7px}.footer-cat{font-size:11px}}
@media(max-width:350px){main{padding:0 10px}.site-header{padding:13px 14px}h1{font-size:23px}.metronome{column-gap:10px;grid-template-columns:auto minmax(72px,1fr) minmax(45px,1fr)}.tempo-display>button{margin-left:6px}.volume-control input{width:43px}.instrument-select>span{display:none}.drum-pad{gap:5px}.score-book-open{font-size:0}.score-book-open>span{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}.hit-left #paw-left,.left-down #paw-left{transform:translateY(13px)}.hit-right #paw-right,.right-down #paw-right{transform:translateY(13px)}.hit-left #hit-left,.hit-right #hit-right{opacity:1}}
/* The beat count stays semantic when the meter changes. */
.beat-indicator:has([data-beat="3"][hidden]){grid-template-columns:repeat(3,1fr)}.beat-indicator>[hidden]{display:none}.meter-controls{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:-3px 0 13px}.meter-controls select{font:500 9px/1.2 var(--mono);padding:5px 17px 5px 6px;background:#edf0e7}.meter-controls button{border:0;border-bottom:1px dotted #99a18a;background:none;padding:3px 0;color:#939c82;font-size:8px}.meter-controls button:active{color:var(--orange)}
@media(max-width:720px){.meter-controls{margin:-3px 0 9px}.meter-controls select{font-size:8px;padding:5px 13px 5px 4px}.meter-controls button{font-size:7px}}
@media(max-width:480px){.metronome{grid-template-columns:auto minmax(70px,1fr) auto;column-gap:11px}.meter-controls{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}.meter-controls select{font-size:8px;padding:4px 12px 4px 4px}.meter-controls button{font-size:7px;padding:0}.tempo-slider{grid-column:1/-1}}
.recording-strip{padding:11px 22px 13px;border-top:1px solid #e2e6d7;background:#f0f2e9}.recording-actions{display:flex;align-items:center;gap:7px}.recording-actions>button,.import-recording{display:flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d0d8c1;border-radius:5px;padding:7px 10px;background:#f8f9f1;font-size:9px;white-space:nowrap}.recording-actions>#recordToggle{border-color:#d9b69f;background:#f7e6d8;color:#a45b3a}.record-dot{display:inline-block;width:6px;height:6px;background:#c36742;border-radius:50%}#recordToggle[aria-pressed=true]{background:#d96340;color:#fff8ec;border-color:#d96340}#recordToggle[aria-pressed=true] .record-dot{background:#fff8ec}.import-recording{position:relative;cursor:pointer;color:#879475}.import-recording>input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.import-recording:focus-within{outline:3px solid #d9634080;outline-offset:3px}.import-recording>span{color:#a2ae8e}.recording-info{margin-left:auto;font:400 9px/1.3 var(--mono);color:#99a488}.recording-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px;font-size:8px;line-height:1.6;color:#a1ab94}.recording-meta>[role=status]{color:#818f70}.recording-meta>[role=status]:empty{display:none}
@media(max-width:720px){.recording-strip{padding:10px 13px 12px}.recording-actions{gap:5px}.recording-actions>button,.import-recording{font-size:8px;padding:7px}.recording-info{font-size:8px}.recording-meta{font-size:7px}}
@media(max-width:480px){.recording-actions{flex-wrap:wrap;gap:5px}.recording-actions>button,.import-recording{padding:7px 6px;font-size:8px}.recording-info{font-size:7px}.recording-meta{display:block;font-size:7px}.recording-meta>[role=status]{display:block;margin-top:2px}}
/* Readability pass: interaction labels remain readable on small screens. */
:root{--muted:#636d5b}
.about-link{font-size:12px;color:#59654f}.heading-note{font-size:13px;color:#68715f}.bench-topline{font-size:12px}.room-number{font-size:10px;color:#738067}.local-note{font-size:11px;color:#738067}.stage-readout{font-size:11px;color:#68755b}.stage-caption{font-size:10px;color:#7e896f}.control-caption{font-size:12px;color:#59654d}.tempo-display>span{font-size:11px;color:#78846a}.tempo-display>button{min-height:36px;font-size:12px;padding:8px 10px}.beat-indicator>span{height:30px;font-size:12px;color:#778667}.tempo-slider{font-size:10px;color:#718061;gap:7px}.tempo-slider input{height:25px}.meter-controls select{font-size:11px;padding:6px 17px 6px 7px;min-height:31px;color:#5e6e50}.meter-controls button{font-size:10px;min-height:31px;color:#667857}.instrument-select{font-size:12px;color:#66745b}.instrument-select select{font-size:12px;min-height:35px;padding-top:7px;padding-bottom:7px}.volume-control{font-size:12px;color:#68775c}.volume-control input{height:30px}.volume-control output{font-size:11px;color:#66745b;min-width:34px}.section-label h2,.drum-heading h2{font-size:13px}.section-label>span,.drum-heading>span{font-size:11px;color:#7a866d}.music-key kbd{font-size:15px;color:#4c6544}.music-key .note-label{font-size:11px;color:#7a856d}.music-key .note-sub{font-size:9px;color:#929d85}.music-key.black kbd,.music-key.black-key kbd,.music-key[data-accidental=true] kbd{font-size:13px;color:#fff8e5}.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{font-size:10px;color:#cad2bb}.drum-heading{width:145px}.drum-pad{min-height:57px;gap:10px}.drum-pad kbd{font-size:15px;color:#4b6342}.drum-pad .pad-label{font-size:12px;color:#536247}.drum-pad .pad-sub{font-size:9px;color:#7b886d}.sound-status{font-size:11px;color:#7b886d;line-height:1.7}.recording-actions>button,.import-recording{font-size:12px;min-height:37px;padding:8px 10px}.recording-actions{gap:8px}.recording-info{font-size:11px;color:#728260}.recording-meta{font-size:11px;line-height:1.7;color:#7d8a6f}.recording-meta>[role=status]{color:#5a724a}.import-recording{color:#677d54}.score-book>summary strong{font-size:14px;color:#56674a}.score-book>summary small{font-size:11px;color:#7b896c}.score-book-open{font-size:12px;color:#6c7e5b}.score-toolbar select{font-size:12px;min-height:38px}.score-actions>button{font-size:12px;min-height:38px}.song-info,.score-status{font-size:11px;color:#768568}.score-note{font-size:15px;min-width:47px}.score-note kbd{font-size:13px}.score-note small,.score-note .duration{font-size:10px}.closing-note p{font-size:12px}.closing-note strong{color:#8a9879}.credits{font-size:11px;color:#7b886d}.credits summary{font-size:11px;color:#849371}footer{font-size:9px}footer>a{font-size:11px}
@media(max-width:720px){.bench-topline{font-size:11px}.room-number{font-size:9px}.local-note{font-size:10px}.stage-readout{font-size:10px}.control-caption{font-size:11px}.tempo-display>button{font-size:11px;min-height:34px;padding:7px 8px}.tempo-display>span{font-size:10px}.metronome{padding:13px}.beat-indicator{margin:10px 0}.beat-indicator>span{font-size:11px;height:28px}.meter-controls{margin:0 0 7px;gap:5px}.meter-controls select{font-size:10px;min-height:30px}.meter-controls button{font-size:9px;min-height:30px}.tempo-slider{font-size:9px}.tempo-slider input{height:24px}.instrument-select{font-size:11px}.instrument-select select{font-size:11px;min-height:35px}.volume-control output{font-size:11px}.section-label h2,.drum-heading h2{font-size:12px}.section-label>span,.drum-heading>span{font-size:10px}.music-key kbd{font-size:14px}.music-key .note-label{font-size:10px}.music-key.black kbd,.music-key.black-key kbd,.music-key[data-accidental=true] kbd{font-size:13px}.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{font-size:9px}.drum-heading{width:130px}.drum-pad{min-height:55px;padding:8px}.drum-pad kbd{font-size:14px}.drum-pad .pad-label{font-size:11px}.drum-pad .pad-sub{font-size:8px}.sound-status{font-size:10px}.recording-actions{gap:6px}.recording-actions>button,.import-recording{font-size:11px;min-height:37px;padding:8px}.recording-info{font-size:10px}.recording-meta{font-size:10px}.score-book>summary strong{font-size:13px}.score-book>summary small{font-size:11px}.score-book-open{font-size:11px}.score-actions>button{font-size:11px}.song-info,.score-status{font-size:11px}.score-note{font-size:14px}.score-note kbd{font-size:12px}.credits{font-size:11px}.credits summary{font-size:10px}}
@media(max-width:480px){.performance-row{display:block}.metronome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:12px;row-gap:8px;padding:10px 12px}.tempo-display{grid-column:1;grid-row:1;gap:4px}.tempo-display>output{font-size:32px}.tempo-display>span{font-size:10px}.tempo-display>button{margin-left:auto;font-size:12px;min-height:36px;padding:7px 8px}.beat-indicator{grid-column:2;grid-row:1;margin:0;gap:5px}.beat-indicator>span{height:28px;font-size:12px}.meter-controls{grid-column:1;grid-row:2;flex-direction:row;justify-content:space-between;gap:7px;margin:0}.meter-controls select{font-size:11px;min-height:32px;padding:5px 14px 5px 5px}.meter-controls button{font-size:10px;min-height:32px}.tempo-slider{grid-column:2;grid-row:2;gap:0}.tempo-slider>span:not(.sr-only){display:none}.tempo-slider input{height:32px}.instrument-controls{padding:9px 12px}.instrument-select{font-size:11px;gap:7px}.instrument-select select{font-size:11px;min-height:35px;max-width:175px}.volume-control input{height:32px;width:48px}.volume-control output{font-size:11px;min-width:30px}.section-label h2,.drum-heading h2{font-size:12px}.section-label>span,.drum-heading>span{font-size:10px}.melody-keys{height:112px}.music-key kbd{font-size:14px}.music-key .note-label{font-size:10px}.music-key.black kbd,.music-key.black-key kbd,.music-key[data-accidental=true] kbd{font-size:12px}.drum-heading{width:auto}.drum-pad{min-height:52px;gap:8px;padding:9px 6px}.drum-pad kbd{font-size:14px}.drum-pad .pad-label{font-size:11px}.sound-status{font-size:10px;line-height:1.7}.recording-actions{gap:7px;flex-wrap:wrap}.recording-actions>button,.import-recording{font-size:12px;min-height:38px;padding:8px 10px}.recording-info{margin-left:0;font-size:11px}.recording-meta{font-size:10px;line-height:1.8}.score-book>summary strong{font-size:12px}.score-book>summary small{font-size:10px}.score-book-open{font-size:10px}.score-toolbar select{font-size:11px;min-height:38px}.score-actions>button{font-size:11px;min-height:38px}.score-note{min-width:39px;font-size:14px;padding:8px 5px}.score-note kbd{font-size:12px}.score-note small{font-size:10px}.closing-note p{font-size:11px}.credits{font-size:11px}.credits summary{font-size:10px}footer{font-size:8px}footer>a{font-size:11px}}
@media(max-width:350px){.instrument-select>span{display:none}.instrument-select select{max-width:166px}.tempo-display>button{font-size:11px;padding:7px 6px}.tempo-display>output{font-size:29px}.tempo-display>span{font-size:9px}.meter-controls button{font-size:9px}.beat-indicator{gap:4px}.beat-indicator>span{font-size:11px}.drum-pad{gap:6px;padding:8px 4px}.drum-pad .pad-label{font-size:10px}.recording-actions{gap:6px}.recording-actions>button,.import-recording{padding:8px;font-size:12px}.score-book-open{font-size:0}.score-book-open>span{font-size:20px}}
/* Secondary functional text: >=4.5:1 on both the paper and cream surfaces. */
.about-link,.heading-note,.local-note,.room-number,.stage-readout,.control-caption,.tempo-display>span,.tempo-slider,.meter-controls button,.instrument-select,.volume-control,.volume-control output,.section-label>span,.drum-heading>span,.music-key .note-label,.music-key .note-sub,.drum-pad .pad-sub,.sound-status,.recording-info,.recording-meta,.import-recording,.score-book>summary small,.score-book-open,.song-info,.score-status,.score-note small,.score-note .duration,.credits,.credits summary{color:#636d5b}
.music-key.black .note-label,.music-key.black-key .note-label,.music-key[data-accidental=true] .note-label{color:#cad2bb}.sound-status.error{color:#a1412c}.beat-indicator>span:not(.active):not(.on):not([aria-current=true]){color:#636d5b}

.export-preview{margin-top:14px;font-size:12px;color:#46523d}.export-preview[hidden]{display:none}.export-preview summary{cursor:pointer;padding:8px 0}.export-preview label{display:block;font-size:11px;line-height:1.8}.export-preview textarea{display:block;width:100%;resize:vertical;margin-top:8px;background:#faf8f1;border:1px solid #b4bea6;border-radius:6px;padding:10px;color:#36432d;font:12px/1.7 monospace}

/* Instrument-specific surfaces share physical keyboard locations. */
[hidden]{display:none!important}.scene-guitar,.scene-drums{display:none}.scene[data-instrument=guitar] .scene-keyboard,.scene[data-instrument=drums] .scene-keyboard{display:none}.scene[data-instrument=guitar] .scene-guitar,.scene[data-instrument=drums] .scene-drums{display:block}
.guitar-chords{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.guitar-chords h2{font-size:14px;margin:0}.guitar-chords p{font-size:11px;color:var(--muted);line-height:1.7;margin:7px 0 0}.chord-pads{display:grid;grid-template-columns:repeat(4,minmax(54px,1fr));gap:8px;min-width:55%}.chord-pad{display:flex;align-items:center;justify-content:center;gap:10px;background:#f4e2c7;border:1px solid #d4b78b;border-bottom:4px solid #c5a478;border-radius:8px;padding:12px 9px;min-height:57px;touch-action:none;user-select:none}.chord-pad kbd{font:12px var(--mono);color:#806b4a}.chord-pad strong{font-size:20px}.chord-pad small{font-size:10px;color:#806b4a}.chord-pad.active{transform:translateY(3px);border-bottom-width:1px;background:#edcc96}
.sound-ready{display:flex;align-items:center;padding:12px 22px;gap:12px}.sound-ready button{flex:none;border:1px solid #758570;border-radius:6px;background:#e9edde;color:#354632;font-size:12px;padding:9px 12px;min-height:38px}.sound-ready .sound-status{padding:0;font-size:11px}.sound-ready button:disabled{opacity:.6}.drum-pads{grid-template-columns:repeat(4,minmax(0,1fr))}.playing-surface[data-instrument=drums] .percussion-row{align-items:stretch;margin-top:0}.playing-surface[data-instrument=drums] .drum-pad{min-height:80px}.playing-surface[data-instrument=drums] .drum-pad .pad-label{font-size:14px}.playing-surface[data-instrument=drums] .drum-pad:nth-child(-n+2){--pad:#efdcc5;--pad-border:#d3b698}.playing-surface[data-instrument=drums] .drum-pad:nth-child(3),.playing-surface[data-instrument=drums] .drum-pad:nth-child(4),.playing-surface[data-instrument=drums] .drum-pad:nth-child(n+7){--pad:#eee5c5;--pad-border:#cec295}
@media(max-width:720px){.guitar-chords{display:block}.chord-pads{margin-top:12px;gap:6px}.chord-pad{gap:6px;padding:10px 6px}.chord-pad small{display:none}.sound-ready{padding:12px 13px;gap:9px}.sound-ready .sound-status{font-size:10px}}
@media(max-width:480px){.playing-surface[data-instrument=drums] .drum-pad{min-height:73px}.playing-surface[data-instrument=drums] .drum-pad .pad-label{font-size:12px}.playing-surface[data-instrument=drums] .drum-heading{margin-bottom:10px}.drum-pads{gap:6px}.drum-pad{gap:6px}.drum-pad .pad-sub{font-size:7px}.chord-pad strong{font-size:19px}.guitar-chords p{font-size:10px}}

.drum-guide{background:#f1f2e7;border-left:3px solid #8d9b76;padding:12px 15px;margin-bottom:17px;border-radius:0 7px 7px 0}.drum-guide strong{font-size:12px}.drum-guide p{font-size:11px;color:var(--muted);line-height:1.8;margin:6px 0 0}

/* A scrollable physical keyboard keeps accidentals large enough to touch. */
.instrument-controls{flex-wrap:wrap;gap:10px 18px}.instrument-select{margin-right:auto}.performance-toggle{flex:none;min-height:44px;padding:9px 14px;border:1px solid #829272;border-radius:7px;background:#e5ebd9;color:#35482c;font-size:12px;font-weight:600;white-space:nowrap}.performance-toggle[aria-pressed=true]{background:#35482c;color:#fffcef;border-color:#35482c}.performance-status{flex-basis:100%;font-size:11px;line-height:1.6;color:#536348}.performance-status:empty{display:none}.melody-scroll{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#8d9b7f #e9ecdf;scrollbar-width:thin;border-radius:8px;padding-bottom:3px}.melody-scroll:focus-visible{outline:3px solid #d9634080;outline-offset:3px}.keyboard-scroll-hint{display:none}.playing-surface[data-instrument=drums] .melody-scroll,.playing-surface[data-instrument=drums] .keyboard-scroll-hint{display:none}
@media(max-width:720px),(pointer:coarse){
  .instrument-controls{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;gap:8px;padding:10px 12px}.instrument-select{min-width:0;margin:0}.instrument-select>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.instrument-select select{width:100%;max-width:none;min-height:44px;font-size:12px;padding-left:8px}.volume-control{min-width:0;gap:4px}.volume-control .volume-icon{display:none}.volume-control input{width:42px;height:44px}.volume-control output{min-width:30px;font-size:12px}.performance-toggle{min-height:44px;padding:9px 10px;font-size:12px}.performance-status{grid-column:1/-1;font-size:11px}
  .melody-scroll{touch-action:pan-x;scroll-padding-inline:4px}.melody-keys{width:100%;min-width:640px;height:142px;gap:5px;padding:0 4px 4px;border-width:4px;border-top-width:8px;touch-action:pan-x}.music-key{min-width:52px;touch-action:pan-x;padding-bottom:12px;gap:5px}.music-key kbd{font-size:16px}.music-key .note-label{font-size:12px}.music-key.black,.music-key.black-key,.music-key[data-accidental=true]{min-width:44px;width:7%;left:calc(var(--key-position,1)*12.5% - 3.5%);height:62%;padding-bottom:12px}.music-key.black kbd,.music-key.black-key kbd,.music-key[data-accidental=true] kbd{font-size:14px}.keyboard-scroll-hint{display:block;margin:6px 0 0;font-size:11px;line-height:1.6;color:#536348;text-align:center}.mobile-hint{display:inline;font-size:11px}.desktop-hint{display:none}
  .percussion-row{display:block}.drum-heading{display:flex;justify-content:space-between;align-items:center;width:auto;margin-bottom:9px}.drum-heading>span{margin:0}.drum-pads{gap:7px}.drum-pad{min-height:62px;justify-content:center;padding:10px 6px;gap:7px}.drum-pad kbd{font-size:15px}.drum-pad .pad-label{font-size:12px}.drum-pad .pad-sub{display:none}.chord-pad{min-height:60px}.chord-pad kbd{font-size:13px}.recording-actions>button,.import-recording{min-height:44px;font-size:12px}.recording-actions{flex-wrap:wrap}.recording-meta{font-size:11px}.sound-ready button{min-height:44px}
}
/* Page immersion also works when iOS cannot enter native element fullscreen. */
body.performance-mode{overflow:hidden;overscroll-behavior:none;background:var(--cream)}body.performance-mode>.site-header,body.performance-mode>footer,body.performance-mode main>:not(.workbench){display:none!important}body.performance-mode main{max-width:none;width:100%;margin:0;padding:0}body.performance-mode .workbench{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);scroll-padding-top:64px}body.performance-mode .bench-topline{min-height:56px;padding-top:12px;padding-bottom:12px;padding-right:130px}body.performance-mode .local-note{display:none}body.performance-mode #performanceExit{position:fixed;top:calc(env(safe-area-inset-top,0px) + 6px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:20;min-width:105px;box-shadow:0 2px 8px #2d3a2515}body.performance-mode .instrument-controls{position:sticky;top:0;z-index:10;background:var(--cream);grid-template-columns:minmax(0,1fr) 90px;box-shadow:0 2px 8px #2d3a2508}body.performance-mode .performance-status{max-width:100%}body.performance-mode .scene{height:165px}body.performance-mode .cat-scene{height:170px;width:100%;left:0;bottom:5px}body.performance-mode .metronome{padding-top:12px;padding-bottom:12px}body.performance-mode .tempo-display{margin-top:8px}body.performance-mode .beat-indicator{margin-top:9px;margin-bottom:9px}body.performance-mode .recording-strip{padding-bottom:16px}body.performance-mode .playing-surface{padding-top:12px}body.performance-mode .sound-ready{padding-top:9px;padding-bottom:9px}
@media(max-width:480px){body.performance-mode .scene{height:135px}body.performance-mode .cat-scene{height:145px}body.performance-mode .tempo-display,body.performance-mode .beat-indicator{margin:0}body.performance-mode .instrument-controls{grid-template-columns:minmax(0,1fr) 90px}body.performance-mode .volume-control input{width:55px}}
/* Short landscape screens reserve the visible area for the selected instrument. */
@media(orientation:landscape) and (max-height:550px){
  body.performance-mode .bench-topline{min-height:54px;padding-top:9px;padding-bottom:9px}body.performance-mode .performance-row{display:grid;grid-template-columns:155px minmax(0,1fr)}body.performance-mode .scene{height:104px}body.performance-mode .cat-scene{height:112px;bottom:0}body.performance-mode .scene-sticker{display:none}body.performance-mode .stage-readout{font-size:10px;left:8px;right:6px;bottom:3px}body.performance-mode .metronome{display:grid;grid-template-columns:minmax(145px,1fr) minmax(95px,1fr);gap:5px 14px;padding:7px 14px;border-top:0;border-left:1px solid var(--line)}body.performance-mode .control-caption,body.performance-mode .tempo-note{display:none}body.performance-mode .tempo-display{grid-column:1;grid-row:1;margin:0;gap:5px}body.performance-mode .tempo-display>output{font-size:31px}body.performance-mode .tempo-display>button{font-size:12px;min-height:36px;margin-left:auto}body.performance-mode .beat-indicator{grid-column:2;grid-row:1;margin:0;gap:5px}body.performance-mode .beat-indicator>span{height:28px;font-size:12px}body.performance-mode .meter-controls{grid-column:1;grid-row:2;display:flex;flex-direction:row;margin:0;gap:10px}body.performance-mode .meter-controls select,body.performance-mode .meter-controls button{min-height:32px;font-size:11px}body.performance-mode .tempo-slider{grid-column:2;grid-row:2;gap:0}body.performance-mode .tempo-slider>span:not(.sr-only){display:none}body.performance-mode .tempo-slider input{height:32px}
  body.performance-mode .instrument-controls{display:flex;flex-wrap:wrap;padding:6px 14px;gap:7px 18px}body.performance-mode .instrument-select>span{position:static;width:auto;height:auto;clip:auto;font-size:12px}body.performance-mode .instrument-select select{min-height:38px;font-size:12px;width:auto}body.performance-mode .volume-control input{height:38px;width:80px}body.performance-mode .playing-surface{padding:9px 14px 0}body.performance-mode .section-label{margin-bottom:6px}body.performance-mode .melody-keys{height:127px;min-width:640px}body.performance-mode .melody-scroll{overflow-x:auto}body.performance-mode .keyboard-scroll-hint{display:none}body.performance-mode .playing-surface:not([data-instrument=drums]) .percussion-row{display:none}body.performance-mode .guitar-chords{display:flex;align-items:center;margin-bottom:10px;gap:15px}body.performance-mode .guitar-chords p{margin:3px 0 0;font-size:11px}body.performance-mode .chord-pads{margin:0;min-width:55%}body.performance-mode .chord-pad{min-height:56px}body.performance-mode .drum-guide{display:none}body.performance-mode .playing-surface[data-instrument=drums] .percussion-row{display:block}body.performance-mode .playing-surface[data-instrument=drums] .drum-pad{min-height:64px}body.performance-mode .recording-strip{padding:8px 14px 12px}body.performance-mode .recording-actions{flex-wrap:wrap}body.performance-mode .recording-actions>button,body.performance-mode .import-recording{min-height:40px;font-size:12px}body.performance-mode .sound-ready{padding:7px 14px}
}
/* Leave the pinned exit button a clear lane when the toolbar sticks on scroll. */
body.performance-mode .instrument-controls{padding-right:130px}
body.performance-mode .instrument-controls{top:env(safe-area-inset-top,0px)}
@media(orientation:landscape) and (max-height:550px){body.performance-mode .stage-caption{display:none}body.performance-mode #nowPlaying{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}body.performance-mode .stage-readout{gap:4px}body.performance-mode .bench-topline{min-height:50px}}
@media(orientation:landscape) and (max-height:550px){body.performance-mode .playing-surface[data-instrument=drums] .drum-heading{display:none}}