/* UX Laws previews (.x-law-*). Builds on .d-center / .d-screen / .d-line from demos.css. */
.x-law { flex-direction: column; gap: 8px; }
.x-law-c1 { font: 9px var(--mono); color: var(--text-2); text-align: center; }
.x-law-c1.top { color: var(--key); }
.x-law-cap { position: relative; height: 12px; width: 240px; }
.x-law-cap i { position: absolute; inset: 0; text-align: center; font: 9px var(--mono); font-style: normal; color: var(--key); animation-duration: 4s; animation-iteration-count: infinite; }
.x-law-cap i:first-child { animation-name: x-law-ca; } .x-law-cap i:last-child { animation-name: x-law-cb; }
@keyframes x-law-ca { 0%, 32% { opacity: 1; } 38%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-law-cb { 0%, 32% { opacity: 0; } 38%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes x-law-f1 { 0%, 28% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes x-law-f2 { 0%, 36% { opacity: 0; } 42%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
.x-law-a { position: relative; width: 220px; height: 80px; } .x-law-a.h90 { height: 90px; }
.x-law-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-law-svg2 { width: 220px; height: auto; display: block; }
.x-law-two { display: flex; gap: 16px; }
.x-law-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.x-law-col > span { font: 9px var(--mono); color: var(--key); }
.x-law-tk { width: 112px; height: 5px; border-radius: 3px; background: #26262d; overflow: hidden; position: relative; }
.x-law-tk i { display: block; height: 100%; background: var(--key); animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-out; }

/* proximity / similarity / common region / continuity */
.x-law-d { position: absolute; left: 0; top: 34px; width: 12px; height: 12px; border-radius: 50%; background: var(--key); transform: translateX(var(--ax)); animation: x-law-mv 4s ease-in-out infinite; }
.x-law-d.s { animation: none; transform: none; }
@keyframes x-law-mv { 0%, 12% { transform: translateX(var(--ax)); } 38%, 86% { transform: translateX(var(--bx)); } 100% { transform: translateX(var(--ax)); } }
.x-law-g { display: grid; grid-template-columns: repeat(6, 16px); gap: 10px; }
.x-law-g i { width: 16px; height: 16px; border-radius: 50%; background: #3a3a44; }
.x-law-g i.m { animation: x-law-sim 4s ease-in-out infinite; }
@keyframes x-law-sim { 0%, 15% { background: #3a3a44; border-radius: 50%; } 35%, 85% { background: var(--key); border-radius: 3px; } 100% { background: #3a3a44; border-radius: 50%; } }
.x-law-bx { position: absolute; top: 14px; height: 52px; border-radius: 10px; border: 1px solid #3a3a44; background: #18181d; box-sizing: border-box; animation: x-law-bx 4s ease-in-out infinite; }
@keyframes x-law-bx { 0%, 12% { opacity: 0; } 30%, 86% { opacity: 1; } 100% { opacity: 0; } }
.x-law-p { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #3a3a44; animation: x-law-pl 4s infinite; }
@keyframes x-law-pl { 0% { background: #3a3a44; transform: scale(1); } 5%, 12% { background: var(--key); transform: scale(1.35); } 22%, 100% { background: #3a3a44; transform: scale(1); } }
.x-law-fill { animation: x-law-fl 4s ease-in-out infinite; }
@keyframes x-law-fl { 0%, 25% { opacity: 0; } 45%, 85% { opacity: .7; } 100% { opacity: 0; } }

/* figure/ground, von restorff, banner blindness */
.x-law-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .68); animation: x-law-dim 4s ease-in-out infinite; }
@keyframes x-law-dim { 0%, 15% { opacity: 0; } 30%, 85% { opacity: 1; } 100% { opacity: 0; } }
.x-law-modal { position: absolute; left: 50%; top: 50%; width: 104px; height: 58px; margin: -29px 0 0 -52px; border-radius: 8px; background: #26262d; border: 1px solid #4a4a54; animation: x-law-md 4s ease-in-out infinite; }
.x-law-modal b { display: block; width: 50%; height: 6px; margin: 14px auto 9px; border-radius: 3px; background: #8a8a94; }
.x-law-modal i { display: block; width: 38px; height: 13px; margin: 0 auto; border-radius: 4px; background: var(--key); }
.x-law-modal em { display: none; }
@keyframes x-law-md { 0%, 15% { opacity: 0; transform: scale(.9); } 32%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.x-law-row { display: flex; gap: 8px; align-items: center; height: 40px; }
.x-law-pill { width: 24px; height: 14px; border-radius: 7px; background: #3a3a44; }
.x-law-pill.odd { background: var(--key); animation: x-law-odd 2s ease-in-out infinite; }
@keyframes x-law-odd { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--key-soft); } 50% { transform: scale(1.3); box-shadow: 0 0 0 6px var(--key-soft); } }
.x-law-ln { position: absolute; left: 12px; height: 5px; border-radius: 3px; background: #2a2a31; }
.x-law-ban { position: absolute; left: 124px; top: 14px; width: 66px; height: 40px; border: 1px dashed #4a4a54; border-radius: 3px; background: #1d1d23; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; opacity: .8; }
.x-law-ban b { font: 700 9px var(--sans); color: var(--key); } .x-law-ban i { width: 30px; height: 8px; border-radius: 2px; background: var(--key); opacity: .8; }
.x-law-gz { position: absolute; left: 0; top: 0; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--key); animation: x-law-gz 4s linear infinite; }
@keyframes x-law-gz { 0% { transform: translate(8px, 14px); } 14% { transform: translate(96px, 14px); } 22% { transform: translate(8px, 28px); } 36% { transform: translate(82px, 28px); } 44% { transform: translate(8px, 42px); } 56% { transform: translate(68px, 42px); } 64% { transform: translate(8px, 56px); } 74%, 90% { transform: translate(44px, 56px); } 100% { transform: translate(8px, 14px); } }
.x-law-sm { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 8px var(--mono); color: var(--key); }

/* aesthetic usability */
.x-law-fm { width: 112px; height: 76px; box-sizing: border-box; padding: 8px; background: #2a2a31; border: 1px solid #666; }
.x-law-fm i { display: block; height: 14px; border: 1px solid #888; background: #4a4a50; margin-bottom: 5px; }
.x-law-fm i:nth-child(2) { width: 80%; margin-left: 7px; }
.x-law-fm b { display: block; width: 34px; height: 12px; background: #777; margin: 8px 0 0 auto; }
.x-law-fm.nice { background: #1d1d23; border-color: #2a2a31; border-radius: 10px; }
.x-law-fm.nice i { border-radius: 5px; border-color: #3a3a44; background: #141418; margin-bottom: 6px; }
.x-law-fm.nice i:nth-child(2) { width: auto; margin-left: 0; }
.x-law-fm.nice b { width: 50%; height: 14px; margin: 0 auto; border-radius: 6px; background: var(--key); }
@keyframes x-law-ease0 { 0% { width: 0; } 30%, 86% { width: 50%; } 100% { width: 0; } }
@keyframes x-law-ease1 { 0% { width: 0; } 30%, 86% { width: 92%; } 100% { width: 0; } }

/* hick / choice overload / default / anchoring / goal gradient */
.x-law-ch { width: 112px; height: 58px; display: flex; flex-wrap: wrap; gap: 5px; align-content: center; justify-content: center; }
.x-law-ch i { background: #3a3a44; border-radius: 5px; }
.x-law-ch.f3 { gap: 6px; } .x-law-ch.f3 i { width: 90px; height: 14px; }
.x-law-ch.f12 i { width: 30px; height: 10px; }
@keyframes x-law-t1 { 0% { width: 0; } 22%, 100% { width: 100%; } }
@keyframes x-law-t2 { 0% { width: 0; } 72%, 100% { width: 100%; } }
.x-law-wall { width: 112px; height: 58px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.x-law-wall i { background: #3a3a44; border-radius: 3px; animation: x-law-tw 1.6s ease-in-out infinite; }
@keyframes x-law-tw { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.x-law-tri { width: 112px; height: 58px; display: flex; gap: 6px; align-items: center; justify-content: center; }
.x-law-tri i { position: relative; width: 28px; height: 38px; border: 1px solid #3a3a44; border-radius: 6px; background: #18181d; box-sizing: border-box; }
.x-law-tri i.best { width: 34px; height: 52px; border-color: var(--key); background: var(--key-soft); animation: x-law-bp 2s ease-in-out infinite; }
.x-law-tri em { position: absolute; top: 4px; left: 0; right: 0; text-align: center; font: 700 7px var(--mono); font-style: normal; color: var(--key); }
@keyframes x-law-bp { 50% { transform: scale(1.06); } }
.x-law-col > span.x-law-stuck { color: var(--muted); animation: x-law-bl 1.4s steps(1) infinite; }
@keyframes x-law-bl { 50% { opacity: .3; } }
.x-law-opts { position: relative; width: 160px; display: flex; flex-direction: column; gap: 5px; }
.x-law-opts div { display: flex; align-items: center; gap: 8px; height: 18px; padding: 0 8px; border: 1px solid #2a2a31; border-radius: 5px; background: #18181d; box-sizing: border-box; }
.x-law-opts div i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #5a5a64; box-sizing: border-box; }
.x-law-opts div b { flex: 1; height: 5px; border-radius: 3px; background: #2a2a31; }
.x-law-opts div.on { border-color: var(--key); } .x-law-opts div.on i { border-color: var(--key); background: radial-gradient(var(--key) 2.5px, transparent 3px); }
.x-law-opts em { position: absolute; right: 8px; top: 25px; font: 8px var(--mono); font-style: normal; color: var(--key); background: #18181d; padding-left: 4px; }
.x-law-ppl { display: flex; gap: 6px; }
.x-law-ppl i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a44; animation: x-law-pe 4s infinite; }
.x-law-ppl i.k { background: var(--key); }
@keyframes x-law-pe { 0% { opacity: .2; transform: scale(.6); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: .2; } }
.x-law-tags { display: flex; gap: 18px; align-items: center; }
.x-law-tag { font: 700 24px var(--mono); padding: 8px 14px; border-radius: 8px; }
.x-law-tag.a { color: #6a6a74; text-decoration: line-through; background: #18181d; animation: x-law-ta 4s ease-out infinite; }
.x-law-tag.b { color: #111; background: var(--key); animation: x-law-tb 4s ease-out infinite; }
.x-law-chip { font: 9px var(--mono); color: var(--key); border: 1px solid var(--key); border-radius: 10px; padding: 2px 8px; animation: x-law-tc 4s infinite; }
@keyframes x-law-ta { 0% { opacity: 0; transform: translateX(-8px); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes x-law-tb { 0%, 28% { opacity: 0; transform: scale(.8); } 40%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes x-law-tc { 0%, 45% { opacity: 0; } 55%, 88% { opacity: 1; } 100% { opacity: 0; } }
.x-law-gg { display: flex; align-items: center; gap: 8px; width: 240px; }
.x-law-gg > span { width: 56px; font: 9px var(--mono); color: var(--text-2); }
.x-law-gg .x-law-tk { width: 130px; height: 12px; border-radius: 4px; }
.x-law-gg .x-law-tk::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), #0e0e11 calc(12.5% - 2px) 12.5%); }
.x-law-gg .x-law-tk i { animation-timing-function: linear; }
.x-law-gg em { font: 9px var(--mono); font-style: normal; color: var(--key); opacity: 0; }
.x-law-gg em.d1 { animation: x-law-dn1 4s infinite; } .x-law-gg em.d2 { animation: x-law-dn2 4s infinite; }
@keyframes x-law-ga { 0% { width: 0; } 80%, 100% { width: 100%; } }
@keyframes x-law-gb { 0% { width: 25%; } 60%, 100% { width: 100%; } }
@keyframes x-law-dn1 { 0%, 78% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes x-law-dn2 { 0%, 58% { opacity: 0; } 64%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* fitts */
.x-law-a2 { position: relative; width: 240px; height: 120px; }
.x-law-svg3 { position: absolute; inset: 0; width: 240px; height: 120px; }
.x-law-tg { position: absolute; border-radius: 50%; border: 1.5px solid #4a4a54; background: #18181d; box-sizing: border-box; }
.x-law-tg.big { left: 62px; top: 40px; width: 40px; height: 40px; animation: x-law-tgb 4s infinite; }
.x-law-tg.sml { left: 208px; top: 18px; width: 14px; height: 14px; animation: x-law-tgs 4s infinite; }
.x-law-st { position: absolute; left: 17px; top: 75px; width: 10px; height: 10px; border-radius: 50%; border: 1px dashed #4a4a54; box-sizing: border-box; }
.x-law-cur { position: absolute; left: 0; top: 0; width: 12px; height: 16px; background: var(--text); clip-path: polygon(0 0, 0 100%, 35% 75%, 60% 100%, 75% 90%, 50% 65%, 100% 60%); animation: x-law-cu 4s infinite; }
@keyframes x-law-cu { 0%, 4% { transform: translate(22px, 80px); animation-timing-function: cubic-bezier(.1, .9, .3, 1); } 12%, 24% { transform: translate(76px, 58px); } 34%, 40% { transform: translate(22px, 80px); } 52% { transform: translate(170px, 40px); } 62% { transform: translate(213px, 28px); } 66% { transform: translate(204px, 21px); } 70%, 82% { transform: translate(211px, 24px); } 92%, 100% { transform: translate(22px, 80px); } }
@keyframes x-law-tgb { 0%, 10% { border-color: #4a4a54; background: #18181d; } 14%, 26% { border-color: var(--key); background: var(--key-soft); } 32%, 100% { border-color: #4a4a54; background: #18181d; } }
@keyframes x-law-tgs { 0%, 66% { border-color: #4a4a54; background: #18181d; } 70%, 84% { border-color: var(--key); background: var(--key); } 90%, 100% { border-color: #4a4a54; background: #18181d; } }

/* doherty */
.x-law-dh { position: relative; width: 236px; padding-top: 14px; }
.x-law-mk { position: absolute; left: 98px; top: 0; bottom: 14px; border-left: 1px dashed var(--key); }
.x-law-mk b { position: absolute; top: 0; left: 4px; font: 8px var(--mono); color: var(--key); white-space: nowrap; }
.x-law-r { display: flex; align-items: center; gap: 8px; height: 18px; margin: 8px 0; }
.x-law-r span { width: 42px; font: 9px var(--mono); color: var(--text-2); }
.x-law-r .x-law-tk { width: 120px; height: 8px; }
.x-law-r em { font: 9px var(--mono); font-style: normal; opacity: 0; }
.x-law-r em.ok { color: var(--key); animation: x-law-o1 4s infinite; } .x-law-r em.lost { color: #8a8a94; animation: x-law-o2 4s infinite; }
.x-law-r .x-law-tk i { animation-timing-function: linear; }
.x-law-r .x-law-tk i.a { animation-name: x-law-da; }
.x-law-r .x-law-tk i.b { animation-name: x-law-db; background: linear-gradient(90deg, var(--key) 48px, #8a8a94 48px) 0 0 / 120px 100% no-repeat; }
@keyframes x-law-da { 0% { width: 0; } 9%, 100% { width: 12%; } }
@keyframes x-law-db { 0% { width: 0; } 67%, 100% { width: 90%; } }
@keyframes x-law-o1 { 0%, 8% { opacity: 0; } 14%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes x-law-o2 { 0%, 55% { opacity: 0; } 68%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* tesler / postel / jakob */
.x-law-tb { position: relative; width: 236px; height: 80px; }
.x-law-box { position: absolute; top: 6px; left: 6px; width: 88px; height: 68px; border: 1px solid #2a2a31; border-radius: 8px; background: #18181d; }
.x-law-box.s { left: 142px; border-color: var(--key); }
.x-law-box b { position: absolute; left: 8px; top: 5px; font: 8px var(--mono); color: var(--muted); } .x-law-box.s b { color: var(--key); }
.x-law-sq { position: absolute; width: 14px; height: 14px; border-radius: 3px; background: #8a8a94; animation: x-law-mvq 4s ease-in-out infinite; }
.x-law-sq.stay { animation: none; }
@keyframes x-law-mvq { 0%, 12% { transform: none; background: #8a8a94; } 40%, 86% { transform: translateX(136px); background: var(--key); } 100% { transform: none; background: #8a8a94; } }
.x-law-in { position: relative; width: 190px; height: 30px; border: 1px solid var(--key); border-radius: 6px; background: #121216; box-shadow: 0 0 0 3px var(--key-soft); box-sizing: border-box; }
.x-law-in i { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 12px; font: 12px var(--mono); font-style: normal; color: var(--text); opacity: 0; animation: x-law-ty 4.5s infinite; }
.x-law-in i:nth-child(2) { animation-delay: 1.5s; } .x-law-in i:nth-child(3) { animation-delay: 3s; }
@keyframes x-law-ty { 0% { opacity: 0; } 4%, 28% { opacity: 1; } 33%, 100% { opacity: 0; } }
.x-law-arr { color: var(--muted); font: 12px var(--mono); line-height: 1; }
.x-law-out { display: flex; align-items: center; gap: 8px; font: 12px var(--mono); padding: 5px 12px; border-radius: 6px; background: #18181d; border: 1px solid #2a2a31; }
.x-law-out em { color: var(--key); display: flex; }
.x-law-sc { position: relative; width: 118px; height: 84px; border: 1px solid #2a2a31; border-radius: 6px; background: #131317; overflow: hidden; box-sizing: border-box; }
.x-law-sc > i, .x-law-sc > b { position: absolute; }
.x-law-sc .lg { left: 8px; top: 8px; width: 14px; height: 8px; background: #3a3a44; border-radius: 2px; }
.x-law-sc .sr { left: 28px; top: 8px; width: 52px; height: 8px; background: #26262d; border-radius: 4px; }
.x-law-sc .cart { left: 98px; top: 7px; width: 12px; height: 10px; border-radius: 2px; background: var(--key); }
.x-law-sc .cart.bl { left: 8px; top: 66px; }
.x-law-sc .av { left: 98px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #4a4a54; }
.x-law-sc .q { left: 92px; top: 20px; font: 700 12px var(--sans); color: var(--key); opacity: 0; animation: x-law-q 4s infinite; }
.x-law-ln2 { position: absolute; left: 8px; height: 5px; border-radius: 3px; background: #26262d; }
.x-law-sc .cu { left: 0; top: 0; width: 9px; height: 12px; background: var(--text); clip-path: polygon(0 0, 0 100%, 35% 75%, 60% 100%, 75% 90%, 50% 65%, 100% 60%); }
.x-law-sc .cu.ok { animation: x-law-j1 4s ease-in-out infinite; } .x-law-sc .cu.odd { animation: x-law-j2 4s ease-in-out infinite; }
@keyframes x-law-j1 { 0%, 8% { transform: translate(56px, 56px); } 28%, 62% { transform: translate(102px, 10px); } 85%, 100% { transform: translate(56px, 56px); } }
@keyframes x-law-j2 { 0%, 8% { transform: translate(56px, 56px); } 22%, 34% { transform: translate(102px, 10px); } 58%, 76% { transform: translate(10px, 68px); } 92%, 100% { transform: translate(56px, 56px); } }
@keyframes x-law-q { 0%, 20% { opacity: 0; } 24%, 36% { opacity: 1; } 42%, 100% { opacity: 0; } }

/* miller / peak-end / serial position / zeigarnik */
.x-law-dgs { display: flex; align-items: flex-end; }
.x-law-gp { display: inline-flex; padding: 0 1px; border-bottom: 2px solid transparent; animation: x-law-gp 4s ease-in-out infinite; }
.x-law-gp i { font: 600 20px var(--mono); font-style: normal; width: 13px; text-align: center; color: var(--text); }
@keyframes x-law-gp { 0%, 14% { margin-right: 0; border-color: transparent; } 34%, 86% { margin-right: 12px; border-color: var(--key); } 100% { margin-right: 0; border-color: transparent; } }
.x-law-curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: x-law-dr 4s ease-in-out infinite; }
@keyframes x-law-dr { 0% { stroke-dashoffset: 1; } 55%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.x-law-pk { animation: x-law-pkk 4s infinite; }
@keyframes x-law-pkk { 0%, 50% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
.x-law-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.x-law-bars i { width: 20px; border-radius: 3px 3px 0 0; background: #3a3a44; transform-origin: bottom; animation: x-law-gr 4s ease-out infinite; }
.x-law-bars i.k { background: var(--key); }
@keyframes x-law-gr { 0% { transform: scaleY(0); } 18%, 88% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.x-law-bl { display: flex; justify-content: space-between; width: 188px; font: 8px var(--mono); color: var(--key); }
.x-law-zg { display: flex; align-items: center; gap: 18px; }
.x-law-ring { position: relative; width: 56px; height: 56px; }
.x-law-ring svg { width: 56px; height: 56px; }
.x-law-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px var(--mono); }
.x-law-arc { animation: x-law-arc 4s ease-in-out infinite; }
@keyframes x-law-arc { 0% { stroke-dashoffset: 138.2; } 40%, 90% { stroke-dashoffset: 34.5; } 100% { stroke-dashoffset: 138.2; } }
.x-law-list { width: 110px; display: flex; flex-direction: column; gap: 6px; }
.x-law-list > div { display: flex; align-items: center; gap: 7px; height: 14px; }
.x-law-list i { flex: 1; height: 5px; border-radius: 3px; background: #2a2a31; }
.x-law-list .dn em { display: flex; color: var(--key); opacity: .55; }
.x-law-list .op em { width: 12px; height: 12px; border: 1.5px solid var(--key); border-radius: 50%; box-sizing: border-box; animation: x-law-zp 1.6s ease-in-out infinite; }
.x-law-list .op i { flex: none; width: 24px; background: #3a3a44; }
.x-law-list .op u { text-decoration: none; font: 8px var(--mono); color: var(--key); }
@keyframes x-law-zp { 50% { box-shadow: 0 0 0 4px var(--key-soft); } }