:root{
  --spotter-blue:#238edb;
  --spotter-blue-soft:#e9f5fe;
  --spotter-pink:#e95b91;
  --spotter-green:#4f962a;
  --spotter-ink:#17202a;
  --spotter-muted:#59636e;
  --spotter-line:rgba(23,32,42,.16);
  --spotter-focus:#0b69b0;
}

.srOnly{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.skipLink{
  position:fixed;
  top:8px;
  left:8px;
  z-index:100000;
  min-height:44px;
  padding:11px 16px;
  border:2px solid var(--spotter-focus);
  border-radius:12px;
  background:#fff;
  color:var(--spotter-ink);
  font-weight:1000;
  transform:translateY(-140%);
  transition:transform .12s ease;
}

.skipLink:focus{
  transform:translateY(0);
}

.rhythmSpotter{
  height:calc(var(--vh, 1vh) * 100);
  max-height:calc(var(--vh, 1vh) * 100);
  display:grid;
  grid-template-rows:minmax(0, 1fr);
  padding:8px;
  padding-top:calc(8px + env(safe-area-inset-top));
  padding-right:calc(8px + env(safe-area-inset-right));
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  padding-left:calc(8px + env(safe-area-inset-left));
  background:
    radial-gradient(circle at 12% 8%, rgba(63,169,245,.09), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(254,122,171,.08), transparent 28%),
    #fff;
}

.rhythmSpotter button,
.rhythmSpotter [role="button"],
.rhythmSpotter [role="radio"],
.rhythmSpotter [role="tab"]{
  min-height:44px;
}

.rhythmSpotter button:focus-visible,
.rhythmSpotter [role="button"]:focus-visible,
.rhythmSpotter [role="radio"]:focus-visible,
.rhythmSpotter [role="tab"]:focus-visible,
.rhythmSpotter [tabindex]:focus-visible,
.skipLink:focus-visible{
  outline:3px solid var(--spotter-focus);
  outline-offset:3px;
}

.gameArea{
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  gap:8px;
}

.notationPanel{
  position:relative;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,.10);
  border-radius:20px;
  background:#fff;
  box-shadow:0 12px 38px rgba(0,0,0,.09);
}

.promptTop{
  position:relative;
  flex:0 0 auto;
  padding:9px 14px 10px;
  border-bottom:1px solid rgba(0,0,0,.09);
  background:linear-gradient(90deg, rgba(63,169,245,.07), rgba(254,122,171,.055));
}

#appRoot:fullscreen .promptTop,
#appRoot:-webkit-full-screen .promptTop{
  padding-left:max(14px, min(190px, 28vw));
  padding-right:max(14px, min(190px, 28vw));
}

.questionModeBadge{
  width:max-content;
  max-width:100%;
  margin:0 auto 3px;
  padding:3px 9px;
  border:1px solid rgba(63,169,245,.32);
  border-radius:999px;
  background:rgba(255,255,255,.85);
  color:rgba(0,0,0,.66);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.055em;
  line-height:1.25;
  text-transform:uppercase;
}

.banner{
  margin:0;
  color:rgba(0,0,0,.92);
  font-size:clamp(21px, 2.1vw, 31px);
  font-weight:1100;
  line-height:1.12;
  text-align:center;
}

.subBanner{
  min-height:20px;
  margin:4px 0 0;
  color:rgba(0,0,0,.68);
  font-size:15px;
  font-weight:900;
  line-height:1.25;
  text-align:center;
}

.targetStrip{
  width:max-content;
  max-width:100%;
  min-height:50px;
  margin:7px auto 0;
  padding:4px 7px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:2px solid rgba(63,169,245,.34);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}

.targetCopy{
  min-width:0;
}

