/* UX taxonomy previews (.x-ux-*). Builds on .d-* from demos.css. */
.x-ux-scr { position: relative; width: 228px; height: 112px; border: 1px solid #2a2a31; border-radius: 8px; overflow: hidden; background: #131317; font: 10px/1.2 var(--sans); color: var(--text-2); box-sizing: border-box; }
.x-ux-scr.ph { width: 86px; }
.x-ux-scr.nb { border-color: transparent; background: transparent; }
.x-ux-lab { font: 9px/1 var(--mono); color: var(--key); letter-spacing: .04em; text-align: center; white-space: nowrap; }
.x-ux-a { position: absolute; box-sizing: border-box; }
.x-ux-sk { display: block; height: 5px; border-radius: 3px; background: #2a2a31; margin: 5px 0; }
.x-ux-t { font: 10px/1.2 var(--sans); color: var(--text-2); white-space: nowrap; }
.x-ux-b { color: var(--text); font-weight: 600; }
.x-ux-k { color: var(--key); }
.x-ux-m { color: var(--muted); }
.x-ux-mono { font-family: var(--mono); }
.x-ux-row { display: flex; align-items: center; gap: 5px; }
.x-ux-col { display: flex; flex-direction: column; }
.x-ux-pill { --ci-b: #33333b; --ci-g: #1a1a1f; display: inline-block; padding: 3px 7px; border: 1px solid #33333b; border-radius: 10px; font: 9px/1 var(--sans); color: var(--text-2); white-space: nowrap; background: #1a1a1f; }
.x-ux-pill.on { border-color: var(--key); color: var(--key); background: var(--key-soft); }
.x-ux-btn { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--key); color: #111; font: 600 10px/1 var(--sans); white-space: nowrap; }
.x-ux-btn.ghost { background: transparent; border: 1px solid #33333b; color: var(--text-2); }
.x-ux-card { --ci-b: #2a2a31; --ci-g: #1b1b20; background: #1b1b20; border: 1px solid #2a2a31; border-radius: 5px; box-sizing: border-box; }
.x-ux-in { --ci-b: #33333b; --ci-g: #0e0e11; height: 20px; border: 1px solid #33333b; border-radius: 5px; background: #0e0e11; display: flex; align-items: center; padding: 0 6px; font: 10px var(--sans); color: var(--text); box-sizing: border-box; white-space: nowrap; position: relative; }
.x-ux-in.f { border-color: var(--key); }
.x-ux-ic { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.x-ux-ic.fill { fill: currentColor; stroke: none; }
.x-ux-dot { width: 8px; height: 8px; border-radius: 50%; background: #33333b; flex: none; }
.x-ux-cur { position: absolute; width: 9px; height: 9px; border-left: 1.5px solid var(--text); border-top: 1.5px solid var(--text); transform: rotate(-20deg); }
.x-ux-caret { display: inline-block; width: 1.5px; height: 10px; background: var(--key); margin-left: 1px; vertical-align: -2px; animation: x-ux-blink 1s steps(1) infinite; }
.x-ux-tick { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #44444e; flex: none; position: relative; }
.x-ux-tick.on { background: var(--key); border-color: var(--key); }
.x-ux-tick.on::after { content: ""; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid #111; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.x-ux-tog { width: 20px; height: 11px; border-radius: 6px; background: #33333b; position: relative; flex: none; }
.x-ux-tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 7px; height: 7px; border-radius: 50%; background: #8a8a92; }
.x-ux-tog.on { background: var(--key); } .x-ux-tog.on::after { left: 11px; background: #111; }
.x-ux-img { background: linear-gradient(160deg, #2c2c35, #1a1a20); border-radius: 4px; position: relative; overflow: hidden; }
.x-ux-img::after { content: ""; position: absolute; right: 22%; top: 18%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #3d3d48; }
.x-ux-img.k::after { background: var(--key); }
.x-ux-strike { text-decoration: line-through; color: var(--muted); }
@keyframes x-ux-blink { 50% { opacity: 0; } }

/* generic animation primitives */
.x-ux-pulse { animation: x-ux-pulse 1.6s ease-in-out infinite; }
@keyframes x-ux-pulse { 50% { transform: scale(1.07); } }
.x-ux-glow { animation: x-ux-glow 1.6s ease-in-out infinite; }
@keyframes x-ux-glow { 50% { box-shadow: 0 0 0 4px var(--key-soft); } }
.x-ux-spin { animation: x-ux-spin 1s linear infinite; }
@keyframes x-ux-spin { to { transform: rotate(360deg); } }
.x-ux-ty { display: inline-block; animation: x-ux-ty 4s steps(var(--n, 10)) infinite; }
@keyframes x-ux-ty { 0% { clip-path: inset(0 100% 0 0); } 40%, 88% { clip-path: inset(0 0 0 0); } 96%, 100% { clip-path: inset(0 100% 0 0); } }
.x-ux-ga { animation: x-ux-ga 4s ease-in-out infinite; }
.x-ux-gb { animation: x-ux-gb 4s ease-in-out infinite; }
@keyframes x-ux-ga { 0%, 42% { opacity: 1; } 52%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-ux-gb { 0%, 42% { opacity: 0; } 52%, 94% { opacity: 1; } 100% { opacity: 0; } }
.x-ux-fillbar { transform-origin: 0 50%; animation: x-ux-fillbar 4s ease-in-out infinite; }
@keyframes x-ux-fillbar { 0% { transform: scaleX(0); } 55%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.x-ux-grow { transform-origin: 50% 100%; animation: x-ux-grow 4s ease-in-out infinite; }
@keyframes x-ux-grow { 0% { transform: scaleY(.1); } 40%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
.x-ux-bounce { animation: x-ux-bounce 1s ease-in-out infinite; }
@keyframes x-ux-bounce { 50% { transform: translateY(-3px); } }
.x-ux-dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--key); margin: 0 1.5px; animation: x-ux-dotp 1.1s ease-in-out infinite; }
.x-ux-dots i:nth-child(2) { animation-delay: .15s; } .x-ux-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes x-ux-dotp { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
.x-ux-shim { background: linear-gradient(100deg, #1d1d23 30%, #2d2d36 50%, #1d1d23 70%) 0 0 / 200% 100%; animation: x-ux-shim 1.8s linear infinite; }
@keyframes x-ux-shim { to { background-position: -200% 0; } }
.x-ux-click { animation: x-ux-click 4s ease-in-out infinite; }
@keyframes x-ux-click { 0%, 60%, 100% { transform: scale(1); } 66% { transform: scale(.92); } 72% { transform: scale(1); } }
.x-ux-c2{animation:x-ux-c2 2.4s infinite;animation-delay:calc(var(--i,0)*1.2s - 2.4s)}
@keyframes x-ux-c2{0%,41%{color:var(--key);border-color:var(--key);background-color:var(--key-soft)}45%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-v2{animation:x-ux-v2 2.4s infinite;animation-delay:calc(var(--i,0)*1.2s - 2.4s)}
@keyframes x-ux-v2{0%,41%{opacity:1}45%,100%{opacity:0}}
.x-ux-c3{animation:x-ux-c3 3.5999999999999996s infinite;animation-delay:calc(var(--i,0)*1.2s - 3.5999999999999996s)}
@keyframes x-ux-c3{0%,27%{color:var(--key);border-color:var(--key);background-color:var(--key-soft)}31%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-v3{animation:x-ux-v3 3.5999999999999996s infinite;animation-delay:calc(var(--i,0)*1.2s - 3.5999999999999996s)}
@keyframes x-ux-v3{0%,27%{opacity:1}31%,100%{opacity:0}}
.x-ux-c4{animation:x-ux-c4 4.8s infinite;animation-delay:calc(var(--i,0)*1.2s - 4.8s)}
@keyframes x-ux-c4{0%,21%{color:var(--key);border-color:var(--key);background-color:var(--key-soft)}25%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-v4{animation:x-ux-v4 4.8s infinite;animation-delay:calc(var(--i,0)*1.2s - 4.8s)}
@keyframes x-ux-v4{0%,21%{opacity:1}25%,100%{opacity:0}}
.x-ux-c5{animation:x-ux-c5 6s infinite;animation-delay:calc(var(--i,0)*1.2s - 6s)}
@keyframes x-ux-c5{0%,16%{color:var(--key);border-color:var(--key);background-color:var(--key-soft)}20%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-v5{animation:x-ux-v5 6s infinite;animation-delay:calc(var(--i,0)*1.2s - 6s)}
@keyframes x-ux-v5{0%,16%{opacity:1}20%,100%{opacity:0}}
.x-ux-q0{animation:x-ux-q0 4.4s ease-out infinite}
@keyframes x-ux-q0{0%,4%{opacity:0;transform:translateY(4px)}9%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q1{animation:x-ux-q1 4.4s ease-out infinite}
@keyframes x-ux-q1{0%,12%{opacity:0;transform:translateY(4px)}17%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q2{animation:x-ux-q2 4.4s ease-out infinite}
@keyframes x-ux-q2{0%,20%{opacity:0;transform:translateY(4px)}25%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q3{animation:x-ux-q3 4.4s ease-out infinite}
@keyframes x-ux-q3{0%,28%{opacity:0;transform:translateY(4px)}33%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q4{animation:x-ux-q4 4.4s ease-out infinite}
@keyframes x-ux-q4{0%,36%{opacity:0;transform:translateY(4px)}41%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q5{animation:x-ux-q5 4.4s ease-out infinite}
@keyframes x-ux-q5{0%,44%{opacity:0;transform:translateY(4px)}49%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q6{animation:x-ux-q6 4.4s ease-out infinite}
@keyframes x-ux-q6{0%,52%{opacity:0;transform:translateY(4px)}57%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q7{animation:x-ux-q7 4.4s ease-out infinite}
@keyframes x-ux-q7{0%,60%{opacity:0;transform:translateY(4px)}65%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q8{animation:x-ux-q8 4.4s ease-out infinite}
@keyframes x-ux-q8{0%,68%{opacity:0;transform:translateY(4px)}73%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-q9{animation:x-ux-q9 4.4s ease-out infinite}
@keyframes x-ux-q9{0%,76%{opacity:0;transform:translateY(4px)}81%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p0{animation:x-ux-p0 4.4s ease-out infinite}
@keyframes x-ux-p0{0%,4%{opacity:0;transform:scale(.6)}9%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p1{animation:x-ux-p1 4.4s ease-out infinite}
@keyframes x-ux-p1{0%,12%{opacity:0;transform:scale(.6)}17%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p2{animation:x-ux-p2 4.4s ease-out infinite}
@keyframes x-ux-p2{0%,20%{opacity:0;transform:scale(.6)}25%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p3{animation:x-ux-p3 4.4s ease-out infinite}
@keyframes x-ux-p3{0%,28%{opacity:0;transform:scale(.6)}33%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p4{animation:x-ux-p4 4.4s ease-out infinite}
@keyframes x-ux-p4{0%,36%{opacity:0;transform:scale(.6)}41%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p5{animation:x-ux-p5 4.4s ease-out infinite}
@keyframes x-ux-p5{0%,44%{opacity:0;transform:scale(.6)}49%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p6{animation:x-ux-p6 4.4s ease-out infinite}
@keyframes x-ux-p6{0%,52%{opacity:0;transform:scale(.6)}57%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p7{animation:x-ux-p7 4.4s ease-out infinite}
@keyframes x-ux-p7{0%,60%{opacity:0;transform:scale(.6)}65%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p8{animation:x-ux-p8 4.4s ease-out infinite}
@keyframes x-ux-p8{0%,68%{opacity:0;transform:scale(.6)}73%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-p9{animation:x-ux-p9 4.4s ease-out infinite}
@keyframes x-ux-p9{0%,76%{opacity:0;transform:scale(.6)}81%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.x-ux-f0{animation:x-ux-f0 4.4s infinite}
@keyframes x-ux-f0{0%,10%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}11%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f1{animation:x-ux-f1 4.4s infinite}
@keyframes x-ux-f1{0%,19%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}20%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f2{animation:x-ux-f2 4.4s infinite}
@keyframes x-ux-f2{0%,28%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}29%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f3{animation:x-ux-f3 4.4s infinite}
@keyframes x-ux-f3{0%,37%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}38%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f4{animation:x-ux-f4 4.4s infinite}
@keyframes x-ux-f4{0%,46%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}47%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f5{animation:x-ux-f5 4.4s infinite}
@keyframes x-ux-f5{0%,55%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}56%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f6{animation:x-ux-f6 4.4s infinite}
@keyframes x-ux-f6{0%,64%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}65%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}
.x-ux-f7{animation:x-ux-f7 4.4s infinite}
@keyframes x-ux-f7{0%,73%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}74%,88%{background-color:var(--key);border-color:var(--key);color:#111}92%,100%{color:var(--ci-c,var(--text-2));border-color:var(--ci-b,transparent);background-color:var(--ci-g,transparent)}}

/* ───── shared bits for list-ish demos ───── */
.x-ux-li { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; font: 10px var(--sans); color: var(--text-2); white-space: nowrap; margin-bottom: 2px; }
.x-ux-li b { font: 600 9px var(--mono); color: var(--muted); width: 8px; }
.x-ux-rail { font-size: 7px; gap: 2px; color: var(--muted); line-height: 1.1; align-items: center; }
.x-ux-sq { display: block; height: var(--h, 22px); background: #22222a; border-radius: 3px; border: 1px solid #2a2a31; }
.x-ux-ul { text-decoration: underline; text-underline-offset: 2px; }
.x-ux-big { font: 700 22px var(--mono); color: var(--key); line-height: 1; margin-bottom: 4px; }
.x-ux-lnk { color: var(--key); background: linear-gradient(var(--key), var(--key)) 0 100% / 0% 1.5px no-repeat; padding-bottom: 1px; animation: x-ux-lnk 3.4s ease-in-out infinite; }
@keyframes x-ux-lnk { 0%, 15% { background-size: 0% 1.5px; } 45%, 90% { background-size: 100% 1.5px; } 100% { background-size: 0% 1.5px; } }
.x-ux-lnk2 { color: var(--key); font-size: 10px; text-decoration: underline; text-underline-offset: 2px; display: inline-block; }
.x-ux-sw { position: relative; width: 120px; height: 22px; display: grid; place-items: center; }
.x-ux-sw > span { position: absolute; }
.x-ux-mark { color: var(--text); background: linear-gradient(var(--key-soft), var(--key-soft)) 0 0 / 0% 100% no-repeat; box-shadow: inset 0 -1.5px var(--key); border-radius: 1px; animation: x-ux-mark 3.6s ease-in-out infinite; }
@keyframes x-ux-mark { 0%, 10% { background-size: 0% 100%; box-shadow: inset 0 0 transparent; } 35%, 90% { background-size: 100% 100%; box-shadow: inset 0 -1.5px var(--key); } 100% { background-size: 0% 100%; } }

/* ───── page-sliding panes (global nav, search bar, onboarding…) ───── */
.x-ux-pans { display: flex; width: 300%; height: 100%; animation: x-ux-pans 3.6s ease-in-out infinite; }
.x-ux-pane { width: 33.3333%; flex: none; padding: 8px 10px; box-sizing: border-box; }
@keyframes x-ux-pans { 0%, 24% { transform: translateX(0); } 33%, 57% { transform: translateX(-33.3333%); } 66%, 90% { transform: translateX(-66.6666%); } 100% { transform: translateX(0); } }

/* ───── drops, drawers ───── */
.x-ux-drop { animation: x-ux-drop 4s ease-out infinite; }
@keyframes x-ux-drop { 0%, 8% { opacity: 0; transform: translateY(-8px); } 18%, 86% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-8px); } }
.x-ux-slide { animation: x-ux-slide 4s ease-in-out infinite; }
@keyframes x-ux-slide { 0%, 12% { transform: translateX(-100%); } 26%, 80% { transform: none; } 92%, 100% { transform: translateX(-100%); } }
.x-ux-hb1, .x-ux-hb2, .x-ux-hb3 { position: absolute; left: 0; width: 16px; height: 2px; border-radius: 1px; background: var(--text); }
.x-ux-hb1 { top: 2px; animation: x-ux-hb1 4s ease-in-out infinite; } .x-ux-hb2 { top: 7px; animation: x-ux-hb2 4s ease-in-out infinite; } .x-ux-hb3 { top: 12px; animation: x-ux-hb3 4s ease-in-out infinite; }
@keyframes x-ux-hb1 { 0%, 12% { transform: none; } 26%, 80% { transform: translateY(5px) rotate(45deg); background: var(--key); } 92%, 100% { transform: none; } }
@keyframes x-ux-hb2 { 0%, 12% { opacity: 1; } 26%, 80% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes x-ux-hb3 { 0%, 12% { transform: none; } 26%, 80% { transform: translateY(-5px) rotate(-45deg); background: var(--key); } 92%, 100% { transform: none; } }
.x-ux-drawerR { animation: x-ux-drawerR 4s ease-in-out infinite; }
@keyframes x-ux-drawerR { 0%, 12% { transform: translateX(100%); } 28%, 82% { transform: none; } 94%, 100% { transform: translateX(100%); } }
.x-ux-fade { animation: x-ux-fade 4s ease-in-out infinite; }
@keyframes x-ux-fade { 0%, 12% { opacity: 0; } 28%, 82% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ───── filters / facets ───── */
.x-ux-ta { animation: x-ux-ta 4.4s ease-in-out infinite; }
.x-ux-tb { animation: x-ux-tb 4.4s ease-in-out infinite; }
.x-ux-tk { animation: x-ux-tk 4.4s ease-in-out infinite; }
@keyframes x-ux-ta { 0%, 24% { opacity: 1; } 32%, 88% { opacity: .12; } 96%, 100% { opacity: 1; } }
@keyframes x-ux-tb { 0%, 52% { opacity: 1; } 60%, 88% { opacity: .12; } 96%, 100% { opacity: 1; } }
@keyframes x-ux-tk { 0%, 24% { border-color: #2a2a31; } 32%, 88% { border-color: var(--key); } 96%, 100% { border-color: #2a2a31; } }
.x-ux-pa { animation: x-ux-pa 4.4s infinite; } .x-ux-pb { animation: x-ux-pb 4.4s infinite; }
@keyframes x-ux-pa { 0%, 24% { border-color: #33333b; color: var(--text-2); background: #1a1a1f; } 28%, 88% { border-color: var(--key); color: var(--key); background: var(--key-soft); } 96%, 100% { border-color: #33333b; color: var(--text-2); background: #1a1a1f; } }
@keyframes x-ux-pb { 0%, 52% { border-color: #33333b; color: var(--text-2); background: #1a1a1f; } 56%, 88% { border-color: var(--key); color: var(--key); background: var(--key-soft); } 96%, 100% { border-color: #33333b; color: var(--text-2); background: #1a1a1f; } }
.x-ux-ona { animation: x-ux-ona 4.4s infinite; opacity: 0; } .x-ux-onb { animation: x-ux-onb 4.4s infinite; opacity: 0; }
@keyframes x-ux-ona { 0%, 22% { opacity: 0; } 28%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-ux-onb { 0%, 50% { opacity: 0; } 56%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.x-ux-chiprm { overflow: hidden; animation: x-ux-chiprm 4s ease-in-out infinite; }
@keyframes x-ux-chiprm { 0%, 40% { max-width: 80px; opacity: 1; padding-left: 7px; padding-right: 7px; } 52%, 90% { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; border-width: 0; } 100% { max-width: 80px; opacity: 1; padding-left: 7px; padding-right: 7px; } }
.x-ux-vanish { animation: x-ux-vanish 4s ease-in-out infinite; }
@keyframes x-ux-vanish { 0%, 48% { opacity: 1; transform: none; } 58%, 90% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
.x-ux-rfill { animation: x-ux-rfill 4s ease-in-out infinite alternate; left: 18%; right: 18%; }
.x-ux-h1 { animation: x-ux-h1 4s ease-in-out infinite alternate; left: 18%; margin-left: -6px; }
.x-ux-h2 { animation: x-ux-h2 4s ease-in-out infinite alternate; right: 18%; margin-right: -6px; }
.x-ux-h1::before, .x-ux-h2::before { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--key-soft); }
.x-ux-hl { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font: 8px var(--mono); color: var(--key); }
@keyframes x-ux-rfill { from { left: 18%; right: 18%; } to { left: 36%; right: 40%; } }
@keyframes x-ux-h1 { from { left: 18%; } to { left: 36%; } }
@keyframes x-ux-h2 { from { right: 18%; } to { right: 40%; } }

/* ───── voice / visual / scan ───── */
.x-ux-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--key); opacity: 0; animation: x-ux-ring 1.6s ease-out infinite; }
@keyframes x-ux-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.x-ux-bar { display: block; width: 3px; border-radius: 2px; background: var(--key); transform-origin: 50% 50%; animation: x-ux-bar .9s ease-in-out infinite alternate; }
@keyframes x-ux-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.x-ux-scan { position: absolute; left: 0; right: 0; height: 2px; background: var(--key); box-shadow: 0 0 8px var(--key); animation: x-ux-scan 1.8s ease-in-out infinite alternate; }
@keyframes x-ux-scan { from { top: 0; } to { top: calc(100% - 2px); } }

/* ───── scrolling feeds ───── */
.x-ux-feed { animation: x-ux-feed 6s linear infinite; }
@keyframes x-ux-feed { to { transform: translateY(-104px); } }
.x-ux-feed2 { animation: x-ux-feed2 7s ease-in-out infinite alternate; }
@keyframes x-ux-feed2 { from { transform: translateY(0); } to { transform: translateY(-46px); } }
.x-ux-prog { animation: x-ux-prog 7s ease-in-out infinite alternate; }
@keyframes x-ux-prog { from { transform: scaleX(.05); } to { transform: scaleX(.85); } }
.x-ux-typo { border-bottom: 1px dashed var(--muted); }

/* ───── page types ───── */
.x-ux-mv { position: absolute; left: 14px; top: 20px; width: 44px; height: 32px; border: 1px solid var(--key); background: var(--key-soft); animation: x-ux-mv 4s ease-in-out infinite alternate; }
.x-ux-mv i { position: absolute; width: 5px; height: 5px; background: #131317; border: 1px solid var(--key); }
.x-ux-mv i:nth-child(1) { left: -3px; top: -3px; } .x-ux-mv i:nth-child(2) { right: -3px; top: -3px; } .x-ux-mv i:nth-child(3) { left: -3px; bottom: -3px; } .x-ux-mv i:nth-child(4) { right: -3px; bottom: -3px; }
@keyframes x-ux-mv { from { transform: translate(0, 0); } to { transform: translate(60px, 24px); } }
.x-ux-draw { stroke-dasharray: 95; stroke-dashoffset: 95; animation: x-ux-draw 4s ease-out infinite; }
.x-ux-draw2 { stroke-dasharray: 24; stroke-dashoffset: 24; animation: x-ux-draw2 4s ease-out infinite; }
@keyframes x-ux-draw { 0% { stroke-dashoffset: 95; } 25%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 95; } }
@keyframes x-ux-draw2 { 0%, 18% { stroke-dashoffset: 24; } 36%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 24; } }
.x-ux-jit { animation: x-ux-jit 3s steps(1) infinite; }
@keyframes x-ux-jit { 0%, 70%, 78%, 100% { transform: none; text-shadow: none; } 72% { transform: translateX(2px); text-shadow: -2px 0 #444; } 74% { transform: translateX(-2px); text-shadow: 2px 0 #444; } 76% { transform: translateX(1px); } }
.x-ux-tg0, .x-ux-tg1, .x-ux-tg2 { animation: x-ux-tgbg 4.4s infinite; }
.x-ux-tg0::after, .x-ux-tg1::after, .x-ux-tg2::after { animation: x-ux-tgdot 4.4s infinite; }
.x-ux-tg1, .x-ux-tg1::after { animation-delay: .6s; } .x-ux-tg2, .x-ux-tg2::after { animation-delay: 1.2s; }
@keyframes x-ux-tgbg { 0%, 10% { background: #33333b; } 14%, 80% { background: var(--key); } 90%, 100% { background: #33333b; } }
@keyframes x-ux-tgdot { 0%, 10% { left: 2px; background: #8a8a92; } 14%, 80% { left: 11px; background: #111; } 90%, 100% { left: 2px; background: #8a8a92; } }

/* ───── flows ───── */
.x-ux-fly { animation: x-ux-fly 4s ease-in-out infinite; }
@keyframes x-ux-fly { 0%, 10% { transform: translateX(0); opacity: 0; } 18% { opacity: 1; } 55%, 60% { transform: translateX(46px); opacity: 1; } 70%, 100% { transform: translateX(46px); opacity: 0; } }
.x-ux-pp { animation: x-ux-pp 4.4s steps(1) infinite; }
@keyframes x-ux-pp { 0%, 7% { transform: scaleX(.03); } 8%, 30% { transform: scaleX(.16); } 31%, 54% { transform: scaleX(.5); } 55%, 88% { transform: scaleX(1); } 96%, 100% { transform: scaleX(.03); } }
.x-ux-dim { animation: x-ux-dim 4s ease-in-out infinite; }
@keyframes x-ux-dim { 0%, 45% { opacity: 1; } 55%, 90% { opacity: 0; } 100% { opacity: 1; } }
.x-ux-pi { animation: x-ux-pi 4.8s steps(1) infinite; }
@keyframes x-ux-pi { 0% { transform: scaleX(0); } 25% { transform: scaleX(.333); } 50% { transform: scaleX(.666); } 75% { transform: scaleX(1); } }
.x-ux-radio { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #55555f; position: relative; display: inline-block; }
.x-ux-radiodot { position: absolute; inset: 2px; border-radius: 50%; background: var(--key); animation: x-ux-radio 4.4s infinite; }
@keyframes x-ux-radio { 0%, 14% { opacity: 0; } 20%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
.x-ux-expand { overflow: hidden; animation: x-ux-expand 4.4s ease-in-out infinite; }
@keyframes x-ux-expand { 0%, 14% { max-height: 0; opacity: 0; } 30%, 88% { max-height: 40px; opacity: 1; } 96%, 100% { max-height: 0; opacity: 0; } }
.x-ux-dlg { animation: x-ux-dlg 4s ease-out infinite; }
@keyframes x-ux-dlg { 0%, 6% { opacity: 0; transform: scale(.9); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.9); } }
.x-ux-gone { animation: x-ux-gone 5s ease-in-out infinite; }
@keyframes x-ux-gone { 0%, 12% { max-height: 40px; opacity: 1; } 22%, 70% { max-height: 0; opacity: 0; } 82%, 100% { max-height: 40px; opacity: 1; } }
.x-ux-toast { animation: x-ux-toast 5s ease-in-out infinite; }
@keyframes x-ux-toast { 0%, 12% { opacity: 0; transform: translateY(10px); } 22%, 66% { opacity: 1; transform: none; } 76%, 100% { opacity: 0; transform: translateY(10px); } }
.x-ux-timer { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--key); transform-origin: 0 50%; animation: x-ux-timer 5s linear infinite; }
@keyframes x-ux-timer { 0%, 22% { transform: scaleX(1); } 70%, 100% { transform: scaleX(0); } }

/* ───── AI ───── */
.x-ux-bub { max-width: 150px; padding: 5px 8px; border-radius: 8px 8px 8px 2px; background: #1d1d23; border: 1px solid #2a2a31; font-size: 9px; color: var(--text); }
.x-ux-bub.me { background: var(--key); border-color: var(--key); border-radius: 8px 8px 2px 8px; }
.x-ux-stopgrow { transform-origin: 0 50%; animation: x-ux-stopgrow 4s linear infinite; }
@keyframes x-ux-stopgrow { 0% { transform: scaleX(0); } 45%, 90% { transform: scaleX(.55); } 100% { transform: scaleX(0); } }
.x-ux-stopcaret { animation: x-ux-stopcaret 4s linear infinite !important; }
@keyframes x-ux-stopcaret { 0% { left: 0; opacity: 1; } 45% { left: 82px; opacity: 1; } 50%, 100% { left: 82px; opacity: 0; } }
.x-ux-rot { display: inline-block; animation: x-ux-rot 4s ease-in-out infinite; }
@keyframes x-ux-rot { 0%, 40% { transform: none; } 55%, 100% { transform: rotate(360deg); } }
.x-ux-fld { display: inline-block; position: relative; min-width: 56px; border-bottom: 1px dashed var(--key); height: 14px; vertical-align: bottom; }
.x-ux-fld > span { position: absolute; left: 2px; top: 0; white-space: nowrap; }
.x-ux-sel { position: absolute; left: -3px; top: -2px; height: 9px; width: 0; background: rgba(198, 255, 61, .28); border-radius: 2px; animation: x-ux-sel 4s ease-in-out infinite; }
@keyframes x-ux-sel { 0%, 8% { width: 0; } 30%, 90% { width: 156px; } 100% { width: 0; } }
.x-ux-cite { display: inline-block; margin: 0 2px; width: 12px; height: 12px; line-height: 12px; text-align: center; border-radius: 3px; background: var(--key-soft); border: 1px solid var(--key); color: var(--key); font: 600 8px var(--mono); vertical-align: 1px; box-sizing: border-box; }
.x-ux-draft { border: 1.5px dashed var(--key); border-radius: 6px; background: var(--key-soft); position: relative; animation: x-ux-draft 4s ease-in-out infinite; }
@keyframes x-ux-draft { 0%, 44% { border-style: dashed; background: rgba(198, 255, 61, .06); } 54%, 92% { border-style: solid; background: var(--key-soft); } 100% { border-style: dashed; } }
.x-ux-rm { background: rgba(255, 255, 255, .06); color: var(--muted); text-decoration: line-through; padding: 2px 4px; border-radius: 2px; margin-bottom: 2px; }
.x-ux-ad { background: var(--key-soft); color: var(--key); padding: 2px 4px; border-radius: 2px; margin-bottom: 4px; }
.x-ux-aihl { animation: x-ux-aihl 4s ease-in-out infinite; }
@keyframes x-ux-aihl { 0%, 44% { background: var(--key-soft); box-shadow: inset 2px 0 var(--key); } 56%, 92% { background: transparent; box-shadow: inset 2px 0 transparent; } 100% { background: var(--key-soft); } }
.x-ux-pulse2 { animation: x-ux-pulse2 3s ease-in-out infinite; }
@keyframes x-ux-pulse2 { 50% { color: var(--key); } }
.x-ux-hlsel { background: linear-gradient(rgba(198, 255, 61, .3), rgba(198, 255, 61, .3)) 0 0 / 0% 100% no-repeat; border-radius: 2px; animation: x-ux-hlsel 4s ease-in-out infinite; }
@keyframes x-ux-hlsel { 0%, 8% { background-size: 0% 100%; } 30%, 90% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } }