.holographic-demo{place-items:center;width:100%;padding-block:7%;display:grid;container-type:inline-size}.holographic-demo .holo{--u:calc(86cqw / 392);color:var(--ink);width:calc(392 * var(--u));aspect-ratio:392/566;border-radius:calc(24 * var(--u));box-shadow:0 calc(40 * var(--u)) calc(80 * var(--u)) calc(-20 * var(--u)) var(--sky-1), 0 0 calc(60 * var(--u)) calc(-10 * var(--u)) color-mix(in srgb, var(--holo-glow) 35%, transparent);margin:0 1cqw 0 0;transition:transform .25s ease-out;position:relative;transform:rotate(-4deg)}.holographic-demo .holo .foil{border-radius:inherit;width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.holographic-demo .holo .in{inset:calc(11 * var(--u));border-radius:calc(15 * var(--u));background:var(--holo-in);padding:calc(18 * var(--u)) calc(20 * var(--u));flex-direction:column;display:flex;position:absolute;overflow:hidden}.holographic-demo .holo .top{justify-content:space-between;align-items:center;display:flex}.holographic-demo .holo .top .gmark{font-size:calc(20 * var(--u))}.holographic-demo .holo .top .no{font-family:var(--font-mono);font-size:calc(13 * var(--u));letter-spacing:.1em;color:var(--muted)}.holographic-demo .holo .nm{font-family:var(--font-display);font-weight:800;font-stretch:112%;font-size:calc(29 * var(--u));margin:calc(10 * var(--u)) 0 calc(8 * var(--u));white-space:nowrap;text-overflow:ellipsis;line-height:1.2;overflow:hidden}.holographic-demo .holo .pic{width:100%;height:calc(184 * var(--u));border-radius:calc(8 * var(--u));background:var(--pic-2);image-rendering:pixelated;flex:none}.holographic-demo .holo .ty{font-family:var(--font-mono);font-size:calc(13.5 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--arch-hl);margin-top:calc(12 * var(--u));padding-bottom:calc(10 * var(--u));border-bottom:1px solid var(--holo-rule)}.holographic-demo .holo .st{margin-top:calc(10 * var(--u));grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr);display:grid}.holographic-demo .holo .st b{font-family:var(--font-display);font-weight:850;font-stretch:112%;font-size:calc(40 * var(--u));font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;display:block}.holographic-demo .holo .st div+div b{font-size:calc(32 * var(--u));padding-top:calc(8 * var(--u))}.holographic-demo .holo .st span{font-family:var(--font-mono);font-size:calc(12 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.holographic-demo .holo .yr{width:100%;height:calc(30 * var(--u));margin-top:calc(14 * var(--u));image-rendering:pixelated}.holographic-demo .holo .yl{font-family:var(--font-mono);font-size:calc(11 * var(--u));letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:calc(6 * var(--u));justify-content:space-between;display:flex}.holographic-demo .holo .pp{align-items:center;gap:calc(12 * var(--u));min-width:0;margin-top:auto;display:flex}.holographic-demo .holo .pp .avs{flex:none;display:flex}.holographic-demo .holo .pp .av{width:calc(34 * var(--u));height:calc(34 * var(--u));margin-right:calc(-9 * var(--u));box-shadow:0 0 0 calc(3 * var(--u)) var(--holo-in);background:var(--holo-rule);border-radius:50%}.holographic-demo .holo .pp .with{font-family:var(--font-mono);font-size:calc(13 * var(--u));color:var(--muted);margin-left:calc(8 * var(--u));min-width:0;line-height:1.3;overflow:hidden}.holographic-demo .holo .pp .with span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.holographic-demo .holo .glare{border-radius:inherit;pointer-events:none;mix-blend-mode:screen;background-size:200% 200%;background-position:var(--gx,30%) var(--gy,30%);background-image:linear-gradient(115deg, transparent 30%, color-mix(in srgb, var(--holo-sheen) 20%, transparent) 44%, color-mix(in srgb, var(--holo-sheen) 4%, transparent) 52%, transparent 62%);position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.holographic-demo .holo{transition:none}}.holographic-demo .gmark{font-family:var(--font-display);font-stretch:var(--stretch-display);font-weight:var(--weight-mark);white-space:nowrap;color:var(--ink);align-items:flex-start;line-height:1;display:inline-flex}.holographic-demo .gmark .tick{width:.2em;height:.4em;fill:var(--hl);margin:.02em .06em 0 .04em}.holographic-demo .holo{background:linear-gradient(135deg, var(--foil-1), var(--foil-3), var(--foil-5), var(--foil-7));margin:0}