/* Glossary hover previews (.x-glo-*) */
.x-glo-an { animation: var(--n) var(--t, 3s) var(--e, ease-in-out) var(--d, 0s) infinite; }
@keyframes x-glo-tx { 0%, 15% { transform: translateX(var(--a, 0)); } 45%, 70% { transform: translateX(var(--b, 20px)); } 100% { transform: translateX(var(--a, 0)); } }
@keyframes x-glo-ty { 0%, 15% { transform: translateY(var(--a, 0)); } 45%, 70% { transform: translateY(var(--b, 20px)); } 100% { transform: translateY(var(--a, 0)); } }
@keyframes x-glo-sc { 0%, 15% { transform: scale(var(--a, 1)); } 45%, 70% { transform: scale(var(--b, 1.2)); } 100% { transform: scale(var(--a, 1)); } }
@keyframes x-glo-op { 0%, 15% { opacity: var(--a, 0); } 45%, 70% { opacity: var(--b, 1); } 100% { opacity: var(--a, 0); } }
@keyframes x-glo-w { 0%, 15% { width: var(--a); } 45%, 70% { width: var(--b); } 100% { width: var(--a); } }
@keyframes x-glo-h { 0%, 15% { height: var(--a); } 45%, 70% { height: var(--b); } 100% { height: var(--a); } }
@keyframes x-glo-ml { 0%, 15% { margin-left: var(--a); } 45%, 70% { margin-left: var(--b); } 100% { margin-left: var(--a); } }
@keyframes x-glo-ls { 0%, 15% { letter-spacing: var(--a); } 45%, 70% { letter-spacing: var(--b); } 100% { letter-spacing: var(--a); } }
@keyframes x-glo-lh { 0%, 15% { line-height: var(--a); } 45%, 70% { line-height: var(--b); } 100% { line-height: var(--a); } }
@keyframes x-glo-fw { 0%, 10% { font-weight: 100; } 50%, 60% { font-weight: 900; } 100% { font-weight: 100; } }
@keyframes x-glo-rad { 0%, 15% { border-radius: var(--a); } 45%, 70% { border-radius: var(--b); } 100% { border-radius: var(--a); } }
@keyframes x-glo-pad { 0%, 15% { padding: var(--a); } 45%, 70% { padding: var(--b); } 100% { padding: var(--a); } }
@keyframes x-glo-bg { 0%, 15% { background-color: var(--a); color: var(--ca); } 45%, 70% { background-color: var(--b); color: var(--cb); } 100% { background-color: var(--a); color: var(--ca); } }
@keyframes x-glo-mv { 0%, 12% { transform: translate(var(--x0), var(--y0)); } 42%, 70% { transform: translate(var(--x1), var(--y1)); } 100% { transform: translate(var(--x0), var(--y0)); } }
@keyframes x-glo-seq { 0%, 4% { opacity: .25; } 10%, 30% { opacity: 1; } 40%, 100% { opacity: .25; } }
@keyframes x-glo-pop { 0%, 8% { opacity: 0; transform: scale(.6); } 16%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes x-glo-in { 0%, 8% { opacity: 0; } 18%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes x-glo-shim { to { background-position: -200% 0; } }
@keyframes x-glo-tok { 0%, 45% { --tk: #c6ff3d; } 50%, 95% { --tk: #7cc4ff; } 100% { --tk: #c6ff3d; } }
@keyframes x-glo-ring { 0%, 6% { opacity: 0; transform: translateX(0); } 8%, 28% { opacity: 1; transform: translateX(0); } 33%, 61% { opacity: 1; transform: translateX(var(--s)); } 66%, 94% { opacity: 1; transform: translateX(calc(var(--s) * 2)); } 100% { opacity: 0; transform: translateX(calc(var(--s) * 2)); } }
@keyframes x-glo-dash { 0%, 10% { stroke-dashoffset: var(--len); } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len); } }

.x-glo-lab { font: 9px/1.3 var(--mono); color: var(--key); letter-spacing: .02em; white-space: nowrap; }
.x-glo-lab.m { color: var(--muted); }
.x-glo-ln { height: 5px; border-radius: 3px; background: #2a2a31; flex: none; }
.x-glo-ln.k { background: var(--key); }
.x-glo-box { background: #1d1d23; border: 1px solid #2a2a31; border-radius: 6px; }
.x-glo-scr { position: relative; width: 200px; height: 120px; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #131317; }
.x-glo-abs { position: absolute; }
.x-glo-btn { display: inline-flex; align-items: center; justify-content: center; font: 600 9px var(--sans); border-radius: 5px; padding: 4px 9px; background: var(--key); color: #111; white-space: nowrap; }
.x-glo-btn.o { background: transparent; color: var(--text); border: 1px solid #4a4a54; }
.x-glo-btn.g { background: transparent; color: var(--text-2); }
.x-glo-cur { position: absolute; width: 12px; height: 12px; background: #fff; clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 66% 92%, 46% 66%, 85% 66%); }
.x-glo-t { font: 600 10px var(--sans); color: var(--text); }
.x-glo-s { font: 8px var(--sans); color: var(--text-2); }

/* container-query demos */
.x-glo-cq { container-type: inline-size; overflow: hidden; border: 1px dashed #4a4a54; border-radius: 6px; background: #121216; }
.x-glo-bp-n { display: flex; gap: 6px; align-items: center; padding: 6px 8px; }
.x-glo-bp-n .full { display: none; gap: 5px; } .x-glo-bp-n .burger { display: flex; flex-direction: column; gap: 2px; margin-left: auto; }
.x-glo-bp-n .burger i { width: 10px; height: 2px; background: var(--text-2); }
.x-glo-bp-g { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 0 8px 8px; }
.x-glo-bp-g i { height: 14px; background: #26262c; border-radius: 3px; }
@container (min-width: 150px) { .x-glo-bp-n .full { display: flex; margin-left: auto; } .x-glo-bp-n .burger { display: none; } .x-glo-bp-g { grid-template-columns: 1fr 1fr 1fr; } .x-glo-bp-g i { height: 30px; } }
.x-glo-cqc { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.x-glo-cqc .im { height: 24px; border-radius: 4px; background: #33333b; }
@container (min-width: 130px) { .x-glo-cqc { flex-direction: row; } .x-glo-cqc .im { width: 36px; height: 36px; flex: none; } }
.x-glo-rf { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px; align-content: flex-start; overflow: hidden; border: 1px dashed #4a4a54; border-radius: 6px; }
.x-glo-rf i { width: 40px; height: 22px; border-radius: 4px; background: #33333b; }
.x-glo-rf i:first-child { background: var(--key); }

.x-glo-shim { background: linear-gradient(90deg, #26262c 30%, #3a3a44 50%, #26262c 70%) 0 0 / 200% 100%; animation: x-glo-shim 1.4s linear infinite; border-radius: 4px; }
.x-glo-tokc { animation: x-glo-tok 4s steps(1) infinite; }
.x-glo-ring { position: absolute; border: 2px solid var(--key); border-radius: 7px; animation: x-glo-ring 3.6s steps(1, end) infinite; }
.x-glo-ring.sm { animation-timing-function: ease; }
.x-glo-bl { display: inline-block; width: 1px; height: 9px; background: var(--key); vertical-align: -1px; animation: x-glo-bl 1s steps(1) infinite; }
@keyframes x-glo-bl { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .x-glo-an, .x-glo-shim { animation-duration: 0s !important; } }

@keyframes x-glo-sk1 { 0%, 52% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes x-glo-sk2 { 0%, 55% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes x-glo-toast { 0%, 10% { transform: translateY(46px); } 25%, 70% { transform: translateY(0); } 85%, 100% { transform: translateY(46px); } }
@keyframes x-glo-fb1 { 0%, 20% { opacity: 1; } 25%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes x-glo-fb2 { 0%, 22% { opacity: 0; } 28%, 50% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes x-glo-fb3 { 0%, 52% { opacity: 0; } 58%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes x-glo-burst { 0%, 18% { opacity: 0; transform: scale(.5); } 22% { opacity: 1; transform: scale(.6); } 60%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes x-glo-heart { 0%, 18% { transform: scale(1); } 24% { transform: scale(.8); } 36% { transform: scale(1.25); } 50%, 100% { transform: scale(1); } }
@keyframes x-glo-fillh { 0%, 18% { fill-opacity: 0; } 24%, 88% { fill-opacity: 1; } 96%, 100% { fill-opacity: 0; } }
@keyframes x-glo-flip { 0%, 15% { transform: rotate(0); } 45%, 70% { transform: rotate(180deg); } 100% { transform: rotate(0); } }
@keyframes x-glo-dfast { 0%, 2% { transform: translateX(2px); } 6%, 50% { transform: translateX(178px); } 54%, 100% { transform: translateX(2px); } }
@keyframes x-glo-dslow { 0%, 2% { transform: translateX(2px); } 30%, 60% { transform: translateX(178px); } 66%, 100% { transform: translateX(2px); } }
@keyframes x-glo-etx { 0% { transform: translateX(2px); } 65%, 85% { transform: translateX(138px); } 100% { transform: translateX(2px); } }
@keyframes x-glo-spring { 0%, 4% { transform: translateX(0); } 14% { transform: translateX(188px); } 24% { transform: translateX(148px); } 34% { transform: translateX(165px); } 44% { transform: translateX(154px); } 54% { transform: translateX(160px); } 62%, 90% { transform: translateX(158px); } 100% { transform: translateX(0); } }
@keyframes x-glo-alt1 { 0%, 38% { opacity: 1; } 44%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes x-glo-alt2 { 0%, 40% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes x-glo-sr1 { 0%, 3% { opacity: 0; } 6%, 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes x-glo-sr2 { 0%, 46% { opacity: 0; } 50%, 76% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes x-glo-j1 { 0%, 4% { opacity: .15; } 12%, 90% { opacity: 1; } 98%, 100% { opacity: .15; } }
@keyframes x-glo-j2 { 0%, 26% { opacity: .15; } 34%, 90% { opacity: 1; } 98%, 100% { opacity: .15; } }
@keyframes x-glo-j3 { 0%, 50% { opacity: .15; } 58%, 90% { opacity: 1; } 98%, 100% { opacity: .15; } }
@keyframes x-glo-spinhide { 0%, 62% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes x-glo-showat { 0%, 62% { opacity: 0; } 68%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes x-glo-bar { 0% { width: 0; } 62%, 100% { width: 100%; } }
@keyframes x-glo-uxa { 0%, 40% { opacity: 1; } 46%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes x-glo-uxb { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }