.radio-header>.persistent-discoball.genre-effect-hidden{display:none!important}
.genre-decoration{position:absolute;top:100%;left:24px;width:310px;height:310px;pointer-events:none;z-index:1;overflow:visible;contain:layout style}
.genre-decoration[hidden]{display:none!important}.genre-model-canvas{display:block;width:310px;height:310px;max-width:none;max-height:none;filter:drop-shadow(0 7px 9px #0005)}
@media(min-width:701px) and (max-width:1400px){.genre-decoration{left:65px;width:180px;height:180px}.genre-model-canvas{width:180px;height:180px}}
@media(max-width:700px){.genre-decoration{left:5px;width:145px;height:145px}.genre-model-canvas{width:145px;height:145px}}
.effect-preview-panel{position:fixed;right:18px;bottom:18px;width:360px;max-width:calc(100vw - 28px);z-index:1000;border:1px solid #c8a86d88;border-radius:14px;background:#101522f5;box-shadow:0 14px 55px #0009;padding:18px;color:#f4e6c8;backdrop-filter:blur(15px);font:14px 'Segoe UI',sans-serif}
.effect-preview-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.effect-preview-title strong{font-size:16px}.effect-preview-title button{font-size:25px;padding:0 5px;color:inherit}.effect-preview-panel p{font-size:12px;color:#bfc9d1;margin:10px 0 14px;line-height:1.5}.effect-preview-panel label{display:grid;gap:7px;font-size:12px}.effect-preview-panel select{width:100%;padding:10px;background:#1b2434;color:#fff1d7;border:1px solid #d5bb8355;border-radius:7px}.effect-preview-buttons{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.effect-preview-buttons button{border:1px solid #d5bb8355;background:#273145;color:#fff1d7;border-radius:7px;padding:8px 10px;font-size:12px}.effect-preview-panel small{display:block;color:#e0c58f;font-size:12px}
@media(max-width:700px){.effect-preview-panel{right:10px;bottom:10px;padding:13px;width:330px}}


.eighties-lanterns{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-width:none!important;pointer-events:none;z-index:6;user-select:none}.eighties-lanterns[hidden]{display:none!important}

.effect-preview-panel.is-collapsed>:not(.effect-preview-title){display:none}.effect-preview-title strong{margin-right:auto}.effect-preview-title button{flex-shrink:0}

.nineties-light-organ{display:block;width:100%;height:100%;max-width:none;pointer-events:none;filter:drop-shadow(0 5px 6px #0007)}

.millennium-laser-show{position:absolute!important;inset:0!important;display:block;width:100%!important;height:100%!important;max-width:none!important;pointer-events:none;z-index:7;user-select:none}.millennium-laser-show[hidden]{display:none!important}
.effect-preview-panel [data-laser-previews][hidden]{display:none}
.punk-head-stage {
  width: 200%;
  height: 200%;
  transform: scale(.5);
  transform-origin: top left;
  perspective: 1700px;
}
.punk-head-turn {
  --head-rest-angle: .1deg;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  animation: punk-turn 10s infinite;
}
.punk-head-front, .punk-head-back { position: absolute; inset: 0; backface-visibility: hidden; }
.punk-head-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.punk-head-back { transform: rotateY(180deg); }
.punk-head-mouth, .punk-head-wink { position: absolute; inset: 0; opacity: 0; }
.punk-head-mouth {
  mask-image: radial-gradient(ellipse var(--mouth-rx, 22%) var(--mouth-ry, 17%) at var(--mouth-x) var(--mouth-y), #000 76%, transparent 100%);
  animation: punk-talk 10s step-end infinite;
}
.punk-head-wink {
  z-index: 1;
  mask-image: radial-gradient(ellipse 16% 12% at var(--wink-x, var(--left-x)) var(--wink-y, var(--left-y)), #000 77%, transparent 100%);
  animation: punk-wink 10s step-end infinite;
}
.punk-head-pupil {
  position: absolute;
  width: 4%;
  height: 4%;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 62% 27%, white 0 13%, transparent 17%), #21150e;
  animation: punk-dizzy-eyes 10s infinite;
}
.punk-head-eye { position: absolute; inset: 0; }
.punk-head-eye-left { clip-path: var(--eye-left-outline, ellipse(4% 2.9% at var(--left-x) var(--left-y))); }
.punk-head-eye-right { clip-path: var(--eye-right-outline, ellipse(4% 2.9% at var(--right-x) var(--right-y))); }
.punk-head-pupil-left { top: var(--left-y); left: var(--left-x); }
.punk-head-pupil-right { top: var(--right-y); left: var(--right-x); }
[data-effect="y2k-man"] {
  --left-x: 36.4%; --left-y: 50.1%; --right-x: 58.9%; --right-y: 45.7%;
  --mouth-x: 50%; --mouth-y: 70.2%;
}
[data-effect="y2k-man"] .punk-head-eye-left {
  clip-path: polygon(27% 51.2%, 29.7% 50.1%, 33% 48.9%, 36.6% 48.6%, 39.1% 49%, 40.3% 50.5%, 36% 51.8%, 31% 52%);
}
[data-effect="y2k-man"] .punk-head-eye-right {
  clip-path: polygon(51% 48.1%, 53.8% 46.5%, 57.2% 44.7%, 61% 44.4%, 63.8% 45.1%, 61.4% 46.8%, 57.6% 48%);
}
[data-effect="y2k-man"] .punk-head-back { transform: rotateY(180deg) scaleX(-1); }
[data-effect="y2k-woman"] {
  --left-x: 35.55%; --left-y: 52.7%; --right-x: 57.65%; --right-y: 47.1%;
  --mouth-x: 49.5%; --mouth-y: 73.9%;
}
[data-effect="y2k-woman"] .punk-head-wink {
  mask-image: radial-gradient(ellipse 15% 11% at var(--right-x) var(--right-y), #000 77%, transparent 100%);
}
[data-effect="y2k-woman"] .punk-head-front::after { left: var(--right-x); top: var(--right-y); width: 7%; }
[data-effect="y2k-man"] .punk-head-front::after { width: 7%; }
[data-effect="y2k-woman"] .punk-head-eye-left {
  clip-path: polygon(28.7% 53.6%, 30.8% 51.9%, 33.5% 51%, 36.1% 51%, 38% 52.1%, 39% 53.7%, 35.7% 54.6%, 31% 54.8%);
}
[data-effect="y2k-woman"] .punk-head-eye-right {
  clip-path: polygon(50.8% 51.5%, 53% 48.6%, 55.9% 46.7%, 58.8% 45.2%, 61% 45.2%, 62.8% 46.1%, 61% 48.3%, 56.8% 49.9%);
}
[data-effect="y2k-woman"] .discofox-stones-2 path {
  fill: #ead4ff;
  stroke: #fff;
  stroke-width: 1;
  animation-duration: .96s;
}
[data-effect="discofox-man"] {
  --left-x: 38.5%; --left-y: 42.55%; --right-x: 62.2%; --right-y: 40.55%;
  --mouth-x: 51.4%; --mouth-y: 69%;
}
[data-effect="discofox-man"] .punk-head-eye-left {
  clip-path: polygon(31.1% 44.4%, 33.2% 42.8%, 36.2% 41%, 39.4% 40.6%, 42.5% 41.6%, 44.2% 43.2%, 40% 44.1%, 36.5% 44.3%);
}
[data-effect="discofox-man"] .punk-head-eye-right {
  clip-path: polygon(55.9% 42.6%, 57.4% 40.6%, 60.6% 38.7%, 63.5% 38.4%, 66.8% 39.5%, 68.9% 41.4%, 65.7% 42.2%, 61.5% 42.5%);
}
[data-effect="discofox-woman"] {
  --left-x: 35.25%; --left-y: 50.6%; --right-x: 59.2%; --right-y: 44.7%;
  --mouth-x: 50%; --mouth-y: 70%;
}
[data-effect="discofox-woman"] .punk-head-eye-left {
  clip-path: polygon(28.6% 52.4%, 28.8% 50.5%, 31.5% 48.9%, 34.7% 48.8%, 37.3% 49.7%, 39% 52%, 34.7% 52.4%);
}
[data-effect="discofox-woman"] .punk-head-eye-right {
  clip-path: polygon(50.8% 49%, 52.7% 46.1%, 55.5% 44%, 58.5% 42.8%, 61.4% 42.5%, 63.4% 43.9%, 61.3% 46.1%, 57.6% 47.5%);
}
[data-effect="punk-head"] {
  --left-x: 38.6%; --left-y: 63.6%; --right-x: 58.5%; --right-y: 61%;
  --mouth-x: 50.8%; --mouth-y: 78.5%;
}
[data-effect="punk-woman"] {
  --left-x: 42.9%; --left-y: 60.8%; --right-x: 63.2%; --right-y: 57.4%;
  --mouth-x: 55.3%; --mouth-y: 77.2%;
}
[data-effect="schlager-man"] {
  --left-x: 46.8%; --left-y: 47%; --right-x: 64.4%; --right-y: 44.4%;
  --mouth-x: 59%; --mouth-y: 70%;
}
[data-effect="schlager-man"] .punk-head-eye-left {
  clip-path: polygon(41.1% 49.6%, 41.7% 47.6%, 43.5% 45.9%, 46.3% 44.6%, 49.3% 44.7%, 52% 46.2%, 53.3% 48.5%, 49.5% 49.1%, 45.3% 49.4%);
}
[data-effect="schlager-man"] .punk-head-eye-right {
  clip-path: polygon(62.1% 46.4%, 62.4% 44.4%, 63.7% 42.5%, 65.5% 41.2%, 68% 40.9%, 70% 42.1%, 71% 44.3%, 68.7% 44.9%, 65.2% 45.7%);
}
[data-effect="schlager-woman"] {
  --left-x: 42.15%; --left-y: 39.65%; --right-x: 59.85%; --right-y: 36.05%;
  --mouth-x: 54.5%; --mouth-y: 64.4%;
}
[data-effect="schlager-woman"] .punk-head-eye-left {
  clip-path: polygon(35.3% 41.3%, 35.5% 39.5%, 37.1% 37.3%, 40% 36.2%, 43.2% 36.2%, 46% 37.5%, 48.4% 40.8%, 44% 41%, 39.4% 41.2%);
}
[data-effect="schlager-woman"] .punk-head-eye-right {
  clip-path: polygon(57.4% 38.9%, 57.4% 36.7%, 58.5% 34.5%, 60.6% 33%, 63.2% 32.4%, 65.4% 33.3%, 66.7% 35.4%, 64.9% 36.4%, 61.9% 37.4%, 59.2% 38.3%);
}
.punk-head-front::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: var(--spark-x, var(--wink-x, var(--left-x)));
  top: var(--spark-y, var(--wink-y, var(--left-y)));
  width: 5%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, #fff 18%, #fff6cc 44%, #ffd66d 76%);
  clip-path: polygon(50% 0, 58% 41%, 100% 50%, 58% 59%, 50% 100%, 42% 59%, 0 50%, 42% 41%);
  opacity: 0;
  animation: punk-eye-spark 10s linear infinite;
}
[data-effect="discofox-man"] .punk-head-front::after,
[data-effect="discofox-woman"] .punk-head-front::after {
  width: 7%;
  background: radial-gradient(circle, white 25%, #fff5c9 58%, #ffd67b 100%);
  clip-path: polygon(50% 0, 60% 39%, 100% 50%, 60% 61%, 50% 100%, 40% 61%, 0 50%, 40% 39%);
}
.discofox-glint {
  position: absolute;
  left: var(--glint-x);
  top: var(--glint-y);
  width: 8%;
  aspect-ratio: 1;
  background: radial-gradient(circle, white 17%, #fff4cc 45%, #9feaff 74%);
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
  opacity: 0;
  animation: discofox-glint 2.7s infinite;
  animation-delay: var(--glint-delay);
}
.buddy-jewel {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  opacity: 0;
  background: radial-gradient(circle, white 20%, #fff6d5 54%, #a7dfff 85%);
  clip-path: polygon(50% 0, 59% 39%, 100% 50%, 59% 61%, 50% 100%, 41% 61%, 0 50%, 41% 39%);
  animation: discofox-glint 1.9s infinite;
}
.buddy-jewel-left { left: var(--jewel-left-x); top: var(--jewel-left-y); visibility: var(--jewel-left-visible, hidden); animation-delay: -.3s; }
.buddy-jewel-right { left: var(--jewel-right-x); top: var(--jewel-right-y); visibility: var(--jewel-right-visible, hidden); animation-delay: -1.15s; }
[data-effect="house-man"] .punk-head-open-mouth,
[data-effect="house-man"] .punk-head-back,
[data-effect="metal-woman"] .punk-head-stage {
  mask-image: radial-gradient(ellipse 53% 55% at center, #000 75%, transparent 100%);
}
[data-effect="rock-man"] .punk-head-front::after {
  width: 8%;
  background: radial-gradient(circle, #fff 14%, #ffe67b 45%, #ffac34 100%);
}
[data-effect="techno-man"] .punk-head-back { transform: rotateY(180deg) scaleX(-1); }
[data-effect="90er-man"] .punk-head-stage { mask-image: linear-gradient(#000 94%, transparent 98%); }
.discofox-glint:nth-of-type(3) { --glint-delay: -.25s; }
.discofox-glint:nth-of-type(4) { --glint-delay: -1.1s; }
.discofox-glint:nth-of-type(5) { --glint-delay: -1.95s; }
[data-effect="y2k-man"] .discofox-glint {
  --glint-x: 79.7%;
  --glint-y: 54.8%;
  --glint-delay: -.15s;
  width: 11%;
  animation-duration: 1.18s;
  background: radial-gradient(circle, white 20%, #e8f9ff 46%, #91d9ff 80%);
}
[data-effect="discofox-man"] .discofox-glint { width: 10%; animation-duration: .84s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(3) { --glint-x: 31.5%; --glint-y: 21%; --glint-delay: -.07s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(4) { --glint-x: 60.5%; --glint-y: 14%; --glint-delay: -.63s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(5) { --glint-x: 80.4%; --glint-y: 19.5%; --glint-delay: -.35s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(6) { --glint-x: 38%; --glint-y: 12%; --glint-delay: -.19s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(7) { --glint-x: 49%; --glint-y: 6%; --glint-delay: -.48s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(8) { --glint-x: 68%; --glint-y: 12%; --glint-delay: -.74s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(9) { --glint-x: 28%; --glint-y: 28%; --glint-delay: -.29s; }
[data-effect="discofox-man"] .discofox-glint:nth-of-type(10) {
  --glint-x: 85.1%;
  --glint-y: 60.7%;
  --glint-delay: -.3s;
  width: 9%;
  background: radial-gradient(circle, #fff 12%, #edcbff 43%, #bb8cff 77%);
  animation-duration: 1.35s;
}
[data-effect="discofox-woman"] .discofox-glint:nth-of-type(3) { --glint-x: 27%; --glint-y: 73.5%; }
[data-effect="discofox-woman"] .discofox-glint:nth-of-type(4) { --glint-x: 80.6%; --glint-y: 68%; }
[data-effect="discofox-woman"] .discofox-glint:nth-of-type(5) { --glint-x: 78.6%; --glint-y: 55.8%; }
@keyframes discofox-glint {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-15deg); }
  8% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(10deg); }
  24% { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(30deg); }
  25%, 99% { opacity: 0; }
}
.discofox-headband {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.discofox-headband path {
  opacity: 0;
  fill: #fff7db;
  filter: drop-shadow(0 0 2px #fff5c2);
  animation: discofox-stone 1.2s linear infinite;
}
.discofox-stones-0 path { fill: #e1ffff; }
.discofox-headband path:nth-child(7n + 1) { animation-delay: -.08s; }
.discofox-headband path:nth-child(7n + 2) { animation-delay: -.59s; }
.discofox-headband path:nth-child(7n + 3) { animation-delay: -.25s; }
.discofox-headband path:nth-child(7n + 4) { animation-delay: -.93s; }
.discofox-headband path:nth-child(7n + 5) { animation-delay: -.42s; }
.discofox-headband path:nth-child(7n + 6) { animation-delay: -1.1s; }
.discofox-headband path:nth-child(7n) { animation-delay: -.76s; }
.discofox-stones-1 path { animation-duration: 1.43s; }
.discofox-stones-1 path {
  fill: #fff;
  stroke: #fff3cd;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 3px #ffdeb1);
  animation-name: discofox-front-stone;
}
@keyframes discofox-stone {
  0%, 18%, 100% { opacity: 0; }
  6% { opacity: 1; }
}
@keyframes discofox-front-stone {
  0%, 24%, 100% { opacity: 0; }
  6%, 12% { opacity: 1; }
}
.effects-paused .punk-head-stage * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .punk-head-stage * { animation: none; } }
.effects-paused .punk-head-front::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .punk-head-front::after { animation: none; } }
@keyframes punk-eye-spark {
  0%, 17%, 44%, 94% { opacity: 0; transform: scale(.25) rotate(-12deg); }
  17.6%, 44.6%, 94.6% { opacity: 1; transform: scale(1.12) rotate(8deg); }
  20%, 47%, 97%, 100% { opacity: 0; transform: scale(.65) rotate(24deg); }
}
@keyframes punk-turn {
  0%, 12% { transform: rotateX(var(--head-rest-angle, 0deg)) rotateY(0) rotateZ(0); }
  23% { transform: translateY(-2%) rotateX(-16deg) rotateY(8deg) rotateZ(4deg); }
  35% { transform: translateY(2%) rotateX(17deg) rotateY(-8deg) rotateZ(-4deg); }
  47% { transform: rotateX(var(--head-rest-angle, 0deg)) rotateY(0) rotateZ(0); }
  54% { transform: rotateY(-17deg) rotateZ(-5deg); animation-timing-function: cubic-bezier(.4,.12,.45,1); }
  63% { transform: rotateY(379deg) rotateZ(9deg); }
  68% { transform: rotateY(347deg) rotateZ(-8deg); }
  73% { transform: rotateY(370deg) rotateZ(6deg); }
  78% { transform: rotateY(354deg) rotateZ(-4deg); }
  84% { transform: rotateY(362deg) rotateZ(2deg); }
  90%, 100% { transform: rotateY(360deg) rotateZ(0) rotateX(var(--head-rest-angle, 0deg)); }
}
@keyframes punk-wink { 0%, 17%, 44%, 94%, 100% { opacity: 0; } 13%, 40%, 90% { opacity: 1; } }
@keyframes punk-talk {
  0%, 3%, 8%, 24%, 29%, 34%, 50%, 88% { opacity: 1; }
  1%, 5%, 11%, 26%, 31%, 36%, 92%, 100% { opacity: 0; }
}
@keyframes punk-dizzy-eyes {
  0%, 12%, 42%, 62%, 86%, 100% { opacity: 0; }
  23% { opacity: 1; transform: translateY(-21%); }
  35% { opacity: 1; transform: translateY(21%); }
  64% { opacity: 1; transform: translate(20%, -18%); }
  69% { opacity: 1; transform: translate(-20%, 17%); }
  74% { opacity: 1; transform: translate(16%, 14%); }
  79% { opacity: 1; transform: translate(-12%, -10%); }
  84% { opacity: 1; transform: translate(0, 0); }
}
