:root{
  --bg:#12131A;--surface:#1C1E2A;--glass:rgba(28,30,42,.72);--ink:#F3EEFF;--soft:#C4BCD9;
  --lilac:#C9A7FF;--mint:#7CFFCB;--pink:#FFB3E6;--line:rgba(201,167,255,.45);
  --glow:0 0 0 1px rgba(201,167,255,.08),0 10px 40px -12px rgba(201,167,255,.35);
  --r:22px;--mono:"JetBrains Mono",ui-monospace,monospace;--display:Quicksand,Nunito,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 Nunito,system-ui,sans-serif;min-height:100vh;
  background-image:radial-gradient(60vw 50vh at 0% 0%,rgba(201,167,255,.20),transparent 70%),radial-gradient(55vw 50vh at 100% 100%,rgba(124,255,203,.13),transparent 70%),radial-gradient(40vw 30vh at 85% 15%,rgba(255,179,230,.08),transparent 70%);background-attachment:fixed}
img,video{max-width:100%}
a{color:var(--mint)}
::selection{background:var(--lilac);color:#12131A}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--glow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

.hero{text-align:center;padding:44px 20px 20px;max-width:720px;margin:0 auto}
.hero-emote{width:104px;height:104px;animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(201,167,255,.55))}
h1{font-family:var(--display);font-weight:700;font-size:clamp(46px,10vw,82px);margin:4px 0 6px;line-height:1;letter-spacing:-.01em;text-shadow:0 0 22px rgba(201,167,255,.55),0 0 2px rgba(255,255,255,.4)}
.tag{color:var(--mint);margin:0 0 16px;font-family:var(--mono);font-size:14px}
.stats{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--mint);color:var(--mint);border-radius:99px;padding:4px 12px;background:rgba(124,255,203,.06)}
.chip.new{border-color:var(--pink);color:var(--pink);background:rgba(255,179,230,.08)}
.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border-radius:99px;border:1px solid var(--lilac);background:rgba(201,167,255,.08);color:var(--lilac);padding:10px 20px;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(201,167,255,.45)}.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lilac);color:#12131A}
.link{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:none;border:0;color:var(--mint);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:4px}
.fact{margin:22px auto 0;padding:14px 20px;max-width:520px;text-align:center}
.fact figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.fact p{margin:6px 0 8px;font-size:17px}

main{max-width:680px;margin:0 auto;padding:12px 16px 40px}
.feed{display:grid;gap:28px}
.post{padding:20px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.post.in{opacity:1;transform:none}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.mood{border:1px solid var(--mint);color:var(--mint);padding:2px 10px;border-radius:99px;font-size:11px}
.badge-new{background:var(--pink);color:#12131A;border-radius:99px;padding:1px 8px;font-size:11px;font-weight:600;margin-left:6px;animation:pulse 2s ease-in-out infinite}
.post h2{font-family:var(--display);font-weight:700;margin:8px 0 12px;font-size:28px;line-height:1.2;color:var(--lilac);text-shadow:0 0 14px rgba(201,167,255,.35)}
.post h2 a{color:inherit;text-decoration:none}
.media{display:block;width:100%;padding:0;border:1px solid rgba(201,167,255,.25);background:#0c0d12;border-radius:16px;overflow:hidden;cursor:zoom-in;margin:0 0 14px}
.media img,.media video{display:block;width:100%;max-height:640px;object-fit:contain;transition:transform .4s}
.media:hover img{transform:scale(1.015)}
.text{margin:0 0 14px}
.reacts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.react{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:13px;cursor:pointer;border:1px solid rgba(201,167,255,.3);background:rgba(18,19,26,.6);border-radius:99px;padding:2px 10px 2px 3px;color:var(--soft);transition:transform .12s,border-color .15s,background .15s,box-shadow .2s}
.react img{width:36px;height:36px;transition:transform .2s;filter:drop-shadow(0 0 6px rgba(255,179,230,.25))}
.react:hover{border-color:var(--lilac);box-shadow:0 0 14px rgba(201,167,255,.3)}
.react:hover img{transform:rotate(-8deg) scale(1.08)}
.react.on{border-color:var(--pink);background:rgba(255,179,230,.12);color:var(--pink)}
.react.pop img{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.react[disabled]{cursor:default}
details.comments{border-top:1px dashed rgba(201,167,255,.3);margin-top:12px;padding-top:10px}
details.comments summary{cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--lilac);list-style:none}
details.comments summary::-webkit-details-marker{display:none}
details.comments summary::before{content:"+ "}
details[open].comments summary::before{content:"– "}
.clist{list-style:none;margin:10px 0;padding:0;display:grid;gap:10px}
.clist li{background:rgba(18,19,26,.55);border:1px solid rgba(201,167,255,.2);border-radius:14px;padding:8px 12px}
.clist .who{font-weight:800;font-size:14px;color:var(--pink)}.clist .when{color:var(--soft);font-family:var(--mono);font-size:11px;margin-left:6px}
.clist p{margin:2px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.empty{color:var(--soft);font-size:15px;margin:8px 0}
.cform{display:grid;gap:8px;margin-top:8px}
.cform input,.cform textarea{font:inherit;font-size:16px;border:1px solid rgba(201,167,255,.35);border-radius:12px;padding:9px 12px;background:rgba(12,13,18,.7);color:var(--ink);width:100%}
.cform input::placeholder,.cform textarea::placeholder{color:#9c93b5}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--mint);outline-offset:1px}
.cform textarea{min-height:76px;resize:vertical}
.cform .row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.back{display:inline-block;margin-bottom:6px;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}

.about{padding:24px;margin-top:36px;text-align:left}
.about img{width:76px;height:76px;float:right;margin:-6px -4px 0 10px;filter:drop-shadow(0 0 12px rgba(124,255,203,.35))}
.about h2{font-family:var(--display);color:var(--lilac);margin:0 0 8px;text-shadow:0 0 14px rgba(201,167,255,.35)}
footer{text-align:center;color:var(--soft);font-size:14px;padding:10px 20px 40px}
footer p{margin:4px 0}footer a{color:var(--mint)}footer small{font-family:var(--mono);font-size:11px}

dialog#lightbox{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
dialog#lightbox::backdrop{background:rgba(8,8,12,.88);backdrop-filter:blur(4px)}
.lb-body img,.lb-body video{display:block;max-width:96vw;max-height:90vh;border-radius:14px;object-fit:contain;box-shadow:0 0 40px rgba(201,167,255,.35)}
.close{position:fixed;top:12px;right:16px;font-size:30px;line-height:1;width:46px;height:46px;border-radius:99px;border:1px solid var(--lilac);background:rgba(28,30,42,.9);cursor:pointer;color:var(--ink)}
#toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,40px);opacity:0;background:var(--surface);border:1px solid var(--mint);color:var(--mint);font-family:var(--mono);padding:8px 16px;border-radius:99px;font-size:13px;transition:.25s;pointer-events:none;z-index:50}
#toast.show{opacity:1;transform:translate(-50%,0)}
.spark{position:fixed;width:30px;height:30px;pointer-events:none;z-index:60;animation:float .9s ease-out forwards;filter:drop-shadow(0 0 8px rgba(255,179,230,.6))}
.bigpop{position:fixed;left:50%;top:40%;width:150px;height:150px;margin:-75px 0 0 -75px;pointer-events:none;z-index:60;animation:bigpop 1s ease-out forwards;filter:drop-shadow(0 0 24px rgba(201,167,255,.7))}
.flash{animation:flash 1.4s ease-out}

@keyframes bob{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.45) rotate(-10deg)}100%{transform:scale(1)}}
@keyframes pulse{50%{opacity:.7}}
@keyframes float{0%{opacity:.95;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-140%) scale(1)}}
@keyframes bigpop{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.1)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9) translateY(-20px)}}
@keyframes flash{0%{box-shadow:0 0 0 2px var(--mint),0 0 40px rgba(124,255,203,.5)}100%{box-shadow:var(--glow)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.post{opacity:1;transform:none}html{scroll-behavior:auto}}
@media (max-width:520px){.post{padding:14px}.post h2{font-size:24px}.react img{width:30px;height:30px}.hero{padding-top:30px}}

/* Custom cursors (desktop / fine pointer only) */
@media (pointer: fine) {
  body{cursor:url("images/cursors/cat-face.png") 16 2,auto}
  a,button,.btn,.link,.react:not([disabled]),summary,.media,label{cursor:url("images/cursors/paw-point.png") 20 2,pointer}
  input,textarea,select,[contenteditable]{cursor:text}
  .react[disabled]{cursor:url("images/cursors/cat-face.png") 16 2,default}
}