@layer tokiline.preset{@property --toki-kinen-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.toki-timeline[data-preset=kinen]{--toki-accent:oklch(79% .12 85);--toki-line-color:color-mix(in oklab, var(--toki-accent) 42%, transparent);--toki-marker-bg:var(--toki-accent);--toki-marker-fg:Canvas;--toki-marker-ring-color:Canvas;--toki-card-bg:color-mix(in oklab, var(--toki-accent) 8%, Canvas);--toki-card-border:1px solid color-mix(in oklab, var(--toki-accent) 38%, transparent);--toki-card-shadow:0 1px 2px color-mix(in oklab, var(--toki-accent) 24%, transparent);--toki-meta-fg:color-mix(in oklab, currentColor 70%, var(--toki-accent))}.toki-timeline[data-preset=kinen]>.toki-item:not([data-variant=compact])[data-status=current]>.toki-card{background-image:linear-gradient(var(--toki-card-bg,color-mix(in oklab, currentColor 6%, Canvas)), var(--toki-card-bg,color-mix(in oklab, currentColor 6%, Canvas))), conic-gradient(from var(--toki-kinen-angle,0deg), color-mix(in oklab, var(--toki-accent) 42%, transparent) 0deg, color-mix(in oklab, var(--toki-accent) 42%, transparent) 250deg, color-mix(in oklab, var(--toki-accent) 70%, currentColor) 300deg, color-mix(in oklab, var(--toki-accent) 42%, transparent) 350deg, color-mix(in oklab, var(--toki-accent) 42%, transparent) 1turn);background-origin:padding-box,border-box;background-clip:padding-box,border-box;border-color:#0000}.toki-timeline[data-preset=kinen]>.toki-item:not([data-variant=compact])>.toki-card:after{content:"";border-radius:inherit;box-shadow:0 .6rem 1.2rem color-mix(in oklab, var(--toki-accent) 40%, transparent);opacity:0;pointer-events:none;position:absolute;inset:0}.toki-timeline[data-preset=kinen]>.toki-item[data-status=current]>.toki-meta{position:relative;overflow:hidden}.toki-timeline[data-preset=kinen]>.toki-item[data-status=current]>.toki-meta:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--toki-accent) 80%, currentColor 20%), transparent);mix-blend-mode:color;opacity:.8;pointer-events:none;inline-size:40%;translate:calc(-120% * var(--_kinen-sheen-direction,1)) 0;position:absolute;inset-block:0;inset-inline-start:0}.toki-timeline[data-preset=kinen]>.toki-item[data-status=current]>.toki-meta:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)):after{--_kinen-sheen-direction:-1}@keyframes toki-kinen-ring{0%{--toki-kinen-angle:0deg}to{--toki-kinen-angle:1turn}}@keyframes toki-kinen-sheen{0%,55%{translate:calc(-120% * var(--_kinen-sheen-direction,1)) 0}85%,to{translate:calc(320% * var(--_kinen-sheen-direction,1)) 0}}@media (prefers-reduced-motion:no-preference){.toki-timeline[data-preset=kinen]>.toki-item>.toki-card{transition:translate .18s}.toki-timeline[data-preset=kinen]>.toki-item>.toki-card:after{transition:opacity .18s}.toki-timeline[data-preset=kinen]>.toki-item>.toki-card:is(:hover,:focus-within){translate:0 -.25rem}.toki-timeline[data-preset=kinen]>.toki-item>.toki-card:is(:hover,:focus-within):after{opacity:1}.toki-timeline[data-preset=kinen]>.toki-item:not([data-variant=compact])[data-status=current]>.toki-card{animation:7s linear infinite toki-kinen-ring}.toki-timeline[data-preset=kinen]>.toki-item[data-status=current]>.toki-meta:after{animation:7s ease-in-out infinite toki-kinen-sheen}}}
