/* Inline SVG: hover on .tk-detailed-category, keyboard focus, or SVG hover. */
.tkci-icon{width:var(--tkci-icon-size,32px);height:var(--tkci-icon-size,32px);display:block;flex:none;overflow:visible}
.tkci-motion{transform-box:view-box;transform-origin:12px 12px}
.tkci-wheel-left{transform-origin:5px 18px}.tkci-wheel-right{transform-origin:19px 18px}
.tkci-slide{opacity:0;stroke-dasharray:2 18;stroke-dashoffset:20;stroke-width:3}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-compass{animation:tkci-compass .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-heart{animation:tkci-heart .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-walk{animation:tkci-walk .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-wheel{animation:tkci-wheel .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-sign{animation:tkci-sign .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-paw{animation:tkci-paw .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-slide{animation:tkci-slide .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-deer{animation:tkci-deer .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-train{animation:tkci-train .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-look{animation:tkci-look .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-ski{animation:tkci-ski .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-cave{animation:tkci-cave .85s ease-in-out 1}
.tk-detailed-category:not(.tkci-no-motion):is(:hover,:focus-visible) .tkci-castle{animation:tkci-castle .85s ease-in-out 1}

@keyframes tkci-compass{0%,100%{transform:rotate(0)}35%{transform:rotate(35deg)}70%{transform:rotate(-12deg)}}
@keyframes tkci-heart{0%,100%{transform:scale(1)}25%,60%{transform:scale(1.13)}43%,80%{transform:scale(1)}}
@keyframes tkci-walk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-.7px) rotate(-4deg)}65%{transform:translateY(-.4px) rotate(4deg)}}
@keyframes tkci-wheel{to{transform:rotate(360deg)}}
@keyframes tkci-sign{0%,100%{transform:translateX(0)}40%{transform:translateX(1.4px)}70%{transform:translateX(-.5px)}}
@keyframes tkci-paw{0%,100%{transform:rotate(0)}30%{transform:rotate(-12deg)}65%{transform:rotate(10deg)}}
@keyframes tkci-slide{0%{stroke-dashoffset:20;opacity:0}15%{opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes tkci-deer{0%,100%{transform:rotate(0)}35%{transform:rotate(-9deg)}70%{transform:rotate(5deg)}}
@keyframes tkci-train{0%,100%{transform:translateX(0)}35%{transform:translateX(1.5px)}70%{transform:translateX(-.6px)}}
@keyframes tkci-look{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}70%{transform:rotate(7deg)}}
@keyframes tkci-ski{0%,100%{transform:translate(0,0) rotate(0)}40%{transform:translate(1px,-1px) rotate(7deg)}70%{transform:translate(-.5px,.3px) rotate(-3deg)}}
@keyframes tkci-cave{0%,100%{opacity:1}45%{opacity:.28}75%{opacity:.8}}
@keyframes tkci-castle{0%,100%{transform:translateY(0)}40%{transform:translateY(-1px)}70%{transform:translateY(.35px)}}

@media(prefers-reduced-motion:reduce){.tk-detailed-category .tkci-motion,.tkci-icon .tkci-motion{animation:none!important}}

/* Fixed soft grey in every selection/hover state, matching the subdued category strip. */
body .tk-detailed-category .tkci-icon{width:24px;height:24px;flex:0 0 24px;color:#9a9fa5;fill:none;stroke:currentColor;stroke-width:2;background:none;padding:0;border-radius:0}
body.dark .tk-detailed-category .tkci-icon{color:#aeb4bc}
.tk-detailed-category:focus-visible{outline:2px solid #9a9fa5;outline-offset:3px}
@media(prefers-reduced-motion:reduce){body .tk-detailed-category{transition:none;transform:none}}

.tk-detailed-category.is-pending{cursor:progress}

/* Fade the content itself, so both light/dark and custom backgrounds blend naturally.
   Arrows stay outside the mask. At either endpoint that side becomes fully opaque. */
.tk-category-carousel .tk-detailed-categories{
    --tkci-fade-left:0px;
    --tkci-fade-right:0px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--tkci-fade-left),#000 calc(100% - var(--tkci-fade-right)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 var(--tkci-fade-left),#000 calc(100% - var(--tkci-fade-right)),transparent 100%);
    scroll-snap-type:none;
}
.tk-category-carousel.has-hidden-left .tk-detailed-categories{--tkci-fade-left:24px}
.tk-category-carousel.has-hidden-right .tk-detailed-categories{--tkci-fade-right:24px}
.tk-category-carousel.is-static .tk-detailed-categories{-webkit-mask-image:none;mask-image:none}
@media(prefers-reduced-motion:reduce){.tk-category-carousel .tk-detailed-categories{scroll-behavior:auto}}

@media(hover:hover) and (pointer:fine){
    .tk-category-carousel:not(.is-static) .tk-detailed-categories,
    .tk-category-carousel:not(.is-static) .tk-detailed-category{cursor:grab}
    .tk-category-carousel .tk-detailed-categories.is-dragging,
    .tk-category-carousel .tk-detailed-categories.is-dragging *{cursor:grabbing!important}
}
.tk-category-carousel .tk-detailed-categories{user-select:none;-webkit-user-select:none}
.tk-category-carousel .tk-detailed-category img{-webkit-user-drag:none}
/* Active category: match the white label on the green chip in both palettes. */
body .tk-detailed-category.is-active .tkci-icon,
body.dark .tk-detailed-category.is-active .tkci-icon{color:#fff}