/* Motif games: stage, HUD, the turn, the result card, the player, and the SVG drawing vocabulary.
   Flow, sizes and floors per preview/direction/GAME_UX.md (binding). Colours come from the section ground
   (main.css: --bg --ink --text --muted --rule --panel) plus the brand tokens.
   Units: the stage is a 960x540 viewBox. --u is one stage unit in CSS px for HTML on the stage (cards, HUD, lower third);
   --px (set by engine.js) is stage units per CSS px, so SVG type can be given a floor in real pixels on any screen. */
.ml-stage { --stage: var(--bg); --stage-rule: var(--rule); --steel-ink: var(--steel); --live: var(--diamond); --live-ink: var(--deep); --surface: var(--bg); }

/* ---------- the stage ---------- */
.ml-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: var(--stage); border: 1px solid var(--stage-rule); overflow: hidden; font-family: var(--f); user-select: none; -webkit-user-select: none; touch-action: manipulation; container-type: inline-size; }
.ml-stage > * { --u: calc(100cqw / 960); }
.ml-canvas, .ml-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ml-svg { overflow: hidden; }
.ml-missing { padding: 24px; color: var(--muted); }

/* ---------- game drawing vocabulary (SVG). Use ONLY these classes for colour. ---------- */
.f-ink { fill: var(--ink); } .f-navy { fill: var(--text); } .f-steel { fill: var(--steel-ink); } .f-mist { fill: var(--rule); }
.f-panel { fill: var(--panel); } .f-ground { fill: var(--stage); } .f-live { fill: var(--live); } .f-none { fill: none; }
.s-ink { stroke: var(--ink); stroke-width: 2.5; fill: none; } .s-thin { stroke: var(--ink); stroke-width: 1.25; fill: none; }
.s-rule { stroke: var(--stage-rule); stroke-width: 1; fill: none; } .s-steel { stroke: var(--steel-ink); stroke-width: 2; fill: none; }
.s-dash { stroke: var(--steel-ink); stroke-width: 2; stroke-dasharray: 6 6; fill: none; } .s-live { stroke: var(--live); stroke-width: 3; fill: none; }
.s-ground { stroke: var(--stage); stroke-width: 2; }
.s-ground:not([class*="f-"]):not(.ic-ps) { fill: none; }   /* outline icons drawn in the ground tone stay outlines */
.s-mist { stroke: var(--stage-rule); stroke-width: 2; fill: none; }
.s-navy { stroke: var(--text); stroke-width: 2; fill: none; }
.o-live { fill: var(--live); stroke: var(--ink); stroke-width: 1.25; }
/* type ramp (GAME_UX.md c): sizes in stage units with a floor in real pixels, so a label is 13u on a desktop player and
   about 20u on a phone (14px), and nothing in the player renders under 12px */
