.tanecik-logo .logo-dark{display:none}.dark .tanecik-logo{color:#fff}.dark .tanecik-logo .logo-light{display:none}.dark .tanecik-logo .logo-dark{display:inline}
.layout-demo-viewport{container-type:inline-size}.layout-demo-content{padding:12px}.layout-demo-desktop,.layout-demo-detail{display:none}.layout-demo-cards{gap:12px;margin-block:16px;display:grid}.layout-demo-actions{flex-direction:column;gap:8px;display:flex}@container (min-width:640px){.layout-demo-content{padding:24px}.layout-demo-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-demo-actions{flex-direction:row;justify-content:flex-end}}@container (min-width:768px){.layout-demo-desktop,.layout-demo-detail{display:block}.layout-demo-mobile{display:none}.layout-demo-detail{margin-top:12px}}@container (min-width:1024px){.layout-demo-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.layout-demo-content{padding:32px;font-size:14px}}
.tanecik-icon[data-active=true]>svg{animation-duration:var(--icon-duration,1s);transform-origin:50%;animation-iteration-count:infinite;animation-play-state:paused}.tanecik-icon[data-active=true][data-trigger=always]>svg,.tanecik-icon[data-active=true]:hover>svg,.tanecik-icon[data-active=true]:focus-visible>svg{animation-play-state:running}.tanecik-icon[data-effect=spin]>svg{animation-name:tanecik-spin;animation-timing-function:linear}.tanecik-icon[data-effect=pulse]>svg{animation-name:tanecik-pulse}.tanecik-icon[data-effect=bounce]>svg{animation-name:tanecik-bounce}.tanecik-icon[data-effect=ring]>svg{animation-name:tanecik-ring}.tanecik-icon[data-effect=float]>svg{animation-name:tanecik-float}.tanecik-icon[data-effect=draw]>svg{stroke-dasharray:100;animation-name:tanecik-draw}@keyframes tanecik-spin{to{transform:rotate(360deg)}}@keyframes tanecik-pulse{50%{opacity:.6;transform:scale(1.18)}}@keyframes tanecik-bounce{35%{transform:translateY(-5px)}65%{transform:translateY(1px)}}@keyframes tanecik-ring{15%,45%{transform:rotate(16deg)}30%,60%{transform:rotate(-16deg)}80%{transform:rotate(0)}}@keyframes tanecik-float{50%{transform:translateY(-4px)rotate(6deg)}}@keyframes tanecik-draw{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.tanecik-icon>svg{animation:none!important;transform:none!important}}