/* Estructura, controles, respuestas y estados comunes de ejercicios. */
/* Shared practice controls; desktop equivalents for lesson close and centering. */
.practice-bar {
  position: absolute;
  top: 46px;
  left: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
}
.practice-bar button {
  height: 30px;
  min-height: 30px;
  padding: 3px 9px;
  border: 1px solid var(--color-line-practice);
  border-radius: 10px;
  background: var(--ad-tint-cream);
  color: #426c8e;
  font-size: calc(12px * var(--text-scale, 1));
}

#practice-status {
  font-size: calc(13px * var(--text-scale, 1));
  font-weight: 600;
  color: #3e6986;
}

.practice-active #speech {
  display: none;
}

#practice-repeat {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
}

.practice-bar[data-result="wrong"] {
  border-color: #e2bd7b;
  background: var(--ad-tint-cream);
}
.practice-bar[data-result="correct"] {
  border-color: #a8d3b8;
  background: #f0faf3;
}
.stage-toolbar .practice-bar {
  position: static;
  max-width: none;
  flex: none;
}
.stage-toolbar .practice-bar button {
  height: 33px;
  min-height: 33px;
}

.practice-active .english-buttons [data-practice-available="false"] {
  display: none;
}

.practice-active[data-practice-mode="listen"] .english-buttons strong {
  font-size: 0;
}
.practice-active[data-practice-mode="listen"] .english-buttons strong:after {
  display: none;
}
.practice-active[data-practice-mode="listen"] .english-buttons strong:before {
  content: attr(data-icon);
  font-size: calc(23px * var(--text-scale, 1));
}
.practice-active[data-practice-mode="listen"] .quick-action[data-command="jump"] strong:after {
  display: none;
}
.practice-active[data-practice-mode="listen"] .quick-action[data-command="jump"] strong:before {
  content: "🐾";
  font-size: calc(21px * var(--text-scale, 1));
}
.practice-active .practice-hint {
  outline: 2px solid #e1b661;
  outline-offset: 1px;
}
/* Practice has its own progress cue; omit the unrelated movement status. */
.practice-active #motion-status {
  display: none;
}

html[data-appearance="dark"] #practice-next {
  background: #305e63;
  color: var(--ad-mint-ink);
  border-color: #72a89c;
}
.practice-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.practice-choices button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  min-height: 54px;
  padding: 5px;
  border: 1px solid var(--ad-line-soft);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--ad-ink-steel);
}
.practice-choices button:active {
  background: var(--color-surface-control-active);
}
.practice-active[data-practice-mode="pictures"] .choice-icon {
  font-size: calc(30px * var(--text-scale, 1));
}
html[data-appearance="dark"] .practice-choices button {
  background: var(--ad-soft);
  color: var(--ad-ink-steel);
  border-color: #526e88;
}
.practice-active #vocabulary-section {
  display: none;
}
.practice-active:not([data-practice-mode="watch"]):not([data-learning-category="movement"]):not(
    [data-learning-category="magic"]
  )
  #english-section {
  display: block !important;
}
.practice-active .english-buttons,
.practice-active .control-section > .pace-buttons {
  display: none;
}
.practice-active[data-practice-mode="listen"] .choice-label {
  display: none;
}
.panel :is(.command, .effect, .vocabulary-buttons button, .practice-choices button):focus-visible {
  outline: 2px solid #70a8d6;
  outline-offset: 2px;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .practice-bar {
    top: 46px;
  }

  #practice-status {
    min-width: 0;
    font-size: calc(12px * var(--text-scale, 1));
  }

  #practice-next {
    flex: none;
  }
}
@media (max-width: 850px) and (orientation: portrait),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) {
  .practice-bar.is-practicing {
    top: 8px;
    bottom: auto;
    left: 8px;
    right: 8px;
    max-width: none;
    min-width: 0;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .stage-toolbar .practice-bar button {
    padding: 3px 6px;
    font-size: calc(11px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) {
  .practice-active main {
    grid-template-rows: minmax(180px, 1fr) auto;
  }
}
/* Up to 1100px the stage is narrower than the question panel plus the zoom control, which sat under it. */
@media (max-width: 1100px) {
  .practice-active .stage-toolbar {
    top: auto;
    bottom: 12px;
    left: auto;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .practice-bar.is-practicing {
    bottom: auto;
  }

  .practice-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .practice-choices button {
    min-height: 48px;
    padding: 4px 2px;
  }
}
#practice-mode {
  min-width: 0;
  height: 30px;
  border: 1px solid var(--color-line-practice);
  border-radius: 8px;
  background: white;
  color: #426c8e;
  font: inherit;
  font-size: calc(12px * var(--text-scale, 1));
  width: 100%;
  grid-column: 1/4;
  grid-row: 2;
  display: none !important;
}
.practice-bar:not(.is-practicing) #practice-toggle {
  display: none;
}
.practice-bar:not(.is-practicing) {
  display: none;
}
.practice-bar.is-practicing {
  border: 1px solid var(--color-line-practice);
  border-radius: 12px;
  background: #fffffff2;
  display: grid;
  min-width: 240px;
  top: 12px;
  width: min(520px, calc(100% - 24px));
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
  padding: 10px;
}

#practice-title {
  grid-column: 1/3;
  grid-row: 2;
  font-size: calc(15px * var(--text-scale, 1));
}
.practice-bar.is-practicing #practice-repeat {
  width: 34px;
}

.practice-bar.is-practicing #practice-next {
  grid-column: 1/4;
  width: 100%;
  white-space: normal;
}
.practice-active .mobile-controls,
.practice-active .playground > .dpad,
.practice-active .control-section > .pace-buttons {
  display: none !important;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .practice-bar.is-practicing {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 8px;
  }

  .practice-active .lesson-dock {
    display: none;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .practice-active .playground {
    min-height: 220px;
  }
}
/* One return action, one instruction, and one next step while playing. */
.practice-bar.is-practicing #practice-title {
  grid-column: 2/4;
  grid-row: 1;
  text-align: right;
  align-self: center;
  font-size: calc(13px * var(--text-scale, 1));
}
.practice-bar.is-practicing #practice-status {
  padding: 3px 12px;
  font-size: calc(15px * var(--text-scale, 1));
  line-height: 1.3;
  grid-column: 1/3;
  grid-row: 2;
}
.practice-bar.is-practicing #practice-repeat {
  grid-column: 3;
  grid-row: 2;
}
#practice-help {
  grid-column: 1/4;
  font-size: calc(11px * var(--text-scale, 1));
  color: var(--ad-ink-muted);
  line-height: 1.3;
  grid-row: 3;
}
.practice-bar.is-practicing #practice-next {
  grid-row: 4;
}
.practice-bar.is-practicing:not([data-result="correct"]) #practice-next {
  min-height: 24px;
  height: auto;
  background: transparent;
  border-color: transparent;
  color: #527594;
  text-align: right;
  padding: 0 3px;
  box-shadow: none;
  font-size: calc(11px * var(--text-scale, 1));
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .practice-active .stage-toolbar {
    bottom: 10px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .practice-bar.is-practicing #practice-help {
    display: none;
  }

  .practice-bar.is-practicing {
    padding: 6px;
    gap: 4px;
  }

  .practice-bar.is-practicing #practice-status {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .practice-bar.is-practicing #practice-next {
    grid-row: 3;
  }
}
/* Challenge game feel: an egg trail to hatch, chunky answer cards, a streak and a reward at the end. */
#practice-progress {
  display: none;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-progress {
  grid-column: 1/4;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-status {
  grid-row: 3;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-repeat {
  grid-row: 3;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-help {
  grid-row: 4;
}
.practice-active:not([data-practice-mode="watch"]) .practice-bar.is-practicing #practice-next {
  grid-row: 6;
}
#practice-trail {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#practice-trail[hidden],
#practice-streak[hidden] {
  display: none;
}
#practice-streak .streak-short {
  display: none;
}
#practice-trail li {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px dashed #c9dbe9;
  border-radius: 50%;
  background: var(--ad-neutral-face);
  font-size: 21px;
  line-height: 1;
}
#practice-trail [data-state="pending"] {
  opacity: 0.45;
  filter: grayscale(0.7);
}
#practice-trail [data-state="current"] {
  border: 2px solid #f0c75e;
  background: var(--ad-tint-gold);
  animation: egg-wobble 1.8s ease-in-out infinite;
}
#practice-trail [data-state="first"] {
  border: 1px solid #e9c55a;
  background: #fff3c4;
}
#practice-trail [data-state="helped"] {
  border: 1px solid #a9d3b9;
  background: var(--ad-tint-mint);
}
#practice-trail [data-new="true"] {
  animation: egg-hatch 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
