:root{
  --ink:#12121C;
  --ink-2:#0B0B12;
  --ink-3:#1B1B2A;
  --pink:#FF3D68;
  --yellow:#FFC93C;
  --paper:#F6F3EC;
  --mute:#B5B3C2;
  --line:#2E2E44;
  --r:10px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Chakra Petch',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
h1,h2,h3,h4,.brand,.num,.cta-box p{
  font-family:'Russo One','Chakra Petch',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:400;
  letter-spacing:.01em;
}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* 头部 */
.site-head{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--ink);
  border-bottom:3px solid var(--pink);
}
.tick{
  margin:0;
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  font-size:16px;
  letter-spacing:.34em;
  text-align:center;
  padding:5px 10px 5px calc(10px + .34em);
}
.head-top{max-width:1240px;margin:0 auto;padding:12px 20px 4px}
.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:4px 0;
  text-decoration:none;
  color:var(--paper);
  font-size:clamp(20px,3.2vw,26px);
}
.brand-name{line-height:1.2}
.logo{width:36px;height:36px;border:2px solid var(--yellow);border-radius:var(--r);object-fit:cover;display:block}
.mark{
  display:inline-grid;
  place-items:center;
  width:36px;height:36px;
  border:2px solid var(--yellow);
  border-radius:var(--r);
  color:var(--yellow);
  font-size:18px;
}
.head-nav{max-width:1240px;margin:0 auto;padding:0 20px 12px}
.head-nav p{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.head-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 14px;
  border:2px solid var(--line);
  border-radius:var(--r);
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.head-nav a:hover,.head-nav a:focus-visible{background:var(--pink);border-color:var(--pink);color:var(--ink)}

/* 骨架 */
.shell{
  max-width:1240px;
  margin:0 auto;
  padding:0 20px 64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:44px;
  align-items:start;
}
.doc{min-width:0}

/* 首屏 */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
  padding:48px 0;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,61,104,.14) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,61,104,.14) 0 1px,transparent 1px 44px);
  background-position:center;
}
.hero-copy{text-align:center}
h1{
  margin:0 0 28px;
  font-size:clamp(2.1rem,5.4vw,4rem);
  line-height:1.12;
  letter-spacing:.005em;
  word-break:break-word;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:10px 30px;
  border:3px solid var(--ink);
  border-radius:var(--r);
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.btn:hover,.btn:focus-visible{background:var(--pink);color:var(--paper)}
.hero-art{
  position:relative;
  aspect-ratio:4/5;
  border:3px solid var(--yellow);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--ink-3);
}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform}
.hero-art--blank{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,201,60,.16) 0 8px,transparent 8px 18px);
}

/* 目录 */
.toc{padding:40px 0 34px;border-top:3px solid var(--line)}
h2{
  margin:0 0 6px;
  font-size:clamp(1.4rem,3vw,1.95rem);
  line-height:1.25;
}
.subtitle{margin:0 0 18px;color:var(--pink);font-weight:600;font-size:16px}
.toc-links{display:flex;flex-wrap:wrap;gap:8px}
.toc-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 15px;
  border:2px solid var(--pink);
  border-radius:var(--r);
  color:var(--paper);
  font-weight:600;
  font-size:16px;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.toc-links a:hover,.toc-links a:focus-visible{background:var(--pink);color:var(--ink)}

