.scaleSinger{
  --purple:#7157c8;
  --purpleSoft:rgba(113,87,200,.13);
  --good:#278a54;
  --goodSoft:rgba(122,201,67,.18);
  --near:#d97808;
  --nearSoft:rgba(254,146,29,.17);
}

.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;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

.scaleSinger .gameArea{
  min-height:calc(var(--vh, 1vh) * 100);
  height:calc(var(--vh, 1vh) * 100);
  display:grid;
  grid-template-rows:auto auto auto auto;
  align-content:start;
  gap:clamp(8px, 1.5vh, 16px);
  padding:clamp(12px, 2vw, 24px);
  overflow:auto;
  min-width:0;
  background:
    radial-gradient(circle at 10% 12%, rgba(63,169,245,.10), transparent 29%),
    radial-gradient(circle at 90% 10%, rgba(254,122,171,.10), transparent 26%),
    #fff;
}

.modeCard{ width:min(900px, 94vw); }

.modePicker{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  width:100%;
  margin:18px 0 4px;
}

.modeOption{
  appearance:none;
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-height:160px;
  padding:22px;
  border:3px solid rgba(113,87,200,.20);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(113,87,200,.07), rgba(63,169,245,.07));
  color:#1d1930;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.modeOption:hover,
.modeOption:focus-visible{
  transform:translateY(-3px);
  border-color:var(--purple);
  box-shadow:0 15px 32px rgba(113,87,200,.18);
  outline:none;
}

.modeOption.recommended{ border-color:rgba(39,138,84,.48); }

.modeIcon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--purple);
  color:#fff;
  font-size:34px;
  font-weight:1000;
}

.modeCopy{ display:block; min-width:0; }
.modeCopy strong{ display:block; font-size:clamp(23px, 3vw, 32px); line-height:1.05; }
.modeCopy span{ display:block; margin-top:9px; color:var(--muted); font-size:15px; line-height:1.35; font-weight:850; }
.modeCopy .recommendedTag{
  display:inline-block;
  margin-top:8px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(39,138,84,.12);
  color:#216e47;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.activityHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:min(1180px, 100%);
  margin:0 auto;
  padding-left:clamp(0px, 18vw, 190px);
  padding-right:120px;
  min-width:0;
}

.activityKicker,
.resultKicker{
  color:var(--purple);
  font-size:13px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.banner{
  margin:2px 0 0;
  font-size:clamp(28px, 4vw, 48px);
  line-height:1.02;
  font-weight:1100;
}

.subBanner{
  margin:5px 0 0;
  color:var(--muted);
  font-size:clamp(15px, 1.8vw, 20px);
  font-weight:850;
}

.micBadge{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(0,0,0,.035);
  color:var(--muted);
  font-size:14px;
  font-weight:1000;
}

.micDot{
  width:11px;
  height:11px;
  border-radius:50%;
  background:#9b9b9b;
  box-shadow:0 0 0 4px rgba(0,0,0,.06);
}

.micBadge.active{
  color:#276d47;
  border-color:rgba(39,138,84,.30);
  background:rgba(39,138,84,.10);
}

.micBadge.active .micDot{
  background:#2faa68;
  box-shadow:0 0 0 4px rgba(47,170,104,.14);
}

.scalePanel,
.resultsPanel{
  width:min(1180px, 100%);
  margin:0 auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 44px rgba(0,0,0,.10);
  min-width:0;
}

.scalePanel{ padding:clamp(10px, 1.7vw, 20px); }

.rhythmPulse{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  margin:8px auto 0;
  padding:5px 9px;
  border:1px solid rgba(48,38,82,.12);
  border-radius:999px;
  background:rgba(113,87,200,.055);
  color:#504862;
}

.rhythmPulse.hidden{ display:none; }

.rhythmPulseLabel{
  padding-left:2px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.rhythmPulsePills{
  display:flex;
  align-items:center;
  gap:5px;
}

.rhythmPulsePill{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:2px solid rgba(48,38,82,.17);
  border-radius:50%;
  background:#fff;
  color:#5a526a;
  font-size:13px;
  font-weight:1000;
  transition:transform .09s ease, background-color .09s ease, border-color .09s ease, color .09s ease, box-shadow .09s ease;
}

.rhythmPulse.countIn .rhythmPulsePill.active,
.rhythmPulse.phrase .rhythmPulsePill.active{
  transform:scale(1.12);
  border-color:#6048b0;
  background:#7157c8;
  color:#fff;
  box-shadow:0 0 0 4px rgba(113,87,200,.14);
}

.rhythmPulse.phrase .rhythmPulsePill.active{
  border-color:#db7413;
  background:#fe921d;
  box-shadow:0 0 0 4px rgba(254,146,29,.16);
}

.rhythmSingerClassPanel{
  margin:8px 0 0;
  padding:10px 13px;
  border:1px solid #e1cfa9;
  border-left:5px solid #d7a841;
  border-radius:13px;
  background:#fff8e9;
  color:#5d4824;
}

.rhythmSingerClassPanel h2{
  margin:1px 0 3px;
  color:#493719;
  font-size:17px;
  line-height:1.15;
}

.rhythmSingerClassPanel p{
  margin:0;
  font-size:13px;
  line-height:1.38;
  font-weight:800;
}

.openingPromptKicker{
  color:#806126;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.pitchSingerEquivalent #fullscreenBtn{
  min-width:max-content;
  white-space:nowrap;
}

/* Fullscreen is exited only by an explicit End task/reset action. Keep this
   entry-only control out of the hit-test tree without moving the HUD layout. */
#appRoot:fullscreen #fullscreenBtn,
#appRoot:-webkit-full-screen #fullscreenBtn{
  visibility:hidden;
  pointer-events:none;
}

.notationMount{
  width:100%;
  min-height:clamp(132px, 20vh, 188px);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(113,87,200,.035), rgba(63,169,245,.025));
  overflow:hidden;
}

