.rk-hosts{--rk-pink:#e01a88;--rk-blue:#28b6e9;position:relative;max-width:1240px;margin:36px auto;background:#0a0c16;color:#f9f7ff;border:1px solid #ffffff1c;border-radius:28px;padding:30px 34px 24px;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;isolation:isolate;color-scheme:dark}
.rk-hosts *{box-sizing:border-box}.rk-hosts [hidden]{display:none!important}.rk-hosts button,.rk-hosts a{touch-action:manipulation}.rk-hosts button{font:inherit;cursor:pointer;color:inherit}.rk-hosts button:focus-visible,.rk-hosts a:focus-visible,.rk-hosts-stage:focus-visible{outline:3px solid #63d9ff;outline-offset:5px}.rk-hosts-top{display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:5}.rk-hosts-tabs{display:flex;background:#ffffff08;border:1px solid #ffffff19;padding:4px;border-radius:30px}.rk-hosts-tabs button{background:none;border:0;border-radius:24px;padding:10px 22px;font-size:13px;font-weight:700;color:#b7bbce}.rk-hosts-tabs button[aria-pressed=true]{background:#f3f3ff;color:#16152c;box-shadow:0 3px 16px #ffffff13}
.rk-hosts-stage{display:grid;grid-template-columns:1.05fr 1fr;min-height:530px;align-items:center;gap:40px;touch-action:pan-y}.rk-hosts-visual{position:relative;min-width:0;height:520px;perspective:900px;display:flex;align-items:end;justify-content:center;isolation:isolate}.rk-hosts-orbit{position:absolute;inset:4% -10% -4%;border-radius:50%;background:radial-gradient(ellipse,#4b276e40,transparent 65%);z-index:-4}.rk-hosts-beam{position:absolute;width:30%;height:110%;bottom:-10%;filter:blur(24px);opacity:.5;transform-origin:bottom;z-index:-2;border-radius:50%;animation:rk-beam 10s ease-in-out infinite alternate}.rk-hosts-pink{left:8%;background:linear-gradient(0deg,transparent,#f02e9670);transform:rotate(-27deg)}.rk-hosts-blue{right:8%;background:linear-gradient(0deg,transparent,#32bbf389);transform:rotate(27deg);animation-delay:-6s}.rk-hosts-logo{position:absolute;left:3%;top:4%;width:94%;height:78%;object-fit:contain;opacity:.47;filter:blur(1.7px) drop-shadow(0 0 18px #e01a8877) drop-shadow(10px 8px 1px #472e68);transform:rotateY(-12deg) rotateX(3deg);animation:rk-logo 13s ease-in-out infinite alternate;z-index:-1}.rk-hosts-portrait-slot{position:relative;width:88%;height:84%;display:flex;align-items:end;justify-content:center;animation:rk-photo 9s ease-in-out infinite alternate}.rk-hosts-portrait{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 22px 30px #0008);border-radius:20px;mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}.rk-hosts-no-photo{margin:auto;color:#d8daeb;border:1px dashed #c2c8d555;padding:50px 25px;border-radius:20px;background:#111523c9}.rk-hosts-copy{min-width:0;padding:30px 0 30px;position:relative;z-index:2}.rk-hosts-category{font-size:10px;font-weight:800;letter-spacing:3.5px;color:#6dd7f9;display:block;margin-bottom:12px}.rk-hosts .rk-hosts-name{font-size:clamp(32px,4.8vw,66px);line-height:1.04;letter-spacing:-2px;font-weight:900;margin:0 0 24px;color:#fff;overflow-wrap:anywhere;text-transform:none}.rk-hosts-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;max-width:330px;margin-bottom:22px}.rk-hosts-metric{display:flex;align-items:center;justify-content:flex-start;gap:13px;border:1px solid #ffffff15;background:linear-gradient(120deg,#ffffff08,#ffffff02);border-radius:15px;min-height:60px;padding:10px 16px;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}.rk-hosts-metric svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.rk-hosts-rating svg{color:#ffd872;animation:rk-star 4.4s ease-in-out infinite}.rk-hosts-likes svg{color:#ff78b9;animation:rk-heart 3.2s ease-in-out infinite}.rk-hosts-broadcasts svg{color:#8ddfff}.rk-hosts-broadcasts .rk-wave{animation:rk-wave 2.2s ease-in-out infinite;transform-origin:center}.rk-hosts-audience svg{color:#b5a9ff;animation:rk-star 5.2s ease-in-out infinite alternate}.rk-hosts-explanation{max-width:420px;background:#182338;border-left:2px solid #63d9ff;border-radius:6px;padding:12px 14px;font-size:13px;line-height:1.5}.rk-hosts-description{font-size:15px;line-height:1.7;color:#c7c9db;overflow-wrap:anywhere}.rk-hosts-description p{margin:0 0 14px}.rk-hosts-description a{color:#88dafa}.rk-hosts-profile{display:inline-block;margin-top:12px;color:#f1f2fb!important;font-size:12px;font-weight:700;text-decoration:none!important;border-bottom:1px solid #ffffff44;padding-bottom:5px}.rk-hosts-profile span{margin-left:24px;color:#58c6f2}.rk-hosts-bottom{display:flex;gap:22px;align-items:center;border-top:1px solid #ffffff13;padding-top:20px;position:relative;z-index:4}.rk-hosts-arrows{display:flex;gap:8px;flex-shrink:0}.rk-hosts-arrows button{width:42px;height:42px;border:1px solid #ffffff26;background:#ffffff06;border-radius:50%;font-size:20px}.rk-hosts-arrows button:disabled{opacity:.25;cursor:default}.rk-hosts-thumbnails{display:flex;gap:10px;overflow-x:auto;padding:5px 4px 10px;scrollbar-width:thin;max-width:100%;min-width:0}.rk-hosts-thumb{flex:0 0 56px;position:relative;width:56px;height:64px;border-radius:12px;border:2px solid transparent;background:#1a1e32;padding:2px;opacity:.48}.rk-hosts-thumb[aria-current=true]{border-color:#56d8ff;box-shadow:0 0 12px #32bde73c;opacity:1}.rk-hosts-thumb img{width:100%;height:100%;object-fit:contain;border-radius:8px}.rk-hosts-thumb span{font-size:10px}.rk-hosts-counter{white-space:nowrap;font-size:11px;color:#b2b6cb;font-variant-numeric:tabular-nums}.rk-hosts-empty{padding:100px 20px;text-align:center;color:#c7c9db}.rk-hosts-changing .rk-hosts-copy{animation:rk-enter .32s ease-out}.rk-hosts-paused *{animation-play-state:paused!important}.rk-hosts-app{margin:0;background:#0a0c16}.rk-hosts-app .rk-hosts{margin:0;border:0;border-radius:0}
@keyframes rk-logo{to{transform:rotateY(9deg) rotateX(-2deg) translateY(5px)}}@keyframes rk-beam{to{rotate:14deg;opacity:.3}}@keyframes rk-photo{to{transform:translateY(-5px)}}@keyframes rk-star{50%{filter:drop-shadow(0 0 6px currentColor);opacity:.7}}@keyframes rk-heart{50%{transform:scale(1.08)}}@keyframes rk-wave{50%{opacity:.3;transform:scaleY(.7)}}@keyframes rk-enter{from{opacity:.3;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(max-width:700px){.rk-hosts{padding:20px 20px 22px;margin:16px 10px;border-radius:22px}.rk-hosts-top{flex-direction:column;gap:14px}.rk-hosts-tabs{width:100%;justify-content:center}.rk-hosts-tabs button{width:50%;padding:10px}.rk-hosts-stage{grid-template-columns:1fr;gap:0;min-height:0}.rk-hosts-visual{height:clamp(260px,85vw,420px);margin:4px -10px 0}.rk-hosts-logo{top:2%;height:84%;left:2%;width:96%}.rk-hosts-copy{padding:12px 3px 25px}.rk-hosts .rk-hosts-name{font-size:clamp(30px,9vw,48px);letter-spacing:-1.3px;margin-bottom:20px}.rk-hosts-category{font-size:9px;margin-bottom:9px}.rk-hosts-metrics{max-width:100%;gap:9px 12px;margin-bottom:20px}.rk-hosts-metric{min-height:53px;font-size:23px;gap:13px;padding:9px 14px}.rk-hosts-description{font-size:15px;line-height:1.7}.rk-hosts-bottom{flex-wrap:wrap;gap:12px;justify-content:space-between}.rk-hosts-thumbnails{order:-1;width:100%}.rk-hosts-counter{margin-left:auto}.rk-hosts-app .rk-hosts{padding-top:14px}.rk-hosts-portrait-slot{width:86%;height:84%}.rk-hosts-description img{max-width:100%}}
@media(prefers-reduced-motion:reduce){.rk-hosts *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.rk-hosts-stage>.rk-hosts-thumbnails{order:0}
@media(max-width:700px){.rk-hosts-app .rk-hosts-visual{height:clamp(200px,40vh,320px);height:clamp(200px,40svh,320px)}}
/* Separate, visible light shafts; portrait pixels stay unchanged. */
.rk-hosts-beam{width:28%;height:140%;bottom:-28%;filter:blur(7px);opacity:.72;clip-path:polygon(48% 100%,0 0,100% 0);animation:rk-shaft 9s ease-in-out infinite alternate;pointer-events:none}
.rk-hosts-pink{--rk-beam-angle:-32deg;left:20%;background:linear-gradient(90deg,#f02e9600,#f02e96b3 45%,#ffb4e3aa 50%,#f02e9600);transform:rotate(var(--rk-beam-angle))}
.rk-hosts-blue{--rk-beam-angle:30deg;right:19%;background:linear-gradient(90deg,#32bbf300,#32bbf3b3 45%,#a8efffbb 50%,#32bbf300);transform:rotate(var(--rk-beam-angle));animation-delay:-5s;animation-duration:12s}
@keyframes rk-shaft{from{transform:rotate(var(--rk-beam-angle));opacity:.55}to{transform:rotate(calc(var(--rk-beam-angle) + 19deg));opacity:.85}}
.rk-hosts-visual{overflow:hidden}
/* Far hangar wall: brand sign sits behind the shafts and foreground portrait. */
.rk-hosts-visual::before{content:"";position:absolute;inset:0;z-index:-6;pointer-events:none;background:radial-gradient(ellipse at 50% 17%,#2e304d80,transparent 58%),linear-gradient(90deg,transparent 9%,#7887ad12 9.2%,transparent 9.7%,transparent 90%,#7887ad12 90.2%,transparent 90.7%),linear-gradient(180deg,#090c16,#101522 68%,#0a0c16);box-shadow:inset 0 22px 45px #0007;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 82%,transparent)}
.rk-hosts-visual::after{content:"";position:absolute;left:-25%;right:-25%;bottom:-16%;height:42%;z-index:-5;pointer-events:none;transform:perspective(300px) rotateX(62deg);transform-origin:50% 0;background:repeating-linear-gradient(90deg,transparent 0 16%,#839bc019 16.2% 16.4%,transparent 16.6% 33.3%),repeating-linear-gradient(0deg,transparent 0 34px,#9ab8d414 35px 36px);mask-image:linear-gradient(180deg,#0008,transparent 85%)}
.rk-hosts-logo-volume{position:absolute;left:4%;top:12%;width:92%;height:auto;aspect-ratio:1513/180;z-index:-3;opacity:.9;transform-style:preserve-3d;transform-origin:50% 50%;animation:rk-logo-volume 36s ease-in-out infinite alternate;will-change:transform;pointer-events:none}
.rk-hosts-logo-volume img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.rk-hosts-logo-depth{opacity:.95;filter:brightness(.3) saturate(1.1) drop-shadow(1px 2px 1px #02040c)}
.rk-hosts-logo-volume .rk-hosts-logo-front{left:0;top:0;z-index:2;opacity:1;filter:brightness(1.3) drop-shadow(0 0 3px #ffffff65) drop-shadow(-5px 0 15px #e01a8880) drop-shadow(6px 0 16px #28b6e980);transform:translateZ(5px);animation:none}
@keyframes rk-logo-volume{from{transform:translateZ(-100px) rotateY(-5deg) rotateX(2deg)}to{transform:translateZ(-100px) rotateY(5deg) rotateX(-1deg)}}

.rk-hosts-social{text-decoration:none;font-size:16px;line-height:1.3;min-width:0}.rk-hosts-social span{overflow-wrap:anywhere}.rk-hosts-social:hover{border-color:#b5a9ff80;background:#b5a9ff12}
.rk-hosts-metric span{min-width:0;overflow-wrap:anywhere}

.rk-hosts-likes{gap:8px;padding-inline:12px}.rk-hosts-likes span{font-size:clamp(14px,4vw,20px);white-space:nowrap}

/* Embedded scene fits the WKWebView; only the card content scrolls. */
.rk-hosts-app{overflow:hidden}
.rk-hosts-app .rk-hosts{height:100vh;height:100dvh;box-sizing:border-box;display:flex;flex-direction:column;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.rk-hosts-app .rk-hosts-top{flex:0 0 auto;padding-bottom:8px}
.rk-hosts-app .rk-hosts-stage{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;align-content:start;align-items:start;grid-auto-rows:max-content;scroll-padding-bottom:18px;-webkit-overflow-scrolling:touch}
.rk-hosts-app .rk-hosts-bottom{flex:0 0 auto;padding-top:8px;margin-top:4px;min-height:56px;background:#0a0c16}
.rk-hosts-app .rk-hosts-arrows button{width:44px;height:44px}
.rk-hosts-app .rk-hosts-empty{flex:1;min-height:0;overflow:auto;padding:40px 20px}

.rk-hosts-changing .rk-hosts-copy{animation:rk-enter .65s cubic-bezier(.22,.7,.2,1)}.rk-hosts-thumbnails{position:relative}.rk-hosts-thumb{transition:opacity .6s,border-color .6s,box-shadow .6s}.rk-hosts-selection-frame{position:absolute;border:2px solid #56d8ff;border-radius:12px;pointer-events:none;box-shadow:0 0 14px #32bde750;box-sizing:border-box}.rk-hosts-portrait-slot{position:relative}.rk-hosts-portrait-ghost{z-index:1}