@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --ink:#101A2B;
  --ink-2:#0C1524;
  --ink-3:#16233A;
  --amber:#FFB703;
  --pink:#FF4D6D;
  --fg:#E9EFFA;
  --dim:#93A3BD;
  --line:#22314B;
  --rail:236px;
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:'Fira Code','Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'PingFang SC','Microsoft YaHei',monospace;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.24}
ul,ol,menu{margin:0;padding:0;list-style:none}
p{margin:0}
figure{margin:0}

/* ---------- 左侧固定导轨 ---------- */
.rail{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--rail);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:18px 14px;
  background:var(--ink-2);
  border-right:1px solid var(--line);
  z-index:40;
}

.brandrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:40px;
  color:var(--fg);
}
.brand .mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  flex:0 0 26px;
  background:var(--pink);
  color:#0C1524;
  font-size:15px;
  line-height:1;
}
.brand .brandname{
  font-size:16px;
  font-weight:600;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.brand:hover .brandname{color:var(--amber)}

.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 11px;
  background:var(--amber);
  color:#101A2B;
  font-size:16px;
  font-weight:700;
  border:1px solid var(--amber);
  border-radius:2px;
  transition:background 160ms ease,color 160ms ease;
  white-space:nowrap;
}
.cta:hover{background:transparent;color:var(--amber)}

.nav{flex:1 1 auto;min-height:0}

.grp{border-top:1px solid var(--line);padding-top:12px}

.grp summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:40px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--amber);
  letter-spacing:.16em;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:border-color 160ms ease,color 160ms ease;
}
.grp summary::-webkit-details-marker{display:none}
.grp summary:hover{border-color:var(--pink);color:var(--pink)}
.grp summary i{
  width:8px;
  height:8px;
  flex:0 0 8px;
  background:currentColor;
  transition:transform 160ms ease;
}
.grp[open] summary i{transform:rotate(45deg)}

.navlist{
  margin-top:10px;
  display:grid;
  gap:2px;
}
.navlist a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:6px 8px 6px 10px;
  border-left:2px solid transparent;
  color:var(--dim);
  font-size:16px;
  line-height:1.35;
  transition:color 160ms ease,background 160ms ease,border-color 160ms ease;
}
.navlist a:hover,
.navlist a.on{
  color:var(--fg);
  background:#132135;
  border-left-color:var(--pink);
}

.railfoot{display:flex;gap:5px;padding:4px 8px 0}
.railfoot b{width:18px;height:3px;background:var(--line)}
.railfoot b:nth-child(1){background:var(--pink)}
.railfoot b:nth-child(2){background:var(--amber)}

/* ---------- 主区域 ---------- */
.stage{margin-left:var(--rail);min-width:0}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:45vh;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.hero-media{
  position:relative;
  background:var(--ink-3);
  clip-path:polygon(0 0,100% 0,86% 100%,0 100%);
  min-height:45vh;
}
.hero-media img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
.hero-media .blank{display:block;width:100%;height:100%;background:var(--ink-3)}

.slash{
  position:absolute;
  left:46%;
  top:-10%;
  width:9px;
  height:120%;
  background:var(--pink);
  transform:skewX(-10deg);
  pointer-events:none;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  padding:clamp(22px,3vw,44px) clamp(18px,3.4vw,46px) clamp(22px,3vw,44px) 26px;
  text-align:right;
}
.hero-copy h1{
  font-size:clamp(26px,3.8vw,44px);
  letter-spacing:-.02em;
  line-height:1.14;
}
.hero-copy h1::after{
  content:"";
  display:block;
  width:64px;
  height:5px;
  margin:14px 0 0 auto;
  background:var(--amber);
}
.lede{max-width:44ch;color:var(--dim);font-size:16px}

/* ---------- 正文板 ---------- */
.board{
  max-width:1060px;
  padding:clamp(22px,3vw,40px) clamp(16px,3.4vw,46px) 72px;
}

.board-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding-bottom:14px;
  margin-bottom:26px;
  border-bottom:2px solid var(--pink);
}
.board-head h2{
  font-size:16px;
  color:var(--amber);
  letter-spacing:.2em;
}
.board-head h2 span{
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.board-head h2 span::before{
  content:"";
  width:11px;
  height:11px;
  background:var(--pink);
}
.toc{display:flex;flex-wrap:wrap;gap:6px}
.toc a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 11px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:16px;
  color:var(--dim);
  transition:color 160ms ease,border-color 160ms ease,background 160ms ease;
}
.toc a:hover{color:#101A2B;background:var(--amber);border-color:var(--amber)}

/* ---------- 正文排版 ---------- */
.prose{counter-reset:sec}
.prose section{
  counter-increment:sec;
  scroll-margin-top:26px;
}
.prose section + section{
  margin-top:46px;
  padding-top:30px;
  border-top:1px dashed var(--line);
}
.prose section::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  margin-bottom:8px;
  color:var(--pink);
  font-size:15px;
  letter-spacing:.24em;
}

