:root{
  --ink:#171f26;
  --blue:#c8e0f4;
  --pink:#f5e0e8;
  --hi:#ffffff;
  --lo:rgba(23,31,38,.13);
  --soft1:-6px -6px 16px rgba(255,255,255,.92);
  --soft2:8px 8px 20px rgba(23,31,38,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  overflow-x:hidden;
  font-family:'Didact Gothic','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.8;
  color:var(--ink);
  background-color:#eaf1f8;
  background-image:radial-gradient(rgba(23,31,38,.08) 1px,transparent 1px),
                   linear-gradient(155deg,#f0f6fc 0%,#e6eef6 52%,#f3eaef 100%);
  background-size:20px 20px,100% 100%;
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
a:focus-visible,.pill:focus-visible{outline:2px solid #7ba6c9;outline-offset:3px}

/* 左侧竖排导航 */
.rail{
  position:fixed;inset:0 auto 0 0;
  width:238px;z-index:30;
  display:flex;flex-direction:column;gap:16px;
  padding:24px 18px 28px;
  overflow-y:auto;
  background:linear-gradient(160deg,#f2f8fd,#e2ebf4);
  box-shadow:6px 0 20px rgba(23,31,38,.09);
}
.brand{
  display:block;text-align:center;
  padding:14px 12px;
  min-height:44px;
  font-family:'Poiret One','Didact Gothic',system-ui,sans-serif;
  font-size:18px;line-height:1.35;letter-spacing:.14em;
  border-radius:999px;
  background:linear-gradient(145deg,#f8fcff,#dde8f2);
  box-shadow:-4px -4px 10px var(--hi),5px 5px 12px var(--lo);
  transition:transform .15s ease,box-shadow .15s ease;
}
.brand:active{transform:scale(.98)}
.rail ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.pill{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding:11px 16px;
  border-radius:999px;
  font-size:16px;line-height:1.35;
  background:linear-gradient(145deg,#f5fafe,#dfe9f3);
  box-shadow:-4px -4px 10px var(--hi),5px 5px 12px var(--lo);
  transition:box-shadow .15s ease,transform .15s ease,background .15s ease;
}
.pill:hover{background:linear-gradient(145deg,#eef7fd,#d5e4f1)}
.pill:active{transform:scale(.97);box-shadow:inset -2px -2px 6px var(--hi),inset 3px 3px 8px var(--lo)}
.num{
  font-family:'Poiret One',system-ui,sans-serif;
  font-size:13px;letter-spacing:.1em;color:#5f7f95;min-width:20px;
}
.rail-contact{margin-top:auto;padding-top:10px}
.cta{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 14px;
  border-radius:999px;font-size:16px;
  background:linear-gradient(145deg,#fbeef4,#f1d9e4);
  box-shadow:-4px -4px 10px var(--hi),5px 5px 12px rgba(23,31,38,.14);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta:active{transform:scale(.97);box-shadow:inset -2px -2px 6px var(--hi),inset 3px 3px 8px var(--lo)}

/* 主区 */
.stage{margin-left:238px;padding:0 clamp(18px,4vw,56px)}
.hero{
  display:flex;align-items:center;justify-content:flex-end;
  gap:clamp(14px,3vw,34px);
  min-height:45vh;padding:40px 0 30px;
  text-align:right;
  border-bottom:1px dotted rgba(23,31,38,.26);
}
.hero-body{min-width:0}
h1{
  margin:0;font-weight:400;
  font-family:'Poiret One','Didact Gothic',system-ui,sans-serif;
  font-size:clamp(26px,4.2vw,50px);
  line-height:1.28;letter-spacing:.05em;
}
.hero-art{
  flex:0 0 auto;
  width:clamp(74px,11vw,120px);height:auto;
  filter:drop-shadow(6px 9px 12px rgba(23,31,38,.16));
}

.grid{
  display:grid;grid-template-columns:minmax(0,1fr) 264px;
  gap:clamp(20px,3vw,38px);
  align-items:start;padding:32px 0 8px;
}
main{min-width:0}

/* 正文块：纯色、方角、柔影 */
.content>article{
  background:#f5f9fc;
  padding:clamp(20px,2.6vw,32px);
  margin:0 0 clamp(22px,3vw,34px);
  box-shadow:var(--soft1),var(--soft2);
  scroll-margin-top:130px;
}
.content>article:nth-of-type(even){background:#faf1f5}
.content>article:last-child{margin-bottom:0}
.content h2{
  margin:0 0 14px;font-weight:400;
  font-size:clamp(20px,2.2vw,26px);line-height:1.4;letter-spacing:.06em;
  font-family:'Poiret One','Didact Gothic',system-ui,sans-serif;
}
.content h3{margin:24px 0 10px;font-size:19px;font-weight:400;letter-spacing:.04em}
.content p{margin:0 0 1.05em}
.content p:last-child{margin-bottom:0}
.content ul,.content ol{margin:0 0 1.05em;padding-left:1.4em}
.content li{margin:.35em 0}
.content li::marker{color:#7d9cb2}
.content a{color:#2b5a7c;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.content img{display:block;max-width:100%;height:auto;margin:1em 0}
.content strong{font-weight:700}
.content blockquote{
  margin:0 0 1.05em;padding:14px 18px;
  background:linear-gradient(145deg,#eff5fb,#e3ebf4);
  box-shadow:inset -2px -2px 7px var(--hi),inset 3px 3px 9px rgba(23,31,38,.1);
}
.content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:16px;margin:0 0 1.05em}
.content th,.content td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(23,31,38,.16)}
.content pre{overflow-x:auto;padding:14px 16px;background:#eef4fa}

/* 侧栏 */
.side{position:sticky;top:26px;display:flex;flex-direction:column;gap:16px}
.side .box{background:#f4f8fc;padding:18px 20px;box-shadow:var(--soft1),var(--soft2)}
.side h2{
  margin:0 0 10px;font-weight:400;font-size:16px;letter-spacing:.16em;
  font-family:'Poiret One',system-ui,sans-serif;
}
.side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.side li a{
  display:flex;align-items:center;min-height:42px;padding:6px 0;
  font-size:16px;border-bottom:1px dotted rgba(23,31,38,.24);
}
.side li:last-child a{border-bottom:0}
.side li a:hover{color:#2b5a7c}
.totop{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px;
  font-size:16px;border-radius:999px;
  background:linear-gradient(145deg,#f5fafe,#dfe9f3);
  box-shadow:-4px -4px 10px var(--hi),5px 5px 12px var(--lo);
  transition:transform .15s ease;
}
.totop:active{transform:scale(.97)}

/* 页脚 */
.foot{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:22px 34px;margin-top:34px;padding:28px 0 44px;
  border-top:1px dotted rgba(23,31,38,.3);
}
.f-brand strong{font-weight:400;letter-spacing:.12em;font-size:16px}
.f-nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.f-nav a{display:inline-flex;align-items:center;min-height:40px;padding:2px 0;font-size:16px}
.f-nav a:hover{color:#2b5a7c}
.f-contact h3{margin:0 0 4px;font-size:16px;font-weight:400;letter-spacing:.12em}
.f-contact a{display:inline-flex;align-items:center;min-height:40px;font-size:16px;border-bottom:1px dotted rgba(23,31,38,.4)}
.f-copy{font-size:16px;opacity:.78;align-self:flex-end}

/* 滚动显现 */
.rv{transition:opacity .55s ease,transform .55s ease}
html.js .rv{opacity:0;transform:translateY(16px)}
html.js .rv.in{opacity:1;transform:translateY(0)}

@media (max-width:900px){
  .rail{
    position:sticky;inset:auto;top:0;width:auto;
    gap:6px;padding:8px 14px 6px;overflow:visible;
    box-shadow:0 8px 18px rgba(23,31,38,.13);
  }
  .brand{
    text-align:left;background:none;box-shadow:none;
    padding:4px 0;font-size:17px;
  }
  .rail ol{
    flex-direction:row;gap:8px;overflow-x:auto;
    padding:2px 0 8px;
  }
  .pill{white-space:nowrap;padding:9px 15px}
  .num{display:none}
  .rail-contact{display:none}
  .stage{margin-left:0;padding:0 16px}
  .hero{min-height:34vh;padding:24px 0 22px;gap:14px}
  .grid{grid-template-columns:1fr;padding-top:22px}
  aside.side{position:static;order:2;margin-top:6px}
  .content>article{scroll-margin-top:128px;padding:20px 18px}
  .f-nav ul{columns:1}
  .foot{gap:18px 24px}
}

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

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