.targetLabel{
  color:rgba(0,0,0,.58);
  font-size:11px;
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.targetName{
  overflow-wrap:anywhere;
  color:rgba(0,0,0,.92);
  font-size:21px;
  font-weight:1100;
  line-height:1.05;
}

.targetSymbol{
  width:54px;
  height:42px;
  flex:0 0 auto;
}

.targetSymbol:empty{
  display:none;
}

.targetSymbol svg,
.selectedActivityNotation svg,
.guideNotation svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.symbolVfWrap{
  width:100%;
  height:100%;
}

.targetCount{
  min-width:82px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(63,169,245,.13);
  color:rgba(0,0,0,.76);
  font-size:13px;
  font-weight:1100;
  text-align:center;
  white-space:nowrap;
}

.hintToggleBtn{
  min-width:112px;
  min-height:44px;
  padding:8px 14px;
  border-color:rgba(35,142,219,.35);
  background:var(--spotter-blue-soft);
  color:#075788;
}

.questionHint{
  width:min(680px, 100%);
  margin:7px auto 0;
  padding:10px 12px;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:13px;
  overflow:hidden;
  border:1px solid rgba(35,142,219,.30);
  border-radius:15px;
  background:rgba(255,255,255,.96);
  box-shadow:0 7px 18px rgba(23,32,42,.07);
  text-align:left;
}

.questionHint .targetSymbol{
  width:94px;
  height:76px;
  align-self:center;
}

.questionHint .targetSymbol svg{
  width:100%;
  height:100%;
}

.hintCopy{
  min-width:0;
}

.hintHeading{
  margin:0 0 3px;
  color:var(--spotter-ink);
  font-size:17px;
  font-weight:1100;
  line-height:1.15;
}

.hintText{
  margin:0;
  color:#3f4a55;
  font-size:14px;
  font-weight:850;
  line-height:1.3;
}

.hintFacts{
  margin:5px 0 0;
  padding-left:19px;
  color:#303943;
  font-size:13px;
  font-weight:800;
  line-height:1.3;
}

.hintFacts li + li{
  margin-top:2px;
}

.subdivisionGuide{
  width:min(440px, 90%);
  margin:6px auto 0;
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:2px;
  color:rgba(0,0,0,.68);
  font-size:13px;
  font-weight:1000;
  text-align:center;
}

.subdivisionGuide span:nth-child(even){
  color:var(--spotter-blue);
}

.staveMount{
  position:relative;
  min-width:0;
  width:100%;
  flex:1;
  min-height:340px;
  overflow:hidden;
  padding:4px 10px 8px;
}

.rhythmSvg,
.vfWrap{
  display:block;
  min-width:0;
  max-width:100%;
  width:100%;
  height:100%;
  min-height:320px;
  margin:0 auto;
  overflow:visible;
}

.rhythmSvg,
.vfWrap svg{
  display:block;
  max-width:100%;
  max-height:100%;
  width:100% !important;
  height:100% !important;
  overflow:visible;
}

.noteHotspot{
  cursor:pointer;
  outline:none;
  touch-action:manipulation;
}

.noteTapArea{
  fill:rgba(63,169,245,.01);
  stroke:none;
  pointer-events:all;
}

.noteHalo{
  fill:rgba(63,169,245,.08);
  stroke:rgba(63,169,245,.30);
  stroke-width:3;
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
  vector-effect:non-scaling-stroke;
}

.noteHotspot:hover .noteHalo,
.noteHotspot:focus-visible .noteHalo{
  opacity:1;
}

.noteHotspot:focus-visible .noteHalo{
  stroke:var(--spotter-focus);
  stroke-width:5;
}

.noteHotspot.found .noteHalo{
  fill:rgba(122,201,67,.18);
  stroke:rgba(79,150,42,.84);
  opacity:1;
}

.noteHotspot.wrong .noteHalo{
  fill:rgba(255,29,37,.13);
  stroke:rgba(200,19,25,.82);
  opacity:1;
}

.noteHotspot.playing .noteHalo{
  fill:rgba(254,146,29,.20);
  stroke:rgba(213,111,0,.90);
  opacity:1;
}

.feedbackToast{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:5;
  max-width:min(680px, 92%);
  padding:10px 16px;
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(255,255,255,.97);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  color:rgba(0,0,0,.82);
  font-size:16px;
  font-weight:1000;
  line-height:1.25;
  text-align:center;
  opacity:0;
  transform:translate(-50%, 12px);
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}

.feedbackToast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

.feedbackToast.good{
  border-color:rgba(79,150,42,.50);
  background:rgba(238,255,226,.98);
}

.feedbackToast.bad{
  border-color:rgba(200,19,25,.40);
  background:rgba(255,238,238,.98);
}

.hud{
  min-width:0;
}

.hudLeft{
  min-width:0;
}

.activityPill{
  max-width:min(390px, 38vw);
  align-items:center;
}

.activityPill .value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
}

