/* V-Pop! — albums (`ab-`, js/album.js) and the music-video maker and player (`mx-`, js/mv.js). Round 6.
   Builds on the design tokens from css/vpop.css; every var() has a fallback so the MV player also works on its
   own (the feed, the act page). Phone first: everything fits 390 px with no horizontal page scroll — the
   timeline scrolls inside its own box. Animations move only transform and opacity. */

/* ================================================================ the tracklist (Song tab) */

.ab-list { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius, 16px); background: var(--card2, #2d2347); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); min-width: 0; }
.ab-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ab-h { margin: 0; font-family: var(--font-display, "Baloo 2", "Fredoka", system-ui, sans-serif); font-size: 18px; line-height: 1.1; }
.ab-h small { font-family: system-ui, sans-serif; font-weight: 400; font-size: 12px; color: var(--muted, #b8aed3); margin-left: 4px; }
.ab-count { font-weight: 800; font-size: 14px; color: var(--amber, #ffb020); white-space: nowrap; }
.ab-count.ok { color: var(--green, #2ee6a0); }
.ab-bar { height: 10px; border-radius: 999px; background: var(--ink, #14101f); overflow: hidden; }
.ab-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber, #ffb020), var(--pink, #ff4f9a), var(--green, #2ee6a0)); transition: width .3s ease; }
.ab-tip { margin: 0; font-size: 13px; color: var(--muted, #b8aed3); line-height: 1.35; }
.ab-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ab-row {
  display: grid; grid-template-columns: 20px 38px minmax(0, 1fr) 44px; grid-template-areas: "n disc info arrows" "n disc btns arrows";
  column-gap: 8px; row-gap: 6px; align-items: center; padding: 8px 6px 8px 8px; border-radius: 14px;
  background: var(--ink-2, #1e1830); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .05);
}
.ab-row.ok { box-shadow: inset 0 0 0 2px rgba(46, 230, 160, .35); }
.ab-row.ab-title { grid-template-areas: "n disc info arrows" "n disc info arrows"; background: linear-gradient(135deg, rgba(255, 209, 102, .16), rgba(255, 79, 154, .12) 60%, var(--ink-2, #1e1830)); box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .5); }
.ab-n { grid-area: n; font-weight: 800; color: var(--muted, #b8aed3); text-align: center; font-size: 14px; }
.ab-disc { grid-area: disc; width: 38px; height: 38px; }
.ab-disc svg { width: 100%; height: 100%; display: block; }
.ab-row:not(.ok):not(.ab-title) .ab-disc { opacity: .55; filter: grayscale(.4); }
.ab-info { grid-area: info; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ab-info b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-info small { font-size: 12px; color: var(--muted, #b8aed3); line-height: 1.3; }
.ab-state { font-weight: 700; font-size: 12px; }
.ab-state.ok { color: var(--green, #2ee6a0); }
.ab-state.wait { color: var(--amber, #ffb020); }
.ab-btns { grid-area: btns; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-b { border: 0; border-radius: 999px; min-height: 44px; padding: 0 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--text, #f7f2ff); background: var(--card2, #2d2347); cursor: pointer; touch-action: manipulation; }
.ab-b.ab-make { background: linear-gradient(135deg, var(--pink, #ff4f9a), var(--violet, #8b5cff)); color: #fff; box-shadow: 0 3px 10px rgba(255, 79, 154, .3); }
.ab-b.ab-star { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 209, 102, .55); color: var(--gold, #ffd166); }
.ab-b:active { transform: scale(.96); }
.ab-arrows { grid-area: arrows; display: flex; flex-direction: column; gap: 4px; align-self: stretch; justify-content: center; }
.ab-mv { width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--card2, #2d2347); color: var(--text, #f7f2ff); font-size: 14px; cursor: pointer; touch-action: manipulation; }
.ab-mv:active { transform: scale(.94); }
.ab-mv-off { visibility: hidden; display: block; }
.ab-row.ab-title .ab-mv { background: rgba(255, 209, 102, .18); }

/* the track maker (a modal; it wraps itself in .studio, so studio.css dresses its buttons and the hook grid) */
.ab-maker .st-head { padding-right: 44px; }
.ab-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ab-mode-b {
  border: 0; border-radius: 14px; min-height: 60px; padding: 6px 4px; background: var(--card2, #2d2347); color: var(--muted, #b8aed3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; cursor: pointer; touch-action: manipulation;
}
.ab-mode-b span { font-size: 22px; line-height: 1.1; }
.ab-mode-b b { font-size: 13px; line-height: 1.1; color: var(--text, #f7f2ff); }
.ab-mode-b small { font-size: 11px; line-height: 1.15; }
.ab-mode-b.on { color: #fff; background: linear-gradient(135deg, rgba(255, 79, 154, .55), rgba(139, 92, 255, .55)); box-shadow: inset 0 0 0 2px var(--pink, #ff4f9a); }
.ab-pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab-tk { min-width: 0; }
.ab-kb { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: end; }
.ab-kb input[type=range], .ab-uprow input[type=range] { width: 100%; height: 44px; accent-color: var(--cyan, #22d3ee); margin: 0; }
.ab-uprow { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; }

/* ================================================================ the MV player */

.mx-player {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; isolation: isolate;
  background: #140f22; container-type: inline-size; -webkit-user-select: none; user-select: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.mx-player.mx-tall { aspect-ratio: 9 / 16; }
.mx-cam { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }
.mx-bg { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.mx-bg.on { opacity: 1; }
.mx-bg svg, .mx-bgsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-view { position: absolute; inset: 0; }
.mx-view .stage { background: transparent; box-shadow: none; border-radius: 0; width: 100%; height: 100%; }
/* the stage's own backdrop and decorations make way for the MV's background (round 6 §9.2) */
.mx-view .stage-bg, .mx-view .stage-lockup, .mx-view [class^="hw-"] { display: none; }
.mx-fx, .mx-stk, .mx-tx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mx-kara { position: absolute; left: 4%; right: 4%; bottom: 3%; z-index: 6; pointer-events: none; }
.mx-tall .mx-kara { bottom: 6%; }
.mx-fx { z-index: 3; }
.mx-stk { z-index: 4; }
.mx-tx { z-index: 5; }

/* ---- effects: every particle is a full-height column (so a transform in % crosses the whole screen); its
   ::before is what you see. */
.mx-fxl { position: absolute; inset: 0; }
.mx-p { position: absolute; top: 0; height: 100%; width: calc(9px * var(--s, 1)); animation: mx-fall var(--t, 4s) linear var(--d, 0s) infinite; will-change: transform; }
.mx-p::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; }
@keyframes mx-fall { from { transform: translateY(-12%); } to { transform: translateY(104%); } }
@keyframes mx-rise { from { transform: translateY(104%); } to { transform: translateY(-14%); } }
@keyframes mx-spin { from { transform: rotate(var(--r, 0deg)); } to { transform: rotate(calc(var(--r, 0deg) + 720deg)); } }
@keyframes mx-sway { 0%, 100% { transform: translateX(-7px) rotate(-20deg); } 50% { transform: translateX(7px) rotate(25deg); } }
@keyframes mx-twinkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(.8) rotate(70deg); opacity: .8; } }
@keyframes mx-sweep { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes mx-burst {
  0% { transform: translate(0, 0) scale(.2); opacity: 0; }
  8% { opacity: 1; }
  60% { transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx, 0), calc(var(--dy, 0px) + 18px)) scale(.6); opacity: 0; }
}
.mx-fx-confetti .mx-p::before { width: 70%; aspect-ratio: .6; border-radius: 2px; background: var(--c, #ff4f9a); animation: mx-spin 1.6s linear infinite; }
.mx-fx-rain .mx-p { width: 2px; animation-duration: calc(var(--t, 4s) * .22); }
.mx-fx-rain .mx-p::before { aspect-ratio: auto; height: 16px; border-radius: 2px; background: linear-gradient(rgba(230, 240, 255, 0), rgba(230, 240, 255, .75)); transform: rotate(12deg); }
.mx-fx-snow .mx-p { animation-duration: calc(var(--t, 4s) * 1.7); }
.mx-fx-snow .mx-p::before { border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); animation: mx-sway 3s ease-in-out infinite; }
.mx-fx-petals .mx-p { animation-duration: calc(var(--t, 4s) * 1.5); }
.mx-fx-petals .mx-p::before { width: 110%; aspect-ratio: 1.5; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e7, #ff9ec8); animation: mx-sway 2.6s ease-in-out infinite; }
.mx-fx-hearts .mx-p { animation-name: mx-rise; width: calc(18px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.3); }
.mx-fx-hearts .mx-p::before { content: "♥"; aspect-ratio: auto; font-size: calc(18px * var(--s, 1)); line-height: 1; color: var(--c, #ff4f9a); text-shadow: 0 0 8px rgba(255, 255, 255, .6); animation: mx-sway 2.2s ease-in-out infinite; }
.mx-fx-bubbles .mx-p { animation-name: mx-rise; width: calc(16px * var(--s, 1)); }
.mx-fx-bubbles .mx-p::before { border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .9) 0 14%, rgba(191, 233, 255, .25) 16% 62%, rgba(143, 211, 255, .55) 64% 70%, rgba(143, 211, 255, 0) 72%); animation: mx-sway 3.4s ease-in-out infinite; }
.mx-fx-sparkles .mx-p, .mx-fx-stars .mx-p { height: auto; width: calc(16px * var(--s, 1)); animation-name: mx-twinkle; animation-timing-function: ease-in-out; animation-duration: calc(var(--t, 4s) * .55); }
.mx-fx-sparkles .mx-p::before { position: static; display: block; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 4px var(--c, #22d3ee)); }
.mx-fx-stars .mx-p::before { position: static; display: block; background: var(--c, #ffd23f); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.mx-fx-spotlights .mx-p { top: -8%; height: 125%; width: 26%; margin-left: -13%; transform-origin: 50% 0; animation: mx-sweep var(--t, 4s) ease-in-out var(--d, 0s) infinite; }
.mx-fx-spotlights .mx-p::before { width: 100%; height: 100%; aspect-ratio: auto; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 92%); mix-blend-mode: screen; }
.mx-fx-spotlights .mx-p::after { content: ""; position: absolute; inset: 0; clip-path: polygon(46% 0, 54% 0, 80% 100%, 20% 100%); background: linear-gradient(to bottom, var(--c, #ff4f9a), transparent 85%); opacity: .35; }
.mx-fx-fireworks .mx-p { height: auto; width: 6px; animation: mx-burst var(--t, 2.1s) ease-out var(--d, 0s) infinite; }
.mx-fx-fireworks .mx-p::before { position: static; display: block; border-radius: 50%; background: var(--c, #ffd23f); box-shadow: 0 0 8px var(--c, #ffd23f), 0 0 2px #fff; }

/* ---- stickers */
.mx-st { position: absolute; width: var(--sz, 12%); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }
.mx-st svg { display: block; width: 100%; height: 100%; animation: mx-bob 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.mx-st:nth-child(2n) svg { animation-delay: -1.1s; }
.mx-st:nth-child(3n) svg { animation-delay: -.6s; }
@keyframes mx-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5%) scale(1.04); } }

/* ---- words on screen */
.mx-txt { position: absolute; left: 4%; right: 4%; display: flex; justify-content: center; text-align: center; }
.mx-tx-top { top: 7%; }
.mx-tx-mid { top: 50%; transform: translateY(-50%); }
.mx-tx-bot { bottom: 17%; }
.mx-txt span {
  font-family: var(--font-display, "Baloo 2", "Fredoka", system-ui, sans-serif); font-weight: 800; line-height: 1.05;
  font-size: clamp(16px, 5.4vw, 40px); font-size: 7.2cqw; color: #fff; overflow-wrap: anywhere;
}
.mx-k-pop span { -webkit-text-stroke: .1em var(--pink, #ff4f9a); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--violet, #8b5cff), 0 .16em .2em rgba(0, 0, 0, .35); animation: mx-popin .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.mx-k-neon span { color: #fff6fd; text-shadow: 0 0 .08em #fff, 0 0 .25em var(--pink, #ff4f9a), 0 0 .6em var(--pink, #ff4f9a), 0 0 1em var(--violet, #8b5cff); animation: mx-flicker 2.8s linear infinite; }
.mx-k-type span { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; font-size: clamp(14px, 4.4vw, 32px); font-size: 5.8cqw; background: rgba(12, 8, 24, .72); padding: .15em .45em; border-radius: .3em; }
.mx-caret { font-weight: 400; animation: mx-blink .8s steps(1) infinite; }
.mx-k-bubble span { position: relative; color: #2a2036; background: #fff; padding: .25em .6em .3em; border-radius: 1em; box-shadow: 0 .12em 0 rgba(0, 0, 0, .15); font-size: clamp(14px, 4.6vw, 34px); font-size: 6cqw; animation: mx-popin .4s ease-out both; }
.mx-k-bubble span::after { content: ""; position: absolute; left: 22%; bottom: -.35em; width: .7em; height: .7em; background: #fff; transform: rotate(45deg); border-radius: 0 0 .15em 0; }
.mx-tall .mx-txt span { font-size: clamp(16px, 8vw, 40px); font-size: 11cqw; }
@keyframes mx-popin { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes mx-flicker { 0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; } 20%, 62% { opacity: .55; } }
@keyframes mx-blink { 50% { opacity: 0; } }

/* reduced motion: only the scenes change (the camera and particles stay off in js; these stop the rest) */
@media (prefers-reduced-motion: reduce) {
  .mx-bg { transition: none; }
  .mx-p, .mx-p::before, .mx-st svg, .mx-txt span, .mx-caret { animation: none !important; }
}
.mx-still .mx-p { display: none; }

/* ================================================================ the MV maker (the MV tab) */

.mx-ed {
  --mx-card: var(--card2, #2d2347); --mx-ink: var(--ink, #14101f); --mx-text: var(--text, #f7f2ff); --mx-muted: var(--muted, #b8aed3);
  --mx-grad: linear-gradient(135deg, var(--pink, #ff4f9a), var(--violet, #8b5cff) 55%, var(--cyan, #22d3ee));
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--mx-text);
}
.mx-ed *, .mx-ed *::before, .mx-ed *::after { box-sizing: border-box; }
.mx-ed button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mx-ed button:disabled { opacity: .4; cursor: not-allowed; }
.mx-prevbox { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 52px; z-index: 2; background: var(--card, #1e1830); padding-bottom: 4px; }
.mx-prev { min-width: 0; }
.mx-poster { touch-action: none; }
.mx-poster.mx-placing { box-shadow: inset 0 0 0 3px var(--cyan, #22d3ee); cursor: crosshair; }
.mx-poster .mx-stk { pointer-events: none; }
.mx-st-ed { pointer-events: auto; touch-action: none; cursor: grab; }
.mx-st-ed.on { outline: 2px dashed #fff; outline-offset: 2px; border-radius: 8px; }
.mx-st-ed.on svg { animation: none; }
.mx-hint { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 8; background: rgba(12, 8, 24, .82); color: #fff; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.mx-transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.mx-play, .mx-auto, .mx-add { border: 0; border-radius: 999px; min-height: 44px; padding: 0 16px; font-weight: 800; }
.mx-play { background: var(--mx-card); color: var(--cyan, #22d3ee); min-width: 100px; }
.mx-play.on { background: var(--cyan, #22d3ee); color: var(--mx-ink); }
.mx-auto { background: var(--mx-grad); color: #fff; box-shadow: 0 3px 12px rgba(139, 92, 255, .35); }
.mx-time { font-variant-numeric: tabular-nums; color: var(--mx-muted); font-size: 13px; text-align: center; white-space: nowrap; }

/* the timeline: it scrolls inside its own box */
.mx-tlwrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 14px; background: var(--mx-ink); padding: 0 8px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.mx-tl { position: relative; height: 104px; min-width: 100%; }
.mx-ruler { position: relative; height: 22px; border-bottom: 1px solid rgba(255, 255, 255, .1); cursor: pointer; }
.mx-tick { position: absolute; top: 5px; font-size: 10px; color: var(--mx-muted); padding-left: 3px; border-left: 1px solid rgba(255, 255, 255, .25); line-height: 12px; font-variant-numeric: tabular-nums; pointer-events: none; }
.mx-marks { position: relative; height: 22px; }
.mx-mark { position: absolute; top: 3px; font-size: 10px; font-weight: 700; white-space: nowrap; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); border-left: 2px solid rgba(255, 255, 255, .6); pointer-events: none; }
.mx-sec-chorus { background: rgba(255, 79, 154, .28); border-color: #ff4f9a; }
.mx-sec-verse { background: rgba(139, 92, 255, .28); border-color: #8b5cff; }
.mx-sec-pre { background: rgba(255, 176, 32, .25); border-color: #ffb020; }
.mx-sec-intro { background: rgba(127, 168, 255, .25); border-color: #7fa8ff; }
.mx-sec-bridge { background: rgba(34, 211, 238, .22); border-color: #22d3ee; }
.mx-sec-outro, .mx-sec-break { background: rgba(164, 123, 255, .22); border-color: #a47bff; }
.mx-sec-drop { background: rgba(255, 122, 89, .25); border-color: #ff7a59; }
.mx-lane { position: relative; height: 56px; cursor: pointer; }
.mx-block {
  position: absolute; top: 4px; height: 48px; min-width: 8px; border: 0; border-radius: 10px; padding: 3px 5px; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; line-height: 1.1;
  background: linear-gradient(160deg, var(--bc, #8b5cff), rgba(0, 0, 0, .25)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.mx-block b { font-size: 16px; }
.mx-block small { font-size: 10px; font-weight: 800; opacity: .9; }
.mx-block em { font-style: normal; font-size: 10px; white-space: nowrap; }
.mx-block.on { box-shadow: inset 0 0 0 3px #fff, 0 0 12px rgba(255, 255, 255, .35); z-index: 1; }
.mx-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--cyan, #22d3ee); box-shadow: 0 0 6px var(--cyan, #22d3ee); pointer-events: none; z-index: 2; }
.mx-head::before { content: ""; position: absolute; top: 0; left: -5px; border: 6px solid transparent; border-top-color: var(--cyan, #22d3ee); }
.mx-bgc-stage { --bc: #7b3fbf; } .mx-bgc-neoncity { --bc: #3a2a8a; } .mx-bgc-beach { --bc: #1fa7c9; } .mx-bgc-school { --bc: #2f7a5e; }
.mx-bgc-space { --bc: #24185e; } .mx-bgc-forest { --bc: #3a9a5a; } .mx-bgc-candy { --bc: #e86aa8; } .mx-bgc-rooftop { --bc: #6b4fb0; }
.mx-bgc-rainy { --bc: #4f5c80; } .mx-bgc-studio { --bc: #3b2f60; } .mx-bgc-cafe { --bc: #b77a4b; } .mx-bgc-room { --bc: #d46a9a; }
.mx-bgc-concert { --bc: #2a1a5c; } .mx-bgc-garden { --bc: #e68ab5; } .mx-bgc-snowtown { --bc: #4f63b0; } .mx-bgc-arcade { --bc: #5a2a8c; }
.mx-bgc-underwater { --bc: #1576b5; } .mx-bgc-sunset { --bc: #e0607a; }
.mx-addrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-add { background: var(--mx-card); box-shadow: inset 0 0 0 2px var(--cyan, #22d3ee); }
.mx-add small { font-weight: 600; color: var(--mx-muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.mx-count { font-size: 13px; color: var(--mx-muted); }
.mx-selbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 14px; background: var(--mx-card); }
.mx-selname { display: flex; flex-direction: column; min-width: 0; }
.mx-selname small { color: var(--mx-muted); font-size: 12px; }
.mx-selbtns { display: flex; align-items: center; gap: 4px; }
.mx-b { border: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--mx-ink); font-size: 16px; }
.mx-b:active:not(:disabled) { transform: scale(.94); }
.mx-nlabel { font-size: 11px; color: var(--mx-muted); white-space: nowrap; }

/* the scene sheet */
.mx-sheet { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mx-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; background: var(--mx-ink); border-radius: 14px; padding: 4px; }
.mx-tab { border: 0; background: transparent; border-radius: 10px; min-height: 48px; padding: 4px 0; font-size: 10px; font-weight: 700; color: var(--mx-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; overflow: hidden; }
.mx-tab span { font-size: 18px; line-height: 1.1; }
.mx-tab.on { background: var(--mx-grad); color: #fff; }
.mx-panel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mx-h { margin: 4px 0 0; font-size: 13px; color: var(--mx-muted); font-weight: 700; }
.mx-tip { margin: 0; font-size: 13px; color: var(--mx-muted); line-height: 1.35; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-chip { border: 0; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--mx-card); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.mx-chip.on { background: var(--mx-grad); color: #fff; }
.mx-chip.off { opacity: .5; }
.mx-chip small { font-weight: 500; font-size: 11px; }
.mx-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mx-thumb { position: relative; border: 0; padding: 3px 3px 4px; border-radius: 12px; background: var(--mx-card); display: flex; flex-direction: column; gap: 3px; min-width: 0; text-align: left; }
.mx-thumb small { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.mx-thumb em { position: absolute; left: 6px; right: 6px; top: 26%; font-style: normal; font-size: 10px; font-weight: 800; text-align: center; background: rgba(12, 8, 24, .78); color: #fff; border-radius: 8px; padding: 3px 2px; }
.mx-thumb.on { box-shadow: inset 0 0 0 3px var(--pink, #ff4f9a), 0 3px 10px rgba(255, 79, 154, .3); }
.mx-thumb.off { opacity: .6; }
.mx-tsvg { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; position: relative; }
.mx-tsvg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-crow { display: flex; flex-direction: column; gap: 4px; }
.mx-clabel { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--mx-muted); }
.mx-clabel i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.mx-sws { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mx-sw { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.mx-sw.on { box-shadow: 0 0 0 3px var(--mx-text), inset 0 0 0 2px rgba(0, 0, 0, .2); }
.mx-pick { flex: none; position: relative; width: 44px; height: 44px; border-radius: 999px; background: var(--mx-card); display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.mx-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.mx-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; color: var(--mx-muted); }
.mx-field span { display: flex; justify-content: space-between; }
.mx-inp { min-height: 44px; border-radius: 12px; border: 2px solid var(--mx-card); background: var(--mx-ink); color: var(--mx-text); padding: 0 12px; font: inherit; font-size: 16px; width: 100%; }
.mx-inp:focus { outline: none; border-color: var(--violet, #8b5cff); }
.mx-stgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mx-stb { border: 0; border-radius: 12px; background: var(--mx-card); aspect-ratio: 1; min-height: 44px; padding: 6px; display: grid; place-items: center; }
.mx-stb svg { width: 100%; height: 100%; display: block; }
.mx-stb.on { box-shadow: inset 0 0 0 3px var(--cyan, #22d3ee); background: rgba(34, 211, 238, .15); }
.mx-stool { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 8px; align-items: center; padding: 6px; border-radius: 14px; background: var(--mx-card); }
.mx-stsel { width: 44px; height: 44px; display: grid; place-items: center; }
.mx-stsel svg { width: 36px; height: 36px; }
.mx-slide { display: flex; flex-direction: column; font-size: 11px; font-weight: 700; color: var(--mx-muted); min-width: 0; }
.mx-slide input { width: 100%; height: 44px; margin: 0; accent-color: var(--cyan, #22d3ee); }
.mx-who { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.mx-who .mx-chip { flex-direction: column; border-radius: 14px; padding: 6px 4px; min-height: 84px; justify-content: center; gap: 2px; }
.mx-whoav { width: 48px; height: 52px; display: block; }
.mx-whoav svg { width: 100%; height: 100%; display: block; }
.mx-whoall { font-size: 30px; line-height: 52px; }
.mx-who small { font-size: 12px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-craft { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; background: var(--mx-card); }
.mx-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.mx-meter > span:first-child { color: var(--mx-muted); font-weight: 700; }
.mx-mbar { height: 12px; border-radius: 999px; background: var(--mx-ink); overflow: hidden; }
.mx-mbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cyan, #22d3ee), var(--violet, #8b5cff), var(--pink, #ff4f9a)); transition: width .3s ease; }

@media (max-width: 380px) {
  .mx-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-stgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mx-nlabel { display: none; }
}
@media (min-width: 700px) {
  .mx-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mx-stgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* ================================================================ round 8 (docs/v-pop-round8.md #154, #155): more MV looks
   Layers over round 6's: .mx-trw (the transitions' moves) holds the camera; then lights, effects, the filter's overlay,
   stickers, words, a frame, karaoke and the transition overlay. Stage variants (.mx-sv) are whole stages; only the one
   on screen shows. Every animation moves transform or opacity only; reduced motion stops them (see the end). */

.mx-trw { position: absolute; inset: 0; }
.mx-lit, .mx-flo, .mx-frm, .mx-trl { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mx-lit { z-index: 2; }
.mx-flo { z-index: 3; }
.mx-frm { z-index: 6; }
.mx-trl { z-index: 8; }
.mx-sv { position: absolute; inset: 0; visibility: hidden; }
.mx-sv.on { visibility: visible; }
.mx-view .stage.mx-off { visibility: hidden; }

/* ---- two-shot, split screen and story scenes */
.mx-two .stage-row { transform: scale(1.32); transform-origin: 50% 96%; }
.mx-split .stage-mem { width: 30% !important; bottom: -42% !important; --s: 1 !important; z-index: 5 !important; }
.mx-split-2 .stage-mem:nth-child(1) { left: 25% !important; }
.mx-split-2 .stage-mem:nth-child(2) { left: 75% !important; }
.mx-split-3 .stage-mem { width: 25% !important; bottom: -32% !important; }
.mx-split-3 .stage-mem:nth-child(1) { left: 16.7% !important; }
.mx-split-3 .stage-mem:nth-child(2) { left: 50% !important; }
.mx-split-3 .stage-mem:nth-child(3) { left: 83.3% !important; }
.mx-tall .mx-split .stage-mem { width: 46% !important; bottom: -8% !important; }
.mx-tall .mx-split-3 .stage-mem { width: 33% !important; bottom: -2% !important; }
.mx-panes, .mx-divs { position: absolute; inset: 0; display: flex; pointer-events: none; }
.mx-panes i { flex: 1; background: var(--pc, #ff4f9a); opacity: .2; }
.mx-panes i:nth-child(2n) { opacity: .3; }
.mx-divs { z-index: 60; }
.mx-divs i { border-right: 3px solid #fff; box-shadow: 1px 0 6px rgba(0, 0, 0, .25); }
.mx-divs-2 i { flex: 0 0 50%; }
.mx-divs-3 i { flex: 0 0 33.333%; }
.mx-story .stage-fig { animation-duration: 4.6s; }

/* ---- colour filters: a CSS filter on the picture and an overlay of their own (the MV maker's thumbnails too) */
.mx-fl-dreamy .mx-cam, .mx-flsam.mx-fl-dreamy > svg { filter: saturate(1.15) brightness(1.08) contrast(.92); }
.mx-fl-film .mx-cam, .mx-flsam.mx-fl-film > svg { filter: sepia(.35) contrast(1.1) saturate(.85); }
.mx-fl-bw .mx-cam, .mx-flsam.mx-fl-bw > svg { filter: grayscale(1) contrast(1.15); }
.mx-fl-neon .mx-cam, .mx-flsam.mx-fl-neon > svg { filter: saturate(1.8) contrast(1.15) hue-rotate(-10deg); }
.mx-fl-pastel .mx-cam, .mx-flsam.mx-fl-pastel > svg { filter: saturate(.65) brightness(1.15) contrast(.85); }
.mx-fl-sepia .mx-cam, .mx-flsam.mx-fl-sepia > svg { filter: sepia(.85) contrast(1.05); }
.mx-fl-contrast .mx-cam, .mx-flsam.mx-fl-contrast > svg { filter: contrast(1.5) saturate(1.3); }
.mx-fl-vhs .mx-cam, .mx-flsam.mx-fl-vhs > svg { filter: saturate(1.3) contrast(1.1) hue-rotate(-5deg); }
.mx-fl-cool .mx-cam, .mx-flsam.mx-fl-cool > svg { filter: hue-rotate(15deg) saturate(1.1) brightness(1.02); }
.mx-fl-warm .mx-cam, .mx-flsam.mx-fl-warm > svg { filter: sepia(.2) saturate(1.25) hue-rotate(-12deg); }
.mx-fl-vivid .mx-cam, .mx-flsam.mx-fl-vivid > svg { filter: saturate(1.6) contrast(1.08); }
.mx-fl-night .mx-cam, .mx-flsam.mx-fl-night > svg { filter: brightness(.75) saturate(.9) hue-rotate(20deg); }
.mx-fl-rosy .mx-cam, .mx-flsam.mx-fl-rosy > svg { filter: saturate(1.2) hue-rotate(-20deg); }
.mx-fl-golden .mx-cam, .mx-flsam.mx-fl-golden > svg { filter: sepia(.3) saturate(1.4) brightness(1.05); }
.mx-flv { position: absolute; inset: 0; pointer-events: none; }
.mx-fl-dreamy .mx-flv { background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0) 38%, rgba(255, 220, 240, .5) 100%); }
.mx-fl-film .mx-flv { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(40, 20, 0, .45) 100%); }
.mx-fl-film .mx-flv::after { content: ""; position: absolute; inset: -10%; background: radial-gradient(circle, rgba(255, 255, 255, .55) 0 .5px, transparent 1px) 0 0 / 23px 29px, radial-gradient(circle, rgba(0, 0, 0, .35) 0 .6px, transparent 1px) 7px 11px / 31px 19px; animation: mx-grain .9s steps(3) infinite; }
@keyframes mx-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -2%); } 100% { transform: translate(0, 0); } }
.mx-fl-bw .mx-flv { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .35) 100%); }
.mx-fl-neon .mx-flv { box-shadow: inset 0 0 18px rgba(255, 79, 154, .55), inset 0 0 40px rgba(34, 211, 238, .35); }
.mx-fl-pastel .mx-flv { background: rgba(255, 230, 245, .18); }
.mx-fl-sepia .mx-flv { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(60, 30, 0, .4) 100%); }
.mx-fl-vhs .mx-flv { background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.mx-fl-vhs .mx-flv::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12%; background: rgba(255, 255, 255, .1); animation: mx-vhsroll 3.4s linear infinite; }
@keyframes mx-vhsroll { from { transform: translateY(-100%); } to { transform: translateY(900%); } }
.mx-fl-cool .mx-flv { background: rgba(80, 160, 255, .12); }
.mx-fl-warm .mx-flv { background: rgba(255, 150, 60, .12); }
.mx-fl-night .mx-flv { background: radial-gradient(ellipse at center, rgba(10, 10, 60, 0) 45%, rgba(10, 10, 60, .55) 100%); }
.mx-fl-rosy .mx-flv { background: rgba(255, 120, 170, .14); }
.mx-fl-golden .mx-flv { background: linear-gradient(120deg, rgba(255, 200, 90, .35), rgba(255, 200, 90, 0) 55%); }

/* ---- transitions into a scene (an overlay, and for some a move of the whole picture) */
.mx-tr { position: absolute; inset: 0; }
.mx-tr-fade { background: #000; animation: mx-trfade .6s ease-out both; }
.mx-tr-flash { background: #fff; animation: mx-trfade .45s ease-out both; }
@keyframes mx-trfade { from { opacity: 1; } to { opacity: 0; } }
.mx-tr-wipe { background: linear-gradient(90deg, var(--pink, #ff4f9a), var(--violet, #8b5cff)); animation: mx-trwipe .55s ease-in-out both; }
@keyframes mx-trwipe { from { transform: translateX(0); } to { transform: translateX(101%); } }
.mx-tr-heart svg { position: absolute; left: 50%; top: 50%; width: 22%; transform: translate(-50%, -50%) scale(0); animation: mx-trheart .8s ease-in both; }
@keyframes mx-trheart { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 55% { transform: translate(-50%, -50%) scale(9); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(12); opacity: 0; } }
.mx-tr-glitch i { position: absolute; left: 0; right: 0; height: 20%; background: linear-gradient(90deg, rgba(34, 211, 238, .6), rgba(255, 79, 154, .6)); animation: mx-trglitch .5s steps(4) var(--d, 0s) both; }
@keyframes mx-trglitch { 0% { transform: translateX(-30%); opacity: .9; } 50% { transform: translateX(25%); opacity: .7; } 100% { transform: translateX(0); opacity: 0; } }
.mx-tr-sparkle::before, .mx-tr-star::before { content: ""; position: absolute; inset: 0; background: #fff; animation: mx-trfade6 .45s ease-out both; }
@keyframes mx-trfade6 { from { opacity: .6; } to { opacity: 0; } }
.mx-tr-sparkle i, .mx-tr-star i { position: absolute; left: 46%; top: 44%; width: 8%; aspect-ratio: 1; background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: mx-trspark .7s ease-out var(--d, 0s) both; }
.mx-tr-star i { background: #ffd23f; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@keyframes mx-trspark { 0% { transform: rotate(var(--a, 0deg)) translateY(0) scale(.2); opacity: 1; } 100% { transform: rotate(var(--a, 0deg)) translateY(-280%) scale(1); opacity: 0; } }
.mx-tr-blinds i { display: block; height: calc(100% / 6); background: #1b0033; transform-origin: 50% 0; animation: mx-trblind .55s ease-in var(--d, 0s) both; }
@keyframes mx-trblind { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.mx-trw-slide { animation: mx-twslide .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mx-twslide { from { transform: translateX(100%); } to { transform: none; } }
.mx-trw-swipe { animation: mx-twswipe .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mx-twswipe { from { transform: translateY(100%); } to { transform: none; } }
.mx-trw-zoom { animation: mx-twzoom .5s ease-out both; }
@keyframes mx-twzoom { from { transform: scale(1.8); opacity: 0; } to { transform: none; opacity: 1; } }
.mx-trw-spin { animation: mx-twspin .7s ease-out both; }
@keyframes mx-twspin { from { transform: rotate(-200deg) scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- stage lights (strobe and pulse: .mx-lib's opacity is set on the beat; soft, never a full white flash) */
.mx-li { position: absolute; inset: 0; }
.mx-li-wash { background: radial-gradient(ellipse at 50% -10%, var(--lc, #ff4f9a) 0, transparent 70%); animation: mx-libreathe 4s ease-in-out infinite; }
@keyframes mx-libreathe { 0%, 100% { opacity: .4; } 50% { opacity: .65; } }
.mx-lib { position: absolute; inset: 0; opacity: 0; }
.mx-li-pulse .mx-lib { background: radial-gradient(ellipse at 50% 40%, var(--lc, #ff4f9a), transparent 75%); }
.mx-li-strobe .mx-lib { background: radial-gradient(ellipse at 50% 30%, #ffffff, var(--lc, #ff4f9a) 80%); }
.mx-lbeam { position: absolute; top: -10%; width: 22%; height: 130%; margin-left: -11%; transform-origin: 50% 0; background: linear-gradient(to bottom, var(--c, #fff), transparent 85%); opacity: .35; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: mx-sweep 4s ease-in-out var(--d, 0s) infinite; }
.mx-li-rainbow .mx-lbeam { width: 16%; margin-left: -8%; opacity: .3; }
.mx-ldots { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 79, 154, .55) 0 1.4%, transparent 1.6%) 0 0 / 12% 12%, radial-gradient(circle, rgba(34, 211, 238, .5) 0 1.2%, transparent 1.4%) 6% 6% / 12% 12%, radial-gradient(circle, rgba(255, 210, 63, .5) 0 1%, transparent 1.2%) 3% 9% / 9% 9%; animation: mx-ldisco 14s linear infinite; }
@keyframes mx-ldisco { to { transform: rotate(360deg); } }
.mx-li-spot { background: radial-gradient(circle at 50% 62%, transparent 0 22%, rgba(0, 0, 0, .55) 46%); }
.mx-li-sunbeam { background: repeating-conic-gradient(from 200deg at 8% -10%, rgba(255, 230, 160, 0) 0 6deg, rgba(255, 230, 160, .22) 6deg 9deg); animation: mx-libreathe 5s ease-in-out infinite; }
.mx-li-neon { box-shadow: inset 0 0 0 3px var(--lc, #ff4f9a), inset 0 0 24px var(--lc, #ff4f9a); animation: mx-libreathe 2.2s ease-in-out infinite; }

/* ---- round 8's effects (particles: ≤ 40 each, see mv8play.fx8HTML) */
.mx-fx-lasers .mx-p { top: -6%; height: 120%; width: 2px; transform-origin: 50% 100%; background: var(--c, #ff4f9a); box-shadow: 0 0 6px var(--c, #ff4f9a); opacity: .8; animation: mx-laser var(--t, 3s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-lasers .mx-p::before { display: none; }
@keyframes mx-laser { from { transform: rotate(calc(var(--r, 24deg) * -1)); } to { transform: rotate(var(--r, 24deg)); } }
.mx-fx-smoke .mx-p { top: auto; bottom: -12%; height: auto; width: calc(120px * var(--s, 1)); animation: mx-smoke calc(var(--t, 4s) * 2) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-smoke .mx-p::before { position: static; display: block; aspect-ratio: 2.2; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); }
@keyframes mx-smoke { from { transform: translateX(-30px) scale(1); opacity: .5; } to { transform: translateX(30px) scale(1.2); opacity: .85; } }
.mx-fx-leaks .mx-p { width: 70%; height: auto; animation: mx-leak var(--t, 7s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-leaks .mx-p::before { position: static; display: block; border-radius: 50%; background: radial-gradient(circle, var(--c, #ffb36b), transparent 65%); opacity: .45; }
@keyframes mx-leak { from { opacity: .2; transform: translateX(-6%) scale(.9); } to { opacity: .8; transform: translateX(6%) scale(1.1); } }
.mx-fx-glitter .mx-p { height: auto; width: calc(7px * var(--s, 1)); animation: mx-twinkle calc(var(--t, 4s) * .4) ease-in-out var(--d, 0s) infinite; }
.mx-fx-glitter .mx-p::before { position: static; display: block; background: var(--c, #ffd23f); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.mx-fx-flare .mx-p { height: auto; width: calc(40px * var(--s, 1)); animation: mx-flarepulse var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-flare .mx-p::before { position: static; display: block; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .75) 0 12%, rgba(255, 220, 150, .35) 30%, transparent 70%); }
.mx-fx-flare .mx-p:first-child::after { content: ""; position: absolute; left: -200%; top: 50%; width: 500%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent); }
@keyframes mx-flarepulse { from { opacity: .5; transform: scale(.9); } to { opacity: 1; transform: scale(1.1); } }
.mx-fx-lightning .mx-p { width: 26%; height: 70%; margin-left: -13%; opacity: 0; animation: mx-bolt var(--t, 3.4s) linear var(--d, 0s) infinite; }
.mx-fx-lightning .mx-p::before { width: 100%; height: 100%; aspect-ratio: auto; background: #fff8c8; clip-path: polygon(55% 0, 25% 52%, 48% 52%, 30% 100%, 78% 40%, 54% 40%, 72% 0); }
@keyframes mx-bolt { 0%, 88%, 100% { opacity: 0; } 90% { opacity: 1; } 92% { opacity: .2; } 94% { opacity: .9; } }
.mx-fx-rainbow .mx-p { top: 8%; left: 10%; width: 80%; height: auto; animation: mx-libreathe var(--t, 6s) ease-in-out infinite; }
.mx-fx-rainbow .mx-p::before { position: static; display: block; aspect-ratio: 2; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: radial-gradient(circle at 50% 100%, transparent 0 46%, #a47bff 46% 52%, #4dabf7 52% 58%, #2ee6a0 58% 64%, #ffe066 64% 70%, #ffb020 70% 76%, #ff5d73 76% 82%, transparent 82%); opacity: .6; }
.mx-fx-heartrain .mx-p { width: calc(16px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.2); }
.mx-fx-heartrain .mx-p::before { content: "♥"; aspect-ratio: auto; font-size: calc(16px * var(--s, 1)); line-height: 1; color: var(--c, #ff4f9a); text-shadow: 0 0 6px rgba(255, 255, 255, .6); animation: mx-spin 3s linear infinite; }
.mx-fx-money .mx-p { width: calc(18px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.4); }
.mx-fx-money .mx-p::before { aspect-ratio: 1.9; border-radius: 2px; background: linear-gradient(90deg, #5fd17a, #2fa05f 50%, #5fd17a); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); animation: mx-flutter 1.4s ease-in-out infinite; }
@keyframes mx-flutter { 0%, 100% { transform: rotate(-25deg) scaleX(1); } 50% { transform: rotate(25deg) scaleX(.6); } }
.mx-fx-leaves .mx-p { width: calc(14px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.6); }
.mx-fx-leaves .mx-p::before { aspect-ratio: 1.4; border-radius: 0 80% 0 80%; background: linear-gradient(135deg, #ffb020, #e0602a); animation: mx-sway 2.4s ease-in-out infinite; }
.mx-fx-disco .mx-p { height: auto; width: calc(26px * var(--s, 1)); animation: mx-discospot var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-disco .mx-p::before { position: static; display: block; border-radius: 50%; background: radial-gradient(circle, var(--c, #ff4f9a) 0 35%, transparent 70%); opacity: .65; }
@keyframes mx-discospot { from { transform: translate(-40px, -20px); } to { transform: translate(40px, 24px); } }
.mx-fx-glitch .mx-p { left: 0; width: 100%; height: 6%; animation: mx-glitchbar var(--t, 2s) steps(6) var(--d, 0s) infinite; }
.mx-fx-glitch .mx-p::before { width: 100%; height: 100%; aspect-ratio: auto; background: var(--c, #22d3ee); opacity: .35; }
@keyframes mx-glitchbar { 0%, 70%, 100% { transform: translateX(0); opacity: 0; } 75% { transform: translateX(-8%); opacity: 1; } 85% { transform: translateX(6%); opacity: .8; } 95% { transform: translateX(-3%); opacity: .4; } }
.mx-fx-butterflies .mx-p { height: auto; width: calc(18px * var(--s, 1)); animation: mx-flyby var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-butterflies .mx-p::before { content: "🦋"; position: static; display: block; aspect-ratio: auto; font-size: calc(16px * var(--s, 1)); line-height: 1; animation: mx-flap .35s ease-in-out infinite alternate; }
@keyframes mx-flyby { 0% { transform: translate(-30px, 10px); } 50% { transform: translate(0, -14px); } 100% { transform: translate(30px, 6px); } }
@keyframes mx-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
.mx-fx-balloons .mx-p { animation-name: mx-rise; width: calc(20px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.6); }
.mx-fx-balloons .mx-p::before { aspect-ratio: .82; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .7) 0 12%, var(--c, #ff4f9a) 14%); animation: mx-sway 3s ease-in-out infinite; }
.mx-fx-notes .mx-p { animation-name: mx-rise; width: calc(16px * var(--s, 1)); animation-duration: calc(var(--t, 4s) * 1.3); }
.mx-fx-notes .mx-p::before { content: "♪"; aspect-ratio: auto; font-size: calc(18px * var(--s, 1)); line-height: 1; color: var(--c, #ffd23f); text-shadow: 0 0 6px rgba(255, 255, 255, .7); animation: mx-sway 2s ease-in-out infinite; }
.mx-fx-shooting .mx-p { height: 2px; width: 60px; animation: mx-shoot var(--t, 4s) ease-in var(--d, 0s) infinite; }
.mx-fx-shooting .mx-p::before { position: static; display: block; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff); }
@keyframes mx-shoot { 0% { transform: translate(0, 0) rotate(25deg); opacity: 0; } 10% { opacity: 1; } 40% { transform: translate(140px, 65px) rotate(25deg); opacity: 0; } 100% { transform: translate(140px, 65px) rotate(25deg); opacity: 0; } }
.mx-fx-bokeh .mx-p { height: auto; width: calc(30px * var(--s, 1)); animation: mx-bokeh var(--t, 4s) ease-in-out var(--d, 0s) infinite alternate; }
.mx-fx-bokeh .mx-p::before { position: static; display: block; border-radius: 50%; background: radial-gradient(circle, var(--c, #ffffff) 0, rgba(255, 255, 255, 0) 70%); opacity: .5; }
@keyframes mx-bokeh { from { transform: translate(-10px, 6px) scale(.8); opacity: .3; } to { transform: translate(10px, -6px) scale(1.15); opacity: .9; } }

/* ---- frames (their decorations are mv8art.frameArt's SVG; the rest is drawn here) */
.mx-fr { position: absolute; inset: 0; container-type: inline-size; }
.mx-frsvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-fr-polaroid { border: 10px solid #fffdf8; border-width: 3.5cqw 3.5cqw 11cqw; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.mx-frcap { position: absolute; left: 0; right: 0; bottom: -9cqw; text-align: center; font: 700 5cqw/1 "Noteworthy", "Marker Felt", "Comic Sans MS", cursive; color: #3a2a4a; white-space: nowrap; overflow: hidden; }
.mx-fr-film::before, .mx-fr-film::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; background: #111 repeating-linear-gradient(90deg, transparent 0 3cqw, #f4f0e8 3cqw 5.4cqw, transparent 5.4cqw 8cqw) 0 50% / 100% 42% no-repeat; }
.mx-fr-film::before { top: 0; }
.mx-fr-film::after { bottom: 0; }
.mx-fr-phone { border: 8px solid #111; border-width: 2.2cqw; border-radius: 4cqw; box-shadow: inset 0 0 0 .5cqw #333; }
.mx-frbar { position: absolute; top: 1.5%; left: 4%; right: 4%; display: flex; justify-content: space-between; font: 700 3cqw/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.mx-frbar i { font-style: normal; }
.mx-frlive { position: absolute; top: 9%; left: 4%; background: #ff2e5a; color: #fff; font: 800 2.8cqw/1 system-ui, sans-serif; padding: .6cqw 1.4cqw; border-radius: 1cqw; }
.mx-freye { position: absolute; top: 9%; left: 17%; background: rgba(0, 0, 0, .45); color: #fff; font: 700 2.6cqw/1 system-ui, sans-serif; padding: .7cqw 1.4cqw; border-radius: 1cqw; }
.mx-frhearts { position: absolute; right: 4%; bottom: 10%; width: 6cqw; height: 40%; }
.mx-frhearts i { position: absolute; bottom: 0; left: 0; font-size: 4cqw; font-style: normal; opacity: 0; animation: mx-heartup 2.6s ease-out infinite; }
.mx-frhearts i:nth-child(2) { animation-delay: -.9s; }
.mx-frhearts i:nth-child(3) { animation-delay: -1.7s; }
@keyframes mx-heartup { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-40%, -500%) scale(1.1); opacity: 0; } }
.mx-frchat { position: absolute; left: 4%; bottom: 6%; background: rgba(0, 0, 0, .4); color: #fff; font: 600 2.8cqw/1.2 system-ui, sans-serif; padding: .8cqw 1.6cqw; border-radius: 2cqw; }
.mx-fr-tv { border: 10px solid #3a2f2a; border-width: 3cqw; border-radius: 6cqw; box-shadow: inset 0 0 0 .8cqw #6a5a4e, inset 0 0 6cqw rgba(0, 0, 0, .55); }
.mx-frch { position: absolute; top: 4%; right: 5%; font: 800 4.4cqw/1 ui-monospace, Menlo, monospace; color: #7fff7f; text-shadow: 0 0 6px rgba(127, 255, 127, .8); }
.mx-fr-comic { border: 6px solid #111; border-width: 1.6cqw; box-shadow: inset 0 0 0 .8cqw #fff; }
.mx-fr-sparkle { box-shadow: inset 0 0 4cqw rgba(255, 255, 255, .55); }
.mx-frc { position: absolute; width: 8%; aspect-ratio: 1.4; border: 0 solid #fff; }
.mx-frc.tl { top: 5%; left: 4%; border-top-width: 2px; border-left-width: 2px; }
.mx-frc.tr { top: 5%; right: 4%; border-top-width: 2px; border-right-width: 2px; }
.mx-frc.bl { bottom: 5%; left: 4%; border-bottom-width: 2px; border-left-width: 2px; }
.mx-frc.br { bottom: 5%; right: 4%; border-bottom-width: 2px; border-right-width: 2px; }
.mx-frrec { position: absolute; top: 7.5%; left: 7%; font: 800 3.6cqw/1 ui-monospace, Menlo, monospace; color: #ff2e5a; text-shadow: 0 1px 2px #000; animation: mx-blink 1.2s steps(1) infinite; }
.mx-frtime { position: absolute; bottom: 7.5%; right: 7%; font: 700 3.2cqw/1 ui-monospace, Menlo, monospace; color: #fff; text-shadow: 0 1px 2px #000; }
.mx-frpwr { position: absolute; top: 7.5%; right: 7%; font: 700 3cqw/1 system-ui, sans-serif; color: #7fff7f; }
.mx-fr-cinema::before, .mx-fr-cinema::after { content: ""; position: absolute; left: 0; right: 0; height: 11%; background: #000; }
.mx-fr-cinema::before { top: 0; }
.mx-fr-cinema::after { bottom: 0; }

/* ---- words: round 8's styles (mx-k8-*), sizes (mx-z-*), colour (--tc) and animations (mx-a-*) */
.mx-txt[style*="--tc"] span { color: var(--tc); }
.mx-k8 span { -webkit-text-stroke: 0; text-shadow: none; animation: none; background: none; padding: 0; border-radius: 0; box-shadow: none; font-family: var(--font-display, "Baloo 2", "Fredoka", system-ui, sans-serif); }
.mx-k8 span::after, .mx-k8 span::before { content: none; }
.mx-k8-glow span { color: var(--tc, #fff); text-shadow: 0 0 .1em #fff, 0 0 .35em var(--tc, #ff4f9a), 0 0 .8em var(--violet, #8b5cff); }
.mx-k8-outline span { color: transparent; -webkit-text-stroke: .06em var(--tc, #fff); }
.mx-k8-rainbow span { background: linear-gradient(90deg, #ff5d73, #ffb020, #ffe066, #2ee6a0, #4dabf7, #a47bff); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .3)); }
.mx-k8-retro span { color: var(--tc, #ffe066); font-style: italic; text-shadow: .05em .05em 0 #ff4f9a, .1em .1em 0 #7b5cff, .15em .15em 0 #22d3ee; }
.mx-k8-comic span { display: inline-block; color: #111; background: #ffe066; padding: .18em .5em; border: .08em solid #111; box-shadow: .08em .08em 0 #111; transform: rotate(-3deg); font-family: "Arial Black", "Baloo 2", sans-serif; }
.mx-k8-hand span { font-family: "Marker Felt", "Noteworthy", "Chalkboard SE", "Comic Sans MS", cursive; font-weight: 700; color: var(--tc, #fff); text-shadow: 0 .05em .1em rgba(0, 0, 0, .45); }
.mx-k8-script span { font-family: "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive; font-weight: 700; font-style: italic; color: var(--tc, #fff6fd); text-shadow: 0 0 .3em rgba(255, 79, 154, .7); }
.mx-k8-sticker span { color: var(--tc, #ff4f9a); -webkit-text-stroke: .14em #fff; paint-order: stroke fill; text-shadow: 0 .1em .2em rgba(0, 0, 0, .3); }
.mx-k8-chrome span { background: linear-gradient(180deg, #fff 0%, #c9d2e8 45%, #7a84a8 52%, #f2f4ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 .05em .08em rgba(0, 0, 0, .5)); }
.mx-k8-news { left: 0; right: 0; }
.mx-k8-news span { display: block; width: 100%; text-align: left; background: linear-gradient(90deg, #e0003c 0 18%, rgba(14, 9, 26, .85) 18%); color: var(--tc, #fff); padding: .2em .4em .2em 20%; font-size: clamp(13px, 3.8vw, 26px); font-size: 5cqw; }
.mx-k8-subtitle span { background: rgba(0, 0, 0, .6); color: var(--tc, #ffe066); padding: .1em .45em; border-radius: .2em; font-family: system-ui, sans-serif; font-weight: 600; font-size: clamp(13px, 3.8vw, 26px); font-size: 5cqw; }
.mx-k8-kawaii span { color: var(--tc, #ff4f9a); background: #fff0f7; padding: .2em .7em; border-radius: 1em; box-shadow: 0 0 0 .08em #ffb3d1, 0 .1em 0 rgba(0, 0, 0, .12); }
.mx-k8-kawaii span::before { content: "♡ "; }
.mx-k8-kawaii span::after { content: " ♡"; }
.mx-z-s span { font-size: clamp(12px, 3.6vw, 26px); font-size: 4.6cqw; }
.mx-z-l span { font-size: clamp(20px, 7vw, 52px); font-size: 9.6cqw; }
.mx-z-xl span { font-size: clamp(26px, 9.4vw, 70px); font-size: 13cqw; }
.mx-a-bounce span { animation: mx-tbounce 1s ease-in-out infinite; }
@keyframes mx-tbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%); } }
.mx-a-wave span i { display: inline-block; font-style: normal; animation: mx-twave 1.2s ease-in-out calc(var(--i, 0) * -.08s) infinite; }
@keyframes mx-twave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18%); } }
.mx-a-glow span { animation: mx-tglow 1.6s ease-in-out infinite; }
@keyframes mx-tglow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.mx-a-slide span { animation: mx-tslide .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mx-tslide { from { transform: translateX(-120%); opacity: 0; } to { transform: none; opacity: 1; } }
.mx-a-zoom span { animation: mx-tzoom .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes mx-tzoom { from { transform: scale(2.4); opacity: 0; } to { transform: none; opacity: 1; } }
.mx-a-drop span { animation: mx-tdrop .8s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes mx-tdrop { from { transform: translateY(-160%); } to { transform: none; } }
.mx-a-float span { animation: mx-tfloat 3s ease-in-out infinite; }
@keyframes mx-tfloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8%) rotate(2deg); } }
.mx-a-shake span { animation: mx-tshake .5s linear infinite; }
@keyframes mx-tshake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3%) rotate(-1deg); } 75% { transform: translateX(3%) rotate(1deg); } }

/* ---- the karaoke's lyric styles (lyrics.js's .ly- markup, tuned through its own variables) */
.mx-ly-glow .ly-kara { --ly-fill: #ffffff; --ly-bg: rgba(14, 9, 26, .35); }
.mx-ly-glow .ly-t { filter: drop-shadow(0 0 4px #ff4f9a) drop-shadow(0 0 8px #8b5cff); }
.mx-ly-bubble .ly-kara { --ly-fill: #ff4f9a; --ly-off: #7a6a8a; --ly-bg: #ffffff; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mx-ly-bubble .ly-t, .mx-ly-cute .ly-t { background-image: linear-gradient(90deg, var(--ly-fill) 0, var(--ly-fill) calc(var(--ly-u, 0) * 100%), #2a2036 calc(var(--ly-u, 0) * 100%), #2a2036 100%); filter: none; }
.mx-ly-big .ly-kara { --ly-size: 26px; }
.mx-ly-cute .ly-kara { --ly-fill: #ff4f9a; --ly-bg: rgba(255, 240, 247, .9); --ly-off: #b07a98; border-radius: 22px; box-shadow: 0 0 0 2px #ffb3d1; }
.mx-ly-gold .ly-kara { --ly-fill: #ffd23f; --ly-bg: rgba(40, 20, 0, .55); box-shadow: 0 0 0 1.5px rgba(255, 210, 63, .6); }
.mx-ly-clear .ly-kara { --ly-bg: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.mx-ly-neon .ly-kara { --ly-fill: #22d3ee; --ly-bg: rgba(5, 0, 20, .6); box-shadow: 0 0 0 1.5px #ff4f9a, 0 0 12px rgba(255, 79, 154, .6); }
.mx-kara.mx-ly-top { bottom: auto; top: 4%; }

/* ---- sticker animations */
.mx-sa-spin svg { animation: mx-sspin 3s linear infinite; }
@keyframes mx-sspin { to { transform: rotate(360deg); } }
.mx-sa-pulse svg { animation: mx-spulse 1s ease-in-out infinite; }
@keyframes mx-spulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.mx-sa-float svg { animation: mx-sfloat 3.2s ease-in-out infinite; }
@keyframes mx-sfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14%); } }
.mx-sa-bounce svg { animation: mx-sbounce .9s cubic-bezier(.3, 0, .6, 1) infinite; }
@keyframes mx-sbounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-22%) scale(.95, 1.05); } 80% { transform: translateY(0) scale(1.08, .92); } }
.mx-sa-wiggle svg { animation: mx-swiggle .6s ease-in-out infinite; }
@keyframes mx-swiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.mx-sa-swing svg { transform-origin: 50% 0; animation: mx-sswing 2s ease-in-out infinite; }
@keyframes mx-sswing { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
.mx-sa-twinkle svg { animation: mx-stwinkle 1.6s ease-in-out infinite; }
@keyframes mx-stwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.85); } }
.mx-sa-flip svg { animation: mx-sflip 2.4s ease-in-out infinite; }
@keyframes mx-sflip { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
.mx-sa-still svg { animation: none; }

/* ---- the MV maker: two rows of tabs, themes, thumbnails, the album's songs (#155) */
.mx-tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mx-tab { min-height: 50px; }
.mx-big .mx-chip { min-height: 48px; }
.mx-tog { align-self: flex-start; }
.mx-big1 { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
.mx-wait { text-align: center; padding: 14px 8px; }
.mx-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mx-tplb { border: 0; border-radius: 14px; padding: 4px 4px 6px; background: var(--mx-card); display: flex; flex-direction: column; gap: 4px; min-height: 44px; min-width: 0; text-align: left; }
.mx-tplb:active { transform: scale(.97); }
.mx-tplt { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 4px; min-width: 0; }
.mx-tplt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-tplt i { display: flex; gap: 2px; flex: none; }
.mx-tplt em { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.mx-flgrid, .mx-frgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mx-flb, .mx-frb { position: relative; border: 0; padding: 3px 3px 4px; border-radius: 12px; background: var(--mx-card); display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 44px; text-align: left; }
.mx-flb small, .mx-frb small { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.mx-flb.on, .mx-frb.on, .mx-tplb.on { box-shadow: inset 0 0 0 3px var(--pink, #ff4f9a), 0 3px 10px rgba(255, 79, 154, .3); }
.mx-flsam, .mx-frsam { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; container-type: inline-size; }
.mx-flsam > svg, .mx-frsam > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-trkwrap { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: var(--mx-ink); }
.mx-trk { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 4px; }
.mx-trkb { flex: none; min-width: 112px; max-width: 160px; min-height: 58px; border: 0; border-radius: 14px; padding: 6px 10px; background: var(--mx-card); display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; align-items: center; text-align: left; }
.mx-trkb span { grid-row: 1 / 3; font-size: 18px; font-weight: 800; }
.mx-trkb b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-trkb small { font-size: 11px; font-weight: 700; color: var(--green, #2ee6a0); }
.mx-trkb.need small { color: var(--amber, #ffb020); }
.mx-trkb.on { background: var(--mx-grad); color: #fff; }
.mx-trkb.on small { color: #fff; }
.mx-fill { border: 0; border-radius: 999px; min-height: 48px; padding: 0 18px; font-weight: 800; background: var(--mx-grad); color: #fff; box-shadow: 0 3px 12px rgba(139, 92, 255, .35); }
.mx-fill small { font-weight: 600; opacity: .9; margin-left: 4px; }
.mx-empty { display: flex; flex-direction: column; gap: 10px; padding: 18px 14px; border-radius: 16px; background: var(--mx-card); text-align: center; }
.mx-empty p { margin: 0; font-size: 15px; line-height: 1.4; }
.mx-emptyb { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 380px) {
  .mx-flgrid, .mx-frgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mx-tab { font-size: 9px; }
}
@media (min-width: 700px) {
  .mx-flgrid, .mx-frgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mx-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* reduced motion (round 8): no transitions, light shows, moving frames, word or sticker motion */
@media (prefers-reduced-motion: reduce) {
  .mx-trl, .mx-lib { display: none; }
  .mx-trw, .mx-tr, .mx-tr *, .mx-tr::before, .mx-li, .mx-li *, .mx-fr *, .mx-flv::after, .mx-txt span, .mx-txt span i, .mx-st svg, .mx-sa-spin svg, .mx-sa-pulse svg,
  .mx-sa-float svg, .mx-sa-bounce svg, .mx-sa-wiggle svg, .mx-sa-swing svg, .mx-sa-twinkle svg, .mx-sa-flip svg { animation: none !important; }
}