/* Layout taxonomy previews (.x-uis-*). Wireframes inside .d-screen (200x120). */
.x-uis-b { position: absolute; box-sizing: border-box; background: #1d1d23; border: 1px solid #2a2a31; border-radius: 3px;
  font: 500 6.5px/1 var(--mono); color: var(--muted); display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; }
.x-uis-b.f { position: relative; }
.x-uis-b.k { background: var(--key); border-color: var(--key); color: #111; }
.x-uis-b.ks { background: var(--key-soft); border-color: var(--key); color: var(--key); }
.x-uis-b.g { background: #25252c; border-color: #34343d; }
.x-uis-b.t { background: #34343d; border: 0; height: 4px; border-radius: 2px; }
.x-uis-b.tk { background: var(--key); border: 0; height: 4px; border-radius: 2px; }
.x-uis-b.n { border: 0; background: none; }
.x-uis-b.l { justify-content: flex-start; padding-left: 4px; }
.x-uis-b.c { border-radius: 50%; }
.x-uis-b.dash { background: none; border: 1px dashed var(--key); color: var(--key); }
.x-uis-b.col { background: rgba(198, 255, 61, .07); border: 0; border-radius: 0; }
.x-uis-dv { position: absolute; box-sizing: border-box; }
.x-uis-lab { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 9px var(--mono); color: var(--key); pointer-events: none; }
.x-uis-clip { position: absolute; overflow: hidden; }
.x-uis-ph { background: linear-gradient(150deg, #34343d, #20202a); }
.x-uis-ph.k { background: linear-gradient(150deg, var(--key), #7fa826); }

/* motion classes (delay via --d) */
.x-uis-b.hl, .x-uis-dv.hl { animation: x-uis-hl 4s infinite; animation-delay: var(--d, 0s); }
.x-uis-pu { animation: x-uis-pulse 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.x-uis-sh { animation: x-uis-show 4s infinite both; animation-delay: var(--d, 0s); }
.x-uis-mx { animation: x-uis-mx 3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.x-uis-my { animation: x-uis-my 3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.x-uis-sx { transform-origin: left center; animation: x-uis-sx 3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.x-uis-sc { animation: x-uis-sc 6s linear infinite; }
.x-uis-scx { animation: x-uis-scx 7s linear infinite; }
.x-uis-rz { container-type: inline-size; animation: x-uis-w 4.5s ease-in-out infinite alternate; }
.x-uis-dash { stroke-dasharray: 300; animation: x-uis-draw 4s ease-in-out infinite; }
.x-uis-lift { animation: x-uis-lift 4s ease-in-out infinite; animation-delay: var(--d, 0s); }

@keyframes x-uis-hl { 0%, 40%, 100% { background: #1d1d23; border-color: #2a2a31; } 10%, 30% { background: var(--key-soft); border-color: var(--key); } }
@keyframes x-uis-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes x-uis-show { 0%, 6% { opacity: 0; transform: translateY(6px); } 20%, 80% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes x-uis-mx { to { transform: translateX(var(--x, 10px)); } }
@keyframes x-uis-my { to { transform: translateY(var(--y, 10px)); } }
@keyframes x-uis-sx { to { transform: scaleX(var(--s, .5)); } }
@keyframes x-uis-sc { from { transform: translateY(0); } to { transform: translateY(var(--y, -60px)); } }
@keyframes x-uis-scx { from { transform: translateX(0); } to { transform: translateX(var(--x, -60px)); } }
@keyframes x-uis-w { from { width: var(--w1, 190px); } to { width: var(--w2, 80px); } }
@keyframes x-uis-draw { 0% { stroke-dashoffset: 300; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes x-uis-lift { 0%, 30%, 100% { transform: none; border-color: #2a2a31; } 12%, 20% { transform: translateY(-3px); border-color: var(--key); } }


/* ── Visual styles ── */
.x-uis-card { position: relative; width: 150px; padding: 12px; border-radius: 10px; font: 500 10px/1.3 var(--sans); }
.x-uis-card h4 { margin: 0 0 3px; font: 700 13px/1.1 var(--sans); }
.x-uis-card p { margin: 0 0 8px; font-size: 9px; opacity: .75; }
.x-uis-btn { display: inline-block; padding: 5px 10px; font: 600 9px var(--sans); }
/* flat */
.x-uis-flat { background: #2f6bff; color: #fff; border-radius: 6px; box-shadow: none; }
.x-uis-flat .x-uis-btn { background: #ffd23f; color: #1a1a1a; border-radius: 4px; }
.x-uis-flat i { position: absolute; right: 12px; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: #ffd23f; }
/* material */
.x-uis-mat { background: #f4f1fb; color: #1d1b20; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5); animation: x-uis-elev 3s ease-in-out infinite; }
.x-uis-mat .x-uis-btn { background: #6750a4; color: #fff; border-radius: 16px; }
.x-uis-fab { position: absolute; right: -8px; bottom: -10px; width: 32px; height: 32px; border-radius: 10px; background: #eaddff; color: #21005d; display: grid; place-items: center; font: 700 16px var(--sans); box-shadow: 0 4px 8px rgba(0,0,0,.5); animation: x-uis-fab 3s ease-in-out infinite; }
@keyframes x-uis-elev { 0%, 100% { box-shadow: 0 1px 3px rgba(0,0,0,.4); } 50% { box-shadow: 0 8px 18px rgba(0,0,0,.6); transform: translateY(-2px); } }
@keyframes x-uis-fab { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
/* skeuo */
.x-uis-sk { width: 150px; height: 112px; border-radius: 10px; background: linear-gradient(180deg, #6b5237, #4a3724); border: 1px solid #2a1c10; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.6); position: relative; background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 5px), linear-gradient(180deg, #6b5237, #4a3724); }
.x-uis-knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -34px 0 0 -28px; border-radius: 50%; background: conic-gradient(from 0deg, #d8d8d8, #8a8a8a, #f0f0f0, #7a7a7a, #d8d8d8); box-shadow: 0 4px 8px rgba(0,0,0,.6), inset 0 0 0 3px #2a2a2a; animation: x-uis-turn 4s ease-in-out infinite; }
.x-uis-knob::after { content: ""; position: absolute; left: 50%; top: 4px; width: 3px; height: 14px; margin-left: -1.5px; border-radius: 2px; background: #222; }
@keyframes x-uis-turn { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(60deg); } }
.x-uis-ticks { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 8px var(--mono); color: #d9c3a0; letter-spacing: .2em; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
/* glass */
.x-uis-gbg { position: absolute; inset: 0; overflow: hidden; background: #1b1340; }
.x-uis-gbg b { position: absolute; border-radius: 50%; filter: blur(2px); }
.x-uis-gbg b:nth-child(1) { width: 80px; height: 80px; left: 40px; top: 18px; background: #ff4fa3; animation: x-uis-orb 5s ease-in-out infinite alternate; }
.x-uis-gbg b:nth-child(2) { width: 70px; height: 70px; right: 40px; bottom: 14px; background: #3dd5ff; animation: x-uis-orb 5s ease-in-out infinite alternate-reverse; }
@keyframes x-uis-orb { to { transform: translate(34px, 18px); } }
.x-uis-glass { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); color: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.x-uis-glass .x-uis-btn { background: rgba(255,255,255,.25); border-radius: 8px; border: 1px solid rgba(255,255,255,.4); }
/* neumorphism */
.x-uis-neu { background: #2b2e36; width: 100%; height: 100%; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.x-uis-nb { width: 54px; height: 54px; border-radius: 16px; background: #2b2e36; box-shadow: 6px 6px 12px #1c1e23, -6px -6px 12px #3a3e49; display: grid; place-items: center; color: #8d93a3; font: 700 14px var(--sans); }
.x-uis-nb.p { animation: x-uis-press 3s ease-in-out infinite; color: var(--key); }
@keyframes x-uis-press { 0%, 35%, 100% { box-shadow: 6px 6px 12px #1c1e23, -6px -6px 12px #3a3e49; } 50%, 75% { box-shadow: inset 5px 5px 10px #1c1e23, inset -5px -5px 10px #3a3e49; } }
.x-uis-nbar { width: 64px; height: 12px; border-radius: 8px; background: #2b2e36; box-shadow: inset 3px 3px 6px #1c1e23, inset -3px -3px 6px #3a3e49; position: absolute; bottom: 24px; }
/* neubrutalism */
.x-uis-nb2 { background: #ffd23f; color: #111; border: 3px solid #111; border-radius: 4px; box-shadow: 6px 6px 0 #111; width: 146px; }
.x-uis-nb2 .x-uis-btn { background: #ff6b6b; color: #111; border: 3px solid #111; border-radius: 4px; box-shadow: 3px 3px 0 #111; animation: x-uis-brutal 2.6s ease-in-out infinite; font-weight: 800; }
@keyframes x-uis-brutal { 0%, 40%, 100% { transform: none; box-shadow: 3px 3px 0 #111; } 55%, 75% { transform: translate(3px, 3px); box-shadow: 0 0 0 #111; } }
/* swiss */
.x-uis-sw { position: relative; width: 168px; height: 112px; background: #f2f0eb; color: #111; overflow: hidden; }
.x-uis-sw .g { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0,0,0,.1); }
.x-uis-sw h4 { position: absolute; left: 10px; top: 8px; margin: 0; font: 800 24px/.9 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; }
.x-uis-sw .dot { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: #e2231a; animation: x-uis-dot 4s ease-in-out infinite alternate; }
@keyframes x-uis-dot { to { transform: translateY(40px); } }
.x-uis-sw .tx { position: absolute; left: 10px; bottom: 10px; width: 62px; font: 600 6.5px/1.4 "Helvetica Neue", Arial, sans-serif; }
.x-uis-sw .ln { position: absolute; left: 10px; right: 10px; top: 58px; height: 2px; background: #111; }
/* bento */
.x-uis-bento { display: grid; grid-template-columns: repeat(4, 34px); grid-template-rows: repeat(3, 34px); gap: 5px; }
.x-uis-bento div { border-radius: 10px; background: #1d1d23; border: 1px solid #2a2a31; animation: x-uis-pop 4s ease-in-out infinite both; animation-delay: var(--d, 0s); display: grid; place-items: center; font: 700 11px var(--sans); color: var(--text-2); }
.x-uis-bento .a { grid-column: span 2; grid-row: span 2; background: var(--key); color: #111; border-color: var(--key); }
.x-uis-bento .b { grid-column: span 2; }
.x-uis-bento .c { grid-row: span 2; background: #2a2540; border-color: #3d3560; }
@keyframes x-uis-pop { 0% { opacity: 0; transform: scale(.85); } 14%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* mono minimal */
.x-uis-mm { width: 160px; height: 100px; background: #0a0a0a; border: 1px solid #222; padding: 14px; position: relative; font-family: var(--sans); }
.x-uis-mm h4 { margin: 0 0 4px; font: 300 17px/1.1 var(--sans); letter-spacing: -.02em; color: #f5f5f5; }
.x-uis-mm p { margin: 0; font: 400 8px/1.5 var(--sans); color: #777; width: 130px; }
.x-uis-mm u { position: absolute; left: 14px; bottom: 14px; font: 500 8px var(--mono); color: var(--key); text-decoration: none; letter-spacing: .1em; animation: x-uis-ul 3s ease-in-out infinite; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@keyframes x-uis-ul { 50% { letter-spacing: .25em; } }
/* y2k */
.x-uis-y2k { position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, #ff9be0, transparent 50%), linear-gradient(160deg, #6f7bff, #b6f3ff 60%, #e9e9ff); display: grid; place-items: center; overflow: hidden; }
.x-uis-chrome { font: italic 900 30px/1 "Arial Black", Arial, sans-serif; letter-spacing: -.02em; background: linear-gradient(180deg, #fff 0 38%, #7a86a8 48%, #1e2a4a 52%, #c9d4ff 70%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(20,20,60,.5)); animation: x-uis-shine 3.5s ease-in-out infinite; }
@keyframes x-uis-shine { 50% { transform: skewX(-6deg) scale(1.04); } }
.x-uis-star { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: x-uis-tw 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes x-uis-tw { 50% { transform: scale(.4) rotate(90deg); opacity: .5; } }
.x-uis-pix { position: absolute; bottom: 10px; padding: 3px 7px; background: #111; color: #9dff6a; font: 8px var(--mono); border: 2px solid #fff; box-shadow: 2px 2px 0 #ff59c8; }

/* ── type & color ── */
.x-uis-cap { position: absolute; bottom: 4px; left: 0; right: 0; text-align: center; font: 9px var(--mono); color: var(--key); }
.x-uis-sw8 { display: flex; gap: 0; }
.x-uis-sw8 i { width: 24px; height: 40px; display: block; }
.x-uis-wght { font: 800 40px/1 var(--sans); animation: x-uis-wg 3.5s ease-in-out infinite; }
@keyframes x-uis-wg { 0%, 100% { font-weight: 100; } 50% { font-weight: 900; } }
.x-uis-fluid { container-type: inline-size; animation: x-uis-fw 4.5s ease-in-out infinite alternate; overflow: hidden; }
@keyframes x-uis-fw { from { width: 170px; } to { width: 70px; } }
.x-uis-fluid b { display: block; font: 800 clamp(10px, 14cqw, 28px)/1.1 var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.x-uis-ms { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.x-uis-ms > div { display: flex; align-items: baseline; gap: 8px; line-height: 1; animation: x-uis-pulse 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
.x-uis-ms em { font: 8px var(--mono); color: var(--key); font-style: normal; width: 30px; }
.x-uis-role { display: flex; align-items: center; gap: 6px; font: 9px var(--mono); padding: 5px 7px; border-radius: 5px; width: 140px; }
.x-uis-role i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.x-uis-theme { animation: x-uis-theme 4.5s steps(1) infinite; border-radius: 8px; padding: 10px; width: 132px; border: 1px solid #3a3a44; }
@keyframes x-uis-theme { 0% { background: #111114; color: #eee; } 50% { background: #f4f4f1; color: #222; } }
.x-uis-theme .b { animation: x-uis-themeb 4.5s steps(1) infinite; }
@keyframes x-uis-themeb { 0% { background: var(--key); color: #111; } 50% { background: #3d6b00; color: #fff; } }
.x-uis-caret { display: inline-block; width: 5px; height: 10px; background: #39ff88; margin-left: 2px; vertical-align: -1px; animation: x-uis-blink 1s steps(1) infinite; }
@keyframes x-uis-blink { 50% { opacity: 0; } }
.x-uis-bounce { animation: x-uis-bnc 1.6s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes x-uis-bnc { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-5px) scale(1.06); } }