:root{
  --rose:#e83e6a; --rose-d:#c22c55; --plum:#7b2f6b; --violet:#9b4dca;
  --ink:#2a1b2e; --body:#4a3b50; --muted:#7d6c85;
  --cream:#fff7fa; --card:#ffffff; --line:#f2dfe8; --line2:#e7cfdb;
  --amber:#f5964f; --ok:#2f8f5b;
  --shadow:0 6px 24px rgba(122,47,107,.10); --shadow-lg:0 18px 48px rgba(122,47,107,.16);
  --r:14px; --r-lg:22px; --wrap:1120px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--body);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:clamp(15px,.35vw + 14.2px,17px); line-height:1.68;
  overflow-wrap:break-word; word-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--rose-d); text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet); outline-offset:2px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 clamp(14px,3vw,26px)}
h1,h2,h3,h4{color:var(--ink); line-height:1.22; margin:0 0 .55em; font-weight:800;
  letter-spacing:-.012em; text-wrap:balance}
h1{font-size:clamp(1.72rem,3.4vw,2.62rem)}
h2{font-size:clamp(1.3rem,2.1vw,1.72rem); margin-top:1.9em}
h3{font-size:clamp(1.06rem,1.4vw,1.22rem); margin-top:1.5em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.15em; padding-left:1.35em}
li{margin:.36em 0}
hr{border:0; border-top:1px solid var(--line); margin:2.4em 0}

