:root{--bg:#14101c;--card:#201a2e;--accent:#ff9ecb;--accent2:#ffd36e;--text:#fdf6ff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 15% 10%,#3b2160 0,transparent 45%),radial-gradient(circle at 85% 90%,#5a1f47 0,transparent 45%),var(--bg)}
.hero{text-align:center;padding:72px 20px 36px}
.paw{font-size:3rem;animation:bob 2.4s ease-in-out infinite}
h1{font-size:clamp(1.9rem,6vw,3.6rem);line-height:1.2;margin-top:12px;font-weight:800}
h1 span{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hint{margin-top:18px;opacity:.7;font-size:1.05rem}
main{max-width:1100px;margin:0 auto;padding:0 18px 60px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.tile{position:relative;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--card);cursor:pointer;border:0;padding:0;box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 16px 36px rgba(255,158,203,.25)}
.tile:active,.tile.pop{transform:scale(.94)}
.tile img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.tile .meow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.3);font-size:2.2rem;font-weight:800;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.7);opacity:0;pointer-events:none}
.tile .meow.show{animation:meow .7s ease-out}
.video-block{margin-top:56px;text-align:center}
.video-block h2{font-size:1.8rem;margin-bottom:20px}
.video-block video{width:100%;max-width:400px;max-height:80vh;border-radius:24px;background:#000;box-shadow:0 12px 36px rgba(0,0,0,.5)}
footer{text-align:center;padding:30px 0 50px;opacity:.5}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}
@keyframes meow{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}30%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
@media(max-width:520px){.gallery{grid-template-columns:repeat(2,1fr);gap:12px}.tile{border-radius:16px}.hero{padding-top:52px}}