/* ════════════════════════════════════════════════════════════════════════
   journey-study.css — the card session overlay (Phase E port of
   study-session.html's SESSION + card + actions + done). Scoped under #kjStudy
   (a full-screen overlay inside the .kj root; deep-dive content reuses .kj .dd-*).
   和の感性 floor: gold = saved-state amber + the ONE kintsugi recovery seam only.
   ════════════════════════════════════════════════════════════════════════ */

/* registered so the recall "develop" can interpolate the exposure/blur numerically */
@property --expose { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --blur { syntax: '<number>'; inherits: true; initial-value: 0; }

#kjStudy{
  --card:#FAFAF7; --paper:#F0EDE8;   /* study semantics: paper = warm stone bg, card = surface */
  --amber-deep:#7A5E1C; --romaji:#6B635C;
  --new:#3D5A80; --review:#9a5a48; --comeback:#6B7F5C;   /* mix palette: review=terracotta pressure, NOT gold */
  --jaccent:var(--accent); --radius-2xl:28px;
  position:fixed; inset:0; z-index:100; background:var(--paper); color:var(--ink);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  font-family:var(--font-ui);
}
#kjStudy.on{opacity:1; pointer-events:auto;}

#kjStudy .kjs-session{position:absolute; inset:0; display:flex; flex-direction:column; background:var(--paper);}
#kjStudy .s-top{flex:0 0 auto; padding:calc(env(safe-area-inset-top,0px) + 16px) var(--side) 0; display:flex; align-items:center; justify-content:space-between; gap:12px;}
#kjStudy .s-exit{width:34px; height:34px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--stone);}
#kjStudy .s-title{flex:1; min-width:0; text-align:center;}
#kjStudy .s-title b{display:block; font-family:var(--font-jp); font-size:15px; font-weight:600; color:var(--ink); line-height:1.1;}
#kjStudy .s-title small{display:block; font-size:10px; color:var(--faint); font-weight:600; letter-spacing:.3px; margin-top:1px;}
#kjStudy .s-count{flex:0 0 auto; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--faint); min-width:42px; text-align:right;}
#kjStudy .s-count b{color:var(--ink);}

/* dot strip — provenance of the mix */
#kjStudy .dots{flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px; padding:16px var(--side) 12px; flex-wrap:nowrap;}
#kjStudy .dots .d{width:9px; height:9px; border-radius:50%; flex:0 0 auto; position:relative; background:transparent; box-shadow:inset 0 0 0 1.6px var(--dc);
  transition:width .35s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), opacity .35s var(--ease);}
#kjStudy .dots .d.s-new{--dc:var(--new);} #kjStudy .dots .d.s-review{--dc:var(--review);} #kjStudy .dots .d.s-comeback{--dc:var(--comeback);}
#kjStudy .dots .d.done{background:var(--dc); box-shadow:none; opacity:.5;}
#kjStudy .dots .d.cur{width:24px; border-radius:var(--radius-full); background:var(--dc); box-shadow:none; opacity:1;}
#kjStudy .dots .d.recovered{--dc:var(--gold); opacity:.85;}

/* card stage / carousel */
#kjStudy .stage{flex:1; position:relative; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none;}
#kjStudy .deck{position:absolute; top:0; bottom:0; left:0; display:flex; align-items:center; will-change:transform; transition:transform .5s var(--ease);}

/* over-swipe-forward-past-the-last-card hint → release ends the session */
#kjStudy .endpull{position:absolute; top:50%; right:12px; transform:translateY(-50%) translateX(10px); z-index:5; pointer-events:none; opacity:0; transition:opacity .22s var(--ease), transform .22s var(--ease);}
#kjStudy .endpull.show{opacity:1; transform:translateY(-50%) translateX(0);}
#kjStudy .endpull span{writing-mode:vertical-rl; font-size:11px; font-weight:700; letter-spacing:2.4px; text-transform:uppercase; color:var(--stone);}
#kjStudy .scard{flex:0 0 300px; height:calc(100% - 30px); margin-right:16px; border-radius:var(--radius-2xl); position:relative; overflow:hidden;
  background:#cdc4b4; box-shadow:var(--shadow-card); transform:scale(.9); opacity:.45; transition:transform .5s var(--ease), opacity .5s var(--ease);}
#kjStudy .scard.is-center{transform:scale(1); opacity:1;}
#kjStudy .scard .photo{position:absolute; inset:0; background-size:cover; background-position:center; --expose:1; --blur:0;
  filter:brightness(calc(.58 + .42*var(--expose))) saturate(calc(.78 + .42*var(--expose))) blur(calc(var(--blur)*1px));
  transition:--expose .55s var(--ease), --blur .92s cubic-bezier(.22,.61,.18,1), transform 9s var(--ease);}