.changeActivityBtn{
  min-height:44px;
  padding:9px 13px;
  background:rgba(63,169,245,.08);
  border-color:rgba(63,169,245,.28);
  box-shadow:0 7px 18px rgba(0,0,0,.07);
  font-size:14px;
}

.linkedPresetSummary{
  width:min(620px, 100%);
  margin:4px auto 12px;
  padding:14px 18px;
  border:2px solid rgba(63,169,245,.38);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(63,169,245,.12), rgba(255,255,255,.95));
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  text-align:left;
}

.linkedPresetEyebrow{
  margin-bottom:3px;
  color:var(--spotter-blue);
  font-size:11px;
  font-weight:1100;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.linkedPresetName{
  color:var(--spotter-ink);
  font-size:20px;
  font-weight:1100;
  line-height:1.18;
}

.linkedPresetMeta{
  margin-top:4px;
  color:var(--spotter-muted);
  font-size:14px;
  font-weight:850;
  line-height:1.35;
}

.linkWarning{
  width:min(760px, 100%);
  margin:4px auto 12px;
  padding:11px 14px;
  border:2px solid rgba(190,93,0,.42);
  border-radius:14px;
  background:#fff5df;
  color:#5f3507;
  font-size:14px;
  font-weight:1000;
  line-height:1.35;
  text-align:left;
}

.startButton{
  min-width:210px;
}

.activityPickerOverlay{
  padding:clamp(6px, 1.5vw, 18px);
}

.pickerCard{
  width:min(1220px, 98vw) !important;
  height:min(900px, calc(var(--vh, 1vh) * 96));
  max-height:calc(var(--vh, 1vh) * 96);
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-align:left;
}

.pickerHeader{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:13px 18px 7px;
  border-bottom:1px solid rgba(0,0,0,.08);
  text-align:left;
}

.pickerHeader .modalLogo{
  width:min(150px, 26vw);
  margin:0;
}

.pickerHeader .overlayTitle,
.pickerHeader .overlayText{
  margin-left:0;
  margin-right:0;
  text-align:left;
}

.pickerHeader .overlayTitle{
  margin-bottom:3px;
  font-size:clamp(25px, 3vw, 34px);
}

.pickerHeader .overlayText{
  margin-bottom:0;
  font-size:16px;
}

.pickerWarning{
  flex:0 0 auto;
  width:auto;
  margin:8px 14px 0;
}

.activityPickerBody{
  min-height:0;
  flex:1 1 auto;
  display:grid;
  grid-template-columns:minmax(0, 1.55fr) minmax(280px, .65fr);
  gap:12px;
  padding:12px 14px;
  overflow:hidden;
}

.activityCatalog{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.activityTabs{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  padding:4px;
  overflow-x:auto;
  border:1px solid var(--spotter-line);
  border-radius:15px;
  background:#f4f6f8;
  scrollbar-width:thin;
}

.activityTab{
  position:relative;
  flex:1 0 max-content;
  min-height:46px;
  padding:9px 13px;
  border:2px solid transparent;
  border-radius:11px;
  background:transparent;
  color:#3f4954;
  cursor:pointer;
  font-size:14px;
  font-weight:1000;
  line-height:1.2;
  white-space:nowrap;
}

.activityTab[aria-selected="true"]{
  border-color:rgba(35,142,219,.44);
  background:#fff;
  color:#0b5f9c;
  box-shadow:0 5px 14px rgba(0,0,0,.08);
}

.activityTab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  right:14px;
  bottom:3px;
  left:14px;
  height:3px;
  border-radius:999px;
  background:var(--spotter-blue);
}

.tabCount{
  display:inline-grid;
  min-width:24px;
  min-height:24px;
  margin-left:4px;
  padding:2px 6px;
  place-items:center;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  color:inherit;
  font-size:11px;
}

.activityTab[aria-selected="true"] .tabCount{
  background:var(--spotter-blue-soft);
}

.activityTabPanel{
  min-height:0;
  flex:1 1 auto;
  margin-top:9px;
  padding:2px 4px 12px 2px;
  overflow:auto;
  outline-offset:-2px;
  scrollbar-width:thin;
}

.activityFamilyList{
  display:grid;
  gap:9px;
}

/*
 * Family rows and preset buttons are generated by rhythm-spotter-v2.js.
 * The aliases below intentionally support either semantic buttons or
 * native radio labels without sacrificing a visible selected state.
 */
.activityFamily,
.activityFamilyRow{
  padding:10px;
  border:1px solid var(--spotter-line);
  border-radius:15px;
  background:#fff;
  box-shadow:0 5px 15px rgba(0,0,0,.055);
}

.activityFamilyHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.activityFamilyTitle{
  margin:0;
  color:var(--spotter-ink);
  font-size:16px;
  font-weight:1100;
  line-height:1.2;
}

.activityFamilySummary{
  margin:2px 0 0;
  color:var(--spotter-muted);
  font-size:12px;
  font-weight:800;
  line-height:1.25;
}

.activityFamilyCount{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:#f0f3f6;
  color:#59636e;
  font-size:11px;
  font-weight:1000;
}

.activityPresetChoices{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.activityPresetButton,
.presetButton,
.activityPresetOption{
  position:relative;
  min-width:54px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 12px;
  border:2px solid rgba(23,32,42,.18);
  border-radius:12px;
  background:#f8fafb;
  color:var(--spotter-ink);
  cursor:pointer;
  font-size:13px;
  font-weight:1000;
  line-height:1.2;
  text-align:center;
  user-select:none;
}

.activityPresetOption input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}

.activityPresetButton:hover,
.presetButton:hover,
.activityPresetOption:hover{
  border-color:rgba(35,142,219,.42);
  background:var(--spotter-blue-soft);
}

.activityPresetButton[aria-checked="true"],
.activityPresetButton.selected,
.presetButton[aria-checked="true"],
.presetButton.selected,
.activityPresetOption:has(input:checked){
  padding-left:32px;
  border-color:var(--spotter-blue);
  background:var(--spotter-blue-soft);
  color:#074d80;
  box-shadow:inset 0 0 0 2px #fff, 0 5px 14px rgba(35,142,219,.16);
}

.activityPresetButton[aria-checked="true"]::before,
.activityPresetButton.selected::before,
.presetButton[aria-checked="true"]::before,
.presetButton.selected::before,
.activityPresetOption:has(input:checked)::before{
  content:"✓";
  position:absolute;
  left:10px;
  display:grid;
  width:17px;
  height:17px;
  place-items:center;
  border-radius:50%;
  background:var(--spotter-blue);
  color:#fff;
  font-size:11px;
  line-height:1;
}

.activityPresetOption:has(input:focus-visible){
  outline:3px solid var(--spotter-focus);
  outline-offset:3px;
}

.presetCode{
  color:var(--spotter-muted);
  font-size:10px;
  letter-spacing:.04em;
}

.selectedActivityPanel{
  min-width:0;
  min-height:0;
  align-self:stretch;
  padding:16px;
  overflow:auto;
  border:2px solid rgba(35,142,219,.30);
  border-radius:18px;
  background:
    radial-gradient(circle at 95% 4%, rgba(254,122,171,.09), transparent 32%),
    linear-gradient(155deg, #fff, #f5fbff);
  box-shadow:0 9px 24px rgba(0,0,0,.07);
  scrollbar-width:thin;
}

.selectedActivityTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.selectedActivityEyebrow{
  color:var(--spotter-blue);
  font-size:11px;
  font-weight:1100;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.selectedActivityCode{
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  background:#e6f3fc;
  color:#0a609e;
  font-size:11px;
  font-weight:1100;
}

.selectedActivityTitle{
  margin:10px 0 7px;
  color:var(--spotter-ink);
  font-size:clamp(21px, 2.3vw, 28px);
  font-weight:1100;
  line-height:1.12;
}

.selectedActivityDescription{
  margin:0;
  color:#4b5661;
  font-size:15px;
  font-weight:800;
  line-height:1.38;
}

.selectedActivityNotation{
  width:100%;
  height:92px;
  margin:12px 0 8px;
  overflow:hidden;
  border:1px solid rgba(23,32,42,.12);
  border-radius:13px;
  background:#fff;
}

.selectedActivityNotation:empty{
  display:none;
}

.selectedActivityFacts{
  display:grid;
  gap:9px;
  margin:14px 0 0;
}

.selectedActivityFacts > div{
  padding:10px 11px;
  border-radius:12px;
  background:rgba(255,255,255,.82);
  box-shadow:inset 0 0 0 1px rgba(23,32,42,.10);
}

.selectedActivityFacts dt{
  margin-bottom:2px;
  color:#69737d;
  font-size:10px;
  font-weight:1100;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.selectedActivityFacts dd{
  margin:0;
  color:var(--spotter-ink);
  font-size:14px;
  font-weight:950;
  line-height:1.3;
}

.overlayActions{
  position:sticky;
  bottom:0;
  z-index:3;
  flex:0 0 auto;
  min-height:68px;
  margin:0;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.97);
  box-shadow:0 -8px 22px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);
}

.activityPickerActions .btn:first-child{
  min-width:240px;
}

.guideCard{
  padding-bottom:0;
}

.guideNotation{
  width:min(760px, 100%);
  height:auto;
  margin:10px auto 12px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(128px, 1fr));
  gap:9px;
  overflow:visible;
  background:transparent;
}

.guideNotation:empty{
  display:none;
}

.guideSymbolCard{
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(23,32,42,.15);
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 12px rgba(23,32,42,.06);
}

.guideSymbolGlyph{
  width:100%;
  height:104px;
  padding:2px 7px 0;
  overflow:hidden;
  background:linear-gradient(180deg, #fff, #fbfdff);
}

.guideSymbolGlyph svg{
  width:100% !important;
  height:100% !important;
  overflow:visible;
}

.guideSymbolCaption{
  min-height:47px;
  padding:7px 8px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(23,32,42,.10);
  color:var(--spotter-muted);
  font-size:12px;
  font-weight:850;
  line-height:1.2;
  text-align:center;
}

.guideSymbolCaption strong{
  color:var(--spotter-ink);
  font-size:14px;
  font-weight:1100;
  text-transform:capitalize;
}

.guideCard .guideGrid{
  padding-bottom:8px;
}

.guidePanel{
  text-align:left;
}

.guideHeading{
  margin-top:0;
}

.successCard{
  width:min(650px, 94vw);
  padding:22px;
}

.successTick{
  width:70px;
  height:70px;
  margin:4px auto 10px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(122,201,67,.18);
  color:rgb(64,139,32);
  font-size:44px;
  font-weight:1100;
}

.playBtn{
  min-width:180px;
  background:rgba(122,201,67,.20) !important;
  border-color:rgba(77,157,42,.48) !important;
}

@media (max-width:1100px){
  .hud{
    align-items:flex-start;
    flex-direction:column;
  }

  .hudLeft,
  .hudRight{
    width:100%;
  }

  .hudLeft{
    display:grid;
    grid-template-columns:minmax(220px, 1fr) auto minmax(0, auto);
  }

  .activityPill{
    max-width:none;
  }

  .hudRight .btn{
    flex:1 1 150px;
  }
}

@media (max-width:860px){
  .activityPickerBody{
    grid-template-columns:minmax(0, 1.35fr) minmax(240px, .65fr);
  }

  .selectedActivityPanel{
    padding:13px;
  }

  .selectedActivityDescription{
    font-size:14px;
  }

  .pickerHeader{
    justify-content:flex-start;
  }
}

@media (max-width:760px){
  .rhythmSpotter{
    padding:5px;
    padding-top:calc(5px + env(safe-area-inset-top));
    padding-right:calc(5px + env(safe-area-inset-right));
    padding-bottom:calc(5px + env(safe-area-inset-bottom));
    padding-left:calc(5px + env(safe-area-inset-left));
  }

  #appRoot:fullscreen .promptTop,
  #appRoot:-webkit-full-screen .promptTop{
    padding-left:max(10px, min(132px, 38vw));
    padding-right:10px;
  }

  .promptTop{
    padding:6px 8px 7px;
  }

  .questionModeBadge{
    margin-bottom:2px;
    padding-top:2px;
    padding-bottom:2px;
    font-size:10px;
  }

  .banner{
    font-size:19px;
  }

  .subBanner{
    min-height:17px;
    font-size:13px;
  }

  .targetStrip{
    min-height:50px;
    margin-top:5px;
    padding:3px 5px;
    gap:8px;
  }

  .hintToggleBtn{
    min-width:102px;
    padding-right:11px;
    padding-left:11px;
  }

  .targetCount{
    min-width:68px;
    padding:6px 8px;
    font-size:11px;
  }

  .questionHint{
    margin-top:5px;
    padding:8px 9px;
    gap:8px;
  }

  .questionHint .targetSymbol{
    width:72px;
    height:58px;
  }

  .hintHeading{
    font-size:15px;
  }

  .hintText{
    font-size:13px;
  }

  .hintFacts{
    font-size:12px;
  }

  .rhythmSvg,
  .vfWrap{
    min-height:0;
  }

  .guideNotation{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:7px;
  }

  .guideSymbolGlyph{
    height:96px;
  }

  .guideActions{
    position:static;
  }

  .staveMount{
    min-height:280px;
    padding-right:2px;
    padding-left:2px;
  }

  .hudLeft{
    display:flex;
  }

  .activityPill{
    max-width:calc(100% - 140px);
    flex:1 1 220px;
  }

  .changeActivityBtn{
    flex:0 0 auto;
  }

  .pillRow{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:5px;
  }

  .pillRow .pill{
    min-width:0;
    justify-content:center;
    padding:7px 5px;
  }

  .pillRow .pill .label{
    display:none;
  }

  .pillRow .pill .value{
    font-size:15px;
  }

  .activityPickerOverlay{
    padding:0;
  }

  .pickerCard{
    width:100vw !important;
    height:calc(var(--vh, 1vh) * 100);
    max-height:calc(var(--vh, 1vh) * 100);
    border:0;
    border-radius:0;
    overflow:auto;
  }

  .pickerHeader{
    padding-top:calc(8px + env(safe-area-inset-top));
    padding-right:12px;
    padding-left:12px;
  }

  .pickerHeader .modalLogo{
    width:110px;
  }

  .pickerHeader .overlayTitle{
    font-size:23px;
  }

  .pickerHeader .overlayText{
    font-size:13px;
  }

  .activityPickerBody{
    min-height:auto;
    flex:0 0 auto;
    display:block;
    padding:9px;
    overflow:visible;
  }

  .activityCatalog{
    min-height:auto;
  }

  .activityTabs{
    position:sticky;
    top:0;
    z-index:4;
    border-radius:12px;
    box-shadow:0 5px 12px rgba(0,0,0,.07);
  }

  .activityTab{
    flex:0 0 auto;
    min-height:44px;
    padding:8px 11px;
  }

  .activityTabPanel{
    min-height:auto;
    max-height:none;
    overflow:visible;
  }

  .selectedActivityPanel{
    margin-top:10px;
    overflow:visible;
  }

  .selectedActivityNotation{
    height:76px;
  }

  .activityPickerActions{
    justify-content:stretch;
    padding-right:calc(10px + env(safe-area-inset-right));
    padding-left:calc(10px + env(safe-area-inset-left));
  }

  .activityPickerActions .btn{
    flex:1 1 auto;
  }

  .activityPickerActions .btn:first-child{
    min-width:180px;
  }

  .overlay.firstScreen .overlayTitle{
    font-size:clamp(34px, 11vw, 46px);
  }

  .linkedPresetSummary{
    padding:12px 14px;
  }
}

@media (max-width:500px){
  .activityPill{
    max-width:100%;
    width:100%;
    flex-basis:100%;
  }

  .changeActivityBtn{
    width:100%;
  }

  .hudRight{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .hudRight .btn{
    min-width:0;
    padding:9px 7px;
    font-size:13px;
  }

  .pickerHeader{
    gap:9px;
  }

  .pickerHeader .modalLogo{
    width:86px;
  }

  .pickerHeader .overlayTitle{
    font-size:20px;
  }

  .pickerHeader .overlayText{
    display:none;
  }

  .activityFamilyHeader{
    display:block;
  }

  .activityFamilyCount{
    display:inline-block;
    margin-top:5px;
  }

  .activityPresetButton,
  .presetButton,
  .activityPresetOption{
    flex:1 1 88px;
  }

  .selectedActivityTitle{
    font-size:21px;
  }

  .activityPickerActions{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
  }

  .activityPickerActions .btn{
    min-width:0 !important;
    padding-right:10px;
    padding-left:10px;
    font-size:14px;
  }

  .successCard{
    padding:16px;
  }
}

@media (max-height:650px){
  .promptTop{
    padding-top:4px;
    padding-bottom:4px;
  }

  .questionModeBadge{
    display:none;
  }

  .targetStrip{
    min-height:44px;
    margin-top:3px;
    padding-top:3px;
    padding-bottom:3px;
  }

  .questionHint{
    position:absolute;
    top:100%;
    left:50%;
    z-index:20;
    width:min(680px, calc(100% - 16px));
    max-height:96px;
    margin-top:3px;
    padding:5px 7px;
    gap:7px;
    overflow:auto;
    transform:translateX(-50%);
  }

  .questionHint .targetSymbol{
    width:58px;
    height:48px;
  }

  .hintHeading{
    font-size:14px;
  }

  .hintText,
  .hintFacts{
    font-size:11px;
    line-height:1.2;
  }

  .banner{
    font-size:18px;
  }

  .subBanner{
    min-height:15px;
    margin-top:2px;
    font-size:12px;
  }

  .subdivisionGuide{
    margin-top:3px;
    font-size:11px;
  }

  .staveMount{
    min-height:120px;
  }

  .rhythmSvg,
  .vfWrap{
    min-height:0;
  }

  .hudRight .btn{
    min-height:44px;
    padding:8px 10px;
    font-size:13px;
  }

  .pill{
    padding:6px 8px;
  }

  .pickerHeader{
    padding-top:5px;
    padding-bottom:5px;
  }

  .pickerHeader .modalLogo{
    width:100px;
    max-height:40px;
  }

  .pickerHeader .overlayTitle{
    font-size:22px;
  }

  .pickerHeader .overlayText{
    font-size:13px;
  }

  .activityPickerBody{
    padding-top:7px;
    padding-bottom:7px;
  }

  .activityTab{
    min-height:44px;
    padding-top:7px;
    padding-bottom:7px;
  }

  .activityFamily,
  .activityFamilyRow{
    padding:8px;
  }

  .activityFamilyHeader{
    margin-bottom:5px;
  }

  .activityPresetButton,
  .presetButton,
  .activityPresetOption{
    min-height:44px;
    padding-top:6px;
    padding-bottom:6px;
  }

  .selectedActivityTitle{
    margin-top:7px;
    font-size:20px;
  }

  .selectedActivityDescription{
    font-size:13px;
  }

  .selectedActivityNotation{
    height:58px;
    margin-top:7px;
  }

  .selectedActivityFacts{
    gap:5px;
    margin-top:8px;
  }

  .selectedActivityFacts > div{
    padding:7px 9px;
  }

  .overlayActions{
    min-height:58px;
    padding-top:6px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }
}

@media (max-height:650px) and (min-width:761px){
  .pickerCard{
    height:98vh;
    max-height:98vh;
  }

  .pickerHeader .overlayText{
    display:none;
  }

  .pickerWarning{
    margin-top:4px;
    margin-bottom:0;
    padding-top:7px;
    padding-bottom:7px;
  }

  .activityPickerBody{
    grid-template-columns:minmax(0, 1.65fr) minmax(250px, .55fr);
  }

  .activityTabPanel{
    margin-top:5px;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
  }
}

@media (forced-colors:active){
  .activityTab[aria-selected="true"],
  .activityPresetButton[aria-checked="true"],
  .activityPresetButton.selected,
  .presetButton[aria-checked="true"],
  .presetButton.selected{
    border-width:3px;
  }

  .activityTab[aria-selected="true"]::after,
  .activityPresetButton[aria-checked="true"]::before,
  .activityPresetButton.selected::before,
  .presetButton[aria-checked="true"]::before,
  .presetButton.selected::before{
    forced-color-adjust:none;
  }
}