.notationMount .vfWrap{
  width:100%;
  height:100%;
  margin:0 auto;
}

.notationMount svg{ display:block; width:100%; height:100%; }

.rhythmNotationMount{
  min-height:178px;
  overflow-x:auto;
  overflow-y:hidden;
  transition:height .18s ease;
}

.rhythmNotationMount .rhythmVfWrap{
  max-width:none;
  position:relative;
}

.rhythmNotationMount .notationTarget{ cursor:pointer; outline:none; }
.rhythmNotationMount:focus{ outline:none; }
.rhythmNotationMount .notationTapArea{
  fill:transparent;
  stroke:transparent;
  stroke-width:3;
  pointer-events:all;
}
.rhythmNotationMount .notationHalo{
  fill:transparent;
  stroke:transparent;
  stroke-width:3;
  pointer-events:none;
}
.rhythmNotationMount .notationTarget.found .notationHalo{
  fill:rgba(122,201,67,.20);
  stroke:#278a54;
}

.rhythmPlayhead{
  opacity:0;
  pointer-events:none;
  transition:opacity .12s ease;
}
.rhythmPlayhead.active{ opacity:1; }
.rhythmPlayhead path{
  fill:#fe921d;
  stroke:#9b4e00;
  stroke-width:1.5;
  vector-effect:non-scaling-stroke;
}

