*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}

:root{
  --indigo:#111A33;
  --indigo-2:#1B2745;
  --deep:#0C1324;
  --paper:#F2E9D8;
  --paper-white:#FBF6EC;
  --crimson:#A33A3F;
  --ochre:#C08A2E;
  --turquoise:#2F7F78;
  --mist:#6E5A7E;
  --grey-blue:#9AA8C3;
  --ink:#1C1B19;
  --rule:rgba(154,168,195,.26);
  --rule-strong:rgba(154,168,195,.52);
  --paper-rule:#D9CBB2;
  --font-head:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --rail-w:252px;
  --rail-w-min:88px;
  --header-h:64px;
  --edge:clamp(16px,4vw,40px);
  --max-w:1320px;
  --ease:200ms ease-out;
}

body{
  padding-top:var(--header-h);
  min-height:100vh;
  background-color:var(--indigo);
  background-image:
    linear-gradient(180deg,rgba(27,39,69,.92) 0,rgba(17,26,51,0) 460px),
    repeating-linear-gradient(90deg,rgba(154,168,195,.055) 0 1px,transparent 1px 96px);
  background-repeat:no-repeat,repeat;
  color:var(--paper-white);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-head);font-weight:900;letter-spacing:-.02em;line-height:1.08;color:var(--paper-white)}
h1{font-size:clamp(40px,7.4vw,96px);margin:0 0 .5em}
h2{font-size:clamp(26px,3.4vw,44px);margin:0 0 .6em}
h3{font-size:clamp(20px,2.2vw,28px);letter-spacing:-.01em;margin:0 0 .6em}
h4{font-size:18px;margin:0 0 .6em}
p{margin:0 0 1.1em}
a{color:var(--paper);text-decoration:underline;text-decoration-color:rgba(192,138,46,.55);text-underline-offset:3px}
a:hover{color:var(--ochre)}
strong{font-weight:700}
:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
::selection{background:var(--turquoise);color:var(--paper-white)}

.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;
  display:inline-block;padding:11px 18px;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-decoration:none;border:1px solid var(--ink);border-radius:2px;
  transform:translateY(-260%);
  transition:transform var(--ease);
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);color:var(--ink)}