.t-lbl { fill: var(--muted); font: 700 13px var(--f); letter-spacing: .12em; text-transform: uppercase; }
.t-txt { fill: var(--text); font: 600 16px var(--f); }
.t-ink { fill: var(--ink); font: 700 16px var(--f); }
.t-big { fill: var(--ink); font: 700 32px var(--f); letter-spacing: -.02em; }
.t-num { fill: var(--ink); font: 700 44px var(--f); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.t-on-ink { fill: var(--stage); font: 700 14px var(--f); }
.t-on-live { fill: var(--live-ink); font: 700 14px var(--f); }
.t-cue { fill: var(--stage); font: 700 16px var(--f); }
.t-poster { fill: var(--ink); font: 700 28px var(--f); letter-spacing: -.01em; }
.ml-stage .t-lbl { font-size: max(13px, calc(var(--px, 1) * 14px)); }
.ml-stage .t-txt, .ml-stage .t-ink { font-size: max(16px, calc(var(--px, 1) * 15px)); }
.ml-stage .t-big { font-size: max(32px, calc(var(--px, 1) * 22px)); }
.ml-stage .t-on-ink, .ml-stage .t-on-live { font-size: max(14px, calc(var(--px, 1) * 14px)); }
.ml-stage .t-cue { font-size: max(16px, calc(var(--px, 1) * 15px)); }
.ml-stage .t-poster { font-size: max(28px, calc(var(--px, 1) * 14px)); }
.hit { cursor: pointer; }
.grab { cursor: grab; } .grab:active { cursor: grabbing; }
/* icons share one weight on a 24 unit grid (Propello icon system, Route B): 1.75 stroke, butt caps, mitre joins */
.ic .s-ink, .ic .s-navy, .ic .s-steel, .ic .s-mist, .ic .s-live, .ic .s-ground { stroke-width: 1.75; stroke-linecap: butt; stroke-linejoin: miter; }
.ic .ic-ps { fill: var(--stage); }
/* living set, spokes */
.k-spoke { stroke: var(--ink); stroke-width: 3; stroke-linecap: butt; fill: none; }
.k-spoke.is-steel { stroke: var(--steel-ink); stroke-width: 2.5; }
/* the onboarding cue: corner brackets on the one target (the tag and the ghost hand are drawn by kit.js) */
.k-cue-br { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: square; }

/* the teaser is a picture: no small type on it (GAME_UX.md: at most three labels, each 28u or more, as .t-poster) */
.ml-stage[data-mode="attract"] .ml-svg text.t-lbl { visibility: hidden; }
@container (max-width: 560px) { .ml-stage[data-mode="attract"] .ml-svg text:not(.t-big):not(.t-num):not(.t-poster) { visibility: hidden; } }

/* ---------- HUD: one band, the round chip and a clock line along the top edge ---------- */
.ml-hud { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 40); pointer-events: none; z-index: 2; transition: opacity .3s; }
.ml-hud[hidden] { display: none; }
.ml-clock { position: absolute; left: 0; right: 0; top: 0; height: max(3px, calc(var(--u) * 4)); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ml-clock i { display: block; height: 100%; background: var(--ink); transform-origin: left; transition: background .3s; }
.ml-clock.is-late i { background: var(--steel-ink); }
.ml-round { position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 12); display: inline-flex; align-items: center; gap: calc(var(--u) * 8);
  height: max(20px, calc(var(--u) * 28)); padding: 0 calc(var(--u) * 10); background: var(--panel); color: var(--ink);
  font: 700 max(12px, calc(var(--u) * 12))/1 var(--f); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.ml-round b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; background: var(--ink); color: var(--stage); letter-spacing: 0; }
.ml-stage[data-phase="card"] .ml-hud, .ml-stage[data-phase="win"] .ml-hud { opacity: 0; }
.ml-stage[data-phase="turn"] .ml-hud { opacity: 0; }   /* the lower third carries the moment; the chip would sit on the stepped-back scene */

