:root{
  --bg:#fff6fa;
  --bg2:#ffeef5;
  --pri:#ff8fb8;
  --pri-deep:#f4679d;
  --acc:#a5d8ff;
  --acc2:#ffd6a5;
  --ink:#5a4a55;
  --ink-soft:#9b8794;
  --card:#ffffffcc;
  --radius:1.6rem;
  --font-cute:"ZCOOL KuaiLe","Baloo 2",sans-serif;
  --font-body:"Noto Sans SC",sans-serif;
  --fs:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);font-size:var(--fs);color:var(--ink);
  background:linear-gradient(180deg,var(--bg),var(--bg2) 60%,var(--bg));
  overflow-x:hidden;transition:background 1s,color 1s;
}
b{color:var(--pri-deep)}

#bg3d,#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#fx{z-index:1}

/* NAV */
#nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:1.5rem;padding:.5rem 1.2rem;
  background:var(--card);backdrop-filter:blur(14px);border-radius:999px;
  box-shadow:0 8px 32px #f4679d22;border:2px solid #ffffff;
  max-width:95vw;}
#nav .logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--pri-deep);
  font-family:var(--font-cute);font-size:1.1rem;white-space:nowrap}
#nav .logo img{width:34px;height:34px;border-radius:50%;border:2px solid var(--pri)}
#nav .links{display:flex;gap:.2rem}
#nav .links a{color:var(--ink);text-decoration:none;padding:.4rem .8rem;border-radius:999px;
  font-size:.9rem;transition:.25s;white-space:nowrap}
#nav .links a:hover{background:var(--pri);color:#fff;transform:translateY(-2px)}

main{position:relative;z-index:2}

/* HERO */
#hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem 1rem 3rem;position:relative}
.avatar-wrap{position:relative;width:180px;height:180px;margin:0 auto 1.5rem}
.avatar{width:160px;height:160px;border-radius:50%;object-fit:cover;border:5px solid #fff;
  box-shadow:0 12px 40px #f4679d44;position:absolute;top:10px;left:10px;
  animation:bob 4s ease-in-out infinite}
.avatar-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--pri);
  animation:spin 14s linear infinite}