/* ---------- header / nav ---------- */
.site-head{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.head-in{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:12px; padding-bottom:12px}
.brand{display:inline-flex; align-items:center; gap:9px; font-weight:900;
  font-size:1.22rem; color:var(--ink); letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand img{width:26px; height:26px}
.brand span{background:linear-gradient(92deg,var(--rose),var(--violet));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.mainnav{margin-left:auto}
.mainnav ul{display:flex; flex-wrap:wrap; gap:4px 16px; list-style:none; margin:0; padding:0}
.mainnav a{color:var(--body); font-weight:600; font-size:.94rem; padding:5px 2px; display:inline-block}
.mainnav a:hover,.mainnav a[aria-current]{color:var(--rose-d)}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:13px 26px; border-radius:999px; font-weight:800;
  font-size:1rem; text-align:center; border:0; cursor:pointer; transition:transform .12s, box-shadow .12s}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-yes{background:linear-gradient(94deg,#2fa363,#25864f); color:#fff; box-shadow:0 6px 18px rgba(37,134,79,.28)}
.btn-no{background:#fff; color:var(--rose-d); border:2px solid var(--line2)}
.btn-cta{background:linear-gradient(94deg,var(--rose),var(--violet)); color:#fff;
  box-shadow:0 8px 22px rgba(232,62,106,.28)}
.btn-ghost{background:#fff; color:var(--rose-d); border:2px solid var(--line2); font-weight:700}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* ---------- age gate ---------- */
.gate{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:clamp(20px,3.4vw,32px); text-align:center;
  max-width:620px; margin:0 auto}
.gate h2{margin:0 0 .5em; font-size:clamp(1.15rem,2vw,1.42rem)}
.gate .btn-row{justify-content:center}
.gate .fine{margin:1.05em 0 0; font-size:.86rem; color:var(--muted)}

/* ---------- hero ---------- */
.hero{padding:clamp(26px,5vw,56px) 0 clamp(20px,3vw,34px);
  background:linear-gradient(168deg,#fff1f6 0%,#fdf3ff 52%,var(--cream) 100%)}
.hero-head{text-align:center; max-width:800px; margin:0 auto clamp(20px,3.4vw,34px)}
.hero-head p{font-size:clamp(1rem,1.2vw,1.12rem); color:var(--body); margin:0}
.hero-grid{display:grid; gap:clamp(20px,3.4vw,40px); align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); margin-top:clamp(24px,4vw,44px)}
.hero-media{border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg);
  background:#f7e6ee; aspect-ratio:8/5}
.hero-media img{width:100%; height:100%; object-fit:cover}

/* ---------- cards / panels ---------- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(16px,2.4vw,22px); box-shadow:var(--shadow)}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.grid-tight{display:grid; gap:10px 20px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(15px,2.2vw,20px); margin:1.6em 0}
.panel-cta{background:linear-gradient(96deg,#fff2f7,#fbf1ff);
  border:1px solid var(--line2); border-radius:var(--r-lg);
  padding:clamp(18px,2.8vw,26px); margin:2em 0; text-align:center}
.panel-cta p{margin:0 0 1em; font-weight:600; color:var(--ink)}
.crumbs{font-size:.88rem; color:var(--muted); padding:14px 0 4px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--rose-d)}
.toc{background:#fff; border:1px solid var(--line); border-left:4px solid var(--rose);
  border-radius:var(--r); padding:16px 18px; margin:1.5em 0}
.toc strong{display:block; margin-bottom:.4em; color:var(--ink)}
.toc ul{margin:0; padding-left:1.2em}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:.9em 0 0; padding:0; list-style:none}
.tag{font-size:.8rem; color:var(--plum); background:#fdeef5; border:1px solid var(--line2);
  padding:4px 11px; border-radius:999px}
.meta-row{display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:.88rem; margin:.3em 0 0}
.linklist{list-style:none; padding:0; margin:0; columns:2; column-gap:26px}
.linklist li{margin:.3em 0; break-inside:avoid}
@media(max-width:640px){.linklist{columns:1}}

/* ---------- forum thread ---------- */
.thread-head{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(16px,2.6vw,24px); box-shadow:var(--shadow)}
.post{display:grid; grid-template-columns:190px 1fr; gap:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:16px 0;
  box-shadow:var(--shadow)}
.post-side{background:#fdf4f8; border-right:1px solid var(--line); padding:16px; text-align:center}
.post-side img{width:76px; height:76px; border-radius:50%; object-fit:cover; margin:0 auto 9px;
  border:3px solid #fff; box-shadow:0 2px 8px rgba(122,47,107,.14); background:#f0dbe6}
.uname{font-weight:800; color:var(--ink); font-size:.96rem}
.uname a{color:var(--ink)}
.ubadge{display:inline-block; font-size:.72rem; color:var(--plum); background:#fbe6ef;
  border-radius:999px; padding:2px 9px; margin:5px 0 7px}
.umeta{font-size:.78rem; color:var(--muted); line-height:1.5}
.post-main{min-width:0}
.post-bar{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 18px; background:#fdf7fa; border-bottom:1px solid var(--line);
  font-size:.85rem; color:var(--muted)}
.post-body{padding:16px 18px 6px}
.post-body p:last-child{margin-bottom:1em}
.pidx{color:var(--plum); font-weight:700}
@media(max-width:720px){
  .post{grid-template-columns:1fr}
  .post-side{display:flex; align-items:center; gap:13px; text-align:left;
    border-right:0; border-bottom:1px solid var(--line); padding:12px 15px}
  .post-side img{width:50px; height:50px; margin:0}
  .ubadge{margin:0}
  .umeta{display:flex; gap:14px; flex-wrap:wrap}
}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:1.4em 0}
table{border-collapse:collapse; width:100%; min-width:440px; font-size:.94rem}
th,td{text-align:left; padding:10px 13px; border-bottom:1px solid var(--line)}
th{background:#fdf4f8; color:var(--ink); font-weight:700}

/* ---------- footer ---------- */
.site-foot{background:#fff; border-top:1px solid var(--line);
  margin-top:clamp(38px,6vw,70px); padding:clamp(26px,4vw,42px) 0 26px; font-size:.92rem}
.foot-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.foot-grid h3{font-size:.84rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); margin:0 0 .7em; font-weight:700}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin:.34em 0}
.foot-grid a{color:var(--body)}
.foot-bottom{border-top:1px solid var(--line); margin-top:24px; padding-top:18px;
  color:var(--muted); display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between}
.foot-nav{display:flex; flex-wrap:wrap; gap:6px 16px; list-style:none; margin:0; padding:0}

@media(max-width:460px){
  .btn{width:100%; display:block}
  .btn-row{flex-direction:column; align-items:stretch}
  .gate .btn-row{flex-direction:row}
  .gate .btn{width:auto; flex:1}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}