/* ---------- the turn: the frozen scene steps back, a lower third lands ---------- */
.ml-stage > .ml-svg, .ml-stage > .ml-canvas { transform-origin: 50% 0; transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
/* the turn (GAME_UX Screen 3): the frozen scene steps back to 86% from its top edge, so the lower third sits under the loss state, not over it */
.ml-stage.is-turn > .ml-svg, .ml-stage.is-turn > .ml-canvas { transform: translateY(calc(var(--u) * -24)) scale(.86); }   /* steps back and up: the scene ends above the lower third; labels stay at 12px+ */
.ml-stage.is-phone.is-turn > .ml-svg, .ml-stage.is-phone.is-turn > .ml-canvas { transform: translateY(calc(var(--u) * -34)) scale(.86); }
.ml-still { pointer-events: none; z-index: 1; }
.ml-stage.is-turn > .ml-svg .k-score, .ml-stage[data-phase="card"] > .ml-svg .k-score { opacity: 0; }
/* a frozen round takes no input: nothing in the scene is a target once the turn, the win or the card is up */
.ml-stage:is([data-phase="turn"], [data-phase="win"], [data-phase="card"]) > .ml-svg, .ml-stage:is([data-phase="turn"], [data-phase="win"], [data-phase="card"]) > .ml-svg * { pointer-events: none !important; }
.ml-third { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: max(64px, calc(var(--u) * 96)); display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: calc(var(--u) * 24); padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 32); background: var(--stage); border-top: 1px solid var(--stage-rule); color: var(--ink); }
.ml-third[hidden] { display: none; }
.ml-stage.is-phone .ml-third { height: max(72px, calc(var(--u) * 104)); padding-bottom: 6px; }
.ml-third-n { display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.ml-third-n p { margin: 0; display: flex; align-items: baseline; gap: calc(var(--u) * 3); line-height: .9; }
.ml-third-n .ml-num { font-size: max(30px, calc(var(--u) * 52)); line-height: .9; }
.ml-third-n small { font-size: max(13px, calc(var(--u) * 18)); font-weight: 700; color: var(--muted); }
.ml-third-n span { font-size: max(12px, calc(var(--u) * 12)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ml-third-line { margin: 0; font-size: max(15px, calc(var(--u) * 18)); line-height: 1.3; font-weight: 600; color: var(--text); text-wrap: balance; }

/* ---------- the win: the scene dims under a flat ground, then one solid card ---------- */
.ml-dim { position: absolute; inset: 0; z-index: 3; background: var(--stage); opacity: 0; pointer-events: none; transition: opacity .5s; }
.ml-dim.is-on { opacity: .97; }
.ml-card { position: absolute; z-index: 4; display: none; }
.ml-card.is-on { display: flex; }
.ml-card.is-final { left: calc(var(--u) * 32); bottom: calc(var(--u) * 32); width: calc(var(--u) * 560); max-height: calc(100% - var(--u) * 48); overflow: auto; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 14);
  padding: calc(var(--u) * 32); background: var(--panel); color: var(--ink); text-align: left; }
.ml-eyebrow { margin: 0; font-size: max(12px, calc(var(--u) * 12)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ml-eyebrow i { font-style: normal; letter-spacing: .02em; text-transform: none; font-weight: 600; margin-left: .6em; }
.ml-cmp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: calc(var(--u) * 16); }
.ml-cmp > div { display: grid; gap: calc(var(--u) * 6); min-width: 0; }
.ml-cmp span { font-size: max(12px, calc(var(--u) * 12)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ml-cmp p { margin: 0; display: flex; align-items: baseline; gap: calc(var(--u) * 3); white-space: nowrap; }
.ml-num { font-size: max(40px, calc(var(--u) * 80)); line-height: .95; font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ml-cmp small { font-size: max(13px, calc(var(--u) * 20)); font-weight: 700; color: var(--muted); letter-spacing: 0; }
.ml-cmp-a .ml-num { color: var(--steel-ink); }
.ml-cmp-to { color: var(--muted); padding-bottom: calc(var(--u) * 26); }
.ml-cmp-to svg { width: max(18px, calc(var(--u) * 28)); height: max(18px, calc(var(--u) * 28)); display: block; }
.ml-bar { display: block; height: max(4px, calc(var(--u) * 8)); background: color-mix(in srgb, var(--ink) 12%, transparent); }
.ml-bar u { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; text-decoration: none; }
.ml-track { display: grid; gap: calc(var(--u) * 6); }
.ml-track .is-a u { background: var(--steel-ink); }
.ml-card.is-open .ml-track { display: none; }
.ml-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 12); min-height: 0; }
.ml-meta:empty { display: none; }
.ml-delta { font-style: normal; font-size: max(13px, calc(var(--u) * 15)); font-weight: 700; background: var(--live); color: var(--live-ink); padding: calc(var(--u) * 5) calc(var(--u) * 10); }
.ml-peer { font-size: max(13px, calc(var(--u) * 14)); font-weight: 600; color: var(--muted); }
.ml-line { margin: 0; font-size: max(15px, calc(var(--u) * 18)); line-height: 1.35; font-weight: 600; color: var(--text); text-wrap: pretty; }
.ml-board { margin: 0; font-size: max(13px, calc(var(--u) * 14)); font-weight: 700; color: var(--ink); }
.ml-board[hidden] { display: none; }
.ml-card.is-final > * { flex-shrink: 0; }
.ml-card.is-final > .ml-eyebrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 12); }
.ml-card.is-final > .ml-eyebrow .ml-delta { letter-spacing: 0; text-transform: none; }
.ml-card.is-open .ml-line, .ml-card.is-open .ml-board, .ml-card.is-open .ml-meta { display: none; }
.ml-card.is-open .ml-num { font-size: max(30px, calc(var(--u) * 52)); }
.ml-card.is-open .ml-cmp-to { padding-bottom: calc(var(--u) * 10); }
.ml-eyesum { display: none; margin-left: .8em; letter-spacing: 0; color: var(--ink); font-size: 1.25em; }
.ml-card.is-open .ml-eyesum { display: none; }

/* buttons: one primary per screen, a row of three secondaries with icons */
.ml-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); min-height: max(44px, min(52px, calc(var(--u) * 56))); padding: 0 calc(var(--u) * 24);
  font: 600 max(15px, min(18px, calc(var(--u) * 16))) var(--f); color: var(--stage); background: var(--ink); border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  position: relative; overflow: hidden; transition: background .2s, color .2s; }