.avatar-ring.r2{inset:-14px;border-color:var(--acc);animation-duration:22s;animation-direction:reverse}
.avatar-emoji{position:absolute;font-size:1.6rem;animation:bob 3s ease-in-out infinite}
.e1{top:-10px;right:0}.e2{bottom:0;left:-14px;animation-delay:-1s}.e3{top:40%;right:-24px;animation-delay:-2s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-title{font-family:"Baloo 2",var(--font-cute);font-size:clamp(3rem,10vw,7rem);line-height:.95;letter-spacing:.02em}
.grad{background:linear-gradient(90deg,var(--pri-deep),#c77dff,var(--pri-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.hero-cn{font-family:var(--font-cute);font-size:clamp(1.6rem,5vw,2.6rem);margin-top:.3rem;color:var(--ink)}
.hero-sub{margin-top:1.2rem;color:var(--ink-soft);line-height:1.9;max-width:34rem}
.hero-chips{margin-top:1.4rem;display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.chip{background:#fff;border:2px solid #ffd7e6;border-radius:999px;padding:.35rem .9rem;
  font-size:.85rem;box-shadow:0 4px 14px #f4679d18;transition:.25s;cursor:default}
.chip:hover{transform:translateY(-3px) rotate(-2deg);border-color:var(--pri)}
.hero-btns{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{border:none;cursor:pointer;text-decoration:none;font-family:var(--font-cute);
  font-size:1rem;padding:.75rem 1.8rem;border-radius:999px;transition:.25s;display:inline-block}
.btn.primary{background:linear-gradient(120deg,var(--pri),var(--pri-deep));color:#fff;
  box-shadow:0 8px 24px #f4679d55}
.btn.primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 32px #f4679d77}
.btn.ghost{background:#fff;color:var(--pri-deep);border:2px solid var(--pri)}
.btn.ghost:hover{background:var(--pri);color:#fff;transform:translateY(-3px)}
.scroll-hint{position:absolute;bottom:1.5rem;color:var(--ink-soft);font-size:.85rem;animation:bob 2s infinite}

/* SECTIONS */
.section{max-width:1100px;margin:0 auto;padding:5.5rem 1.2rem}
.sec-title{font-family:var(--font-cute);font-size:clamp(1.8rem,4.5vw,2.6rem);text-align:center;color:var(--pri-deep)}
.sec-sub{text-align:center;color:var(--ink-soft);margin-top:.5rem}

.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;margin-top:2.5rem}
.card{background:var(--card);backdrop-filter:blur(8px);border-radius:var(--radius);padding:1.8rem 1.5rem;
  border:2px solid #fff;box-shadow:0 10px 30px #f4679d1c;transition:transform .3s,box-shadow .3s}
.card-emoji{font-size:2.2rem;margin-bottom:.6rem}
.card h3{font-family:var(--font-cute);color:var(--pri-deep);margin-bottom:.5rem}
.card p{color:var(--ink-soft);line-height:1.8;font-size:.92rem}

/* GALLERY */
.polaroid-wall{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;margin-top:2.5rem}
.polaroid{background:#fff;padding:.7rem .7rem 2.2rem;border-radius:.5rem;
  box-shadow:0 10px 30px #5a4a5522;cursor:pointer;transition:transform .35s,box-shadow .35s;
  position:relative;width:200px}
.polaroid img{width:100%;height:180px;object-fit:cover;border-radius:.3rem;display:block}
.polaroid::after{content:attr(data-cap);position:absolute;bottom:.5rem;left:0;right:0;
  text-align:center;font-family:var(--font-cute);font-size:.85rem;color:var(--ink-soft)}
.polaroid:hover{transform:scale(1.08) rotate(0deg)!important;box-shadow:0 18px 44px #f4679d44;z-index:5}

#lightbox{position:fixed;inset:0;background:#5a4a55cc;z-index:100;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(6px)}
#lightbox.on{display:flex}
#lightbox img{max-width:88vw;max-height:85vh;border-radius:1rem;border:6px solid #fff;
  box-shadow:0 20px 60px #0006;animation:pop .3s ease}
.lb-close{position:absolute;top:1.2rem;right:1.6rem;color:#fff;font-size:1.6rem;cursor:pointer}
@keyframes pop{from{transform:scale(.85);opacity:0}}

/* BOARD */
.board-box{max-width:640px;margin:2.2rem auto 0;background:var(--card);backdrop-filter:blur(8px);
  border-radius:var(--radius);border:2px solid #fff;box-shadow:0 10px 30px #f4679d1c;padding:1.4rem}
.board-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1rem}
.board-item{background:#fff;border-radius:1rem;padding:.7rem 1rem;border:1.5px solid #ffe3ee;
  animation:pop .3s ease}
.board-item .who{font-family:var(--font-cute);color:var(--pri-deep);font-size:.9rem}
.board-item .txt{font-size:.92rem;line-height:1.6}
.board-item .when{font-size:.72rem;color:var(--ink-soft)}
.board-form{display:flex;gap:.6rem;flex-wrap:wrap}
.board-form input{flex:1;min-width:120px;border:2px solid #ffd7e6;border-radius:999px;
  padding:.6rem 1rem;font-family:var(--font-body);font-size:.92rem;outline:none;background:#fff;transition:.25s}
.board-form input:focus{border-color:var(--pri)}

/* MAGIC */
.magic-box{max-width:640px;margin:2.2rem auto 0;text-align:center}
.magic-presets{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:1rem}
.btn-preset{cursor:pointer;font-family:var(--font-body)}
.magic-status{margin-top:1rem;color:var(--pri-deep);font-family:var(--font-cute);min-height:1.5em}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:2.5rem}
.contact-card{background:var(--card);border:2px solid #fff;border-radius:var(--radius);
  padding:1.3rem 1.4rem;text-decoration:none;color:var(--ink);box-shadow:0 8px 24px #f4679d18;
  display:flex;align-items:center;gap:1rem;transition:.3s}
.contact-card:hover{transform:translateY(-5px) rotate(-1deg);box-shadow:0 14px 36px #f4679d38;border-color:var(--pri)}
.contact-card .ic{font-size:1.8rem}
.contact-card .lb{font-family:var(--font-cute);color:var(--pri-deep)}
.contact-card .hd{font-size:.85rem;color:var(--ink-soft)}

footer{text-align:center;padding:3rem 1rem;color:var(--ink-soft);font-family:var(--font-cute)}

/* CHAT WIDGET */
#chatWidget{position:fixed;right:1.4rem;bottom:1.4rem;z-index:60}
#chatToggle{width:64px;height:64px;border-radius:50%;border:3px solid #fff;cursor:pointer;
  background:var(--pri);box-shadow:0 10px 30px #f4679d66;padding:0;overflow:visible;
  transition:.3s;animation:bob 3.5s ease-in-out infinite}
#chatToggle:hover{transform:scale(1.1)}
#chatToggle img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chat-dot{position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;
  background:#7ae582;border:2px solid #fff}
#chatPanel{position:absolute;right:0;bottom:76px;width:min(340px,88vw);background:#fff;
  border-radius:1.4rem;box-shadow:0 20px 60px #f4679d44;border:2px solid #ffd7e6;
  display:none;flex-direction:column;overflow:hidden}
#chatPanel.on{display:flex;animation:pop .25s ease}
.chat-head{background:linear-gradient(120deg,var(--pri),var(--pri-deep));color:#fff;
  padding:.8rem 1rem;font-family:var(--font-cute);display:flex;align-items:center;gap:.5rem}
.chat-head small{opacity:.85;font-family:var(--font-body);font-size:.7rem}
#chatClose{margin-left:auto;cursor:pointer;padding:0 .4rem}
.chat-body{height:300px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--bg)}
.msg{max-width:80%;padding:.55rem .9rem;border-radius:1.1rem;font-size:.9rem;line-height:1.6;animation:pop .25s ease}
.msg.ai{background:#fff;border:1.5px solid #ffd7e6;align-self:flex-start;border-bottom-left-radius:.3rem}
.msg.me{background:var(--pri);color:#fff;align-self:flex-end;border-bottom-right-radius:.3rem}
.msg.typing{color:var(--ink-soft);font-style:italic}
.chat-input{display:flex;border-top:1.5px solid #ffe3ee}
.chat-input input{flex:1;border:none;outline:none;padding:.8rem 1rem;font-size:.92rem;font-family:var(--font-body)}
.chat-input button{border:none;background:none;color:var(--pri-deep);font-size:1.2rem;cursor:pointer;padding:0 1rem}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:640px){
  #nav .links a{padding:.35rem .5rem;font-size:.8rem}
  .polaroid{width:150px}.polaroid img{height:135px}
}

/* ---- multi-page additions ---- */
.page-top{padding-top:8rem;min-height:80vh}
#nav .links a.on{background:var(--pri);color:#fff}
.foot-tip{font-size:.75rem;opacity:.7;margin-top:.3rem}

/* stars rating */
.stars{text-align:center;margin-top:.3rem;line-height:1}
.star{cursor:pointer;color:#f4a63d;font-size:1.05rem;transition:transform .15s;display:inline-block}
.star:hover{transform:scale(1.3)}
.star.done{cursor:default}
.star.done:hover{transform:none}
.stars small{display:block;color:var(--ink-soft);font-size:.68rem;margin-top:.2rem}
.polaroid{padding-bottom:3.4rem}
.polaroid::after{bottom:2rem}
.polaroid .stars{position:absolute;bottom:.35rem;left:0;right:0}

/* forum */
.forum-form{display:flex;flex-direction:column;gap:.6rem}
.forum-form .row{display:flex;gap:.6rem;flex-wrap:wrap}
.forum-form input,.forum-form textarea{flex:1;min-width:120px;border:2px solid #ffd7e6;border-radius:1rem;
  padding:.6rem 1rem;font-family:var(--font-body);font-size:.92rem;outline:none;background:#fff;transition:.25s;resize:vertical}
.forum-form input:focus,.forum-form textarea:focus{border-color:var(--pri)}
.forum-form .btn{align-self:flex-end}
.thread-list{max-width:760px;margin:2rem auto 0;display:flex;flex-direction:column;gap:1rem}
.thread{cursor:pointer}
.t-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.t-title{font-family:var(--font-cute);font-size:1.1rem;color:var(--pri-deep)}
.t-meta{font-size:.75rem;color:var(--ink-soft)}
.t-body{margin-top:.5rem;font-size:.92rem;line-height:1.8;color:var(--ink)}
.t-replies{display:none;margin-top:1rem;border-top:1.5px dashed #ffd7e6;padding-top:.8rem}
.thread.open .t-replies{display:block}
.t-reply{background:#fff;border-radius:.8rem;padding:.5rem .8rem;margin-bottom:.5rem;font-size:.88rem;border:1.5px solid #ffe3ee}
.t-reply.is-ai{border-color:var(--acc);background:#f4faff}
.t-reply small{color:var(--ink-soft);margin-left:.4rem;font-size:.7rem}
.reply-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.reply-form input{border:2px solid #ffd7e6;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;outline:none;background:#fff}
.reply-form .r-name{width:110px}
.reply-form .r-text{flex:1;min-width:150px}
.reply-form .btn{padding:.45rem 1.2rem;font-size:.85rem}

/* chat room */
.room-box{max-width:720px;margin:2rem auto 0;background:var(--card);backdrop-filter:blur(8px);
  border-radius:var(--radius);border:2px solid #fff;box-shadow:0 10px 30px #f4679d1c;overflow:hidden}
.room-body{height:420px;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.7rem;background:#fffdfe}
.room-msg{max-width:85%;align-self:flex-start}
.room-msg.mine{align-self:flex-end;text-align:right}
.room-msg.sys{align-self:center;color:var(--ink-soft);font-size:.78rem}
.rm-name{font-family:var(--font-cute);color:var(--pri-deep);font-size:.82rem}
.rm-time{color:var(--ink-soft);font-size:.68rem;margin-left:.4rem}
.rm-text{background:#fff;border:1.5px solid #ffe3ee;border-radius:1rem;padding:.5rem .9rem;
  font-size:.9rem;line-height:1.6;margin-top:.2rem;display:inline-block;text-align:left}
.room-msg.mine .rm-text{background:var(--pri);color:#fff;border-color:var(--pri)}
.room-msg.is-ai .rm-text{background:#f4faff;border-color:var(--acc)}
.room-form{display:flex;gap:.5rem;padding:.8rem;border-top:1.5px solid #ffe3ee;flex-wrap:wrap}
.room-form input{border:2px solid #ffd7e6;border-radius:999px;padding:.55rem 1rem;font-size:.9rem;outline:none}
#roomName{width:110px}
#roomText{flex:1;min-width:150px}

/* 3D model box */
.model-box{max-width:560px;height:440px;margin:2rem auto 0;background:var(--card);
  border:2px solid #fff;border-radius:var(--radius);box-shadow:0 10px 30px #f4679d1c;overflow:hidden}
.model-box model-viewer{width:100%;height:100%;background:transparent;--poster-color:transparent}