.kok-feature-ui{position:absolute;width:358px;height:460px;transform-origin:0 0;pointer-events:none}
.kok-feature-ui .screen-window{position:absolute;left:0;top:0;width:358px;padding:22px 23px 20px;background:linear-gradient(145deg,#ffffffed,#f9fcffe8);border:1px solid #fff;border-radius:24px;box-shadow:0 24px 70px #204f9415,0 0 0 7px #dce8fa6b,inset 0 1px 0 #fff;transform:translateY(12px) rotate(-3deg);opacity:0;visibility:hidden;transition:opacity .25s,transform .35s;backdrop-filter:blur(12px)}
.kok-feature-ui .screen-window.is-active{opacity:1;visibility:visible;transform:translateY(0) rotate(-3deg)}
.kok-mascot-place{z-index:2}
.kok-feature-copy h2 em{font-style:normal;color:#0b50cc}
.kok-feature-links a:nth-child(2){background:transparent;border:1px solid #cfd9e8;color:#4f5f76}
@media(max-width:1023px){.kok-feature-ui{display:none}.kok-feature-links{padding-right:105px}.kok-feature-links a{white-space:nowrap}}
@media(max-width:750px){#kok-join{overflow-x:clip}}
@media(prefers-reduced-motion:reduce){.kok-feature-ui .screen-window{transition:none}}
.kok-feature-ui .window-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.kok-feature-ui .window-top>strong{font-size:16px;line-height:1.3;letter-spacing:-.4px}
.kok-feature-ui .window-top strong small{display:block;margin-top:4px;font-size:10px;font-weight:400;color:#929cae;letter-spacing:0}
.kok-feature-ui .app-mark{display:grid;place-items:center;flex:none;width:38px;height:38px;background:#e8f0ff;border-radius:12px}
.kok-feature-ui .app-mark img{width:28px;height:30px;object-fit:contain}
.kok-feature-ui .badge{margin-left:auto;align-self:center;background:#e9f2ff;color:#0b50cc;font-size:10px;font-weight:700;padding:7px 9px;border-radius:30px;white-space:nowrap}
.kok-feature-ui .dots{margin-left:auto;letter-spacing:2px;color:#91a1b7}
.kok-feature-ui .club-cover{height:92px;overflow:hidden;border-radius:14px;position:relative;margin-bottom:15px;background:#ddecff}
.kok-feature-ui .club-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;opacity:.55}
.kok-feature-ui .club-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#deecff 10%,#deecff33 80%)}
.kok-feature-ui .club-cover>span{position:absolute;z-index:1;left:16px;top:26px;font-size:12px;color:#4f6180;line-height:1.5}
.kok-feature-ui .club-cover b{font-size:15px;color:#243957}
.kok-feature-ui .mini-stats{display:grid;grid-template-columns:repeat(3,1fr);padding:5px 0 18px;gap:10px}
.kok-feature-ui .mini-stats>div{padding-left:12px;border-left:1px solid #e2e8f1}
.kok-feature-ui .mini-stats>div:first-child{border:0;padding-left:0}
.kok-feature-ui .mini-stats small{display:block;font-size:10px;color:#8d99a9;margin-bottom:7px}
.kok-feature-ui .mini-stats b{font-size:25px;font-weight:750;letter-spacing:-.9px}
.kok-feature-ui .mini-stats b span{font-size:11px;font-weight:500;margin-left:3px;color:#6d7d91;letter-spacing:0}
.kok-feature-ui .row-heading{display:flex;justify-content:space-between;font-size:11px;font-weight:650;color:#536076;margin:0 0 12px}
.kok-feature-ui .row-heading>span{font-size:9px;color:#99a5b7;font-weight:400}
.kok-feature-ui .schedule{border-top:1px solid #eaf0f8;padding-top:14px;display:flex;gap:10px;align-items:center}
.kok-feature-ui .calendar{background:#edf3ff;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:38px;height:43px;color:#0b50cc;flex:none}
.kok-feature-ui .calendar small{font-size:8px}
.kok-feature-ui .calendar b{font-size:11px}
.kok-feature-ui .schedule>div>b{font-size:11px}
.kok-feature-ui .schedule>div>small{display:block;font-size:8px;color:#8b97a8;margin-top:4px}
.kok-feature-ui .count{margin-left:auto;color:#0b50cc;font-size:9px;white-space:nowrap}
.kok-feature-ui .search-row{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#f1f5fc;border-radius:9px;color:#7989a2;font-size:10px;margin-bottom:13px}
.kok-feature-ui .search-row>span:first-child{font-size:18px}
.kok-feature-ui .search-row>span:last-child{margin-left:auto}
.kok-feature-ui .search-row i{height:12px;border-left:1px solid #dbe3f0;margin:0 4px}
.kok-feature-ui .coach-photo,.kok-feature-ui .community-photo{height:133px;overflow:hidden;border-radius:13px;position:relative;background:#e3edff}
.kok-feature-ui .coach-photo img,.kok-feature-ui .community-photo img{height:100%;width:100%;object-fit:cover;object-position:center 40%}
.kok-feature-ui .coach-photo>span,.kok-feature-ui .community-photo>span{position:absolute;left:10px;bottom:10px;background:#fffffff0;border-radius:20px;padding:5px 8px;font-size:9px;font-weight:600;color:#325782}
.kok-feature-ui .coach-info{display:flex;align-items:center;justify-content:space-between;margin:16px 0 13px}
.kok-feature-ui .coach-info b{font-size:16px;letter-spacing:-.5px}
.kok-feature-ui .verified{color:#0b50cc;font-size:12px}
.kok-feature-ui .coach-info small{display:block;font-size:9px;color:#8c9aaf;margin-top:7px}
.kok-feature-ui .arrow{font-size:18px;color:#0b50cc}
.kok-feature-ui .chips{display:flex;gap:6px}
.kok-feature-ui .chips>span{font-size:9px;background:#edf3ff;color:#5474a6;padding:6px 9px;border-radius:20px}
.kok-feature-ui .community-tabs{display:flex;gap:15px;margin:0 0 15px;font-size:9px;color:#98a4b5;border-bottom:1px solid #e6ecf7;padding:3px 0 11px}
.kok-feature-ui .community-tabs b{color:#0b50cc}
.kok-feature-ui .community-photo{height:123px}
.kok-feature-ui .post{margin-top:14px}
.kok-feature-ui .post-tag{font-size:8px;color:#0b50cc;background:#eaf1ff;padding:4px 6px;border-radius:5px}
.kok-feature-ui .post>b{display:block;font-size:14px;letter-spacing:-.3px;margin-top:10px}
.kok-feature-ui .post>small{font-size:9px;color:#939faf;display:block;margin-top:6px}
.kok-feature-ui .post footer{display:flex;justify-content:space-between;font-size:8px;color:#a5aebd;margin-top:14px}
.kok-feature-ui .profile{display:flex;align-items:center;gap:9px;margin-bottom:20px;padding:12px 10px;background:#edf4ff;border-radius:12px}
.kok-feature-ui .profile-avatar{display:block;width:39px;height:39px;overflow:hidden;border-radius:50%;background:#d6e7ff;flex:none}
.kok-feature-ui .profile-avatar img{width:49px;height:63px;object-fit:contain;transform:translate(-5px,2px)}
.kok-feature-ui .profile strong{font-size:11px}
.kok-feature-ui .profile small{font-size:8px;color:#8c9aaf;display:block;margin-top:4px}
.kok-feature-ui .level{margin-left:auto;font-size:8px;color:#0b50cc;background:#fff;padding:4px 5px;border-radius:9px}
.kok-feature-ui .activity{padding:15px 0;border-block:1px solid #e8eef7}
.kok-feature-ui .week{display:flex;justify-content:space-between;align-items:center}
.kok-feature-ui .week>*{font-size:10px;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;background:#f1f4fa;color:#a4aebe}
.kok-feature-ui .week b{background:#0b50cc;color:white;font-weight:600}
.kok-feature-ui .growth{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:18px}
.kok-feature-ui .growth b{font-size:11px}
.kok-feature-ui .growth small{display:block;font-size:8px;color:#95a1b2;margin-top:5px}
.kok-feature-ui .growth>span{color:#0b50cc;font-size:17px;font-weight:700}
.kok-feature-ui .growth>i{width:100%;height:5px;background:#e6edf7;border-radius:5px;margin-top:12px;overflow:hidden}
.kok-feature-ui .growth>i>b{display:block;width:80%;height:100%;background:#0b50cc;border-radius:5px}

.kok-character-stage{background:#c3d3e6 url('assets/feature-court-background.png') center center/cover no-repeat}.kok-character-stage::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,248,255,.04),rgba(245,248,255,.2) 55%,rgba(245,248,255,.36));pointer-events:none}.kok-feature-copy p{color:#40536b}@media(max-width:1023px){.kok-character-stage{background-position:38% center}.kok-character-stage::before{background:rgba(245,248,255,.22)}}


.kok-character-stage::before{background:linear-gradient(180deg,rgba(245,248,255,.97) 0%,rgba(245,248,255,.95) 38%,rgba(245,248,255,.82) 61%,rgba(245,248,255,.55) 100%)}@media(max-width:1023px){.kok-character-stage::before{background:linear-gradient(180deg,rgba(245,248,255,.97) 0%,rgba(245,248,255,.95) 42%,rgba(245,248,255,.8) 66%,rgba(245,248,255,.58) 100%)}}


.kok-mascot-still{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center;pointer-events:none;animation:none;transition:none}.kok-mascot-motion,.kok-mascot-surface{animation:none!important;transition:none!important}