.tutorial-practice-hud {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 33;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px;
  width: min(460px, calc(100vw - 32px)); box-sizing: border-box;
  padding: 15px 21px 14px; border: 1px solid #ad8955; border-radius: 5px 9px 6px 8px;
  background: radial-gradient(ellipse at 24% 12%, #fff5d6b0, transparent 70%),
    repeating-linear-gradient(12deg, #96734307 0 1px, transparent 1px 5px),
    linear-gradient(110deg, #e1c592, #f5e4bd 16%, #f8e9c6 78%, #e5c994);
  color: #49351f; font: 700 13px/1.45 "Lucida Console", "Courier New", monospace;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  box-shadow: inset 0 0 0 3px #fff0c54d, inset 0 0 15px #946c3524, 0 4px 12px #241b1633;
  opacity: 1; visibility: visible;
  transition: opacity .26s ease, transform .26s ease, visibility 0s;
}
.tutorial-practice-hud::before, .tutorial-practice-hud::after {
  content: ''; position: absolute; left: 9px; right: 9px; height: 1px;
  background: linear-gradient(90deg, transparent, #b38b4b70 15%, #b38b4b70 85%, transparent);
}
.tutorial-practice-hud::before { top: 5px; }
.tutorial-practice-hud::after { bottom: 5px; }
.tutorial-practice-hud.hidden {
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .26s ease, transform .26s ease, visibility 0s linear .26s;
}
.tutorial-practice-hud > strong, .tutorial-practice-hud > [data-practice-controls] { grid-column: 1 / -1; min-width: 0; }
.tutorial-practice-hud > strong { font-size: 16px; line-height: 1.35; color: #49351f; text-shadow: .3px 0 currentColor; }
.tutorial-practice-hud > [data-practice-controls] { color: #62492e; }
.tutorial-practice-hud kbd { display: inline-block; padding: 1px 5px; border: 1px solid #a98b5c; border-bottom-width: 2px; border-radius: 3px; background: #fff3d6; color: #49351f; font: inherit; white-space: nowrap; }
.tutorial-practice-progress { align-self: center; height: 8px; border-radius: 3px; background: #18334b; overflow: hidden; }
.tutorial-practice-progress > span { display: block; height: 100%; background: #48bcff; }
.tutorial-practice-hud > [data-practice-count] { color: #17334b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tutorial-practice-hud.is-complete > strong { color: #166aa5; }
.tutorial-practice-hud.is-countdown { width:min(560px,calc(100vw - 32px)); grid-template-columns: minmax(0,1fr) 82px; align-items: center; column-gap: 20px; }
.tutorial-practice-hud.is-countdown > strong, .tutorial-practice-hud.is-countdown > [data-practice-controls] { grid-column: 1; }
.tutorial-practice-hud.is-countdown > .tutorial-practice-progress { display: none; }
.tutorial-practice-hud.is-countdown > [data-practice-count] {
  grid-column: 2; grid-row: 1 / 3; width: 82px; height: 82px; box-sizing: border-box;
  border: 7px solid transparent; border-radius: 50%;
  background: linear-gradient(#f8e9c6,#f8e9c6) padding-box, conic-gradient(#48bcff var(--countdown-angle),#745b3f 0) border-box;
  display: grid; place-content: center; text-align: center; font-size: 29px; line-height: 1; color: #17334b;
  box-shadow:0 0 0 2px #fff2d0,inset 0 0 0 1px #ad8955;
}
.tutorial-practice-hud.is-countdown > [data-practice-count] small { display: block; margin-top: 5px; font: 700 10px/1 "Lucida Console", monospace; color: #62492e; }
@media (max-width: 680px), (pointer: coarse) { .tutorial-practice-hud { bottom: max(100px, env(safe-area-inset-bottom)); padding: 13px 16px; font-size: 12px; } .tutorial-practice-hud > strong { font-size: 14px; } }
@media (max-height: 450px) and (min-width: 681px) { .tutorial-practice-hud { bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { .tutorial-practice-hud, .tutorial-practice-hud.hidden { transition-duration: 0s; transform: translateX(-50%); } }

.tutorial-practice-hud.is-graduated { width: min(520px, calc(100vw - 32px)); padding: 18px 24px; text-align: center; border-color: #ad8246; }
.tutorial-practice-hud.is-graduated > strong { font-size: 18px; }
.tutorial-practice-hud.is-graduated > .tutorial-practice-progress { display: none; }
.tutorial-practice-hud.is-graduated > [data-practice-count] { grid-column: 1 / -1; color: #166aa5; font-size: 12px; }

/* The one-shot wayfinding cue reuses the exercise slot instead of adding a competing toast. */
.tutorial-practice-hud.is-nest-cue { width:min(390px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr) 29px;align-items:center; }
.tutorial-practice-hud.is-nest-cue > strong,.tutorial-practice-hud.is-nest-cue > [data-practice-controls] { grid-column:1; }
.tutorial-practice-hud.is-nest-cue > strong { color:#174866; }
.tutorial-practice-hud.is-nest-cue > [data-practice-count] { grid-column:2;grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border:2px solid #206281;border-radius:50%;color:#174866;font:900 19px/1 "Lucida Console",monospace; }
.tutorial-practice-hud.is-nest-cue > .tutorial-practice-progress { display:none; }