/* Kinetix Animated Lyric Video: /lyric and /lyric/<token>. Dark ground, orange signal, TRK steps (matches /start v3). */
:root{--ground:#050507;--card:#0e0d10;--line:rgba(255,255,255,.12);--text:rgba(255,255,255,.94);--muted:rgba(255,255,255,.62);
--or:#ff8a1e;--or2:#ffb347;--ok:#3dd68c;--bad:#ff6b6b;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--text);font:16px/1.5 'Space Grotesk',-apple-system,'Segoe UI',sans-serif}
body.lm{background:radial-gradient(120% 60% at 50% -10%,rgba(255,138,30,.16),transparent 60%),var(--ground);min-height:100vh}
a{color:var(--or2)}
h1,h2{font-family:'Archivo Black',Impact,sans-serif;font-weight:400;letter-spacing:-.01em;text-wrap:balance;margin:.2em 0}
h1{font-size:clamp(2.2rem,7vw,3.6rem);line-height:1.02}h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--or2)}
h2{font-size:1.45rem}
.lm-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px calc(10px + env(safe-area-inset-top,0px));max-width:980px;margin:0 auto}
.lm-brand{font-family:'Archivo Black',sans-serif;color:#fff;text-decoration:none;letter-spacing:.02em}.lm-brand span{color:var(--or)}
.lm-tag{font:700 .72rem/1 'Space Mono',monospace;letter-spacing:.14em;color:var(--muted)}
.lm-main{max-width:760px;margin:0 auto;padding:8px 16px 120px}
.lm-foot{max-width:760px;margin:0 auto;padding:24px 16px 40px;color:var(--muted);font-size:.85rem}
.eyebrow,.trk{font:700 .74rem/1 'Space Mono',monospace;letter-spacing:.16em;color:var(--or)}
.lede{font-size:1.12rem;color:var(--muted);max-width:36em}
.help{color:var(--muted);font-size:.9rem;margin:.3em 0 .8em}.help.center,.center{text-align:center}
.opt{font:500 .8rem 'Space Grotesk',sans-serif;color:var(--muted);letter-spacing:0}
.lm-hero{padding:20px 0 8px}
.lm-start-song{display:inline-flex;align-items:center;gap:14px;padding:10px 16px;margin:2px 0 8px;border:1px solid var(--or);border-radius:10px;
color:var(--text);font-weight:700;text-decoration:none;background:rgba(255,138,30,.08)}
.lm-start-song:hover{background:rgba(255,138,30,.18)}
.lm-start-song:focus-visible,.lm-example video:focus-visible{outline:2px solid var(--or2);outline-offset:4px}
.lm-form{scroll-margin-top:18px}
.lm-examples{margin:24px 0 34px}
.lm-examples-heading{margin-bottom:16px}.lm-examples-heading h2{font-size:1.3rem;margin-bottom:8px}
.lm-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lm-example{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--card);scroll-snap-align:start}
.lm-example video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#08080a}
.lm-example-copy{padding:12px}.lm-example-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.lm-example h3{font-size:.98rem;line-height:1.25;margin:0}.lm-example-title span{font:.7rem 'Space Mono',monospace;color:var(--muted)}
.lm-example-copy p{font-size:.82rem;line-height:1.4;color:var(--muted);margin:8px 0 0}
@media (max-width:599px){.lm-examples-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;gap:12px;
overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;margin-inline:-16px;padding:4px 16px 14px}
.lm-examples{margin-bottom:22px}.lm-example-copy{padding:12px 14px}}
body.lm-past .lm-examples{display:none}
.step{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px 18px;margin:16px 0}
label{display:block;font-weight:500;margin:.6em 0}
input[type=text],input[type=email],input:not([type]),textarea{width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
background:#07070a;color:var(--text);font:inherit}
textarea{resize:vertical;min-height:3.2em}
input:focus,textarea:focus{outline:2px solid var(--or);outline-offset:1px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:120px;border:1.5px dashed rgba(255,138,30,.55);
border-radius:16px;background:rgba(255,138,30,.05);cursor:pointer;text-align:center;padding:14px}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop-main{font-family:'Archivo Black',sans-serif;font-size:1.05rem}.drop-help{color:var(--muted);font-size:.85rem}
.drop.has-file{border-style:solid;background:rgba(61,214,140,.06);border-color:rgba(61,214,140,.6)}
.vibes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:700px){.vibes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vibe{position:relative;margin:0;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#0a0a0c;cursor:pointer}
.vibe input{position:absolute;opacity:0}
.vibe:has(input:checked){border-color:var(--or);box-shadow:0 0 0 3px rgba(255,138,30,.25)}
.vibe:has(input:focus-visible){outline:2px solid var(--or);outline-offset:2px}
.vibe-thumb{display:block;aspect-ratio:4/5;position:relative}
.vibe-name{display:block;padding:8px 10px 0;font-weight:700}.vibe-line{display:block;padding:0 10px 10px;color:var(--muted);font-size:.8rem;line-height:1.3}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#0a0a0c;color:var(--text);border-radius:999px;padding:6px 12px;font:500 .85rem 'Space Grotesk',sans-serif;cursor:pointer}
.chip:hover{border-color:var(--or)}
.formats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.fmt{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;text-align:center}
.fmt input{position:absolute;opacity:0}.fmt:has(input:checked){border-color:var(--or);box-shadow:0 0 0 3px rgba(255,138,30,.25)}
.fmt small{color:var(--muted)}
.fmt-shape{display:block;border:2px solid var(--or2);border-radius:6px;margin-bottom:4px}.fmt-shape.v{width:30px;height:52px}.fmt-shape.h{width:60px;height:34px;margin-top:9px;margin-bottom:13px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:.92rem}.check input{margin-top:4px;accent-color:var(--or)}
.optional-preferences{margin-top:20px;border-top:1px solid var(--line);padding-top:4px}
.optional-preferences summary{min-height:44px;display:list-item;align-content:center;color:var(--muted);font-size:.9rem;cursor:pointer}
.optional-preferences summary:focus-visible{outline:2px solid var(--or);outline-offset:4px;border-radius:4px}
.optional-preferences[open] summary{color:var(--text)}
.optional-preferences .help{margin:8px 0 12px}
.optional-preferences .check{margin-bottom:12px}
.optional-preferences .ghost{margin-top:6px}
.lm-measurement{width:min(640px,calc(100% - 32px));max-height:80vh;overflow-y:auto;border:1px solid #45434a;border-radius:18px;background:#15151b;color:#fff;padding:24px;font-family:inherit}
.lm-measurement::backdrop{background:rgba(0,0,0,.65)}
.lm-measurement p{line-height:1.5}.lm-measurement .actions{display:flex;flex-wrap:wrap}.lm-measurement a{color:var(--or)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pricebox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;padding:0;border:0;min-width:0}
.pricebox legend{font-weight:700;margin-bottom:10px}
.price-option{position:relative;margin:0;border:1.5px solid var(--line);border-radius:12px;padding:14px 12px 14px 38px;cursor:pointer}
.price-option input{position:absolute;left:12px;top:18px;margin:0;accent-color:var(--or)}
.price-option:has(input:checked){border-color:var(--or);background:rgba(255,138,30,.08);box-shadow:0 0 0 2px rgba(255,138,30,.2)}
.price-option:has(input:focus-visible){outline:2px solid var(--or);outline-offset:3px}
.pricebox b{display:block}.pricebox span{display:block;color:var(--muted);font-size:.85rem;font-weight:400;margin-top:4px}
@media (max-width:560px){.pricebox{grid-template-columns:1fr}}
.cta,button.cta{display:inline-flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:16px 20px;border:0;border-radius:14px;
background:linear-gradient(135deg,var(--or),#ff5e1a);color:#140800;font:400 1.1rem 'Archivo Black',sans-serif;cursor:pointer;text-decoration:none}
.cta[disabled]{opacity:.55;cursor:wait}
button.ghost,button.next,.btn{border:1px solid var(--line);background:#0c0c0f;color:var(--text);border-radius:12px;padding:12px 16px;font:700 .95rem 'Space Grotesk',sans-serif;cursor:pointer}
button.next{background:var(--or);color:#140800;border-color:var(--or)}
.stepnav{display:none}
body.lm-past .lm-hero{display:none}
/* phones: one step at a time */
.stepper .step{display:none}.stepper .step.active{display:block}
.lm-form-status:empty{display:none}
.lm-form-status{scroll-margin:24px;grid-column:1/-1}
input[aria-invalid="true"],textarea[aria-invalid="true"]{outline:2px solid #ff6b6b;outline-offset:3px}
.step input,.step textarea,.step label{scroll-margin:24px}
.stepper .stepnav{display:flex;position:fixed;left:0;right:0;bottom:0;justify-content:space-between;align-items:center;gap:10px;
padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(5,5,7,.92);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.stepper .stepnav [data-dots]{display:flex;gap:6px}.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}.dot.on{background:var(--or)}
.step-progress{display:grid;justify-items:center;gap:6px;font-size:.75rem;color:var(--muted)}
body.lm-stepper .lm-foot{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.stepper.last .stepnav .next{visibility:hidden}.stepper.first .stepnav .ghost{visibility:hidden}
/* the order page */
.lm-order .song{margin-bottom:12px}
.stage{display:flex;justify-content:center;margin:10px 0 14px}
.screen{position:relative;background:#000;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.stage.tall .screen{width:min(100%,calc(62vh * 9 / 16));aspect-ratio:9/16}
.stage.wide .screen{width:100%;aspect-ratio:16/9}
.screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.lm-sound{position:absolute;right:12px;top:12px;z-index:2;background:rgba(12,12,15,.9)}
.lm-sound[hidden]{display:none}
.wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;
background:radial-gradient(80% 60% at 50% 40%,rgba(255,138,30,.18),transparent 70%)}
.wait[hidden]{display:none}
.wait p{margin:0;font-weight:700}.wait progress{width:70%;accent-color:var(--or)}
.spinner{width:42px;height:42px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--or);animation:lm-spin 1s linear infinite}
@keyframes lm-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.recipe{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}.recipe span{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.8rem;color:var(--muted)}
.recipe span b{color:var(--text);font-weight:700}
.cuts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}.cuts button{padding:8px 12px}.cuts button.on{border-color:var(--or);color:var(--or2)}
.actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;align-items:stretch}.actions .btn{width:100%}
@media (max-width:560px){.actions{grid-template-columns:1fr}}
.downloads{display:grid;gap:10px}
.lm-msg{padding:40px 0}.lm-msg .cta{width:auto}
.lm-start-link:hover{border-color:#ff8a1e}

/* the animated vibe thumbnails (the approved mockup) */
.sc{position:relative;overflow:hidden;width:100%;height:100%;container-type:size}
.sc > div{position:absolute}
@keyframes kx-rise{from{transform:translateY(62%)}to{transform:translateY(12%)}}
@keyframes kx-shimmer{from{background-position:0 0}to{background-position:0 12cqh}}
@keyframes kx-grid{from{background-position:0 0,0 0}to{background-position:0 10cqw,0 10cqw}}
@keyframes kx-drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(9%,7%) scale(1.12)}}
@keyframes kx-drift2{from{transform:translate(0,0) scale(1.05)}to{transform:translate(-10%,-6%) scale(.95)}}
@keyframes kx-spin{to{transform:rotate(360deg)}}
@keyframes kx-rain{from{background-position:0 0,3cqw 4cqw}to{background-position:0 12cqw,3cqw 16cqw}}
@keyframes kx-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes kx-shuffle{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes kx-sing{0%,8%{opacity:.35}14%,88%{opacity:1}100%{opacity:.35}}
@keyframes kx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,138,30,.0)}50%{box-shadow:0 0 0 6px rgba(255,138,30,.18)}}
@media (prefers-reduced-motion: reduce){.sc *,.ly span{animation:none !important}}
.grain{inset:0;background-image:repeating-radial-gradient(circle at 17% 23%,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
/* cinematic */
.sc-cin{background:var(--bg)}
.cin-sky{left:0;top:0;width:100%;height:66%;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 60%,var(--a) 140%)}
.cin-sun{position:absolute;left:50%;bottom:0;width:40cqw;height:40cqw;margin-left:-20cqw;border-radius:50%;background:radial-gradient(circle at 50% 36%,var(--b),var(--a) 74%);box-shadow:0 0 16cqw var(--a);animation:kx-rise 8s ease-in-out infinite alternate}
.cin-sea{left:0;top:66%;width:100%;height:34%;background:linear-gradient(180deg,var(--bg2),var(--bg))}
.cin-path{position:absolute;left:43%;top:0;width:14%;height:100%;background-image:repeating-linear-gradient(180deg,var(--b) 0 1.2cqh,transparent 1.2cqh 4cqh);opacity:.5;animation:kx-shimmer 2s linear infinite}
.cin-bar{left:0;width:100%;height:7%;background:#000}
.cin-word{left:0;right:0;top:40%;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:12cqw;color:var(--ink)}
/* neon */
.sc-neon{background:var(--bg)}
.neon-sky{left:0;top:0;width:100%;height:56%;overflow:hidden;background:linear-gradient(180deg,var(--bg),var(--bg2))}
.neon-sun{position:absolute;left:50%;bottom:-16cqw;width:48cqw;height:48cqw;margin-left:-24cqw;border-radius:50%;background:linear-gradient(180deg,var(--b),var(--a));-webkit-mask-image:repeating-linear-gradient(180deg,#000 0 8%,transparent 8% 11%);mask-image:repeating-linear-gradient(180deg,#000 0 8%,transparent 8% 11%)}
.neon-floor{left:-50%;top:56%;width:200%;height:100%;transform-origin:50% 0;transform:perspective(30cqw) rotateX(64deg);background-image:linear-gradient(90deg,var(--a) .4cqw,transparent .4cqw),linear-gradient(0deg,var(--a) .4cqw,transparent .4cqw);background-size:10cqw 10cqw;animation:kx-grid .9s linear infinite}
.neon-word{left:0;right:0;top:16%;text-align:center;font-family:'Archivo Black',sans-serif;font-size:12cqw;letter-spacing:.04em;color:var(--ink);text-shadow:0 0 1.5cqw var(--a),0 0 5cqw var(--a)}
/* dreamy */
.sc-dream{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.dr-b1{left:-12%;top:6%;width:72cqw;height:72cqw;border-radius:50%;background:var(--a);filter:blur(9cqw);opacity:.75;animation:kx-drift1 8s ease-in-out infinite alternate}
.dr-b2{right:-16%;top:34%;width:62cqw;height:62cqw;border-radius:50%;background:var(--b);filter:blur(9cqw);opacity:.6;animation:kx-drift2 10s ease-in-out infinite alternate}
.dr-b3{left:18%;bottom:-22%;width:66cqw;height:66cqw;border-radius:50%;background:var(--ink);filter:blur(12cqw);opacity:.22;animation:kx-drift1 12s ease-in-out infinite alternate-reverse}
.dr-stars{inset:0;background-image:radial-gradient(circle,var(--ink) .45cqw,transparent .55cqw);background-size:13cqw 17cqw;opacity:.35}
.dr-word{left:0;right:0;top:40%;text-align:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:13cqw;color:var(--ink)}
/* paper */
.sc-paper{background:var(--bg)}
.pp-dots{inset:0;background-image:radial-gradient(circle,var(--bg2) .8cqw,transparent .9cqw);background-size:4cqw 4cqw}
.pp-c1{left:10%;top:10%;width:48cqw;height:48cqw;border-radius:50%;background:var(--a);mix-blend-mode:multiply;opacity:.9;animation:kx-drift1 9s ease-in-out infinite alternate}
.pp-c2{left:38%;top:22%;width:48cqw;height:48cqw;border-radius:50%;background:var(--b);mix-blend-mode:multiply;opacity:.9;animation:kx-drift2 11s ease-in-out infinite alternate}
.pp-word{left:8%;bottom:12%;font-family:'Space Mono',monospace;font-size:8.5cqw;color:var(--ink)}
.pp-cur{display:inline-block;width:4cqw;height:7cqw;margin-left:1cqw;vertical-align:-1cqw;background:var(--a);animation:kx-blink 1s steps(1) infinite}
/* pop */
.sc-pop{background:var(--bg)}
.pop-rays{left:-50%;top:-60%;width:200%;height:200%;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--bg) 0deg 9deg,var(--a) 9deg 18deg);animation:kx-spin 24s linear infinite}
.pop-dots{inset:0;background-image:radial-gradient(circle,var(--ink) .7cqw,transparent .8cqw);background-size:3.4cqw 3.4cqw;opacity:.16}
.pop-word{left:0;right:0;top:50%;margin-top:-12cqw;text-align:center;font-family:'Archivo Black',sans-serif;font-size:24cqw;line-height:1;color:var(--ink);-webkit-text-stroke:1.4cqw var(--bg);paint-order:stroke fill;letter-spacing:-.02em}
/* gritty */
.sc-grit{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.gr-light{left:10%;top:-14%;width:80cqw;height:80cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.2),transparent 65%)}
.gr-rain{left:-20%;top:-10%;width:140%;height:120%;transform:rotate(9deg);background-image:radial-gradient(.28cqw 2.6cqw at 50% 50%,rgba(255,255,255,.4),transparent),radial-gradient(.22cqw 2cqw at 50% 50%,rgba(255,255,255,.28),transparent);background-size:6cqw 12cqw,7cqw 12cqw;animation:kx-rain .55s linear infinite}
.gr-word{left:8%;bottom:20%;font-family:'Anton',Impact,sans-serif;font-size:26cqw;line-height:1;letter-spacing:.03em;color:var(--ink)}
.gr-bar{left:8%;bottom:15%;width:34%;height:1.6cqw;background:var(--a)}
/* retro */
.sc-retro{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.rt-grid{left:-50%;top:58%;width:200%;height:90%;transform-origin:50% 0;transform:perspective(30cqw) rotateX(66deg);background-image:linear-gradient(90deg,var(--a) .35cqw,transparent .35cqw),linear-gradient(0deg,var(--a) .35cqw,transparent .35cqw);background-size:10cqw 10cqw;opacity:.6;animation:kx-grid 1.4s linear infinite}
.rt-word{left:8%;top:12%;font-family:'VT323',monospace;font-size:15cqw;color:var(--ink);text-shadow:.7cqw 0 var(--a),-.7cqw 0 var(--b)}
.rt-tc{right:8%;top:15%;font-family:'VT323',monospace;font-size:8cqw;color:var(--ink);opacity:.8}
.rt-scan{inset:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
/* surprise */
.sc-surp{background:#0b0a09}
.sp-q{width:50%;height:50%;animation:kx-shuffle 3.2s ease-in-out infinite}
.sp-1{left:0;top:0;background:linear-gradient(180deg,#2A1410,#E8661A);animation-delay:0s}
.sp-2{left:50%;top:0;background:repeating-linear-gradient(0deg,#FF2A6D 0 .5cqw,#1A0B2E .5cqw 5cqw);animation-delay:.8s}
.sp-3{left:0;top:50%;background:radial-gradient(circle at 40% 45%,#FF5E7E 0 26%,transparent 27%),radial-gradient(circle at 62% 55%,#2BB3B1 0 26%,transparent 27%),#F3ECDD;animation-delay:1.6s}
.sp-4{left:50%;top:50%;background:repeating-conic-gradient(from 0deg at 20% 80%,#FFF7C2 0deg 10deg,#FF3D00 10deg 20deg);animation-delay:2.4s}
.sp-badge{left:50%;top:50%;width:30cqw;height:30cqw;margin:-15cqw 0 0 -15cqw;border-radius:50%;background:#050507;border:.8cqw solid #ff8a1e;display:flex;align-items:center;justify-content:center}
.sp-badge svg{width:15cqw;height:15cqw}

/* marble machine */
@keyframes mb-x{0%{transform:translateX(0)}100%{transform:translateX(60cqw)}}
@keyframes mb-y{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}50%{transform:translateY(-14cqh);animation-timing-function:cubic-bezier(.6,0,.8,.4)}}
@keyframes mb-lit{0%,6%{background:var(--blank);color:transparent}9%,100%{background:var(--c);color:#fff}}
@keyframes mb-boom{0%,100%{transform:scale(1)}8%{transform:scale(1.07)}}
.sc-marb{background:var(--bg)}
.mb-grid{inset:0;background-image:linear-gradient(90deg,var(--bg2) 1px,transparent 1px),linear-gradient(0deg,var(--bg2) 1px,transparent 1px);background-size:9cqw 9cqw;opacity:.8}
.mb-bar{height:9cqh;width:24cqw;border-radius:2cqw;display:flex;align-items:center;justify-content:center;font:900 5.2cqw 'Archivo Black',sans-serif;box-shadow:0 1.2cqh 0 rgba(0,0,0,.12);animation:mb-lit 4s linear infinite}
.mb-bar i{font-style:normal}
.mb-b1{left:6%;top:30%;--c:#FF5A5F}.mb-b2{left:38%;top:36%;--c:#FF9F1C;animation-delay:1s}.mb-b3{left:70%;top:42%;--c:#2EC4B6;animation-delay:2s}
.mb-b4{left:22%;top:62%;--c:#3A86FF;animation-delay:3s}
.mb-x{left:14%;top:22%;width:5cqw;height:5cqw;animation:mb-x 4s linear infinite}
.mb-ball{width:7cqw;height:7cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#C9CED8 40%,#59606e);animation:mb-y 1s infinite}
.mb-drum{left:-8%;bottom:-10%;width:40cqw;height:40cqw;border-radius:50%;background:radial-gradient(circle,#F7F3EA 0 58%,#E63946 60%);animation:mb-boom .5s ease-out infinite}
/* ring bounce */
@keyframes rg-y{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.6,.4,1)}50%{transform:translateY(-16cqw);animation-timing-function:cubic-bezier(.6,0,.8,.4)}}
@keyframes rg-x{0%,100%{transform:translateX(-9cqw)}50%{transform:translateX(9cqw)}}
@keyframes rg-flash{0%,100%{opacity:.55}5%{opacity:1}}
.sc-rings{background:radial-gradient(circle at 50% 62%,var(--bg2),var(--bg) 70%)}
.rg-r{left:50%;top:62%;border-radius:50%;border:1.6cqw solid var(--c);box-shadow:0 0 3cqw var(--c);transform:translate(-50%,-50%);animation:rg-flash .6s linear infinite}
.rg-1{width:30cqw;height:30cqw;--c:#FF3D7F}.rg-2{width:46cqw;height:46cqw;--c:#FFE14D;animation-delay:.15s}
.rg-3{width:62cqw;height:62cqw;--c:#3DDC97;animation-delay:.3s}.rg-4{width:78cqw;height:78cqw;--c:#2EC4FF;animation-delay:.45s}
.rg-x{left:47%;top:66%;animation:rg-x 1.2s ease-in-out infinite}
.rg-ball{width:5cqw;height:5cqw;border-radius:50%;background:#fff;box-shadow:0 0 3cqw #fff;animation:rg-y .6s infinite}
.rg-word{left:0;right:0;top:9%;text-align:center;font:900 10cqw 'Archivo Black',sans-serif;color:var(--ink);letter-spacing:-.02em}
/* comic book */
@keyframes cm-pop{0%,40%{transform:scale(0) rotate(-12deg)}48%{transform:scale(1.15) rotate(-12deg)}55%,90%{transform:scale(1) rotate(-12deg)}100%{transform:scale(0) rotate(-12deg)}}
@keyframes cm-in{0%,8%{opacity:0;transform:scale(.6)}16%,100%{opacity:1;transform:scale(1)}}
.sc-comic{background:var(--bg)}
.cm-p{border:1.2cqw solid #16120F;overflow:hidden}
.cm-1{left:5%;top:4%;width:90%;height:36%;background:radial-gradient(circle,var(--b) 1.1cqw,transparent 1.3cqw) 0 0/4cqw 4cqw,var(--a)}
.cm-2{left:5%;top:43%;width:41%;height:53%;background:repeating-conic-gradient(from 0deg at 50% 50%,#FFD43B 0deg 10deg,#F58A1F 10deg 20deg)}
.cm-3{left:49%;top:43%;width:46%;height:53%;background:radial-gradient(circle,#E0457B 1cqw,transparent 1.2cqw) 0 0/4cqw 4cqw,#7B4FC9}
.cm-bal{position:absolute;left:18%;top:16%;padding:3cqw 7cqw;border:1cqw solid #16120F;border-radius:50%;background:#FFFDF4;font:400 9cqw 'Bangers','Archivo Black',sans-serif;color:#16120F;animation:cm-in 3s ease-out infinite}
.cm-pow{position:absolute;left:8%;top:28%;font:400 15cqw 'Bangers','Archivo Black',sans-serif;color:#FFD43B;-webkit-text-stroke:1cqw #16120F;paint-order:stroke fill;animation:cm-pop 1.6s ease-out infinite}

.vibe[data-new] .vibe-name::after{content:"NEW";margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--or);color:#120a03;font-size:.66rem;letter-spacing:.06em;vertical-align:2px}
.vibe-thumb[data-scene="marbles"]{--bg:#F3EEE4;--bg2:#E2D9C8;--blank:#D9D0BF;--ink:#1F2A44}
.vibe-thumb[data-scene="rings"]{--bg:#07070D;--bg2:#161132;--ink:#F4F2FF}
.vibe-thumb[data-scene="comic"]{--bg:#F4ECD8;--a:#2FA7DF;--b:#2C55B5;--ink:#16120F}
.vibe-thumb[data-scene="cinematic"]{--bg:#0B0706;--bg2:#2A1410;--a:#E8661A;--b:#FFB060;--ink:#F6EEDD}
.vibe-thumb[data-scene="neon"]{--bg:#07040F;--bg2:#1A0B2E;--a:#FF2A6D;--b:#05D9E8;--ink:#F5F5FF}
.vibe-thumb[data-scene="dreamy"]{--bg:#0F0C1C;--bg2:#2E2750;--a:#B8A1FF;--b:#FFD6E8;--ink:#FAF7FF}
.vibe-thumb[data-scene="paper"]{--bg:#F3ECDD;--bg2:#E8DCC6;--a:#FF5E7E;--b:#2BB3B1;--ink:#1B1B2F}
.vibe-thumb[data-scene="pop"]{--bg:#FFF7C2;--bg2:#FFE680;--a:#FF3D00;--b:#1B1B1B;--ink:#121212}
.vibe-thumb[data-scene="gritty"]{--bg:#080808;--bg2:#222222;--a:#E63946;--b:#DDDDDD;--ink:#F4F4F4}
.vibe-thumb[data-scene="retro"]{--bg:#06131F;--bg2:#1C4E80;--a:#7FDBFF;--b:#C6FF00;--ink:#FFFFFF}
.vibe-thumb[data-scene="surprise"]{--bg:#0B0706;--bg2:#2A1410;--a:#E8661A;--b:#FFB060;--ink:#F6EEDD}

/* The fixed full-song Wormhole choice. */
.sc-wormhole{background:#070414}
.wh-tunnel{inset:-25%;border-radius:50%;background:repeating-radial-gradient(ellipse at center,transparent 0 7%,#5b3fd9 7.5% 8%,transparent 8.5% 15%,#05d9e8 15.5% 16%);transform:perspective(180px) rotateY(-18deg);box-shadow:inset 0 0 40px #ff2a6d;animation:kx-wormhole 4s linear infinite}
.wh-word{left:0;right:0;top:45%;text-align:center;font-family:'Archivo Black',sans-serif;font-size:9cqw;color:white;font-style:italic;text-shadow:0 0 12px #e245ff}
@keyframes kx-wormhole{50%{transform:perspective(180px) rotateY(18deg) scale(1.15)}}
@media(prefers-reduced-motion:reduce){.wh-tunnel{animation:none}}