#practice-streak {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffe9dc;
  color: #a8461f;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 700;
  white-space: nowrap;
  animation: streak-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.practice-active #practice-choices button {
  box-shadow: 0 3px 0 var(--color-bevel-practice);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.practice-active #practice-choices button:active:not(:disabled) {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 var(--color-bevel-practice);
}
.practice-active #practice-choices [data-answer="correct"] {
  background: var(--ad-tint-mint);
  border-color: #7fb69a;
  color: var(--ad-ink-green);
  opacity: 1;
  box-shadow: 0 3px 0 #c0dfcf;
  animation: choice-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.practice-active #practice-choices [data-shake="true"] {
  animation: choice-shake 0.4s ease;
}
.practice-bar[data-auto-next="true"] #practice-next {
  animation: next-glow 1.2s ease-in-out infinite;
}
.practice-bar.is-practicing[data-result="complete"] #practice-next {
  min-height: 40px;
  border-color: var(--ad-mint-edge);
  background: #b1e5d2;
  color: var(--ad-mint-ink);
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 700;
  text-align: center;
  box-shadow: 0 3px 0 #d9a92a;
}
@keyframes egg-wobble {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(-9deg);
  }
  30% {
    transform: rotate(8deg);
  }
  45% {
    transform: rotate(-4deg);
  }
}
@keyframes egg-hatch {
  0% {
    transform: scale(0.4) rotate(-20deg);
  }
  70% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes streak-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes choice-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes choice-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
@keyframes next-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 #7fc49a00;
  }
  50% {
    box-shadow: 0 0 0 4px #7fc49a55;
  }
}
html[data-appearance="dark"] #practice-trail li {
  background: var(--ad-soft);
  border-color: #58748a;
}
html[data-appearance="dark"] #practice-trail [data-state="current"] {
  background: var(--ad-tint-gold);
  border-color: #c9a64a;
}
html[data-appearance="dark"] #practice-trail [data-state="first"] {
  background: #544b2f;
  border-color: #ba9c4f;
}
html[data-appearance="dark"] #practice-trail [data-state="helped"] {
  background: var(--ad-tint-mint);
  border-color: #76ae92;
}
html[data-appearance="dark"] #practice-streak {
  background: #5a3a2c;
  color: #ffd2bd;
}
html[data-appearance="dark"] .practice-active #practice-choices button {
  box-shadow: 0 3px 0 #1d3040;
}
html[data-appearance="dark"] .practice-active #practice-choices [data-answer="correct"] {
  background: var(--ad-tint-mint);
  border-color: #76ae92;
  color: var(--ad-ink-green);
  box-shadow: 0 3px 0 #1f3b33;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  #practice-trail {
    gap: 4px;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  #practice-trail li {
    width: 24px;
    height: 24px;
    font-size: 15px;
  }
}
/* A finished game shows its reward card; the spent answer cards go away (ids outrank the play-mode rule above). */
.practice-active[data-practice-done] #english-section#english-section {
  display: none !important;
}
.practice-choices .choice-icon {
  font-size: calc(32px * var(--text-scale, 1));
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .practice-bar.is-practicing #practice-repeat {
    min-height: 40px;
    height: 40px;
  }

  .practice-bar.is-practicing #practice-repeat {
    width: 40px;
    font-size: calc(18px * var(--text-scale, 1));
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .practice-choices .choice-icon {
    font-size: calc(30px * var(--text-scale, 1));
  }

  .practice-choices .choice-label {
    font-size: calc(12px * var(--text-scale, 1));
  }

  #practice-trail li {
    width: 30px;
    height: 30px;
    font-size: 19px;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) and (min-height: 800px) {
  .practice-bar.is-practicing #practice-repeat {
    min-height: 40px;
    height: 40px;
  }

  .practice-bar.is-practicing #practice-repeat {
    width: 40px;
    font-size: calc(18px * var(--text-scale, 1));
  }

  .practice-bar.is-practicing:not([data-result="correct"]) #practice-next {
    min-height: 36px;
  }

  .practice-choices button {
    min-height: 56px;
  }
}
/* The back pill itself lives in navigation.css; the challenge bar only places it. */
.practice-bar.is-practicing #practice-toggle {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}
/* Desktop challenges: the question sits on the stage and the answers in the side panel, so while an
   answer is awaited the panel takes the challenge colour and the question card points to it. */
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .practice-active:not([data-practice-done]):not([data-practice-mode="watch"])
    .panel
    #english-section {
    border: 2px solid var(--ad-line-gold);
    box-shadow: 0 0 0 4px #ffe9ad80;
    border-radius: 18px;
  }

  .practice-active:not([data-practice-mode="watch"])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])::after {
    content: "👉";
    position: absolute;
    right: -30px;
    top: 50%;
    font-size: 24px;
    transform: translateY(-50%);
    animation: point-right 1.4s ease-in-out infinite;
    pointer-events: none;
  }

  html[data-appearance="dark"]
    .practice-active:not([data-practice-done]):not([data-practice-mode="watch"])
    .panel
    #english-section {
    border-color: var(--ad-line-gold);
    box-shadow: 0 0 0 4px #5c523280;
  }
}
@keyframes point-right {
  0%,
  100% {
    transform: translate(0, -50%);
  }
  50% {
    transform: translate(6px, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .practice-bar.is-practicing::after {
    animation: none !important;
  }
}
html[data-calm="true"] .practice-bar.is-practicing::after {
  animation: none !important;
}

.practice-choices .illustrated-icon {
  flex: none;
  width: 64px;
  height: 64px;
  font-size: 48px;
  line-height: 64px;
}
/* Picture-only answers can use the spare height inside the existing card. */
#practice-choices
  > button[data-practice-choice]:not(:has(.choice-label))
  .choice-icon.illustrated-icon {
  flex-grow: 1;
  width: 100%;
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .practice-choices .illustrated-icon {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
}
#practice-next {
  border-color: #afd3bd;
  background: var(--ad-tint-mint);
  font-weight: 600;
  grid-column: 1/4;
  grid-row: 3;
  white-space: nowrap;
  min-height: 32px;
  font-size: calc(12px * var(--text-scale, 1));
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 9px;
  box-shadow:
    inset 0 2px 0 #ffffff60,
    0 3px 0 #4d795f;
}

/* Listen and type: a stable keypad with no written answer or picture clue. */
.practice-active[data-practice-mode="numbers"] #practice-choices {
  display: block;
}
.number-keypad {
  width: min(100%, 320px);
  margin-inline: auto;
  text-align: center;
}
.number-entry {
  display: block;
  min-height: 52px;
  margin-block: 6px;
  border: 2px solid var(--color-bevel-practice);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--ad-ink);
  font-size: calc(32px * var(--text-scale, 1));
  font-weight: 800;
}
.number-keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.practice-active #practice-choices .number-keys button {
  min-height: 48px;
  font-weight: 800;
}
.number-feedback {
  min-height: 20px;
  line-height: 20px;
  margin-block: 8px 0;
  font-size: calc(13px * var(--text-scale, 1));
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .practice-active[data-practice-mode="numbers"] .panel {
    grid-row: 1 / -1;
  }
  .practice-active[data-practice-mode="numbers"] .number-entry {
    min-height: 40px;
    margin-block: 3px;
    font-size: calc(28px * var(--text-scale, 1));
  }
  .practice-active[data-practice-mode="numbers"] .number-keys {
    gap: 5px;
  }
  .practice-active[data-practice-mode="numbers"] #practice-choices .number-keys button {
    min-height: 44px;
  }
}

