/* Fonts: self-hosted, Latin + Vietnamese subsets (SIL Open Font License). */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url("./assets/fonts/baloo2-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400 800;font-display:swap;src:url("./assets/fonts/baloo2-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("./assets/fonts/bevietnampro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("./assets/fonts/bevietnampro-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("./assets/fonts/bevietnampro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("./assets/fonts/bevietnampro-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Palette */
  --paper:#f7f7f2;
  --ink:#292d40;
  --muted:#626473;
  --blue:#4e5cca;
  --blue-deep:#3947aa;
  --periwinkle:#c8cff5;
  --lavender:#e7e8f6;
  --yellow:#f2cf64;
  --butter:#f8e9b4;
  --gold:#aa841d;
  --sage:#e4eade;
  --line:#dcddd7;
  --muted-on-lavender:#50568a;
  --muted-on-sage:#566050;

  /* Type roles */
  --font-display:"Baloo 2",ui-rounded,"Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  --font-body:"Be Vietnam Pro","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --text-micro:.8125rem;
  --text-small:.9375rem;
  --text-body:1rem;
  --text-lead:1.125rem;
  --text-h4:1.375rem;
  --text-h3:clamp(1.625rem,1.3rem + 1.1vw,2.125rem);
  --text-h2:clamp(2.125rem,1.45rem + 2.7vw,3.25rem);
  --text-h1:clamp(2.5rem,7.1vw - 10px,5.125rem);

  --radius:20px;
  --ease-arrive:cubic-bezier(.16,1,.3,1);
  --ease-drift:cubic-bezier(.45,0,.55,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px;scrollbar-color:var(--periwinkle) var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--text-body);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
::selection{background:var(--yellow);color:var(--ink)}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.sprite{position:absolute}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:20px;z-index:10;background:var(--ink);color:var(--paper);padding:14px 20px;border-radius:8px}
.skip-link:focus{top:16px}

/* Cat kit: every cat is the same head, recoloured through custom properties. */
.c-fur{fill:var(--fur,var(--blue))}
.c-ear{fill:var(--ear,var(--periwinkle))}
.c-nose{fill:var(--nose,var(--yellow))}
.c-mouth{fill:none;stroke:var(--mouth,var(--paper));stroke-width:var(--face-w,3);stroke-linecap:round}
.c-whisker{fill:none;stroke:var(--whisker,var(--ink));stroke-width:var(--whisker-w,2);stroke-linecap:round}
.c-tail{fill:none;stroke:var(--fur-dark,var(--blue-deep));stroke-width:22;stroke-linecap:round}
.c-fur-dark{fill:var(--fur-dark,var(--blue-deep))}
.c-eye-line{fill:none;stroke:var(--eye-line,var(--paper));stroke-width:var(--eye-w,5);stroke-linecap:round}
.cat-yellow{--fur:var(--yellow);--fur-dark:#d9b248;--ear:var(--butter);--eye-line:var(--ink)}
.cat-ink{--fur:var(--ink);--fur-dark:#4b506c;--ear:#4b506c}
/* Full-body pose cats: one flat blob, stubby limbs, a thick tail */
.fur{fill:var(--fur,var(--blue))}
.fur-dark{fill:var(--fur-dark,var(--blue-deep))}
.fur-line{fill:none;stroke:var(--fur,var(--blue));stroke-width:15;stroke-linecap:round}
.prop-star{fill:var(--yellow);stroke:var(--yellow);stroke-width:10;stroke-linejoin:round}
.doodle{fill:var(--ink)}
.doodle-line{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round}
.pose-tail{transform-box:fill-box;transform-origin:0% 100%}
.pose-closed{fill:none;stroke:var(--eye-line,var(--paper));stroke-width:3.2;stroke-linecap:round;transition:opacity 140ms ease}
.pose-open{opacity:0;transition:opacity 140ms ease}
.pose-z{font:800 15px var(--font-display);fill:var(--blue-deep);transition:opacity 140ms ease}
.pose-z-big{font-size:21px}

/* Napping cats: five poses, each sitting flush on the edge it was put on.
   --zx / --zy place the "z z" above wherever that pose's head is; .flip mirrors the cat. */
.loaf{position:absolute;bottom:100%;z-index:1;margin-bottom:-1px;width:var(--w,64px);--eye-w:9;--zx:36%;--zy:88%;pointer-events:none}
.loaf svg{width:100%;height:auto;transform-origin:50% 100%}
.loaf.flip svg{scale:-1 1}
.loaf .z{position:absolute;left:var(--zx);bottom:var(--zy);font:800 calc(var(--w,64px)*.22)/1 var(--font-display);color:var(--blue-deep);opacity:.7}
.loaf .z+.z{left:calc(var(--zx) + 13%);bottom:calc(var(--zy) + 24%);font-size:calc(var(--w,64px)*.3)}
.c-tail-thin{stroke-width:12}
.nap-loaf.flip{--zx:52%}
.nap-flat{--eye-w:5;--zx:70%;--zy:70%}
.nap-flat.flip{--zx:10%}
.nap-sit{--eye-w:5;--zx:62%;--zy:92%}
.nap-sit .z{font-size:calc(var(--w,64px)*.34)}
.nap-sit .z+.z{left:calc(var(--zx) + 22%);bottom:calc(var(--zy) + 14%);font-size:calc(var(--w,64px)*.46)}
.nap-drape{--eye-w:5;--zx:72%;--zy:94%}
.nap-drape.flip{--zx:8%}
.nap-bum{--eye-w:5;--zx:8%;--zy:62%}
.nap-bum.flip{--zx:74%}
.header-loaf{right:236px;bottom:0;--w:72px}
.cta-wrap{position:relative;display:inline-block}
.cta-loaf{right:44px;--w:46px;--zy:76%}
.strip-loaf{left:max(20px,7%);z-index:2;--w:96px;margin-bottom:calc(var(--w)*-.161 - 1px)}
.game-loaf{right:12%;--w:92px}
.footer-loaf{left:5%;margin-bottom:0;--w:42px}
.pose-prop{transform-box:fill-box;transform-origin:center}
.cat-peri{--fur-dark:#a9b2ea;--fur:var(--periwinkle);--ear:var(--paper);--nose:var(--blue);--mouth:var(--ink);--eye-line:var(--ink)}
.cat-moss{--fur:#8fa58c;--fur-dark:#74896f;--ear:#cbd8c5}
.kitten{--whisker-w:6;--face-w:8}

/* Header */
.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-display);font-size:1.875rem;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.brand>span{padding-top:.12em}
.brand-dot{color:var(--blue)}
.brand img{transition:transform 320ms var(--ease-arrive)}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;white-space:nowrap;border-radius:100px;font-size:var(--text-small);font-weight:600;transition:background 180ms ease,color 180ms ease}
.motion-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;white-space:nowrap;padding:8px 16px 8px 12px;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--muted);font-size:var(--text-small);cursor:pointer;transition:background 180ms ease,color 180ms ease,border-color 180ms ease}
.motion-toggle[hidden]{display:none}
.motion-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.motion-toggle .icon-play{display:none;fill:currentColor}
.motion-paused .motion-toggle .icon-play{display:block}
.motion-paused .motion-toggle .icon-pause{display:none}
.motion-toggle:active{background:var(--lavender)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:24px;padding-block:64px 72px}
h1{font-size:var(--text-h1);font-weight:800;letter-spacing:-.015em;line-height:1;margin-bottom:24px}
.title-wrap{position:relative}
.title-spark-one{right:-1%;top:-12px;width:26px;height:26px;fill:var(--yellow);stroke:var(--ink);stroke-width:1.2;opacity:1}
.title-spark-two{left:61%;top:42%;width:16px;height:16px;--spark-delay:-2.1s}
.title-spark-three{left:72%;top:75%;width:22px;height:22px;fill:var(--gold);--spark-delay:-3.4s}
.hero-description{font-size:var(--text-lead);max-width:31em;color:var(--muted);margin-bottom:44px}
.button{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;border-radius:100px;padding:14px 26px 14px 30px;font-weight:600;font-size:var(--text-body);transition:background 180ms ease,transform 200ms var(--ease-arrive)}
.button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--ease-arrive)}
.button::after{content:"";position:absolute;inset:-50% auto -50% -50%;width:25%;background:#ffffff20;transform:rotate(22deg) translateX(-150%);pointer-events:none}
.button-dark{background:var(--ink);color:var(--paper)}
.launch-note{font-size:var(--text-small);color:var(--muted);margin:16px 0 0}

.hero-art{position:relative;min-width:0;isolation:isolate;overflow:hidden;overflow:clip}
.curiosity-orbit{position:absolute;inset:0;width:100%;height:100%;color:var(--blue);opacity:.24;pointer-events:none;transform-origin:50% 50%;z-index:0}
.spark-field{position:absolute;inset:0;z-index:2;pointer-events:none}
.spark{position:absolute;width:18px;height:18px;fill:var(--blue);opacity:.7}
.spark-one{left:9%;top:24%;width:13px;height:13px}
.spark-two{right:14%;top:20%;fill:var(--gold);--spark-delay:-1.6s;width:23px;height:23px}
.spark-three{left:6%;top:62%;--spark-delay:-3.3s}
.spark-four{right:5%;top:65%;fill:var(--gold);--spark-delay:-.8s;width:13px;height:13px}
.spark-five{left:52%;top:6%;--spark-delay:-2.5s;width:10px;height:10px}
.spark-six{left:18%;bottom:9%;fill:var(--gold);--spark-delay:-4.1s;width:11px;height:11px}
.glint{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--blue);opacity:.35}
.glint:nth-of-type(odd){background:var(--gold)}
.glint:nth-of-type(1){left:14%;top:45%}
.glint:nth-of-type(2){left:27%;top:14%}
.glint:nth-of-type(3){left:66%;top:11%}
.glint:nth-of-type(4){left:91%;top:38%}
.glint:nth-of-type(5){left:84%;top:80%}
.glint:nth-of-type(6){left:58%;top:93%}
.glint:nth-of-type(7){left:30%;top:88%}
.glint:nth-of-type(8){left:3%;top:36%}
.shooting-star{position:absolute;top:3%;right:6%;z-index:2;width:84px;height:auto;opacity:0;fill:var(--yellow);stroke:var(--blue);stroke-width:2;stroke-linecap:round;pointer-events:none}
.shooting-star use{stroke:var(--ink);stroke-width:1.2}
.mascot-tilt{position:relative;z-index:1;transform-origin:50% 65%}
.mascot-button{display:block;width:100%;padding:0;border:0;background:none;border-radius:40px;cursor:pointer}
.mascot-button:focus-visible{outline-offset:-6px}
.mascot{width:100%;height:auto}
.m-eyes-closed{transition:opacity 120ms ease}
.m-eyes-open{opacity:0;transform:scaleY(.1);transform-origin:201px 225px;transition:opacity 120ms ease,transform 240ms var(--ease-arrive)}
.is-awake .m-eyes-closed{opacity:0}
.is-awake .m-eyes-open{opacity:1;transform:none}
.hero-art .zzz{z-index:3}
.mascot-float{position:relative}
.hero-art .zzz-one{left:50%;top:19%}
.hero-art .zzz-two{left:56%;top:11%}
.hero-art .zzz-three{left:63%;top:3%}
.hero-art.is-awake .zzz{visibility:hidden}
.m-pupils{transform:translate(calc(var(--look-x,0)*1.7px),calc(var(--look-y,0)*1.7px));transition:transform 140ms ease-out}
.m-blob{transform-origin:290px 265px}
.m-tail{transform-origin:456px 227px}
.m-leg{transform-box:fill-box;transform-origin:50% 0}
.m-kitten{transform-origin:150px 414px}
.m-torso{transform-origin:290px 300px}
.cat-bubble{position:absolute;top:22px;left:4px;z-index:3;max-width:min(240px,46%);margin:0;padding:9px 16px 7px;background:var(--paper);border:2px solid var(--ink);border-radius:20px 20px 20px 6px;font-family:var(--font-display);font-size:1.125rem;font-weight:600;line-height:1.25;transform:rotate(-4deg);transform-origin:0 100%;pointer-events:none}
.art-note{position:absolute;z-index:3;font-size:var(--text-small);line-height:1.5;color:var(--muted);pointer-events:none}
.note-bottom{right:2%;bottom:2%;transform:rotate(-5deg)}
.art-spark{position:absolute;right:5%;top:9%;z-index:3;width:44px;height:44px;fill:none;stroke:var(--blue);stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.trail-spark{position:absolute;z-index:4;width:14px;height:14px;margin:-7px 0 0 -7px;fill:var(--yellow);stroke:var(--ink);stroke-width:1.2;pointer-events:none}

/* Curiosity strip + the cat peeking over it */
.curiosity-strip{position:relative;background:var(--yellow);border-block:1px solid var(--ink)}
.strip-track{overflow:hidden}
.peeker{--whisker-w:4;--face-w:5;--eye-w:8}
.strip-belt{display:flex}
.strip-list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px;width:100%;margin:0;padding:16px 20px;list-style:none;font-family:var(--font-display);font-size:1.375rem;font-weight:700;line-height:1.3}
.strip-list li{display:flex;align-items:center;gap:28px}
.strip-list[aria-hidden]{display:none}
.strip-cat{width:26px;height:22px;flex:none;fill:var(--ink)}
.peek-cat{position:absolute;right:max(48px,11%);bottom:100%;z-index:2;width:128px;--fur:var(--ink);--ear:#4b506c;--whisker:var(--ink)}
.peek-window{overflow:hidden;overflow:clip}
.peek-head{width:100%;height:auto;transition:transform 420ms var(--ease-arrive)}
.is-ducking .peek-head{transform:translateY(104%);transition:transform 160ms cubic-bezier(.5,0,.9,.4)}
.peek-eyes{transform-origin:290px 205px}
.peek-lids{transition:transform 260ms var(--ease-arrive)}
.peeker.is-awake .peek-lids{transform:translateY(-24px)}
.peek-pupils{transform:translate(calc(var(--peek-x,0)*1px),calc(var(--peek-y,0)*1px));transition:transform 140ms ease-out}
.peek-paws{position:absolute;left:0;top:calc(100% - 9px);width:100%;height:auto;fill:#3d425c}
.peek-toes{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}

/* YouTube */
.youtube-section{padding-block:104px 88px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}
h2{font-size:var(--text-h2);font-weight:700;letter-spacing:-.01em;line-height:1.1;margin-bottom:0}
.section-heading h2{max-width:17em}
.section-heading>p{max-width:17em;color:var(--muted);margin-bottom:6px;text-wrap:balance}
.video-feature{display:grid;grid-template-columns:1.2fr 1fr;background:var(--lavender);border-radius:var(--radius);overflow:hidden}
.video-art{background:var(--yellow);position:relative;min-width:0;min-height:345px}
.video-art>svg{width:100%;height:100%;min-height:345px}
.astro-cat{--whisker-w:7;--eye-w:13;--face-w:8}
.planet-land,.v-star,.v-dot,.planet-halo{transform-box:fill-box}
.v-star,.v-dot,.planet-halo{transform-origin:center}
.v-shoot{opacity:0}
.orbit-satellite{transform-origin:318px 198px}
.video-art-caption{position:absolute;top:22px;left:26px;font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1.3}
.coming-soon{position:absolute;bottom:20px;left:22px;background:var(--paper);padding:8px 16px;font-size:var(--text-small);line-height:1.4;border-radius:100px}
.video-copy{position:relative;padding:48px 44px 88px;display:flex;flex-direction:column;justify-content:center}
.panel-cat{position:absolute;right:40px;bottom:0;width:116px}
h3{font-size:var(--text-h3);font-weight:700;letter-spacing:-.005em;line-height:1.18;margin-bottom:16px}
.video-copy p{color:var(--muted-on-lavender);margin-bottom:0;max-width:30em}
.topic-intro{font-size:var(--text-h4);margin:56px 0 28px}
.topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px 40px;margin:0;padding:0;list-style:none}
.topic{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start}
.topic-cat{width:128px;height:auto;margin-top:-8px;transform-origin:50% 90%;transition:transform 320ms var(--ease-arrive)}
h4{font-size:var(--text-h4);font-weight:700;line-height:1.25;margin:22px 0 6px}
.topic p{color:var(--muted);margin-bottom:0;max-width:24em}

/* About */
.about-section{position:relative;background:var(--sage);padding-block:88px}
.cat-crowd{position:absolute;inset:auto 0 100% 0;height:0;pointer-events:none}
.crowd-cat{position:absolute;bottom:0;width:var(--size,92px);pointer-events:auto}
.crowd-cat .peek-head{translate:0 var(--dip,0%)}
.crowd-cat:nth-child(1){left:5%;--size:92px;--dip:8%}
.crowd-cat:nth-child(2){left:16%;--size:70px}
.crowd-cat:nth-child(3){left:43%;--size:106px;--dip:4%}
.crowd-cat:nth-child(4){left:66%;--size:78px;--dip:12%}
.crowd-cat:nth-child(5){right:5%;--size:96px}
.about-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:center}
.about-mark{display:flex;flex-direction:column;align-items:center;gap:20px}
.about-mark p{margin:0;font-family:var(--font-display);font-size:1.625rem;font-weight:700;line-height:1.25;text-align:center}
.sleeper{position:relative;width:min(100%,340px)}
.sleeper>svg:not(.spark){width:100%;height:auto}
.sleeper-spark:nth-of-type(1){left:6%;top:20%;width:14px;height:14px}
.sleeper-spark:nth-of-type(2){right:4%;top:28%;width:20px;height:20px;fill:var(--gold);--spark-delay:-1.9s}
.sleeper-spark:nth-of-type(3){right:24%;top:-8%;width:11px;height:11px;--spark-delay:-3.1s}
.sleeper-body{transform-origin:190px 208px}
.zzz{position:absolute;font-family:var(--font-display);font-weight:800;line-height:1;color:var(--blue-deep);opacity:.75}
.zzz-one{left:43%;top:22%;font-size:1.5rem}
.zzz-two{left:51%;top:7%;font-size:2rem}
.zzz-three{left:61%;top:-12%;font-size:2.625rem}
.about-copy h2{margin-bottom:24px;max-width:15em}
.about-copy p{color:var(--muted-on-sage);max-width:36em;margin-bottom:16px}
.about-copy p:last-child{margin-bottom:0}

