* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root {
  --bg:#eceef3; --card:#fff; --text:#272730; --muted:#9b9ba7; --border:#e7e7ee;
  --tile-shadow:rgba(0,0,0,.12); --topbar:rgba(255,255,255,.72);
  --blobs:radial-gradient(50% 56% at 8% 20%,rgba(24,192,212,.22),transparent 70%),
          radial-gradient(52% 58% at 94% 6%,rgba(255,90,90,.20),transparent 70%),
          radial-gradient(54% 56% at 12% 98%,rgba(242,163,0,.20),transparent 70%),
          radial-gradient(48% 54% at 86% 86%,rgba(139,124,255,.20),transparent 70%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0c0a16; --card:#181226; --text:#f2ecfb; --muted:#9b8fb5; --border:#2a2138;
    --tile-shadow:rgba(0,0,0,.5); --topbar:rgba(20,15,32,.55);
    --blobs:radial-gradient(70% 80% at 76% 16%,rgba(255,42,150,.50),transparent 72%),
            radial-gradient(78% 88% at 102% 64%,rgba(150,70,255,.56),transparent 72%),
            radial-gradient(66% 76% at 12% 92%,rgba(0,214,255,.42),transparent 70%),
            radial-gradient(60% 70% at 42% -8%,rgba(130,50,210,.44),transparent 70%);
  }
}
body { font-family:'Fredoka',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
#kp-blobs { position:fixed; inset:0; z-index:0; pointer-events:none; background-image:var(--blobs); }
.scrollx { scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.scrollx::-webkit-scrollbar { display:none; }

.kp-screen { display:none; position:relative; z-index:1; min-height:100vh; }
.kp-screen.is-active { display:block; }

.kp-topbar { position:sticky; top:0; z-index:8; display:flex; align-items:center; gap:16px;
  justify-content:space-between; padding:14px 22px; background:var(--topbar);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); }
.kp-logo { width:50px; height:50px; border-radius:16px; background:linear-gradient(135deg,#18C0D4,#FF7B6B);
  box-shadow:0 3px 0 var(--tile-shadow); }
.kp-menu { position:relative; }
.kp-menubtn { border:0; padding:0; cursor:pointer; }
.kp-menubtn:active { transform:translateY(2px); box-shadow:0 1px 0 var(--tile-shadow); }
.kp-menupanel { position:absolute; top:62px; left:0; z-index:20; min-width:200px; padding:8px;
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 10px 30px var(--tile-shadow); }
.kp-menupanel[hidden] { display:none; }
.kp-menuitem { display:block; width:100%; text-align:left; border:0; border-radius:12px; background:transparent;
  cursor:pointer; color:var(--text); font-family:inherit; font-weight:600; font-size:20px; padding:12px 16px;
  text-decoration:none; }
.kp-menuitem:hover, .kp-menuitem:active { background:var(--soft,rgba(139,124,255,.16)); }
.kp-backbtn { width:60px; height:60px; border-radius:50%; background:var(--card); border:1px solid var(--border);
  cursor:pointer; font-size:24px; color:var(--text); }

.kp-empty { font-size:24px; text-align:center; margin:24vh 24px 0; }

.kp-row { padding:14px 0 6px; }
.kp-rowhead { display:flex; align-items:center; gap:14px; margin:0 0 14px 22px; }
.kp-rowicon { width:52px; height:52px; border-radius:16px; background:var(--accent,#8B7CFF);
  box-shadow:0 3px 0 var(--tile-shadow); }
.kp-pill { background:var(--soft,rgba(139,124,255,.16)); color:var(--dark,#8B7CFF);
  padding:8px 20px; border-radius:999px; font-weight:600; font-size:22px; }
.kp-pill--recent, .kp-pill--more { background:rgba(139,124,255,.16); color:#8B7CFF; }
.kp-rail { display:flex; gap:18px; overflow-x:auto; padding:6px 22px; min-height:120px; }

.kp-tile { flex:0 0 auto; width:252px; height:142px; border-radius:18px; border:0; cursor:pointer;
  background-color:var(--accent,#8B7CFF); background-size:cover; background-position:center;
  box-shadow:0 5px 0 var(--tile-shadow); position:relative; padding:0; }
.kp-tile:active { transform:translateY(2px); box-shadow:0 3px 0 var(--tile-shadow); }
.kp-tile__play { position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,.94); display:flex; align-items:center; justify-content:center; }
.kp-tile__play::after { content:''; border-left:18px solid #2b2b2b; border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:5px; }
.kp-tile__bar { position:absolute; left:12px; right:12px; bottom:11px; height:8px; border-radius:999px;
  background:rgba(0,0,0,.30); }
.kp-tile__bar > i { display:block; height:100%; border-radius:999px; background:#fff; width:0; }

.kp-tile--retry { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; background-color:var(--card); border:3px dashed var(--accent,#8B7CFF); box-shadow:0 5px 0 var(--tile-shadow); }
.kp-retryicon { font-size:46px; line-height:1; color:var(--accent,#8B7CFF); }
.kp-retrytext { font-size:18px; font-weight:600; color:var(--text); }

.kp-choosewrap { display:flex; align-items:center; justify-content:center; gap:40px; flex-wrap:wrap;
  padding:6vh 32px; }
.kp-choosecard { border:0; background:transparent; cursor:pointer; width:380px; max-width:80vw; }
.kp-choosethumb { height:300px; border-radius:28px; background:#8B7CFF; box-shadow:0 7px 0 var(--tile-shadow);
  display:flex; align-items:center; justify-content:center; position:relative; outline:6px solid #3DBE6B; }
.kp-choosecard--resume .kp-choosethumb { outline-color:var(--accent,#8B7CFF); }
.kp-rewind, .kp-playtri { width:108px; height:108px; border-radius:50%; background:#fff; display:flex;
  align-items:center; justify-content:center; font-size:62px; color:#3DBE6B; }
.kp-playtri::after { content:''; border-left:38px solid #2b2b2b; border-top:24px solid transparent;
  border-bottom:24px solid transparent; margin-left:9px; }
.kp-choosebar { position:absolute; left:20px; right:20px; bottom:20px; height:14px; border-radius:999px;
  background:rgba(0,0,0,.30); }
.kp-choosebar > i { display:block; height:100%; border-radius:999px; background:#fff; width:0; }
.kp-choosepill { display:inline-block; margin-top:18px; background:var(--accent,#8B7CFF); color:#fff;
  font-weight:600; font-size:26px; padding:12px 34px; border-radius:999px; }
.kp-choosepill--start { background:#3DBE6B; }

.kp-player { background:#0f0a1c; }
.kp-player .kp-topbar { background:rgba(0,0,0,.5); border-color:transparent; }
.kp-stage { margin:0 22px; min-height:46vh; border-radius:24px; background:#000; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.kp-stage video { width:100%; height:100%; max-height:60vh; background:#000; }
.kp-bigbtn { position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:50%; border:0;
  background:rgba(255,255,255,.95); cursor:pointer; display:none; }
.kp-bigbtn.is-paused { display:block; }
.kp-bigbtn::after { content:''; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:42px solid #2b2b2b; border-top:27px solid transparent; border-bottom:27px solid transparent;
  margin-left:42px; }
.kp-scrub { position:absolute; left:18px; right:18px; bottom:16px; height:12px; border-radius:999px;
  background:rgba(255,255,255,.30); cursor:pointer; touch-action:none; }
.kp-scrubfill { height:100%; border-radius:999px; background:#fff; width:0; }
.kp-scrubknob { position:absolute; top:50%; left:0; transform:translate(-50%,-50%); width:34px; height:34px;
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.4); }
.kp-videoerror { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.72); cursor:pointer; }
.kp-videoerror[hidden] { display:none; }
.kp-videoerror__box { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  padding:26px 30px; border-radius:22px; background:var(--card,#181226); color:var(--text,#f2ecfb);
  border:3px solid var(--accent,#8B7CFF); box-shadow:0 10px 30px rgba(0,0,0,.5); }
.kp-videoerror__icon { font-size:42px; line-height:1; }
.kp-videoerror__text { font-weight:600; font-size:18px; }
.kp-videoerror__retry { font-weight:600; font-size:15px; color:#fff; background:var(--accent,#8B7CFF);
  padding:9px 20px; border-radius:999px; }
.kp-rowhead--more { margin-top:18px; }
.kp-pill--more { color:#fff; background:rgba(255,255,255,.14); }
#kp-more { padding-bottom:26px; }
.kp-pull { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:50;
  width:54px; height:54px; border-radius:50%; background:var(--card); box-shadow:0 4px 14px var(--tile-shadow);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:transform .2s ease, opacity .2s ease; }
.kp-pull.is-dragging { transition:none; }
.kp-pull.is-ready { background:var(--accent,#8B7CFF); }
.kp-pullspin { font-size:28px; color:var(--text); }
.kp-pull.is-spinning .kp-pullspin { animation:kp-spin .8s linear infinite; }
@keyframes kp-spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }