@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Nunito:ital,wght@0,700;0,800;0,900;1,700&display=swap');

:root{
--pink:#FF6F91;
--lemon:#FFD166;
--ink:#2B2D42;
--ink-soft:#5C5F7A;
--cream:#FFF8F2;
--paper:#FFFFFF;
--pink-soft:#FFE6EC;
--lemon-soft:#FFF3D4;
--maxw:1160px;
--pad:clamp(.9rem,3vw,1.6rem);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:'DM Sans',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
font-size:17px;
line-height:1.75;
overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ---------- 顶部 ---------- */
.masthead{background:var(--paper);position:relative;z-index:6}

.bar{
max-width:var(--maxw);
margin:0 auto;
display:flex;
align-items:center;
gap:.8rem;
padding:.45rem var(--pad);
}

.brand{
display:inline-flex;
align-items:center;
gap:.55rem;
min-height:46px;
padding:.3rem 0;
text-decoration:none;
font-family:'Nunito','DM Sans',system-ui,sans-serif;
font-weight:900;
font-size:1.12rem;
letter-spacing:-.02em;
flex:0 0 auto;
}

.brand-dot{
width:.85rem;height:.85rem;border-radius:50%;
background:var(--pink);
box-shadow:0 3px 0 var(--lemon),0 7px 14px rgba(255,111,145,.45);
}

.topnav{margin-left:auto;min-width:0;max-width:100%}

.topnav-line{
display:flex;
gap:.1rem;
margin:0;
padding:0;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}

.topnav-line::-webkit-scrollbar{display:none}

.topnav-line a{
display:inline-flex;
align-items:center;
min-height:40px;
padding:.45rem .68rem;
white-space:nowrap;
text-decoration:none;
font-weight:700;
font-size:.95rem;
color:var(--ink-soft);
border-radius:999px;
transition:background .18s ease,color .18s ease;
}

.topnav-line a:hover{background:var(--pink-soft);color:var(--ink)}

/* ---------- 粘性锚点条 ---------- */
.jumpbar{
position:sticky;
top:0;
z-index:20;
background:var(--ink);
box-shadow:0 10px 22px rgba(43,45,66,.22);
}

.jump-line{
max-width:var(--maxw);
margin:0 auto;
display:flex;
gap:.15rem;
padding:.32rem var(--pad);
overflow-x:auto;
scrollbar-width:none;
}

.jump-line::-webkit-scrollbar{display:none}

.jump-line a{
display:inline-flex;
align-items:center;
min-height:42px;
padding:.5rem .7rem;
white-space:nowrap;
text-decoration:none;
font-weight:800;
font-size:.9rem;
color:#fff;
border-radius:999px;
transition:background .18s ease,color .18s ease;
}

.jump-line a:hover{background:var(--lemon);color:var(--ink)}

/* ---------- 首屏 ---------- */
.hero{
position:relative;
min-height:100vh;
display:grid;
place-items:center;
padding:clamp(3rem,9vh,5rem) var(--pad);
overflow:hidden;
background:
radial-gradient(circle at 1px 1px,rgba(43,45,66,.16) 1.2px,transparent 0) 0 0/24px 24px,
linear-gradient(155deg,#FFF0F5 0%,#FFF9EC 55%,#FFF0F5 100%);
}

.hero-bg{
position:absolute;
inset:auto -10% -22% -10%;
height:46%;
background:radial-gradient(60% 70% at 30% 100%,rgba(255,209,102,.55),transparent 70%),
radial-gradient(50% 60% at 80% 100%,rgba(255,111,145,.45),transparent 70%);
filter:blur(6px);
pointer-events:none;
}

.hero-media{position:absolute;inset:0;z-index:1;pointer-events:none}

.hero-img{
position:absolute;
object-fit:cover;
border-radius:0;
background:var(--pink-soft);
box-shadow:0 20px 44px rgba(43,45,66,.24);
}

.hero-img:nth-child(1){
width:min(30vw,232px);
height:min(38vw,296px);
left:min(3vw,32px);
top:12%;
transform:rotate(-6deg);
}

.hero-img:nth-child(2){
width:min(25vw,196px);
height:min(33vw,252px);
right:min(3vw,32px);
bottom:11%;
transform:rotate(7deg);
}

.hero-copy{
position:relative;
z-index:2;
text-align:center;
max-width:min(880px,94vw);
}

.hero-title{
margin:0 0 1.1rem;
font-family:'Nunito','DM Sans',system-ui,sans-serif;
font-weight:900;
font-size:clamp(2.4rem,10.5vw,7rem);
line-height:1.02;
letter-spacing:-.035em;
background:linear-gradient(112deg,var(--pink) 8%,var(--ink) 58%,#7A5BD6 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.hero-title .ch{display:inline-block;animation:rise .6s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(var(--i,0) * 38ms)}

@keyframes rise{
from{opacity:0;transform:translateY(.36em) scale(.88) rotate(-3deg)}
to{opacity:1;transform:none}
}

.hero-sub{
margin:0 auto 1.9rem;
max-width:40ch;
font-size:clamp(1rem,2.3vw,1.15rem);
color:var(--ink-soft);
}

.hero-cta{margin:0}

.hero-cta a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:54px;
padding:0 2rem;
background:var(--pink);
color:#fff;
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:1.05rem;
letter-spacing:.02em;
text-decoration:none;
border-radius:999px;
box-shadow:0 6px 0 #DB5173,0 16px 26px rgba(255,111,145,.34);
transition:transform .16s ease,box-shadow .16s ease;
}

.hero-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 0 #DB5173,0 20px 30px rgba(255,111,145,.4)}

.hero-cta a:active{transform:translateY(2px);box-shadow:0 3px 0 #DB5173}

/* ---------- 主体 ---------- */
.wrap{
max-width:var(--maxw);
margin:0 auto;
padding:clamp(2rem,6vw,4rem) var(--pad);
}

.content-grid{
display:grid;
grid-template-columns:236px minmax(0,1fr);
gap:clamp(1rem,3vw,2.4rem);
align-items:start;
}

/* 侧栏 */
.side{
position:sticky;
top:74px;
background:var(--paper);
padding:1.15rem 1.05rem 1.3rem;
box-shadow:0 12px 26px rgba(43,45,66,.09);
}

.side-t{
display:flex;
align-items:center;
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:1rem;
letter-spacing:-.01em;
margin:0 0 .55rem;
}

.side-t .dot{
display:inline-block;
width:.6rem;
height:.6rem;
border-radius:50%;
background:var(--lemon);
margin-right:.42rem;
vertical-align:.08em;
box-shadow:0 2px 0 rgba(43,45,66,.18);
}

.toc{list-style:none;margin:0 0 1.3rem;padding:0}

.toc li{display:flex;align-items:center;gap:.5rem;counter-increment:toc}

.toc{counter-reset:toc}

.toc li::before{
content:counter(toc,decimal-leading-zero);
font-family:'Nunito',sans-serif;
font-weight:900;
font-size:.72rem;
color:var(--pink);
flex:0 0 auto;
}

.toc a{
flex:1 1 auto;
display:flex;
align-items:center;
min-height:40px;
padding:.2rem 0;
font-weight:700;
font-size:.94rem;
text-decoration:none;
color:var(--ink);
border-bottom:1px solid rgba(43,45,66,.07);
}

.toc a:hover{color:var(--pink)}

.side-brand{
margin:0;
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:1.1rem;
letter-spacing:-.02em;
}

.side-top{margin:1.2rem 0 0}

.side-top a{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:.4rem .6rem;
background:var(--lemon-soft);
color:var(--ink);
font-weight:800;
font-size:.9rem;
text-decoration:none;
border-radius:999px;
}

.side-top a:hover{background:var(--lemon)}

/* 正文 */
.prose{min-width:0}

.prose section{
padding:clamp(1.5rem,4vw,2.8rem);
background:var(--paper);
}

.prose section + section{margin-top:1rem}

.prose section:nth-child(even){background:var(--pink-soft)}

.prose section[id]{scroll-margin-top:96px}

.prose h2{
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:clamp(1.5rem,4.2vw,2.2rem);
line-height:1.22;
letter-spacing:-.025em;
margin:0 0 1rem;
}

.prose h2 > span{
background:linear-gradient(transparent 64%,var(--lemon) 64%);
padding:0 .12em;
}

.prose h3{
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:clamp(1.15rem,2.6vw,1.35rem);
line-height:1.35;
margin:1.8rem 0 .6rem;
}

.prose h3 > span{box-shadow:inset 0 -.42em 0 var(--lemon-soft)}

.prose p{margin:0 0 1.05rem}

.prose p:last-child{margin-bottom:0}

.prose a{color:#D9486C;font-weight:700}

.prose strong{font-weight:700}

.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.35rem}

.prose li{margin:.35rem 0}

.prose li::marker{color:var(--pink);font-weight:800}

.prose blockquote{
margin:1.4rem 0;
padding:.9rem 1.1rem;
background:var(--lemon-soft);
font-weight:700;
border-left:6px solid var(--lemon);
}

.prose blockquote p:last-child{margin-bottom:0}

.prose figure{margin:1.4rem 0}

.prose img{width:100%}

.prose table{
display:block;
width:100%;
overflow-x:auto;
border-collapse:collapse;
font-size:.95rem;
}

.prose th,.prose td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid rgba(43,45,66,.14)}

.prose th{background:var(--lemon-soft);font-weight:800}

.prose hr{border:0;height:3px;background:var(--lemon);margin:1.6rem 0}

/* ---------- 页脚 ---------- */
.foot{
background:var(--ink);
color:#fff;
padding:clamp(2rem,6vw,3.4rem) max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad)));
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
gap:1.4rem;
align-items:start;
}

