:root{
  --c-deep:#061A2B;
  --c-night:#0B2E44;
  --c-ice:#B9EAF2;
  --c-lime:#B7FF3C;
  --c-orange:#FF8A3D;
  --c-indigo:#2A1B55;
  --c-wine:#6B2039;
  --c-paper:#F6F3EA;
  --c-ink:#071018;
  --c-mist:#70879A;

  --line-light:rgba(185,234,242,.22);
  --line-ice:rgba(185,234,242,.4);
  --line-dark:rgba(7,16,24,.16);
  --line-mid:rgba(112,135,154,.45);

  --font-display:"Barlow Condensed","Oswald","HarmonyOS Sans SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --step-0:clamp(1rem,.96rem + .18vw,1.125rem);
  --step-1:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  --step-2:clamp(1.6rem,1.3rem + 1.5vw,2.4rem);
  --step-3:clamp(2.2rem,1.5rem + 3.4vw,3.8rem);
  --step-4:clamp(2.8rem,1.6rem + 6vw,5.6rem);

  --shell:1280px;
  --gutter:clamp(1rem,3.2vw,2.5rem);
  --dur:160ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}

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

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

body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.75;
  color:var(--c-ink);
  background:var(--c-paper);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img,picture,svg,video{display:block;max-width:100%;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}
table{border-collapse:collapse;width:100%;}
address{font-style:normal;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.12;
  letter-spacing:.01em;
  text-wrap:balance;
}

p{text-wrap:pretty;}

::selection{background:var(--c-lime);color:var(--c-ink);}

:focus-visible{
  outline:2px solid var(--c-lime);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(6,26,43,.55);
}

/* ---------- 框架头部 ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--c-deep);
  color:var(--c-paper);
  border-bottom:1px solid var(--line-light);
}

.site-header::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:clamp(36px,7vw,96px);
  height:3px;
  background:var(--c-lime);
}

.site-header__frame{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.site-header__brand-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem clamp(.75rem,2vw,1.5rem);
  min-height:64px;
  padding-block:.85rem .7rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  color:var(--c-paper);
}

.brand__mark{
  display:block;
  width:9px;
  height:26px;
  background:var(--c-lime);
  transform:skewX(-14deg);
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.brand:hover .brand__mark{background:var(--c-orange);transform:skewX(-14deg) translateY(-2px);}

.brand__name{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);
  letter-spacing:.06em;
  line-height:1.1;
}

.edition-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.32rem .6rem;
  border:1px solid var(--line-ice);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.12em;
  color:var(--c-ice);
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.edition-badge::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--c-lime);
  transition:background var(--dur) var(--ease);
}

.edition-badge:hover{
  background:var(--c-lime);
  border-color:var(--c-lime);
  color:var(--c-ink);
}

.edition-badge:hover::before{background:var(--c-ink);}

.utility-nav{
  display:flex;
  align-items:center;
  gap:clamp(.85rem,1.8vw,1.4rem);
  margin-left:auto;
}

.utility-nav__link{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--c-ice);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}

.utility-nav__link::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:1px;
  background:var(--c-lime);
  transition:right var(--dur) var(--ease);
}

.utility-nav__link:hover{color:var(--c-paper);}
.utility-nav__link:hover::after,
.utility-nav__link:focus-visible::after{right:0;}

.nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  min-height:40px;
  padding:.45rem .7rem;
  background:transparent;
  border:1px solid var(--line-light);
  border-radius:2px;
  color:var(--c-paper);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}

.nav-toggle:hover{border-color:var(--c-lime);color:var(--c-lime);}

.nav-toggle__bars{
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
  width:16px;
  height:12px;
}

.nav-toggle__bars span{
  display:block;
  height:2px;
  width:100%;
  background:var(--c-lime);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.site-nav__list{
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid var(--line-light);
}

.site-nav__link{
  position:relative;
  display:block;
  padding:.8rem clamp(.6rem,1.5vw,1.3rem);
  border-left:1px solid var(--line-light);
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.09em;
  color:var(--c-paper);
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}

.site-nav__item:first-child .site-nav__link{border-left:0;}

.site-nav__link:hover{
  background:rgba(185,234,242,.08);
  color:var(--c-ice);
}

.site-nav__link[aria-current="page"]{color:var(--c-lime);}

.site-nav__link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--c-lime);
}

.site-header__meter{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--c-lime);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform 90ms linear;
  pointer-events:none;
}

.skip-link{
  position:absolute;
  left:var(--gutter);
  top:-120px;
  z-index:120;
  padding:.7rem 1.1rem;
  background:var(--c-lime);
  color:var(--c-ink);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-decoration:none;
  transition:top var(--dur) var(--ease);
}

.skip-link:focus{top:.8rem;}

/* ---------- 框架页脚 ---------- */
.site-footer{
  background:var(--c-night);
  color:var(--c-ice);
  border-top:1px solid var(--line-light);
}

