/* Shared swipe-deck demo (the app's learn screen). Scoped under .kd so it can sit on any page. */
.kd{--kd-brand:var(--brand,#EE6F2D);--kd-brand2:#FF8A4C;--kd-ink2:#C4541A;--kd-soft:var(--soft,#FFE7DA);--kd-muted:var(--muted,#776C66);--kd-line:var(--line,#EADFD6);--kd-ok:#1E8E4E;--kd-oksoft:#E3F4EA;--kd-bad:#C0392B;--kd-tg:#2AABEE;
  position:relative;height:640px;display:flex;align-items:center;justify-content:center;color:var(--ink,#2B2321);font-family:inherit}
.kd *{box-sizing:border-box}
.kd button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.kd h3{margin:0;line-height:1.15}
.kd p{margin:0}
.kd .phone{position:relative;width:300px;height:620px;border-radius:52px;background:#1F1917;padding:12px;box-shadow:0 40px 80px -30px rgba(80,40,20,.45),0 0 0 2px #3a302c inset;z-index:2}
.kd .screen{position:relative;width:100%;height:100%;border-radius:41px;background:linear-gradient(#FFF5EE,#FFFFFF 38%);overflow:hidden;display:flex;flex-direction:column}
.kd .island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:27px;border-radius:20px;background:#1F1917;z-index:5}
.kd .status{display:flex;justify-content:space-between;padding:14px 26px 0;font-size:13px;font-weight:800;height:44px}
.kd .app-head{padding:6px 18px 0}
.kd .app-head .row{display:flex;align-items:center;justify-content:space-between}
.kd .app-head .ttl{font-weight:900;font-size:22px}
.kd .cnt{font-weight:800;font-size:13px;color:var(--kd-ink2);background:var(--kd-soft);padding:3px 10px;border-radius:99px}
.kd .bar{height:8px;border-radius:99px;background:#F1E6DE;margin-top:10px;overflow:hidden}
.kd .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--kd-brand),var(--kd-brand2));border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1)}
.kd .hint{margin:12px 18px 0;font-size:13px;font-weight:800;color:var(--kd-muted);text-align:center;min-height:20px}
.kd .deck{position:relative;flex:1;margin:10px 16px 0}
.kd .wcard{position:absolute;inset:0 0 8px;border-radius:24px;background:#fff;box-shadow:0 12px 30px -12px rgba(80,40,20,.3),0 0 0 1px #F1E6DE;padding:20px 18px;display:flex;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s}
.kd .wcard.drag{transition:none;cursor:grabbing}
.kd .wcard[data-depth="1"]{transform:translateY(12px) scale(.95);pointer-events:none}
.kd .wcard[data-depth="2"]{transform:translateY(24px) scale(.9);pointer-events:none;opacity:.7}
.kd .wcard[data-depth="3"]{transform:translateY(24px) scale(.9);opacity:0;pointer-events:none}
.kd .lvl{align-self:flex-start;font-size:12px;font-weight:900;padding:3px 10px;border-radius:99px;background:var(--kd-soft);color:var(--kd-ink2)}
.kd .word{font-size:36px;font-weight:900;margin-top:22px;letter-spacing:-.01em;line-height:1.1}
.kd .meta{color:var(--kd-muted);font-weight:700;font-size:14px;margin-top:4px;display:flex;align-items:center;gap:8px}
.kd .say{width:30px;height:30px;border-radius:50%;background:var(--kd-soft);display:inline-grid;place-items:center;color:var(--kd-brand)}
.kd .say svg{width:16px;height:16px}
.kd .reveal{display:none;margin-top:auto;border-top:1px dashed var(--kd-line);padding-top:14px}
.kd .tr{font-size:22px;font-weight:900;color:var(--kd-brand)}
.kd .ex{font-size:14px;margin-top:8px;font-weight:700}
.kd .ex-tr{font-size:13px;color:var(--kd-muted);margin-top:2px}
.kd .tap{margin-top:auto;text-align:center;color:var(--kd-muted);font-weight:800;font-size:13px;padding:14px;border-radius:14px;background:#FAF6F2}
.kd .wcard.open .reveal{display:block}.kd .wcard.open .tap{display:none}
.kd .stamp{position:absolute;top:22px;font-weight:900;font-size:18px;padding:4px 12px;border-radius:10px;border:3px solid;opacity:0;pointer-events:none}
.kd .stamp.yes{right:16px;color:var(--kd-ok);border-color:var(--kd-ok);transform:rotate(12deg)}
.kd .stamp.no{left:16px;color:var(--kd-bad);border-color:var(--kd-bad);transform:rotate(-12deg)}
.kd .acts{display:flex;justify-content:center;gap:26px;padding:14px 0 26px}
.kd .act{width:60px;height:60px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(80,40,20,.35),0 0 0 1px #F1E6DE;transition:transform .15s}
.kd .act:hover{transform:scale(1.07)}.kd .act:active{transform:scale(.95)}
.kd .act svg{width:26px;height:26px}
.kd .act.no{color:var(--kd-bad)}.kd .act.yes{color:#fff;background:var(--kd-ok);box-shadow:0 8px 20px -8px rgba(30,142,78,.7)}
.kd .done{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:linear-gradient(#FFF5EE,#fff);z-index:4}
.kd .done.show{display:flex;animation:kd-pop .45s cubic-bezier(.2,.8,.2,1)}
.kd .done .big{font-size:52px}
.kd .done h3{font-size:24px;font-weight:900;margin-top:8px}
.kd .done p{color:var(--kd-muted);font-weight:700;font-size:15px;margin-top:8px;line-height:1.45}
.kd .done .go{margin-top:20px;width:100%;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:var(--kd-brand);color:#fff;font-weight:900;text-decoration:none;box-shadow:0 10px 24px -10px rgba(238,111,45,.7)}
.kd .done .again{margin-top:12px;font-weight:800;color:var(--kd-muted);font-size:14px;text-decoration:underline}
@keyframes kd-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* floating chips around the phone */
.kd .chip{position:absolute;z-index:3;background:#fff;border-radius:18px;box-shadow:0 18px 40px -18px rgba(80,40,20,.35),0 0 0 1px #F1E6DE;padding:12px 14px;font-weight:800;font-size:14px;line-height:1.3;animation:kd-float 6s ease-in-out infinite;display:flex;align-items:center;gap:10px}
.kd .chip small{display:block;color:var(--kd-muted);font-weight:700;font-size:12px}
.kd .chip.widget{top:56px;left:calc(50% - 300px);width:150px;height:150px;border-radius:28px;padding:16px;background:linear-gradient(150deg,#FF8A4C,#EE6F2D);color:#fff;flex-direction:column;align-items:flex-start;gap:0;animation-delay:-2s}
.kd .chip.widget small{color:rgba(255,255,255,.85)}
.kd .chip.widget .w{font-size:24px;font-weight:900;margin-top:auto;line-height:1.1}
.kd .chip.widget .m{font-size:14px;font-weight:700;opacity:.95}
.kd .chip.quiz{top:150px;right:calc(50% - 300px)}
.kd .chip.quiz .ic{width:34px;height:34px;border-radius:50%;background:var(--kd-oksoft);color:var(--kd-ok);display:grid;place-items:center;font-size:18px}
.kd .chip.rank{bottom:90px;left:calc(50% - 290px);animation-delay:-4s}
.kd .chip.rank .ic{font-size:24px}
.kd .chip.tgc{bottom:150px;right:calc(50% - 290px);animation-delay:-3s}
.kd .chip.tgc .ic{width:34px;height:34px;border-radius:50%;background:var(--kd-tg);display:grid;place-items:center;color:#fff}
.kd .chip.tgc .ic svg{width:18px;height:18px}
@keyframes kd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.kd .nudge{animation:kd-nudge 1.6s ease-in-out 1}
@keyframes kd-nudge{0%,100%{transform:none}25%{transform:translateX(26px) rotate(4deg)}60%{transform:translateX(-18px) rotate(-3deg)}}

@media(max-width:960px){
  .kd{height:600px}
  .kd .chip.widget{left:max(0px,calc(50% - 250px));top:30px;width:124px;height:124px;padding:13px;border-radius:24px}
  .kd .chip.widget .w{font-size:20px}
  .kd .chip.quiz{right:max(0px,calc(50% - 250px));top:110px}
  .kd .chip.rank{left:max(0px,calc(50% - 250px));bottom:70px}
  .kd .chip.tgc{display:none}
}
@media(max-width:520px){
  .kd{height:auto;display:block;padding-top:64px}
  .kd .phone{width:270px;height:560px;border-radius:48px;padding:10px;margin:0 auto}
  .kd .screen{border-radius:39px}
  .kd .word{font-size:32px}
  .kd .chip{font-size:13px;padding:10px 12px}
  .kd .chip.widget{top:0;left:0;width:104px;height:104px;padding:11px}
  .kd .chip.widget .w{font-size:17px}.kd .chip.widget .m{font-size:12px}
  .kd .chip.quiz{top:18px;right:0;bottom:auto}
  .kd .chip.quiz .ic{width:28px;height:28px;font-size:15px}
  .kd .chip.rank{display:none}
}
@media(prefers-reduced-motion:reduce){.kd *{animation:none!important;transition:none!important}}