:root { color-scheme: dark; font-family: Arial, sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #142344; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; /* taste-skill-ignore: legacy viewport fallback */ min-height: -webkit-fill-available; min-height: 100svh; display: flex; justify-content: center; align-items: flex-start; background: #f0e5f1; }
button { font: inherit; }
.stage { position: relative; width: min(100%, 560px); flex: 0 0 auto; overflow: hidden; line-height: 0; }
.artwork { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.slider { position: absolute; left: 11.477152%; top: 77.033493%; width: 77.258236%; height: 9.270335%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.slider img { display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.slider-track { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; filter: saturate(.05); animation: track-hint 1.08s infinite; }
.slider-label { position: absolute; left: 29.160935%; top: 27.096774%; width: 59.14718%; height: 40%; }
.slider-knob { position: absolute; left: 1.650619%; top: 1.935484%; width: 21.182944%; height: 94.193548%; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; animation: knob-hint 1.08s infinite; }
.slider-knob img { width: 100%; height: 100%; }
.slider-knob:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.slider.is-dragging .slider-knob, .slider.is-complete .slider-knob { animation: none; cursor: grabbing; transform: translateX(var(--drag-x, 0px)); }
.slider.is-dragging .slider-track, .slider.is-complete .slider-track { animation: none; opacity: var(--track-opacity, .16); filter: saturate(var(--track-saturation, .05)); }
.sound-toggle { position: absolute; right: max(3%, env(safe-area-inset-right)); top: max(1%, env(safe-area-inset-top)); z-index: 2; padding: 7px 9px; color: #fff8da; font-size: 10px; line-height: 1; letter-spacing: .05em; background: #132344; background: #132344a8; border: 1px solid #ffdc77; /* taste-skill-ignore: supplied package control */ border-color: #ffdc7799; border-radius: 20px; cursor: pointer; }
.sound-toggle[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.no-script { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px; color: white; background: #142344; font-size: 16px; line-height: 1.4; text-align: center; }
.no-script a { color: #fff8da; }
@media (min-width: 561px) { body { background: #142344; } }
@media (orientation: landscape) and (max-height: 560px) {
  body { align-items: center; min-height: 100vh; /* taste-skill-ignore: legacy viewport fallback */ min-height: 100svh; }
  .stage { width: calc(100vh * 941 / 1672); /* taste-skill-ignore: legacy viewport fallback */ width: calc(100svh * 941 / 1672); max-width: 100vw; height: 100vh; /* taste-skill-ignore: legacy viewport fallback */ height: 100svh; }
  .artwork { width: 100%; height: 100%; object-fit: contain; }
}
@keyframes knob-hint {
  0%, 8%, 100% { transform: translateX(0); }
  62%, 74% { transform: translateX(30%); }
}
@keyframes track-hint {
  0%, 8%, 100% { opacity: .16; filter: saturate(.05); }
  62%, 74% { opacity: 1; filter: saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
  .slider-track { animation: none; opacity: .55; filter: saturate(.5); }
  .slider-knob { animation: none; }
}