:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f8fafc;color:#152033}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}.page-shell{width:min(100% - 2rem,960px);margin:0 auto;padding:2rem 0 4rem}.page-header{margin-bottom:1.5rem}.page-header.compact{margin-bottom:1rem}.eyebrow{margin:0 0 .35rem;color:#0f766e;font-size:.78rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1{margin:0;font-size:clamp(2rem,7vw,4rem);line-height:1}h2{margin:0 0 .75rem;font-size:1.2rem}p{line-height:1.6}.back-link{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;margin-bottom:1.25rem;padding:0 .9rem;border:1px solid #0f766e;border-radius:6px;background:#edf7f5;color:#0f766e;font-weight:800;text-decoration:none}.back-link:hover{background:#ccfbf1}.back-link svg{flex:none}.rhythm-list{display:grid;gap:.75rem}.compose-link{margin-bottom:1rem}.rhythm-link{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:inherit;text-decoration:none}.rhythm-link:hover{border-color:#0f766e}.rhythm-link span{color:#667085}.rhythm-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:2rem}.rhythm-nav a{display:grid;gap:.25rem;min-height:4.5rem;padding:.9rem 1rem;border:1px solid #d7dee8;border-radius:8px;background:#fff;color:inherit;text-decoration:none}.rhythm-nav a:last-child{text-align:right}.rhythm-nav a:hover{border-color:#0f766e}.rhythm-nav span{color:#667085;font-size:.82rem;font-weight:800;text-transform:uppercase}.player-panel,.error-panel,.composer-panel{margin:1.5rem 0;padding:1rem;border:1px solid #d7dee8;border-radius:8px;background:#fff}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}.controls button{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:0 .9rem;border:1px solid #152033;border-radius:6px;background:#152033;color:#fff;cursor:pointer;font-weight:750}.controls button svg{flex:none}.controls button:disabled{border-color:#c5cfdc;background:#d7dee8;color:#667085;cursor:not-allowed}.controls button.loop-toggle[aria-pressed=false]{border-color:#c5cfdc;background:#fff;color:#152033}.composer-meta{display:grid;grid-template-columns:minmax(12rem,1.4fr) repeat(4,minmax(7rem,1fr));gap:.75rem;margin-bottom:1rem}.composer-meta label,.markdown-output{display:grid;gap:.35rem;color:#475467;font-size:.86rem;font-weight:800}.composer-meta input,.composer-meta select,.markdown-output textarea{width:100%;min-height:2.5rem;border:1px solid #c5cfdc;border-radius:6px;background:#fff;color:#152033}.composer-meta input,.composer-meta select{padding:0 .75rem}.composer-actions,.hand-keys{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem}.composer-actions button,.hand-key{min-height:2.5rem;border:1px solid #152033;border-radius:6px;background:#fff;color:#152033;cursor:pointer;font-weight:800}.composer-actions button{padding:0 .9rem}.composer-actions button:last-of-type{background:#152033;color:#fff}.composer-actions button:disabled,button.step-cell:disabled{border-color:#c5cfdc;background:#f1f5f9;color:#98a2b3;cursor:not-allowed}.record-button{background:#152033;color:#fff}.record-button.recording{border-color:#b42318;background:#b42318}.composer-actions span{min-width:5rem;color:#0f766e;font-weight:800}.metronome-toggle{border-color:#c5cfdc;background:#fff;color:#475467}.metronome-toggle[aria-pressed=true]{border-color:#0f766e;background:#edf7f5;color:#0f766e}.count-in{display:grid;place-items:center;min-height:5rem;margin-bottom:1rem;border:1px solid #d7dee8;border-radius:8px;background:#edf7f5;color:#0f766e;font-size:3rem;font-weight:900;font-variant-numeric:tabular-nums;line-height:1}.hand-keys{justify-content:center;padding:.75rem;border:1px solid #d7dee8;border-radius:8px;background:#f8fafc}.hand-key{display:grid;min-width:7rem;min-height:4.25rem;padding:.5rem .8rem;place-items:center}.hand-key span{color:#667085;font-size:.82rem;text-transform:uppercase}.hand-key strong{font-size:1.35rem;line-height:1}.left-hand{border-color:#0f766e;color:#0f766e}.right-hand{border-color:#9a3412;color:#9a3412}.hand-key[data-pressed=true]{transform:translateY(1px)}.hand-key[data-pressed=true] span{color:currentColor}.left-hand[data-pressed=true]{background:#ccfbf1;box-shadow:inset 0 0 0 2px #0f766e2e}.right-hand[data-pressed=true]{background:#ffedd5;box-shadow:inset 0 0 0 2px #9a34122e}.loop-toggle,.tempo-control{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem}.tempo-control{flex:1 1 18rem}.tempo-control input{width:min(18rem,100%)}.tempo-control output{min-width:4.75rem;color:#475467;font-variant-numeric:tabular-nums}.player-status{min-height:1.5rem;margin:.75rem 0 .25rem;color:#b42318;font-weight:700}.audio-help-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:1rem;background:#15203394}.audio-help-modal{width:min(100%,30rem);padding:1.25rem;border:1px solid #d7dee8;border-radius:8px;background:#fff;box-shadow:0 1.25rem 3rem #15203342}.audio-help-modal h2{margin-bottom:.5rem;font-size:1.35rem}.audio-help-modal p:not(.eyebrow){margin:0;color:#475467}.audio-help-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem;margin-top:1rem}.audio-help-actions a,.audio-help-actions button{display:inline-flex;align-items:center;min-height:2.5rem;padding:0 .9rem;border:1px solid #152033;border-radius:6px;cursor:pointer;font-weight:800;text-decoration:none}.audio-help-actions a{border-color:#0f766e;background:#edf7f5;color:#0f766e}.audio-help-actions a:hover{background:#ccfbf1}.audio-help-actions button{background:#152033;color:#fff}.ios-audio-help-link{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid #d7dee8;color:#475467;font-size:.92rem}.ios-audio-help-link a{color:#0f766e;font-weight:800}.grid-scroll{overflow-x:auto;padding-bottom:.25rem}.rhythm-grid{min-width:720px;border-top:1px solid #d7dee8;border-left:1px solid #d7dee8}.composer-grid{margin-bottom:1rem}.grid-row{display:grid}.track-name,.step-cell{min-height:2.75rem;display:grid;place-items:center;border-right:1px solid #d7dee8;border-bottom:1px solid #d7dee8}.track-name{position:sticky;left:0;z-index:1;justify-content:start;padding:0 .75rem;background:#f1f5f9;font-weight:800}.track-name-action{max-width:100%;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}.track-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.step-cell{font-weight:800;font-variant-numeric:tabular-nums}.track-mute-button{width:1.85rem;height:1.85rem;flex:0 0 auto;display:inline-grid;place-items:center;border:1px solid #c5cfdc;border-radius:999px;background:#fff;color:#152033;cursor:pointer}.track-mute-button[aria-pressed=true]{border-color:#b42318;background:#fff3f0;color:#b42318}button.step-cell{padding:0;border-top:0;border-left:0;cursor:pointer}button.step-cell:focus-visible,.composer-actions button:focus-visible,.controls button:focus-visible,.hand-key:focus-visible,.track-mute-button:focus-visible,.back-link:focus-visible,.audio-help-actions a:focus-visible,.audio-help-actions button:focus-visible,.ios-audio-help-link a:focus-visible{outline:3px solid #14b8a6;outline-offset:2px}.count-row .step-cell,.count-row .track-name{min-height:2.25rem;background:#edf7f5;color:#0f766e}.hit-cell{background:#fff7ed;color:#9a3412}.rest-cell{background:#fff;color:#98a2b3}.beat-start{box-shadow:inset 2px 0 #475467}.step-cell.active,.count-row .step-cell.active{background:#152033;color:#fff}.muted-row .track-label,.muted-row .step-cell{opacity:.42}.markdown-output{margin-top:1rem}.markdown-output textarea{min-height:19rem;padding:1rem;background:#101828;color:#f8fafc;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9rem;line-height:1.5;resize:vertical}.content{margin-top:2rem}.content code{font-size:.95em}.content pre{overflow-x:auto;padding:1rem;border:1px solid #d7dee8;border-radius:8px;background:#101828;color:#f8fafc}.error-panel{border-color:#fecdca;background:#fff3f0}.error-panel ul{margin:0;padding-left:1.25rem}.help-steps ol{display:grid;gap:.85rem;margin:0;padding:0;counter-reset:help-step;list-style:none}.help-steps li{position:relative;min-height:5rem;padding:1rem 1rem 1rem 3.6rem;border:1px solid #d7dee8;border-radius:8px;background:#fff;counter-increment:help-step}.help-steps li:before{content:counter(help-step);position:absolute;top:1rem;left:1rem;display:grid;width:1.85rem;height:1.85rem;place-items:center;border-radius:999px;background:#0f766e;color:#fff;font-weight:900;line-height:1}.help-steps h2{margin-bottom:.35rem;font-size:1.05rem}.help-steps p{margin:0;color:#475467}@media (max-width: 640px){.page-shell{width:min(100% - 1rem,960px);padding-top:1rem}.rhythm-link{display:grid}.composer-meta,.rhythm-nav{grid-template-columns:1fr}.rhythm-nav a:last-child{text-align:left}.controls{align-items:stretch;gap:.5rem}.controls button{flex:1 1 calc((100% - 1rem) / 3);justify-content:center;min-width:0;padding:0 .4rem;gap:.3rem;font-size:.9rem;white-space:nowrap}.tempo-control{flex-basis:100%;display:grid;grid-template-columns:auto 1fr auto}.audio-help-actions{display:grid}.audio-help-actions a,.audio-help-actions button{justify-content:center}}