.ml-btn svg { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s; }
.ml-btn:focus-visible { background: var(--live); color: var(--live-ink); outline: none; }
@media (hover: hover) { .ml-btn:hover { background: var(--live); color: var(--live-ink); } }
.ml-btn:hover svg { transform: translateX(3px); }
.ml-btn:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.ml-btn-cta { align-self: stretch; }
.ml-btn-sm { min-height: 44px; padding: 0 calc(var(--u) * 18); flex: none; }
.ml-btn.is-done { background: var(--live); color: var(--live-ink); }
.ml-btn-go .ml-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--live); transform-origin: 0 50%; animation: ml-prog 4.25s linear both; }
@keyframes ml-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ml-sec { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--u) * 12); }
.ml-q { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); min-height: max(44px, min(48px, calc(var(--u) * 48))); padding: 0 calc(var(--u) * 12);
  font: 600 max(14px, min(17px, calc(var(--u) * 15))) var(--f); color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, var(--panel)); border: 0; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ml-q svg { width: 1.15em; height: 1.15em; flex: none; }
.ml-q:focus-visible { background: var(--live); color: var(--live-ink); outline: none; }
@media (hover: hover) { .ml-q:hover { background: var(--live); color: var(--live-ink); } }
.ml-q[aria-expanded="true"] { background: var(--ink); color: var(--stage); }
.ml-panel { display: grid; gap: calc(var(--u) * 10); padding-top: calc(var(--u) * 4); }
.ml-panel[hidden] { display: none; }
.ml-panel > :first-child { margin-top: calc(var(--u) * 10); }
.ml-msg { margin: 0; font-size: max(14px, calc(var(--u) * 15)); line-height: 1.4; color: var(--text); }
.ml-row { display: flex; gap: calc(var(--u) * 10); align-items: center; }
.ml-form { display: grid; gap: calc(var(--u) * 8); margin: 0; }
.ml-input { flex: 1; min-width: 0; min-height: 44px; font: 500 max(15px, calc(var(--u) * 16)) var(--f); color: var(--ink); background: var(--stage); border: 0; border-radius: 0; padding: 0 12px !important;
  padding: 0 2px; -webkit-appearance: none; appearance: none; user-select: text; -webkit-user-select: text; transition: border-color .2s; }
.ml-input::placeholder { color: var(--muted); opacity: .8; }
.ml-input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.ml-link-field { font-size: max(13px, calc(var(--u) * 14)); color: var(--text); }
.ml-consent { margin: 0; font-size: max(12px, min(13px, calc(var(--u) * 11))); line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.ml-opt { display: flex; align-items: flex-start; gap: calc(var(--u) * 8); margin: 0; font-size: max(12px, min(13px, calc(var(--u) * 11))); line-height: 1.4; color: var(--muted); }
.ml-opt input { margin-top: 2px; flex: none; }
.ml-err { margin: 0; font-size: max(13px, calc(var(--u) * 13)); font-weight: 700; color: var(--ink); }
.ml-err:empty { display: none; }
.ml-seat { display: grid; gap: calc(var(--u) * 8); }
.ml-seat p { margin: 0; font-size: max(14px, calc(var(--u) * 15)); font-weight: 600; color: var(--text); }
.ml-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.ml-chip { flex: none; }
.ml-chip { min-height: 44px; padding: 0 calc(var(--u) * 14); font: 600 max(14px, calc(var(--u) * 14)) var(--f); color: var(--ink); background: var(--stage); border: 0; border-radius: 999px;
  cursor: pointer; transition: background .2s, color .2s; }
.ml-chip:focus-visible { background: var(--live); color: var(--live-ink); outline: none; }
@media (hover: hover) { .ml-chip:hover { background: var(--live); color: var(--live-ink); } }
.ml-chip.is-skip { color: var(--muted); }

/* attract card (harness and pages without their own Play control) */
.ml-card.is-attract-card { left: calc(var(--u) * 24); bottom: calc(var(--u) * 24); flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 8); padding: calc(var(--u) * 20); background: var(--stage); }
.ml-card-title { margin: 0; font-size: max(18px, calc(var(--u) * 30)); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }

