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

:root{
  --ink:#1f1f1f;
  --muted:#5a5a60;
  --bg:#f5f5f7;
  --line:rgba(31,31,31,.09);
  --glass:rgba(255,255,255,.64);
  --shadow:0 4px 6px rgba(0,0,0,.05), 0 24px 48px -30px rgba(31,31,31,.42);
  --r:28px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 520px at 10% -10%, #ffffff 0%, rgba(255,255,255,0) 62%),
    radial-gradient(760px 460px at 94% 2%, #ffffff 0%, rgba(255,255,255,0) 58%),
    var(--bg);
  font-family:'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size:17px;
  line-height:1.75;
  font-weight:400;
  letter-spacing:.005em;
}

a{color:inherit;text-decoration:none}

a:focus-visible,
.brandmark:focus-visible{
  outline:2px solid #1f1f1f;
  outline-offset:3px;
  border-radius:999px;
}

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

/* 顶部细条 */
.topbar{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:6px 16px;
  font-size:16px;
  letter-spacing:.22em;
  color:#5f5f66;
  background:rgba(255,255,255,.55);
  border-bottom:1px solid var(--line);
}

/* 头部 */
.masthead{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  background:rgba(245,245,247,.76);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line);
}

.side-nav{flex:1 1 0;min-width:0}
.side-nav ul{
  display:flex;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.side-nav.left ul{justify-content:flex-end}
.side-nav.right ul{justify-content:flex-start}

.side-nav a{
  display:inline-block;
  padding:10px 12px;
  border-radius:999px;
  font-size:16px;
  line-height:1.4;
  white-space:nowrap;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,31,31,.07);
  transition:background .28s ease, color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.side-nav a:hover{
  background:#1f1f1f;
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 18px -10px rgba(31,31,31,.7);
}

.brandmark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#1f1f1f;
  color:#fff;
  font-size:22px;
  font-weight:700;
  overflow:hidden;
  box-shadow:0 10px 24px -16px rgba(31,31,31,.9);
  transition:transform .3s ease;
}
.brandmark:hover{transform:scale(1.04)}
.brandmark img{width:52px;height:52px;object-fit:cover}

/* 主体骨架 */
.shell{
  max-width:1180px;
  margin:0 auto;
  padding:24px 20px 64px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 264px;
  gap:20px;
  align-items:start;
}

main{min-width:0}
div{display:block}

/* Hero */
.hero{
  display:grid;
  min-height:62vh;
  margin:0 0 18px;
}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(140px, 1fr);
  gap:14px;
  width:100%;
}
.tile{
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.9);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow);
  animation:rise .7s cubic-bezier(.2,.72,.3,1) backwards;
}
.tile:nth-child(1){animation-delay:.02s}
.tile:nth-child(2){animation-delay:.1s}
.tile:nth-child(3){animation-delay:.18s}
.tile:nth-child(4){animation-delay:.26s}

.tile-copy{
  grid-column:span 2;
  grid-row:span 2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:32px 26px;
  text-align:center;
  background:linear-gradient(158deg, rgba(255,255,255,.95), rgba(255,255,255,.5));
}
.tile-copy h1{
  margin:0;
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.24;
  font-weight:700;
  letter-spacing:-.02em;
}
.subtitle{
  margin:0;
  max-width:32em;
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:8px 18px;
  border-radius:999px;
  background:#1f1f1f;
  color:#fff;
  font-size:16px;
  letter-spacing:.08em;
  animation:float 6.5s ease-in-out infinite;
}

.tile-mark{
  display:grid;
  place-items:center;
  font-size:66px;
  font-weight:700;
  color:rgba(31,31,31,.16);
  background:linear-gradient(150deg, #ffffff, #ebebef);
  will-change:transform;
}
.tile-orb{
  background:radial-gradient(circle at 32% 28%, #ffffff, #dcdce2);
  will-change:transform;
}
.tile-orb::after{
  content:"";
  position:absolute;
  inset:auto -20% -34% -20%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 0%, rgba(31,31,31,.14), rgba(31,31,31,0) 70%);
  filter:blur(6px);
}
.tile-line{
  grid-column:span 2;
  background:
    repeating-linear-gradient(122deg, rgba(31,31,31,.07) 0 1px, rgba(255,255,255,0) 1px 16px),
    linear-gradient(120deg, rgba(255,255,255,.95), rgba(240,240,244,.6));
}

/* 正文区块 */
div > section:not(.hero){
  padding:26px 24px 30px;
  margin:0 0 18px;
  border-radius:var(--r);
  border:1px solid rgba(255,255,255,.88);
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--shadow);
  scroll-margin-top:112px;
}

