.count-in-setting{font-size:12px!important;min-width:0!important}.count-in-setting select{height:42px!important;width:84px!important;font-size:13px!important;padding:7px!important}.presentation-open{height:42px;padding:8px 12px;font-size:13px;align-self:end}#presentationView{width:96vw;height:94vh;max-width:none;max-height:none;box-sizing:border-box;border:1px solid #d3ddd2;border-radius:18px;background:#fafbf7;color:#183a38;padding:22px;overflow:auto}#presentationView::backdrop{background:#183a38aa}.presentation-toolbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;background:#fafbf7;z-index:2;padding-bottom:12px}.presentation-toolbar button{font-size:16px;padding:10px 18px}#presentationCount{font-size:28px;font-weight:700;color:#a46512}#presentationTitle{font-size:30px;margin:10px 0 20px}#presentationPattern{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}#presentationPattern .lab-step strong{font-size:34px}#presentationContent{display:flex;justify-content:space-around;align-items:center;gap:30px;overflow:auto;min-height:360px}#presentationContent .presentation-current{display:flex;align-items:center;justify-content:center;gap:24px}#presentationContent .presentation-current>div h3,#presentationContent .presentation-current>h3{font-size:64px;margin:0}#presentationContent .presentation-current p{display:none}#presentationContent svg.chord-diagram{width:260px;height:330px;flex:none}#presentationContent>svg:not(.chord-diagram){height:320px;min-width:100%;width:auto;flex:none}#presentationContent .lab-next-shape svg{width:160px;height:220px}#presentationContent .lab-next-info h3{font-size:44px;margin:4px 0}#presentationContent .lab-next-info p{font-size:24px}#presentationContent .lab-next-info progress{width:100%}#presentationContent .lab-next-info .eyebrow{font-size:12px}.presentation-toolbar .is-stopping{background:#a4543c}@media(max-width:650px){#presentationContent{flex-wrap:wrap}.presentation-toolbar{gap:5px}.presentation-toolbar button{font-size:12px;padding:9px}#presentationContent svg.chord-diagram{width:190px;height:240px}}
.presentation-next{text-align:center}.presentation-next h3{font-size:44px;margin:4px 0}.presentation-next p{font-size:20px;color:#667773}#presentationContent .presentation-next svg{width:180px;height:230px}
.practice-countdown{display:inline-flex;align-items:center;justify-content:center;align-self:flex-end;min-width:100px;height:42px;font-size:15px;font-weight:700;color:#a46512;font-variant-numeric:tabular-nums;white-space:nowrap}
.practice-countdown{min-width:150px;height:64px;gap:12px;align-self:center;justify-content:flex-start}.practice-countdown .count-in-caption{font-size:14px;font-weight:650}.practice-countdown strong{font-size:56px;line-height:1;font-weight:800;min-width:38px;text-align:center}


/* Prioritize the chord students are playing, especially on a projector. */
#presentationContent .presentation-current{flex:1 1 65%;gap:clamp(20px,4vw,65px)}
#presentationContent .presentation-current svg.chord-diagram{width:clamp(300px,35vw,500px);height:clamp(360px,46vh,590px)}
#presentationContent .presentation-current>h3,#presentationContent .presentation-current>div h3{font-size:clamp(80px,9vw,140px)}
#presentationContent .presentation-next{flex:0 1 25%}
@media(max-width:650px){#presentationContent .presentation-current{flex-basis:100%;gap:18px}#presentationContent .presentation-current svg.chord-diagram{width:260px;height:320px}#presentationContent .presentation-current>h3,#presentationContent .presentation-current>div h3{font-size:72px}}
#presentationPlay{width:120px;min-width:120px;height:46px;flex:0 0 120px;box-sizing:border-box;white-space:nowrap;text-align:center}

.presentation-slot{min-width:0;display:flex;flex-direction:column;gap:8px}
.presentation-slot-chord{height:32px;line-height:32px;font-size:clamp(17px,2.2vw,28px);font-weight:750;text-align:center;white-space:nowrap}
#presentationPattern .presentation-slot .lab-step{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0}
#presentationContent .presentation-change-cue{font-size:clamp(16px,1.7vw,24px);margin:8px 0 10px;color:#1a6659;font-weight:650}
@media(max-width:650px){.presentation-slot-chord{font-size:16px;height:26px;line-height:26px}.presentation-slot{gap:5px}}

#presentationBeat{margin-left:auto;flex:0 0 76px;min-width:76px;height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#edf2e7;border:1px solid #becdbc;border-radius:14px;color:#1a6659;font-variant-numeric:tabular-nums;overflow:visible}#presentationBeat small{font-size:11px;line-height:14px;color:#667773}#presentationBeat strong{display:block;font-size:52px;line-height:54px;transform-origin:center center;font-weight:750}#presentationCount{font-size:20px}@media(max-width:650px){#presentationBeat{flex-basis:58px;min-width:58px;height:62px}#presentationBeat strong{font-size:42px;line-height:44px}#presentationBeat small{font-size:10px}#presentationCount{font-size:14px}}

/* Align the JUKEbox transport and practice controls. */
.presentation-toolbar:has(#presentationPractice:not([hidden])){
  --practice-control-height:46px;
  flex-wrap:wrap;
  gap:10px;
}
.presentation-toolbar:has(#presentationPractice:not([hidden])) #presentationClose,
.presentation-toolbar:has(#presentationPractice:not([hidden])) #presentationPlay{
  flex:0 0 104px;
  width:104px;
  min-width:0;
  height:var(--practice-control-height);
  padding:0 10px;
}
#presentationPractice:not([hidden]){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
#presentationPractice label{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  height:var(--practice-control-height);
  padding:0 10px;
  border:1px solid #becdbc;
  border-radius:10px;
  background:#edf2e7;
  font-size:14px;
  white-space:nowrap;
}
#presentationTempo{
  width:64px;
  padding:4px 6px;
  font:inherit;
}
#presentationLoop{
  margin:0;
  accent-color:#1a6659;
}