.sbento{--mg:#8e2a6f;--mg2:#b8478f;--gl:#e9a6cf;position:relative;width:100%;max-width:820px;margin:0 auto;color:#e7e1ef}
.sbento :is(.on,.ic,.av,.cap,.pill,.eyebrow,.cta,.cta-g,.bcard,.it5,.bento,.grain,.crossg,.winbar,.typing,.appcomp,.appsend,.feat,.imgframe,.crow,.tabw,.trail,.tbtn,.tnum,.tlab,.tauto,.tpanel,.tslide,.tmed,.tbadge,.tbod,.mrail,.mbtn,.tfade-s,.tfade-e,.kgrid,.kc,.kcimg,.kcno,.apwrap,.apidxrow,.apstack,.apr,.apin,.apbody,.aptop,.apico,.pnum,.pchip,.pimg,.ncard,.faqi,.tabbtn,.scard,.faqb,.s2,.lead,.ctr,.sec,.grad){height:auto;width:auto}
.sbento .on{background:none;border-radius:0;box-shadow:none}
.sbento *{box-sizing:border-box}
.sbento .box{position:relative;width:100%;max-width:820px;margin:0 auto;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;min-height:520px;
  background:linear-gradient(180deg,#1b1020,#110a17);
  border:1px solid rgba(233,166,207,.14);
  box-shadow:0 44px 90px -40px rgba(0,0,0,.85),0 0 70px -28px rgba(142,42,111,.42),inset 0 1px 0 rgba(255,255,255,.06)}
.sbento .box::before{content:"";position:absolute;top:-30%;left:-15%;width:55%;height:60%;background:radial-gradient(circle,rgba(184,71,143,.18),transparent 70%);filter:blur(40px);pointer-events:none;animation:kf_android_drift 12s ease-in-out infinite}
@keyframes kf_android_drift{0%,100%{transform:translate(0,0)}50%{transform:translate(26%,18%)}}
.sbento .box>*{position:relative;z-index:1}
.sbento .box.win::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle at 50% 55%,rgba(52,211,153,.34),transparent 60%);opacity:0;animation:kf_android_winwave 1.8s ease-out}
@keyframes kf_android_winwave{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
.sbento .hd{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.2rem;border-bottom:1px solid rgba(233,166,207,.12);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01))}
.sbento .hd .ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--mg),var(--mg2));display:grid;place-items:center;flex:none;box-shadow:0 10px 22px -8px var(--mg)}
.sbento .hd .ic i{color:#fff;font-size:18px}
.sbento .hd .nm{font-size:.98rem;font-weight:700;color:#fff;line-height:1.1}
.sbento .hd .st{font-size:.7rem;color:#e872c0;display:flex;align-items:center;gap:5px;margin-top:2px}
.sbento .hd .st .dot{width:7px;height:7px;border-radius:50%;background:#e872c0;animation:kf_android_pulse 1.6s infinite}
@keyframes kf_android_pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}100%{box-shadow:0 0 0 10px rgba(52,211,153,0)}}
.sbento .hd .cnt{margin-left:auto;text-align:right;display:flex;align-items:center;gap:.5rem}
.sbento .hd .cnt .play{width:24px;height:24px;display:grid;place-items:center;flex:none}
.sbento .hd .cnt .play i{font-size:17px;background:linear-gradient(135deg,#00e5a0,#e872c0,#ffce00,#ff5252);-webkit-background-clip:text;background-clip:text;color:transparent}
.sbento .hd .cnt .num b{font-size:1.3rem;font-weight:800;color:#e872c0;font-variant-numeric:tabular-nums;line-height:1;display:block}
.sbento .hd .cnt .num span{font-size:.56rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;display:block}
.sbento .stage{position:relative;flex:1;display:grid;grid-template-columns:1fr 234px;min-height:340px}
.sbento .scene{position:relative;overflow:hidden;display:grid;place-items:center;padding:1.3rem 0;
  background:
   radial-gradient(circle at 50% 42%,rgba(52,211,153,.05),transparent 56%),
   radial-gradient(circle at 50% 42%,transparent 38%,rgba(142,42,111,.05) 39% 39.4%,transparent 40%)}
.sbento .scene .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(233,166,207,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(233,166,207,.05) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 72%);mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 72%)}
.sbento .phone{position:relative;width:182px;height:374px;border-radius:34px;z-index:2;
  background:linear-gradient(160deg,#2a1a32,#171020);
  border:1px solid rgba(233,166,207,.28);
  box-shadow:0 30px 60px -22px rgba(0,0,0,.8),0 0 44px -18px rgba(142,42,111,.5),inset 0 1px 0 rgba(255,255,255,.08);
  padding:9px}
.sbento .phone .notch{position:absolute;top:15px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:3px;background:rgba(0,0,0,.45);z-index:6}
.sbento .screen{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#120b18;display:flex;flex-direction:column}
.sbento .appbar{flex:none;height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;color:#fff;
  background:linear-gradient(135deg,var(--mg),var(--mg2));box-shadow:0 4px 10px -4px rgba(0,0,0,.5)}
.sbento .appbar i{font-size:13px}
.sbento .appbar .ttl{font-size:.78rem;font-weight:700;letter-spacing:.01em}
.sbento .appbar .sp{margin-left:auto;display:flex;gap:9px;opacity:.85;font-size:12px}
.sbento .view{position:relative;flex:1;overflow:hidden}
.sbento .page{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;gap:9px;opacity:0;transform:translateX(22px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.sbento .page.act{opacity:1;transform:translateX(0);pointer-events:auto}
.sbento .mcard{border-radius:13px;padding:10px 11px;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);border:1px solid rgba(233,166,207,.14)}
.sbento .mcard .mi{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;font-size:13px}
.sbento .mcard .mt{font-size:.66rem;font-weight:700;color:#fff;line-height:1.15}
.sbento .mcard .md{font-size:.56rem;opacity:.55;margin-top:1px}
.sbento .mcard .chev{margin-left:auto;font-size:11px;opacity:.4}
.sbento .banner{border-radius:13px;padding:13px;color:#fff;background:linear-gradient(135deg,var(--mg),var(--mg2));box-shadow:0 8px 18px -8px var(--mg)}
.sbento .banner .bt{font-size:.74rem;font-weight:800}
.sbento .banner .bd{font-size:.58rem;opacity:.85;margin-top:3px}
.sbento .lrow{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid rgba(233,166,207,.1)}
.sbento .lrow .av{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gl),var(--mg2))}
.sbento .lrow .lt{font-size:.65rem;font-weight:700;color:#fff}
.sbento .lrow .ld{font-size:.55rem;opacity:.55;margin-top:1px}
.sbento .lrow .lb{margin-left:auto;font-size:.5rem;font-weight:800;color:#fff;background:#a0357f;border-radius:999px;padding:2px 7px}
.sbento .pf{display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:8px}
.sbento .pf .pa{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--mg),var(--gl));display:grid;place-items:center;color:#fff;font-size:24px;box-shadow:0 8px 18px -8px var(--mg)}
.sbento .pf .pn{font-size:.74rem;font-weight:800;color:#fff}
.sbento .pf .pe{font-size:.56rem;opacity:.55}
.sbento .pf .stats{display:flex;gap:8px;margin-top:5px;width:100%}
.sbento .pf .stat{flex:1;border-radius:11px;padding:8px 4px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(233,166,207,.14)}
.sbento .pf .stat b{display:block;font-size:.8rem;font-weight:800;color:var(--gl)}
.sbento .pf .stat span{font-size:.5rem;opacity:.6}
.sbento .bnav{flex:none;height:52px;display:flex;border-top:1px solid rgba(233,166,207,.14);
  background:rgba(255,255,255,.03)}
.sbento .bnav .nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:14px;color:rgba(199,192,210,.5);transition:color .3s;position:relative}
.sbento .bnav .nav span{font-size:.5rem;font-weight:600}
.sbento .bnav .nav.act{color:var(--gl)}
.sbento .bnav .nav.act::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:26px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--mg),var(--gl))}
.sbento .tp-ripple{position:absolute;border-radius:50%;background:rgba(233,166,207,.45);transform:translate(-50%,-50%) scale(0);pointer-events:none;z-index:7;animation:kf_android_tpr .7s ease-out forwards}
@keyframes kf_android_tpr{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.sbento .finger{position:absolute;z-index:8;width:26px;height:26px;pointer-events:none;opacity:0;transition:opacity .3s,left .55s ease,top .55s ease;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.sbento .finger i{font-size:24px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sbento .finger.show{opacity:1}
.sbento .finger.press{transform:scale(.82)}
.sbento .panel{border-left:1px solid rgba(233,166,207,.12);padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:rgba(255,255,255,.02)}
.sbento .panel h3{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gl);margin:0}
.sbento .metric{display:flex;align-items:center;gap:.6rem}
.sbento .metric .mc{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff;font-size:13px;box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.sbento .metric .mv b{font-size:.92rem;font-weight:800;color:#fff;line-height:1.05;display:block;font-variant-numeric:tabular-nums}
.sbento .metric .mv span{font-size:.58rem;opacity:.6}
.sbento .roll{margin-top:.1rem}
.sbento .roll .rt{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;margin-bottom:5px}
.sbento .roll .rt b{color:#e872c0;font-weight:800;font-variant-numeric:tabular-nums}
.sbento .roll .rt .rl{display:flex;align-items:center;gap:5px;font-weight:700;color:#fff}
.sbento .roll .rt .rl i{color:var(--gl)}
.sbento .bar{height:9px;border-radius:999px;background:rgba(233,166,207,.14);overflow:hidden}
.sbento .bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#a0357f,#e872c0);transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(52,211,153,.5)}
.sbento .roll .steps{display:flex;justify-content:space-between;font-size:.5rem;opacity:.5;margin-top:5px}
.sbento .stars{display:flex;gap:2px;color:#f5b942;font-size:.72rem}
.sbento [x-cloak]{display:none}
@media(max-width:680px){.sbento .stage{grid-template-columns:1fr}.sbento .scene{padding:1.1rem 0 .9rem}.sbento .panel{border-left:0;border-top:1px solid rgba(233,166,207,.12)}}
.sbento .ft{display:flex;align-items:center;gap:10px;padding:.8rem 1.2rem;border-top:1px solid rgba(233,166,207,.12);background:rgba(0,0,0,.18);font-size:.84rem}
.sbento .ft .lic{width:22px;height:22px;border-radius:7px;background:#a0357f;display:grid;place-items:center;flex:none}
.sbento .ft .lic i{color:#fff;font-size:11px}
.sbento .ft .ltx{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:opacity .3s}
.sbento .ft .mkt{flex:none;display:flex;align-items:center;gap:5px;background:linear-gradient(135deg,var(--mg),var(--mg2));color:#fff;font-size:.66rem;font-weight:800;padding:.3rem .65rem;border-radius:999px}