/* 正文区块 */
div > article[id]{
  padding:46px 0;
  border-top:2px dashed var(--line);
  scroll-margin-top:212px;
}
div > article[id] h2{
  font-size:clamp(1.35rem,2.8vw,1.8rem);
  padding-left:14px;
  border-left:8px solid var(--pink);
  margin-bottom:20px;
}
div > article[id] h3{
  font-size:1.2rem;
  margin:32px 0 12px;
  color:var(--yellow);
}
.doc p,.doc li{font-size:17px;line-height:1.8}
.doc ul,.doc ol{padding-left:1.35em;margin:0 0 1.2em}
.doc li{margin:.35em 0}
.doc a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.doc a:hover{color:var(--pink)}
.doc strong{color:var(--yellow)}
.doc img{border:2px solid var(--line);border-radius:var(--r);display:block;margin:22px 0;height:auto}
.doc blockquote{
  margin:24px 0;
  padding:16px 20px;
  background:var(--ink-3);
  border-left:8px solid var(--pink);
  border-radius:0 var(--r) var(--r) 0;
}
.doc blockquote p:last-child{margin-bottom:0}
.doc table{width:100%;border-collapse:collapse;margin:22px 0;font-size:16px}
.doc th,.doc td{border:2px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--ink-3);color:var(--yellow)}
.doc hr{border:0;border-top:2px dashed var(--line);margin:28px 0}

/* 侧栏 */
.rail{
  position:sticky;
  top:24px;
  border:2px solid var(--line);
  border-radius:var(--r);
  background:var(--ink-3);
  padding:20px;
}
.rail h2{font-size:1.15rem}
.rail .subtitle{margin-bottom:14px}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:8px 10px;
  border-radius:var(--r);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.rail-list a:hover,.rail-list a:focus-visible{background:var(--pink);color:var(--ink)}
.num{color:var(--yellow);font-size:15px}
.rail-list a:hover .num,.rail-list a:focus-visible .num{color:var(--ink)}

/* 页脚 */
.site-foot{margin-top:16px;background:var(--ink-2);border-top:3px solid var(--pink)}
.foot-cta{max-width:1240px;margin:0 auto;padding:34px 20px 0}
.cta-box{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  justify-content:space-between;
  padding:24px;
  border-radius:var(--r);
  background:var(--pink);
  color:var(--ink);
}
.cta-box p{margin:0;font-size:clamp(1.15rem,2.8vw,1.7rem);line-height:1.25}
.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 24px;
  border:3px solid var(--ink);
  border-radius:var(--r);
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.cta-btn:hover,.cta-btn:focus-visible{background:var(--ink);color:var(--yellow)}
.foot-row{
  max-width:1240px;
  margin:0 auto;
  padding:26px 20px 34px;
  display:flex;
  flex-wrap:wrap;
  gap:18px 30px;
  align-items:center;
  justify-content:space-between;
}
.brand--sm{font-size:19px}
.foot-desc{margin:8px 0 0;font-size:16px;color:var(--mute);max-width:36ch}
.foot-nav p{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 12px;
  border:2px solid var(--line);
  border-radius:var(--r);
  font-size:16px;
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.foot-nav a:hover,.foot-nav a:focus-visible{background:var(--yellow);color:var(--ink)}
.foot-copy{font-size:16px;color:var(--mute)}
.foot-copy p{margin:0}

/* 动效 */
html.js main div > article,
html.js aside.rail{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
html.js main div > article.on,
html.js aside.rail.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js main div > article,
  html.js aside.rail{opacity:1;transform:none;transition:none}
  .hero-art img{transform:none !important}
}

/* 断点 */
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr) 260px;gap:32px}
}
@media (max-width:960px){
  .shell{grid-template-columns:minmax(0,1fr);gap:36px}
  .rail{position:static;order:2}
  .hero{min-height:auto;grid-template-columns:1fr;gap:26px;padding:40px 0}
  .hero-art{max-width:360px;width:100%;margin:0 auto;aspect-ratio:1/1}
  div > article[id]{scroll-margin-top:24px}
}
@media (max-width:720px){
  .site-head{position:static}
  .head-nav a{padding:8px 12px}
  .doc table{display:block;overflow-x:auto}
}
@media (max-width:480px){
  body{font-size:16px}
  .shell{padding:0 16px 48px}
  .head-top,.head-nav{padding-left:16px;padding-right:16px}
  .foot-cta{padding:26px 16px 0}
  .foot-row{padding:22px 16px 28px}
  h1{font-size:clamp(1.85rem,9vw,2.6rem)}
  .tick{letter-spacing:.2em;padding-left:calc(10px + .2em)}
  div > article[id]{padding:36px 0}
}

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