.uic {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    vertical-align: middle;
    --uic-ac: var(--accent);
}

.uic .ac-fill { fill: var(--uic-ac); stroke: none; }
.uic .ac-stroke { stroke: var(--uic-ac); }
.uic * { transform-box: fill-box; transform-origin: center; }


.uic *, .art-svg * { animation-play-state: paused !important; }
:is(.nav-btn, .category-header, .st-hero, .st-card, .st-link-card, .st-link-btn, .st-icon-btn, .insp-header, .st-block):hover :is(.uic, .art-svg) * {
    animation-play-state: running !important;
}

.uic-editor .k { animation: uic-key 1.8s ease-in-out infinite; }
.uic-editor .k2 { animation-delay: -0.45s; }
.uic-editor .k4 { animation-delay: -0.9s; }
.uic-editor .k3 { animation-delay: -1.35s; }
@keyframes uic-key { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.8); } }

.uic-devices .front { animation: uic-lift 1.4s ease-in-out infinite; }
.uic-devices .back { animation: uic-lift2 1.4s ease-in-out infinite reverse; }

.uic-sync .spin { animation: uic-spin 1.1s cubic-bezier(0.5, 0, 0.3, 1) infinite; transform-box: view-box; transform-origin: 12px 12px; }
@keyframes uic-spin { to { transform: rotate(180deg); } }

.uic-autostart .p { animation: uic-pop 1.6s ease-in-out infinite; }
.uic-autostart .p2 { animation-delay: 0.15s; }
.uic-autostart .p3 { animation-delay: 0.3s; }
.uic-autostart .p4 { animation-delay: 0.45s; }
@keyframes uic-pop { 0%, 60%, 100% { transform: scale(1); } 25% { transform: scale(0.72); } }

.uic-settings .knob { animation: uic-knob 1.6s ease-in-out infinite; }
.uic-settings .kn2 { animation-name: uic-knob2; }
.uic-settings .kn3 { animation-delay: -0.5s; }
@keyframes uic-knob { 50% { transform: translateX(-5px); } }
@keyframes uic-knob2 { 50% { transform: translateX(6px); } }

.uic-chip .core { animation: uic-core 1.2s steps(2) infinite; }
.uic-chip .pins { animation: uic-pins 1.2s ease-in-out infinite; }
@keyframes uic-core { 50% { opacity: 0.35; } }
@keyframes uic-pins { 50% { stroke: var(--uic-ac); } }

.uic-terminal .cursor { animation: uic-blink 1s steps(1) infinite; }
.uic-terminal .prompt { animation: uic-nudge 1s ease-in-out infinite; }
@keyframes uic-blink { 50% { opacity: 0; } }
@keyframes uic-nudge { 50% { transform: translateX(1.2px); } }

.uic-cloud .arrow { animation: uic-drop 1.1s ease-in-out infinite; }
@keyframes uic-drop { 0% { transform: translateY(-2.5px); opacity: 0.2; } 45%, 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(1.5px); opacity: 0; } }

.uic-info .dot { animation: uic-bounce 1s ease-in-out infinite; }
@keyframes uic-bounce { 50% { transform: translateY(-2px); } }

.uic-pointer .taps { animation: uic-blink 0.9s steps(1) infinite; }
.uic-pointer path:first-child { animation: uic-tap 0.9s ease-in-out infinite; }
@keyframes uic-tap { 40% { transform: translateY(1.5px) scale(0.96); } }

.uic-record .rec { animation: uic-rec 1.2s ease-in-out infinite; }
@keyframes uic-rec { 50% { transform: scale(0.65); opacity: 0.6; } }

.uic-media .play { animation: uic-play 1.2s ease-in-out infinite; }
@keyframes uic-play { 50% { transform: translateX(1.2px) scale(1.12); } }

.uic-widgets .w-dot { animation: uic-rec 1.6s ease-in-out infinite; }
.uic-widgets .w-line { stroke-dasharray: 12; animation: uic-draw 1.6s ease-in-out infinite; }
@keyframes uic-draw { 0% { stroke-dashoffset: 12; } 60%, 100% { stroke-dashoffset: 0; } }

.uic-mixer .fader { animation: uic-fader 1.4s ease-in-out infinite; }
.uic-mixer .f2 { animation-name: uic-fader2; }
.uic-mixer .f3 { animation-delay: -0.7s; }
@keyframes uic-fader { 50% { transform: translateY(-5px); } }
@keyframes uic-fader2 { 50% { transform: translateY(6px); } }

.uic-pages .pg1 { animation: uic-lift 1.4s ease-in-out infinite; }
.uic-pages .pg2 { animation: uic-lift2 1.4s ease-in-out infinite; }
@keyframes uic-lift { 50% { transform: translateY(-2px); } }
@keyframes uic-lift2 { 50% { transform: translateY(-1px); } }

.uic-camera .rec-dot { fill: var(--danger); stroke: none; animation: uic-blink 1s steps(1) infinite; }
.uic-camera .lens { animation: uic-play 1.4s ease-in-out infinite; }

.uic-warning .ac-fill, .uic-warning .ac-stroke { animation: uic-blink 1.2s steps(1) infinite; }

.uic-link .ac-stroke { animation: uic-link 1.4s ease-in-out infinite; }
@keyframes uic-link { 50% { transform: translate(-1.2px, 1.2px); } }

.uic-check .tick { stroke-dasharray: 12; animation: uic-draw 1.4s ease-in-out infinite; }
.uic-gift .bow { animation: uic-bounce 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .uic * { animation: none !important; }
}




.nav-btn .uic { width: 21px; height: 21px; stroke-width: 1.7; }
.nav-btn.active .uic { --uic-ac: var(--accent-hover); }


.category-header .uic { width: 15px; height: 15px; stroke-width: 2; --uic-ac: var(--cat-ac, var(--accent)); }


.st-ico .uic { width: 22px; height: 22px; stroke: var(--c, var(--accent)); --uic-ac: var(--c, var(--accent)); }

.st-hero-ico .uic { width: 30px; height: 30px; stroke: var(--c, var(--accent)); stroke-width: 1.9; --uic-ac: var(--c, var(--accent)); }
.st-hero-ico .uic .ac-fill { fill: var(--c, var(--accent)); }
.st-icon-btn .uic, .st-link-btn .uic { width: 16px; height: 16px; }


.art-svg { display: block; flex: none; }
.art-svg.anim-icon { width: auto; }


.st-hero-ico, .st-ico--pulse { animation-play-state: paused !important; }
.st-hero:hover .st-hero-ico, .st-card:hover .st-ico--pulse { animation-play-state: running !important; }