:root{
  --bg:#fdf6ee;
  --ink:#111111;
  --pink:#ff3b8d;
  --pink-soft:#ffd6e7;
  --lime:#d6ff4d;
  --mint:#b8ffdb;
  --lav:#d8c7ff;
  --yellow:#ffe84d;
  --line:#111;
  --card:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Bricolage Grotesque', system-ui, sans-serif;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><text y='20' font-size='20'>🐾</text></svg>") 8 8, auto;
  overflow-x:hidden;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}


#meow-toggle:checked ~ .wrap,
#meow-toggle:checked ~ .nav,
#meow-toggle:checked ~ .marquee{
  --bg:#0f0f0f;
  --ink:#fdf6ee;
  --card:#1a1a1a;
  --line:#fdf6ee;
}
#meow-toggle:checked ~ .wrap{ background:var(--bg); color:var(--ink)}
#meow-toggle:checked ~ .nav{ background:var(--bg); border-color:var(--ink)}
body:has(#meow-toggle:checked){ background:#0f0f0f; color:#fdf6ee }


.nav{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px;
  background:var(--bg);
  border-bottom:2.5px solid var(--line);
  flex-wrap:wrap; gap:12px;
}
.nav-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.logo-bubble{
  background:var(--lime); border:2px solid var(--line); border-radius:99px;
  padding:6px 12px; font-weight:800; font-size:14px; transform:rotate(-2deg);
}
.logo-text{font-family:'Syne', sans-serif; font-weight:800; letter-spacing:-.02em}
.live-dot{font-family:'JetBrains Mono', monospace; font-size:10px; background:var(--pink); color:white; padding:4px 8px; border-radius:99px; letter-spacing:.06em}
.nav-right{display:flex; gap:18px; align-items:center; font-family:'JetBrains Mono', monospace; font-size:12px; text-transform:uppercase}
.nav-right a{color:inherit; text-decoration:none; border-bottom:2px solid transparent}
.nav-right a:hover{border-color:var(--pink)}
.toggle-btn{border:2px solid var(--line); padding:6px 10px; border-radius:99px; cursor:pointer; background:var(--yellow); font-weight:700}
.toggle-btn:hover{transform:rotate(1deg)}


.marquee{
  background:var(--ink); color:var(--bg); overflow:hidden; white-space:nowrap;
  border-bottom:2.5px solid var(--line); padding:8px 0;
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.marquee-track{display:flex; animation:marq 18s linear infinite; width:max-content}
.marquee-track span{padding-right:40px}
@keyframes marq{to{transform:translateX(-50%)}}


.wrap{max-width:1100px; margin:0 auto; padding:0 20px 40px}


.hero{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; padding:42px 0 10px; align-items:start}
.eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--lav); display:inline-block; border:1.8px solid var(--line); padding:6px 10px; border-radius:99px; transform:rotate(-1deg)}
.hero-title{font-family:'Syne', sans-serif; font-weight:800; font-size:64px; line-height:.9; letter-spacing:-.04em; margin:18px 0 14px}
.highlight{background:var(--pink); color:white; padding:0 10px; border:2.5px solid var(--line); border-radius:6px; display:inline-block; transform:rotate(1deg)}
.hero-desc{font-size:17px; line-height:1.5; max-width:520px; opacity:.9}
.hero-ctas{display:flex; gap:12px; margin:18px 0; flex-wrap:wrap}
.btn{padding:12px 18px; border-radius:99px; border:2.5px solid var(--line); font-weight:800; text-decoration:none; display:inline-block; font-size:14px; transition:.15s}
.btn-black{background:var(--ink); color:var(--bg)}
.btn-pink{background:var(--pink-soft); color:var(--ink)}
.btn:hover{transform:translateY(-2px) rotate(-1deg); box-shadow:4px 4px 0 var(--line)}

.mood-picker{margin-top:18px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-family:'JetBrains Mono', monospace; font-size:11px}
.mood-label{text-transform:uppercase; letter-spacing:.08em; opacity:.7}
.mood-chip{border:1.8px solid var(--line); padding:6px 10px; border-radius:99px; cursor:pointer; font-weight:700; background:white; transition:.15s}
.chip-soft{background:var(--mint)} .chip-feral{background:var(--yellow)} .chip-sleepy{background:var(--lav)}
.mood-chip:hover{transform:rotate(1deg) scale(1.05)}


#mood-chill:checked ~ .wrap .cat-face{content:"ฅ^•ﻌ•^ฅ"}
#mood-goblin:checked ~ .wrap .cat-face{font-size:42px; transform:rotate(-3deg)}
#mood-goblin:checked ~ .wrap .cat-face::after{content:" *hiss*"}
#mood-locked:checked ~ .wrap .cat-face{opacity:.8; letter-spacing:.1em}
#mood-goblin:checked ~ .wrap .polaroid.p1{transform:rotate(-2deg) scale(1.02); border-color:var(--pink)}
#mood-locked:checked ~ .wrap .polaroid.p1{transform:rotate(1deg); filter:grayscale(.2)}