#kjStudy .scard .tint{position:absolute; inset:0; background:linear-gradient(to top, rgba(16,11,7,.82) 0%, rgba(22,16,10,.5) 30%, rgba(34,26,17,.12) 56%, rgba(34,26,17,0) 74%);}
#kjStudy .scard .warm{position:absolute; inset:0; background:rgba(120,86,40,.08); mix-blend-mode:multiply;}
#kjStudy .scard .grain{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,250,240,.045) 1px, transparent 1px); background-size:3px 3px;}
#kjStudy .scard{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}

/* no backdrop-filter on the deck chrome — the deck translateX-animates during swipe, and
   backdrop-filter inside a transforming element flashes black on iOS Safari (solid bg instead) */
#kjStudy .scard .pill{position:absolute; top:15px; left:15px; z-index:4; display:flex; align-items:center; gap:7px; padding:6px 12px 6px 9px; border-radius:var(--radius-full);
  background:rgba(20,15,10,.52); color:#fdfaf3; font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
#kjStudy .scard .pill .pd{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
#kjStudy .scard.s-new .pill .pd{background:var(--new);} #kjStudy .scard.s-review .pill .pd{background:var(--review);} #kjStudy .scard.s-comeback .pill .pd{background:var(--comeback);}
#kjStudy .scard .aud{position:absolute; top:15px; right:15px; z-index:4; width:38px; height:38px; border-radius:50%;
  background:rgba(20,15,10,.5); display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:transform .2s var(--ease);}
#kjStudy .scard .aud:active{transform:scale(.9);}
#kjStudy .scard .aud svg{fill:#fdfaf3;}
#kjStudy .scard .aud.playing::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid rgba(253,250,243,.7); pointer-events:none; animation:audioPulse .72s var(--ease) forwards;}
@keyframes audioPulse{0%{transform:scale(1); opacity:.65;} 100%{transform:scale(2); opacity:0;}}

/* recall PROMPT face (English only) */
#kjStudy .scard .prompt{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 26px; transition:opacity .4s var(--ease);}
#kjStudy .scard .prompt .reticle{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:188px; height:140px; pointer-events:none; opacity:.5;}
#kjStudy .scard .prompt .reticle i{position:absolute; width:15px; height:15px; border:1.5px solid color-mix(in srgb, var(--jaccent) 58%, rgba(255,253,248,.85));}
#kjStudy .scard .prompt .reticle i:nth-child(1){top:0; left:0; border-right:none; border-bottom:none;}
#kjStudy .scard .prompt .reticle i:nth-child(2){top:0; right:0; border-left:none; border-bottom:none;}
#kjStudy .scard .prompt .reticle i:nth-child(3){bottom:0; left:0; border-right:none; border-top:none;}
#kjStudy .scard .prompt .reticle i:nth-child(4){bottom:0; right:0; border-left:none; border-top:none;}
#kjStudy .scard .prompt .meaning{font-size:24px; font-weight:700; color:#fff; line-height:1.25; letter-spacing:-.2px; text-shadow:0 2px 14px rgba(8,5,3,.6);}
#kjStudy .scard .prompt .hint{margin-top:26px; font-size:11px; font-weight:600; letter-spacing:.4px; color:rgba(255,253,248,.82); display:flex; align-items:center; gap:7px;}
#kjStudy .scard .prompt .hint::before{content:""; width:13px; height:13px; border-radius:50%; border:1.5px solid color-mix(in srgb, var(--jaccent) 58%, rgba(255,253,248,.9));}
#kjStudy .scard.revealed .prompt{opacity:0; pointer-events:none;}

/* ANSWER face */
#kjStudy .scard .answer{position:absolute; left:20px; right:20px; bottom:22px; z-index:3; color:#fff; opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease);}
#kjStudy .scard.revealed .answer, #kjStudy .scard.s-new .answer{opacity:1; transform:none;}
#kjStudy .scard.revealed .answer{transition-delay:.16s;}
/* opacity:1 + display:block override the global `.char,.letter,.word{display:inline-block;opacity:0}`
   in animations.css (video-mode word reveal) — `.word` is a generic class and would hide the headword */