/* Number dictation keeps its instructions above a generous, unobstructed hero area. */
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing {
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 8px;
  padding: 8px;
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-progress {
  grid-row: 2;
  grid-column: 1 / 3;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-repeat {
  grid-row: 2;
  grid-column: 3;
  min-width: 44px;
  min-height: 44px;
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-status {
  grid-row: 3;
  grid-column: 1 / -1;
  font-size: calc(13px * var(--text-scale, 1));
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-help {
  display: none;
}
.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  .practice-bar.is-practicing
  #practice-next {
  display: none;
}

.number-level {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--color-line-practice);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--ad-ink);
  font: inherit;
  font-size: calc(13px * var(--text-scale, 1));
}
.practice-active[data-practice-mode="numbers"] #practice-trail {
  gap: 3px;
}
.practice-active[data-practice-mode="numbers"] #practice-trail li {
  width: 26px;
  height: 26px;
  font-size: 18px;
}
.practice-active[data-practice-mode="numbers"] #practice-streak {
  padding: 3px 5px;
  font-size: 10px;
}
.practice-active #practice-choices [data-number-next] {
  background: var(--ad-tint-mint);
  color: var(--ad-ink-green-2);
  border-color: #afd3bd;
  font-size: 18px;
}
html[data-appearance="dark"] .practice-active #practice-choices [data-number-next] {
  background: #214e3a;
  color: var(--ad-ink-green-2);
}
@media (max-width: 360px) {
  .practice-active[data-practice-mode="numbers"] #practice-streak {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Number tools belong to the hero; the keypad uses the app's toy palette. */
.practice-active[data-practice-mode="numbers"] .number-tools {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.practice-active[data-practice-mode="numbers"][data-practice-done] .practice-bar #practice-status {
  grid-row: 4;
}
.number-tools .number-level {
  flex: 1;
  width: 0;
  min-height: 44px;
  border: 1px solid var(--ad-gold-edge);
  border-radius: 14px;
  background: linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  box-shadow:
    inset 0 2px 0 #ffffffa0,
    0 3px 0 var(--ad-gold-base);
  color: var(--ad-gold-ink);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
}
.number-tools :is(.mobile-zoom, .zoom-controls) {
  position: static;
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  width: auto;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.number-tools :is(.mobile-zoom, .zoom-controls) button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--ad-blue-edge);
  border-radius: 13px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  box-shadow:
    inset 0 2px 0 #ffffffa0,
    0 3px 0 var(--ad-blue-base);
  color: var(--ad-blue-ink);
  font-size: 24px;
  font-weight: 800;
}
.number-tools .mobile-zoom span {
  display: none;
}
.number-tools :is(output, .zoom-readout) {
  width: 36px;
  color: var(--ad-ink);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
}
.practice-active #practice-choices .number-keypad {
  padding: 10px;
  border: 2px solid var(--ad-purple-edge);
  border-radius: 24px;
  background: linear-gradient(var(--ad-purple-top), var(--ad-purple-face));
  box-shadow:
    0 4px 0 var(--ad-purple-base),
    inset 0 2px 0 #ffffffa0;
}
.practice-active #practice-choices .number-entry {
  margin-block: 0 10px;
  min-height: 52px;
  border: 2px solid var(--ad-gold-edge);
  border-radius: 16px;
  background: var(--ad-gold-top);
  color: var(--ad-gold-ink);
  box-shadow: inset 0 3px 0 #0000000d;
  font-size: calc(36px * var(--text-scale, 1));
}
.practice-active #practice-choices .number-keypad[data-result="correct"] .number-entry {
  background: var(--ad-mint-top);
  border-color: var(--ad-mint-edge);
  color: var(--ad-mint-ink);
}
.practice-active #practice-choices .number-keys button {
  --key-top: var(--ad-blue-top);
  --key-face: var(--ad-blue-face);
  --key-edge: var(--ad-blue-edge);
  --key-base: var(--ad-blue-base);
  --key-ink: var(--ad-blue-ink);
  border: 1px solid var(--key-edge);
  border-radius: 15px;
  background: linear-gradient(var(--key-top), var(--key-face));
  box-shadow:
    inset 0 2px 0 #ffffffb0,
    0 4px 0 var(--key-base);
  color: var(--key-ink);
  font-size: calc(28px * var(--text-scale, 1));
}
.practice-active #practice-choices .number-keys button:nth-child(3n + 2) {
  --key-top: var(--ad-gold-top);
  --key-face: var(--ad-gold-face);
  --key-edge: var(--ad-gold-edge);
  --key-base: var(--ad-gold-base);
  --key-ink: var(--ad-gold-ink);
}
.practice-active #practice-choices .number-keys button[data-key="⌫"] {
  --key-top: var(--ad-coral-top);
  --key-face: var(--ad-coral-face);
  --key-edge: var(--ad-coral-edge);
  --key-base: var(--ad-coral-base);
  --key-ink: var(--ad-coral-ink);
}
.practice-active #practice-choices .number-keys button:is([data-key="✓"], [data-number-next]) {
  --key-top: var(--ad-mint-top);
  --key-face: var(--ad-mint-face);
  --key-edge: var(--ad-mint-edge);
  --key-base: var(--ad-mint-base);
  --key-ink: var(--ad-mint-ink);
}
.practice-active #practice-choices .number-keys button:not(:disabled):active {
  box-shadow:
    inset 0 2px 0 #ffffff60,
    0 1px 0 var(--key-base);
}
.number-keypad .number-feedback {
  color: var(--ad-purple-ink);
  font-weight: 700;
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  .practice-active #practice-choices .number-keypad {
    padding: 6px;
    border-radius: 18px;
  }
  .practice-active #practice-choices .number-entry {
    min-height: 40px;
    margin-bottom: 6px;
    font-size: 28px;
  }
  .number-keypad .number-feedback {
    margin-top: 5px;
  }
}

/* Challenge card on tablet landscape and desktop: a roomier card with a real question, a visible
   "Another question" pill beside the hint, and clear space for the zoom control. Phones and
   short landscape screens keep the compact card above; Watch and Listen-and-type keep their own. */
@media (orientation: landscape) and (min-width: 851px) and (min-height: 501px) {
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing:not([data-result="complete"]) {
    gap: 6px 12px;
    padding: 12px 16px;
    border-radius: 18px;
    box-shadow: 0 8px 22px #3a5f8029;
  }
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing
    #practice-title {
    font-size: calc(15px * var(--text-scale, 1));
    color: var(--color-ink-dialog);
  }
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing
    #practice-status {
    align-self: center;
    font-size: calc(21px * var(--text-scale, 1));
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-ink-dialog);
  }
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing
    #practice-repeat {
    width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 16px;
    font-size: calc(22px * var(--text-scale, 1));
    box-shadow: 0 3px 0 var(--color-bevel-practice);
  }
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing
    #practice-help {
    grid-column: 1;
    align-self: center;
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1.35;
  }
  .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    #practice-next {
    grid-column: 2 / 4;
    grid-row: 4;
    justify-self: end;
    width: auto;
    min-height: 36px;
    padding: 4px 14px;
    border: 1px solid var(--ad-line-soft);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-ink-control);
    font-size: calc(13px * var(--text-scale, 1));
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 0 var(--color-bevel-practice);
  }
}
@media (orientation: landscape) and (min-width: 851px) and (min-height: 501px) {
  html[data-appearance="dark"]
    .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"]) {
    box-shadow: 0 8px 22px #00000059;
  }
  html[data-appearance="dark"]
    .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing
    :is(#practice-status, #practice-title) {
    color: #d2e8fa;
  }
  html[data-appearance="dark"]
    .practice-active:not([data-practice-mode="watch"]):not([data-practice-mode="numbers"])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    #practice-next {
    background: var(--ad-soft);
    color: var(--ad-ink-deep);
    border-color: #526e88;
    box-shadow: none;
  }
}
/* From 1101 px the zoom control shares the stage's top row with the card: let the card shrink
   instead of sliding under it. */
@media (orientation: landscape) and (min-height: 501px) and (min-width: 1101px),
  (orientation: landscape) and (min-height: 501px) and (min-width: 851px) and (pointer: fine) {
  .stage-toolbar .practice-bar.is-practicing {
    flex: 0 1 540px;
    width: auto;
    min-width: 280px;
  }
}