.site-footer__frame{
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(2.4rem,5vw,4rem) var(--gutter) clamp(1.2rem,2.4vw,1.75rem);
}

.site-footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) minmax(0,1.2fr);
  gap:clamp(1.75rem,4vw,3.5rem);
}

.site-footer__brand-name{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,1.15rem + 1.2vw,2.1rem);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--c-paper);
  line-height:1.15;
}

.site-footer__tagline{
  margin-top:.7rem;
  max-width:26ch;
  font-size:.92rem;
  line-height:1.75;
  color:rgba(185,234,242,.82);
}

.site-footer__meta{
  margin-top:1.1rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--c-mist);
}

.site-footer__heading{
  margin-bottom:.9rem;
  padding-bottom:.55rem;
  border-bottom:1px solid var(--line-light);
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--c-mist);
}

.site-footer__nav-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.15rem 1.25rem;
}

.site-footer__nav-link{
  display:inline-block;
  padding-block:.2rem;
  border-bottom:1px solid transparent;
  font-size:.92rem;
  color:var(--c-ice);
  text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.site-footer__nav-link:hover,
.site-footer__nav-link:focus-visible{
  color:var(--c-lime);
  border-bottom-color:var(--c-lime);
}

.site-footer__address{
  display:grid;
  gap:.7rem;
  font-size:.9rem;
  line-height:1.7;
}

.site-footer__line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.45rem .65rem;
}

.site-footer__label{
  flex:0 0 auto;
  min-width:2.6rem;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  color:var(--c-mist);
}

.site-footer__value{
  color:var(--c-paper);
  word-break:break-word;
}

.site-footer__value.mono{font-size:.8rem;letter-spacing:.03em;}

.site-footer__note{
  display:block;
  margin-top:.35rem;
  padding-top:.7rem;
  border-top:1px solid var(--line-light);
  font-size:.78rem;
  line-height:1.7;
  color:rgba(185,234,242,.66);
}

.copy-btn{
  padding:.14rem .45rem;
  background:transparent;
  border:1px solid var(--line-ice);
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.08em;
  color:var(--c-ice);
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.copy-btn:hover{border-color:var(--c-lime);color:var(--c-lime);}

.copy-btn[data-copied="true"]{
  background:var(--c-lime);
  border-color:var(--c-lime);
  color:var(--c-ink);
}

.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:clamp(1.8rem,3.5vw,2.8rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line-light);
}

.site-footer__legal{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--c-mist);
}

.site-footer__feedback{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.55rem 1.05rem;
  border:1px solid var(--c-orange);
  border-radius:2px;
  background:var(--c-orange);
  color:var(--c-ink);
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}

.site-footer__feedback:hover{
  background:transparent;
  color:var(--c-orange);
}

/* ---------- 通用容器与分区 ---------- */
.page-shell{
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{padding-block:clamp(2.8rem,6vw,5.5rem);}
.section--tight{padding-block:clamp(1.6rem,3.4vw,3rem);}
.section--ink{background:var(--c-deep);color:var(--c-paper);}
.section--night{background:var(--c-night);color:var(--c-ice);}
.section--paper{background:var(--c-paper);color:var(--c-ink);}
.section--indigo{background:var(--c-indigo);color:var(--c-paper);}

.section-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1.25rem;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-mid);
}

.section-index{
  font-family:var(--font-mono);
  font-size:clamp(2rem,.9rem + 3.6vw,4rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--c-mist);
  font-variant-numeric:tabular-nums;
}

.section-title{font-size:var(--step-2);}

.section-kicker{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-mist);
}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:clamp(1rem,2.4vw,2rem);}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.grid--asym{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}

/* ---------- 卡片：纸片叠层 + 印刷边框 ---------- */
.card{
  position:relative;
  display:grid;
  gap:.55rem;
  padding:clamp(1rem,2vw,1.5rem);
  background:var(--c-paper);
  color:var(--c-ink);
  border:1px solid var(--line-dark);
  border-radius:2px;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.card::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(7,16,24,.08);
  pointer-events:none;
}

.card:hover,
.card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(7,16,24,.42);
  box-shadow:8px 8px 0 -3px var(--c-ice),8px 8px 0 -2px var(--line-dark);
}

.card__index{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--c-mist);
}

.card__title{
  font-family:var(--font-display);
  font-size:var(--step-1);
  font-weight:700;
  line-height:1.2;
}

.card__text{font-size:.95rem;line-height:1.7;color:var(--c-night);}

.card__meta{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  color:var(--c-wine);
}

.card--dark{
  background:var(--c-night);
  color:var(--c-ice);
  border-color:var(--line-ice);
}