.keyboardPanel{
  margin-top:14px;
  padding:11px;
  border:1px solid rgba(0,0,0,.11);
  border-radius:19px;
  background:linear-gradient(180deg, rgba(20,25,45,.94), rgba(8,12,25,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.scaleSinger:not(.pianoVisible) .keyboardPanel{ display:none; }

.keyboardHeadingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 3px 8px;
  color:#fff;
  font-size:13px;
  font-weight:950;
}

.keyboardHeadingRow span{
  color:rgba(255,255,255,.68);
  font-size:11px;
  text-align:right;
}

.scaleCards{
  display:grid;
  grid-template-columns:repeat(5, minmax(80px, 1fr));
  gap:clamp(7px, 1.2vw, 14px);
  padding:8px 3px 3px;
  width:100%;
  min-width:0;
}

.noteCard{
  position:relative;
  min-height:clamp(68px, 10vh, 92px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:3px solid rgba(0,0,0,.11);
  border-radius:20px;
  background:linear-gradient(155deg, rgba(113,87,200,.06), rgba(63,169,245,.06));
  transition:transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.noteCard.dimmed{ opacity:.36; transform:scale(.97); }

.noteCard.active{
  opacity:1;
  transform:translateY(-4px) scale(1.025);
  border-color:var(--purple);
  box-shadow:0 15px 32px rgba(113,87,200,.22), inset 0 0 0 5px rgba(113,87,200,.11);
}

.noteNumber{
  position:absolute;
  top:9px;
  left:10px;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:rgba(0,0,0,.07);
  color:rgba(0,0,0,.66);
  font-size:12px;
  font-weight:1000;
}

.noteName{
  font-size:clamp(23px, 3vw, 34px);
  line-height:1;
  font-weight:1100;
}

.notePrompt{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:1000;
  text-align:center;
}

.noteDetail{
  min-height:18px;
  color:rgba(0,0,0,.64);
  font-size:12px;
  font-weight:900;
}

.noteCard.resultGood{
  border-color:rgba(39,138,84,.52);
  background:var(--goodSoft);
}

.noteCard.resultGood::after{
  content:"✓";
  position:absolute;
  top:7px;
  right:9px;
  color:var(--good);
  font-size:18px;
  font-weight:1100;
}

.noteCard.resultGood .notePrompt{ color:#216e47; background:rgba(39,138,84,.10); }

.noteCard.resultNear{
  border-color:rgba(217,120,8,.48);
  background:var(--nearSoft);
}

.noteCard.resultNear .notePrompt{ color:#995300; background:rgba(217,120,8,.10); }

.noteCard.resultMissed{
  border-color:rgba(0,0,0,.18);
  background:rgba(0,0,0,.045);
}

.matchPanel{
  display:grid;
  grid-template-columns:minmax(150px, .34fr) minmax(320px, 1fr);
  gap:clamp(12px, 2vw, 22px);
  margin-top:12px;
  padding:clamp(12px, 1.7vw, 18px);
  border:2px solid rgba(113,87,200,.18);
  border-radius:20px;
  background:rgba(113,87,200,.045);
}

.scaleSinger.teacherObserved .matchPanel{
  grid-template-columns:minmax(260px, 520px);
  justify-content:center;
}

.scaleSinger.teacherObserved .matchPanel .tunerPanel{
  display:none;
}

.scaleSinger.teacherObserved .targetPanel{
  min-height:150px;
}

.micBadge.teacherObserved{
  color:#503c9b;
  border-color:rgba(113,87,200,.28);
  background:rgba(113,87,200,.10);
}

.micBadge.teacherObserved .micDot{
  background:#7157c8;
  box-shadow:0 0 0 4px rgba(113,87,200,.14);
}

.targetPanel{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:8px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 9px 24px rgba(0,0,0,.07);
}

.targetKicker,
.tunerLabel{
  color:var(--purple);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.targetNote{
  margin:3px 0;
  color:#1e1739;
  font-size:clamp(46px, 7vw, 70px);
  line-height:1;
  font-weight:1100;
}

.pianoState{
  display:flex;
  align-items:center;
  gap:7px;
  color:#5b489f;
  font-size:13px;
  font-weight:950;
}

.pianoState span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border-radius:50%;
  background:var(--purpleSoft);
  font-size:17px;
}

.tunerPanel{ min-width:0; }

.tunerReadoutRow,
.holdLabelRow{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.livePitchName{
  display:block;
  min-height:31px;
  margin-top:2px;
  color:#201c2e;
  font-size:clamp(20px, 3vw, 30px);
  line-height:1;
}

.livePitchDetail{
  color:var(--muted);
  font-size:clamp(15px, 2vw, 20px);
  text-align:right;
}

.livePitchDetail.low{ color:#2674aa; }
.livePitchDetail.good{ color:var(--good); }
.livePitchDetail.high{ color:#c46000; }

.tunerTrack{
  position:relative;
  height:48px;
  margin-top:9px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:15px;
  background:
    linear-gradient(90deg, rgba(63,169,245,.14) 0 37.5%, rgba(122,201,67,.24) 37.5% 62.5%, rgba(254,146,29,.16) 62.5% 100%);
  overflow:hidden;
}

.tunerTrack::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(39,138,84,.55);
  transform:translateX(-50%);
}

.tunerCentreBand{
  position:absolute;
  left:37.5%;
  top:0;
  bottom:0;
  width:25%;
  border-left:2px dashed rgba(39,138,84,.38);
  border-right:2px dashed rgba(39,138,84,.38);
}

.tunerMarker{
  position:absolute;
  left:50%;
  top:5px;
  width:13px;
  height:38px;
  border-radius:999px;
  background:var(--purple);
  box-shadow:0 3px 12px rgba(46,35,88,.34);
  transform:translateX(-50%);
  transition:left .08s linear, opacity .12s ease, background .12s ease;
}

.tunerMarker.waiting{ opacity:.18; }
.tunerMarker.good{ background:var(--good); }

.tunerLabels{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  margin-top:4px;
  color:var(--muted);
  font-size:11px;
  font-weight:950;
}

.tunerLabels span:nth-child(2){ text-align:center; color:#367a58; }
.tunerLabels span:last-child{ text-align:right; }

.holdLabelRow{
  align-items:center;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}

.holdTrack{
  height:14px;
  margin-top:5px;
  border-radius:999px;
  background:rgba(0,0,0,.09);
  overflow:hidden;
}

.holdTrack span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #3fa9f5, #7ac943);
  transition:width .08s linear;
}

.activityActions,
.resultActions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.completionText{
  margin:12px 0 0;
  color:var(--muted);
  font-size:16px;
  font-weight:850;
}

#partOneCompleteOverlay,
#partTwoCompleteOverlay{
  background:rgba(23,18,42,.74);
}

.completionModalCard{
  display:flex;
  flex-direction:column;
  width:min(720px, 94vw);
  max-height:92vh;
  padding:0;
  overflow:hidden;
  border:3px solid #82bd65;
  background:#fff;
  opacity:1;
  box-shadow:0 28px 90px rgba(0,0,0,.42);
}

.completionModalBody{
  min-height:0;
  padding:clamp(18px, 3vw, 30px);
  overflow-y:auto;
  background:linear-gradient(180deg, #fff 0%, #f5faef 100%);
}

.completionModalIcon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 8px;
  border-radius:50%;
  background:var(--goodSoft);
  color:var(--good);
  font-size:38px;
  font-weight:1100;
}

.completionModalScore{
  width:fit-content;
  margin:12px auto;
  padding:10px 16px;
  border-radius:999px;
  background:var(--purpleSoft);
  color:#503c9b;
  font-size:17px;
  font-weight:1000;
}

.completionNextSteps{
  margin:16px auto 0;
  padding:15px;
  border:2px solid rgba(113,87,200,.18);
  border-radius:16px;
  background:rgba(113,87,200,.07);
}

.completionNextSteps strong{
  display:block;
  color:var(--purple);
  font-size:18px;
  font-weight:1100;
}

.completionNextSteps p{
  margin:5px 0 0;
  color:#332b4c;
  font-size:16px;
  line-height:1.4;
  font-weight:850;
}

.completionModalActions{
  flex:0 0 auto;
  margin:0;
  padding:15px 18px 18px;
  border-top:2px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow:0 -8px 22px rgba(0,0,0,.07);
}

.completionModalActions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  opacity:1;
}

#partTwoCompleteOverlay.resultStaveVisible .completionModalCard{
  width:min(980px, 96vw);
}

.resultStaveSection{
  margin:18px auto 0;
  padding:16px;
  border:2px solid rgba(39,138,84,.20);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  text-align:left;
}

.resultStaveHeading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.resultStaveHeading h3{
  margin:2px 0 0;
  color:#211a38;
  font-size:clamp(20px, 3vw, 28px);
  line-height:1.12;
}

.resultStaveBadge{
  flex:0 0 auto;
  padding:7px 10px;
  border-radius:999px;
  background:var(--purpleSoft);
  color:#503c9b;
  font-size:12px;
  font-weight:1000;
}

.resultStaveHelp{
  color:#504862;
  font-size:13px;
  line-height:1.42;
  font-weight:800;
}

.resultStaveHelp{ margin:8px 0 0; }

.resultStaveMount{
  width:100%;
  min-height:150px;
  margin-top:12px;
  border:1px solid rgba(0,0,0,.13);
  border-radius:14px;
  overflow-x:auto;
  overflow-y:hidden;
  background:#fff;
}

.resultStaveKey{
  display:grid;
  grid-template-columns:auto minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items:center;
  gap:7px 9px;
  margin-top:9px;
  color:#504862;
  font-size:12px;
  font-weight:900;
}

.resultKeySwatch{
  display:inline-block;
  width:22px;
  height:14px;
  border:2px solid currentColor;
  border-radius:5px;
}

.resultKeySwatch.held{ color:#198754; background:#198754; }
.resultKeySwatch.retry{ color:#b86b00; background:#b86b00; }
.resultKeySwatch.noClearVoice{ color:#c92a2a; background:#c92a2a; }
.resultKeySwatch.rest{ color:#68717b; background:#68717b; }

#continuePartTwoBtn,
#individualTryBtn{
  border-color:#6048b0;
  background:#7157c8;
  color:#fff;
}

#repeatPartOneBtn{
  border-color:rgba(48,38,82,.24);
  background:#f4f1fb;
  color:#302652;
}

#endPartOneTaskBtn,
#endTaskBtn{
  border-color:rgba(184,45,45,.34);
  background:#fff3f3;
  color:#9b2525;
}

.soundButton,
.singButton{
  min-width:min(230px, 42vw);
  min-height:56px;
  font-size:18px;
}

.stopButton{
  border-color:rgba(255,29,37,.35);
  background:rgba(255,29,37,.09);
}

.activityStatus{
  width:min(720px, 96%);
  margin:12px auto 0;
  padding:10px 12px;
  border-radius:13px;
  background:var(--nearSoft);
  color:#7b490c;
  font-weight:950;
  text-align:center;
}

.resultsPanel{
  align-self:start;
  padding:clamp(12px, 2vw, 22px);
  overflow:visible;
}

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

.scoreHeadline{
  margin:2px 0 0;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.05;
}

.scoreBadge{
  flex:0 0 auto;
  min-width:86px;
  padding:12px 15px;
  border-radius:18px;
  background:var(--purpleSoft);
  color:#503c9b;
  font-size:24px;
  font-weight:1100;
  text-align:center;
}

.hud{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:2px 0;
  min-width:0;
}

.privacyPill{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(39,138,84,.09);
  color:#286b49;
  font-size:12px;
  font-weight:950;
}

.rangePicker .levelCard{
  display:block;
  min-height:126px;
}

.rangePicker .levelHead{ display:flex; }
.rangePicker .levelTitle,
.rangePicker .levelTag,
.rangePicker .levelDesc{ display:block; }

.microphoneCard{ width:min(900px, 94vw); }

.feedbackPicker{ margin-top:20px; }

.feedbackOption{ min-height:184px; }

.microphoneOptionIcon{
  background:linear-gradient(145deg, #7157c8, #5540aa);
  font-size:29px;
}

.teacherOptionIcon{
  background:linear-gradient(145deg, #278a54, #1f7044);
}

.microphoneSetupPanel{
  width:min(640px, 100%);
  margin:18px auto 0;
}

.selectedFeedback{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 15px;
  border:1px solid rgba(113,87,200,.20);
  border-radius:17px;
  background:rgba(113,87,200,.07);
  color:#1d1930;
  text-align:left;
}

.selectedFeedbackIcon{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:13px;
  background:var(--purple);
  color:#fff;
  font-size:22px;
}

.selectedFeedback strong{
  display:block;
  font-size:17px;
  font-weight:1000;
}

.selectedFeedback small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  font-weight:850;
}

.microphoneTest{
  width:min(520px, 96%);
  margin:14px auto;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(0,0,0,.025);
}

.meterLabelRow{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:950;
}

.micMeter{
  height:20px;
  margin:9px 0 14px;
  border-radius:999px;
  background:rgba(0,0,0,.09);
  overflow:hidden;
}

.micMeter span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #7ac943, #3fa9f5, #fe921d);
  transition:width .08s linear;
}

.detectedPitch{
  min-height:64px;
  display:grid;
  place-items:center;
  color:var(--purple);
  font-size:clamp(25px, 5vw, 38px);
  line-height:1;
  font-weight:1100;
}

.detectedHelp{ color:var(--muted); font-size:12px; font-weight:850; }

.microphoneSetupActions{ margin-top:12px; }

.microphoneBackActions{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(0,0,0,.08);
}

@media (max-width:760px){
  .scaleSinger .gameArea{ padding:10px; }
  .activityHeader{ padding:50px 0 0; align-items:flex-start; }
  .micBadge{ padding:8px 10px; font-size:12px; }
  .notationMount{ min-height:140px; }
  .scaleCards{ grid-template-columns:repeat(5, minmax(65px, 1fr)); }
  .noteCard{ min-height:72px; border-radius:16px; }
  .notePrompt,
  .noteDetail{ display:none; }
  .matchPanel{ grid-template-columns:140px minmax(0, 1fr); }
  .hud{ align-items:flex-start; }
  .privacyPill{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .rhythmNotationMount{ transition:none; }
  .rhythmPulsePill{ transition:none; }
  .rhythmPulse .rhythmPulsePill.active{ transform:none; }
}

@media (max-width:520px){
  .modePicker{ grid-template-columns:1fr; gap:9px; }
  .modeOption{ min-height:0; padding:15px; border-radius:17px; }
  .modeIcon{ width:46px; height:46px; border-radius:14px; font-size:27px; }
  .modeCopy strong{ font-size:22px; }
  .modeCopy span{ margin-top:5px; font-size:13px; }
  .activityHeader{ flex-direction:column; gap:7px; }
  .banner{ font-size:27px; }
  .subBanner{ font-size:14px; }
  .scaleCards{
    grid-template-columns:repeat(5, minmax(0, 1fr));
  }
  .noteCard{ min-height:58px; border-width:2px; border-radius:12px; }
  .noteNumber{ width:19px; height:19px; top:5px; left:5px; font-size:10px; }
  .noteName{ font-size:20px; }
  .keyboardPanel{ padding:8px; border-radius:15px; }
  .keyboardHeadingRow{ margin-bottom:6px; }
  .keyboardHeadingRow span{ display:none; }
  .scaleKeyboard{ height:155px; }
  .matchPanel{ grid-template-columns:1fr; }
  .targetPanel{ flex-direction:row; gap:12px; min-height:64px; }
  .targetKicker{ display:none; }
  .targetNote{ font-size:42px; }
  .pianoState{ font-size:12px; }
  .scalePanel,
  .resultsPanel{ border-radius:17px; }
  .soundButton,
  .singButton{ width:100%; min-width:0; }
  .resultHeadingRow{ align-items:flex-start; }
  .scoreBadge{ min-width:72px; font-size:20px; }
  .resultStaveKey{ grid-template-columns:auto 1fr; }
  .completionModalBody{ padding:16px; }
  .completionModalIcon{ width:52px; height:52px; font-size:31px; }
  .completionNextSteps{ margin-top:10px; padding:11px; }
  .completionModalActions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:12px;
  }
  .completionModalActions .btn{ width:100%; min-width:0; }
}

@media (max-height:680px) and (min-width:700px){
  .scaleSinger .gameArea{ gap:7px; padding-top:8px; padding-bottom:8px; }
  .banner{ font-size:30px; }
  .subBanner{ font-size:14px; }
  .notationMount{ min-height:120px; }
  .noteCard{ min-height:62px; }
  .noteName{ font-size:27px; }
  .matchPanel{ margin-top:7px; padding:9px; }
  .activityActions{ margin-top:8px; }
  .btn{ min-height:42px; padding:9px 12px; }
  .completionModalBody{ padding:14px 22px; }
  .completionModalIcon{ width:48px; height:48px; margin-bottom:5px; font-size:29px; }
  .completionModalScore{ margin:8px auto; padding:7px 13px; }
  .completionNextSteps{ margin-top:9px; padding:10px; }
  .completionModalActions{ padding:10px 14px 12px; }
}