.practice-help-compact {
  display: none;
}

/* Phone reading challenges share one instruction/skip row and fill the answer strip. */
@media (max-width: 599px), (max-width: 850px) and (max-height: 500px) {
  .practice-active[data-practice-mode="words"]:not([data-practice-done])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    #practice-help {
    display: block;
    grid-column: 1 / 3;
    grid-row: 4;
    align-self: center;
    min-width: 0;
    white-space: nowrap;
  }

  .practice-active[data-practice-mode="words"]:not([data-practice-done])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    .practice-help-full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .practice-active[data-practice-mode="words"]:not([data-practice-done])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    .practice-help-compact {
    display: inline;
  }

  .practice-active[data-practice-mode="words"]:not([data-practice-done])
    .practice-bar.is-practicing:not([data-result="correct"]):not([data-result="complete"])
    #practice-next {
    grid-column: 3;
    grid-row: 4;
    justify-self: end;
    width: auto;
    white-space: nowrap;
    font-size: calc(10.5px * var(--text-scale, 1));
  }

  .practice-active[data-practice-mode="words"] .practice-bar.is-practicing #practice-repeat {
    justify-self: end;
  }

  .practice-active[data-practice-mode="words"]
    #practice-choices:has(> [data-practice-choice]:nth-child(3):last-child) {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each comprehension task states its input before the answer grid. */
.practice-task {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 14px 18px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 18px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
  text-align: center;
}
.practice-task small {
  font-size: calc(11px * var(--text-scale, 1));
  letter-spacing: 0.1em;
}
.practice-task strong {
  font-size: calc(24px * var(--text-scale, 1));
  overflow-wrap: anywhere;
}
[data-practice-mode="listen"] .practice-task {
  border-style: dashed;
}
[data-practice-mode="sentences"] .practice-task {
  text-align: left;
  border-inline-start-width: 8px;
}

