@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root{
  --ink:#1f1726;
  --ink-2:#382b45;
  --grape:#56228b;
  --grape-2:#7a3fb0;
  --grape-wash:#efe6f8;
  --clay:#8b4513;
  --clay-2:#b06a2f;
  --clay-wash:#f3e5d7;
  --sand:#f7f1e8;
  --sand-2:#ecdfce;
  --card:#fbf6f0;
  --line:#d8c6b2;
  --dock-pad:104px;
  --r-xl:30px;
  --r-lg:24px;
  --r-md:18px;
  --r-sm:12px;
  --r-xs:10px;
  --soft:0 20px 44px -26px rgba(31,23,38,.55);
  --font:"Roboto","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  padding-bottom:var(--dock-pad);
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(86,34,139,.10),transparent 46%),
    radial-gradient(circle at 82% 68%,rgba(139,69,19,.12),transparent 44%),
    radial-gradient(circle at 60% 8%,rgba(86,34,139,.06),transparent 38%);
}

main{position:relative;z-index:1}

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

a{color:var(--clay)}

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid var(--grape-2);
  outline-offset:2px;
}

/* ---------- 首屏 ---------- */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px,4vw,54px);
  max-width:1160px;
  min-height:70vh;
  margin:0 auto;
  padding:clamp(22px,5vh,58px) clamp(18px,4vw,34px) clamp(18px,4vh,38px);
}

.hero-figure{position:relative}

.hero-pic,
.hero-blank{
  display:block;
  width:100%;
  aspect-ratio:5/4;
  border-radius:60% 40% 46% 54% / 48% 56% 44% 52%;
  box-shadow:var(--soft);
  background:linear-gradient(150deg,var(--grape) 0%,var(--clay) 100%);
}

.hero-pic{
  height:auto;
  object-fit:cover;
  background:var(--sand-2);
  will-change:transform;
}

.hero-copy{
  text-align:center;
  animation:rise .62s ease both;
}

.hero-copy h1{
  margin:0;
  font-size:clamp(28px,4.6vw,46px);
  line-height:1.28;
  font-weight:700;
  letter-spacing:.01em;
  background:linear-gradient(120deg,var(--grape) 0%,var(--clay) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:var(--grape);
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-copy h1{color:transparent}
}

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

/* ---------- 主体骨架 ---------- */

.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 clamp(14px,4vw,34px) 76px;
}

.body-shell{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:clamp(18px,3vw,36px);
  align-items:start;
}

/* ---------- 左侧栏 ---------- */

.rail{
  position:sticky;
  top:16px;
  max-height:calc(100vh - 150px);
  overflow:auto;
  padding:22px 18px 20px;
  border-radius:var(--r-xl) var(--r-lg) var(--r-xl) var(--r-md);
  background:var(--grape-wash);
  box-shadow:var(--soft);
  animation:rise .55s .08s ease both;
}

.rail h2{
  margin:0 0 8px;
  font-size:21px;
  line-height:1.35;
  font-weight:700;
  color:var(--grape);
  letter-spacing:.02em;
}

.rail .subtitle{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.62;
  color:var(--ink-2);
}

.rail-list{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:rail;
  display:grid;
  gap:3px;
}

.rail-list li{counter-increment:rail}

.rail-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:8px 11px;
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:16px;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}

.rail-list a::before{
  content:counter(rail,decimal-leading-zero);
  font-size:13px;
  letter-spacing:.08em;
  color:var(--clay);
}

.rail-list a:hover,
.rail-list a[aria-current]{
  background:#fff;
  color:var(--grape);
}

/* ---------- 正文 ---------- */

.body-main{
  display:grid;
  gap:24px;
  min-width:0;
}

.body-main > div{
  padding:clamp(20px,3vw,36px);
  border-radius:var(--r-xl) var(--r-md) var(--r-xl) var(--r-lg);
  background:var(--card);
  box-shadow:var(--soft);
  scroll-margin-top:14px;
}

.body-main > div:nth-child(even){
  background:var(--clay-wash);
  border-radius:var(--r-md) var(--r-xl) var(--r-lg) var(--r-xl);
}

.js .body-main > div{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s ease,transform .62s cubic-bezier(.2,.72,.3,1);
}

.js .body-main > div:nth-child(2){transition-delay:.05s}
.js .body-main > div:nth-child(3){transition-delay:.1s}
.js .body-main > div:nth-child(4){transition-delay:.15s}
.js .body-main > div:nth-child(5){transition-delay:.2s}

.js .body-main > div.in{
  opacity:1;
  transform:none;
}

