:root{--site-ink:#252525;--site-muted:#737373;--site-line:#e4e4e4;--site-active:#87998a}body{font-family:Roboto,Arial,sans-serif;color:var(--site-ink);background:#fff;margin:0}.site-header{position:relative;z-index:100;background:#fff;border-bottom:1px solid var(--site-line)}.site-header .site-nav{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 40px;max-width:1120px;margin:auto;padding:26px 24px;min-height:78px;font-family:Roboto,Arial,sans-serif;border:0}.site-header .site-nav a{display:inline-block;font-size:16px;font-weight:400;color:#484848!important;text-decoration:none!important;padding:4px 0 6px;border-bottom:1px solid transparent;line-height:1.4}.site-header .site-nav a[aria-current="page"],.site-header .site-nav a:hover{color:#000!important;border-bottom-color:#252525}.site-nav a:focus-visible,.site-footer a:focus-visible{outline:2px solid #626b63;outline-offset:5px}.site-footer{margin-top:48px;border-top:1px solid var(--site-line);padding:34px 24px 40px;text-align:center;font:400 13px/1.8 Roboto,Arial,sans-serif;color:var(--site-muted)}.site-footer p{margin:0 0 12px}.site-footer .footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px}.site-footer a{color:#484848!important;text-decoration:none!important;border-bottom:1px solid transparent}.site-footer a:hover{border-bottom-color:#777}#rec2067969641,#rec2068140751,#rec962537911{display:none!important}.tools-page main{max-width:1120px}.tools-page main>header{padding:65px 0 44px}.tools-page h1{font-family:Roboto,Arial,sans-serif;font-size:clamp(34px,5vw,48px);font-weight:400;letter-spacing:-.5px;line-height:1.2;margin:20px 0}.tools-page .intro{font-weight:300;color:#666;font-size:18px;line-height:1.7}.tools-page .eyebrow{font-size:11px;letter-spacing:2.5px}.tools-page .editor{border-color:var(--site-line);border-radius:0}.tools-page button{font-family:inherit;border-radius:0;border-color:#ccc}.tools-page .primary{background:#252525;border-color:#252525;color:white;font-weight:400}.tools-page .primary:hover{background:#444}.tools-page .bpm-controls button{border-radius:50%}.tools-page h2{font-family:inherit;font-weight:400}.tools-page .tool-links{gap:16px 32px}.tools-page .tool-links a{font-size:14px}.tools-page .site-footer{margin-left:-28px;margin-right:-28px}.story-listen button{font-family:Roboto,Arial,sans-serif!important}#audio-feed>button{font-family:Roboto,Arial,sans-serif;border-radius:0;border:1px solid #ccc;background:white;color:#252525;padding:12px 24px;cursor:pointer}@media(max-width:600px){.site-header .site-nav{gap:12px 22px;min-height:70px;padding:20px 14px}.site-header .site-nav a{font-size:13px}.tools-page main>header{padding:42px 0 30px}.tools-page .intro{font-size:16px}.site-footer{padding:26px 16px 32px}.tools-page .site-footer{margin-left:-16px;margin-right:-16px}}

/* Shared navigation owns its spacing independently of page header styles. */
.site-header{box-sizing:border-box;margin:0;padding:0;text-align:center;width:100%;height:auto;min-height:0}
.site-header .site-nav,.site-header .site-nav a{box-sizing:border-box}
.site-header .site-nav{min-height:56px;padding:10px 24px;gap:8px 32px;line-height:1.4}
.site-header .site-nav a{font:400 14px/20px Roboto,Arial,sans-serif;padding:5px 0}
.tools-page button,.tools-page input,.tools-page select{-webkit-appearance:none;appearance:none;font-family:Roboto,Arial,sans-serif}
.tools-page input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox}
.tools-page input[type=range]{appearance:auto;-webkit-appearance:auto}
.tools-page #play{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:44px;padding:11px 20px;font:400 14px/20px Roboto,Arial,sans-serif;color:#fff;background:#252525;border:1px solid #252525;border-radius:0}
.tools-page #play::before{content:"";display:block;flex-shrink:0;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.tools-page #play[aria-pressed=true]::before{width:9px;height:9px;border:0;background:currentColor}
#rec1034613796 .t-btnflex.t-btnflex_type_button{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;height:auto!important;min-height:44px!important;padding:11px 24px!important;border:1px solid #252525!important;border-radius:0!important;background:#fff!important;color:#252525!important;font:400 14px/20px Roboto,Arial,sans-serif!important;--border-width:1px}
#rec1034613796 .t-btnflex__text{display:inline-flex;align-items:center;gap:10px;font:inherit!important}
#rec1034613796 .listen-arrow{width:14px;height:14px;flex-shrink:0}
@media(max-width:600px){.site-header .site-nav{min-height:52px;padding:8px 12px;gap:6px 16px}.site-header .site-nav a{font-size:12px;line-height:20px;padding:5px 0}}