/* phone player: bigger card, bigger targets (the player sets .is-phone) */
.ml-stage.is-phone .ml-card.is-final { left: calc(var(--u) * 20); bottom: calc(var(--u) * 16); width: calc(var(--u) * 680); max-height: calc(100% - var(--u) * 28); padding: calc(var(--u) * 22) calc(var(--u) * 24); gap: calc(var(--u) * 10); }
/* phones: the seat question is one scrolling row, so the numbers never scroll away */
.ml-stage.is-phone .ml-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.ml-stage.is-phone .ml-chips::-webkit-scrollbar { display: none; }
.ml-stage.is-phone .ml-card.is-open .ml-num { font-size: max(28px, calc(var(--u) * 46)); }
.ml-stage.is-phone .ml-card.is-open .ml-msg { display: none; }
.ml-stage.is-phone .ml-num { font-size: max(40px, calc(var(--u) * 70)); }
.ml-stage.is-phone .ml-btn, .ml-stage.is-phone .ml-q { min-height: max(44px, calc(var(--u) * 64)); }
.ml-stage.is-phone .ml-cmp-to { padding-bottom: calc(var(--u) * 22); }
.ml-stage.is-phone .ml-round { left: calc(var(--u) * 12); top: calc(var(--u) * 10); }

/* the stage reveals once, when it first scrolls into view */
.ml-stage.ml-reveal > .ml-svg, .ml-stage.ml-reveal > .ml-canvas { transition: clip-path .9s cubic-bezier(.16, 1, .3, 1); }
.ml-stage.ml-reveal:not(.is-in) > .ml-svg, .ml-stage.ml-reveal:not(.is-in) > .ml-canvas { clip-path: inset(0 100% 0 0); }
.ml-stage.ml-reveal.is-in > .ml-svg { clip-path: inset(0 0 0 0); }

/* ---------- the player (embed.js): one full-screen dialog, the stage full bleed, Close and Sound in the chrome ---------- */
html.ml-lock, html.ml-lock body { overflow: hidden; overscroll-behavior: none; }
.ml-player { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; touch-action: none;
  background: var(--abyss, #0B151C); color: var(--light, #ECEFF1); font-family: var(--f); }
.ml-player:not([open]) { display: none; }
.ml-player::backdrop { background: var(--abyss, #0B151C); }
.mlp-frame { position: absolute; inset: 0; display: grid; place-items: center;
  padding: calc(64px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px)); }
.mlp-box { position: relative; flex: none; }
.mlp-box > .ml-stage { width: 100%; height: 100%; aspect-ratio: auto; }
.mlp-chrome { position: absolute; z-index: 7; top: max(10px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: flex; gap: 8px; }
.mlp-btn { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 999px; border: 0; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; cursor: pointer;
  transition: background .2s, color .2s; }
.mlp-btn svg { width: 16px; height: 16px; }
.mlp-btn:hover, .mlp-btn:focus-visible { background: var(--diamond, #BBE7FF); color: var(--deep, #101E28); outline: none; }
.mlp-btn[aria-pressed="false"] .on, .mlp-btn[aria-pressed="true"] .off { display: none; }
/* phones: the stage fills the screen; the chrome takes a narrow column at the right edge */
.ml-player[data-phone] .mlp-frame { padding: env(safe-area-inset-top, 0px) calc(56px + env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--bg, #F4F6F7); }
.ml-player[data-phone] .mlp-box { display: grid; place-items: center; background: var(--bg, #F4F6F7); }
.ml-player[data-phone] .mlp-box > .ml-stage { border: 0; }
.ml-player[data-phone] .mlp-chrome { top: max(4px, env(safe-area-inset-top, 0px)); right: max(6px, env(safe-area-inset-right, 0px)); flex-direction: column; color: var(--ink, #101E28); }
.ml-player:has(.mlp-turn:not([hidden])) .mlp-chrome { color: var(--light, #ECEFF1); }
/* rotation locked in portrait: everything is turned a quarter turn so the landscape stage fills the screen */
.ml-player[data-rot] .mlp-rot { position: absolute; inset: auto; top: 0; left: 0; width: 100dvh; height: 100dvw; transform-origin: 0 0; transform: translateX(100dvw) rotate(90deg); }
.mlp-rot { position: absolute; inset: 0; }
/* portrait: "Turn your phone" */
.mlp-turn { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px; text-align: center; background: color-mix(in srgb, var(--abyss, #0B151C) 93%, transparent); }
.mlp-turn[hidden] { display: none; }
.mlp-turn svg { width: 72px; height: 72px; animation: mlp-turn 1.4s cubic-bezier(.65, 0, .35, 1) both; }
.mlp-turn p { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
@keyframes mlp-turn { 0%, 25% { transform: rotate(0deg); } 75%, 100% { transform: rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  .ml-stage.ml-reveal > .ml-svg { transition: none; }
  .ml-stage > .ml-svg, .ml-stage > .ml-canvas { transition: none; }
  .mlp-turn svg { animation: none; transform: rotate(90deg); }
  .ml-btn-go .ml-prog { animation: none; }
}