.card--dark::after{border-color:rgba(185,234,242,.12);}
.card--dark .card__text{color:rgba(185,234,242,.88);}
.card--dark .card__title{color:var(--c-paper);}
.card--dark .card__meta{color:var(--c-lime);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding:.7rem 1.4rem;
  border:1px solid transparent;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.btn:hover{transform:translateY(-1px);}

.btn--primary{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-ink);}
.btn--primary:hover{background:#ffa367;border-color:#ffa367;}

.btn--lime{background:var(--c-lime);border-color:var(--c-lime);color:var(--c-ink);}
.btn--lime:hover{background:#cbff74;border-color:#cbff74;}

.btn--ghost{background:transparent;border-color:var(--line-ice);color:var(--c-ice);}
.btn--ghost:hover{border-color:var(--c-lime);color:var(--c-lime);}

.btn--ink{background:transparent;border-color:rgba(7,16,24,.3);color:var(--c-ink);}
.btn--ink:hover{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper);}

/* ---------- 面包屑 ---------- */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  padding-block:.6rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--c-mist);
}

.breadcrumb__item{display:inline-flex;align-items:center;gap:.45rem;}
.breadcrumb__item + .breadcrumb__item::before{content:"/";color:var(--c-mist);}

.breadcrumb__link{
  border-bottom:1px solid transparent;
  text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.breadcrumb__link:hover{color:var(--c-ink);border-bottom-color:currentColor;}
.breadcrumb__item[aria-current="page"]{color:var(--c-ink);}

/* ---------- 标签 ---------- */
.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.18rem .5rem;
  border:1px solid currentColor;
  border-radius:2px;
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.12em;
  line-height:1.6;
}

.tag--wine{color:var(--c-wine);}
.tag--indigo{color:var(--c-indigo);}
.tag--lime{background:var(--c-lime);border-color:var(--c-lime);color:var(--c-ink);}
.tag--orange{background:var(--c-orange);border-color:var(--c-orange);color:var(--c-ink);}
.tag--ghost{color:var(--c-ice);border-color:var(--line-ice);}

/* ---------- 数据排版 ---------- */
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}

.data-figure{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.7rem,1rem + 2.4vw,3rem);
  line-height:1.05;
  color:var(--c-lime);
}

.data-figure--ink{color:var(--c-ink);}

/* ---------- 图片容器基础规则 ---------- */
.figure{display:grid;gap:.65rem;margin:0;}

.figure__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:16/9;
  border:1px solid var(--line-dark);
  border-radius:2px;
  background:var(--c-night);
}

.figure__media img,
.figure__media svg{
  width:100%;
  height:100%;
  object-fit:cover;
}

.figure__media::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(185,234,242,.22);
  pointer-events:none;
}

.figure--portrait .figure__media{aspect-ratio:3/4;}
.figure__media--square{aspect-ratio:1/1;}
.figure__media--wide{aspect-ratio:21/9;}

.figure__caption{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--c-mist);
}

/* ---------- 纸张叠层块 ---------- */
.plate{
  position:relative;
  background:var(--c-paper);
  border:1px solid var(--line-dark);
  box-shadow:10px 10px 0 -2px var(--c-ice),10px 10px 0 -1px var(--line-dark);
}

/* ---------- 返回顶部 ---------- */
.to-top{
  position:fixed;
  right:clamp(1rem,3vw,2rem);
  bottom:clamp(1rem,3vw,2rem);
  z-index:70;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  background:var(--c-deep);
  border:1px solid var(--line-ice);
  border-radius:2px;
  color:var(--c-lime);
  font-family:var(--font-mono);
  font-size:1rem;
  line-height:1;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.to-top[data-visible="true"]{opacity:1;visibility:visible;transform:none;}
.to-top:hover{border-color:var(--c-lime);}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .site-footer__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .site-footer__contact{grid-column:1 / -1;}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;margin-left:auto;}
  .utility-nav{
    order:3;
    flex:1 0 100%;
    margin-left:0;
    padding-top:.35rem;
    gap:1rem;
  }
  .site-nav{display:none;}
  .site-nav[data-open="true"]{display:block;}
  .site-nav__list{flex-direction:column;border-top:1px solid var(--line-light);}
  .site-nav__item{width:100%;}
  .site-nav__link{
    border-left:0;
    border-top:1px solid var(--line-light);
    padding:.9rem .25rem;
    font-size:1rem;
  }
  .site-nav__item:first-child .site-nav__link{border-top:0;}
  .site-nav__link[aria-current="page"]::after{display:none;}
  .site-nav__link[aria-current="page"]{padding-left:.9rem;}
  .site-nav__link[aria-current="page"]::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:4px;
    height:18px;
    background:var(--c-lime);
    transform:translateY(-50%);
  }
}

@media (max-width:860px){
  .grid--asym{grid-template-columns:1fr;}
}

@media (max-width:720px){
  .site-header__brand-row{min-height:56px;padding-block:.7rem;}
  .site-footer__top{grid-template-columns:1fr;}
  .site-footer__nav-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .site-footer__bottom{align-items:flex-start;}
}

@media (max-width:480px){
  .site-footer__nav-list{grid-template-columns:1fr;}
  .section-head{gap:.35rem .8rem;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .card:hover,.card:focus-within,.btn:hover,.to-top{transform:none !important;}
}