.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--edge)}
.container--narrow{max-width:820px}
.section{padding-block:clamp(44px,7vw,96px)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper :is(h1,h2,h3,h4){color:var(--ink)}
.section--paper .eyebrow{color:#7B6B52}
.section--paper .lede{color:rgba(28,27,25,.76)}
.section--paper a{color:var(--crimson)}
.eyebrow{
  margin:0 0 14px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey-blue);
}
.section-title{margin:0 0 .5em;font-family:var(--font-head);font-weight:900;font-size:clamp(24px,3vw,40px);letter-spacing:-.02em;line-height:1.1}
.lede{max-width:62ch;font-size:clamp(16px,1.6vw,19px);line-height:1.75;color:rgba(251,246,236,.78)}
.grid{display:grid;gap:clamp(18px,3vw,40px)}
.grid--split{grid-template-columns:minmax(0,1fr)}
.grid--halves{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .grid--split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  .grid--halves{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============ header / rail ============ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;flex-wrap:wrap;align-items:center;
  height:var(--header-h);
  background:var(--indigo-2);
  border-bottom:1px solid var(--rule);
  color:var(--paper-white);
}
.site-header__flag{
  position:absolute;top:0;left:0;right:0;height:4px;z-index:2;
  background:linear-gradient(90deg,var(--crimson) 0 25%,var(--ochre) 25% 50%,var(--turquoise) 50% 75%,var(--mist) 75% 100%);
}
.site-header__brand{
  display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;
  padding:8px 12px 8px var(--edge);margin-top:4px;
  color:var(--paper-white);text-decoration:none;
}
.site-header__brand:hover{color:var(--paper-white)}
.brand-mark{
  position:relative;flex:0 0 auto;width:38px;height:38px;overflow:hidden;
  background:#0E1730;border:1px solid rgba(242,233,216,.5);border-radius:1px;
}
.brand-mark::before{
  content:"";position:absolute;inset:5px;
  background:linear-gradient(165deg,var(--crimson) 0 24%,var(--ochre) 24% 46%,var(--turquoise) 46% 68%,var(--mist) 68% 100%);
}
.brand-mark::after{
  content:"";position:absolute;inset:5px;
  background:repeating-linear-gradient(0deg,rgba(17,26,51,.62) 0 2px,transparent 2px 7px);
}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text__name{font-family:var(--font-head);font-weight:900;font-size:19px;line-height:1.15;letter-spacing:.05em}
.brand-text__meta{font-family:var(--font-mono);font-size:9.5px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase;color:var(--grey-blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header__toggle{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  flex:0 0 auto;min-height:44px;margin-right:var(--edge);
  padding:0 13px;
  background:rgba(17,26,51,.55);color:var(--paper-white);
  border:1px solid rgba(242,233,216,.32);border-radius:2px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color var(--ease),background var(--ease);
}
.site-header__toggle:hover{border-color:var(--ochre);background:rgba(192,138,46,.18)}
.site-header__bars{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:16px}
.site-header__bars i{display:block;height:1px;width:100%;background:currentColor;transition:transform var(--ease),opacity var(--ease)}
.site-header[data-open] .site-header__bars i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.site-header[data-open] .site-header__bars i:nth-child(2){opacity:0}
.site-header[data-open] .site-header__bars i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.site-nav{
  position:fixed;top:var(--header-h);left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  padding:18px var(--edge) 40px;
  background:var(--indigo-2);
  background-image:repeating-linear-gradient(90deg,rgba(154,168,195,.06) 0 1px,transparent 1px 72px);
  border-top:1px solid var(--rule);
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transform:translateY(-10px);
  transition:opacity var(--ease),transform var(--ease),visibility 0s linear 200ms;
}
.site-header[data-open] .site-nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.site-nav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.site-nav__item{border-bottom:1px solid var(--rule)}
.site-nav__link{
  display:flex;align-items:baseline;gap:14px;
  padding:15px 12px;
  color:var(--paper-white);text-decoration:none;
  border-left:3px solid transparent;
  transition:background var(--ease),border-color var(--ease),color var(--ease),transform var(--ease);
}
.site-nav__link:hover,.site-nav__link:focus-visible{background:rgba(242,233,216,.07);border-left-color:var(--turquoise);color:var(--paper-white);transform:translateX(2px)}
.site-nav__link[aria-current="page"]{background:var(--paper);color:var(--ink);border-left-color:var(--crimson)}
.site-nav__link[aria-current="page"] .site-nav__num{color:var(--crimson)}
.site-nav__link[aria-current="page"] .site-nav__label{color:var(--ink)}
.site-nav__num{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--grey-blue)}
.site-nav__label{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.02em}
.site-nav__foot{margin-top:auto;padding:22px 4px 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px}
.site-nav__note{margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--grey-blue)}
.site-nav__cta{width:100%}

@media (max-width:359px){
  .site-header__toggle-label{display:none}
  .brand-text__meta{display:none}
}

@media (min-width:1024px){
  body{padding-top:0;padding-left:var(--rail-w);transition:padding-left 220ms ease-out}
  .site-header{
    top:0;left:0;right:auto;bottom:0;
    width:var(--rail-w);height:auto;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;
    padding:22px 0 20px;
    border-bottom:0;border-right:1px solid var(--rule);
    transition:width 220ms ease-out;
  }
  .site-header__flag{
    top:0;bottom:0;right:0;left:auto;width:4px;height:auto;
    background:linear-gradient(180deg,var(--crimson) 0 25%,var(--ochre) 25% 50%,var(--turquoise) 50% 75%,var(--mist) 75% 100%);
  }
  .site-header__brand{
    flex:0 0 auto;margin:0 0 16px;padding:0 20px 20px;
    border-bottom:1px solid var(--rule);
  }
  .site-header__toggle{
    margin:0 12px 18px;min-height:40px;padding:0 10px;
    font-size:10px;letter-spacing:.18em;
  }
  .site-nav{
    position:static;flex:1 1 auto;
    top:auto;right:auto;bottom:auto;left:auto;
    padding:0 10px;
    background:transparent;background-image:none;border-top:0;
    visibility:visible;opacity:1;transform:none;overflow-y:auto;
    transition:none;
  }
  .site-nav__list{border-top:0}
  .site-nav__link{padding:12px 12px}
  .site-nav__label{font-size:16px}
  .site-nav__foot{padding:18px 4px 0}
  .site-nav__cta{width:auto}

  .site-header[data-collapsed] .brand-text,
  .site-header[data-collapsed] .site-nav__label,
  .site-header[data-collapsed] .site-nav__note,
  .site-header[data-collapsed] .site-nav__cta,
  .site-header[data-collapsed] .site-header__toggle-label{display:none}
  .site-header[data-collapsed] .site-header__brand{justify-content:center;padding-inline:0}
  .site-header[data-collapsed] .site-header__toggle{margin-inline:8px;padding-inline:0}
  .site-header[data-collapsed] .site-nav{padding-inline:6px}
  .site-header[data-collapsed] .site-nav__link{justify-content:center;padding-inline:0;border-left-width:0}
  .site-header[data-collapsed] .site-nav__num{font-size:12px;color:var(--paper-white)}
  .site-header[data-collapsed] .site-nav__link[aria-current="page"] .site-nav__num{color:var(--crimson)}
  .site-header[data-collapsed] .site-nav__foot{border-top:0;padding-top:0}
}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 22px;
  background:transparent;color:var(--paper-white);
  border:1px solid var(--rule-strong);border-radius:2px;
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.04em;
  text-decoration:none;cursor:pointer;
  transition:background var(--ease),color var(--ease),border-color var(--ease),transform var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--flag{background:var(--turquoise);border-color:var(--turquoise);color:var(--paper-white)}
.btn--flag:hover{background:#2A6F69;border-color:#2A6F69;color:var(--paper-white)}
.btn--paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn--paper:hover{background:var(--paper-white);border-color:var(--paper-white);color:var(--ink)}
.btn--ghost{background:transparent;border-color:var(--rule-strong);color:var(--paper-white)}
.btn--ghost:hover{border-color:var(--ochre);color:var(--ochre)}
.btn--block{display:flex;width:100%}

/* ============ breadcrumbs ============ */
.breadcrumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-block:18px 0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--grey-blue);
}
.breadcrumbs__link{color:var(--grey-blue);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--ease),border-color var(--ease)}
.breadcrumbs__link:hover{color:var(--paper-white);border-bottom-color:var(--ochre)}
.breadcrumbs__sep{color:rgba(154,168,195,.5)}
.breadcrumbs__current{color:var(--paper-white)}