/* Compact challenge header: navigation and size on top, progress and task directly below. */
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing {
  display: grid;
  box-sizing: border-box;
  width: calc(100% - 24px);
  grid-template-columns: 150px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 10px 12px;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-toggle {
  grid-area: 1 / 1;
  min-height: 40px;
  height: auto;
  padding: 6px 10px;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-title {
  grid-area: 1 / 2;
  justify-self: start;
  margin: 0;
  font-size: calc(14px * var(--text-scale, 1));
}
body.practice-active:not([data-practice-done])
  #practice-bar.is-practicing
  > :is(.zoom-controls, .mobile-zoom) {
  grid-area: 1 / 3;
  position: static;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 3px;
  transform: none;
}
body.practice-active:not([data-practice-done])
  #practice-bar.is-practicing
  > :is(.zoom-controls, .mobile-zoom)
  button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  height: 36px;
  padding: 0;
  font-size: 20px;
}
body.practice-active:not([data-practice-done])
  #practice-bar.is-practicing
  > :is(.zoom-controls, .mobile-zoom)
  output {
  min-width: 38px;
  font-size: 12px;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-progress {
  grid-area: 2 / 1 / 3 / 3;
  justify-content: start;
  gap: 10px;
  margin: 0;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-trail li {
  width: 26px;
  height: 26px;
  font-size: 18px;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-status {
  grid-area: 3 / 1 / 4 / 3;
  margin: 0;
  min-height: 0;
  font-size: calc(15px * var(--text-scale, 1));
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-repeat {
  grid-area: 3 / 3;
  justify-self: end;
  width: 40px;
  height: 40px;
  min-height: 40px;
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-help {
  grid-area: 4 / 1 / 5 / 3;
  margin: 0;
  font-size: calc(12px * var(--text-scale, 1));
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-next {
  grid-area: 4 / 3;
  justify-self: end;
  width: auto;
  max-width: 150px;
  min-height: 36px;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  font-size: calc(12px * var(--text-scale, 1));
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-finale {
  grid-column: 1 / -1;
  grid-row: 5;
}
@media (max-width: 599px) {
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing {
    gap: 5px 6px;
    padding: 8px;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-title {
    grid-area: 2 / 3;
    justify-self: end;
    font-size: 12px;
  }
  body.practice-active:not([data-practice-done])
    #practice-bar.is-practicing
    > :is(.zoom-controls, .mobile-zoom) {
    grid-area: 1 / 2 / 2 / 4;
    justify-self: end;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-help {
    grid-column: 1 / -1;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-next {
    grid-area: 5 / 1 / 6 / 4;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-finale {
    grid-row: 6;
  }
}
@media (min-width: 600px) {
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-progress {
    grid-area: 2 / 1;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-status {
    grid-area: 2 / 2;
    font-size: calc(14px * var(--text-scale, 1));
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-repeat {
    grid-area: 2 / 3;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-help {
    grid-area: 3 / 1 / 4 / 3;
  }
  body.practice-active:not([data-practice-done]) #practice-bar.is-practicing #practice-next {
    grid-area: 3 / 3;
  }
}
/* The streak, Replay and next question travel together in that order, never one at each side. */
.practice-tools {
  display: contents;
}
@media (min-width: 600px) {
  body.practice-active:not([data-practice-done], [data-practice-mode="numbers"])
    #practice-bar.is-practicing
    .practice-tools {
    grid-area: 2 / 3 / 3 / 5;
    justify-self: stretch;
    justify-content: space-between;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .practice-tools #practice-streak {
    order: 0;
  }
  .practice-tools #practice-repeat {
    order: 1;
    flex: 1 1 auto;
  }
  .practice-tools #practice-next {
    order: 2;
  }
}
body.practice-active:not([data-practice-done]) #practice-bar.is-practicing::after {
  display: none;
}
body[data-practice-done] #practice-bar > :is(.zoom-controls, .mobile-zoom) {
  display: none;
}

/* Dictation tools form a compact group rather than stretching the level selector across the card. */
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  .number-tools {
  grid-column: 1 / -1;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: auto;
  min-width: 0;
  margin: 0;
}
body.practice-active[data-practice-mode="numbers"] #practice-bar .number-level {
  flex: 0 1 150px;
  width: 150px;
  min-width: 100px;
  min-height: 40px;
  height: 40px;
  padding: 4px 10px;
  font-size: calc(14px * var(--text-scale, 1));
}
body.practice-active[data-practice-mode="numbers"]
  #practice-bar
  .number-tools
  :is(.mobile-zoom, .zoom-controls) {
  position: static;
  display: flex;
  flex: none;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
  transform: none;
}
body.practice-active[data-practice-mode="numbers"]
  #practice-bar
  .number-tools
  :is(.mobile-zoom, .zoom-controls)
  button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 22px;
}
body.practice-active[data-practice-mode="numbers"]
  #practice-bar
  .number-tools
  :is(output, .zoom-readout) {
  min-width: 38px;
  font-size: 12px;
  text-align: center;
}

/* Dictation header: one navigation row and one compact row of progress and controls. */
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done]) #practice-bar {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px 12px;
}
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  #practice-title {
  grid-area: 1 / 2 / 2 / 4;
  justify-self: start;
}
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  #practice-progress {
  grid-area: 2 / 1;
}
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  .number-tools {
  grid-area: 2 / 2;
  justify-self: start;
}
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  #practice-repeat {
  grid-area: 2 / 3;
}
@media (max-width: 650px) {
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done]) #practice-bar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-toggle {
    grid-area: 1 / 1;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-title {
    grid-area: 1 / 2;
    max-width: 120px;
    font-size: 12px;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-progress {
    grid-area: 2 / 1;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-repeat {
    grid-area: 2 / 2;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    .number-tools {
    grid-area: 3 / 1 / 4 / 3;
  }
}

/* Number dictation keeps the app's toy controls, with one clear blue listening action. */
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  #practice-repeat {
  width: auto;
  min-width: 96px;
  padding: 6px 12px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  box-shadow: 0 3px 0 var(--ad-blue-base);
  font-size: calc(16px * var(--text-scale, 1));
  font-weight: 800;
  white-space: nowrap;
}
body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keypad {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 12px;
  border-radius: 24px;
  box-shadow:
    0 5px 0 var(--ad-purple-base),
    inset 0 2px 0 #ffffffa0;
}
body.practice-active[data-practice-mode="numbers"] #practice-choices .number-entry {
  display: grid;
  place-items: center;
  min-height: 58px;
  margin: 0 0 12px;
  border-width: 3px;
  background: linear-gradient(var(--ad-gold-top), var(--color-surface));
  font-size: calc(38px * var(--text-scale, 1));
}
body.practice-active[data-practice-mode="numbers"]
  #practice-choices
  .number-entry[data-empty="true"] {
  color: var(--ad-gold-ink);
  opacity: 0.8;
}
body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys {
  gap: 10px;
}
body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys button {
  min-height: 56px;
  border-width: 2px;
  font-size: calc(30px * var(--text-scale, 1));
}
body.practice-active[data-practice-mode="numbers"]
  #practice-choices
  .number-keys
  button:not([data-key="⌫"]):not([data-key="✓"]):not([data-number-next]) {
  --key-top: var(--ad-blue-top);
  --key-face: var(--ad-blue-face);
  --key-edge: var(--ad-blue-edge);
  --key-base: var(--ad-blue-base);
  --key-ink: var(--ad-blue-ink);
}
@media (max-width: 599px), (max-height: 500px) {
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keypad {
    width: min(100%, 320px);
    padding: 8px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-entry {
    min-height: 42px;
    margin-bottom: 8px;
    font-size: calc(28px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys {
    gap: 7px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys button {
    min-height: 44px;
    font-size: calc(24px * var(--text-scale, 1));
  }
}

.number-round {
  display: none;
}
body.practice-active[data-practice-mode="numbers"] .number-round {
  display: inline-block;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ad-blue-ink);
}
.number-instruction {
  display: block;
  margin-top: 3px;
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  color: var(--color-ink-control);
}
@media (min-width: 700px) and (min-height: 501px) {
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done]) #practice-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 16px;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-title {
    grid-area: 1 / 2;
    font-size: calc(20px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-progress {
    grid-area: 1 / 3;
    justify-self: end;
    gap: 10px;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    .number-tools {
    grid-area: 2 / 1 / 3 / 3;
    width: 100%;
    border-top: 1px solid var(--color-line-practice);
    padding-top: 8px;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-repeat {
    grid-area: 2 / 3;
    justify-self: end;
    min-width: 130px;
  }
}
@media (max-width: 699px) {
  body.practice-active[data-practice-mode="numbers"] #practice-bar .number-instruction {
    display: none;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-bar .number-round {
    font-size: 12px;
  }
}

/* A deliberate dropdown chevron, with room between level and character-size controls. */
body.practice-active[data-practice-mode="numbers"] #practice-bar .number-level {
  appearance: none;
  -webkit-appearance: none;
  padding-inline: 12px 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%2376560f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
  background-repeat: no-repeat;
  background-position:
    right 12px center,
    center;
  background-size:
    16px 16px,
    100% 100%;
}
body.practice-active[data-practice-mode="numbers"]
  #practice-bar
  .number-tools
  :is(.mobile-zoom, .zoom-controls) {
  margin-inline-start: 12px;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--color-line-practice);
  gap: 10px;
}
html[data-appearance="dark"]
  body.practice-active[data-practice-mode="numbers"]
  #practice-bar
  .number-level {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='%23fbecc0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(var(--ad-gold-top), var(--ad-gold-face));
}
@media (max-width: 420px) {
  body.practice-active[data-practice-mode="numbers"]
    #practice-bar
    .number-tools
    :is(.mobile-zoom, .zoom-controls) {
    margin-inline-start: 2px;
    padding-inline-start: 10px;
    gap: 6px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-bar .number-level {
    flex-basis: 130px;
    width: 130px;
  }
}

/* Shared challenge header: title with instruction, then progress and the next-question action. */
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar.is-practicing {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 8px 12px;
  padding: 10px 12px;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-title {
  grid-area: 1 / 2;
  justify-self: start;
  text-align: left;
  min-width: 0;
  font-size: calc(19px * var(--text-scale, 1));
}
.challenge-instruction {
  display: block;
  margin-top: 3px;
  color: var(--color-ink-control);
  font-size: calc(12px * var(--text-scale, 1));
  font-weight: 500;
  line-height: 1.3;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-help {
  display: none;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  > :is(.zoom-controls, .mobile-zoom) {
  grid-area: 1 / 3;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-repeat {
  grid-area: 1 / 4;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-progress {
  grid-area: 2 / 1;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-status {
  grid-area: 2 / 2;
  min-width: 0;
  font-size: calc(15px * var(--text-scale, 1));
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-next {
  grid-area: 2 / 3 / 3 / 5;
  width: auto;
  max-width: none;
  justify-self: end;
  padding: 6px 12px;
  border: 1px solid var(--ad-blue-edge);
  border-radius: 12px;
  background: var(--ad-blue-top);
  color: var(--ad-blue-ink);
}
@media (max-width: 650px), (max-height: 500px) {
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar.is-practicing {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding: 8px;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    #practice-title {
    grid-area: 1 / 2 / 2 / 4;
    font-size: calc(15px * var(--text-scale, 1));
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    #practice-progress {
    grid-area: 2 / 1;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    > :is(.zoom-controls, .mobile-zoom) {
    grid-area: 2 / 2 / 3 / 4;
    justify-self: end;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    #practice-status {
    grid-area: 3 / 1 / 4 / 3;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    #practice-repeat {
    grid-area: 3 / 3;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
    #practice-bar
    #practice-next {
    grid-area: 4 / 1 / 5 / 4;
  }
  .challenge-instruction {
    font-size: calc(11px * var(--text-scale, 1));
  }
}
body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
  #practice-bar
  #watch-collection {
  grid-column: 1 / -1;
  grid-row: 3;
  position: static;
  margin: 0;
}
body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
  #practice-bar
  #practice-status {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  overflow: visible;
  grid-column: 1 / -1;
  grid-row: 2;
}
@media (max-width: 650px), (max-height: 500px) {
  body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
    #practice-bar
    #practice-status {
    grid-area: 3 / 1 / 4 / 3;
  }
  body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
    #practice-bar
    #practice-next {
    grid-row: 5;
  }
}
body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
  #practice-bar
  #practice-title {
  text-align: left;
}

/* Listening gives its replay action a clear label and the same toy finish as dictation. */
body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
  #practice-bar
  #practice-repeat {
  grid-area: 2 / 2;
  justify-self: start;
  width: auto;
  min-width: 120px;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  box-shadow: 0 3px 0 var(--ad-blue-base);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
}
body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
  #practice-bar
  #practice-title {
  grid-column: 2 / 3;
}
body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
  #practice-bar
  #practice-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
  #practice-bar[data-result="wrong"]
  #practice-status,
body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
  #practice-bar[data-result="correct"]
  #practice-status {
  position: static;
  width: auto;
  height: auto;
  clip-path: none;
  grid-column: 1 / -1;
  grid-row: 3;
}
body.practice-active[data-practice-mode="listen"] .number-round {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--ad-blue-ink);
}
body.practice-active[data-practice-mode="listen"]
  #practice-bar
  > :is(.zoom-controls, .mobile-zoom) {
  grid-column: 3 / 5;
  justify-self: end;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--color-line-practice);
}
body.practice-active[data-practice-mode="listen"]
  #practice-bar
  > :is(.zoom-controls, .mobile-zoom)
  button {
  border: 1px solid var(--ad-blue-edge);
  border-radius: 12px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  box-shadow: 0 3px 0 var(--ad-blue-base);
  color: var(--ad-blue-ink);
  font-weight: 800;
}
@media (max-width: 650px), (max-height: 500px) {
  body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
    #practice-bar
    #practice-title {
    grid-column: 2 / 4;
  }
  body.practice-active[data-practice-mode="listen"]
    #practice-bar
    > :is(.zoom-controls, .mobile-zoom) {
    grid-area: 2 / 2 / 3 / 4;
  }
  body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
    #practice-bar
    #practice-repeat {
    grid-area: 3 / 1;
    min-width: 110px;
  }
  body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
    #practice-bar
    #practice-next {
    grid-area: 3 / 2 / 4 / 4;
  }
  body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
    #practice-bar[data-result="wrong"]
    #practice-status,
  body.practice-active[data-practice-mode="listen"]:not([data-practice-done])
    #practice-bar[data-result="correct"]
    #practice-status {
    grid-row: 4;
  }
}

