/* How it works: the explainer in a GBA dialog, own player (play/pause, seek by click and drag, time, sound, fullscreen) */
.howto { width: min(1120px, calc(100vw - 24px)); padding: calc(var(--px) * 4); }
.howto h2 { padding-right: 48px; }
.hw-stage { position: relative; background: #181818; aspect-ratio: 16 / 9; }
.hw-stage video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #181818; }
.hw-big { position: absolute; inset: 0; display: grid; place-items: center; }
.hw-big span { display: inline-flex; align-items: center; gap: 12px; background: var(--box); color: var(--ink); padding: calc(var(--px) * 3) calc(var(--px) * 6);
  box-shadow: inset 0 0 0 var(--px) var(--box-line); font: 600 22px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .06em; }
.hw-big span::before { content: ""; width: 0; height: 0; border-left: calc(var(--px) * 4) solid var(--ink); border-top: calc(var(--px) * 3) solid transparent; border-bottom: calc(var(--px) * 3) solid transparent; }
.hw-big:hover span { background: var(--ball-cream); }
.howto.playing .hw-big { display: none; }
.hw-bar { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 12px; margin-top: calc(var(--px) * 3); }
.hw-btn { min-width: 44px; height: 44px; padding: 0 10px; font: 600 17px/1 var(--f-ui); text-transform: uppercase; letter-spacing: .05em; background: var(--box); box-shadow: inset 0 0 0 var(--px) var(--box-line); }
.hw-btn:hover { background: var(--ball-cream); }
.hw-btn:active { transform: translateY(var(--px)); }
.hw-track { position: relative; height: 44px; cursor: pointer; touch-action: none; }
.hw-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: calc(var(--px) * 3); margin-top: calc(var(--px) * -1.5); background: #E0E4EC; box-shadow: inset 0 0 0 var(--px) var(--box-line); }
.hw-fill { position: absolute; left: 0; top: 50%; height: calc(var(--px) * 3); margin-top: calc(var(--px) * -1.5); width: 0; background: var(--ball); box-shadow: inset 0 0 0 var(--px) var(--box-line); }
.hw-knob { position: absolute; top: 50%; width: calc(var(--px) * 5); height: calc(var(--px) * 5); margin: calc(var(--px) * -2.5) 0 0 calc(var(--px) * -2.5); left: 0; background: var(--ball); box-shadow: inset 0 0 0 var(--px) var(--ink); }
.hw-time { font-size: 17px; color: var(--ink-2); min-width: 9ch; text-align: right; }
.howto:fullscreen, .hw-stage:fullscreen { background: #181818; }
@media (max-width: 719px) { .hw-bar { grid-template-columns: auto 1fr auto auto; } .hw-time { display: none; } }