/* ============ tags / chips ============ */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--paper);border-radius:2px;
  font-family:var(--font-mono);font-size:11px;line-height:1.5;
  letter-spacing:.12em;text-transform:uppercase;
}
.tag--crimson{background:var(--crimson);border-color:var(--crimson);color:var(--paper-white)}
.tag--ochre{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
.tag--turquoise{background:var(--turquoise);border-color:var(--turquoise);color:var(--paper-white)}
.tag--mist{background:var(--mist);border-color:var(--mist);color:var(--paper-white)}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;
  background:transparent;color:var(--paper-white);
  border:1px solid var(--rule-strong);border-radius:2px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;
  text-decoration:none;cursor:pointer;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.chip:hover{border-color:var(--turquoise);color:var(--paper-white)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--turquoise);border-color:var(--turquoise);color:var(--paper-white)}

/* ============ ticker 数据经幡 ============ */
.ticker{
  position:relative;overflow:hidden;padding:12px 0;
  border-block:1px solid var(--rule);
  background:linear-gradient(90deg,rgba(163,58,63,.14),rgba(192,138,46,.1) 35%,rgba(47,127,120,.14) 70%,rgba(110,90,126,.14));
}
.ticker__track{display:flex;width:max-content;animation:ticker-scroll 60s linear infinite}
.ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused}
.ticker__item{
  display:flex;align-items:baseline;gap:10px;
  padding:0 26px;border-right:1px solid var(--rule);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey-blue);white-space:nowrap;
}
.ticker__value{font-family:var(--font-mono);font-weight:700;font-size:20px;letter-spacing:.08em;color:var(--ochre)}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ media frame ============ */
.media-frame{
  position:relative;overflow:hidden;
  padding:8px;
  background:var(--indigo-2);
  border:1px solid var(--rule);border-radius:2px;
}
.media-frame::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(154,168,195,.09) 0 1px,transparent 1px 28px);
}
.media-frame__img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:linear-gradient(140deg,var(--indigo-2),#243357 58%,var(--mist));
}
.media-frame--wide .media-frame__img{aspect-ratio:21/9}
.media-frame--square .media-frame__img{aspect-ratio:1/1}
.media-frame__caption{
  margin:8px 2px 0;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--grey-blue);
}
.section--paper .media-frame{background:var(--paper-white);border-color:var(--paper-rule)}
.section--paper .media-frame__caption{color:#7B6B52}

/* ============ cards ============ */
.card{
  padding:clamp(20px,2.6vw,32px);
  background:rgba(27,39,69,.72);
  border:1px solid var(--rule);border-radius:2px;
  transition:border-color var(--ease),transform var(--ease),background var(--ease);
}
.card:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
.card--paper{background:var(--paper);border-color:var(--paper-rule);color:var(--ink)}
.card--paper :is(h2,h3,h4){color:var(--ink)}

/* ============ prose ============ */
.prose{max-width:72ch;font-size:17px;line-height:1.8;color:var(--ink)}
.prose h2{font-size:clamp(22px,2.4vw,30px);margin:1.8em 0 .6em;color:var(--ink)}
.prose h3{margin:1.6em 0 .5em;color:var(--ink)}
.prose p{margin:0 0 1.2em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.2em}
.prose li{margin-bottom:.5em}
.prose hr{border:0;border-top:1px solid var(--paper-rule);margin:2em 0}
.prose code{font-family:var(--font-mono);font-size:.92em;background:rgba(28,27,25,.08);padding:.1em .35em;border-radius:2px}
.prose a{color:var(--crimson)}

/* ============ footer ============ */
.site-footer{
  position:relative;
  margin-top:clamp(48px,8vw,120px);
  background:var(--deep);
  border-top:1px solid var(--rule);
  color:var(--paper-white);
}
.site-footer__flag{
  position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--crimson) 0 25%,var(--ochre) 25% 50%,var(--turquoise) 50% 75%,var(--mist) 75% 100%);
}
.site-footer__inner{
  max-width:var(--max-w);margin-inline:auto;
  padding:clamp(36px,5vw,64px) var(--edge) clamp(24px,3vw,38px);
  display:grid;gap:clamp(24px,3.4vw,48px);
  grid-template-columns:minmax(0,1fr);
}
.site-footer__inner .footer-col{padding-top:4px}
@media (min-width:700px){
  .site-footer__inner{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .site-footer__inner{grid-template-columns:1.5fr .8fr .8fr 1.3fr;align-items:start}
}
.footer-brand{max-width:40ch}
.footer-brand__name{margin:0 0 10px;font-family:var(--font-head);font-weight:900;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.03em;color:var(--paper-white)}
.footer-brand__meta{margin:0 0 14px;font-size:14px;line-height:1.7;color:var(--grey-blue)}
.footer-brand__domain{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--ochre)}
.footer-col{min-width:0}
.footer-col--contact{max-width:34ch}
.footer-col__title{
  margin:0 0 14px;
  font-family:var(--font-mono);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey-blue);
}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-link{
  color:var(--paper-white);text-decoration:none;font-size:15px;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color var(--ease),border-color var(--ease);
}
.footer-link:hover{color:var(--ochre);border-bottom-color:var(--ochre)}
.footer-contact{margin:0 0 14px;display:grid;gap:8px}
.footer-contact__row{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:baseline;
  padding-bottom:6px;border-bottom:1px dotted rgba(154,168,195,.28);
}
.footer-contact__k{margin:0;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey-blue)}
.footer-contact__v{margin:0;font-family:var(--font-mono);font-size:13px;letter-spacing:.03em;color:var(--paper-white);word-break:break-word}
.footer-note{margin:0;font-size:12.5px;line-height:1.7;color:rgba(154,168,195,.9)}
.site-footer__bottom{
  max-width:var(--max-w);margin-inline:auto;
  padding:16px var(--edge) 28px;
  border-top:1px solid rgba(154,168,195,.18);
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;
}
.footer-legal{margin:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--grey-blue)}
.footer-legal--icp{color:rgba(154,168,195,.86)}

/* ============ progress / to-top ============ */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:110;
  background:rgba(154,168,195,.14);pointer-events:none;
}
.scroll-progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--turquoise),var(--ochre));
  transition:width 90ms linear;
}
.to-top{
  position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:105;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--paper-rule);border-radius:2px;
  font-family:var(--font-mono);font-size:16px;line-height:1;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--ease),transform var(--ease),background var(--ease),visibility 0s linear 200ms;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top:hover{background:var(--ochre);border-color:var(--ochre);color:var(--ink)}
@media (min-width:1024px){
  .scroll-progress{z-index:90}
}

/* ============ reveal ============ */
html.js-reveal [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 420ms ease-out,transform 420ms ease-out}
html.js-reveal [data-reveal].is-revealed{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .site-header,.site-nav,.to-top,.scroll-progress__bar,.site-header__bars i{transition:none !important;transform:none !important}
  html.js-reveal [data-reveal]{opacity:1;transform:none}
  .ticker__track{animation:none;width:auto;flex-wrap:wrap}
  .ticker__item{border-right:0}
}