:root{
  --pink:#ff2b91;
  --pink-dark:#d91675;
  --purple:#8c42ff;
  --gold:#ffc941;
  --ink:#4c2451;
  --ink-soft:#6d4a72;
  --bg:#fff7fc;
  --card:#ffffff;
  --line:#ffd8ef;
  --shadow:0 18px 50px rgba(134,34,113,.13);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(circle at top left,#ffe2f2 0%,#fff8fd 40%,#f7f1ff 100%);
}
img{max-width:100%;display:block}
a{color:inherit}
.page-glow::before,.page-glow::after{
  content:"";
  position:fixed;
  inset:auto;
  width:28rem;
  height:28rem;
  border-radius:50%;
  filter:blur(40px);
  opacity:.25;
  z-index:-1;
}
.page-glow::before{background:#ff72c0;left:-10rem;top:4rem}
.page-glow::after{background:#8d7eff;right:-8rem;top:10rem}
.site-header{
  position:sticky;top:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:14px clamp(16px,4vw,44px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.9);
}
.brand{display:flex;gap:.8rem;align-items:center;text-decoration:none}
.brand-mark{
  width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-weight:900;
  box-shadow:0 12px 28px rgba(217,22,117,.25);
}
.brand-text strong{display:block;line-height:1.05;font-size:1.05rem}
.brand-text small{display:block;color:#8c6c90;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:800;margin-top:2px}
.site-nav{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.site-nav a{
  text-decoration:none;font-weight:800;padding:10px 14px;border-radius:999px;color:var(--ink);
}
.site-nav a:hover{background:#fff0f8;color:var(--pink-dark)}
main{padding:clamp(20px,3vw,28px)}
.hero-section,
.section-card,
.reader-section{
  max-width:1200px;margin:0 auto 24px auto;
}
.hero-section{
  display:grid;grid-template-columns:1.08fr .82fr;align-items:center;gap:clamp(18px,4vw,48px);
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,244,251,.88));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  border-radius:38px;padding:clamp(20px,4vw,42px);
  overflow:hidden;position:relative;
}
.hero-section::after{
  content:"";position:absolute;inset:auto -8rem -8rem auto;width:20rem;height:20rem;border-radius:50%;
  background:radial-gradient(circle,#ffc5e7,transparent 65%);opacity:.7;pointer-events:none;
}
.eyebrow{margin:0 0 8px 0;font-weight:900;text-transform:uppercase;letter-spacing:.16em;color:var(--pink-dark);font-size:.76rem}
.eyebrow.small{font-size:.68rem;margin-bottom:10px}
h1,h2,h3{margin:0;line-height:.98}
h1{font-size:clamp(3rem,7.8vw,5.7rem);letter-spacing:-.07em;color:var(--pink-dark);text-shadow:3px 3px 0 #fff,7px 7px 0 rgba(140,66,255,.10)}
h2{font-size:clamp(2rem,4.8vw,3.8rem);letter-spacing:-.05em;color:#702578}
h3{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em;color:var(--pink-dark)}
.lead,.section-copy,.story-text p,.how-grid p,.value-grid p,.download-section p,.history-list li,.score-note{line-height:1.7;color:var(--ink-soft)}
.hero-actions,.download-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn,.chip-btn,button{
  border:0;font:inherit;cursor:pointer
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  padding:14px 18px;border-radius:999px;font-weight:900;background:#fff;color:var(--pink-dark);
  box-shadow:0 10px 26px rgba(98,31,86,.12);
}
.btn.primary{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff}
.chip-btn{
  padding:10px 14px;border-radius:999px;background:#fff1f8;color:var(--pink-dark);font-weight:800
}
.chip-btn:hover,.btn:hover{transform:translateY(-1px)}
.hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-pills span,.value-pill,.badge-pill{
  display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:#fff3fa;color:#8c4a84;font-weight:800;font-size:.92rem
}
.hero-art img{width:min(100%,420px);margin-inline:auto;border-radius:28px;box-shadow:0 22px 60px rgba(77,11,64,.25);transform:rotate(1.5deg)}
.section-card{
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow);
  border-radius:34px;padding:clamp(20px,4vw,36px)
}
.section-heading.split{display:flex;justify-content:space-between;align-items:end;gap:1rem}
.how-grid,.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.how-grid article,.value-item{
  background:#fff7fc;border:1px solid var(--line);border-radius:24px;padding:18px
}
.how-num{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;font-weight:900;margin-bottom:12px}
.reader-layout{display:grid;grid-template-columns:minmax(0,1.08fr) 320px;gap:18px;margin-top:18px}
.reader-card{
  background:var(--card);border-radius:30px;overflow:hidden;border:1px solid #fff;box-shadow:var(--shadow)
}
.reader-image-wrap{position:relative;background:#ffeef8}
.reader-image-wrap img{width:100%;aspect-ratio:16/10;object-fit:cover}
.page-tag{
  position:absolute;left:14px;bottom:14px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.92);
  color:var(--pink-dark);font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.1)
}
.reader-content{padding:clamp(20px,3vw,30px)}
.chapter-meta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:6px}
.chapter-label{margin:0;color:#8b678f;text-transform:uppercase;letter-spacing:.14em;font-weight:900;font-size:.78rem}
.progress-copy{padding:8px 12px;border-radius:999px;background:#fff3fb;color:#8b4c7f;font-weight:900;font-size:.88rem}
.story-text p{margin:0 0 12px 0;font-size:1.08rem}
.question{font-weight:900;color:#74347d;margin-top:18px}
.choice-grid,.ending-grid{display:grid;gap:12px;margin-top:14px}
.choice-card{
  width:100%;text-align:left;background:#fff;border:2px solid #ffe0f0;border-radius:22px;padding:16px 16px 15px;
  box-shadow:0 10px 24px rgba(96,18,89,.08);color:var(--ink)
}
.choice-card:hover,.choice-card:focus-visible{border-color:var(--pink-dark);outline:0;transform:translateY(-1px);box-shadow:0 14px 30px rgba(96,18,89,.14)}
.choice-title{display:block;font-weight:900;font-size:1rem;color:#66296f}
.choice-hint{display:block;margin-top:6px;color:#926493;font-weight:700;font-size:.92rem;line-height:1.45}
.choice-page{display:inline-flex;margin-top:10px;padding:6px 10px;border-radius:999px;background:#fff0f8;color:var(--pink-dark);font-size:.8rem;font-weight:900}
.moral-note{min-height:28px;margin:16px 0 0;color:#82367c;font-weight:900}
.reader-controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.reader-sidebar{display:grid;gap:16px;align-content:start}
.sidebar-card{background:#fff;border-radius:26px;padding:18px;border:1px solid #fff;box-shadow:var(--shadow)}
.score-row{display:flex;align-items:end;gap:6px}
.score-row strong{font-size:2.4rem;color:var(--pink-dark);line-height:1}
.score-total{font-weight:900;color:#95678f;padding-bottom:4px}
.star-bar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 10px}
.star{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.1rem;
  background:#fff7dd;border:1px solid #ffe3a3
}
.star.filled{background:linear-gradient(135deg,#ffe68a,#ffc941)}
.history-list{margin:0;padding-left:18px;display:grid;gap:10px}
.history-list li{font-size:.95rem}
.pill-stack,.badge-area{display:flex;gap:8px;flex-wrap:wrap}
.chapter-grid,.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.chapter-card,.gallery-card{
  background:#fff;border-radius:24px;overflow:hidden;border:1px solid #fff;box-shadow:0 12px 28px rgba(90,16,86,.10)
}
.chapter-card img,.gallery-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.chapter-card div,.gallery-card div{padding:16px}
.chapter-card strong,.gallery-card strong{display:block;color:#65256e;font-size:1.02rem}
.chapter-card span{display:inline-flex;margin-top:8px;padding:6px 10px;border-radius:999px;background:#fff0f8;color:var(--pink-dark);font-weight:900;font-size:.8rem}
.gallery-card a{display:inline-flex;margin-top:10px;padding:10px 12px;border-radius:999px;background:#fff0f8;color:var(--pink-dark);font-weight:900;text-decoration:none}
.value-grid{grid-template-columns:repeat(3,1fr)}
.hidden{display:none !important}
.site-footer{text-align:center;padding:10px 16px 42px;color:#8b668f}
@media (max-width:1000px){
  .hero-section,.reader-layout,.how-grid,.value-grid,.chapter-grid,.gallery-grid{grid-template-columns:1fr 1fr}
  .reader-layout{grid-template-columns:1fr}
  .reader-sidebar{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .site-header{position:static;display:block}
  .site-nav{margin-top:12px;justify-content:flex-start}
  .hero-section,.how-grid,.value-grid,.chapter-grid,.gallery-grid,.reader-sidebar{grid-template-columns:1fr}
  .section-heading.split{display:block}
  .reader-mini-actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
  h1{font-size:3.4rem}
}