/* Pixelify Sans draws "5" like "8" and "2" ambiguously; digits come from Silkscreen. */
@font-face{font-family:"WC Digits";src:url(https://fonts.gstatic.com/s/silkscreen/v6/m8JXjfVPf62XiF7kO-i9YLNlaw.woff2) format("woff2");unicode-range:U+0030-0039;size-adjust:84%;font-display:swap}
:root{color-scheme:dark;--bg:#0c0d0f;--surface:#111316;--text:#f6f7f5;--muted:#a1a6ad;--line:#2b3035;--rainbow:linear-gradient(100deg,#ff453a 0%,#ff9f0a 16%,#ffe900 30%,#64ff00 43%,#00eadb 58%,#008cff 72%,#6844ff 85%,#ff49cf 100%)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"WC Digits","Pixelify Sans",monospace;font-size:18px}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #00eadb;outline-offset:6px}img{max-width:100%;display:block}h1,h2,p,figure{margin:0}.shell{max-width:1536px;margin:auto;padding:0 48px}.skip{position:fixed;top:-80px;left:16px;padding:12px;background:white;color:black;z-index:10}.skip:focus{top:12px}.header{min-height:112px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--line)}.brand{width:300px;flex-shrink:0}.brand img{width:100%;height:auto;mix-blend-mode:screen}.menu{display:flex;gap:26px;align-items:center;margin-left:auto}.menu>a,.menu>button{padding:14px 0;white-space:nowrap;font-size:20px}.socials{display:flex;gap:14px;padding-left:24px;border-left:1px solid var(--line)}.social{width:42px;height:42px;display:grid;place-items:center;position:relative;color:#f5f5f5;background:var(--bg);border-radius:9px}.social:before{content:"";position:absolute;inset:-1px;background:var(--rainbow);border-radius:10px;z-index:-1;opacity:.56}.social{isolation:isolate}.social:after{content:"";position:absolute;inset:0;background:var(--bg);border-radius:9px;z-index:-1}.social svg{width:22px;height:22px;fill:currentColor;image-rendering:pixelated}.hero{min-height:580px;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;padding:52px 0 44px;gap:20px}.eyebrow{font-size:14px;letter-spacing:.12em;font-weight:500;color:var(--muted)}h1{font-size:clamp(48px,5.6vw,86px);font-weight:700;line-height:.96;letter-spacing:-.035em;margin:22px 0}.intro{font-size:22px;color:#c8ccd0;line-height:1.4}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.cta{display:inline-flex;gap:26px;justify-content:space-between;align-items:center;padding:15px 20px;border:1px solid #52575d;min-height:52px;font-size:18px;position:relative}.cta-primary{background:#f2f4ed;color:#0c0d0f;border-color:#f2f4ed}.hero-art{align-self:stretch;position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}.hero-art img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:bottom;mix-blend-mode:screen;image-rendering:pixelated}.hero-art figcaption{position:absolute;bottom:4px;font-size:12px;letter-spacing:.18em;color:#92989e}.destinations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-bottom:40px}.card{display:flex;align-items:center;gap:20px;position:relative;border:1px solid var(--line);background:var(--surface);padding:28px 22px;min-height:158px;text-align:left}.card h2{font-size:24px;line-height:1.1;margin:9px 0}.card p{font-size:16px;color:var(--muted);line-height:1.5}.card .eyebrow{font-size:12px;letter-spacing:.1em}.pet-art{width:76px;height:86px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}.card-arrow{position:absolute;bottom:12px;right:14px;color:#adb3ba}.pass{width:66px;height:82px;flex-shrink:0;background:#f2f4ed;border:1px solid white;display:grid;justify-items:center;align-content:center;gap:3px}.pass img{object-fit:contain;image-rendering:pixelated;width:44px;height:44px}.pass>span{color:#137746;font-family:monospace;font-size:22px;line-height:1}.footer{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:78px;border-top:1px solid var(--line);color:var(--muted);font-size:16px}.footer-note{font-size:12px;letter-spacing:.07em}.footer-platforms{display:flex;align-items:center;gap:20px}.footer-platforms button{padding:12px 0}.separator{color:#484e55}.footer small{font-size:12px;color:#bcbead;margin-left:6px}.creator{white-space:nowrap}.preview-note{text-align:center;color:#7f858d;font-size:12px;padding:12px 0 22px;letter-spacing:.08em}.holo{position:relative}.distort{display:inline-block;cursor:default}.holo.is-glitch,.distort.is-glitch{animation:pixel-glitch 420ms steps(2,end) both}.holo:is(:hover,:focus-visible),a:hover .holo,button:hover .holo{background-image:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent}.social:is(:hover,:focus-visible):before{opacity:1}.social:is(:hover,:focus-visible) svg{filter:drop-shadow(-1px 0 #00ecdd) drop-shadow(1px 0 #ff435a)}.card:is(:hover,:focus-visible),.cta:is(:hover,:focus-visible){border-color:#a5b4bd}.distort:is(:hover,:focus-visible){text-shadow:-2px 0 #00cfff,2px 0 #ff414b}.distort [data-scramble]{display:inline-block;min-width:6ch}.cta-primary .holo:is(:hover,:focus-visible),.cta-primary:hover .holo{color:#0c0d0f;background-image:none;text-shadow:-1px 0 #00a99c,1px 0 #df2662}.is-glitch svg{animation:pixel-glitch 420ms steps(2,end) both}@keyframes pixel-glitch{0%,100%{transform:translate(0);text-shadow:none}18%{transform:translate(1px,0);text-shadow:-2px 0 #00e4ff,2px 0 #ff4940}38%{transform:translate(-1px,0);text-shadow:2px 0 #62ff00,-1px 0 #674aff}60%{transform:translate(1px,0);text-shadow:-1px 0 #ffe600,1px 0 #00c8ff}80%{transform:translate(0);text-shadow:1px 0 #ff414b}}
dialog{width:min(520px,calc(100% - 32px));background:#111316;border:1px solid #555d66;color:var(--text);padding:42px 32px 32px;max-height:calc(100dvh - 32px)}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}body:has(dialog[open]){overflow:hidden}dialog h2{font-size:34px;margin:16px 0}dialog p:not(.eyebrow){color:#b9bec4;font-size:18px;line-height:1.5}dialog .cta{margin-top:28px;width:100%}.close{position:absolute;top:10px;right:10px;width:44px;height:44px;font-size:24px}.collection-sample{display:flex;justify-content:space-around;gap:10px;margin-top:24px}.collection-sample[hidden]{display:none}.collection-sample img{image-rendering:pixelated;object-fit:contain;width:28%;height:100px}
@media(min-width:1600px){.hero{min-height:650px}}@media(max-width:1180px){.shell{padding:0 28px}.header{gap:20px;flex-wrap:wrap;padding:12px 0}.brand{width:240px}.menu{gap:20px}.socials{margin-left:auto;padding-left:16px}.menu>a,.menu>button{font-size:18px}.card{gap:12px;padding:24px 16px}.card h2{font-size:21px}.pet-art{width:56px}.footer-note{max-width:170px;line-height:1.5}}
@media(max-width:860px){.header{justify-content:space-between}.menu{order:3;width:100%;margin:0;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}.socials{border:0;padding:0}.hero{grid-template-columns:1fr 1fr;min-height:510px}.hero-art{min-height:360px}h1{font-size:clamp(44px,7vw,66px)}.intro{font-size:19px}.cta{font-size:16px;gap:12px}.destinations{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.card{flex-wrap:wrap}.card h2{font-size:23px}.card p{font-size:16px}.footer{flex-wrap:wrap;justify-content:center;padding:20px 0}.footer-note{display:none}}
@media(max-width:580px){.shell{padding:0 20px}.header{gap:8px}.brand{width:190px}.socials{gap:9px}.social{width:34px;height:42px}.social svg{width:18px;height:18px}.menu>a,.menu>button{font-size:16px;min-height:48px}.menu{gap:8px}.hero{display:flex;flex-direction:column;align-items:stretch;padding:36px 0 28px;gap:12px}.eyebrow{font-size:12px}h1{font-size:clamp(44px,11.2vw,64px);margin:20px 0;line-height:1}.intro{font-size:19px}.hero-art{height:290px;min-height:290px}.hero-art img{object-fit:cover;object-position:bottom}.actions{margin-top:24px;gap:12px}.actions .cta{flex:1;white-space:nowrap;padding:14px 12px}.destinations{grid-template-columns:1fr;padding-bottom:30px}.card{flex-wrap:nowrap;min-height:122px;gap:22px;padding:20px}.pet-art{width:64px;height:70px}.card h2{font-size:25px}.pass{width:64px;height:74px}.footer{gap:16px;font-size:16px}.footer-platforms{gap:16px}.preview-note{font-size:12px;line-height:1.5}.socials{padding-right:1px}}
@media(max-width:360px){.shell{padding:0 14px}.brand{width:160px}.socials{gap:5px}.menu>a,.menu>button{font-size:15px}.actions{flex-direction:column}}
.actions[hidden],.actions > [hidden],.menu > [hidden]{display:none}
.creator-handle{font-family:"Roboto Mono","Consolas",monospace;font-variant-numeric:slashed-zero;font-feature-settings:"zero" 1;font-size:.9em}
/* Bare social marks: retain the hit area, keyboard outline and finite glitch. */
.social{background:transparent;border:0;border-radius:0}
.social::before,.social::after{content:none;display:none}
.social.giphy svg{width:21px;height:25px}
.social.giphy:is(:hover,:focus-visible) svg{filter:none}
.footer{padding:12px 0;min-height:72px}
.footer-links{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12px}
.footer-links a{white-space:nowrap}
.footer-signature{position:relative;display:flex;flex-direction:row;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;animation:footer-signal 8s steps(1,end) infinite}
.footer-signature > img{width:72px;height:12px;object-fit:cover;object-position:center;image-rendering:pixelated;transform:translateX(-1px)}
.footer-origin,.footer-signature .creator{color:#c8ccd0;font-family:inherit;font-size:11px;letter-spacing:0;line-height:1.3;white-space:nowrap}
.footer-signature .creator-handle{font-family:inherit;font-size:inherit;font-variant-numeric:normal;font-feature-settings:normal}
.footer-signature::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,#00eadb 42%,#ff49cf 58%,transparent);transform:scaleX(0);transform-origin:left;opacity:0;animation:footer-scan 8s steps(10,end) infinite}
@keyframes footer-signal{0%,87%,92%,100%{text-shadow:none}88%{text-shadow:-1px 0 #00eadb}89%{text-shadow:1px 0 #ff49cf}90%{text-shadow:none}}
@keyframes footer-scan{0%,87%,92%,100%{transform:scaleX(0);opacity:0}88%{transform:scaleX(.3);opacity:.55}90%{transform:scaleX(.75);opacity:.55}91%{transform:scaleX(1);opacity:.25}}
.footer-platforms{gap:14px}
.footer-platforms .platform-link{display:inline-flex;flex-direction:row;align-items:center;gap:.5em;white-space:nowrap;line-height:1.3;font-size:12px}
.platform-link img{width:1.15em;height:1.25em;object-fit:contain;flex-shrink:0;image-rendering:pixelated}
.platform-link small{margin-left:0}
.platform-link.is-glitch img{animation:pixel-glitch 420ms steps(2,end) both}
@media(max-width:760px){.footer{flex-wrap:wrap;justify-content:space-between}.footer-links{order:3;width:100%;justify-content:flex-start}}
@media(max-width:580px){.footer{justify-content:center;gap:12px}.footer-platforms{gap:10px;justify-content:center;flex-wrap:wrap}.footer-platforms .platform-link{gap:.4em;font-size:12px}.footer-links{order:2;justify-content:center}.footer-signature{order:3}}
.brand img{mix-blend-mode:normal;image-rendering:pixelated}
.hero-art img{mix-blend-mode:lighten}
.brand{position:relative;display:block}
.brand::after{content:"";position:absolute;inset:0;pointer-events:none;background:url('./assets/dark-preview/weird-cats-logo-2026-w400.webp') center/100% 100% no-repeat;opacity:0;clip-path:inset(18% 0 37% 0)}
.brand.is-glitch::after{animation:brand-slice 400ms steps(2,end) both}
.brand.is-glitch img{animation:brand-nudge 400ms steps(2,end) both}
@keyframes brand-slice{0%,100%{opacity:0;transform:translateX(0);filter:none}20%{opacity:.7;transform:translateX(2px);filter:hue-rotate(70deg);clip-path:inset(18% 0 37% 0)}45%{opacity:.55;transform:translateX(-2px);filter:hue-rotate(150deg);clip-path:inset(57% 0 13% 0)}75%{opacity:.35;transform:translateX(1px);filter:hue-rotate(230deg);clip-path:inset(31% 0 43% 0)}}
@keyframes brand-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(1px)}50%{transform:translateX(-1px)}75%{transform:translateX(0)}}
.cta-primary::before{content:"";position:absolute;inset:-2px;padding:2px;pointer-events:none;opacity:0;background:var(--rainbow);background-size:200% 100%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.cta-primary:is(:hover,:focus-visible,.is-glitch)::before{opacity:1}
.cta-primary.is-glitch::before{animation:whitelist-edge 420ms steps(4,end) both}
@keyframes whitelist-edge{0%,100%{transform:translate(0);background-position:0% 50%}25%{transform:translateX(1px);background-position:65% 50%}50%{transform:translateX(-1px);background-position:100% 50%}75%{transform:translateY(1px);background-position:35% 50%}}
.district-art{width:min(100%,260px);height:auto;aspect-ratio:1;object-fit:contain;flex-shrink:0;image-rendering:pixelated;transition:transform 180ms ease-out}
.card--pets{flex-direction:column;justify-content:center;flex-wrap:nowrap;gap:10px;padding:0 12px 20px;text-align:center;border:0;background:transparent}
.card--pets>div{min-width:0;max-width:100%}
.card--pets .pets-title{display:flex;align-items:center;justify-content:center;gap:9px}
.openai-mark{width:26px;height:26px;flex-shrink:0;filter:drop-shadow(0 0 3px #53cfff80)}
.pets-arrow{font-size:18px;color:var(--muted)}
.card--pets:is(:hover,:focus-visible) .district-art{transform:translateY(-4px)}
.card--pets:is(:hover,:focus-visible) .pets-arrow{color:var(--text)}
@media(max-width:580px){.district-art{width:min(100%,290px)}.card--pets{padding:0 10px 24px;gap:8px}}
.hero-line{display:block;width:max-content;max-width:100%;transform-origin:left center;cursor:default}
.card--illustrated{flex-direction:column;justify-content:center;flex-wrap:nowrap;gap:10px;padding:0 12px 20px;text-align:center;border:0;background:transparent}
.card--illustrated>div{min-width:0;max-width:100%}
.card--illustrated .card-arrow{position:static;font-size:18px;line-height:1}
.card--illustrated:is(:hover,:focus-visible) .district-art{transform:translateY(-4px)}
.card.is-glitch .holo{animation:pixel-glitch 420ms steps(2,end) both}
.card:is(:hover,:focus-visible) p.holo{background-image:var(--rainbow);background-clip:text;-webkit-background-clip:text;color:transparent}
@media(max-width:580px){.card--illustrated{padding:0 10px 24px;gap:8px}}
.hero-mini{width:fit-content;max-width:100%;cursor:default}
.hero-collection{color:#bfc7ce;font-size:clamp(12px,1.2vw,15px);line-height:1.5;letter-spacing:.08em}
.hero-art--opening img{object-fit:cover;object-position:75% center}
.hero-art--oval img{object-fit:cover;object-position:right center}
/* Compact desktop landing: preserve readable mobile flow instead of clipping it. */
@media(min-width:900px) and (min-height:600px){
  .shell{height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto}
  .header{min-height:76px;padding:0;flex-wrap:nowrap;gap:24px}
  .brand{width:240px}
  .menu{gap:22px}
  .menu>a,.menu>button{font-size:18px}
  main{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}
  .hero{min-height:0;padding:18px 0;grid-template-columns:.9fr 1.1fr;gap:18px}
  .hero-copy{min-width:0}
  h1{font-size:clamp(44px,6.5svh,74px);margin:16px 0;line-height:.96}
  .intro{font-size:20px}
  .hero-art{min-height:0}
  .hero-art figcaption{font-size:11px;bottom:0}
  .destinations{gap:16px;padding-bottom:18px;align-items:stretch}
  .card{min-height:154px;padding:18px;gap:16px;flex-wrap:nowrap}
  .card h2{font-size:23px}
  .card--pets,.card--illustrated{flex-direction:row;padding:0 8px;text-align:left;gap:12px}
  .card--pets .pets-title{justify-content:flex-start;gap:7px}
  .district-art{width:clamp(132px,18svh,194px)}
  .openai-mark{width:23px;height:23px}
  .footer{min-height:52px;font-size:14px}
  .preview-note{padding:6px 0 10px;font-size:11px}
}
@media(min-width:900px) and (max-width:1120px) and (min-height:600px){
  .header{gap:14px}.brand{width:205px}.socials{gap:8px;padding-left:12px}
  .card{gap:10px;padding:14px}.card h2{font-size:20px}.card p{font-size:15px}
  .card--pets,.card--illustrated{flex-direction:column;text-align:center;padding:0 8px 8px;gap:4px}
  .card--pets .pets-title{justify-content:center}.district-art{width:120px}
}
.hero-line[data-hero-effect="split"].is-hero-active{animation:hero-split 850ms steps(4,end) both}
.hero-line[data-hero-effect="shift"].is-hero-active{animation:hero-shift 850ms steps(5,end) both}
.hero-line[data-hero-effect="sweep"].is-hero-active{background-image:linear-gradient(105deg,#f6f7f5 0%,#f6f7f5 33%,#ff453a 38%,#ff9f0a 42%,#ffe900 46%,#64ff00 50%,#00eadb 54%,#008cff 58%,#6844ff 62%,#ff49cf 66%,#f6f7f5 71%,#f6f7f5 100%);background-size:350% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:hero-sweep 850ms ease-out both}
@keyframes hero-split{0%,100%{text-shadow:none;transform:translateX(0)}24%{text-shadow:-3px 0 #00eadb,3px 0 #ff453a;transform:translateX(1px)}48%{text-shadow:2px -1px #ffe900,-2px 1px #008cff;transform:translateX(-1px)}74%{text-shadow:-1px 0 #64ff00,1px 0 #6844ff;transform:translateX(0)}}
@keyframes hero-shift{0%,100%{transform:skewX(0);text-shadow:none}20%{transform:skewX(-3deg);text-shadow:2px 0 #00eadb}40%{transform:skewX(2deg);text-shadow:-2px 0 #ff9f0a}64%{transform:skewX(-1deg);text-shadow:1px 0 #6844ff}82%{transform:skewX(0);text-shadow:none}}
@keyframes hero-sweep{from{background-position:100% 50%}to{background-position:0% 50%}}
@media(forced-colors:active){.hero-line[data-hero-effect="sweep"].is-hero-active,.holo:is(:hover,:focus-visible){background-image:none;color:CanvasText}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.distort:is(:hover,:focus-visible){text-shadow:none}}