#kjStudy .scard .answer .word{font-family:var(--font-jp); font-size:40px; font-weight:600; line-height:1.12; text-shadow:0 2px 12px rgba(8,5,3,.6); font-feature-settings:'palt' 1; opacity:1; display:block;}
#kjStudy .scard .answer[data-len="long"] .word{font-size:32px;}
#kjStudy .scard .answer .word.has-ruby{padding-top:.7em;}
#kjStudy .scard .answer .word .ruby-group{display:inline; position:relative;}
#kjStudy .scard .answer .word .ruby-rt{display:block; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); min-width:100%; width:max-content; white-space:nowrap; font-size:.38em; font-weight:600; line-height:1; color:rgba(248,241,230,.84); text-align:center; padding-bottom:.16em; text-shadow:0 1px 5px rgba(8,5,3,.8);}
#kjStudy .scard .answer .romaji{font-size:12px; font-weight:500; color:rgba(248,241,230,.78); letter-spacing:.4px; margin-top:6px;}
#kjStudy .scard .answer .gloss{font-size:14px; font-weight:600; color:#fff; margin-top:11px; padding-top:11px; border-top:1px solid rgba(255,255,255,.18); line-height:1.4; text-shadow:0 1px 8px rgba(8,5,3,.6);}
/* "More" affordance — tap the (revealed) card to open the full reading */
#kjStudy .scard .answer .xmore{display:flex; align-items:center; justify-content:center; gap:5px; margin-top:13px; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,253,248,.72);}
#kjStudy .scard .answer .xmore svg{opacity:.85;}
#kjStudy .scard:not(.is-center) .answer .xmore{opacity:0;}

/* develop-to-recall: veil while recalling, develop into focus on reveal */
#kjStudy .scard.s-review:not(.revealed) .photo, #kjStudy .scard.s-comeback:not(.revealed) .photo{--expose:0; --blur:4.5;}
#kjStudy .scard.is-center.revealed .photo, #kjStudy .scard.is-center.s-new .photo{transform:scale(1.05);}

/* kintsugi seam — only when a Coming-back card is Learned */
#kjStudy .scard .kintsugi{position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .3s var(--ease);}
#kjStudy .scard.recovered .kintsugi{opacity:1;}
#kjStudy .scard .kintsugi path{fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(120,86,40,.5)); stroke-dasharray:640; stroke-dashoffset:640;}
#kjStudy .scard.recovered .kintsugi path{animation:seam .82s var(--ease) .12s forwards;}
@keyframes seam{to{stroke-dashoffset:0;}}

/* graded hanko stamp */
#kjStudy .scard .stamp{position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; color:#eef0ea;}
#kjStudy .scard.stamped .stamp{animation:stampIn .34s cubic-bezier(.34,.9,.36,1) forwards;}
@keyframes stampIn{0%{opacity:0; transform:translateY(-9px) scale(1.06);} 40%{opacity:1; transform:translateY(2px) scale(.985);} 70%{transform:translateY(0) scale(1.004);} 100%{opacity:1; transform:translateY(0) scale(1);}}
#kjStudy .scard .stamp b{font-family:var(--font-jp); font-size:23px; font-weight:600; color:inherit; width:118px; height:118px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.15; border:2px solid currentColor; background:rgba(20,15,10,.16); text-shadow:0 1px 6px rgba(8,5,3,.55);}
#kjStudy .scard .stamp::after{content:""; position:absolute; top:50%; left:50%; width:118px; height:118px; margin:-59px 0 0 -59px; border-radius:50%; border:1.5px solid currentColor; opacity:0; pointer-events:none;}
#kjStudy .scard.stamped .stamp::after{animation:inkBleed .5s cubic-bezier(.22,.61,.18,1) forwards;}
@keyframes inkBleed{0%{opacity:0; transform:scale(.94);} 22%{opacity:.34;} 100%{opacity:0; transform:scale(1.34);}}
#kjStudy .scard[data-stamp="learned"] .stamp{color:#b6c9a4;}
#kjStudy .scard.recovered .stamp{color:var(--gold);}
#kjStudy .scard[data-stamp="saved"] .stamp{color:var(--gold);}

/* action bar */
#kjStudy .actions{flex:0 0 auto; position:relative; z-index:40; background:var(--paper); display:flex; align-items:stretch; gap:10px; padding:14px var(--side) calc(30px + env(safe-area-inset-bottom,0px));}
#kjStudy .act{flex:1; border:1px solid transparent; border-radius:var(--radius-full); padding:14px 6px; display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-ui); font-size:13.5px; font-weight:600; line-height:1; transition:transform .18s var(--ease), opacity .3s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);}
#kjStudy .act:active{transform:scale(.97);}
#kjStudy .act svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto;}
#kjStudy .act-save{background:rgba(201,169,110,.15); color:var(--amber-deep); border-color:rgba(201,169,110,.5);}
#kjStudy .act-learn{background:var(--moss); color:#fff; border-color:var(--moss); box-shadow:0 3px 12px rgba(107,127,92,.28);}
#kjStudy .actions.need-reveal .act-learn, #kjStudy .actions.need-reveal .act-save{opacity:.4; pointer-events:none;}

