/* Generative Image previews (.x-gi-*). Builds on .d-center from demos.css. */
.x-gi { gap: 10px; }
.x-gi-pc { width: 112px; display: flex; flex-direction: column; }
.x-gi-p { background: #18181d; border: 1px solid #2a2a31; border-radius: 6px; padding: 7px 8px; font: 9px/1.45 var(--mono); color: var(--text-2); }
.x-gi-p.wide { width: 244px; text-align: center; }
.x-gi-p b { font-weight: 500; color: var(--key); background: var(--key-soft); border-radius: 2px; padding: 0 1px; animation: x-gi-hl 4s ease-in-out infinite; }
.x-gi-still .x-gi-p b { animation: none; opacity: 1; }
.x-gi-l { font: 9px var(--mono); color: var(--key); margin-top: 6px; }
@keyframes x-gi-hl { 0%, 22% { opacity: .35; } 34%, 80% { opacity: 1; } 92%, 100% { opacity: .35; } }

/* frames */
.x-gi-f { position: relative; width: 112px; height: 112px; border-radius: 6px; overflow: hidden; border: 1px solid #2a2a31; background: #111; flex: none; }
.x-gi-fs { width: 86px; height: 86px; } .x-gi-fs .x-gi-sc { transform: scale(.768); }
.x-gi-fm { width: 34px; height: 34px; border-radius: 4px; } .x-gi-fm .x-gi-sc { transform: scale(.304); }
.x-gi-fl { width: 70px; height: 70px; } .x-gi-fl .x-gi-sc { transform: scale(.625); }
.x-gi-fk { width: 56px; height: 56px; } .x-gi-fk .x-gi-sc { transform: scale(.5); }
.x-gi-fq { width: 54px; height: 54px; } .x-gi-fq .x-gi-sc { transform: scale(.482); }
.x-gi-a, .x-gi-b { position: absolute; inset: 0; }
.x-gi-b { animation: x-gi-xf 4s ease-in-out infinite; }
@keyframes x-gi-xf { 0%, 22% { opacity: 0; } 34%, 80% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* the scene (a ceramic kettle) */
.x-gi-sc { position: absolute; left: 0; top: 0; width: 112px; height: 112px; overflow: hidden; transform-origin: 0 0; filter: var(--fl, none); }
.x-gi-bgl { position: absolute; inset: -8px; background: var(--bg); filter: blur(var(--bb, 0px)); }
.x-gi-bgx { position: absolute; inset: 8px; }
.x-gi-lt { position: absolute; inset: 0; background: var(--lt, none); }
.x-gi-gr { position: absolute; inset: 0; opacity: var(--gr, 0); pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .55) .8px, transparent 1.1px) 0 0 / 3px 3px, radial-gradient(rgba(0, 0, 0, .6) .8px, transparent 1.1px) 1.5px 1.5px / 3px 3px; }
.x-gi-sh { position: absolute; left: var(--x, 50%); top: calc(var(--y, 60%) + var(--h, 42) * .5px - 3px); width: calc(var(--w, 38) * 1.15px); margin-left: calc(var(--w, 38) * -.575px); height: 8px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .5), transparent 70%); opacity: calc(var(--o, 1) * var(--sho, .8)); }
.x-gi-sj { position: absolute; left: var(--x, 50%); top: var(--y, 60%); width: calc(var(--w, 38) * 1px); height: calc(var(--h, 42) * 1px);
  margin: calc(var(--h, 42) * -.5px) 0 0 calc(var(--w, 38) * -.5px); transform: rotate(calc(var(--rot, 0) * 1deg));
  background-image: var(--tx, linear-gradient(transparent, transparent)); background-color: var(--c, #7f9d7b);
  border: var(--bd, 0 solid transparent); border-radius: var(--r, 12px 12px 8px 8px); opacity: var(--o, 1); filter: blur(calc(var(--bl, 0) * 1px)); box-shadow: var(--bs, none); }
.x-gi-sj::before { content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 8px; margin-left: -7px; border-radius: 7px 7px 0 0; background: var(--c, #7f9d7b); border: var(--bd, 0 solid transparent); }
.x-gi-sj::after { content: ""; position: absolute; right: -9px; top: 8px; width: 12px; height: 6px; background: var(--c, #7f9d7b); border-radius: 0 6px 6px 0; transform: rotate(-24deg); }

/* scene pieces */
.x-gi-st { position: absolute; left: var(--l); top: 24%; width: 2px; height: 16px; border-radius: 2px; background: linear-gradient(rgba(255, 255, 255, .8), transparent); animation: x-gi-steam 2s ease-in infinite; animation-delay: var(--dl, 0s); }
@keyframes x-gi-steam { 0% { opacity: 0; transform: translateY(8px) scaleY(.6); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(4px, -14px) scaleY(1.3); } }
.x-gi-tw { position: absolute; left: 70%; top: 56%; width: 28px; height: 18px; background: #e8e2d0; border-radius: 3px; transform: rotate(-6deg); box-shadow: 0 2px 3px rgba(0, 0, 0, .25); }
.x-gi-lm { position: absolute; left: 8%; top: 62%; width: 15px; height: 11px; border-radius: 50%; background: #f2d13c; box-shadow: 0 2px 3px rgba(0, 0, 0, .3); }
.x-gi-mug { position: absolute; left: 72%; top: 54%; width: 16px; height: 15px; border-radius: 0 0 6px 6px; background: #d9d2c4; }
.x-gi-mug::after { content: ""; position: absolute; right: -6px; top: 3px; width: 7px; height: 7px; border: 2px solid #d9d2c4; border-radius: 50%; }
.x-gi-hd { position: absolute; left: 50%; top: 26%; width: 26px; height: 30px; margin-left: -13px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 30% 52%, var(--ec, #222) 1.5px, transparent 2px), radial-gradient(circle at 70% 52%, var(--ec, #222) 1.5px, transparent 2px), radial-gradient(circle at 50% 80%, rgba(150, 60, 60, .8) 2px, transparent 3px), var(--sk, #e0b894); }
.x-gi-hd::before { content: ""; position: absolute; left: -3px; right: -3px; top: -4px; height: var(--hh, 55%); border-radius: 50% 50% 12px 12px; background: var(--hc, #3a2a20); }
.x-gi-hd::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.x-gi-hd.lg { top: 24%; width: 50px; height: 58px; margin-left: -25px; }
.x-gi-hd.gloss::after { background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .8), transparent 42%); }
.x-gi-hd.pore::after { background: radial-gradient(rgba(120, 60, 40, .3) .8px, transparent 1.2px) 0 0 / 5px 5px, radial-gradient(rgba(120, 60, 40, .2) .8px, transparent 1.2px) 2.5px 2.5px / 5px 5px; }
.x-gi-bd { position: absolute; left: 50%; top: 52%; width: 56px; height: 44px; margin-left: -28px; border-radius: 24px 24px 0 0; background-color: var(--c, #555); }
.x-gi-lg { position: absolute; left: 50%; top: 62%; width: 20px; margin: -6px 0 0 -10px; }
.x-gi-lg em { display: block; height: 3px; margin: 2px 0; border-radius: 2px; background: rgba(255, 255, 255, .85); }
.x-gi-lg em + em { width: 65%; }
.x-gi-bk { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 210, 150, .55); }
.x-gi-wm { position: absolute; left: 22%; top: 38%; font: 700 17px var(--sans); letter-spacing: 2px; color: rgba(255, 255, 255, .38); transform: rotate(-25deg); }
.x-gi-sw { position: absolute; bottom: 6px; width: 12px; height: 12px; border-radius: 3px; background: var(--c); border: 1px solid rgba(0, 0, 0, .3); }
.x-gi-th { position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 33%, rgba(198, 255, 61, .45) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(198, 255, 61, .45) 66% calc(66% + 1px), transparent calc(66% + 1px)),
    linear-gradient(transparent 33%, rgba(198, 255, 61, .45) 33% calc(33% + 1px), transparent calc(33% + 1px) 66%, rgba(198, 255, 61, .45) 66% calc(66% + 1px), transparent calc(66% + 1px)); }
.x-gi-tt { position: absolute; left: 10%; top: 9%; font: italic 700 14px/1 Georgia, serif; color: #2a2a2a; }
.x-gi-bar { position: absolute; left: 0; right: 0; height: 16%; background: #000; }
.x-gi-bt1 { top: 0; } .x-gi-bt2 { bottom: 0; }
.x-gi-bulb { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: var(--h); }
.x-gi-hs { position: absolute; background: var(--c); border-top: 4px solid rgba(60, 30, 20, .55); box-shadow: 2px 3px 0 rgba(0, 0, 0, .25); }
.x-gi-ts { position: absolute; left: 0; right: 0; height: 34%; backdrop-filter: blur(2.6px); -webkit-backdrop-filter: blur(2.6px); }
.x-gi-ts1 { top: 0; -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.x-gi-ts2 { bottom: 0; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
.x-gi-pol { position: absolute; inset: 0; box-sizing: border-box; border: 7px solid #f2efe6; border-bottom-width: 22px; }
.x-gi-vg { position: absolute; inset: 0; background: radial-gradient(transparent 40%, rgba(0, 0, 0, .55)); }
.x-gi-dt { position: absolute; right: 7px; bottom: 6px; font: 8px var(--mono); color: #ff9b3d; font-style: normal; }
.x-gi-spec { position: absolute; left: 36px; top: 52px; width: 5px; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .7); filter: blur(1px); }
.x-gi-sq { position: absolute; left: 28%; top: 30%; width: 44px; height: 44px; background: #7fa05a; }
.x-gi-iso { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; }
.x-gi-dot { position: absolute; border-radius: 50%; background: var(--c); }
.x-gi-pp { position: absolute; left: -10%; right: -10%; height: 40%; background: var(--c); border-radius: 50% 50% 0 0 / 30% 30% 0 0; box-shadow: 0 calc(var(--z) * -1) calc(var(--z) * 1.5) rgba(0, 0, 0, .4); }
.x-gi-wl { position: absolute; left: 0; right: 0; top: 58%; bottom: 0; background: repeating-linear-gradient(rgba(255, 255, 255, .4) 0 1px, transparent 1px 6px); }
.x-gi-str { position: absolute; inset: 0; background: repeating-linear-gradient(-20deg, rgba(255, 140, 40, .45) 0 2px, transparent 2px 11px); }
.x-gi-ln { position: absolute; left: 12%; top: 14%; width: 40px; height: 40px; border: 1px solid #8fb0e0; transform: rotate(30deg); }
.x-gi-ln.c { left: 62%; top: 12%; width: 34px; height: 34px; border-radius: 50%; transform: none; }
.x-gi-cr { position: absolute; width: 5px; height: 4px; border-radius: 50%; background: #5a4026; }
.x-gi-lf { position: absolute; left: 74%; top: 20%; width: 24px; height: 14px; border-radius: 0 100% 0 100%; background: #7d9a52; transform: rotate(-20deg); }

/* fixed overlays on a result frame */
.x-gi-ref { position: absolute; left: 5px; top: 5px; width: 28px; height: 28px; border: 1px solid var(--key); border-radius: 4px; background: #1a1a1f; }
.x-gi-ref em { position: absolute; left: 50%; top: 50%; width: 9px; height: 17px; margin: -8px 0 0 -4px; border-radius: 3px; background: #8fb08a; }
.x-gi-ref.sty { background: linear-gradient(160deg, #0f6b73, #e8863a); }
.x-gi-ref span { position: absolute; left: 50%; top: 50%; width: 12px; height: 14px; margin: -7px 0 0 -6px; border-radius: 50%; background: #e0b894; border-top: 5px solid var(--hc); }
.x-gi-chip { position: absolute; left: 5px; top: 5px; font: 8px var(--mono); padding: 2px 5px; border: 1px solid var(--key); border-radius: 4px; color: var(--key); background: rgba(14, 14, 17, .85); font-style: normal; }
.x-gi-mask { position: absolute; inset: 5px; border: 1px dashed var(--key); background: var(--key-soft); border-radius: 4px;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 26% 32%, 26% 80%, 74% 80%, 74% 32%, 26% 32%); }
.x-gi-ghost { position: absolute; left: 50%; top: 60%; width: 38px; height: 42px; margin: -21px 0 0 -19px; border: 1px dashed var(--key); border-radius: 12px 12px 8px 8px; }
.x-gi-cfg { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.x-gi-cfg i { position: absolute; left: 0; top: -1px; bottom: -1px; border-radius: 2px; background: var(--key); animation: x-gi-cfg 4s ease-in-out infinite; }
@keyframes x-gi-cfg { 0%, 22% { width: 12%; } 34%, 80% { width: 92%; } 92%, 100% { width: 12%; } }

/* aspect ratio / outpainting */
.x-gi-ar { position: absolute; left: 50%; top: 50%; width: 104px; height: 58px; margin: -29px 0 0 -52px; overflow: hidden; border: 1px solid var(--key); animation: x-gi-ar 4s ease-in-out infinite; }
.x-gi-ar .x-gi-sc { left: 50%; top: 50%; margin: -56px 0 0 -56px; }
@keyframes x-gi-ar { 0%, 38% { width: 104px; height: 58px; margin: -29px 0 0 -52px; } 52%, 90% { width: 64px; height: 80px; margin: -40px 0 0 -32px; } 100% { width: 104px; height: 58px; margin: -29px 0 0 -52px; } }
.x-gi-arl { position: absolute; left: 0; right: 0; bottom: 4px; height: 12px; }
.x-gi-arl i { position: absolute; left: 0; right: 0; text-align: center; font: 9px var(--mono); color: var(--key); font-style: normal; }
.x-gi-arl i:first-child { animation: x-gi-a1 4s infinite; } .x-gi-arl i:last-child { animation: x-gi-a2 4s infinite; }
@keyframes x-gi-a1 { 0%, 40% { opacity: 1; } 46%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x-gi-a2 { 0%, 40% { opacity: 0; } 46%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
.x-gi-op { position: absolute; left: 0; top: 34px; width: 112px; height: 52px; overflow: hidden; animation: x-gi-op 4s ease-in-out infinite; }
.x-gi-op .x-gi-sc { top: -34px; }
.x-gi-op::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--key-soft), transparent 35%, transparent 65%, var(--key-soft)); animation: x-gi-opt 4s ease-in-out infinite; }
@keyframes x-gi-op { 0%, 20% { clip-path: inset(0 30px); } 55%, 85% { clip-path: inset(0); } 100% { clip-path: inset(0 30px); } }
@keyframes x-gi-opt { 0%, 40% { opacity: 0; } 58% { opacity: 1; } 85%, 100% { opacity: 0; } }
.x-gi-opbox { position: absolute; left: 30px; top: 34px; width: 52px; height: 52px; border: 1px dashed var(--key); box-sizing: border-box; }

/* 3-up rows, batch */
.x-gi-col { flex-direction: column; gap: 6px; }
.x-gi-3 { display: flex; gap: 8px; }
.x-gi-3c { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.x-gi-3c > span { font: 8px var(--mono); color: var(--muted); }
.x-gi-f.cyc { animation: x-gi-cyc 3.6s infinite; animation-delay: calc(var(--i) * 1.2s); }
@keyframes x-gi-cyc { 0%, 30% { border-color: var(--key); box-shadow: 0 0 0 1px var(--key); } 34%, 100% { border-color: #2a2a31; box-shadow: none; } }
.x-gi-f.rr1, .x-gi-f.rr2 { animation: x-gi-rr 3.6s infinite; }
.x-gi-f.rr2 { animation-delay: .15s; }
@keyframes x-gi-rr { 0%, 30% { opacity: 1; } 36% { opacity: .08; } 48%, 100% { opacity: 1; } }
.x-gi-bt { display: grid; grid-template-columns: 54px 54px; gap: 4px; width: 112px; height: 112px; place-content: center; }
.x-gi-bt .x-gi-fq { animation: x-gi-pop 4s infinite; animation-delay: calc(var(--i) * .25s); }
.x-gi-bt .x-gi-fq:nth-child(3) { animation: x-gi-pop 4s infinite, x-gi-pick 4s infinite; animation-delay: .5s, 0s; }
@keyframes x-gi-pop { 0% { opacity: 0; transform: scale(.8); } 14%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes x-gi-pick { 0%, 60% { border-color: #2a2a31; } 68%, 90% { border-color: var(--key); } 100% { border-color: #2a2a31; } }

/* model cards */
.x-gi-mc { width: 244px; background: #18181d; border: 1px solid #2a2a31; border-radius: 8px; padding: 10px 12px; }
.x-gi-mn { font: 700 14px var(--sans); letter-spacing: -.01em; margin-bottom: 4px; }
.x-gi-mr { display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 4px 0 4px 6px; margin-left: -6px; border-left: 2px solid transparent; animation: x-gi-mrow 4.5s infinite; animation-delay: calc(var(--i) * 1.5s); }
.x-gi-mr i { font: 8px/1.5 var(--mono); color: var(--key); font-style: normal; }
.x-gi-mr span { font: 10px/1.35 var(--sans); color: var(--text-2); }
.x-gi-mr span.m { font: 9px/1.4 var(--mono); }
@keyframes x-gi-mrow { 0%, 28% { border-left-color: var(--key); background: var(--key-soft); } 34%, 100% { border-left-color: transparent; background: transparent; } }

/* failures */
.x-gi-fail { flex-direction: column; gap: 9px; }
.x-gi-pair { display: flex; align-items: center; gap: 12px; }
.x-gi-side { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.x-gi-row { display: flex; gap: 4px; }
.x-gi-tag { font: 9px var(--mono); color: var(--muted); text-decoration: line-through; }
.x-gi-tag.on { color: var(--key); text-decoration: none; }
.x-gi-arr { font: normal 12px var(--mono); color: var(--muted); margin-top: 10px; }
.x-gi-fixt { font: 10px/1.35 var(--sans); color: var(--text-2); text-align: center; max-width: 244px; }
.x-gi-fix .x-gi-f { animation: x-gi-fixin 3.6s ease-in-out infinite; }
@keyframes x-gi-fixin { 0%, 12% { opacity: .25; border-color: #2a2a31; } 30%, 86% { opacity: 1; border-color: var(--key); } 100% { opacity: .25; border-color: #2a2a31; } }
.x-gi-pm { position: absolute; left: 50%; top: 52%; width: 38px; height: 28px; margin-left: -19px; border-radius: 8px 8px 14px 14px; background: #d9a982; }
.x-gi-fg { position: absolute; width: 6px; border-radius: 3px; background: #d9a982; transform-origin: 50% 100%; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .35); }
.x-gi-sg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 12px var(--mono); letter-spacing: 1px; color: #e8e2d0; white-space: nowrap; font-style: normal; text-align: center; }
.x-gi-sg.ok { font: 700 15px/1.2 var(--sans); letter-spacing: .06em; }
.x-gi-cup { position: absolute; top: 48%; width: 13px; height: 13px; margin-left: -6px; border-radius: 0 0 7px 7px; background: #e8e2d0; }
.x-gi-bot { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; }