/* LULPK3X // THE EXPERIENCE — interactive polish without Clip Battles */
:root{--custom-glow:#75ddff}
body[data-vibe="violet"]{--cyan:#d7a4ff;--violet:#9688ff;--red:#f272d6;--custom-glow:#bda0ff}
body[data-vibe="crimson"]{--cyan:#ff9bb3;--violet:#fb7196;--red:#ff375a;--custom-glow:#ff647f}
body[data-vibe="violet"] #depth{filter:hue-rotate(52deg)}
body[data-vibe="crimson"] #depth{filter:hue-rotate(140deg)}
body[data-vibe="violet"] .hydro-field,body[data-vibe="violet"] .visualizer-panel,body[data-vibe="violet"] .hero{filter:hue-rotate(32deg)}
body[data-vibe="crimson"] .hydro-field,body[data-vibe="crimson"] .visualizer-panel,body[data-vibe="crimson"] .hero{filter:hue-rotate(120deg)}
body[data-vibe] .visualizer-panel,body[data-vibe] .hydro-field,body[data-vibe] #depth{transition:filter .85s ease}
.clip-playground{width:var(--page);margin:32px auto 0;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:20px 24px;border:1px solid rgba(142,220,249,.19);background:linear-gradient(105deg,#102535da,#08131ee8);border-radius:14px;box-shadow:0 20px 55px #0003}
.clip-playground-info{display:flex;align-items:center;gap:14px;min-width:0}.clip-playground-info strong,.vibe-selector-label strong{display:block;font-size:12px;letter-spacing:.12em;color:#effaff}.clip-playground-info small,.vibe-selector-label small{display:block;font-size:10px;letter-spacing:.10em;color:#99b8cc;margin-top:7px;line-height:1.5}
.playground-dot{height:11px;width:11px;border-radius:50%;flex:0 0 11px;background:#7df3ca;box-shadow:0 0 15px #7df3ca88;animation:beacon 2s infinite}
.clip-playground-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.playground-button{border:1px solid #8bc8e450;border-radius:9px;background:#10273b;color:#cde9fa;font-size:10px;letter-spacing:.13em;font-weight:900;padding:14px 18px;transition:transform .3s,border-color .3s,background .3s,box-shadow .3s;min-height:44px}.playground-button:hover:not(:disabled){transform:translateY(-4px);border-color:#a4ebff;box-shadow:0 10px 27px #5dcaff33}.playground-button.primary{background:linear-gradient(110deg,#a2eefe,#9cb3ff);color:#0a1624;border-color:#8acffe}.playground-button:disabled{opacity:.5;cursor:not-allowed}.playground-button span{margin-left:6px;padding:4px 7px;background:#ffffff16;border-radius:5px}
.player-favorite{position:absolute;top:-50px;right:56px;z-index:3;border-radius:24px;border:1px solid #a4dbef77;color:#d9f4ff;background:#0c253d;padding:11px 15px;font-size:11px;letter-spacing:1px;font-weight:850;white-space:nowrap}.player-favorite[aria-pressed="true"]{background:linear-gradient(125deg,#8be6ff,#ae9cff);color:#091121}.player-favorite:hover{box-shadow:0 0 25px #62cfff55}
.vibe-selector{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding:21px 24px;margin:16px 0 22px;border:1px solid #a6daff2c;background:linear-gradient(120deg,#0b1d2bdc,#0c1324ed);border-radius:13px}.vibe-selector-label{display:flex;gap:13px;align-items:center}.vibe-icon{font-size:28px;color:var(--custom-glow);filter:drop-shadow(0 0 13px var(--custom-glow))}.vibe-options{display:flex;gap:8px;flex-wrap:wrap}.vibe-choice{display:flex;align-items:center;gap:7px;border:1px solid #9dbbcc4c;border-radius:18px;padding:10px 13px;background:#0c2334;color:#cae0ed;font-size:10px;font-weight:900;letter-spacing:.05em;transition:transform .25s,border-color .25s,box-shadow .25s}.vibe-choice:hover{transform:translateY(-3px)}.vibe-choice[aria-pressed="true"]{border-color:var(--custom-glow);box-shadow:0 0 24px color-mix(in srgb,var(--custom-glow),transparent 82%);background:#183048}.vibe-swatch{width:10px;height:10px;border-radius:50%;background:#78daff;box-shadow:0 0 10px currentColor}.vibe-swatch.violet{background:#b19eff}.vibe-swatch.crimson{background:#ff637e}
.moment-random{border:1px solid #8bd9ee77;padding:13px 16px;border-radius:8px;background:#0e283bc9;color:#c4f3ff;font-size:10px;font-weight:900;letter-spacing:.11em;transition:transform .25s,background .25s,box-shadow .25s}.moment-random:hover{transform:translateY(-4px);background:#164665;box-shadow:0 10px 25px #59c9ff35}
.clips-section .clip-card .clip-title{color:#f8fbff!important;text-shadow:0 4px 24px #000f;position:absolute;z-index:3}.clips-section .clip-card .clip-title small{color:#96eeff!important;text-shadow:0 2px 12px #000d}.clips-section .clip-card:hover .clip-play{box-shadow:0 0 40px #98ecff65}.moments-section .moment-option:hover{filter:brightness(1.15)}
@media(max-width:760px){.clip-playground{display:block;padding:17px}.clip-playground-actions{justify-content:flex-start;margin-top:20px}.vibe-selector{padding:17px}.vibe-options{width:100%}.vibe-choice{flex:1;justify-content:center;font-size:9px}.player-favorite{right:53px;font-size:9px;padding:11px}.moments-footer{flex-wrap:wrap;gap:12px}.moment-random{width:100%;text-align:center}}
@media(max-width:390px){.vibe-choice{padding:10px 6px;font-size:8px}.playground-button{font-size:9px;padding:12px}.player-favorite{right:47px;letter-spacing:0}}
@media(prefers-reduced-motion:reduce){.playground-dot{animation:none}.clip-playground *, .vibe-selector *{transition:none!important}}