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

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

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

/* responsive demos: layouts that react to their own container width */
.x-lay-mf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
@container (max-width: 100px) { .x-lay-mf { grid-template-columns: 1fr; } }
.x-lay-cd { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 4px; }
.x-lay-ls { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "a c"; }
.x-lay-ls > :nth-child(1) { grid-area: a; } .x-lay-ls > :nth-child(2) { grid-area: b; } .x-lay-ls > :nth-child(3) { grid-area: c; }
@container (max-width: 110px) { .x-lay-ls { grid-template-columns: 1fr 1fr; grid-template-areas: "b b" "a c"; } }
.x-lay-tt { padding: 8cqw; }
.x-lay-tt .h { height: 7cqw; border-radius: 2px; margin-bottom: 4cqw; background: var(--key); width: 55%; }
.x-lay-tt .p { height: 4cqw; border-radius: 2px; margin-bottom: 3cqw; background: #34343d; }
.x-lay-s2t { display: grid; grid-template-columns: 38px 1fr; gap: 4px; }
@container (max-width: 100px) { .x-lay-s2t { grid-template-columns: 1fr; } .x-lay-s2t > :first-child { height: 14px; } }
.x-lay-rp { display: flex; flex-direction: column; gap: 4px; }
.x-lay-rp > :nth-child(1) { order: 1; } .x-lay-rp > :nth-child(2) { order: 2; } .x-lay-rp > :nth-child(3) { order: 3; }
.x-lay-rp .x-lay-b { position: relative; height: 16px; }
@container (max-width: 100px) { .x-lay-rp > :nth-child(3) { order: 0; } }
.x-lay-pp { display: flex; gap: 4px; align-items: center; height: 100%; padding: 0 6px; }
.x-lay-pp .x-lay-b { position: relative; width: 30px; height: 14px; flex: none; }
.x-lay-pp .more { margin-left: auto; width: 26px; }
@container (max-width: 150px) { .x-lay-pp .p4 { display: none; } }
@container (max-width: 112px) { .x-lay-pp .p3 { display: none; } }
@container (max-width: 80px) { .x-lay-pp .p2 { display: none; } }
.x-lay-mq { display: grid; gap: 4px; grid-template-columns: repeat(3, 1fr); }
@container (max-width: 110px) { .x-lay-mq { grid-template-columns: 1fr 1fr; } }
@container (max-width: 80px) { .x-lay-mq { grid-template-columns: 1fr; } }
.x-lay-fl { font: 800 clamp(8px, 11cqw, 22px)/1 var(--sans); color: var(--text); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; }
.x-lay-cq { container-type: inline-size; }
.x-lay-cq .cardx { display: flex; gap: 4px; padding: 4px; background: #1d1d23; border: 1px solid #2a2a31; border-radius: 4px; flex-direction: column; }
.x-lay-cq .cardx .im { height: 14px; flex: none; border-radius: 2px; background: linear-gradient(150deg, #3a3a44, #25252c); }
.x-lay-cq .cardx .ln { height: 4px; border-radius: 2px; background: #34343d; margin-top: 4px; }
@container (min-width: 90px) { .x-lay-cq .cardx { flex-direction: row; } .x-lay-cq .cardx .im { width: 34px; height: 22px; } .x-lay-cq .cardx .ln:first-of-type { margin-top: 2px; } }
.x-lay-cq .cardx .bx { flex: 1; }
.x-lay-ar { animation: x-lay-w 4s ease-in-out infinite alternate; --w1: 150px; --w2: 70px; aspect-ratio: 16 / 9; position: absolute; left: 24px; top: 28px; background: linear-gradient(150deg, #3a3a44, #20202a); border: 1px solid var(--key); border-radius: 4px; }
.x-lay-ar::after { content: ""; position: absolute; right: 18%; top: 18%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--key); }
.x-lay-ar::before { content: ""; position: absolute; left: 12%; bottom: 0; width: 34%; height: 50%; background: #4a4a55; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.x-lay-sw { animation: x-lay-sidew 4s ease-in-out infinite alternate; }
@keyframes x-lay-sidew { from { width: 44px; } to { width: 14px; } }
.x-lay-fade { background: linear-gradient(90deg, transparent, #131317); }
.x-lay-bleed { animation: x-lay-bleed 4s ease-in-out infinite; }
@keyframes x-lay-bleed { 0%, 25% { left: 24px; right: 24px; border-radius: 3px; } 50%, 80% { left: 0; right: 0; border-radius: 0; } 100% { left: 24px; right: 24px; } }
.x-lay-offs { animation: x-lay-offs 4s ease-in-out infinite; }
@keyframes x-lay-offs { 0%, 20% { transform: none; } 45%, 75% { transform: translate(var(--x, 8px), var(--y, -6px)); } 100% { transform: none; } }
.x-lay-drawer { animation: x-lay-drawer 4s ease-in-out infinite; }
@keyframes x-lay-drawer { 0%, 15% { transform: translateX(-100%); } 35%, 70% { transform: none; } 90%, 100% { transform: translateX(-100%); } }
.x-lay-scrim { animation: x-lay-scrim 4s ease-in-out infinite; }
@keyframes x-lay-scrim { 0%, 15% { opacity: 0; } 35%, 70% { opacity: 1; } 90%, 100% { opacity: 0; } }
.x-lay-tab { animation: x-lay-tab 6s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes x-lay-tab { 0% { background: var(--key-soft); border-color: var(--key); color: var(--key); } 25% { background: #1d1d23; border-color: #2a2a31; color: var(--muted); } }
.x-lay-exp { animation: x-lay-exp 4s ease-in-out infinite; }
@keyframes x-lay-exp { 0%, 15% { height: 0; } 35%, 80% { height: 26px; } 100% { height: 0; } }
.x-lay-bar { transform-origin: bottom; animation: x-lay-barg 3.5s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
@keyframes x-lay-barg { from { transform: scaleY(.5); } to { transform: scaleY(1); } }
.x-lay-sel { animation: x-lay-sel 4.5s steps(1) infinite; }
@keyframes x-lay-sel { 0% { transform: translateY(0); } 33% { transform: translateY(18px); } 66% { transform: translateY(36px); } }
.x-lay-foc { animation: x-lay-foc 4.5s steps(1) infinite; animation-delay: var(--d, 0s); }
@keyframes x-lay-foc { 0% { border-color: var(--key); background: var(--key-soft); } 33% { border-color: #2a2a31; background: #1d1d23; } }