/* Shared replay control: the same soft blue, raised button in every challenge. */
body.practice-active[data-practice-mode]:not([data-practice-done]) #practice-bar #practice-repeat {
  width: auto;
  min-width: 120px;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 16px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  color: var(--ad-blue-ink);
  box-shadow: 0 4px 0 var(--ad-blue-base);
  font-size: calc(17px * var(--text-scale, 1));
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
body.practice-active[data-practice-mode]:not([data-practice-done])
  #practice-bar
  #practice-repeat:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--ad-blue-base);
}
body.practice-active[data-practice-mode]:not([data-practice-done])
  #practice-bar
  :is(.zoom-controls, .mobile-zoom)
  button {
  border: 1px solid var(--ad-blue-edge);
  border-radius: 12px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  box-shadow: 0 3px 0 var(--ad-blue-base);
  color: var(--ad-blue-ink);
}
@media (max-width: 650px), (max-height: 500px) {
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-mode="listen"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-status {
    grid-area: 3 / 1 / 4 / -1;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-mode="listen"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-repeat {
    grid-area: 4 / 1;
    justify-self: start;
  }
  body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-mode="listen"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-next {
    grid-area: 4 / 2 / 5 / -1;
  }
  body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
    #practice-bar
    #watch-collection {
    grid-row: 5;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar
    #practice-repeat {
    min-width: 110px;
    padding: 8px 12px;
    font-size: calc(15px * var(--text-scale, 1));
  }
}

/* Dictation is the common header layout: identity/progress, then tools/replay. */
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar.is-practicing {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 16px;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-toggle {
  grid-area: 1 / 1;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-title {
  grid-area: 1 / 2;
  text-align: left;
  font-size: calc(20px * var(--text-scale, 1));
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-progress {
  grid-area: 1 / 3;
  justify-self: end;
  gap: 10px;
  flex-wrap: wrap;
}
body.practice-active[data-practice-mode]:not([data-practice-done]) #practice-bar .number-round {
  display: inline-block;
  font-size: calc(15px * var(--text-scale, 1));
  font-weight: 800;
  white-space: nowrap;
  color: var(--ad-blue-ink);
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-next {
  grid-area: 2 / 1;
  justify-self: start;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  > :is(.zoom-controls, .mobile-zoom) {
  grid-area: 2 / 2;
  justify-self: start;
  border-inline-start: 1px solid var(--color-line-practice);
  padding-inline-start: 16px;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-repeat {
  grid-area: 2 / 3;
  justify-self: end;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #practice-status {
  grid-area: 3 / 1 / 4 / -1;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  #watch-collection {
  grid-area: 4 / 1 / 5 / -1;
}
@media (max-width: 699px), (max-height: 500px) {
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar.is-practicing {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-title {
    font-size: calc(16px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-progress {
    grid-area: 2 / 1;
    justify-self: start;
    gap: 4px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    > :is(.zoom-controls, .mobile-zoom) {
    grid-area: 2 / 2;
    justify-self: end;
    padding-inline-start: 8px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-next {
    grid-area: 3 / 1;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-repeat {
    grid-area: 3 / 2;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-status {
    grid-area: 4 / 1 / 5 / -1;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #watch-collection {
    grid-area: 5 / 1 / 6 / -1;
  }
}

/* Watch shares the upper progress trail; its discovery collection appears at the finale. */
body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
  #practice-bar
  #practice-progress {
  display: flex;
  align-items: center;
}
body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
  #practice-bar
  #watch-collection {
  display: none;
}

/* Phone dictation leaves more of the stage for the hero. */
@media (max-width: 650px) {
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done]) #practice-bar {
    padding: 7px;
    gap: 5px;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    .number-round {
    display: none;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    .number-tools {
    width: 100%;
    justify-self: stretch;
  }
  body.practice-active[data-practice-mode="numbers"]
    #practice-bar
    .number-tools
    :is(.mobile-zoom, .zoom-controls) {
    margin-inline-start: auto;
  }
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    :is(#practice-repeat, #practice-toggle) {
    min-height: 40px;
    padding-block: 5px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keypad {
    width: 100%;
    padding: 7px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-entry {
    min-height: 38px;
    margin-bottom: 7px;
    font-size: calc(25px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys {
    gap: 6px;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-choices .number-keys button {
    min-height: 40px;
    font-size: calc(22px * var(--text-scale, 1));
  }
}

@media (max-width: 650px) {
  body.practice-active[data-practice-mode="numbers"]:not([data-practice-done])
    #practice-bar
    #practice-progress {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
  }
  body.practice-active[data-practice-mode="numbers"] #practice-bar #practice-streak {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}
/* Phone answers are the whole point of a question: taller buttons and larger pictures than the 48 px compact default. */
@media (max-width: 599px) and (orientation: portrait) {
  .practice-active .practice-choices > button {
    min-height: 64px;
  }
  .practice-active .practice-choices > button .choice-icon {
    font-size: calc(34px * var(--text-scale, 1));
  }
}
/* Resizing the egg is irrelevant while answering; on a phone the freed space keeps the question and the Listen button prominent. */
@media (max-width: 599px) and (orientation: portrait) {
  body.practice-active:not([data-practice-done])
    #practice-bar.is-practicing
    > :is(.zoom-controls, .mobile-zoom) {
    display: none;
  }
}
/* Phones: a compact two-row header, so the hero keeps the stage. First the way back and the title; then
   the eggs with skip and Listen. An answer adds one row: its message, and Next beside a right one. */
@media (max-width: 599px) {
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"]) {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-toggle {
    grid-area: 1 / 1 / 2 / 4;
    justify-self: start;
    z-index: 1;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-title {
    grid-area: 1 / 1 / 2 / 4;
    justify-self: stretch;
    max-width: 100%;
    padding-inline-start: 0;
    font-size: calc(13px * var(--text-scale, 1));
    line-height: 1.2;
    text-align: left;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-progress {
    grid-area: 2 / 1;
    min-width: 0;
    flex-wrap: wrap;
  }
  /* The streak shares the eggs' row as just the flame and the count, so it never adds a line. */
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-streak {
    justify-self: start;
    padding: 2px 7px;
    z-index: 1;
  }
  #practice-streak .streak-full {
    display: none;
  }
  #practice-streak .streak-short {
    display: inline;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-repeat {
    grid-area: 2 / 3;
    align-self: center;
    justify-self: end;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 4px 10px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"], [data-result="correct"])
    #practice-next {
    grid-area: 2 / 2;
    align-self: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 0;
    line-height: 1;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"], [data-result="correct"])
    #practice-next::before {
    content: "↻";
    font-size: 20px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing[data-result="correct"]
    #practice-next {
    width: 44px;
    min-height: 44px;
    font-size: 0;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing[data-result="correct"]
    #practice-next::before {
    content: "→";
    font-size: 20px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-status {
    grid-area: 3 / 1 / 4 / 4;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing[data-result="correct"]
    #practice-status {
    grid-area: 3 / 1 / 4 / 3;
    align-self: center;
    font-size: calc(15px * var(--text-scale, 1));
  }
}
@media (max-width: 599px) {
  /* Only the speaker (or Watch again's arrow) on the narrowest phones, so the eggs keep their row. */
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-repeat {
    max-width: 44px;
    overflow: hidden;
    font-size: 0;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-repeat::before {
    content: "🔊";
    font-size: 20px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    ):is([data-practice-mode="watch"], [data-practice-mode="opposites"])
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-repeat::before {
    content: "↻";
  }
}

/* A right answer says so in a green band. It keeps the idle line's size and padding and never wraps,
   so the answer cards and the hero do not move when it appears. */
body.practice-active #practice-bar.is-practicing[data-result="correct"] #practice-status {
  border-radius: 12px;
  background: #d4f2e4;
  color: var(--ad-ink-green);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: streak-pop 0.35s both cubic-bezier(0.3, 1.6, 0.5, 1);
}
html[data-appearance="dark"]
  body.practice-active
  #practice-bar.is-practicing[data-result="correct"]
  #practice-status {
  background: #2f5a4c;
  color: var(--ad-ink-green);
}
html[data-calm="true"]
  body.practice-active
  #practice-bar.is-practicing[data-result="correct"]
  #practice-status {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  body.practice-active #practice-bar.is-practicing[data-result="correct"] #practice-status {
    animation: none;
  }
}
/* Phones, picture and reading challenges: the task is already big in its card and the count beside the
   eggs, so the idle status line would only take the hero's room. Right and wrong answers still use it. */
@media (max-width: 599px) {
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="sentences"],
      [data-practice-mode="listen"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"]
    )
    #practice-bar.is-practicing:not(
      [data-result="correct"],
      [data-result="wrong"],
      [data-result="complete"]
    )
    #practice-status {
    display: none;
  }
}

/* Six choices sit in two even rows of three on phones. */
@media (max-width: 599px) {
  .practice-active #practice-choices:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Long action names need two useful columns instead of narrow word fragments. */
@media (max-width: 599px) {
  body.practice-active:is(
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="opposites"],
      [data-practice-mode="missions"]
    )
    #practice-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.practice-active:is(
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="opposites"],
      [data-practice-mode="missions"]
    )
    #practice-choices
    .choice-label {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }
}

/* Reading and picture-choice tasks keep the prompt and answers near the scene on tablets. */
@media (min-width: 600px) and (max-width: 1100px) and (orientation: portrait) {
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="listen"],
      [data-practice-mode="sentences"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="review"]
    )
    main {
    flex: 0 0 auto;
    grid-template-rows: auto auto;
    align-content: start;
  }
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="listen"],
      [data-practice-mode="sentences"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="review"]
    )
    .playground {
    height: clamp(300px, 50svh, 520px);
    min-height: 300px;
  }
}

/* Instructions open across the header instead of squeezing its title column. */
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar.is-practicing {
  position: relative;
}
body.practice-active:not([data-practice-mode="numbers"]):not([data-practice-done])
  #practice-bar
  #practice-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenge-help {
  flex: none;
}
.challenge-help button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--color-ink-control);
  cursor: pointer;
  list-style: none;
}
.challenge-help button:focus-visible {
  outline: 3px solid var(--ad-blue-edge);
  outline-offset: 2px;
}
.challenge-help .challenge-instruction {
  position: absolute;
  top: 100%;
  inset-inline: 8px;
  z-index: 5;
  margin: 4px 0 0;
  padding: 12px;
  border: 1px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 4px 12px #24415b26;
  font-size: calc(13px * var(--text-scale, 1));
  text-align: start;
  white-space: normal;
}

