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

:root{
  --ink:#171f26;
  --ink-up:#202b36;
  --ink-dn:#131b21;
  --ice:#c8e0f4;
  --rose:#f5e0e8;
  --txt:#dbe7f1;
  --muted:#9cafbe;
  --r:14px;
  --rc:10px;
  --lift:-6px -6px 16px rgba(200,224,244,.06), 7px 7px 18px rgba(0,0,0,.66);
  --lift-sm:-3px -3px 8px rgba(200,224,244,.06), 4px 4px 10px rgba(0,0,0,.6);
  --press:inset -3px -3px 8px rgba(200,224,244,.05), inset 4px 4px 10px rgba(0,0,0,.62);
}

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

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

body{
  margin:0;
  padding:0 0 96px;
  background-color:var(--ink);
  background-image:
    radial-gradient(880px 620px at 108% -6%, rgba(200,224,244,.09), transparent 62%),
    radial-gradient(760px 520px at -12% 34%, rgba(245,224,232,.075), transparent 62%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:"Josefin Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  letter-spacing:.01em;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
p{margin:0 0 14px}
a{color:var(--ice)}

::selection{background:rgba(200,224,244,.28);color:#fff}

:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

[id]{scroll-margin-top:28px;scroll-margin-bottom:112px}

hr{
  border:0;height:1px;margin:0 0 16px;
  background:linear-gradient(90deg,rgba(200,224,244,.34),rgba(200,224,244,.02));
}

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

.dock{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(32,43,54,.94),rgba(19,27,33,.99));
  border-top:1px solid rgba(200,224,244,.08);
  box-shadow:0 -10px 30px rgba(0,0,0,.5);
  backdrop-filter:blur(9px);
}

.brand{
  position:relative;z-index:2;
  display:inline-block;
  padding:10px 6px;
  font-family:"Cinzel","Songti SC",serif;
  font-size:19px;
  font-weight:600;
  letter-spacing:.2em;
  text-decoration:none;
  color:var(--ice);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
}

.menu-wrap{position:relative}

.menu-wrap summary{
  position:relative;
  z-index:2;
  display:block;
  width:48px;height:48px;
  border-radius:var(--r);
  list-style:none;
  cursor:pointer;
  background:linear-gradient(145deg,#24313d,#141c23);
  box-shadow:var(--lift-sm);
  transition:box-shadow .15s ease, transform .15s ease;
}
.menu-wrap summary::-webkit-details-marker{display:none}
.menu-wrap summary::-moz-list-bullet{list-style:none}
.menu-wrap summary:active{box-shadow:var(--press);transform:scale(.96)}

.menu-wrap summary .bar,
.menu-wrap summary::before,
.menu-wrap summary::after{
  content:"";
  position:absolute;
  left:50%;
  width:20px;height:2px;
  margin-left:-10px;
  border-radius:2px;
  background:var(--ice);
  transition:transform .18s ease, opacity .18s ease;
}
.menu-wrap summary .bar{top:23px;opacity:1}
.menu-wrap summary::before{top:16px}
.menu-wrap summary::after{top:30px}
.menu-wrap[open] summary .bar{opacity:0}
.menu-wrap[open] summary::before{transform:translateY(7px) rotate(45deg)}
.menu-wrap[open] summary::after{transform:translateY(-7px) rotate(-45deg)}

.menu-wrap menu{
  position:fixed;
  inset:0;
  margin:0;
  padding:78px 22px 112px;
  list-style:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
  overflow-y:auto;
  background:
    radial-gradient(620px 520px at 82% 8%, rgba(200,224,244,.11), transparent 66%),
    radial-gradient(560px 460px at 4% 92%, rgba(245,224,232,.09), transparent 66%),
    var(--ink);
}

.menu-wrap menu li{list-style:none}

.menu-wrap menu a{
  display:block;
  padding:13px 18px;
  border-radius:var(--rc);
  text-decoration:none;
  color:var(--txt);
  font-size:18px;
  letter-spacing:.09em;
  background:linear-gradient(145deg,#1e2934,#151e25);
  box-shadow:var(--lift-sm);
  transition:transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.menu-wrap menu a:hover{color:var(--ice);transform:translateY(-1px)}
.menu-wrap menu a:active{box-shadow:var(--press);transform:scale(.99)}

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

.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:64px 18px 118px;
  text-align:right;
}

.hero-copy{
  margin-left:auto;
  max-width:min(100%,660px);
}

.hero h1{
  margin:0 0 14px;
  font-family:"Cinzel","Songti SC","Noto Serif SC",serif;
  font-weight:600;
  font-size:clamp(29px,7.6vw,54px);
  line-height:1.24;
  letter-spacing:.02em;
  color:#eef5fb;
  text-shadow:-1px -1px 0 rgba(200,224,244,.16), 3px 4px 12px rgba(0,0,0,.7);
  overflow-wrap:anywhere;
}

.lede{
  margin:0;
  color:var(--muted);
  font-size:16px;
  letter-spacing:.04em;
}

.hero-fig{
  position:relative;
  flex:1 1 auto;
  min-height:210px;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(145deg,#25323e,#161f26);
  box-shadow:var(--lift);
}

.hero-img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:16px;
  filter:saturate(.96) contrast(1.02);
}

.hero-fig::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(112deg,transparent 38%,rgba(200,224,244,.14) 50%,transparent 62%);
  animation:sheen 15s linear infinite;
  pointer-events:none;
}

@keyframes sheen{
  from{transform:translateX(-38%)}
  to{transform:translateX(38%)}
}

.hero-fig figcaption{
  position:absolute;
  right:14px;bottom:12px;
  font-family:"Cinzel",serif;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(200,224,244,.82);
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}

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

.stage{
  display:grid;
  grid-template-columns:minmax(0,1fr) 252px;
  gap:26px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
  padding:34px 18px 64px;
}

.content{
  display:flex;
  flex-direction:column;
  gap:22px;
  min-width:0;
}

.content > article{
  padding:26px 20px;
  border-radius:var(--r);
  background:linear-gradient(145deg,#1f2b36,#161f27);
  box-shadow:var(--lift);
}

.content h2{
  margin:0 0 12px;
  font-family:"Cinzel","Songti SC","Noto Serif SC",serif;
  font-size:23px;
  line-height:1.36;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--ice);
  text-shadow:1px 2px 6px rgba(0,0,0,.55);
}

.content h3{
  margin:20px 0 8px;
  font-size:18px;
  line-height:1.5;
  color:var(--rose);
  letter-spacing:.03em;
}

.content p{color:var(--txt)}
.content a{color:var(--ice);text-underline-offset:3px}
.content a:hover{color:#fff}

.content ul,.content ol{margin:0 0 14px;padding-left:1.25em}
.content li{margin:0 0 6px}
.content strong{color:#f2f8fd}

.content blockquote{
  margin:0 0 14px;
  padding:14px 16px;
  border-radius:var(--rc);
  background:#151e25;
  box-shadow:var(--press);
  color:var(--rose);
}

.content figure{margin:0 0 16px}
.content figure img{border-radius:var(--rc);box-shadow:var(--lift-sm)}
.content figcaption{font-size:14px;color:var(--muted);margin-top:8px}

.content table{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:16px}
.content th,.content td{padding:9px 10px;text-align:left;border-bottom:1px solid rgba(200,224,244,.1)}

/* ---------- 右侧栏 ---------- */

.rail{
  position:sticky;
  top:26px;
  padding:20px 16px;
  border-radius:var(--r);
  background:linear-gradient(145deg,#212d39,#161f27);
  box-shadow:var(--lift);
}

.rail h2{
  margin:0 0 10px;
  font-family:"Josefin Sans","PingFang SC",sans-serif;
  font-size:16px;
  font-weight:500;
  letter-spacing:.3em;
  text-align:center;
  color:var(--ice);
}

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

.rail a{
  display:block;
  padding:11px 12px;
  border-radius:var(--rc);
  font-size:16px;
  text-decoration:none;
  color:var(--muted);
  transition:color .15s ease, box-shadow .15s ease, background .15s ease;
}
.rail a:hover{
  color:var(--ice);
  background:linear-gradient(145deg,#232f3b,#18212a);
  box-shadow:var(--lift-sm);
}

/* ---------- 页脚 ---------- */

.foot{
  padding:46px 18px 40px;
  border-top:1px solid rgba(200,224,244,.08);
  background:linear-gradient(180deg,#141c23,#10171d);
}

.foot-top{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:30px;
  max-width:1144px;
  margin:0 auto 28px;
}

.foot address{font-style:normal}

.fbrand{
  display:block;
  margin-bottom:10px;
  font-family:"Cinzel",serif;
  font-size:21px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--ice);
}

.fdesc{display:block;font-size:16px;color:var(--muted);margin-bottom:8px;max-width:46ch}
.fhost{display:block;font-size:15px;letter-spacing:.1em;color:rgba(200,224,244,.5)}

.foot-nav{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px 10px;
  align-content:start;
}
.foot-nav a{
  display:block;
  padding:11px 6px;
  font-size:16px;
  text-decoration:none;
  color:var(--muted);
  border-radius:8px;
  transition:color .15s ease;
}
.foot-nav a:hover{color:var(--ice)}

.sub{
  display:flex;
  gap:10px;
  max-width:520px;
  margin:0 auto 22px;
}

.sub input{
  flex:1 1 auto;
  min-width:0;
  padding:13px 15px;
  border:0;
  border-radius:12px;
  background:#141d24;
  color:var(--txt);
  font:inherit;
  font-size:16px;
  box-shadow:var(--press);
}
.sub input::placeholder{color:rgba(156,175,190,.8)}

.sub button{
  padding:13px 24px;
  border:0;
  border-radius:12px;
  font:inherit;
  font-size:16px;
  letter-spacing:.1em;
  cursor:pointer;
  color:var(--ink);
  background:linear-gradient(145deg,var(--ice),#a9c8e2);
  box-shadow:var(--lift-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.sub button:hover{transform:translateY(-1px)}
.sub button:active{box-shadow:var(--press);transform:scale(.98)}

.copy{
  margin:0;
  text-align:center;
  font-size:14px;
  letter-spacing:.14em;
  color:rgba(156,175,190,.75);
}

/* ---------- 断点 ---------- */

@media (max-width:900px){
  .stage{grid-template-columns:1fr;gap:20px}
  .rail{position:static}
  .rail ul{flex-direction:row;flex-wrap:wrap}
  .rail li{flex:1 1 auto}
  .rail a{text-align:center}
}

@media (max-width:700px){
  body{font-size:16px}
  .foot-top{grid-template-columns:1fr;gap:22px}
  .foot-nav{grid-template-columns:1fr 1fr}
  .hero{padding:56px 16px 112px;gap:18px}
  .hero h1{line-height:1.3}
  .content > article{padding:22px 16px}
  .menu-wrap menu a{font-size:17px;padding:12px 16px}
}

@media (max-width:400px){
  .sub{flex-wrap:wrap}
  .sub button{width: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;
  }
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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