/* Shiba Kuro's looping video scenes, framed as a circle (see kuro-loop.html). */
.kuro-loop{position:relative;width:100%;max-width:var(--kuro-size,280px);margin-inline:auto}
.kuro-loop[hidden]{display:none}
.kuro-loop-frame{aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--color-paper-3);box-shadow:0 0 0 1px color-mix(in oklch,var(--color-ink) 8%,transparent)}
.kuro-loop-frame video{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
:root[data-theme=dark] .kuro-loop-frame video{filter:brightness(.9)}

/* Test and practice results: the passed / not passed scene beside the score. */
.kuro-result{--kuro-size:180px;flex-shrink:0}
/* A flashcard test or a learning-space question set ends like the result page:
 * Kuro on the left, the outcome line, the counts and the action beside it. */
.flashcard-complete-mark[hidden]{display:none}
.flashcard-complete:has(.kuro-result:not([hidden])),.nb-summary:has(.kuro-result:not([hidden])){display:grid;grid-template-columns:168px minmax(0,1fr);column-gap:28px;row-gap:8px;align-items:center;justify-items:start;text-align:left;padding:8px 4px}
:is(.flashcard-complete,.nb-summary) .kuro-result{--kuro-size:168px;grid-column:1;grid-row:1/span 3;margin:0}
:is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>:not(.kuro-result){grid-column:2;margin:0}
.flashcard-complete:has(.kuro-result:not([hidden])) h4,.nb-summary:has(.kuro-result:not([hidden])) h2{align-self:end;font-size:20px;font-weight:500;line-height:1.35;text-wrap:balance}
:is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>:last-child{align-self:start;justify-self:start}
.flashcard-complete:has(.kuro-result:not([hidden])) .flashcard-summary{margin:0;color:var(--color-muted)}
.nb-summary:has(.kuro-result:not([hidden])) .nb-actions{justify-content:flex-start}
@media(max-width:639px){
 .flashcard-complete:has(.kuro-result:not([hidden])),.nb-summary:has(.kuro-result:not([hidden])){grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
 :is(.flashcard-complete,.nb-summary) .kuro-result{--kuro-size:156px;grid-row:1}
 :is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>:not(.kuro-result){grid-column:1}
 :is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>:last-child{justify-self:center}
 .nb-summary:has(.kuro-result:not([hidden])) .nb-actions{justify-content:center}
}

/* Upgrade hero: the membership scene keeps its wide frame (sized in checkout.css). */
.upgrade-hero-art.kuro-loop{max-width:none;margin:0}
.upgrade-hero-art video{display:block}

/* A passed flashcard test or question set gets the same 合格 stamp as the
 * result sheet (progress-calendar.css), smaller and beside Kuro. */
.kuro-hanko{--stamp:color-mix(in oklch,oklch(55% .2 27),oklch(69% .16 27) var(--dark-mix));position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border:2.5px solid var(--stamp);border-radius:50%;color:var(--stamp);background:color-mix(in oklch,var(--stamp) 10%,var(--color-surface));font:700 14px/1 var(--font-japanese);letter-spacing:-.04em;transform:rotate(-14deg);pointer-events:none;animation:kuro-stamp .5s cubic-bezier(.2,.9,.3,1.3) .3s both}
.kuro-hanko[hidden]{display:none}
/* It shares Kuro's grid cell and sits on the circle's upper right. */
:is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>.kuro-hanko{grid-column:1;grid-row:1;justify-self:end;align-self:start;margin:-4px -12px 0 0}
@keyframes kuro-stamp{0%{opacity:0;transform:rotate(-14deg) scale(1.8)}60%{opacity:1;transform:rotate(-14deg) scale(.92)}100%{opacity:1;transform:rotate(-14deg) scale(1)}}
@media(max-width:639px){:is(.flashcard-complete,.nb-summary):has(.kuro-result:not([hidden]))>.kuro-hanko{grid-column:1;justify-self:center;margin:-4px -150px 0 0}}
@media(prefers-reduced-motion:reduce){.kuro-hanko{animation:none}}