.polaroid-stack{position:relative; width:min(360px, 90vw); margin:0 auto}
.polaroid{background:white; border:2.5px solid var(--line); padding:14px 14px 22px; border-radius:4px; box-shadow:8px 8px 0 rgba(0,0,0,.12)}
.polaroid.p1{transform:rotate(-1.5deg); position:relative; z-index:2}
.polaroid.p2{position:absolute; top:46px; left:32px; right:-18px; transform:rotate(3deg); z-index:1; opacity:.95; padding-bottom:14px}
.pol-img{height:240px; background:linear-gradient(135deg, #ffd6e7, #d8c7ff, #b8ffdb); border:1.8px solid var(--line); display:grid; place-items:center; font-size:38px; position:relative; overflow:hidden}
.pol-img::before{content:""; position:absolute; inset:0; background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.08))}
.cat-face{font-size:44px; font-weight:800; background:white; border:2px solid var(--line); padding:8px 14px; border-radius:99px; transform:rotate(-1deg)}
.cat-status{position:absolute; bottom:10px; left:10px; font-family:'JetBrains Mono', monospace; font-size:9px; background:var(--ink); color:white; padding:4px 8px; border-radius:99px}
.pol-img-doodle{font-family:'Syne', sans-serif; font-weight:800; font-size:22px; letter-spacing:-.03em; text-align:center; background:var(--lime)!important}
.pol-caption{font-family:'Instrument Serif', serif; font-size:18px; margin-top:10px; display:flex; justify-content:space-between}
.pol-caption span{font-family:'JetBrains Mono', monospace; font-size:10px; background:var(--yellow); border:1px solid var(--line); padding:2px 6px; border-radius:99px; align-self:center}

.sticker{position:absolute; z-index:3; border:2px solid var(--line); padding:6px 10px; border-radius:99px; font-weight:800; font-size:12px; box-shadow:3px 3px 0 var(--line)}
.s1{background:var(--pink); color:white; top:-10px; right:-8px; transform:rotate(8deg)}
.s2{background:var(--yellow); top:150px; right:-14px; transform:rotate(-6deg)}
.s3{background:white; bottom:74px; left:-12px; transform:rotate(-4deg); font-size:10px; letter-spacing:.08em}

