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

:root{
  --magenta:#ff0080;
  --violet:#ff00ff;
  --ink:#26171f;
  --bg:#120810;
  --fg:#f8edf4;
  --dim:#cda9c1;
  --line:rgba(255,0,128,.26);
  --line-2:rgba(255,255,255,.11);
  --mono:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Fira Sans",system-ui,-apple-system,"Segoe UI","Noto Sans SC","PingFang SC",sans-serif;
  --rad:10px;
}

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

html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font:400 17px/1.75 var(--sans);
  padding-bottom:118px;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-25% -22%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(40% 44% at 16% 20%,rgba(255,0,128,.66),transparent 62%),
    radial-gradient(36% 40% at 80% 26%,rgba(255,0,255,.52),transparent 64%),
    radial-gradient(48% 48% at 66% 82%,rgba(255,0,128,.42),transparent 66%),
    radial-gradient(30% 34% at 28% 86%,rgba(255,0,255,.38),transparent 62%);
  filter:blur(10px) saturate(140%);
  mix-blend-mode:screen;
  opacity:.58;
  animation:aurora 28s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(18,8,16,.52),rgba(18,8,16,.9) 72%);
}

@keyframes aurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1.05) rotate(0deg)}
  100%{transform:translate3d(3%,2%,0) scale(1.18) rotate(4deg)}
}

img{max-width:100%;height:auto;display:block}

a{color:#ffbfe0;text-decoration:none}
a:hover{color:#fff}

:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:60;
  padding:.75rem 1rem;
  background:var(--ink);
  color:#fff;
  border:1px solid var(--line);
  border-radius:0 0 var(--rad) 0;
}
.skip:focus{left:0}

/* ============ 底部固定药丸导航 ============ */
.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:clamp(.5rem,2vw,1.4rem);
  padding:.55rem clamp(.6rem,3vw,1.6rem) calc(.55rem + env(safe-area-inset-bottom));
  background:rgba(18,8,16,.86);
  border-top:1px solid var(--line);
  box-shadow:0 -18px 40px rgba(0,0,0,.5);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.dock-brand{
  flex:0 0 auto;
  font:700 .95rem/1 var(--mono);
  letter-spacing:.02em;
  padding:.6rem .7rem;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  background:linear-gradient(94deg,var(--magenta),var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  border-right:1px solid var(--line-2);
  white-space:nowrap;
}

.dock-list{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  padding:.15rem .1rem;
  list-style:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.dock-list::-webkit-scrollbar{display:none}

.dock-list a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:.5rem .85rem;
  border:1px solid var(--line-2);
  border-radius:999px;
  color:var(--dim);
  font:500 .9rem/1.1 var(--sans);
  white-space:nowrap;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}

.dock-list a:hover,
.dock-list a[aria-current]{
  color:#fff;
  border-color:var(--magenta);
  background:linear-gradient(94deg,rgba(255,0,128,.28),rgba(255,0,255,.16));
  transform:translateY(-1px);
}

/* ============ 骨架 ============ */
.wrap{
  width:min(1160px,100%);
  margin:0 auto;
  padding:0 clamp(.9rem,4vw,2rem);
}

main{display:block}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:45vh;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(.9rem,3vw,2rem);
  padding:clamp(1.6rem,6vh,3rem) 0 clamp(1.2rem,3vh,2rem);
  text-align:right;
  border-bottom:1px solid var(--line-2);
  margin-bottom:clamp(1.2rem,3vw,2.2rem);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0 -4vw;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.17) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(120% 100% at 100% 50%,#000 18%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 100% 50%,#000 18%,transparent 78%);
}

.hero-txt{max-width:44ch}

.hero-h1{
  margin:0;
  font:600 clamp(1.85rem,5.6vw,3.1rem)/1.16 var(--sans);
  letter-spacing:-.03em;
  background:linear-gradient(96deg,#fff 12%,#ffb6dd 58%,#ff7aff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero-lede{
  margin:.7rem 0 0;
  color:var(--dim);
  font-size:.98rem;
  line-height:1.7;
  margin-left:auto;
}

.hero-mark{
  flex:0 0 auto;
  width:clamp(66px,15vw,92px);
  height:clamp(66px,15vw,92px);
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid var(--line);
  background:
    conic-gradient(from 200deg,rgba(255,0,128,.32),rgba(255,0,255,.14),rgba(255,0,128,.32));
  box-shadow:0 0 34px rgba(255,0,128,.28),inset 0 0 22px rgba(255,0,255,.18);
  will-change:transform;
}

.hero-pic{width:clamp(34px,8vw,48px);height:auto}

/* ============ 主体栅格 ============ */
.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.1rem,3vw,2rem);
  align-items:start;
}

.doc{
  min-width:0;
  font-size:1rem;
  overflow-wrap:break-word;
}

.doc > *{max-width:100%}

.doc > article{
  position:relative;
  margin:0 0 1.15rem;
  padding:1.35rem clamp(1rem,2.6vw,1.6rem) 1.5rem;
  background:rgba(18,8,16,.66);
  border:1px solid var(--line-2);
  border-radius:var(--rad);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.doc > article::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:3px;
  border-radius:0 0 var(--rad) var(--rad);
  background:linear-gradient(90deg,var(--magenta),var(--violet) 70%,transparent);
  opacity:.85;
}