div > section:not(.hero) h2{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.42;
  font-weight:700;
  letter-spacing:-.01em;
}
div > section:not(.hero) h3{
  margin:22px 0 8px;
  font-size:19px;
  line-height:1.5;
  font-weight:500;
}
div > section:not(.hero) h2 + p,
div > section:not(.hero) h2 + p.subtitle{
  color:var(--muted);
  font-size:17px;
  margin-bottom:14px;
}
div > section:not(.hero) p{margin:0 0 14px}
div > section:not(.hero) p:last-child{margin-bottom:0}
div > section:not(.hero) ul,
div > section:not(.hero) ol{
  margin:0 0 14px;
  padding-left:1.25em;
}
div > section:not(.hero) li{margin:0 0 6px}
div > section:not(.hero) a{
  color:#1f1f1f;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
div > section:not(.hero) a:hover{background:rgba(31,31,31,.06)}
div > section:not(.hero) img{
  border-radius:20px;
  margin:6px 0 14px;
}
div > section:not(.hero) blockquote{
  margin:0 0 14px;
  padding:14px 18px;
  border-left:2px solid rgba(31,31,31,.2);
  background:rgba(255,255,255,.6);
  border-radius:0 18px 18px 0;
  color:#3d3d43;
}
div > section:not(.hero) code{
  font-family:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size:15px;
  background:rgba(31,31,31,.07);
  padding:2px 6px;
  border-radius:8px;
}
div > section:not(.hero) table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  margin:0 0 14px;
}
div > section:not(.hero) th,
div > section:not(.hero) td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
}

/* 右侧栏 */
.rail{position:sticky;top:96px}
.rail-card{
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(255,255,255,.74);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.rail-label{
  margin:0 0 8px;
  padding-left:8px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.18em;
  color:#6c6c73;
}
.rail-card ul{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}
.rail-card a{
  display:block;
  padding:10px 8px;
  border-radius:14px;
  font-size:16px;
  line-height:1.5;
  color:#34343a;
  transition:background .26s ease, color .26s ease;
}
.rail-card a:hover{background:#1f1f1f;color:#fff}

/* 页脚 */
.footer{
  max-width:1180px;
  margin:0 auto;
  padding:26px 20px 44px;
  border-top:1px solid var(--line);
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  padding-bottom:22px;
}
.foot-grid dt{
  margin-bottom:4px;
  font-size:16px;
  letter-spacing:.16em;
  color:#75757c;
}
.foot-grid dd{margin:0}
.foot-grid a{
  display:inline-block;
  padding:10px 0;
  font-size:16px;
  line-height:1.5;
}
.foot-grid a:hover{text-decoration:underline;text-underline-offset:4px}

.giant{
  margin:0;
  font-size:clamp(42px, 12vw, 138px);
  line-height:.92;
  font-weight:700;
  letter-spacing:-.045em;
  color:rgba(31,31,31,.14);
  white-space:nowrap;
  overflow:hidden;
}
.foot-base{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-top:16px;
  font-size:16px;
  color:#5d5d64;
}
.totop{
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  background:#1f1f1f;
  color:#fff;
  font-size:16px;
  transition:transform .28s ease;
}
.totop:hover{transform:translateY(-2px)}

/* 动效 */
@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{opacity:1;transform:none}

/* 断点 */
@media (max-width:1000px){
  .side-nav a{padding:10px 10px;font-size:16px}
  .shell{grid-template-columns:minmax(0,1fr) 236px}
}

@media (max-width:820px){
  .masthead{
    position:static;
    flex-wrap:wrap;
    gap:12px;
    padding:14px;
  }
  .brandmark{order:-1;margin:0 auto}
  .side-nav{flex:1 1 100%}
  .side-nav.left ul,
  .side-nav.right ul{justify-content:center;flex-wrap:wrap}
  .side-nav a{padding:10px 14px}

  .shell{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
    padding:16px 14px 48px;
  }
  .hero{min-height:0;margin-bottom:16px}
  .hero-grid{
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:auto;
    gap:12px;
  }
  .tile-copy{
    grid-column:span 2;
    grid-row:auto;
    min-height:230px;
    padding:28px 18px;
  }
  .tile-mark,
  .tile-orb{min-height:112px;font-size:44px}
  .tile-line{grid-column:span 2;min-height:62px}

  div > section:not(.hero){padding:22px 18px 24px;border-radius:22px}
  div > section:not(.hero) h2{font-size:21px}
  div > section:not(.hero) h2,
  div > section:not(.hero) h3{scroll-margin-top:20px}

  .rail{position:static;order:2}
  .rail-card ul{
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
  }
  .rail-card a{padding:10px 12px;border-radius:999px;background:rgba(255,255,255,.7)}
  .rail-card h2{margin-bottom:10px}

  .foot-grid{grid-template-columns:repeat(auto-fit, minmax(112px, 1fr))}
  .giant{font-size:clamp(38px, 13vw, 72px)}
  .foot-base{padding-top:14px}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .tile,.badge{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .side-nav a,.totop,.brandmark{transition:none}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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