
:root{
  --bg:#fff7f8;--panel:#fff;--text:#4f3d44;--muted:#8e747c;--line:#f0d8dc;
  --pink:#f59ab0;--rose:#ef8da0;--orange:#f4b183;--shadow:0 16px 36px rgba(231,150,165,.14);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#fff8f8 0,#fff3f2 100%);color:var(--text);font:16px/1.85 "PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
a{color:#d86c84;text-decoration:none}a:hover{text-decoration:underline}
img{display:block;max-width:100%}
.wrap{width:min(1160px,92vw);margin:0 auto}
.topbar{background:rgba(255,255,255,.9);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;color:#5a4049}
.badge{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--rose),var(--orange))}
nav{display:flex;flex-wrap:wrap;gap:18px}
nav a{font-weight:600;color:#6d5960}
.search-box{padding:12px 0 18px}.search-ui{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 12px;box-shadow:var(--shadow)}
.search-ui input{flex:1;border:0;outline:0;background:transparent;padding:10px;font-size:15px;color:#6a5259}
.btn,.search-ui button{border:0;border-radius:999px;padding:12px 20px;font-weight:700;cursor:pointer}
.btn-primary,.search-ui button{background:linear-gradient(90deg,var(--rose),var(--orange));color:#fff}
.btn-soft{background:#fff;border:1px solid var(--line);color:#6a5158}
.hero{padding:34px 0 22px}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center}
.hero-copy{background:linear-gradient(180deg,#fff 0,#fff7f7 100%);border:1px solid var(--line);border-radius:32px;padding:30px;box-shadow:var(--shadow)}
.eyebrow{display:inline-block;padding:6px 12px;border-radius:999px;background:#ffe8ec;color:#d86c84;font-size:.92rem;margin-bottom:14px}
h1{font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.18;margin:.15em 0}h2{font-size:clamp(1.45rem,2.3vw,2.2rem);margin:0 0 12px}h3{font-size:1.15rem;margin:0 0 10px}
p{margin:0 0 14px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.grid-2,.grid-3,.grid-4{display:grid;gap:18px}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.section{padding:24px 0}.card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:20px;box-shadow:var(--shadow)}
.card img{border-radius:18px;border:1px solid var(--line);margin-bottom:14px}.story-card,.review{background:linear-gradient(180deg,#fff 0,#fff6f5 100%)}
.feature-card .mood{color:#cf7287;font-weight:700}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-card{background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}
.video-card .poster{position:relative}.video-card .poster::after{content:"▶";position:absolute;left:18px;bottom:18px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#df718f;font-size:28px;transition:.25s}
.video-card:hover .poster::after{transform:scale(1.08)}.video-card .content{padding:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.tag{padding:4px 10px;border-radius:999px;background:#ffe7e9;color:#d66b85;font-size:.84rem}
.mini{font-size:.93rem;color:var(--muted)}.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px}.faq details+details{margin-top:12px}.faq summary{cursor:pointer;font-weight:700}
.footer{margin-top:34px;background:#fff;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:18px;padding:28px 0}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:8px 12px;border-radius:999px;background:#fff1f0;color:#c96d83}
.crumb{color:var(--muted);font-size:.94rem;padding-top:10px}
@media (max-width:940px){.hero-grid,.grid-4,.grid-3,.video-grid,.footer-grid{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:680px){nav{display:none}.hero-grid,.grid-2,.grid-3,.grid-4,.video-grid,.footer-grid{grid-template-columns:1fr}.search-ui{flex-direction:column}}
