.zgrid{grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.4vw,2rem);margin:clamp(1.8rem,4vw,3rem) 0 0;padding:0;list-style:none;display:grid}@media (max-width:1100px){.zgrid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.zgrid{grid-template-columns:1fr}}.zcard{--ease:var(--ease-out,cubic-bezier(.22, 1, .36, 1));--tint:var(--zone,var(--ink-dim));min-height:clamp(230px,30vw,280px);color:var(--ink);isolation:isolate;border:1px solid color-mix(in oklab, var(--tint) 30%, var(--glass-border,var(--hair)));background:radial-gradient(135% 120% at 12% 0%, color-mix(in oklab, var(--tint) 14%, transparent) 0%, transparent 52%), var(--glass-bg,color-mix(in oklab, var(--bg-raise) 80%, transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--tint) 8%, transparent), 0 1px 0 #ffffff0f, 0 14px 34px #0000008c;transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);will-change:transform;border-radius:3px;flex-direction:column;gap:.85rem;padding:clamp(1.15rem,2.4vw,1.6rem);text-decoration:none;display:flex;position:relative;overflow:hidden}@supports (color:lab(0% 0 0)){.zcard{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--tint) 8%, transparent), 0 1px 0 lab(100% -.0000298023 .0000119209/.06), 0 14px 34px lab(0% 0 0/.55)}}.zcard:before{content:"";background:linear-gradient(90deg, var(--tint), color-mix(in oklab, var(--tint) 35%, transparent));transform-origin:0;height:2px;transition:transform .4s var(--ease);z-index:3;pointer-events:none;position:absolute;inset:0 0 auto;transform:scaleX(0)}.zcard:after{content:"";z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 88% 110%, color-mix(in oklab, var(--tint) 22%, transparent), transparent 60%);opacity:0;transition:opacity .4s var(--ease);position:absolute;inset:0}.zcard:hover,.zcard:focus-visible{border-color:color-mix(in oklab, var(--tint) 62%, var(--hair));box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--tint) 16%, transparent), 0 1px 0 #ffffff14, 0 22px 52px color-mix(in oklab, var(--tint) 22%, #000), 0 0 38px color-mix(in oklab, var(--tint) 18%, transparent);transform:translateY(-4px)}@supports (color:lab(0% 0 0)){.zcard:hover,.zcard:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--tint) 16%, transparent), 0 1px 0 lab(100% -.0000298023 .0000119209/.08), 0 22px 52px color-mix(in oklab, var(--tint) 22%, #000), 0 0 38px color-mix(in oklab, var(--tint) 18%, transparent)}}.zcard:hover:before,.zcard:focus-visible:before{transform:scaleX(1)}.zcard:hover:after,.zcard:focus-visible:after{opacity:1}.zcard:focus-visible{outline:2px solid var(--tint);outline-offset:2px}.zcard:active{transform:translateY(-1px)scale(.992)}.zcard>*{z-index:2;position:relative}.zcard-no{font-family:var(--font-mono);letter-spacing:.18em;color:color-mix(in oklab, var(--tint) 70%, var(--ink-dim));text-align:center;width:100%;font-size:.74rem;display:block}.zcard-name{font-family:var(--font-display);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap;color:var(--tint);text-align:center;width:100%;margin:0;font-size:clamp(1.3rem,3.1vw,1.85rem);font-weight:700;line-height:1.06;position:relative}.zcard-tag{font-family:var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:color-mix(in oklab, var(--tint) 55%, var(--ink-dim));text-align:center;width:100%;font-size:.64rem}.zcard-desc{color:var(--ink-dim);-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin:0;font-size:.86rem;line-height:1.55;display:-webkit-box;overflow:hidden}.zcard-enter{font-family:var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:color-mix(in oklab, var(--tint) 75%, var(--ink));align-items:center;gap:.4em;margin-top:auto;font-size:.7rem;display:inline-flex}.zcard-enter svg{width:1.05em;height:1.05em;transition:transform .35s var(--ease)}.zcard:hover .zcard-enter svg,.zcard:focus-visible .zcard-enter svg{transform:translate(4px)}.zcard--glitch:hover .zcard-name,.zcard--glitch:focus-visible .zcard-name{font-size:1.05em;animation:.4s steps(3,end) infinite zg-glitch-loop}@keyframes zg-glitch-loop{0%{clip-path:inset(0 0 70%);text-shadow:-2px 0 0 var(--blue), 2px 0 0 var(--red);transform:translate(3px)}33%{clip-path:inset(46% 0 28%);text-shadow:2px 0 0 var(--blue), -2px 0 0 var(--red);transform:translate(-2px)}66%{clip-path:inset(0);text-shadow:none;transform:translate(0)}to{clip-path:inset(0 0 70%);text-shadow:-2px 0 0 var(--blue), 2px 0 0 var(--red);transform:translate(3px)}}.zcard--animaticon:hover .zcard-name,.zcard--animaticon:focus-visible .zcard-name{font-size:1.05em;animation:.5s steps(4,end) infinite zg-anim-loop}@keyframes zg-anim-loop{0%{opacity:1;text-shadow:none;transform:translate(0)translateY(0)}25%{opacity:.72;text-shadow:-3px 0 0 color-mix(in oklab, var(--tint) 45%, transparent);transform:translate(2px)translateY(-2px)}50%{opacity:.9;text-shadow:3px 0 0 color-mix(in oklab, var(--tint) 35%, transparent);transform:translate(-1px)translateY(1px)}75%{opacity:.85;text-shadow:-2px 0 0 color-mix(in oklab, var(--tint) 40%, transparent);transform:translate(1px)translateY(-1px)}to{opacity:1;text-shadow:none;transform:translate(0)translateY(0)}}.zcard--pixel:hover .zcard-name,.zcard--pixel:focus-visible .zcard-name{font-size:1.05em;animation:.35s steps(4,end) infinite zg-pixel-loop}@keyframes zg-pixel-loop{0%{opacity:1;clip-path:inset(0);transform:translate(0)}25%{opacity:.88;clip-path:inset(48% 0 44%);transform:translate(2px)}50%{opacity:.92;clip-path:inset(26% 0 68%);transform:translate(-1px)}75%{opacity:.85;clip-path:inset(0);transform:translate(1px)}to{opacity:1;clip-path:inset(0);transform:translate(0)}}.zcard--academy{background-image:repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--tint) 7%, transparent) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--tint) 7%, transparent) 23px 24px), radial-gradient(135% 120% at 12% 0%, color-mix(in oklab, var(--tint) 14%, transparent) 0%, transparent 52%), var(--glass-bg,color-mix(in oklab, var(--bg-raise) 80%, transparent));background-position:0 0}.zcard--academy:after{background:repeating-linear-gradient(0deg, transparent 0 23px, color-mix(in oklab, var(--tint) 14%, transparent) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, color-mix(in oklab, var(--tint) 14%, transparent) 23px 24px)}.zcard--academy:hover .zcard-name,.zcard--academy:focus-visible .zcard-name{clip-path:inset(0);font-size:1.05em;animation:.5s steps(8,end) infinite zg-academy-loop}@keyframes zg-academy-loop{0%{clip-path:inset(0 100% 0 0);opacity:.45;transform:translateY(0)}12%{clip-path:inset(0 75% 0 0);opacity:.6}25%{clip-path:inset(0 50% 0 0);opacity:.8}37%{clip-path:inset(0 25% 0 0);opacity:.95}50%{clip-path:inset(0);opacity:1;transform:translateY(0)}62%{clip-path:inset(0 0 0 25%);opacity:.95}75%{clip-path:inset(0 0 0 50%);opacity:.8}87%{clip-path:inset(0 0 0 75%);opacity:.6}to{clip-path:inset(0 100% 0 0);opacity:.45;transform:translateY(0)}}.zcard--ipf .zcard-net{z-index:1;opacity:.18;pointer-events:none;transition:opacity .4s var(--ease);position:absolute;inset:0}.zcard--ipf:hover .zcard-net,.zcard--ipf:focus-visible .zcard-net{opacity:.55}.zcard--ipf .zcard-net line,.zcard--ipf .zcard-net circle{stroke:var(--tint)}.zcard--ipf .zcard-net circle{fill:var(--tint)}.zcard--ipf .zcard-net line{stroke-dasharray:60;stroke-dashoffset:60px}.zcard--ipf:hover .zcard-net line,.zcard--ipf:focus-visible .zcard-net line{animation:1.2s ease-in-out infinite zg-draw-loop}@keyframes zg-draw-loop{0%{stroke-dashoffset:60px}50%{stroke-dashoffset:0}to{stroke-dashoffset:60px}}.zcard--ipf:hover .zcard-name,.zcard--ipf:focus-visible .zcard-name{font-size:1.05em;animation:.25s steps(3,end) infinite zg-ipf-loop}@keyframes zg-ipf-loop{0%,to{transform:translate(0)}25%{transform:translate(-1px)}50%{transform:translate(1px)}75%{transform:translate(-1px)}}.zcard--artos:hover .zcard-name,.zcard--artos:focus-visible .zcard-name{animation:.22s steps(3,end) zg-artos}@keyframes zg-artos{0%,to{text-shadow:none;opacity:1;transform:translate(0)}33%{text-shadow:0 0 8px color-mix(in oklab, var(--tint) 30%, transparent);opacity:.94;transform:translate(2px,-1px)}66%{text-shadow:0 0 6px color-mix(in oklab, var(--tint) 22%, transparent);opacity:.96;transform:translate(-1px,1px)}}.zcard--artifact:hover .zcard-name,.zcard--artifact:focus-visible .zcard-name{font-size:1.05em;animation:.3s steps(4,end) infinite zg-artifact-loop}@keyframes zg-artifact-loop{0%,to{opacity:1;text-shadow:none;transform:translate(0)}25%{opacity:.92;text-shadow:-1px 0 0 color-mix(in oklab, var(--tint) 65%, var(--blue)), 1px 0 0 color-mix(in oklab, var(--tint) 65%, var(--pink));transform:translate(-1px,1px)}50%{opacity:.95;text-shadow:1px 0 0 color-mix(in oklab, var(--tint) 60%, var(--blue)), -1px 0 0 color-mix(in oklab, var(--tint) 60%, var(--pink));transform:translate(1px,-1px)}75%{opacity:.92;text-shadow:-1px 0 0 color-mix(in oklab, var(--tint) 65%, var(--blue)), 1px 0 0 color-mix(in oklab, var(--tint) 65%, var(--pink));transform:translate(-1px)}}.zcard--kinoteka:hover .zcard-name,.zcard--kinoteka:focus-visible .zcard-name{font-size:1.05em;animation:.3s steps(4,end) infinite zg-kino-loop}@keyframes zg-kino-loop{0%,to{opacity:1;transform:translate(0)}33%{opacity:.94;transform:translate(-2px)}66%{opacity:1;transform:translate(1px)}}.zcard--kinoteka .zcard-strip{z-index:1;pointer-events:none;opacity:.25;background-image:repeating-linear-gradient(180deg, color-mix(in oklab, var(--tint) 70%, transparent) 0 4px, transparent 4px 12px);width:6px;transition:opacity .4s var(--ease);background-position:0 0;background-size:100% 12px;position:absolute;top:0;bottom:0;left:6px}.zcard--kinoteka:hover .zcard-strip,.zcard--kinoteka:focus-visible .zcard-strip{opacity:.6;animation:.8s linear infinite zg-kino-scroll}.zcard--kinoteka .zcard-strip-right{z-index:1;pointer-events:none;opacity:.25;background-image:repeating-linear-gradient(180deg, color-mix(in oklab, var(--tint) 70%, transparent) 0 4px, transparent 4px 12px);width:6px;transition:opacity .4s var(--ease);background-position:0 0;background-size:100% 12px;position:absolute;top:0;bottom:0;right:6px}.zcard--kinoteka:hover .zcard-strip-right,.zcard--kinoteka:focus-visible .zcard-strip-right{opacity:.6;animation:.8s linear infinite zg-kino-scroll}@keyframes zg-kino-scroll{0%{background-position:0 0}to{background-position:0 12px}}@media (prefers-reduced-motion:reduce){.zcard,.zcard:before,.zcard:after,.zcard-enter svg{transition:none}.zcard:hover,.zcard:focus-visible,.zcard:active{transform:none}.zcard:hover .zcard-name,.zcard:focus-visible .zcard-name,.zcard:hover .zcard-net line,.zcard:focus-visible .zcard-net line,.zcard:hover .zcard-strip,.zcard:focus-visible .zcard-strip,.zcard:hover .zcard-strip-right,.zcard:focus-visible .zcard-strip-right,.zcard-name{animation:none!important}.zcard:hover .zcard-name,.zcard:focus-visible .zcard-name{font-size:1.05em}.zcard--artos .zcard-name{-webkit-text-fill-color:var(--tint);color:var(--tint);background:0 0}.zcard--ipf .zcard-net line{stroke-dashoffset:0;animation:none}.zcard--ipf:hover .zcard-net,.zcard--ipf:focus-visible .zcard-net{opacity:.55}.zcard--kinoteka:hover .zcard-strip,.zcard--kinoteka:focus-visible .zcard-strip,.zcard--kinoteka:hover .zcard-strip-right,.zcard--kinoteka:focus-visible .zcard-strip-right{opacity:.6}.zcard:hover .zcard-enter svg,.zcard:focus-visible .zcard-enter svg{transform:none}}