:root{
  --bg:#fff8fb;
  --bg-card:#ffffff;
  --bg-soft:#ffebf5;
  --bg-chip:#ffe0f0;
  --text:#2a2430;
  --muted:#3d3544;
  --line:#f3c6dc;
  --accent:#e91e8c;
  --accent-2:#ff5cad;
  --accent-deep:#c4006a;
  --chip-text:#9b0058;
  --nav:#e91e8c;
  --radius:14px;
  --shadow:0 8px 28px rgba(233,30,140,.08);
  --font:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
  --pad-cta:5.75rem;
  --cta-bg:linear-gradient(105deg,#c4006a 0%,#e91e8c 48%,#ff5cad 100%);
  --cta-ink:#ffffff;
  --cta-border:rgba(255,255,255,.28);
  --cta-wash:rgba(255,255,255,.22);
  --cta-track:rgba(255,255,255,.28);
  --cta-shadow:0 12px 28px rgba(196,0,106,.32);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 420px at 12% -10%, var(--bg-chip) 0%, transparent 55%),
    radial-gradient(700px 380px at 100% 0%, var(--bg-soft) 0%, transparent 50%),
    var(--bg);
  line-height:1.7;
  font-size:16px;
  padding-bottom:calc(var(--pad-cta) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere;
  word-break:normal;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--accent);text-decoration:underline}
.skip{
  position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{left:12px;top:12px;width:auto;height:auto;padding:.5rem .8rem;background:#fff;border:2px solid var(--accent);z-index:1000}
.wrap{width:min(1120px,calc(100% - 2rem));margin:0 auto}
.topbar{
  background:linear-gradient(90deg,var(--accent-deep),var(--accent) 45%,var(--accent-2));
  color:#fff;
  font-size:.875rem;
}
.topbar .wrap{display:flex;justify-content:space-between;gap:.75rem;padding:.45rem 0;flex-wrap:wrap;font-size:.82rem}
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 0;min-width:0;
}
.brand{
  display:flex;align-items:center;gap:.7rem;color:inherit;text-decoration:none;min-width:0;
}
.brand:hover{text-decoration:none;color:inherit}
.brand img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--accent-2)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text strong{font-size:1.15rem;letter-spacing:.02em;color:var(--accent-deep)}
.brand-text small{color:var(--muted);font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-toggle{
  display:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:.4rem .85rem;font:inherit;color:var(--accent-deep);cursor:pointer;
}
.nav{display:flex;flex-wrap:wrap;gap:.35rem}
.nav a{
  display:inline-flex;align-items:center;padding:.35rem .75rem;border-radius:999px;
  color:var(--text);text-decoration:none;font-size:.92rem;font-weight:600;
}
.nav a:hover,.nav a[aria-current="page"]{
  background:var(--bg-soft);color:var(--accent-deep);text-decoration:none;
}
.hero{
  margin:1.25rem 0 1rem;
  padding:1.35rem 1.35rem 1.2rem;
  border:1px solid var(--line);
  border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(145deg,#fff 0%,var(--bg-soft) 55%,var(--bg) 100%);
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 .55rem;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.35;color:var(--accent-deep)}
.hero .lead{margin:0;color:var(--muted);max-width:52rem}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;max-width:100%}
.chip{
  display:inline-flex;align-items:center;padding:.28rem .7rem;border-radius:999px;
  background:var(--bg-chip);color:var(--chip-text);font-size:.86rem;font-weight:600;
  border:1px solid var(--line);text-decoration:none;
}
.chip:hover{background:var(--bg-soft);text-decoration:none;color:var(--accent)}
.section{margin:1.4rem 0}
.section h2{margin:0 0 .75rem;font-size:1.2rem;color:var(--accent-deep)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
.card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.05rem;box-shadow:0 4px 16px rgba(196,0,106,0.04);
}
.card h3{margin:0 0 .4rem;font-size:1.05rem}
.card h3 a{color:var(--accent-deep);text-decoration:none}
.card h3 a:hover{color:var(--accent);text-decoration:underline}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.list{
  background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
}
.list a{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.85rem 1rem;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;
}
.list a:last-child{border-bottom:0}
.list a:hover{background:var(--bg-soft);text-decoration:none}
.list strong{color:var(--accent-deep)}
.list span{color:var(--muted);font-size:.9rem;flex:1;text-align:right}
.prose{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem}
.prose p{margin:0 0 .9rem}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:.2rem 0 .9rem;padding-left:1.2rem}
.prose li{margin:.25rem 0}
.note{
  margin:1rem 0 0;padding:.85rem 1rem;border-radius:12px;background:#fff;
  border:1px dashed #ffb3d4;color:var(--muted);font-size:.92rem;
}
.two-col{display:grid;grid-template-columns:1.4fr .8fr;gap:1rem}
.side .card{background:var(--bg-soft)}
.site-footer{margin-top:2rem;border-top:1px solid var(--line);background:#fff}
.site-footer .wrap{padding:1.2rem 0 1.6rem}
.foot-brand{font-weight:700;margin-bottom:.35rem}
.foot-brand a{color:var(--accent-deep);text-decoration:none}
.foot-brand a:hover{text-decoration:underline}
.foot-links{display:flex;flex-wrap:wrap;gap:.6rem 1rem;margin:.5rem 0}
.foot-links a{color:var(--muted);font-size:.92rem}
.fine{color:var(--muted);font-size:.82rem;margin:.35rem 0}
.muted{color:var(--muted)}
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;width:100%;padding-bottom:.7rem}
  .nav.is-open{display:flex}
  .header-row{flex-wrap:wrap}
  .grid{grid-template-columns:1fr}
  .list a{flex-direction:column;align-items:flex-start}
  .list span{text-align:left}
}

@media (max-width:720px){
  .wrap{width:min(1120px,calc(100% - 1.25rem))}
  .brand img{width:34px;height:34px}
  .brand-text strong{font-size:1rem}
  .hero{padding:1rem}
  .hero h1{font-size:1.28rem;overflow-wrap:anywhere}
  .nav a{font-size:.86rem;padding:.3rem .65rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* clip CTA motion so the running indicator cannot widen the page */
[data-site-cta="xunfang"],
.site-cta,
a[data-site-cta]{
  max-width:min(100vw - 1.5rem, 420px);
  overflow:hidden;
}
a[data-site-cta] .cta-track,
a[data-site-cta] .cta-wash{
  overflow:hidden;
  max-width:100%;
}