.now-playing{margin-top:18px; background:var(--card); border:2.5px solid var(--line); border-radius:16px; padding:12px 14px; max-width:360px; margin-left:auto; margin-right:auto}
.np-head{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; opacity:.6}
.np-song{font-weight:800; margin:4px 0}
.np-bar{height:6px; background:#eee; border-radius:99px; border:1.5px solid var(--line); overflow:hidden}
.np-progress{width:62%; height:100%; background:var(--pink)}
.np-meta{font-family:'JetBrains Mono', monospace; font-size:10px; display:flex; justify-content:space-between; margin-top:6px}

.stats{display:grid; grid-template-columns:140px 140px 140px 1fr; gap:14px; margin:26px 0}
.stat-card{background:var(--card); border:2.5px solid var(--line); border-radius:18px; padding:16px; min-height:118px}
.stat-num{font-family:'Syne', sans-serif; font-size:38px; font-weight:800; line-height:1}
.stat-label{font-family:'JetBrains Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-top:6px; line-height:1.4}
.cat-trait{background:var(--yellow); display:flex; flex-wrap:wrap; gap:8px; align-content:start}
.trait-title{width:100%; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:2px}
.cat-trait span{background:white; border:1.6px solid var(--line); padding:4px 8px; border-radius:99px; font-size:12px; font-weight:700}


.lore{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:18px 0; align-items:start}
.lore-left h2, .section-head h2, .guest-left h2{font-family:'Syne', sans-serif; font-size:38px; letter-spacing:-.03em; margin:0}
.lore-left h2 span{background:var(--mint); border:2px solid var(--line); border-radius:99px; padding:0 10px}
.lore-left p{line-height:1.6}
.lore-list{list-style:none; padding:0; margin:12px 0; display:grid; gap:6px; font-weight:600}
.lore-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.lore-tags span{font-family:'JetBrains Mono', monospace; font-size:11px; border:1.6px solid var(--line); padding:4px 8px; border-radius:99px; background:white}
.scrapbook{position:relative; background:var(--lav); border:2.5px solid var(--line); border-radius:20px; padding:18px; min-height:320px; transform:rotate(.4deg)}
.scrap{position:absolute; background:white; border:1.8px solid var(--line); padding:10px 12px; font-size:13px; line-height:1.3; box-shadow:4px 4px 0 rgba(0,0,0,.1)}
.scrap1{top:18px; left:18px; transform:rotate(-2deg); background:var(--yellow)}
.scrap2{top:20px; right:22px; transform:rotate(2deg); font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase}
.scrap3{bottom:22px; left:22px; transform:rotate(-1deg); background:var(--mint)}
.scrap-img{position:absolute; bottom:22px; right:22px; background:white; border:2px dashed var(--line); padding:18px 22px; border-radius:12px; font-family:'Instrument Serif', serif; font-size:22px; transform:rotate(1.5deg)}


.work{margin:30px 0}
.section-head p{opacity:.7; margin:6px 0 14px}
.work-emoji{background:var(--pink); color:white; border:2px solid var(--line); border-radius:99px; padding:2px 8px; font-size:18px}
.work-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.work-card{background:var(--card); border:2.5px solid var(--line); border-radius:18px; overflow:hidden; transition:.18s}
.work-card:hover{transform:translateY(-4px) rotate(-.4deg); box-shadow:8px 8px 0 var(--line)}
.browser-bar{display:flex; gap:6px; align-items:center; padding:10px 12px; border-bottom:2px solid var(--line); background:#f7f7f7}
.browser-bar span{width:10px; height:10px; border-radius:50%; border:1.5px solid var(--line); display:inline-block}
.browser-bar span:nth-child(1){background:var(--pink)} span:nth-child(2){background:var(--yellow)} span:nth-child(3){background:var(--mint)}
.browser-bar em{margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:10px; font-style:normal; opacity:.6}
.work-img{height:140px; display:grid; place-items:center; text-align:center; font-weight:800; padding:14px; border-bottom:2px solid var(--line); font-family:'Syne', sans-serif}
.w1{background:linear-gradient(135deg, #ff3b8d, #ffd6e7)} .w2{background:linear-gradient(135deg, #d8c7ff, #b8ffdb)} .w3{background:var(--lime)}
.work-body{padding:14px}
.work-body h3{margin:0 0 6px; font-size:16px; line-height:1.2}
.work-body p{margin:0; font-size:13px; line-height:1.5; opacity:.8}
.work-tags{display:flex; gap:6px; margin:10px 0; flex-wrap:wrap}
.work-tags span{font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:.06em; text-transform:uppercase; border:1.5px solid var(--line); padding:3px 6px; border-radius:99px; background:white}
.work-link{display:inline-block; margin-top:4px; font-weight:800; color:inherit; text-decoration:none; border-bottom:2px solid var(--pink)}


.guestbook{display:grid; grid-template-columns:1.1fr .9fr; gap:20px; margin:30px 0; background:var(--card); border:2.5px solid var(--line); border-radius:20px; padding:22px}
.guest-form{display:grid; gap:10px; margin:14px 0}
.guest-form input, .guest-form select, .guest-form textarea{border:2px solid var(--line); border-radius:12px; padding:12px; font-family:inherit; font-size:14px; background:white; outline:none}
.guest-form textarea{min-height:84px; resize:vertical}
.guest-form button{background:var(--ink); color:var(--bg); border:2px solid var(--line); border-radius:99px; padding:12px; font-weight:800; cursor:pointer}
.guest-form button:hover{background:var(--pink); color:white}
.contact-pills{display:flex; gap:8px; flex-wrap:wrap}
.contact-pills a{border:1.6px solid var(--line); padding:6px 10px; border-radius:99px; text-decoration:none; color:inherit; font-weight:700; font-size:12px; background:white}
.contact-pills a:hover{transform:rotate(1deg)}
.guest-right{display:grid; gap:12px; align-content:start}
.note{background:var(--pink-soft); border:1.8px solid var(--line); padding:12px 14px; border-radius:12px; font-size:14px; transform:rotate(-.6deg)}
.note.n2{background:var(--yellow); transform:rotate(.7deg)}
.note.n3{background:var(--mint); transform:rotate(-.3deg)}
.note.n4{background:white; text-align:center; font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase}
.note span{opacity:.6; font-size:11px}


.footer{border-top:2.5px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-family:'JetBrains Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7}

@media(max-width:900px){
  .hero{grid-template-columns:1fr; gap:28px}
  .hero-title{font-size:52px}
  .stats{grid-template-columns:1fr 1fr}
  .stats .cat-trait{grid-column:1 / -1}
  .lore{grid-template-columns:1fr}
  .work-grid{grid-template-columns:1fr}
  .guestbook{grid-template-columns:1fr}
}
@media(max-width:520px){
  .hero-title{font-size:42px}
  .polaroid-stack{transform:scale(.92)}
  .nav{padding:12px 14px}
}