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

:root{
  --ink:#171f26;
  --blue:#c8e0f4;
  --pink:#f5e0e8;
  --paper:#e9eff5;
  --line:#cfdae6;
  --muted:#4e5f6c;
  --r:14px;
  --up:-6px -6px 16px rgba(255,255,255,.92), 6px 6px 18px rgba(23,31,38,.14);
  --in:inset 3px 3px 8px rgba(23,31,38,.13), inset -3px -3px 8px rgba(255,255,255,.9);
}

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

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:Poppins,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  background:
    radial-gradient(1200px 620px at 84% -12%, var(--blue), transparent 62%),
    radial-gradient(980px 560px at 6% 112%, var(--pink), transparent 66%),
    var(--paper);
  -webkit-font-smoothing:antialiased;
}

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

a{color:#2b4c66}

:focus-visible{outline:2px solid #35617f;outline-offset:3px;border-radius:8px}

small{
  display:block;
  font-size:16px;
  font-weight:500;
  letter-spacing:.24em;
  color:var(--muted);
  line-height:1.5;
}

/* ---------- 左侧竖排导航 ---------- */
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:264px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px 16px 20px;
  overflow-y:auto;
  color:#e6eff6;
  background:var(--ink);
  border-radius:0 var(--r) var(--r) 0;
  box-shadow:6px 0 26px rgba(23,31,38,.3);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px;
  border-radius:var(--r);
  text-decoration:none;
  color:#fff;
}

.brand-mark,
.brand-logo{
  width:42px;height:42px;
  min-width:42px;
  border-radius:12px;
  object-fit:cover;
}

.brand-mark{
  display:grid;
  place-items:center;
  font-family:Righteous,Poppins,sans-serif;
  font-size:20px;
  color:var(--ink);
  background:linear-gradient(145deg,var(--pink),var(--blue));
  box-shadow:-2px -2px 6px rgba(255,255,255,.2), 3px 3px 10px rgba(0,0,0,.45);
}

.brand-word{
  font-family:Righteous,Poppins,sans-serif;
  font-size:19px;
  line-height:1.25;
  letter-spacing:.02em;
}

.menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menu a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  padding:11px 12px;
  font-size:16px;
  line-height:1.3;
  text-decoration:none;
  color:#cedde8;
  border-radius:12px;
  background:linear-gradient(145deg,#1d2731,#141b22);
  box-shadow:-2px -2px 6px rgba(255,255,255,.055), 2px 2px 8px rgba(0,0,0,.55);
  transition:transform .15s ease,color .15s ease,box-shadow .15s ease;
}

.menu a em{
  font-style:normal;
  font-family:Righteous,Poppins,sans-serif;
  font-size:16px;
  letter-spacing:.06em;
  color:var(--blue);
  opacity:.75;
}

.menu a:hover,
.menu a:focus-visible{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:-3px -3px 9px rgba(255,255,255,.1), 4px 4px 12px rgba(0,0,0,.6);
}

.menu a:active{
  transform:scale(.985);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.72), inset -2px -2px 6px rgba(255,255,255,.07);
}

.menu a.is-on{
  color:var(--ink);
  background:linear-gradient(145deg,var(--pink),var(--blue));
  box-shadow:-2px -2px 8px rgba(255,255,255,.22), 3px 3px 10px rgba(0,0,0,.5);
}

