: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-block;margin-bottom:1.25rem;color:#0f766e;font-weight:700;text-decoration:none}.back-link:hover{text-decoration:underline}.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{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:disabled{border-color:#c5cfdc;background:#d7dee8;color:#667085;cursor:not-allowed}.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}.mute-controls{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}.mute-controls button{min-height:2.25rem;padding:0 .8rem;border:1px solid #c5cfdc;border-radius:999px;background:#fff;color:#152033;cursor:pointer;font-weight:750}.mute-controls button[aria-pressed=true]{border-color:#b42318;background:#fff3f0;color:#b42318}.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}.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}.step-cell{font-weight:800;font-variant-numeric:tabular-nums}button.step-cell{padding:0;border-top:0;border-left:0;cursor:pointer}button.step-cell:focus-visible,.composer-actions button:focus-visible,.hand-key: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-name,.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}@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}.controls button{flex:1 1 7rem}.tempo-control{flex-basis:100%;display:grid;grid-template-columns:auto 1fr auto}}