.site-footer .footer-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 16px;box-sizing:border-box;border:1px solid #ddd;font:400 13px/20px Roboto,Arial,sans-serif;color:#484848!important;background:#fff;border-radius:0}
.site-footer .footer-links a:hover{background:#f6f6f6;border-color:#888}
.external-arrow{width:13px;height:13px;flex-shrink:0}
#audio-feed .feed-intro a{color:#484848!important;text-decoration:none;display:inline;line-height:1.8;border-bottom:1px solid #aaa;padding:2px 0}
#audio-feed .feed-intro a:hover{color:#000!important;border-bottom-color:#252525}
#audio-feed a:focus-visible{outline:2px solid #626b63;outline-offset:4px}
.notation-choice{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:400 13px/1.5 Roboto,Arial,sans-serif;color:#666}
.notation-choice select{max-width:100%;font:400 13px/20px Roboto,Arial,sans-serif;background:#fff;color:#252525;border:1px solid #ccc;border-radius:0;padding:10px 28px 10px 12px;appearance:auto;-webkit-appearance:menulist}
.notation-choice select:focus-visible{outline:2px solid #626b63;outline-offset:3px}
@media(max-width:600px){.notation-choice{width:100%;gap:8px}.notation-choice select{width:100%}.site-footer .footer-links{gap:10px}}
#notation{width:100%;min-width:850px}#notation>svg{display:block;width:100%;height:auto}#notation-status:empty{display:none}.tools-page #notation-status{margin:12px 0;font-size:12px}

.mobile-grid{display:none}
@media(max-width:600px){
 .tools-page main{padding:0 12px}.tools-page main>header{padding:28px 0 24px}.tools-page .editor{padding:16px 12px}.tools-page .desktop-grid{display:none}
 .mobile-grid{display:grid;gap:16px}.beat-card{border-top:1px solid #e4e4e4;padding-top:12px}.beat-card h3{font:400 14px/20px Roboto,Arial,sans-serif;margin:0 0 8px;color:#666}
 .beat-grid{display:grid;grid-template-columns:76px repeat(4,minmax(0,1fr));gap:5px}.beat-grid .cell{height:44px;min-width:0;font-size:16px;touch-action:manipulation}.beat-grid .step-label{font-size:12px;padding:2px 0 6px}.beat-grid .row-label{font-size:12px;line-height:1.4}
 .tools-page .toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;margin-bottom:18px}.tools-page #play{min-width:0;width:100%;min-height:44px}.tools-page .tempo{gap:6px;font-size:12px;justify-content:flex-end}.tools-page .tempo input{font-size:16px;min-height:44px;width:64px}.tools-page .tempo span{font-size:11px}
 .tools-page .kit-control{grid-column:1/-1;display:grid;grid-template-columns:76px 1fr;gap:8px}.tools-page .kit-control select{width:100%;min-width:0;min-height:44px;font-size:16px}.tools-page .metronome-control{font-size:13px}.tools-page #clear{min-height:44px;margin:0;width:100%}.tools-page .meter{grid-column:1/-1;order:0;width:auto;margin:0;font-size:12px}
 .tools-page .notation-heading{gap:16px;padding-top:22px}.tools-page .notation-choice select{font-size:16px;min-height:44px;white-space:normal}.tools-page .score{overflow:visible;margin-top:12px}#notation{min-width:0;width:100%}#notation>svg{min-width:0;max-width:100%;height:auto}.tools-page .legend{gap:10px 18px;line-height:1.6}.tools-page .site-footer{margin-left:-12px;margin-right:-12px}.tools-page .hint{margin:16px 0 24px}
}
/* A phone in landscape has enough width for the full bar, fitted to the viewport. */
@media (orientation:landscape) and (min-width:601px) and (max-width:1100px) and (max-height:600px) and (pointer:coarse){
 .tools-page main{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
 .tools-page main>header{padding:22px 0 20px}.tools-page h1{font-size:32px;margin:12px 0}.tools-page .eyebrow{margin:8px 0}.tools-page .intro{margin:10px 0}.tools-page .tool-links{margin-top:12px}
 .tools-page .editor{padding:16px 12px}.tools-page .toolbar{gap:12px 16px;margin-bottom:18px}.tools-page .desktop-grid{display:block;overflow:visible}.tools-page .mobile-grid{display:none}
 .tools-page .grid{min-width:0;width:100%;grid-template-columns:84px repeat(16,minmax(0,1fr));gap:4px}.tools-page .grid .cell{height:40px;min-width:0;font-size:14px;touch-action:manipulation}.tools-page .grid .row-label{font-size:11px;line-height:1.35}.tools-page .grid .step-label{font-size:11px;padding-bottom:8px}.tools-page .grid .beat-label{font-size:13px}
 .tools-page .score{overflow:visible;margin-top:10px}.tools-page #notation{min-width:0;width:100%}.tools-page #notation>svg{min-width:0;width:100%;max-width:100%;height:auto}
 .tools-page .notation-heading{padding-top:18px;gap:12px}.tools-page .notation-heading h2{font-size:18px}.tools-page .notation-choice{gap:8px}.tools-page .notation-choice select,.tools-page .sound select,.tools-page .tempo input{font-size:16px}
 .tools-page .hint{margin:16px 0 22px}.tools-page .legend{gap:12px 20px}.tools-page .site-footer{margin-left:0;margin-right:0}
}

/* Keep the variable meter and subdivision controls within narrow phone screens. */
@media(max-width:600px){
 .tools-page .toolbar>*,.tools-page .division-setting{min-width:0}
 .tools-page .meter-control{grid-column:1/-1;display:grid;grid-template-columns:76px 56px 12px minmax(60px,1fr);gap:8px;align-items:center;font-size:14px}
 .tools-page .meter-control input,.tools-page .meter-control select{width:100%;min-width:0;min-height:44px;margin:0;font-size:16px;color:#333}
 .tools-page .meter-control select{padding:8px 10px}
 .tools-page .metronome-control{grid-column:1;gap:8px;white-space:nowrap;font-size:13px}
 .tools-page .metronome-control input{flex:none;margin:0;width:18px;height:18px}
 .tools-page #clear{grid-column:2}
 .tools-page .division-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:100%}
 .tools-page .division-setting{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px;width:100%;font-size:12px;line-height:1.4}
 .tools-page .division-setting select{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:44px;padding:8px 10px;margin:0;color:#333;background-color:#fff;font:400 16px/1.3 Roboto,Arial,sans-serif;border-radius:3px}
}

.app-install{margin:24px 0;padding:16px 0;border-top:1px solid #e8e8e8;color:#666;font-size:13px;line-height:1.7}.app-install summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0}.app-install p{max-width:640px;margin:10px 0}.app-install[hidden],.app-install button[hidden]{display:none}.app-install button{min-height:44px;font-size:14px}.app-install summary:focus-visible{outline:2px solid #87998a;outline-offset:3px}@media(display-mode:standalone){.app-install{display:none}.tools-page{padding-bottom:env(safe-area-inset-bottom)}}
.editor-mode{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:24px}.mode-switch{display:inline-flex;max-width:100%;border:1px solid #ccc;border-radius:4px;overflow:hidden}.mode-switch button{border:0;border-radius:0;min-height:44px;padding:10px 18px;background:#fff;color:#666;font-size:14px}.mode-switch button+button{border-left:1px solid #ccc}.mode-switch button[aria-pressed=true]{background:#303a32;color:white}.mode-switch button:focus-visible{outline-offset:-3px}.accent-choice{display:flex;align-items:center;gap:8px;font-size:13px;color:#666;min-height:44px}.accent-choice input{width:18px;height:18px;margin:0;accent-color:#526b57}.editor[data-mode=simple] .advanced-only,.editor[data-mode=advanced] .simple-only{display:none!important}#simple-context{margin:0 0 20px}#simple-context[hidden]{display:none}@media(max-width:600px){.editor-mode{align-items:flex-start;gap:10px;margin-bottom:18px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.mode-switch button{padding:10px 8px}.editor[data-mode=simple] #clear{grid-column:1/-1;width:auto;justify-self:start;min-width:120px}}

.editor[data-mode=simple][data-hat-extras=false] .hat-extra{display:none!important}.row-label{line-height:1.3}

.editor[data-mode=simple][data-kit-extras=false] .kit-extra{display:none!important}

.cell[data-value="3"]{background:#edf2ee;border:1px dashed #87998a;color:#526b57;font-size:12px}

/* Keep the zoom control fixed while the large score scrolls underneath it. */
.tools-page .score-panel{position:relative;min-width:0;padding-top:44px;--score-readable-width:1120px}
.tools-page .score-zoom{position:absolute;top:0;right:0;width:44px;height:44px;padding:9px;display:flex;align-items:center;justify-content:center}
.score-zoom svg{width:24px;height:24px;display:block}
.tools-page #score-viewport{overflow-x:auto;max-width:100%;margin-top:4px}
.tools-page #score-panel[data-zoom=fit] #notation{width:100%;min-width:0}
.tools-page #score-panel[data-zoom=large] #notation{width:max(100%,var(--score-readable-width));min-width:var(--score-readable-width)}
.tools-page #score-panel #notation>svg{display:block;width:100%;max-width:100%;min-width:0;height:auto}
@media(max-width:600px), (orientation:landscape) and (pointer:coarse) and (max-width:1100px) and (max-height:600px){.tools-page .score-panel{--score-readable-width:560px}}

.edit-tools{margin-bottom:18px}.editor-mode .sound{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.editor-mode select{padding:10px;min-height:44px;font:inherit;border:1px solid #ccc;background:#fff}@media(max-width:600px){.editor-mode .sound{width:100%;justify-content:space-between}.editor-mode select{font-size:16px}}

 .tools-page .row-label.instrument-label{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:3px 0;min-height:44px;white-space:normal}.tools-page .instrument-label button{font-size:11px;line-height:1.2;padding:5px 7px;min-height:26px;border:1px solid #ccc;border-radius:3px;color:#555}.tools-page .instrument-label button[aria-pressed=true]{background:#303a32;color:#fff;border-color:#303a32}.editor[data-mode=simple] .solo-button{display:none}

.editor [data-track-hidden=true]{display:none!important}.instrument-picker{margin:0 0 20px;border:1px solid #ddd;border-radius:4px;padding:12px}.instrument-picker summary{cursor:pointer;min-height:28px;font-size:14px}.instrument-options{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}.instrument-options label{display:flex;align-items:center;gap:8px;font-size:13px;min-height:36px}.instrument-options input{width:18px;height:18px;accent-color:#526b57}.instrument-picker .hint{margin:12px 0 0}
.tools-page [hidden]{display:none!important}.workspace-tabs{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.workspace-tabs button[aria-selected=true]{background:#303a32;color:white;border-color:#303a32}.sequence-add{margin-top:18px}.sequence-add p{font-size:13px;color:#666}.sequence-panel{border:1px solid #ddd;padding:24px}.sequence-title{display:flex;align-items:center;gap:12px;margin:20px 0}.sequence-title input{flex:1;min-width:0}.sequence-panel input,.sequence-panel select{font:inherit;padding:9px;border:1px solid #ccc;border-radius:3px;max-width:100%}.sequence-toolbar,.sequence-item-controls,.pdf-settings{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.sequence-toolbar label{font-size:13px}.sequence-toolbar input[type=number],.sequence-item-controls input{width:65px}.sequence-item{border-top:1px solid #ddd;padding:20px 8px}.sequence-item[data-active=true]{background:#f0f4f0;border-left:3px solid #526b57}.sequence-item h3{font-weight:400;margin:0 0 12px}.sequence-item>input{width:100%;max-width:420px;margin-bottom:12px}.sequence-item-controls{font-size:13px}.sequence-item details{margin-top:16px}.sequence-item summary,.sequence-export summary{cursor:pointer;min-height:32px}.sequence-score{margin-top:12px;width:100%}.sequence-export{border-top:1px solid #ddd;padding-top:20px}.pdf-settings{margin-top:16px;align-items:flex-end}.pdf-settings label{display:flex;flex-direction:column;gap:8px;font-size:13px}#sequence-status{font-size:13px;color:#555;min-height:20px}@media(max-width:600px){.sequence-panel{padding:18px 12px}.workspace-tabs button{flex:1;padding:12px 8px;font-size:13px}.sequence-toolbar>button{width:100%}.sequence-item-controls button{min-height:44px}.sequence-panel input,.sequence-panel select{font-size:16px}.pdf-settings label,.pdf-settings button{width:100%}}

.dynamics-help{margin:-6px 0 20px;padding:12px 14px;border-left:3px solid #526b57;background:#f3f6f3;font-size:13px;line-height:1.6}.dynamics-help p{margin:0 0 10px}.dynamics-help button{min-height:44px}.dynamics-help #dynamics-feedback:empty{display:none}.dynamics-help #dynamics-feedback{margin:10px 0 0}.editor[data-edit-tool=dynamics] .cell[data-value="0"]{cursor:help;background:#f4f4f4}

.dynamics-toast{position:fixed;z-index:30;bottom:20px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:520px;padding:14px 16px;background:#fff;border:1px solid #c8d2c9;border-radius:4px;box-shadow:0 4px 24px #0002}.dynamics-toast>div{display:flex;gap:10px;flex-wrap:wrap}.dynamics-help .dynamics-toast #dynamics-feedback{margin:0 0 12px}