.doc h2{
  margin:1.7rem 0 .5rem;
  font:600 clamp(1.18rem,2.7vw,1.52rem)/1.34 var(--sans);
  letter-spacing:-.015em;
  color:#fff;
}

.doc h3{
  margin:1.35rem 0 .4rem;
  font:600 1.08rem/1.4 var(--sans);
  color:#ffd9ec;
}

.doc > article > h2:first-child,
.doc > article > h3:first-child{margin-top:0}

.doc p{margin:.7rem 0}

.doc ul,.doc ol{margin:.7rem 0;padding-left:1.35rem}
.doc li{margin:.3rem 0}

.doc a{
  color:#ffbfe0;
  text-decoration:underline;
  text-decoration-color:rgba(255,0,128,.55);
  text-underline-offset:3px;
}
.doc a:hover{color:#fff;text-decoration-color:var(--violet)}

.doc strong{color:#fff}

.doc blockquote{
  margin:1rem 0;
  padding:.6rem 0 .6rem 1rem;
  border-left:3px solid var(--magenta);
  color:var(--dim);
  font-style:normal;
}

.doc time,
.doc .time{
  display:inline-block;
  font:500 .82rem/1.5 var(--mono);
  color:var(--dim);
  letter-spacing:.04em;
}

.doc table{
  width:100%;
  border-collapse:collapse;
  font-size:.94rem;
  margin:1rem 0;
}
.doc th,.doc td{
  border:1px solid var(--line-2);
  padding:.5rem .6rem;
  text-align:left;
}
.doc th{background:rgba(255,0,128,.12);color:#fff}

.doc code,.doc pre{
  font-family:var(--mono);
  font-size:.92em;
}
.doc pre{
  overflow-x:auto;
  padding:.9rem;
  border:1px solid var(--line-2);
  border-radius:var(--rad);
  background:rgba(0,0,0,.42);
}

hr{
  height:2px;
  border:0;
  margin:.55rem 0 1rem;
  background:linear-gradient(90deg,var(--magenta),rgba(255,0,255,.35) 42%,transparent);
}

[id]{scroll-margin-top:24px}

/* ============ 侧栏 ============ */
.side{
  position:sticky;
  top:1.1rem;
  padding:1rem .95rem 1.15rem;
  border:1px solid var(--line);
  border-radius:var(--rad);
  background:rgba(38,23,31,.62);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.side-h{
  margin:0;
  font:600 .78rem/1.4 var(--mono);
  letter-spacing:.26em;
  color:var(--dim);
}

.side hr{margin:.5rem 0 .7rem}

.side-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.15rem;
}

.side-list a{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:40px;
  padding:.35rem .4rem;
  border-radius:8px;
  color:var(--dim);
  font-size:.94rem;
  transition:background .18s ease,color .18s ease;
}

.side-list a:hover{background:rgba(255,0,128,.16);color:#fff}

.side-list .ix{
  font:500 .76rem/1 var(--mono);
  color:var(--magenta);
  letter-spacing:.06em;
}

/* ============ 页脚 ============ */
.foot{
  margin-top:clamp(2rem,6vw,3.4rem);
  border-top:1px solid var(--line);
  padding:1.3rem 0 1.5rem;
  background:rgba(18,8,16,.6);
}

.foot-row{
  width:min(1160px,100%);
  margin:0 auto;
  padding:0 clamp(.9rem,4vw,2rem);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem 1.2rem;
  flex-wrap:wrap;
}

.foot-copy{
  order:1;
  margin:0;
  font:400 .8rem/1.5 var(--mono);
  color:var(--dim);
  letter-spacing:.04em;
}

.foot-mark{
  order:2;
  font:700 clamp(1.9rem,7.5vw,4.2rem)/.92 var(--mono);
  letter-spacing:-.04em;
  background:linear-gradient(94deg,var(--magenta),var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  white-space:nowrap;
}

.foot-nav{order:3}

.foot-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.2rem .55rem;
}

.foot-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.3rem .1rem;
  color:var(--dim);
  font-size:.88rem;
  border-bottom:1px solid transparent;
}
.foot-nav a:hover{color:#fff;border-bottom-color:var(--magenta)}

/* ============ 断点 ============ */
@media (min-width:980px){
  .stage{grid-template-columns:minmax(0,1fr) 252px}
  .hero{min-height:45vh}
}

@media (max-width:720px){
  body{padding-bottom:128px;font-size:16.5px}
  .hero{
    justify-content:flex-end;
    min-height:42vh;
    padding-top:1.4rem;
  }
  .hero-lede{font-size:.94rem}
  .dock{gap:.4rem}
  .dock-brand{
    font-size:.86rem;
    padding:.55rem .5rem;
  }
  .dock-list a{padding:.5rem .72rem;font-size:.86rem}
  .side{position:static}
  .foot-row{align-items:center}
  .foot-nav{order:4;flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

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