/* Keo Call — interactive 3D landing layer: cursor glow, glowing buttons, 3D scenes. */

/* ---------- 0. cursor glow + particles (whole page) ---------- */
#kc-glow{position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;z-index:60;
  background:radial-gradient(circle,rgba(231,183,163,.20) 0,rgba(231,183,163,.08) 32%,rgba(231,183,163,0) 68%);
  mix-blend-mode:screen;opacity:0;transition:opacity .4s;will-change:transform}
#kc-glow.on{opacity:1}
#kc-glow i{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:rgba(255,226,214,.55);filter:blur(5px)}
#kc-dots{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
body.kc-3d main,body.kc-3d .top{position:relative;z-index:1}
body.kc-3d .top{position:sticky;z-index:20}
body.kc-3d .band.alt{background:rgba(11,12,16,.72)}
body.kc-3d .band.cta{background:radial-gradient(ellipse at 50% 0,rgba(231,183,163,.16),transparent 60%)}
body:has(#meet:not([hidden])) #kc-glow{display:none}
@media (hover:none),(pointer:coarse){#kc-glow{display:none}}

/* ---------- 1. glowing buttons (site-wide) ---------- */
.btn{transition:filter .2s,background .2s,box-shadow .25s,transform .15s,border-color .2s}
.btn.primary:hover{filter:brightness(1.07);box-shadow:0 0 0 1px rgba(255,214,198,.55),0 0 22px rgba(231,183,163,.55),0 0 60px rgba(231,183,163,.28)}
.btn.primary:active{transform:scale(.97);box-shadow:0 0 0 1px rgba(255,226,214,.8),0 0 34px rgba(231,183,163,.85),0 0 90px rgba(231,183,163,.45)}
.btn.ghost:hover{border-color:var(--pink);box-shadow:0 0 0 1px rgba(231,183,163,.35),0 0 20px rgba(231,183,163,.25);color:var(--text)}
.btn.ghost:active{transform:scale(.97)}
.btn.danger:hover{box-shadow:0 0 20px rgba(229,72,77,.35)}
.btn.primary.kc-pulse{animation:kcPulse .55s ease-out}
@keyframes kcPulse{0%{box-shadow:0 0 0 0 rgba(231,183,163,.9)}100%{box-shadow:0 0 0 18px rgba(231,183,163,0)}}
.nav .box{transition:border-color .2s,box-shadow .25s}
.nav .box:hover{border-color:var(--pink);box-shadow:0 0 18px rgba(231,183,163,.35);color:var(--text)}

/* ---------- 2. card edge light that follows the cursor ---------- */
.kc-lit{position:relative;isolation:isolate}
.kc-lit:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,214,198,.95),rgba(231,183,163,.25) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kc-lit:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(231,183,163,.09),transparent 60%)}
.kc-lit:hover:before,.kc-lit:hover:after{opacity:1}