.foot-lead{
margin:0;
font-family:'Nunito','DM Sans',sans-serif;
font-weight:900;
font-size:clamp(1.7rem,5.6vw,2.9rem);
line-height:1.05;
letter-spacing:-.035em;
background:linear-gradient(100deg,#FFFFFF 25%,var(--lemon) 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}

.foot-links{
margin:0;
display:flex;
flex-wrap:wrap;
gap:.1rem .15rem;
}

.foot-links a{
display:inline-flex;
align-items:center;
min-height:40px;
padding:.45rem .55rem;
font-size:.95rem;
font-weight:700;
color:rgba(255,255,255,.86);
text-decoration:none;
border-radius:999px;
}

.foot-links a:hover{background:var(--pink);color:var(--ink)}

.foot-copy{
grid-column:1 / -1;
padding-top:1.1rem;
border-top:1px solid rgba(255,255,255,.18);
font-size:.86rem;
color:rgba(255,255,255,.66);
}

/* ---------- 滚动显现 ---------- */
.rv{
opacity:0;
transform:translateY(16px);
transition:opacity .55s ease var(--d,0ms),transform .55s ease var(--d,0ms);
}

.rv.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (max-width:900px){
.content-grid{grid-template-columns:minmax(0,1fr)}
.side{position:static;top:auto;padding:.85rem}
.toc{display:flex;flex-wrap:wrap;gap:.1rem .4rem;margin-bottom:.6rem}
.toc li{flex:0 0 auto}
.toc li::before{display:none}
.toc a{min-height:40px;padding:.25rem .6rem;background:var(--lemon-soft);border:0;border-radius:999px;font-size:.9rem}
.side-top{margin-top:.7rem}
.foot{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:640px){
body{font-size:16.5px}
.hero{padding-top:clamp(4.4rem,14vh,6rem);padding-bottom:clamp(3rem,10vh,4rem)}
.hero-img:nth-child(1){width:36vw;height:46vw;top:7%;opacity:.92}
.hero-img:nth-child(2){width:31vw;height:41vw;bottom:6%;opacity:.92}
.hero-sub{max-width:32ch}
.prose section{padding:1.35rem 1.05rem}
.side-t{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-title .ch{animation:none}
.rv{opacity:1;transform:none;transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}