/* A discreet help symbol keeps its full touch target. */
.challenge-help button {
  border: 0;
  background: transparent;
  font-size: 22px;
}
/* Two useful rows while answering: navigation/progress, then the prompt and actions. */
@media (min-width: 600px) {
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar.is-practicing {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 4px 8px;
    padding: 8px 10px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-title {
    grid-area: 1 / 2;
    font-size: calc(17px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-progress {
    grid-area: 1 / 3 / 2 / 5;
    flex-flow: row nowrap;
    align-items: center;
    gap: 6px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-trail {
    gap: 3px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-trail
    li {
    width: 18px;
    height: 22px;
    font-size: 14px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    > :is(.zoom-controls, .mobile-zoom) {
    display: none;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-status {
    grid-area: 2 / 2 / 3 / 3;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-repeat {
    grid-area: 2 / 4;
    min-width: 0;
    padding: 6px 10px;
    font-size: calc(14px * var(--text-scale, 1));
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-next {
    grid-area: 2 / 3;
    width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    #practice-next::before {
    content: "↻";
    font-size: 22px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar[data-result="correct"]
    #practice-next::before {
    content: "→";
  }
}

/* Replay and skip sit on one baseline with the same touch surface and bevel. */
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  :is(#practice-next, #practice-repeat) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  box-sizing: border-box;
  height: 44px;
  min-height: 44px;
  margin-block: 0;
  border: 2px solid var(--ad-blue-edge);
  border-radius: 14px;
  background: linear-gradient(var(--ad-blue-top), var(--ad-blue-face));
  box-shadow: 0 3px 0 var(--ad-blue-base);
  line-height: 1;
}
body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
    [data-practice-done]
  )
  #practice-bar
  :is(#practice-next, #practice-repeat):active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--ad-blue-base);
}
@media (max-width: 599px) {
  body.practice-active[data-practice-mode]:not([data-practice-mode="numbers"]):not(
      [data-practice-done]
    )
    #practice-bar
    :is(#practice-next, #practice-repeat) {
    width: 44px;
    min-width: 44px;
    padding: 0;
  }
}
/* Tablet or wide window in landscape: the side panel has the room, and children could not make out the
   small answer buttons, so there are two big columns with 96px symbols. Touch screens get them from
   501px of height; a mouse needs 640px so the answers still fit. Phone landscape keeps its own rules. */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 640px),
  (pointer: coarse) and (orientation: landscape) and (min-width: 768px) and (min-height: 501px) {
  .practice-active .panel .practice-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .practice-active .panel .practice-choices .choice-icon {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
    font-size: calc(80px * var(--text-scale, 1));
    line-height: 96px;
  }

  .practice-active .panel .practice-choices .choice-label {
    font-size: calc(18px * var(--text-scale, 1));
  }

  .practice-active .panel .practice-choices button {
    min-height: 132px;
    border-width: 2px;
    border-radius: 18px;
  }
}
/* The five eggs are the child's progress, so they are big enough to see from across the table: a hatched
   egg is a chick with a thick colored ring, an egg still to come is pale. Phone landscape (max-height
   500px) keeps its compact rules above. */
@media (min-height: 501px) {
  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail {
    gap: 8px;
  }

  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail
    li {
    width: 44px;
    height: 44px;
    font-size: 30px;
  }

  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail
    :is([data-state="first"], [data-state="helped"]) {
    border-width: 3px;
    box-shadow: 0 2px 0 rgb(0 0 0 / 12%);
  }
}
@media (max-width: 600px) and (min-height: 501px) {
  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail {
    gap: 5px;
  }

  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail
    li {
    width: 38px;
    height: 38px;
    font-size: 25px;
  }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 768px) and (min-height: 501px) {
  body.practice-active[data-practice-mode]:not([data-practice-done])
    #practice-bar.is-practicing
    #practice-trail
    li {
    width: 56px;
    height: 56px;
    font-size: 38px;
  }
}

/* Phones: the answers are what a child learns with, so they get the room. The header card loses a quarter of
   its height (a shorter title row, smaller eggs, the count beside them) and the options grow by a quarter in
   height and picture; the egg's stage gives way. An answer's message no longer adds a row to the header
   (which grew and shrank with every answer): it floats over the stage, and Next takes the skip button's
   place. */
@media (max-width: 599px) {
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"]) {
    padding: 6px 8px;
    gap: 4px;
    grid-template-rows: 30px auto;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-title {
    height: 30px;
    min-height: 0;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing
    #practice-trail
    li {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-progress {
    gap: 0;
  }
  /* The streak sits on the title row, clear of the eggs. */
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:not([data-result="complete"])
    #practice-streak {
    grid-area: 1 / 1;
    align-self: center;
    margin-inline-start: 0;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing:is([data-result="correct"], [data-result="wrong"])
    #practice-status {
    position: absolute;
    z-index: 6;
    inset-inline: 0;
    top: calc(100% + 10px);
    width: fit-content;
    max-width: calc(100% - 16px);
    margin-inline: auto;
    padding: 8px 18px;
    border-radius: 16px;
    background: var(--ad-tint-cream);
    color: var(--ad-gold-ink);
    font-size: calc(17px * var(--text-scale, 1));
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    box-shadow: 0 8px 22px rgb(37 74 107 / 22%);
    pointer-events: none;
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing[data-result="correct"]
    #practice-status {
    background: var(--ad-mint-face);
    color: var(--ad-mint-ink);
  }
  body.practice-active[data-practice-mode]:not([data-practice-done]):not(
      [data-practice-mode="numbers"]
    )
    #practice-bar.is-practicing[data-result="correct"]
    #practice-next {
    grid-area: 2 / 2;
    align-self: center;
  }
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="listen"],
      [data-practice-mode="sentences"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="missions"],
      [data-practice-mode="opposites"],
      [data-practice-mode="review"]
    )
    #practice-choices
    > button[data-practice-choice] {
    min-height: 80px;
  }
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="listen"],
      [data-practice-mode="sentences"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="missions"],
      [data-practice-mode="opposites"],
      [data-practice-mode="review"]
    )
    #practice-choices
    > button[data-practice-choice]
    .choice-icon {
    font-size: calc(42px * var(--text-scale, 1));
  }
}

/* Watch & choose on phones: its hint line repeats the card's question, so it only appears as the answer's
   message (floating); the word buttons grow by a quarter like the picture ones. */
@media (max-width: 599px) {
  body.practice-active[data-practice-mode="watch"]:not([data-practice-done])
    #practice-bar.is-practicing:not(
      [data-result="correct"],
      [data-result="wrong"],
      [data-result="complete"]
    )
    #practice-status {
    display: none;
  }
  body.practice-active[data-practice-mode="watch"]
    #practice-choices
    > button[data-practice-choice] {
    min-height: 60px;
  }
  body.practice-active[data-practice-mode="watch"] .choice-label {
    font-size: calc(17px * var(--text-scale, 1));
  }
}

/* Phone answers: the buttons keep their size, the picture fills them. Picture-only buttons (four across) take
   the whole face; a button that also carries its word keeps room for it. */
@media (max-width: 599px) {
  body.practice-active:is(
      [data-practice-mode="words"],
      [data-practice-mode="listen"],
      [data-practice-mode="sentences"],
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="missions"],
      [data-practice-mode="opposites"],
      [data-practice-mode="review"]
    )
    #practice-choices
    > button[data-practice-choice]:not(:has(.choice-label))
    .choice-icon {
    flex-basis: 66px;
    width: 66px;
    height: 66px;
    font-size: 66px;
    line-height: 66px;
  }
  body.practice-active:is(
      [data-practice-mode="odd"],
      [data-practice-mode="letter"],
      [data-practice-mode="missions"],
      [data-practice-mode="review"]
    )
    #practice-choices
    > button[data-practice-choice]:has(.choice-label)
    .choice-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 52px;
    line-height: 52px;
  }
}