/* ---------- 3. hero stage: glass lens + floating call screens + light orb ---------- */
.hero-side{position:relative}
body.kc-3d{overflow-x:clip}
.stage3d{position:relative;height:340px;perspective:1100px;margin-bottom:-70px;z-index:0}
.stage3d .rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s linear}
.lens{position:absolute;left:50%;top:44%;width:230px;height:230px;margin:-115px 0 0 -115px;transform-style:preserve-3d;animation:kcFloat 7s ease-in-out infinite}
.lens>*{position:absolute;inset:0;border-radius:50%}
.lens .l-ring{background:conic-gradient(from 210deg,#3a2a26,#E7B7A3,#fff1ea,#C98B73,#2a1f1c,#E7B7A3,#3a2a26);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 60px rgba(231,183,163,.25);transform:translateZ(0)}
.lens .l-body{inset:12px;background:radial-gradient(circle at 50% 50%,#1b1e26 0,#0b0c10 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 10px 30px rgba(0,0,0,.8);transform:translateZ(14px)}
.lens .l-i1{inset:34px;background:radial-gradient(circle,#231a2a 0,#0d0e14 70%);box-shadow:inset 0 0 0 2px rgba(231,183,163,.25),0 0 24px rgba(231,183,163,.15);transform:translateZ(28px)}
.lens .l-i2{inset:62px;background:radial-gradient(circle at 45% 40%,#4a3346 0,#1a1220 55%,#07070a 100%);box-shadow:inset 0 0 0 1px rgba(255,214,198,.35);transform:translateZ(42px)}
.lens .l-i3{inset:88px;background:radial-gradient(circle,#E7B7A3 0,#8a5a4a 45%,#120c10 80%);box-shadow:0 0 30px rgba(231,183,163,.65);transform:translateZ(54px);animation:kcIris 4.5s ease-in-out infinite}
.lens .l-glint{inset:40px 70px 120px 50px;border-radius:50%;background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);filter:blur(2px);transform:translateZ(64px) rotate(-18deg)}
.lens .l-glint2{inset:150px 60px 50px 140px;background:rgba(255,236,228,.35);filter:blur(4px);transform:translateZ(64px)}
@keyframes kcIris{0%,100%{transform:translateZ(54px) scale(1)}50%{transform:translateZ(54px) scale(.82)}}
@keyframes kcFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.tile3d{position:absolute;width:132px;height:90px;border-radius:14px;background:linear-gradient(150deg,rgba(40,44,55,.85),rgba(16,18,23,.85));border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(6px);overflow:hidden;transform-style:preserve-3d}
.tile3d .who{position:absolute;left:50%;bottom:-14px;width:54px;height:54px;margin-left:-27px;border-radius:50% 50% 12px 12px;background:linear-gradient(#3b3440,#231f28)}
.tile3d .who:before{content:"";position:absolute;left:50%;top:-26px;width:28px;height:28px;margin-left:-14px;border-radius:50%;background:linear-gradient(#5a4a52,#3a3038)}
.tile3d .nm{position:absolute;left:8px;top:7px;font:500 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.tile3d .dot{position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.tile3d.t1{left:2%;top:10%;transform:translateZ(60px) rotateY(18deg);animation:kcBob 6s ease-in-out infinite}
.tile3d.t2{right:0;top:4%;transform:translateZ(90px) rotateY(-16deg);animation:kcBob 7s ease-in-out -2s infinite}
.tile3d.t3{left:8%;bottom:26%;transform:translateZ(110px) rotateY(14deg);animation:kcBob 8s ease-in-out -4s infinite}
.tile3d.t4{right:4%;bottom:30%;transform:translateZ(40px) rotateY(-20deg);animation:kcBob 6.5s ease-in-out -1s infinite}
.tile3d.fx .who,.tile3d.fx .who:before{background:linear-gradient(#e9c3b3,#b98472)}
.tile3d.fx:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,230,220,.35) 50%,transparent 70%);background-size:250% 100%;animation:kcShimmer 3.2s linear infinite}
.tile3d.fx .nm{color:var(--pink)}
@keyframes kcShimmer{0%{background-position:150% 0}100%{background-position:-100% 0}}
@keyframes kcBob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.orb{position:absolute;left:50%;top:44%;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(231,183,163,.38),rgba(231,183,163,.10) 40%,transparent 68%);transform:translateZ(-80px) scale(var(--orb,1));opacity:var(--orbo,.7);transition:transform .3s,opacity .3s;filter:blur(6px)}
.hero-side #join{position:relative;z-index:2;background:rgba(24,27,34,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (max-width:980px){.stage3d{height:280px;margin-bottom:-50px}.lens{transform:scale(.85)}}
@media (max-width:640px){.stage3d{height:230px;margin-bottom:-40px}.tile3d.t3,.tile3d.t4{display:none}.tile3d{width:108px;height:74px}.lens{width:190px;height:190px;margin:-95px 0 0 -95px}.lens .l-i3{inset:72px}.lens .l-i2{inset:52px}.lens .l-i1{inset:28px}}

/* ---------- 4. filter before / after slider ---------- */
.ba-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;margin-top:34px;perspective:1200px}
@media (max-width:820px){.ba-wrap{grid-template-columns:1fr;gap:22px}}
.ba{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 70px rgba(0,0,0,.5);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s linear;touch-action:none;cursor:ew-resize;user-select:none}
.ba .pic{position:absolute;inset:0}
.ba .pic img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 20%;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--cut,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;margin-left:-1px;background:var(--pink);box-shadow:0 0 16px rgba(231,183,163,.9)}
.ba .handle:after{content:"‹ ›";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--pink);color:var(--on-pink);font:700 16px/44px var(--sans);text-align:center;box-shadow:0 0 0 6px rgba(231,183,163,.2),0 0 30px rgba(231,183,163,.7)}
.ba .lab2{position:absolute;top:14px;font:500 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:8px;background:rgba(11,12,16,.7)}
.ba .lab2.l{left:14px;color:var(--text2)}.ba .lab2.r{right:14px;color:var(--pink)}

/* ---------- 5. 3D feature icons + card tilt ---------- */
.feat{transform-style:preserve-3d;transition:transform .2s,box-shadow .3s,border-color .3s}
.feat:hover{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px);box-shadow:0 24px 50px rgba(0,0,0,.45)}
.feat .ico{transform-style:preserve-3d;background:linear-gradient(145deg,rgba(255,225,212,.35),rgba(231,183,163,.12) 45%,rgba(120,80,68,.25));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 18px rgba(0,0,0,.45),0 0 0 1px rgba(231,183,163,.25);transition:transform .45s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s}
.feat .ico svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.feat:hover .ico{transform:translateZ(40px) rotateY(-24deg) rotateX(12deg) scale(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 30px rgba(0,0,0,.5),0 0 26px rgba(231,183,163,.55)}
.feat .ico{animation:kcSpin 9s ease-in-out infinite}
.feat:nth-child(2n) .ico{animation-delay:-3s}.feat:nth-child(3n) .ico{animation-delay:-6s}
.feat:hover .ico{animation:none}
@keyframes kcSpin{0%,100%{transform:rotateY(0)}45%{transform:rotateY(0)}50%{transform:rotateY(180deg)}95%{transform:rotateY(180deg)}}

/* ---------- 6. three-step glowing path ---------- */
.steps3{position:relative}
.steps-path{position:absolute;left:0;right:0;top:42px;height:4px;pointer-events:none;z-index:0}
.steps-path i{position:absolute;left:10%;right:10%;top:0;height:2px;background:var(--line2);border-radius:2px}
.steps-path b{position:absolute;left:10%;top:0;height:2px;width:calc(80% * var(--p,0));background:linear-gradient(90deg,var(--pink2),var(--pink));border-radius:2px;box-shadow:0 0 14px rgba(231,183,163,.9)}
.steps-path b:after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:#ffe6dc;box-shadow:0 0 18px 4px rgba(231,183,163,.9)}
.step3{position:relative;z-index:1;transition:border-color .5s,box-shadow .5s,transform .5s}
.step3 b{transition:transform .6s cubic-bezier(.2,.9,.3,1.3),box-shadow .5s,filter .5s;filter:grayscale(.8) brightness(.6);transform:perspective(400px) rotateY(-70deg) scale(.85)}
.step3.on{border-color:rgba(231,183,163,.55);box-shadow:0 0 0 1px rgba(231,183,163,.2),0 20px 50px rgba(0,0,0,.4),0 0 40px rgba(231,183,163,.12)}
.step3.on b{filter:none;transform:perspective(400px) rotateY(0) translateZ(10px);box-shadow:0 0 24px rgba(231,183,163,.7)}
@media (max-width:820px){.steps-path{display:none}}

/* ---------- 7. pricing plinth ---------- */
.plinth{position:relative;justify-self:end;width:100%;max-width:440px;perspective:1100px;padding-bottom:70px}
@media (max-width:820px){.plinth{justify-self:stretch;max-width:none}}
.plinth .price-card{position:relative;z-index:2;max-width:none;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s linear;box-shadow:0 40px 80px rgba(0,0,0,.55)}
.plinth .base{position:absolute;left:4%;right:4%;bottom:0;height:120px;transform:rotateX(74deg);transform-style:preserve-3d;z-index:1}
.plinth .base i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(231,183,163,.05),rgba(231,183,163,.55),rgba(255,236,228,.15),rgba(231,183,163,.5),rgba(231,183,163,.05));animation:kcTurn 10s linear infinite;box-shadow:0 0 60px rgba(231,183,163,.35)}
.plinth .base i:after{content:"";position:absolute;inset:14%;border-radius:50%;background:radial-gradient(circle,rgba(16,18,23,.6),rgba(16,18,23,.95));border:1px solid rgba(255,214,198,.3)}
.plinth .glow{position:absolute;left:10%;right:10%;bottom:30px;height:90px;border-radius:50%;background:radial-gradient(ellipse,rgba(231,183,163,.55),transparent 70%);filter:blur(18px);z-index:0}
@keyframes kcTurn{to{transform:rotate(360deg)}}

/* ---------- 8. 3D phone ---------- */
.phone3d{justify-self:center;perspective:1200px;padding:20px 0}
.phone3d .body{position:relative;width:230px;height:460px;transform-style:preserve-3d;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-18deg));transition:transform .15s linear;animation:kcFloat 6s ease-in-out infinite}
.phone3d .face{position:absolute;inset:0;border-radius:36px;background:linear-gradient(160deg,#2a2e38,#0B0C10);border:1px solid var(--line2);padding:12px;transform:translateZ(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.phone3d .back{position:absolute;inset:0;border-radius:36px;background:linear-gradient(160deg,#3a3036,#15131a);transform:translateZ(-10px) rotateY(180deg)}
.phone3d .edge{position:absolute;top:18px;bottom:18px;width:20px;background:linear-gradient(90deg,#1a1d24,#3a404c,#1a1d24);border-radius:4px}
.phone3d .edge.r{right:-10px;transform:rotateY(90deg)}.phone3d .edge.l{left:-10px;transform:rotateY(-90deg)}
.phone3d .shadow{position:absolute;left:10%;right:10%;bottom:-40px;height:40px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);transform:rotateX(90deg) translateZ(-230px)}
.phone3d .scr{height:100%;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(231,183,163,.22),transparent 60%),#101217;display:flex;flex-direction:column;padding:26px 12px 14px;gap:8px;position:relative}
.phone3d .scr:before{content:"";position:absolute;left:50%;top:8px;width:70px;height:16px;margin-left:-35px;border-radius:10px;background:#000}
.phone3d .scr .hd{display:flex;align-items:center;gap:7px;font:600 15px var(--serif)}
.phone3d .scr .hd img{width:22px;height:22px;border-radius:6px}
.phone3d .scr .main{flex:1;border-radius:14px;background:linear-gradient(160deg,#2b2630,#15141a);position:relative;overflow:hidden}
.phone3d .scr .main .who{position:absolute;left:50%;bottom:-20px;width:120px;height:120px;margin-left:-60px;border-radius:50% 50% 20px 20px;background:linear-gradient(#e9c3b3,#b98472)}
.phone3d .scr .main .who:before{content:"";position:absolute;left:50%;top:-58px;width:62px;height:62px;margin-left:-31px;border-radius:50%;background:linear-gradient(#f1d2c4,#c99583)}
.phone3d .scr .main .tag{position:absolute;left:8px;top:8px;font:500 8px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pink);background:rgba(11,12,16,.7);padding:4px 6px;border-radius:6px}
.phone3d .scr .row{display:grid;grid-template-columns:1fr 1fr;gap:6px;height:74px}
.phone3d .scr .row span{border-radius:10px;background:linear-gradient(160deg,#252a33,#15171d);position:relative;overflow:hidden}
.phone3d .scr .row span:after{content:"";position:absolute;left:50%;bottom:-10px;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:#3b3440}
.phone3d .scr .bar{display:flex;justify-content:center;gap:8px}
.phone3d .scr .bar i{width:30px;height:30px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}
.phone3d .scr .bar i.end{background:var(--bad);border-color:transparent}
.phone3d .scr .bar i.pk{background:var(--pink);border-color:transparent;box-shadow:0 0 12px rgba(231,183,163,.7)}

/* ---------- 9. PIN keypad ---------- */
.cta-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;text-align:left}
.cta-wrap .acts{justify-content:flex-start!important}
@media (max-width:820px){.cta-wrap{grid-template-columns:1fr;text-align:center}.cta-wrap .acts{justify-content:center!important}}
.keypad{justify-self:center;perspective:1000px}
.kp{width:260px;padding:18px;border-radius:26px;background:linear-gradient(160deg,#20242D,#0f1116);border:1px solid var(--line2);box-shadow:0 40px 80px rgba(0,0,0,.55);transform-style:preserve-3d;transform:rotateX(calc(18deg + var(--rx,0deg))) rotateY(var(--ry,0deg));transition:transform .15s linear}
.kp .disp{height:56px;border-radius:14px;background:#07080b;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px;transition:box-shadow .5s,border-color .5s;transform:translateZ(8px)}
.kp .disp span{width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);transition:background .2s,box-shadow .2s}
.kp .disp span.f{background:var(--pink);border-color:var(--pink);box-shadow:0 0 10px rgba(231,183,163,.9)}
.kp .disp em{font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--pink);font-style:normal;display:none}
.kp.open .disp{border-color:var(--pink);box-shadow:0 0 30px rgba(231,183,163,.6),inset 0 0 20px rgba(231,183,163,.25)}
.kp.open .disp span{display:none}.kp.open .disp em{display:block}
.kp .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;transform-style:preserve-3d}
.kp .k{height:50px;border-radius:14px;background:linear-gradient(160deg,#2b303b,#1a1d24);border:1px solid rgba(255,255,255,.06);font:500 20px var(--mono);color:var(--text);
  transform:translateZ(14px);box-shadow:0 6px 0 #0b0c10,0 10px 18px rgba(0,0,0,.5);transition:transform .12s,box-shadow .12s,color .2s,background .2s;cursor:pointer}
.kp .k:hover{color:var(--pink);box-shadow:0 6px 0 #0b0c10,0 10px 18px rgba(0,0,0,.5),0 0 18px rgba(231,183,163,.35)}
.kp .k.down,.kp .k:active{transform:translateZ(4px);box-shadow:0 1px 0 #0b0c10,0 3px 8px rgba(0,0,0,.5),0 0 22px rgba(231,183,163,.7);color:var(--on-pink);background:var(--pink)}
.kp .k.go{background:var(--pink);color:var(--on-pink);font-size:13px;letter-spacing:.12em}
.kp .k.go:hover{box-shadow:0 6px 0 #6d4a3d,0 0 26px rgba(231,183,163,.7);color:var(--on-pink)}

@media (prefers-reduced-motion:reduce){
  #kc-glow{display:none}
  .lens,.tile3d,.phone3d .body,.plinth .base i,.feat .ico,.lens .l-i3,.tile3d.fx:after{animation:none!important}
}

/* lens size (smaller) */
.lens{scale:.72}
@media (max-width:640px){.lens{scale:.85}}

/* trimmed landing: 4 features */
.feats.feats-4{padding:28px 0 0;max-width:none;grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.feats.feats-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.feats.feats-4{grid-template-columns:1fr}}

/* phone screen photo */
.phone3d .scr .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.phone3d .scr .main .tag{z-index:1}

/* ---------- hero v2: you on a live call ---------- */
.call-stage{height:auto;margin-bottom:18px;padding:10px 0 0}
.call-stage .rig{position:relative;inset:auto}
.callwin{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#20242D,#101217);border:1px solid rgba(255,255,255,.09);
  box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);transform:translateZ(30px);animation:kcFloat 7s ease-in-out infinite}
.cw-glow{position:absolute;left:8%;right:8%;top:12%;bottom:0;border-radius:40px;background:radial-gradient(ellipse,rgba(231,183,163,.35),transparent 70%);filter:blur(30px);transform:translateZ(-60px)}
.cw-top{display:flex;align-items:center;gap:12px;padding:11px 14px;font:500 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text2)}
.cw-top .rec{display:flex;align-items:center;gap:6px;color:#FF8A8D}
.cw-top .rec i{width:8px;height:8px;border-radius:50%;background:var(--bad);box-shadow:0 0 10px var(--bad);animation:kcBlink 1.6s ease-in-out infinite}
.cw-top .cw-time{margin-left:auto;color:var(--muted)}
@keyframes kcBlink{50%{opacity:.25}}
.cw-main{position:relative;aspect-ratio:16/11;margin:0 10px;border-radius:14px;overflow:hidden;background:#0b0c10;box-shadow:0 0 0 2px rgba(231,183,163,.0);animation:kcTalk 2.4s ease-in-out infinite}
@keyframes kcTalk{0%,100%{box-shadow:0 0 0 2px rgba(231,183,163,.25)}50%{box-shadow:0 0 0 3px rgba(231,183,163,.85),0 0 26px rgba(231,183,163,.35)}}
.cw-main img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.cw-chip{position:absolute;left:12px;top:12px;font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-pink);background:var(--pink);padding:6px 10px;border-radius:8px;box-shadow:0 0 18px rgba(231,183,163,.6)}
.cw-name{position:absolute;left:12px;bottom:12px;font:500 11px var(--sans);color:var(--text);background:rgba(11,12,16,.65);backdrop-filter:blur(6px);padding:6px 10px;border-radius:8px}
.cw-pips{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px;transform-style:preserve-3d}
.pip{position:relative;width:108px;height:70px;border-radius:12px;overflow:hidden;background:linear-gradient(150deg,#2b2f3a,#15171d);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 26px rgba(0,0,0,.55);transform:translateZ(40px)}
.pip i{position:absolute;left:50%;bottom:-12px;width:44px;height:44px;margin-left:-22px;border-radius:50% 50% 10px 10px;background:linear-gradient(#3b3440,#231f28)}
.pip i:before{content:"";position:absolute;left:50%;top:-22px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:linear-gradient(#5a4a52,#3a3038)}
.pip b{position:absolute;left:7px;top:6px;font:500 8.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text2)}
.pip.p1{animation:kcBob 6s ease-in-out infinite}.pip.p2{animation:kcBob 7s ease-in-out -2s infinite}
.cw-bar{display:flex;justify-content:center;gap:10px;padding:12px 0 14px}
.cw-bar .b{width:34px;height:34px;border-radius:50%;background:var(--panel2);border:1px solid var(--line)}
.cw-bar .b.pk{background:var(--pink);border-color:transparent;box-shadow:0 0 14px rgba(231,183,163,.7)}
.cw-bar .b.end{background:var(--bad);border-color:transparent;width:48px;border-radius:17px}

/* slim join bar */
#join.join-slim{padding:16px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border-top-width:1px}
#join.join-slim .kicker,#join.join-slim h2{display:none}
#join.join-slim .field{margin:0!important}
#join.join-slim .field label{display:none}
#join.join-slim #go{width:auto;padding:0 22px}
#join.join-slim .err{grid-column:1/-1}
#join.join-slim .err:empty{display:none}
@media (max-width:640px){.pip{width:78px;height:52px}.cw-main{aspect-ratio:4/4.2}}