/* Kizin nan screen: the studio with the host, blinking wall lights, a wave sweeping across the monitor and the logo as a watermark */
.kizin-player-screen .kz-scene{position:absolute;left:0;width:100%;height:100%;top:0;transform-origin:50% 62%;animation:kzBreathe 7s ease-in-out infinite alternate;z-index:0}
.kizin-player-screen .kz-photo{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block}
.kz-led{position:absolute;height:.8%;border-radius:2px;opacity:.2;animation:kzBlink var(--t,2s) ease-in-out var(--d,0s) infinite;mix-blend-mode:screen}
.kz-g{background:#3dff7a;box-shadow:0 0 6px #3dff7a,0 0 14px rgba(61,255,122,.7)}
.kz-r{background:#ff3d4d;box-shadow:0 0 6px #ff3d4d,0 0 14px rgba(255,61,77,.7)}
.kz-b{background:#3d8bff;box-shadow:0 0 6px #3d8bff,0 0 14px rgba(61,139,255,.7)}
.kz-p{background:#b04dff;box-shadow:0 0 6px #b04dff,0 0 14px rgba(176,77,255,.7)}
@keyframes kzBlink{0%,100%{opacity:.12}12%,55%{opacity:.95}70%{opacity:.35}}
.kz-wave{position:absolute;left:19%;top:22.9%;width:22%;height:20%;overflow:hidden;border-radius:2px;pointer-events:none}
.kz-wave svg{position:absolute;left:0;top:30%;width:200%;height:40%;fill:none;stroke:#5fe3ff;stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 4px #5fe3ff);opacity:0;animation:kzWaveLine 9s linear infinite}
.kz-wave b{position:absolute;top:0;left:0;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(95,227,255,.38),transparent);transform:translateX(-120%);animation:kzSweep 9s ease-in-out infinite}
@keyframes kzWaveLine{0%,18%{opacity:0;transform:translateX(0)}24%{opacity:1}60%{opacity:1}68%,100%{opacity:0;transform:translateX(-50%)}}
@keyframes kzSweep{0%,20%{transform:translateX(-120%)}62%,100%{transform:translateX(330%)}}
@keyframes kzBreathe{from{transform:scale(1)}to{transform:scale(1.012)}}
.kizin-player-screen .kizin-audio-bars{z-index:4}
@media (prefers-reduced-motion:reduce){.kz-scene,.kz-led,.kz-wave svg,.kz-wave b{animation:none!important}.kz-led{opacity:.55}}
html.ks-a11y-still .kz-scene,html.ks-a11y-still .kz-led,html.ks-a11y-still .kz-wave svg,html.ks-a11y-still .kz-wave b{animation:none!important}
/* the whole picture is shown (square screen) so the T-shirt writing can be read */
html body .kizin-player-screen,html body #joe #kizin .kizin-player-screen{aspect-ratio:1/1!important;min-height:0!important;max-height:none!important}
/* Kizin nan logo, bottom right, no background: the knob turns, then the name is written */
.kizin-player-screen .kz-mark{position:absolute;right:3%;bottom:3.5%;width:38%;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.kz-knobbox{position:relative;width:46%;aspect-ratio:300/250;filter:drop-shadow(0 6px 10px rgba(0,0,0,.55))}
.kz-knob{display:block;width:100%;height:100%;-webkit-mask-image:radial-gradient(ellipse 49% 49% at 50% 52%,#000 96%,transparent 100%);mask-image:radial-gradient(ellipse 49% 49% at 50% 52%,#000 96%,transparent 100%)}
/* the top of the knob is redrawn as a metal disc with a tick that turns like a volume control */
.kz-disc{position:absolute;left:11.5%;top:34%;width:77%;aspect-ratio:1/1;border-radius:50%;transform:translateY(-50%) scaleY(.61);
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.05) 1px 2px),conic-gradient(from 20deg,#cfd4db,#f6f8fa,#9ba2ad,#e8ecf0,#8c939e,#f1f4f7,#b6bcc6,#e6e9ed,#cfd4db);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),inset 0 0 14px rgba(0,0,0,.25)}
.kz-tickwrap{position:absolute;inset:0;border-radius:50%;animation:kzVol 12s ease-in-out infinite;transform:rotate(-135deg)}
.kz-tick{position:absolute;left:50%;top:5%;width:6%;height:30%;transform:translateX(-50%);border-radius:4px;background:linear-gradient(90deg,#090a0c,#2a2e35 60%,#090a0c);box-shadow:0 0 0 1px rgba(255,255,255,.18)}
@keyframes kzVol{0%{transform:rotate(-135deg)}45.833%{transform:rotate(135deg)}80.0%{transform:rotate(135deg)}95.0%,100%{transform:rotate(-135deg)}}
.kz-word{display:block;width:100%;height:auto;margin-top:-4%;mix-blend-mode:screen;filter:contrast(2.2) drop-shadow(0 0 6px rgba(255,255,255,.35));clip-path:inset(0 100% 0 0);animation:kzWrite 12s linear infinite}
@keyframes kzWrite{0%%{opacity:1;clip-path:inset(0 100%% 0 0)}6.667%{clip-path:inset(0 100% 0 0)}9.167%{clip-path:inset(0 82% 0 0)}11.25%{clip-path:inset(0 82% 0 0)}13.75%{clip-path:inset(0 75% 0 0)}15.833%{clip-path:inset(0 75% 0 0)}18.333%{clip-path:inset(0 64% 0 0)}20.417%{clip-path:inset(0 64% 0 0)}22.917%{clip-path:inset(0 57% 0 0)}25.0%{clip-path:inset(0 57% 0 0)}27.5%{clip-path:inset(0 39% 0 0)}29.583%{clip-path:inset(0 39% 0 0)}32.083%{clip-path:inset(0 23% 0 0)}34.167%{clip-path:inset(0 23% 0 0)}36.667%{clip-path:inset(0 11% 0 0)}38.75%{clip-path:inset(0 11% 0 0)}41.25%{clip-path:inset(0 0% 0 0)}80.0%{opacity:1;clip-path:inset(0 0 0 0)}86.667%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 100% 0 0)}}
@media (prefers-reduced-motion:reduce){.kz-tickwrap,.kz-word{animation:none!important}.kz-tickwrap{transform:rotate(40deg)}.kz-word{clip-path:none}}
html.ks-a11y-still .kz-tickwrap,html.ks-a11y-still .kz-word{animation:none!important}html.ks-a11y-still .kz-tickwrap{transform:rotate(40deg)}html.ks-a11y-still .kz-word{clip-path:none}