/* The reload and next glyphs sit exactly in the middle of their square button (the button's own text-align
   is right-aligned for its long label, which pushed the arrow off-center in WebKit). */
#practice-bar.is-practicing #practice-next::before {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1;
}

/* Challenge screen refresh (the stage background is untouched): a soft header card, a blue Listen pill and
   a light reload square, the word to find as a big glowing pill, raised answer cards and a green Learn bar. */
body.practice-active #practice-bar.is-practicing:not([data-result="complete"]) {
  border: 2px solid var(--refresh-line);
  border-radius: 24px;
  background: linear-gradient(var(--refresh-white), var(--refresh-eaf5ff));
  box-shadow: 0 4px 12px rgb(59 134 198 / 0.14);
}
body.practice-active #practice-bar.is-practicing:not([data-result="complete"]) #practice-title {
  color: var(--refresh-ink);
  font-weight: 800;
}
body.practice-active[data-practice-mode]:not([data-practice-done])
  #practice-bar.is-practicing:not([data-result="complete"])
  #practice-repeat {
  border: 2px solid var(--refresh-white);
  border-radius: 16px;
  background: linear-gradient(var(--refresh-blue-high), var(--refresh-blue-low));
  color: var(--refresh-white);
  box-shadow:
    0 0 0 2px var(--refresh-line-strong),
    0 4px 0 var(--refresh-blue-base);
}
body.practice-active[data-practice-mode]:not([data-practice-done])
  #practice-bar.is-practicing:not([data-result="complete"], [data-result="correct"])
  #practice-next {
  border: 2px solid var(--refresh-line);
  border-radius: 16px;
  background: linear-gradient(var(--refresh-white), var(--refresh-dcecfb));
  color: var(--refresh-blue-deep);
  box-shadow:
    0 4px 0 var(--refresh-c6dbee),
    inset 0 2px 0 var(--refresh-white);
}
.practice-active #practice-choices .practice-task {
  border: 3px solid var(--refresh-8cc0ec);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-white), var(--refresh-e3f2ff));
  box-shadow:
    0 4px 0 var(--refresh-c6dbee),
    0 0 0 4px rgb(140 192 236 / 0.18);
  color: var(--refresh-ink);
}
.practice-active #practice-choices button[data-practice-choice]:not([data-answer]) {
  border: 2px solid var(--refresh-c4dcef);
  border-radius: 20px;
  background: linear-gradient(var(--refresh-white), var(--refresh-eef6ff));
  box-shadow:
    0 4px 0 var(--refresh-d3e3f0),
    inset 0 2px 0 var(--refresh-white);
}
/* Only for a real pointer: on touch screens :hover sticks to the last tap and one answer stayed gold,
   as if it were the right one (Watch & choose after the Learn sheet). */
@media (hover: hover) and (pointer: fine) {
  .practice-active #practice-choices button[data-practice-choice]:not([data-answer]):hover {
    border-color: var(--refresh-gold);
    background: linear-gradient(var(--refresh-fffdf2), var(--refresh-fff3cf));
  }
}
body.practice-active #practice-learn {
  /* The panel clips what overflows it: leave room for the white rim, the ring and the base shadow. */
  box-sizing: border-box;
  width: calc(100% - 8px);
  margin: 2px 4px 9px;
  min-height: 52px;
  border: 3px solid var(--refresh-white);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-green-high), var(--refresh-green-low));
  color: var(--refresh-white);
  box-shadow:
    0 0 0 2px var(--refresh-green-rim),
    0 4px 0 var(--refresh-green-base);
  font-weight: 800;
  text-shadow: 0 1px 0 rgb(30 90 25 / 0.35);
}
html[data-appearance="dark"]
  body.practice-active
  #practice-bar.is-practicing:not([data-result="complete"]),
html[data-appearance="dark"]
  .practice-active
  #practice-choices
  :is(.practice-task, button[data-practice-choice]:not([data-answer])) {
  background: var(--refresh-dark-card);
  border-color: var(--refresh-dark-line);
  color: inherit;
}

/* Listen & type bar: the title gets its headphones, the level picker stays the gold pill, the size buttons
   become raised rounded squares and the in-a-row streak is a warm chip. Layout is unchanged. */
body.practice-active[data-practice-mode="numbers"] #practice-bar.is-practicing #practice-title::before {
  content: "🎧 ";
}
body.practice-active[data-practice-mode="numbers"] .number-tools :is(#zoom-out, #zoom-in) {
  border: 2px solid var(--refresh-line);
  border-radius: 14px;
  background: linear-gradient(var(--refresh-white), var(--refresh-dcecfb));
  box-shadow:
    0 3px 0 var(--refresh-c6dbee),
    inset 0 2px 0 var(--refresh-white);
  color: var(--refresh-blue-deep);
}
body.practice-active #practice-streak:not([hidden]) {
  border: 2px solid var(--refresh-f0bba8);
  border-radius: 999px;
  background: linear-gradient(var(--refresh-white), var(--refresh-fde4dc));
  color: var(--refresh-ink);
  font-weight: 800;
}

/* Pronunciation (IPA), optional in Settings: a quiet line under the English words, never when off. */
.phrase-ipa {
  display: none;
}
html[data-ipa="on"] .phrase-ipa:not(:empty) {
  display: block;
  color: var(--color-ink-description);
  font-family: "Charis SIL", "Doulos SIL", "Gentium Plus", "Lucida Grande", "Segoe UI", sans-serif;
  font-size: calc(14px * var(--text-scale, 1));
  font-weight: 500;
  letter-spacing: 0.02em;
}