/* Game */
.game-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding-block:96px}
.game-copy h2{margin-bottom:24px}
.game-copy>p{color:var(--muted);max-width:30em;margin-bottom:24px}
.game-status{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);padding:8px 16px;border-radius:100px;font-size:var(--text-small);line-height:1.4}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);display:inline-block;flex-shrink:0}
.game-art{position:relative;margin:0}
.px-eyes{opacity:0}
.game-art>svg{width:100%;height:auto;border-radius:var(--radius);image-rendering:pixelated;background:#c1ccd7}
.game-art figcaption{margin-top:12px;font-size:var(--text-micro);color:var(--muted);text-align:right}

/* Footer */
.site-footer{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 32px;border-top:1px solid var(--line);padding-block:36px 24px}
.site-footer .brand{font-size:1.625rem;justify-self:start}
.footer-line{color:var(--muted);font-size:var(--text-small);margin:0}
.back-top{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;margin-right:-16px;border-radius:100px;font-size:var(--text-small);font-weight:600;transition:background 180ms ease,color 180ms ease}
.back-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--ease-arrive)}
.footer-bottom{grid-column:1/-1;margin:0;padding-top:20px;border-top:1px solid var(--line);font-size:var(--text-micro);color:var(--muted)}
.paw-trail{position:absolute;top:-12px;right:17%;display:flex;gap:16px;pointer-events:none}
.paw-trail svg{width:20px;height:20px;fill:#b3bbed;transform:translateY(-7px) rotate(78deg)}
.paw-trail svg:nth-child(even){transform:translateY(7px) rotate(102deg)}

/* The cat that keeps you company down the page, and the paw print a click leaves behind */
.scroll-cat{position:fixed;left:0;bottom:0;z-index:5;display:none;width:60px;translate:calc(var(--scroll-progress,0)*(100vw - 60px)) 0;transform:translateY(102%);transition:transform 420ms var(--ease-arrive);pointer-events:none}
.scroll-cat svg{width:100%;height:auto}
.motion-on .scroll-cat{display:block}
.scroll-cat.is-visible{transform:none}
.scroll-eyes-open{opacity:0}
.scroll-cat.is-awake .scroll-eyes-open{opacity:1}
.scroll-cat.is-awake .scroll-eyes-closed{opacity:0}
.click-paw{position:fixed;z-index:6;width:28px;height:28px;margin:-14px 0 0 -14px;fill:var(--blue-deep);pointer-events:none}

/* Hover: only where a real pointer exists */
@media(hover:hover) and (pointer:fine){
  .site-nav a:hover,.back-top:hover{background:var(--lavender);color:var(--blue-deep)}
  .motion-toggle:hover{background:var(--lavender);color:var(--ink);border-color:var(--periwinkle)}
  .button-dark:hover{background:var(--blue)}
  .topic:hover .pose-open{opacity:1}
  .topic:hover .pose-closed,.topic:hover .pose-z{opacity:0}
}

/* Motion. Nothing below runs without JavaScript or with reduced motion:
   .motion-ok is set by animations.js, loops play only while their region is on screen,
   and the pause button freezes them in place through --play. */
.motion-ok [data-motion-region].is-in-view{--play:running}
.motion-ok.motion-paused [data-motion-region]{--play:paused}
.motion-ok .mascot-float{animation:cat-drift 6s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-tail{animation:tail-sway 3.6s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-torso{animation:cat-breathe 4.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-leg{animation:leg-dangle 3.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-leg-b{animation-delay:-1.1s}
.motion-ok .m-leg-c{animation-delay:-2.2s}
.motion-ok .m-land{animation:hero-planet-turn 44s linear infinite var(--play,paused)}
.motion-ok .m-dots circle{animation:dot-think 2.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-dots circle:nth-child(2){animation-delay:.3s}
.motion-ok .m-dots circle:nth-child(3){animation-delay:.6s}
.motion-ok .m-blob{animation:blob-glow 7s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .m-kitten{animation:kitten-peek 11s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .glint{animation:glint-twinkle 3.2s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .glint:nth-of-type(2n){animation-delay:-1.1s}
.motion-ok .glint:nth-of-type(3n){animation-delay:-2.2s;animation-duration:4.1s}
.motion-ok .shooting-star{animation:shooting 9s ease-in infinite var(--play,paused)}
.motion-ok .curiosity-orbit{animation:curiosity-turn 64s linear infinite var(--play,paused)}
.motion-ok .spark{animation:star-breathe 4.8s var(--ease-drift) var(--spark-delay,0s) infinite var(--play,paused)}
.motion-ok .art-spark{animation:star-nod 9s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .strip-list{flex-wrap:nowrap;justify-content:space-around;gap:56px;width:auto;min-width:100vw;padding-inline:28px;white-space:nowrap}
.motion-ok .strip-list li{gap:56px}
.motion-ok .strip-list[aria-hidden]{display:flex}
.motion-ok .strip-belt{width:max-content;animation:strip-run 42s linear infinite var(--play,paused)}
.motion-ok .strip-cat{animation:strip-hop 2.8s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .strip-list li:nth-child(2) .strip-cat{animation-delay:-.9s}
.motion-ok .strip-list li:nth-child(3) .strip-cat{animation-delay:-1.8s}
.motion-ok .peek-eyes{animation:cat-blink 5.4s linear infinite var(--play,paused)}
.motion-ok .crowd-cat .peek-head{animation:crowd-pop 720ms var(--ease-arrive) both var(--play,paused)}
.motion-ok .crowd-cat:nth-child(2) .peek-head{animation-delay:.12s}
.motion-ok .crowd-cat:nth-child(3) .peek-head{animation-delay:.24s}
.motion-ok .crowd-cat:nth-child(4) .peek-head{animation-delay:.36s}
.motion-ok .crowd-cat:nth-child(5) .peek-head{animation-delay:.48s}
.motion-ok.motion-paused .crowd-cat .peek-head{animation:none}
.motion-ok .crowd-cat:nth-child(2) .peek-eyes{animation-delay:-1.7s}
.motion-ok .crowd-cat:nth-child(3) .peek-eyes{animation-delay:-3.1s}
.motion-ok .crowd-cat:nth-child(4) .peek-eyes,.motion-ok .panel-cat .peek-eyes{animation-delay:-4.2s}
.motion-ok .planet-halo{animation:halo-pulse 4.6s ease-out infinite var(--play,paused)}
.motion-ok .v-dot{animation:glint-twinkle 3.6s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .v-dot:nth-of-type(2n){animation-delay:-1.3s}
.motion-ok .v-dot:nth-of-type(3n){animation-delay:-2.5s}
.motion-ok .v-shoot{animation:v-shooting 8s ease-in infinite var(--play,paused)}
.motion-ok .planet-land{animation:planet-turn 48s linear infinite var(--play,paused)}
.motion-ok .v-star{animation:star-breathe 5.2s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .v-star-late{animation-delay:-2.4s}
.motion-ok .sleeper-body{animation:sleep-breathe 4.8s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .zzz{opacity:0;animation:zzz-rise 4.8s ease-out infinite var(--play,paused)}
.motion-ok .zzz-two{animation-delay:.9s}
.motion-ok .zzz-three{animation-delay:1.8s}
.motion-ok .pose-tail{animation:tail-sway 3.2s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .topic:nth-child(2) .pose-tail{animation-delay:-1.1s}
.motion-ok .topic:nth-child(3) .pose-tail{animation-delay:-2.1s}
.motion-ok .pose-prop{animation:prop-twinkle 3.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .pose-pupil{animation:pose-look 6s steps(1) infinite var(--play,paused)}
.motion-ok .topic:nth-child(2) .pose-pupil{animation-delay:-2s}
.motion-ok .topic:nth-child(3) .pose-pupil{animation-delay:-4s}
.motion-ok .px-cloud-a{animation:px-drift 16s steps(8) infinite alternate var(--play,paused)}
.motion-ok .px-cloud-b{animation:px-drift 22s steps(8) infinite alternate-reverse var(--play,paused)}
.motion-ok .px-star{animation:px-blink 2.4s steps(1) infinite var(--play,paused)}
.motion-ok .px-island{animation:px-hover 3.2s steps(2) infinite alternate var(--play,paused)}
.motion-ok .px-eyes{animation:px-peek 7s steps(1) infinite var(--play,paused)}
.motion-ok .px-lids{animation:px-shut 7s steps(1) infinite var(--play,paused)}
.motion-ok .px-z{animation:px-blink 2.4s steps(1) infinite var(--play,paused)}
.motion-ok .px-z-b{animation-delay:-1.2s}
.motion-ok .loaf svg{animation:loaf-breathe 4.6s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .nap-sit svg{animation:nap-nod 5.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .nap-flat svg{animation-duration:5.6s}
.motion-ok .nap-bum svg{animation-duration:3.8s}
.motion-ok .loaf .z{opacity:0;animation:loaf-z 4.6s ease-out infinite var(--play,paused)}
.motion-ok .loaf .z+.z{animation-delay:1.3s}
.motion-ok .pose-z{animation:pose-snore 3.4s var(--ease-drift) infinite var(--play,paused)}
.motion-ok .pose-z-big{animation-delay:.7s}
.motion-ok .px-star-b{animation-delay:-.8s}
.motion-ok .px-star-c{animation-delay:-1.6s}
.motion-ok .px-kitten{animation:px-hop 3.8s steps(1) infinite var(--play,paused)}
.motion-ok .paw-trail svg{opacity:0;animation:paw-step 9s linear infinite var(--play,paused)}
.motion-ok .paw-trail svg:nth-child(2){animation-delay:.45s}
.motion-ok .paw-trail svg:nth-child(3){animation-delay:.9s}
.motion-ok .paw-trail svg:nth-child(4){animation-delay:1.35s}
.motion-ok .paw-trail svg:nth-child(5){animation-delay:1.8s}
.motion-ok .paw-trail svg:nth-child(6){animation-delay:2.25s}
.motion-ok .paw-trail svg:nth-child(7){animation-delay:2.7s}
.motion-ok .paw-trail svg:nth-child(8){animation-delay:3.15s}
.motion-ok .button:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
  .motion-on .button:hover::after{animation:button-glint 600ms var(--ease-arrive)}
  .motion-on .button:hover svg{transform:translateY(3px)}
  .motion-on .back-top:hover svg{transform:translateY(-3px)}
  .motion-on .brand:hover img{transform:rotate(-12deg) scale(1.06)}
  .motion-on .topic:hover .topic-cat{transform:rotate(-8deg) scale(1.06)}
}
@keyframes cat-drift{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-10px) rotate(.6deg)}}
@keyframes tail-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}}
@keyframes cat-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008,1.03)}}
@keyframes curiosity-turn{to{transform:rotate(360deg)}}
@keyframes star-breathe{0%,100%{opacity:.32;transform:scale(.75) rotate(-12deg)}50%{opacity:.9;transform:scale(1.16) rotate(12deg)}}
@keyframes star-nod{0%,100%{transform:rotate(-8deg) scale(1)}50%{transform:rotate(15deg) scale(1.08)}}
@keyframes button-glint{from{transform:rotate(22deg) translateX(-150%)}to{transform:rotate(22deg) translateX(850%)}}
@keyframes strip-run{to{transform:translateX(-50%)}}
@keyframes cat-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes planet-turn{to{transform:translateX(190px)}}
@keyframes sleep-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.01,1.045)}}
@keyframes zzz-rise{0%{opacity:0;transform:translate(-8px,14px) scale(.7) rotate(-10deg)}25%{opacity:.8}70%{opacity:.8}100%{opacity:0;transform:translate(10px,-18px) scale(1.1) rotate(8deg)}}
@keyframes px-drift{to{transform:translateX(32px)}}
@keyframes px-blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes px-hover{to{transform:translateY(-4px)}}
@keyframes px-peek{0%,84%,100%{opacity:0}85%,96%{opacity:1}}
@keyframes px-shut{0%,84%,100%{opacity:1}85%,96%{opacity:0}}
@keyframes loaf-z{0%{opacity:0;transform:translate(-3px,6px) scale(.7)}30%,70%{opacity:.8}100%{opacity:0;transform:translate(5px,-8px) scale(1.05)}}
@keyframes nap-nod{0%,100%{transform:rotate(0)}70%{transform:rotate(6deg)}78%{transform:rotate(-1deg)}}
@keyframes loaf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015,1.06)}}
@keyframes pose-snore{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes blob-glow{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.035) rotate(2deg)}}
@keyframes leg-dangle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes hero-planet-turn{to{transform:translateX(290px)}}
@keyframes dot-think{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes kitten-peek{0%,18%{transform:translate(64px,14px);opacity:0}24%{opacity:1}30%,62%{transform:translate(0,0);opacity:1}70%{opacity:1}76%,100%{transform:translate(64px,14px);opacity:0}}
@keyframes glint-twinkle{0%,100%{opacity:.12;transform:scale(.6)}50%{opacity:.95;transform:scale(1.5)}}
@keyframes shooting{0%,84%{opacity:0;transform:translate(60px,-25px)}87%,96%{opacity:1}100%{opacity:0;transform:translate(-200px,80px)}}
@keyframes strip-hop{0%,70%,100%{transform:translateY(0) rotate(0)}80%{transform:translateY(-6px) rotate(-10deg)}90%{transform:translateY(0) rotate(6deg)}}
@keyframes crowd-pop{from{translate:0 106%}to{translate:0 var(--dip,0%)}}
@keyframes halo-pulse{0%{transform:scale(.92);opacity:.6}100%{transform:scale(1.3);opacity:0}}
@keyframes v-shooting{0%,80%{opacity:0;transform:translate(590px,30px)}84%,95%{opacity:1}100%{opacity:0;transform:translate(380px,108px)}}
@keyframes px-hop{0%,78%,86%,94%,100%{transform:translateY(0)}82%{transform:translateY(-8px)}90%{transform:translateY(-5px)}}
@keyframes prop-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.08) rotate(8deg)}}
@keyframes pose-look{0%,55%,100%{transform:translate(0,0)}60%,75%{transform:translate(3px,-1px)}80%,92%{transform:translate(-3px,0)}}
@keyframes paw-step{0%{opacity:0}3%,52%{opacity:1}66%,100%{opacity:0}}

@media(min-width:1500px){
  .hero{padding-block:84px 88px}
  .mascot{max-height:560px}
}
@media(max-width:1000px){
  .wrap{width:calc(100% - 64px)}
  .hero{padding-block:52px 68px}
  .video-copy{padding:36px 30px 84px}
  .panel-cat{width:98px;right:28px}
  .crowd-cat{width:calc(var(--size,92px)*.82)}
  .video-art,.video-art>svg{min-height:320px}
  .about-grid{gap:48px}
  .game-section{gap:44px}
  .peek-cat{width:112px}
  .header-loaf{right:76px}
  .motion-toggle{padding:8px;width:44px;justify-content:center}
  .motion-toggle-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cat-bubble{position:relative;top:auto;left:auto;display:inline-block;max-width:calc(100% - 12px);margin:30px 0 -6px 6px;font-size:1.0625rem}
  .section-heading{display:block;margin-bottom:32px}
  .section-heading h2{max-width:none}
  .section-heading>p{max-width:none;margin:16px 0 0}
}
@media(max-width:700px){
  .wrap{width:calc(100% - 40px)}
  .site-header{flex-wrap:wrap;gap:8px 12px;padding-block:14px 8px}
  .brand{font-size:1.75rem}
  .site-nav{order:3;justify-content:space-between;margin-inline:-12px;width:calc(100% + 24px)}
  .site-nav a{padding-inline:12px}
  .hero{grid-template-columns:1fr;padding-block:40px 64px;gap:28px}
  h1{font-size:clamp(2.375rem,14vw - 6px,4.5rem);margin-bottom:18px}
  .hero-description{margin-bottom:40px}
  .hero-art{width:min(100%,440px);justify-self:center}
  .curiosity-orbit{opacity:.18}
  .mascot{max-height:380px}
  .spark{width:14px;height:14px}
  .art-spark{width:34px;height:34px;right:2%;top:16%}
  .note-bottom{right:0;bottom:0}
  .strip-list{font-size:1.1875rem;gap:6px 18px;padding-block:14px}
  .strip-list li{gap:18px}
  .strip-cat{width:20px;height:17px}
  .motion-ok .strip-list,.motion-ok .strip-list li{gap:36px}
  .peek-cat{width:92px;right:24px}
  .header-loaf{display:none}
  .strip-loaf{--w:76px}
  .game-loaf{--w:72px}
  .footer-loaf{--w:36px}
  .cta-loaf{--w:42px}
  .youtube-section{padding-block:64px}
  .video-feature{grid-template-columns:1fr}
  .video-art,.video-art>svg{min-height:0}
  .video-art>svg{aspect-ratio:620/370}
  .video-art-caption{font-size:1.125rem;top:16px;left:20px}
  .coming-soon{bottom:14px;left:16px}
  .video-copy{padding:30px 24px 76px}
  .panel-cat{width:88px;right:20px}
  .crowd-cat{width:calc(var(--size,92px)*.66)}
  .crowd-cat:nth-child(2){display:none}
  .motion-on .scroll-cat{display:none}
  .title-spark-one{width:20px;height:20px;top:-10px}
  .topic-intro{margin:44px 0 24px}
  .topics{grid-template-columns:1fr;gap:24px}
  .topic-cat{width:100px}
  h4{margin-top:14px}
  .about-section{padding-block:56px}
  .about-grid{grid-template-columns:1fr;gap:36px}
  .sleeper{width:min(100%,260px)}
  .about-mark p{font-size:1.4375rem}
  .game-section{grid-template-columns:1fr;gap:32px;padding-block:64px}
  .site-footer{grid-template-columns:1fr auto;gap:8px 16px;padding-top:32px}
  .footer-line{grid-column:1/-1;grid-row:2}
  .paw-trail{right:8%;gap:13px}
  .paw-trail svg:nth-child(n+6){display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .m-eyes-open{transform:none}
  .peek-head,.m-pupils,.peek-pupils{transition:none}
}