.body-main h2{
  margin:0 0 .5em;
  font-size:clamp(21px,2.8vw,27px);
  line-height:1.36;
  font-weight:700;
  color:var(--grape);
}

.body-main h3{
  margin:1.4em 0 .45em;
  font-size:19px;
  line-height:1.45;
  color:var(--clay);
}

.body-main p{margin:0 0 1.05em}

.body-main p:last-child{margin-bottom:0}

.body-main ul,
.body-main ol{
  margin:0 0 1.1em;
  padding-left:1.35em;
}

.body-main li{margin:0 0 .45em}

.body-main a{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:3px;
}

.body-main a:hover{color:var(--grape)}

.body-main strong{color:var(--ink);font-weight:700}

.body-main img{
  border-radius:var(--r-md);
  box-shadow:var(--soft);
  margin:.4em 0 1em;
}

.body-main blockquote{
  margin:0 0 1.1em;
  padding:14px 18px;
  border-left:5px solid var(--clay);
  border-radius:0 var(--r-md) var(--r-md) 0;
  background:rgba(139,69,19,.09);
}

.body-main blockquote p:last-child{margin-bottom:0}

.body-main table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.1em;
  font-size:16px;
}

.body-main th,
.body-main td{
  padding:9px 11px;
  text-align:left;
  border-bottom:1px solid var(--line);
}

/* ---------- 底部固定条 ---------- */

.dock{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px clamp(12px,3vw,26px);
  border-top-left-radius:var(--r-lg);
  border-top-right-radius:var(--r-lg);
  background:rgba(31,23,38,.96);
  color:#f3ece5;
  box-shadow:0 -16px 34px -22px rgba(0,0,0,.8);
}

.dock-brand{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:0 0 auto;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
}

.brand img{
  height:26px;
  width:auto;
  border-radius:7px;
  display:block;
}

.dock-form{
  display:flex;
  align-items:center;
  gap:6px;
}

.dock-form-label{
  font-size:16px;
  color:#c8b8d6;
}

.dock-form input{
  width:118px;
  min-height:40px;
  padding:6px 11px;
  border:1px solid #4d3b5f;
  border-radius:var(--r-xs);
  background:#251b30;
  color:#fff;
  font-family:inherit;
  font-size:16px;
}

.dock-form input::placeholder{color:#9b8aac}

.dock-form button{
  min-height:40px;
  padding:6px 15px;
  border:0;
  border-radius:var(--r-xs);
  background:var(--clay-2);
  color:#fff;
  font-family:inherit;
  font-size:16px;
  cursor:pointer;
  transition:background .2s ease;
}

.dock-form button:hover{background:var(--clay)}

.dock-nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}

.dock-nav dl{
  display:flex;
  gap:2px;
  margin:0;
  width:max-content;
}

.dock-nav dt{margin:0}

.dock-nav a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 11px;
  border-radius:var(--r-xs);
  color:#e6dbee;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}

.dock-nav a:hover,
.dock-nav a[aria-current]{
  background:rgba(255,255,255,.14);
  color:#fff;
}

.dock-end{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  flex:0 0 auto;
}

.dock-copy{
  margin:0;
  font-size:16px;
  color:#b6a5c4;
  white-space:nowrap;
}

.dock-top{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:8px 13px;
  border:1px solid #4d3b5f;
  border-radius:var(--r-xs);
  color:#e6dbee;
  font-size:16px;
  text-decoration:none;
}

.dock-top:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- 窄屏 ---------- */

@media (max-width:840px){
  :root{--dock-pad:190px}

  .hero{
    grid-template-columns:1fr;
    min-height:55vh;
    gap:22px;
    padding-top:26px;
  }

  .hero-copy{order:-1}

  .body-shell{display:block}

  .rail{
    position:static;
    max-height:none;
    margin-bottom:22px;
  }

  .wrap{padding-bottom:44px}

  .rail-list{grid-template-columns:repeat(2,minmax(0,1fr))}

  .dock{
    flex-wrap:wrap;
    gap:8px;
    padding:9px 12px 11px;
    border-top-left-radius:var(--r-md);
    border-top-right-radius:var(--r-md);
  }

  .dock-brand{
    flex-direction:row;
    align-items:center;
    gap:10px;
    flex:1 1 100%;
  }

  .dock-form{flex:1 1 auto}

  .dock-form input{width:100%}

  .dock-form-label{display:none}

  .dock-nav{order:3;flex:1 1 100%}

  .dock-end{
    order:4;
    flex:1 1 100%;
    margin-left:0;
  }
}

@media (max-width:420px){
  .rail-list{grid-template-columns:1fr}
  .hero-copy h1{font-size:27px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    transition-duration:.01ms !important;
  }
}

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