/* ── full-screen reading view (expand) — the tapped card grows into this; the
      old Explore content (forms / examples / related) is folded in below the hero.
      content rendered via JourneyDetail.renderDeep → .kj .dd-* ── */
/* calm fade + uniform scale — NOT a FLIP-from-rect (that was janky on iOS) and no
   backdrop-filter on any moving chrome (backdrop-filter inside an animating element
   flashes black on iOS Safari). The whole panel (hero photo + reading) fades as one. */
#kjStudy #kjExpand{position:absolute; inset:0; z-index:60; display:none; flex-direction:column; overflow:hidden;
  background:var(--paper); opacity:0; transform:scale(.965); transform-origin:50% 42%;
  transition:opacity .3s ease, transform .32s cubic-bezier(.2,.7,.2,1);}
#kjStudy #kjExpand.open{display:flex;}
#kjStudy #kjExpand.in{opacity:1; transform:none;}

/* hero: full-bleed image like the card, headword overlaid at the foot */
#kjStudy .xp-hero{position:relative; flex:0 0 auto; height:42%; min-height:236px; overflow:hidden; background:#cdc4b4; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;}
#kjStudy .xp-photo{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.92) saturate(1);}
#kjStudy .xp-warm{position:absolute; inset:0; background:rgba(120,86,40,.08); mix-blend-mode:multiply;}
#kjStudy .xp-tint{position:absolute; inset:0; background:linear-gradient(to top, rgba(16,11,7,.86) 0%, rgba(22,16,10,.42) 36%, rgba(34,26,17,.06) 64%, rgba(34,26,17,0) 82%);}
#kjStudy .xp-grain{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,250,240,.045) 1px, transparent 1px); background-size:3px 3px;}
#kjStudy .xp-close{position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); left:14px; z-index:4; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fdfaf3; background:rgba(20,15,10,.52); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);}
#kjStudy .xp-aud{position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px; z-index:4; width:38px; height:38px; border-radius:50%; background:rgba(20,15,10,.5); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:transform .2s var(--ease);}
#kjStudy .xp-aud svg{fill:#fdfaf3;}
#kjStudy .xp-aud:active{transform:scale(.9);}
#kjStudy .xp-aud.playing::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid rgba(253,250,243,.7); pointer-events:none; animation:audioPulse .72s var(--ease) forwards;}
/* state chip — anchored to the hero's bottom-right corner, balancing the word block at bottom-left */
#kjStudy .xp-st{position:absolute; right:18px; bottom:20px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 8px; border-radius:var(--radius-full); background:rgba(20,15,10,.58); color:#fdfaf3; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); text-shadow:none;}
#kjStudy .xp-st .pd{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
#kjStudy .xp-st.s-new .pd{background:var(--new);} #kjStudy .xp-st.s-review .pd{background:var(--review);} #kjStudy .xp-st.s-comeback .pd{background:var(--comeback);}
#kjStudy .xp-word{position:absolute; left:20px; right:20px; bottom:20px; z-index:3; color:#fff;}
/* opacity:1 + display:block override the global `.char,.letter,.word{display:inline-block;opacity:0}`
   in animations.css (video-mode word reveal) — `.word` is generic and would hide the headword */
#kjStudy .xp-word .word{font-family:var(--font-jp); font-size:38px; font-weight:600; line-height:1.12; text-shadow:0 2px 12px rgba(8,5,3,.6); font-feature-settings:'palt' 1; opacity:1; display:block;}
#kjStudy .xp-word .word.has-ruby{padding-top:.7em;}
#kjStudy .xp-word .word .ruby-group{display:inline; position:relative;}
#kjStudy .xp-word .word .ruby-rt{display:block; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); min-width:100%; width:max-content; white-space:nowrap; font-size:.46em; font-weight:700; line-height:1; color:#fdfaf3; text-align:center; padding-bottom:.18em; text-shadow:0 1px 6px rgba(8,5,3,.95), 0 0 2px rgba(8,5,3,.6);}
#kjStudy .xp-word .romaji{font-size:12px; font-weight:500; color:rgba(248,241,230,.8); letter-spacing:.4px; margin-top:6px;}
#kjStudy .xp-word .gloss{font-size:15px; font-weight:600; color:#fff; margin-top:9px; line-height:1.4; text-shadow:0 1px 8px rgba(8,5,3,.6);}

