.beat-scroll{overflow:auto;position:relative;display:block;margin:20px 0;border-radius:14px;border:1px solid #e3e7dc;max-height:650px}.beat-grid{min-width:900px;padding:12px;background:#fff}.beat-line{display:grid;grid-template-columns:165px repeat(var(--cells),minmax(35px,1fr));gap:6px;align-items:center;margin-bottom:8px}.track-label{position:sticky;left:0;background:white;z-index:2;padding:6px 10px 6px 0;min-height:60px}.track-toggle{border:0;background:transparent;font-size:13px;display:flex;align-items:center;gap:6px;padding:2px;text-align:left;font-weight:600;width:100%}.track-toggle span{margin-left:auto;color:var(--green)}.track-tools{display:flex;align-items:center;gap:8px;margin-top:5px}.track-tools button{border:0;background:#e9eddf;border-radius:8px;font-size:16px}.track-tools input{width:90px;accent-color:var(--green)}.beat-cell{border:0;border-radius:10px;height:48px;background:#f1f1ea;color:#9da594;font-size:22px;touch-action:manipulation}.beat-cell.downbeat{border-left:2px solid #c0ccb6}.beat-cell.on{background:#f4cc63;color:#4f502e}.beat-cell.playing{box-shadow:inset 0 0 0 3px var(--green)}.beat-count{text-align:center;font-size:11px;color:#6e7767;padding:8px 0}.beat-count.downbeat{font-size:16px;font-weight:700;color:var(--green)}.beat-count.current-count{background:var(--green);color:white;border-radius:10px}.count-line{position:sticky;top:0;background:white;z-index:3}.count-line .track-label{min-height:34px;font-size:12px}.muted-track .beat-cell{opacity:.35}.muted-track .track-toggle{color:#8b9187}.beat-tools{margin:10px 0}.beat-tools select{font-size:13px}.beat-say{margin-left:auto;min-width:80px;text-align:center;background:#e7e1f1;padding:10px 17px;border-radius:14px;font:600 27px Outfit}.lab>.counts{display:none}.counting-help{border-radius:17px;background:#f5f2e8;padding:16px 20px;margin:20px 0;font-size:13px;line-height:1.7}.counting-help summary{cursor:pointer;font-weight:700}.counting-help p{margin:10px 0}.live-count{display:flex;gap:8px;margin:15px 0;flex-wrap:wrap}.live-count span{padding:9px 15px;background:#eeeee6;border-radius:12px;font-size:20px}.live-count .active{background:#f4cc63;color:#3c4c2e}.task-buttons{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:15px}.task-buttons button{border:1px solid #dbe1d1;border-radius:10px;padding:12px 4px;background:white;position:relative}.task-buttons button.selected{background:var(--green);color:white}.task-buttons button.passed:after{content:'✓';position:absolute;top:1px;right:3px;font-size:10px}.task-picker{margin:20px 0}.dict-navigation{display:flex;gap:10px;align-items:center;justify-content:space-between}.count-strip-label{font-size:12px;color:#6c7665}.notation .syllable{font-size:11px;fill:#788074}.notation .tuplet{font-size:12px;fill:#6f568b;font-style:italic}.task-progress{font-size:12px;color:#687960;margin-top:12px}@media(max-width:750px){.beat-grid{min-width:850px}.beat-line{grid-template-columns:145px repeat(var(--cells),minmax(35px,1fr))}.track-toggle{font-size:12px}.task-buttons{grid-template-columns:repeat(5,1fr)}.beat-tools .muted{width:100%}.live-count span{font-size:18px;padding:8px 13px}}
.record-tools{display:flex;gap:5px;align-items:center;margin-top:7px}.record-tools button{background:#e7e1f1;border:0;border-radius:8px;padding:6px 8px;font-size:11px;color:#514864}.record-tools button:hover{background:#dcd2f0}.sample-info{font-size:10px;color:#7b8474;display:block;margin-top:4px}.record-info{font-size:13px;color:#6c7665;line-height:1.7;max-width:750px}.recorder-panel{background:#eee5de;border:1px solid #d8b9a6;border-radius:18px;padding:20px;margin:15px 0}.recorder-panel strong{color:#9d413b}.animal-credits{font-size:10px;color:#839078;line-height:1.7}.animal-credits a{color:inherit}.beat-cell:disabled{opacity:.4;cursor:default}.record-tools button:disabled{opacity:.5}.track-label:has(.record-tools){min-height:102px}.beat-grid:has(.record-tools){min-width:930px}
.beat-shortcut{border-radius:14px;background:#e9eddf;padding:14px 18px;font-size:13px;line-height:1.7}.beat-shortcut strong{color:var(--green)}kbd{display:inline-block;border:1px solid #bac8ae;background:#fff;border-bottom-width:3px;border-radius:6px;min-width:25px;text-align:center;padding:1px 6px;font:700 13px 'DM Sans',sans-serif}
/* Compact rhythm workspace, with all seven tracks visible on a laptop. */
#lab{padding:18px 20px;margin-bottom:30px;scroll-margin-top:12px}#lab .lab-head{align-items:center;gap:15px;margin-bottom:12px}#lab h2{font-size:25px;margin:0}#lab .lab-head p{font-size:12px;margin:4px 0 0}#lab .lab-head .secondary{padding:8px 12px;font-size:11px;white-space:nowrap}#lab .lab-toolbar{gap:9px;margin:0;flex-wrap:wrap;font-size:11px}#lab .lab-toolbar>.primary{padding:9px 15px;font-size:12px;min-width:115px;justify-content:center}#lab .lab-toolbar>.secondary{padding:8px 11px;font-size:11px}#lab #tempo{width:85px}#lab #bpm{white-space:nowrap}#lab .beat-tools{margin:0;gap:7px;flex:1;justify-content:flex-end}#lab .beat-tools label{font-size:11px;white-space:nowrap}#lab .beat-tools select{padding:7px 9px;font-size:11px;border-radius:10px}#lab .beat-tools .secondary{padding:7px 11px;font-size:11px}#lab .beat-say{font-size:19px;min-width:42px;padding:5px 10px;margin-left:0;border-radius:10px}#lab .beat-scroll{margin:12px 0 8px;max-height:none;overflow-x:auto;overflow-y:visible}#lab .beat-grid,#lab .beat-grid:has(.record-tools){min-width:640px;padding:8px}#lab .beat-line{grid-template-columns:178px repeat(var(--cells),minmax(22px,1fr));gap:4px;margin-bottom:4px}#lab .beat-line:last-child{margin-bottom:0}#lab .track-label{min-height:42px;padding:2px 6px 0 0}#lab .track-label:has(.record-tools){min-height:46px}#lab .track-toggle{font-size:11px;gap:4px;line-height:16px;padding:0}#lab .track-tools{gap:4px;margin-top:3px;height:21px}#lab .track-tools>button{font-size:13px;min-width:22px;padding:1px 4px;height:20px}#lab .track-tools input{width:55px;margin:0}#lab .record-tools{display:inline-flex;gap:3px;margin:0}#lab .record-tools button{font-size:10px;padding:3px 6px;min-height:21px;white-space:nowrap}#lab .sample-info{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#lab .beat-cell{height:36px;font-size:17px;border-radius:8px}#lab .beat-count{padding:3px 0;font-size:10px}#lab .beat-count.downbeat{font-size:13px}#lab .count-line .track-label{min-height:22px;font-size:10px;padding-top:2px}#lab .lab-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}#lab .beat-shortcut{font-size:11px;line-height:1.5;padding:0;margin:0;background:transparent;border-radius:0}#lab kbd{font-size:11px;min-width:20px;padding:0 4px}#lab .lab-help{font-size:11px;text-align:right;flex-shrink:0;max-width:330px}#lab .lab-help summary{cursor:pointer;color:var(--green);padding:3px 0}#lab .lab-help[open]{text-align:left}#lab .lab-help p{font-size:11px;line-height:1.7}#lab .counting-help{padding:12px;margin:8px 0;font-size:11px}#lab #beat-notice:empty{display:none}#lab .recorder-panel{padding:14px;margin:10px 0}
body.beat-focus>header,body.beat-focus main>section:not(#lab),body.beat-focus main>footer{display:none!important}body.beat-focus main{max-width:1180px;padding:10px 12px;margin:0 auto}body.beat-focus #lab{margin:0;padding:16px 18px}body.beat-focus #lab .recorder-panel:not([hidden]){position:fixed;top:20px;left:50%;transform:translateX(-50%);width:min(600px,calc(100vw - 40px));z-index:20;box-shadow:0 8px 40px #28392e33}body.beat-focus #lab .lab-help[open]{position:absolute;right:25px;bottom:15px;background:#f8f6ef;padding:15px;border:1px solid #dce3d0;border-radius:15px;z-index:10;max-height:65vh;overflow:auto}
@media(max-width:900px){#lab .lab-toolbar{gap:7px}#lab .beat-tools{flex:none;margin-left:auto}#lab #tempo{width:65px}#lab .lab-toolbar>.primary{min-width:100px;padding:9px 12px}#lab .beat-say{display:none}}@media(max-width:600px){#lab{padding:16px 12px}#lab .lab-head{align-items:flex-start;flex-wrap:wrap}#lab h2{font-size:23px}#lab .beat-tools{margin-left:0}#lab .lab-bottom{flex-wrap:wrap}#lab .lab-help{max-width:100%;text-align:left}#lab .beat-shortcut{font-size:10px}body.beat-focus #lab{padding:12px 10px}body.beat-focus main{padding:8px}}
@media(max-width:750px){body:not(.beat-focus)>header{height:auto;min-height:80px;gap:10px;padding-top:18px;padding-bottom:10px}body:not(.beat-focus)>header nav{display:flex;order:3;width:100%;justify-content:space-between;gap:8px;padding:7px 0}body:not(.beat-focus)>header nav a{font-size:11px}}
.audio-help{position:fixed;right:12px;bottom:10px;z-index:1000;font-size:12px;max-width:330px;color:#294735}.audio-help>summary{cursor:pointer;list-style:none;background:#f8f7f0;border:1px solid #ced9c5;border-radius:18px;padding:6px 12px;box-shadow:0 2px 6px #263c2920;width:max-content;margin-left:auto}.audio-help[open]>div{background:#fffef7;border:1px solid #ced9c5;border-radius:14px;padding:14px;margin-top:5px;box-shadow:0 4px 20px #263c2920}.audio-help p{font-size:12px;line-height:1.5;margin:0 0 9px}.audio-help button{font-size:12px;padding:8px 12px}.audio-help #audio-help-status{margin:8px 0 0}.audio-help #audio-help-status:empty{display:none}