.prose h2{
  font-size:clamp(20px,2.5vw,27px);
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.prose h2 span{
  display:inline-block;
  border-bottom:4px solid var(--amber);
  padding-bottom:4px;
}
.prose h3{
  font-size:19px;
  margin:28px 0 10px;
  color:var(--amber);
}
.prose h3 span{display:inline-block}

.prose p{margin:0 0 14px;color:#D6E0F1;max-width:74ch}
.prose ul,
.prose ol{margin:0 0 16px;padding-left:22px}
.prose ul{list-style:square}
.prose ol{list-style:decimal}
.prose li{margin:7px 0;color:#D6E0F1}
.prose li::marker{color:var(--pink)}
.prose a{
  color:var(--amber);
  border-bottom:1px solid rgba(255,183,3,.45);
  transition:color 160ms ease,border-color 160ms ease;
}
.prose a:hover{color:var(--pink);border-color:var(--pink)}
.prose strong{color:var(--amber);font-weight:600}
.prose em{color:var(--pink);font-style:normal}
.prose code{
  background:var(--ink-3);
  color:var(--amber);
  padding:1px 5px;
  border-radius:2px;
  font-size:15px;
}
.prose blockquote{
  margin:0 0 16px;
  padding:10px 18px;
  border-left:3px solid var(--pink);
  background:#132135;
  color:var(--dim);
}
.prose blockquote p:last-child{margin:0}
.prose figure{margin:0 0 18px}
.prose img{
  border:1px solid var(--line);
  border-radius:4px;
  height:auto;
}
.prose figcaption{font-size:15px;color:var(--dim);margin-top:7px}
.prose time,
.prose .date{
  display:inline-block;
  font-size:15px;
  color:var(--pink);
  letter-spacing:.06em;
}
.prose hr{
  border:0;
  border-top:1px solid var(--line);
  margin:26px 0;
}
.prose table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 18px;
  font-size:15px;
}
.prose th,
.prose td{
  border:1px solid var(--line);
  padding:9px 11px;
  text-align:left;
  vertical-align:top;
}
.prose th{background:#132135;color:var(--amber);font-weight:600}

/* ---------- 页脚 ---------- */
.foot{
  border-top:2px solid var(--amber);
  background:var(--ink-2);
  padding:clamp(28px,4vw,54px) clamp(16px,3.4vw,46px) 18px;
}
.foot-top{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(22px,4vw,54px);
  align-items:start;
}
.bigmark{
  font-size:clamp(34px,5.6vw,68px);
  line-height:.94;
  letter-spacing:-.045em;
  color:var(--amber);
  margin-bottom:14px;
  word-break:break-word;
}
.bigmark span{display:inline-block}
.foot-desc{color:var(--dim);font-size:16px;max-width:42ch}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.foot-cols dl{margin:0}
.foot-cols dt{
  font-size:15px;
  color:var(--pink);
  letter-spacing:.16em;
  margin-bottom:10px;
  border-bottom:1px solid var(--line);
  padding-bottom:7px;
}
.foot-cols dd{margin:0 0 6px}
.foot-cols dd a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 0;
  color:var(--dim);
  font-size:16px;
  transition:color 160ms ease;
}
.foot-cols dd a:hover{color:var(--amber)}
.kw{
  display:inline-block;
  padding:3px 8px;
  border:1px solid var(--line);
  border-radius:2px;
  font-size:15px;
  color:var(--dim);
}

.foot-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:26px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:15px;
  color:var(--dim);
}
.totop{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--amber);
  transition:background 160ms ease,color 160ms ease,border-color 160ms ease;
}
.totop:hover{background:var(--pink);border-color:var(--pink);color:#101A2B}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  .prose li{animation:rise 320ms ease both}
  .prose li:nth-child(1){animation-delay:20ms}
  .prose li:nth-child(2){animation-delay:45ms}
  .prose li:nth-child(3){animation-delay:70ms}
  .prose li:nth-child(4){animation-delay:95ms}
  .prose li:nth-child(5){animation-delay:120ms}
  .prose li:nth-child(6){animation-delay:145ms}
  .prose li:nth-child(n+7){animation-delay:170ms}
  .hero-media img{animation:fade 400ms ease both}
  .toc a{animation:fade 300ms ease both}
  .toc li:nth-child(2) a{animation-delay:35ms}
  .toc li:nth-child(3) a{animation-delay:70ms}
  .toc li:nth-child(4) a{animation-delay:105ms}
  .toc li:nth-child(5) a{animation-delay:140ms}
  .toc li:nth-child(6) a{animation-delay:175ms}
  .toc li:nth-child(7) a{animation-delay:210ms}
}

@keyframes rise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes fade{
  from{opacity:0}
  to{opacity:1}
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  .rail{
    position:sticky;
    inset:auto;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .brandrow{flex:0 0 auto;gap:8px}
  .brand .brandname{font-size:15px}
  .nav{flex:1 1 auto}
  .grp{position:relative;border-top:0;padding-top:0}
  .grp summary{padding:0 10px}
  .navlist{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    width:min(78vw,300px);
    margin-top:0;
    padding:8px;
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:2px;
    max-height:64vh;
    overflow-y:auto;
  }
  .railfoot{display:none}

  .stage{margin-left:0}

  .hero{
    grid-template-columns:1fr;
    min-height:0;
  }
  .hero-copy{
    order:1;
    padding:24px 16px 22px;
  }
  .hero-copy h1::after{margin:12px 0 0 auto;width:48px;height:4px}
  .hero-media{
    order:2;
    min-height:0;
    height:190px;
    clip-path:none;
    border-top:3px solid var(--pink);
  }
  .slash{display:none}

  .board{padding:22px 16px 60px}
  .board-head{border-bottom-width:2px;margin-bottom:22px}
  .prose section{scroll-margin-top:86px}

  .foot{padding:28px 16px 18px}
  .foot-top{grid-template-columns:1fr;gap:26px}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .bigmark{font-size:clamp(32px,9vw,52px)}
  .foot-bar{flex-wrap:wrap;justify-content:space-between}
}

@media (max-width:380px){
  .brand .brandname{font-size:14px}
  .cta{padding:0 9px}
}

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