/* body: scrollable reading (reuses .kj .dd-*) */
#kjStudy .xp-body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; touch-action:pan-y; padding:2px var(--side) calc(34px + env(safe-area-inset-bottom,0px));}
#kjStudy .xp-body::-webkit-scrollbar{display:none;}
#kjStudy .xp-body .dd-sec{padding:20px 0 0;}
#kjStudy .xp-body > .dd-secs > .dd-sec:first-child{padding-top:12px;}
#kjStudy .xp-body > .dd-note{padding:24px 0 4px; text-align:center;}

/* (content no longer fades separately — it rides the single panel fade above, so
   there is no backdrop-filter layer animating its own opacity → no iOS black flash) */

/* done bookend */
#kjStudy #kjDone{position:absolute; inset:0; z-index:80; background:var(--paper); color:var(--ink); display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:opacity .5s var(--ease);}
#kjStudy #kjDone.show{opacity:1; pointer-events:auto;}
#kjStudy .done-plate{position:relative; flex:0 0 auto; height:33%; overflow:hidden; background:#cdc4b4;}
#kjStudy .done-plate .ph{position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.82) saturate(.72) sepia(.05);}
#kjStudy .done-plate .grain{position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(255,250,240,.05) 1px, transparent 1px); background-size:3px 3px;}
#kjStudy .done-plate::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom, rgba(240,237,232,0) 30%, rgba(240,237,232,.74) 74%, var(--paper) 100%);}
#kjStudy .done-inner{flex:1; min-height:0; position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%; padding:2px 30px 34px;}
#kjStudy .done-eyebrow{font-size:10px; letter-spacing:2.4px; text-transform:uppercase; font-weight:700; color:var(--faint); margin-bottom:13px;}
#kjStudy .done-seal{width:66px; height:66px; border-radius:50%; border:2px solid var(--stone); display:flex; align-items:center; justify-content:center; font-family:var(--font-jp); font-size:28px; color:var(--stone); margin-bottom:18px;}
#kjStudy #kjDone.had-recovery .done-seal{border-color:var(--gold); color:var(--gold);}
#kjStudy #kjDone h2{font-family:var(--font-jp); font-size:26px; font-weight:600; line-height:1.25; color:var(--ink);}
#kjStudy #kjDone .romaji{font-size:12px; color:var(--romaji); font-weight:500; letter-spacing:.6px; margin-top:6px;}
#kjStudy #kjDone .lead{font-size:13px; color:var(--faint); font-weight:500; margin-top:12px; max-width:264px; line-height:1.5;}
#kjStudy .done-tally{display:flex; margin-top:22px; width:100%; max-width:300px; border-radius:var(--radius-lg); overflow:hidden; background:var(--card); box-shadow:inset 0 0 0 1px var(--divider);}
#kjStudy .done-tally .t{flex:1; padding:13px 6px; position:relative;}
#kjStudy .done-tally .t + .t::before{content:""; position:absolute; left:0; top:22%; bottom:22%; width:1px; background:var(--divider);}
#kjStudy .done-tally .t .n{font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;}
#kjStudy .done-tally .t.learned .n{color:var(--moss);} #kjStudy .done-tally .t.saved .n{color:var(--amber-deep);}
#kjStudy #kjDone:not(.had-recovery) .done-tally .n{color:var(--ink);}
#kjStudy .done-tally .t .lab{font-size:10px; font-weight:600; color:var(--stone); margin-top:6px; letter-spacing:.4px;}
#kjStudy .done-tally .t .lab em{font-style:normal; display:block; font-family:var(--font-jp); font-size:11px; color:var(--faint); margin-top:2px;}
#kjStudy .done-link{margin-top:13px; background:transparent; cursor:pointer; color:var(--stone); font-size:12.5px; font-weight:600;}
#kjStudy .done-link.sm{margin-top:8px; font-size:11.5px; opacity:.85;}
#kjStudy .done-link.as-primary{margin-top:22px; width:100%; max-width:300px; padding:13px; border-radius:var(--radius-full); background:var(--accent); color:#fff; box-shadow:0 4px 14px rgba(28,22,14,.14);}

@media (prefers-reduced-motion: reduce){
  #kjStudy *{animation-duration:.001s !important; transition-duration:.08s !important;}
  #kjStudy .scard .photo{transition:filter .08s !important;}
}