/* ============================================================
   Vocabulary demos — tiny live examples for each term
   ============================================================ */

.vocab {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.v-aa { font-size: 58px; line-height: 1; color: var(--ink); }
.v-stack { display: grid; gap: 14px; justify-items: center; color: var(--ink); }
.v-row { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.v-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 210px; font-size: 11px; color: var(--ink-2); }
.v-lead p { margin: 0; }
.v-sw { display: flex; gap: 6px; }
.v-sw i { width: 30px; height: 50px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .25); }

.v-duo {
  display: block; width: 130px; height: 84px; border-radius: 10px;
  background: radial-gradient(circle at 72% 32%, #20217a 0 13%, transparent 14%), radial-gradient(ellipse 80% 60% at 25% 100%, #20217a 0 60%, transparent 61%), radial-gradient(ellipse 70% 45% at 88% 100%, #20217a 0 60%, transparent 61%), #ff6f91;
}
.v-neon { padding: 12px 18px; border-radius: 10px; background: #0d0221; color: #ff3cac; font: 900 26px/1 Orbitron, sans-serif; letter-spacing: .08em; text-shadow: 0 0 6px #ff3cac, 0 0 18px #ff3cac; }
.v-shape { display: block; width: 42px; height: 42px; }
.v-accent { display: grid; gap: 7px; width: 132px; }
.v-accent i { height: 8px; border-radius: 4px; background: var(--line); }
.v-accent i:nth-child(2) { width: 74%; }
.v-accent i:nth-child(3) { width: 52%; }
.v-accent b { justify-self: start; margin-top: 4px; padding: 5px 12px; border-radius: 99px; background: #2b45e8; color: #fff; font-size: 12px; }
.v-contrast { display: flex; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.v-contrast span { padding: 12px 16px; font: 800 30px/1 Inter, sans-serif; }
.v-contrast span:first-child { background: #000; color: #fff; }
.v-contrast span:last-child { background: #fff; color: #000; }
.v-grad { display: block; width: 140px; height: 56px; border-radius: 12px; background: linear-gradient(90deg, #ff6a3d, #ff2d92 50%, #8f5bff); }
.v-mesh { display: block; width: 140px; height: 84px; border-radius: 14px; background: radial-gradient(at 18% 22%, #7b61ff 0, transparent 55%), radial-gradient(at 82% 26%, #ff5fa2 0, transparent 55%), radial-gradient(at 38% 92%, #2de2e6 0, transparent 55%), radial-gradient(at 92% 92%, #ffb347 0, transparent 55%), #fbe7ef; }
.v-holo { display: block; width: 140px; height: 84px; border-radius: 14px; background: linear-gradient(120deg, rgba(255, 255, 255, .55), transparent 40%, rgba(255, 255, 255, .35) 60%, transparent 80%), conic-gradient(from 200deg at 30% 70%, #c7e3ff, #f3c7ff, #c7fff0, #fff2c7, #ffc7e0, #c7e3ff); }
.v-dark { padding: 12px 16px; border-radius: 10px; background: #111214; color: #f2f3f5; box-shadow: 0 0 0 1px #2a2c31; font-size: 15px; }
.v-dark span { display: block; margin-top: 2px; font: 11px/1.3 var(--f-mono); color: #8a8f98; }

.v-tile { display: block; width: 84px; height: 58px; background: var(--ink); }
.v-btn { padding: 10px 20px; background: var(--ink); color: var(--panel); font-size: 14px; font-weight: 600; }
.v-squig {
  display: block; width: 150px; height: 30px; background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 20'%3E%3Cpath d='M2 10 Q 12 0 22 10 T 42 10 T 62 10 T 82 10 T 102 10' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 20'%3E%3Cpath d='M2 10 Q 12 0 22 10 T 42 10 T 62 10 T 82 10 T 102 10' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.v-elev { position: relative; width: 132px; height: 86px; }
.v-elev i { position: absolute; width: 76px; height: 48px; border-radius: 6px; background: #fff; }
.v-elev i:nth-child(1) { left: 0; top: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .22); }
.v-elev i:nth-child(2) { left: 26px; top: 17px; box-shadow: 0 4px 10px rgba(0, 0, 0, .24); }
.v-elev i:nth-child(3) { left: 52px; top: 34px; box-shadow: 0 14px 26px rgba(0, 0, 0, .32); }
.v-plate { padding: 14px 18px; border-radius: 14px; }
.v-bevel { padding: 6px 26px; background: #c0c0c0; color: #000; font: 12px Tahoma, Verdana, sans-serif; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
.v-glow { display: block; width: 96px; height: 46px; border-radius: 12px; background: #0d0221; box-shadow: 0 0 0 2px #2de2e6, 0 0 20px #2de2e6, inset 0 0 14px rgba(45, 226, 230, .6); }
.v-glass { position: relative; width: 150px; height: 92px; }
.v-glass i { position: absolute; border-radius: 50%; }
.v-glass i:nth-child(1) { width: 60px; height: 60px; left: 12px; top: 4px; background: #ff5fa2; }
.v-glass i:nth-child(2) { width: 52px; height: 52px; right: 12px; bottom: 2px; background: #22c1f2; }
.v-glass b { position: absolute; inset: 18px 22px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .55); border-radius: 12px; background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.v-gloss { position: relative; overflow: hidden; padding: 12px 26px; border-radius: 99px; background: linear-gradient(180deg, #8fd0ff, #3b8cff 60%, #5fb2ff); color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(20, 40, 120, .5); box-shadow: inset 0 -3px 6px rgba(20, 50, 160, .35), 0 4px 10px rgba(59, 140, 255, .4); }
.v-gloss::before { content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 45%; border-radius: 99px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .1)); }

.v-grain { position: relative; display: block; width: 140px; height: 84px; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, #ff9f6b, #c4704f); }
.v-grain::after { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .5; }
.v-halftone {
  display: block; width: 140px; height: 84px;
  background: radial-gradient(circle, var(--ink) 0 2.6px, transparent 3px) 0 0 / 9px 9px;
  -webkit-mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .06)); mask: linear-gradient(90deg, #000, rgba(0, 0, 0, .06));
}
.v-dither { display: flex; width: 150px; height: 60px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.v-dither i { flex: 1; }
.v-dither i:nth-child(1) { background: var(--ink); }
.v-dither i:nth-child(2) { background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 6px 6px; }
.v-dither i:nth-child(3) { background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 100%) 0 0 / 6px 6px; }
.v-scan { display: grid; place-items: center; width: 140px; height: 74px; border-radius: 10px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .38) 0 1px, transparent 1px 3px), #12301c; color: #33ff66; font: 26px/1 VT323, monospace; text-shadow: 0 0 6px rgba(51, 255, 102, .6); }
.v-paper { display: block; width: 110px; height: 84px; background: linear-gradient(90deg, transparent 18%, #e57373 18% calc(18% + 1px), transparent 0), repeating-linear-gradient(#fdfbf4 0 13px, #c3d5ea 13px 14px); box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transform: rotate(-3deg); }
.v-pattern { display: block; width: 140px; height: 84px; border-radius: 10px; background: radial-gradient(#161616 2px, transparent 2.5px) 0 0 / 12px 12px, repeating-linear-gradient(45deg, #ff5c8a 0 9px, #ffd23f 9px 18px); }

.v-wire { position: relative; width: 150px; height: 92px; padding: 8px; border-radius: 10px; background: var(--panel); box-shadow: 0 0 0 1px var(--line); }
.v-wire i { display: block; border-radius: 3px; background: var(--ink-2); opacity: .85; }
.v-free i { position: absolute; }
.v-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-content: start; background: repeating-linear-gradient(90deg, rgba(255, 46, 126, .18) 0 1px, transparent 1px calc(100% / 12)) content-box; }
.v-grid i { height: 13px; }
.v-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 5px; }
.v-bento i { border-radius: 5px; }
.v-mini { width: 70px; }
.v-airy { display: grid; align-content: center; gap: 16px; padding: 14px; }
.v-airy i { height: 7px; }
.v-dense { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 3px; padding: 5px; }
.v-dense i { height: 17px; }
.v-stackw { display: grid; align-content: center; gap: 8px; padding: 14px; }

.v-motion { position: relative; display: grid; place-items: center; width: 180px; height: 90px; }
.v-ease { grid-template-columns: auto 1fr; place-items: initial; align-content: center; align-items: center; gap: 14px 10px; }
.v-ease span { font: 11px/1 var(--f-mono); color: var(--muted); }
.v-ease i { position: relative; height: 2px; border-radius: 2px; background: var(--line); }
.v-ease i::after { content: ""; position: absolute; left: 0; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.term:is(:hover, :focus-within) .v-ease i:nth-of-type(1)::after { animation: v-move 1.4s linear infinite alternate; }
.term:is(:hover, :focus-within) .v-ease i:nth-of-type(2)::after { animation: v-move 1.4s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
@keyframes v-move { to { left: calc(100% - 12px); } }
.v-springdot { display: block; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); transform: translateX(-54px); }
.term:is(:hover, :focus-within) .v-springdot { animation: v-spring 1.5s cubic-bezier(.34, 1.8, .64, 1) infinite; }
@keyframes v-spring { 0% { transform: translateX(-54px); } 60%, 100% { transform: translateX(54px); } }
.v-stagger { place-items: initial; align-content: center; gap: 7px; width: 140px; }
.v-stagger i { height: 10px; border-radius: 5px; background: var(--ink-2); }
.v-stagger i:nth-child(2) { width: 80%; }
.v-stagger i:nth-child(3) { width: 90%; }
.v-stagger i:nth-child(4) { width: 60%; }
.term:is(:hover, :focus-within) .v-stagger i { animation: v-in 1.8s ease-out infinite; }
.term:is(:hover, :focus-within) .v-stagger i:nth-child(2) { animation-delay: .12s; }
.term:is(:hover, :focus-within) .v-stagger i:nth-child(3) { animation-delay: .24s; }
.term:is(:hover, :focus-within) .v-stagger i:nth-child(4) { animation-delay: .36s; }
@keyframes v-in { 0% { opacity: 0; transform: translateX(-14px); } 30%, 100% { opacity: 1; transform: none; } }
.v-heart { display: block; font-style: normal; color: var(--muted); }
.v-heart::before { content: "\2665"; font-size: 46px; line-height: 1; }
.term:is(:hover, :focus-within) .v-heart { animation: v-pop 1.4s ease-out infinite; }
@keyframes v-pop { 0% { transform: scale(1); color: var(--muted); } 14% { transform: scale(1.4); color: #ff2e7e; } 30%, 100% { transform: scale(1); color: #ff2e7e; } }
.v-marquee { align-self: center; width: 100%; overflow: hidden; white-space: nowrap; padding: 10px 0; border-block: 2px solid #111; background: #ffde59; color: #111; font: 700 13px/1 "Space Grotesk", sans-serif; }
.v-marquee span { display: inline-block; }
.term:is(:hover, :focus-within) .v-marquee span { animation: v-marq 5s linear infinite; }
@keyframes v-marq { to { transform: translateX(-50%); } }
.vgroup[data-group="motion"] .term-demo::after { content: "hover to play"; position: absolute; right: 8px; bottom: 6px; font: 10px/1 var(--f-mono); color: var(--muted); }
.vgroup[data-group="motion"] .term:is(:hover, :focus-within) .term-demo::after { content: "playing"; }