/*
 * Demo demo30 "UI kit" — pages 03 and 04: SVG icons (.ic) and UTF-8 glyphs (.gl), the page-wide
 * settings bar (.gbar) and the motion of the animated icons (classes ia-*).
 * Icon custom properties: --ic-c colour  --ic-c2 second colour  --ic-s size  --ic-w stroke  --ic-sp speed
 */
.grid--icons .cell { min-height: 118px; padding: 6px 8px 8px; border-radius: 12px; }
.grid--icons .cell__n { font-size: 11px; padding: 1px 5px; }
.grid--icons .cell__stage { padding: 10px 0; }
.grid--icons .cell__name { font-size: 10.5px; }
.grid--icons .cell__name span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid--icons .cell__name i { flex: none; }

/* page-wide settings bar */
.gbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; max-width: 1600px; margin: 0 auto;
    padding: 14px clamp(16px, 3vw, 40px);
}
.gbar__in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / .03); }
.gbar label { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .72); font-size: 13px; }
.gbar input[type="range"] { width: 110px; accent-color: var(--green-d); }
.gbar input[type="color"] { width: 34px; height: 26px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.gbar select { padding: 5px 8px; border: 1px solid rgb(255 255 255 / .16); border-radius: 6px; background: #26252a; color: #fff; }
.gbar output { min-width: 2.4em; color: var(--yellow); font: 12px var(--mono); }
.gbar button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mute); cursor: pointer; font-size: 12px; }
.gbar button:hover { color: #fff; }
.gbar__note { color: var(--mute); font-size: 13px; }
.gbar__note b { color: var(--green); }

/* ── SVG icon piece ───────────────────────────────────────────────────── */
.ic {
    --ic-c: #53f57e; --ic-c2: #3ad1ff; --ic-s: 32px; --ic-w: 2; --ic-sp: 1.2s;
    position: relative; display: inline-grid; place-items: center; color: var(--ic-c); cursor: copy;
    transition: transform .3s cubic-bezier(.3, .7, .3, 1.4);
}
.ic__svg { display: block; width: var(--ic-s); height: var(--ic-s); stroke-width: var(--ic-w); overflow: visible; }
.cell .ic:hover { transform: scale(1.15); }
.ic--duo .ic__svg { fill: color-mix(in srgb, var(--ic-c2) 28%, transparent); }
.ic--chip { padding: calc(var(--ic-s) * .38); border-radius: 50%; background: color-mix(in srgb, var(--ic-c) 14%, transparent); }
.ic--ring { padding: calc(var(--ic-s) * .34); border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ic-c) 55%, transparent); }
.ic--tile { padding: calc(var(--ic-s) * .34); border-radius: calc(var(--ic-s) * .3); background: linear-gradient(135deg, var(--ic-c), var(--ic-c2)); color: #18171a; box-shadow: 0 8px 20px -10px var(--ic-c); }
.ic--glow { filter: drop-shadow(0 0 6px var(--ic-c)) drop-shadow(0 0 2px var(--ic-c)); }
.ic--toggle { cursor: pointer; }

/* ── animated icons (ia-*) ────────────────────────────────────────────── */
.ia-spin, .ia-rot, .ia-iris, .ia-ring, .ia-flip, .ia-twinkle, .ia-beat, .ia-blink, .ia-scan, .ia-up, .ia-down, .ia-ping, .ia-rec, .ia-hand { transform-box: view-box; transform-origin: 12px 12px; }
.ia-spin { animation: ia-rot calc(var(--ic-sp) * .8) linear infinite; }
.ia-rot { animation: ia-rot calc(var(--ic-sp) * 1.4) linear infinite; }
.ia-rot--slow { animation-duration: calc(var(--ic-sp) * 5); }
@keyframes ia-rot { to { transform: rotate(360deg); } }
.ia-dot { animation: ia-dot var(--ic-sp) ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ia-dot:nth-of-type(2) { animation-delay: calc(var(--ic-sp) * .15); }
.ia-dot:nth-of-type(3) { animation-delay: calc(var(--ic-sp) * .3); }
@keyframes ia-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: 1; } }
.ia-tick { animation: ia-tick var(--ic-sp) linear infinite; animation-delay: calc(var(--ic-sp) * var(--i) / 12 - var(--ic-sp)); }
@keyframes ia-tick { 0% { opacity: 1; } 100% { opacity: .12; } }
.ia-ping { animation: ia-ping calc(var(--ic-sp) * 1.3) cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ia-ping { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.ia-beat { animation: ia-beat var(--ic-sp) ease-in-out infinite; fill: color-mix(in srgb, var(--ic-c) 30%, transparent); }
@keyframes ia-beat { 0%, 40%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 28% { transform: scale(1.05); } }
.ia-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: ia-draw calc(var(--ic-sp) * 2) ease-in-out infinite; }
.ia-draw--2 { animation-delay: calc(var(--ic-sp) * .3); }
@keyframes ia-draw { 0% { stroke-dashoffset: 30; } 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }
.ia-b1, .ia-b2, .ia-b3 { transform-box: view-box; transform-origin: 12px 12px; transition: transform .45s cubic-bezier(.6, 0, .2, 1.3), opacity .3s; }
.is-on .ia-b1 { transform: translateY(6px) rotate(45deg); }
.is-on .ia-b2 { opacity: 0; transform: scaleX(0); }
.is-on .ia-b3 { transform: translateY(-6px) rotate(-45deg); }
.ia-play, .ia-pause { transform-box: view-box; transform-origin: 12px 12px; transition: transform .4s cubic-bezier(.6, 0, .2, 1.3), opacity .3s; }
.ia-play { fill: currentColor; }
.ia-pause { opacity: 0; transform: scale(.4) rotate(-90deg); }
.is-on .ia-play { opacity: 0; transform: scale(.4) rotate(90deg); }
.is-on .ia-pause { opacity: 1; transform: none; }
.ia-ring { transform-origin: 12px 3px; animation: ia-ring calc(var(--ic-sp) * 2) ease-in-out infinite; }
@keyframes ia-ring { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(14deg); } 10%, 20%, 30% { transform: rotate(-14deg); } 35% { transform: rotate(4deg); } }
.ia-w1, .ia-w2, .ia-w3 { animation: ia-wifi calc(var(--ic-sp) * 1.5) ease-in-out infinite; }
.ia-w2 { animation-delay: calc(var(--ic-sp) * .2); }
.ia-w3 { animation-delay: calc(var(--ic-sp) * .4); }
@keyframes ia-wifi { 0%, 100% { opacity: .2; } 30%, 60% { opacity: 1; } }
.ia-eq { transform-box: fill-box; transform-origin: bottom; animation: ia-eq var(--ic-sp) ease-in-out infinite alternate; animation-delay: calc(var(--i) * var(--ic-sp) * -.37); }
@keyframes ia-eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.ia-up { animation: ia-up var(--ic-sp) ease-in-out infinite; }
.ia-down { animation: ia-down var(--ic-sp) ease-in-out infinite; }
@keyframes ia-up { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes ia-down { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
.ia-iris { animation: ia-iris calc(var(--ic-sp) * 3) ease-in-out infinite; }
@keyframes ia-iris { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(120deg) scale(.86); } }
.ia-blink { animation: ia-blink calc(var(--ic-sp) * 1.6) steps(1) infinite; }
@keyframes ia-blink { 0%, 100% { fill: transparent; } 8%, 16% { fill: currentColor; } 12% { fill: transparent; } }
.ia-twinkle { animation: ia-twinkle calc(var(--ic-sp) * 1.6) ease-in-out infinite; }
@keyframes ia-twinkle { 0%, 100% { transform: scale(1) rotate(0); fill: transparent; } 50% { transform: scale(.82) rotate(36deg); fill: color-mix(in srgb, var(--ic-c) 45%, transparent); } }
.ia-rec { animation: ia-rec var(--ic-sp) ease-in-out infinite; }
@keyframes ia-rec { 50% { opacity: .25; transform: scale(.8); } }
.ia-charge { transform-box: fill-box; transform-origin: left; animation: ia-charge calc(var(--ic-sp) * 2) steps(4) infinite; }
@keyframes ia-charge { from { transform: scaleX(0); } to { transform: scaleX(1.25); } }
.ia-hand { animation: ia-rot calc(var(--ic-sp) * 10) linear infinite; }
.ia-hand--m { animation-duration: calc(var(--ic-sp) * 1.6); }
.ia-flip { animation: ia-flip calc(var(--ic-sp) * 2) cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes ia-flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.ia-scan { animation: ia-scan calc(var(--ic-sp) * 2) ease-in-out infinite; }
@keyframes ia-scan { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2px, -2px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 2px); } }

/* ── UTF-8 glyph piece ────────────────────────────────────────────────── */
.gl {
    --gl-c: #f3f4f1; --gl-s: 34px; --gl-ff: "Lato", system-ui, sans-serif; --gl-c2: #53f57e;
    display: inline-grid; place-items: center; min-width: 1.2em; color: var(--gl-c); font: 400 var(--gl-s)/1 var(--gl-ff);
    cursor: copy; transition: transform .3s cubic-bezier(.3, .7, .3, 1.4), color .3s;
}
.cell .gl:hover { transform: scale(1.2); color: var(--gl-c2); }
.gl--grad { background: linear-gradient(135deg, var(--gl-c), var(--gl-c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl--glow { text-shadow: 0 0 10px var(--gl-c2), 0 0 2px var(--gl-c2); }
.gl--chip { width: 1.7em; height: 1.7em; border-radius: 50%; background: color-mix(in srgb, var(--gl-c2) 16%, transparent); font-size: calc(var(--gl-s) * .7); }
.gl--tile { width: 1.7em; height: 1.7em; border-radius: .35em; background: var(--gl-c2); color: #18171a; font-size: calc(var(--gl-s) * .7); }
.gl--outline { color: transparent; -webkit-text-stroke: 1px var(--gl-c); }