.menu a.is-on em{color:#3d5364;opacity:1}

.rail-top{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  font-size:16px;
  text-decoration:none;
  color:#cedde8;
  border-radius:12px;
  background:linear-gradient(145deg,#1d2731,#141b22);
  box-shadow:-2px -2px 6px rgba(255,255,255,.055), 2px 2px 8px rgba(0,0,0,.55);
}

.rail-top:hover{color:#fff}

/* ---------- 主列 ---------- */
.col{
  margin-left:264px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.ticker{
  position:sticky;
  top:0;
  z-index:15;
  height:38px;
  display:flex;
  align-items:center;
  padding:0 44px;
  overflow:hidden;
  white-space:nowrap;
  font-size:16px;
  color:var(--ink);
  background:linear-gradient(90deg,var(--blue),var(--pink) 62%,var(--blue));
  box-shadow:0 4px 14px rgba(23,31,38,.13);
}

.ticker-in{letter-spacing:.34em}

main{
  flex:1;
  padding:0 44px;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:88px 0 72px;
  overflow:hidden;
}

.hero-h1{
  position:relative;
  z-index:2;
  margin:0;
  max-width:13ch;
  text-align:left;
  font-family:Righteous,Poppins,sans-serif;
  font-size:clamp(42px,8.6vw,112px);
  line-height:1.03;
  letter-spacing:-.01em;
  background:linear-gradient(150deg,#1b252d,#435767);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.hero::after{
  content:"";
  position:absolute;
  left:-4%;right:-4%;
  bottom:13%;
  height:56px;
  z-index:1;
  background:linear-gradient(90deg,var(--pink),var(--blue));
  transform:skewY(-4.5deg);
  box-shadow:-6px -6px 16px rgba(255,255,255,.85), 6px 6px 18px rgba(23,31,38,.16);
}

.bloom{
  position:absolute;
  right:3%;
  top:15%;
  width:min(44vw,400px);
  aspect-ratio:1 / 1;
  margin:0;
  z-index:1;
}

.bloom .b{
  position:absolute;
  display:block;
  border-radius:50%;
  box-shadow:-8px -8px 22px rgba(255,255,255,.9), 8px 8px 24px rgba(23,31,38,.16);
}

.b1{width:62%;height:62%;left:0;top:8%;background:linear-gradient(145deg,#fdf7fa,var(--pink))}
.b2{width:44%;height:44%;right:2%;bottom:4%;background:linear-gradient(145deg,#f7fbff,var(--blue))}
.b3{width:24%;height:24%;right:8%;top:2%;background:linear-gradient(145deg,var(--blue),var(--pink))}

/* ---------- 正文区块 ---------- */
main > div[id]{
  max-width:76ch;
  padding:52px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:56px;
}

main > div[id] > :first-child{margin-top:0}

main > div[id] h2{
  margin:.35em 0 .55em;
  font-family:Righteous,Poppins,sans-serif;
  font-size:clamp(24px,3.3vw,35px);
  line-height:1.25;
}

main > div[id] h3{
  margin:1.3em 0 .45em;
  font-size:20px;
  line-height:1.4;
}

main > div[id] p{margin:0 0 1em}

main > div[id] ul,
main > div[id] ol{margin:0 0 1em;padding-left:1.25em}

main > div[id] li{margin:.35em 0}

main > div[id] a{
  color:#25506e;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

main > div[id] strong{font-weight:600}

main > div[id] blockquote{
  margin:1.2em 0;
  padding:16px 20px;
  border-left:3px solid var(--blue);
  background:rgba(200,224,244,.32);
}

main > div[id] h2 + h3{margin-top:.2em}

/* ---------- 收尾区块 ---------- */
.closing{
  display:grid;
  grid-template-columns:1fr minmax(240px,320px);
  gap:44px;
  align-items:start;
  padding:60px 0 74px;
  border-top:1px solid var(--line);
  scroll-margin-top:56px;
}

.closing-main h2{
  margin:.12em 0 0;
  font-family:Righteous,Poppins,sans-serif;
  font-size:clamp(30px,5vw,52px);
  line-height:1.08;
}

.jump{
  padding:18px 16px;
  border-radius:var(--r);
  background:linear-gradient(145deg,#f4f9fd,#e0e9f1);
  box-shadow:var(--up);
}

.jump ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.jump a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 10px;
  font-size:16px;
  line-height:1.35;
  text-decoration:none;
  color:var(--ink);
  border-radius:10px;
  transition:transform .15s ease,box-shadow .15s ease;
}

.jump a:hover{
  transform:translateX(3px);
  box-shadow:var(--up);
}

.jump a:active{
  transform:scale(.99);
  box-shadow:var(--in);
}

/* ---------- 页脚 ---------- */
.foot{
  margin-top:auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:26px;
  padding:44px 44px 20px;
  border-top:1px solid var(--line);
}

.foot > div{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

.f-logo{
  width:44px;height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-family:Righteous,Poppins,sans-serif;
  font-size:21px;
  color:var(--ink);
  background:linear-gradient(145deg,var(--pink),var(--blue));
  box-shadow:var(--up);
}

.f-name{
  font-family:Righteous,Poppins,sans-serif;
  font-size:18px;
  line-height:1.35;
}

.f-host{
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
  word-break:break-all;
}

.foot ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
}

.foot ul a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:4px 0;
  font-size:16px;
  line-height:1.35;
  text-decoration:none;
  color:var(--muted);
}

.foot ul a:hover{color:var(--ink)}

.foot-bar{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:6px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:16px;
  color:var(--muted);
}

.foot-bar a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 14px;
  border-radius:10px;
  font-size:16px;
  text-decoration:none;
  color:var(--ink);
  box-shadow:var(--up);
}

.foot-bar a:active{
  box-shadow:var(--in);
  transform:scale(.98);
}

/* ---------- 滚动显现 ---------- */
.js main > div:not(.hero){
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease,transform .5s ease;
}

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

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js main > div:not(.hero){opacity:1;transform:none;transition:none}
  .menu a,.jump a,.foot-bar a{transition:none}
}

/* ---------- 窄屏 ---------- */
@media (max-width:900px){
  .rail{
    position:sticky;
    top:0;
    width:auto;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:0 0 var(--r) var(--r);
    box-shadow:0 6px 20px rgba(23,31,38,.28);
  }

  .brand{padding:0}

  .menu{
    order:3;
    width:100%;
  }

  .menu ul{
    flex-direction:row;
    gap:8px;
    padding-bottom:4px;
    overflow-x:auto;
  }

  .menu a{white-space:nowrap}

  .rail-top{
    order:2;
    margin:0 0 0 auto;
    min-height:40px;
    padding:0 14px;
  }

  .col{margin-left:0}

  .ticker{
    position:static;
    height:32px;
    padding:0 18px;
    letter-spacing:.2em;
  }

  main{padding:0 18px}

  .hero{
    min-height:78vh;
    padding:56px 0 44px;
  }

  main > div[id],
  .closing{
    padding:40px 0;
    scroll-margin-top:158px;
  }

  .closing{
    grid-template-columns:1fr;
    gap:26px;
    padding-bottom:52px;
  }

  .foot{
    grid-template-columns:1fr 1fr;
    gap:20px;
    padding:32px 18px 16px;
  }
}

@media (max-width:540px){
  .bloom{opacity:.55;right:-10%}
  .hero::after{height:40px;bottom:16%}
  .foot{grid-template-columns:1fr}
}

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