*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg,picture{display:block;max-width:100%}
main{display:block}

:root{
  --ink:#081726;
  --panel:#0F2238;
  --grid:#1D3550;
  --grid-strong:#2B4A6B;
  --signal:#FF6A2A;
  --cyan:#32F0CF;
  --paper:#F4F1E8;
  --mist:#A7B8CC;
  --mist-strong:#CBD8E6;
  --alert:#FF4D6D;

  --font-display:"Barlow Condensed","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-serif:"Noto Serif SC","Songti SC",Georgia,serif;
  --font-body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Source Han Mono SC",Consolas,"Liberation Mono",monospace;

  --step-h1:clamp(40px,6vw,88px);
  --step-h2:clamp(28px,3.4vw,48px);
  --step-h3:clamp(20px,2vw,28px);
  --step-body:clamp(16px,1.05vw,18px);

  --frame-max:1440px;
  --gutter:clamp(16px,3vw,40px);
  --grid-gap:24px;
  --rail:112px;

  --dur:180ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:var(--step-body);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#main-content{display:block;scroll-margin-top:104px}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.005em;
}
h1{font-size:var(--step-h1)}
h2{font-size:var(--step-h2)}
h3{font-size:var(--step-h3)}
h4{font-size:clamp(17px,1.5vw,21px);line-height:1.3}

/* ---------- utilities ---------- */
.wrap{width:100%;max-width:var(--frame-max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:.06em}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.divider{display:block;height:1px;width:100%;background:var(--grid);border:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;color:var(--mist)}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--signal);flex:0 0 auto}
.section-label{display:inline-block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;color:var(--signal)}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.85;color:var(--mist-strong);max-width:44ch}

.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}
.span-8{grid-column:span 8}
.span-9{grid-column:span 9}
.span-12{grid-column:span 12}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border:1px solid transparent;border-radius:0;
  font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.2;letter-spacing:.02em;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn--signal{background:var(--signal);color:var(--ink)}
.btn--signal:hover{background:var(--paper);color:var(--ink)}
.btn--ghost{border-color:var(--grid);color:var(--paper)}
.btn--ghost:hover{border-color:var(--signal);color:var(--signal)}
.btn__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:.85}

/* ---------- tags & status ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--grid);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--mist)}
.tag--signal{border-color:var(--signal);color:var(--signal)}
.tag--cyan{border-color:var(--cyan);color:var(--cyan)}
.status-dot{display:inline-block;width:7px;height:7px;background:var(--cyan);box-shadow:0 0 0 3px rgba(50,240,207,.16)}
.status-dot--signal{background:var(--signal);box-shadow:0 0 0 3px rgba(255,106,42,.18)}
.status-dot--alert{background:var(--alert);box-shadow:0 0 0 3px rgba(255,77,109,.18)}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--grid);padding:clamp(18px,2.4vw,28px)}
.panel--tight{padding:14px 16px}

/* ---------- media ---------- */
.media-frame{position:relative;display:block;width:100%;overflow:hidden;background:var(--panel);border:1px solid var(--grid)}
.media-frame picture,.media-frame img,.media-frame svg{display:block;width:100%;height:100%}
.media-frame img{object-fit:cover}
.media-frame--contain img{object-fit:contain}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--21x9{aspect-ratio:21/9}
.media-frame__caption{position:absolute;left:0;bottom:0;max-width:100%;padding:6px 10px;background:rgba(8,23,38,.86);border-top:1px solid var(--grid);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--mist)}
.media-frame__badge{position:absolute;top:0;left:0;padding:4px 8px;background:var(--signal);color:var(--ink);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em}

/* ---------- breadcrumb ---------- */
.breadcrumb{max-width:var(--frame-max);margin:0 auto;padding:12px var(--gutter);border-bottom:1px solid var(--grid)}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--mist)}
.breadcrumb__list li{display:flex;align-items:center;gap:8px}
.breadcrumb__list li+li::before{content:"/";color:var(--grid-strong)}
.breadcrumb__link{color:var(--mist);transition:color var(--dur) var(--ease)}
.breadcrumb__link:hover{color:var(--cyan)}
.breadcrumb__list [aria-current="page"]{color:var(--paper)}

/* ---------- toc & status rail ---------- */
.toc{position:sticky;top:112px;align-self:start}
.toc__title{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;color:var(--mist);padding-bottom:10px;border-bottom:1px solid var(--grid);margin-bottom:6px}
.toc__list{display:grid}
.toc__link{display:flex;gap:10px;padding:9px 0;font-size:13.5px;color:var(--mist);border-bottom:1px solid rgba(29,53,80,.65);transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.toc__link:hover{color:var(--paper);padding-left:4px}
.toc__link.is-active{color:var(--paper);padding-left:4px}
.toc__num{font-family:var(--font-mono);font-size:11px;color:var(--signal);opacity:.55;min-width:22px}
.toc__link.is-active .toc__num{opacity:1}

.status-rail{position:sticky;top:120px;align-self:start;display:grid;gap:2px;border-left:1px solid var(--grid);padding-left:12px}
.status-rail__item{display:block;padding:8px 0;border-bottom:1px solid rgba(29,53,80,.6);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--mist);opacity:.5;transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease)}
.status-rail__item:hover{opacity:.9}
.status-rail__item.is-active{opacity:1;color:var(--cyan)}
.status-rail__label{display:block;color:inherit}

/* ---------- to top ---------- */
.to-top{
  position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);z-index:80;
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;
  background:var(--panel);border:1px solid var(--grid);color:var(--paper);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  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),color var(--dur) var(--ease);
}
.to-top[data-visible="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{border-color:var(--signal);color:var(--signal)}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:var(--gutter);top:8px;z-index:200;
  transform:translateY(-180%);
  padding:10px 16px;background:var(--signal);color:var(--ink);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  transition:transform var(--dur) var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--ink);
  border-bottom:1px solid var(--grid);
}
.header-rail{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;
  padding:6px var(--gutter);min-height:34px;
  background:#061320;
  border-bottom:1px solid var(--grid);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--mist);
}
.header-rail__mark{color:var(--signal);letter-spacing:.16em}
.header-rail__edition{color:var(--mist-strong)}
.rail-nav{display:flex;gap:16px;margin-left:auto}
.rail-nav__link{color:var(--mist);padding-bottom:2px;border-bottom:1px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.rail-nav__link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.header-rail__contact{color:var(--mist);opacity:.85;padding-left:18px;border-left:1px solid var(--grid)}

.header-body{
  position:relative;
  display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  max-width:var(--frame-max);margin:0 auto;
  padding:12px var(--gutter);
}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand__mark{
  display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--signal);color:var(--signal);
  font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:.08em;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.brand:hover .brand__mark{background:var(--signal);color:var(--ink)}
.brand__text{display:grid;line-height:1.2}
.brand__name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.02em;color:var(--paper)}
.brand__sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--mist)}

.nav-toggle{
  display:inline-flex;align-items:center;gap:9px;margin-left:auto;
  padding:10px 14px;border:1px solid var(--grid);color:var(--paper);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-toggle:hover{border-color:var(--signal);color:var(--signal)}
.nav-toggle__glyph{position:relative;width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.nav-toggle__glyph::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:currentColor;transform:translateY(-50%)}
.nav-toggle__text{line-height:1}

.site-nav{
  position:absolute;left:0;right:0;top:100%;z-index:5;
  display:none;
  background:var(--panel);
  border-top:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
  padding:4px var(--gutter) 16px;
  max-height:calc(100vh - 96px);
  overflow-y:auto;
}
.site-header[data-open] .site-nav{display:block}
.site-header[data-open] .nav-toggle{border-color:var(--signal);color:var(--signal)}
.site-nav__list{display:flex;flex-direction:column}
.site-nav__link{
  position:relative;display:flex;align-items:center;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--grid);
  font-size:16px;font-weight:500;color:var(--mist);
  transition:color var(--dur) var(--ease);
}
.site-nav__num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--signal);opacity:.7;min-width:24px}
.site-nav__link:hover{color:var(--paper)}
.site-nav__link[aria-current="page"]{color:var(--signal)}
.site-nav__link[aria-current="page"] .site-nav__num{opacity:1}
.header-action{display:none}
.header-progress{height:2px;background:transparent;overflow:hidden}
.header-progress__bar{display:block;height:100%;width:0;background:var(--signal);transition:width 120ms linear}

@media (min-width:900px){
  .site-header{position:sticky}
  .nav-toggle{display:none}
  .site-nav{
    position:static;display:block;flex:1 1 auto;
    background:none;border:0;padding:0;max-height:none;overflow:visible;
  }
  .site-nav__list{flex-direction:row;align-items:stretch;justify-content:flex-end;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .site-nav__list::-webkit-scrollbar{display:none}
  .site-nav__link{
    display:inline-flex;align-items:baseline;gap:6px;
    padding:10px 12px;border-bottom:0;font-size:14.5px;white-space:nowrap;
  }
  .site-nav__link::after{
    content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
    background:var(--signal);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur) var(--ease);
  }
  .site-nav__link:hover::after{transform:scaleX(1)}
  .site-nav__link[aria-current="page"]{color:var(--paper)}
  .site-nav__link[aria-current="page"]::after{transform:scaleX(1)}
  .site-nav__link[aria-current="page"] .site-nav__num{opacity:1}
  .header-body{padding-block:14px}
}
@media (min-width:1200px){
  .header-action{display:block;margin-left:6px}
}
@media (max-width:1023px){
  .header-rail__contact{display:none}
}
@media (max-width:639px){
  .header-rail{font-size:10.5px;gap:4px 12px}
  .header-rail__edition{display:none}
  .rail-nav{margin-left:auto}
  .brand__mark{width:34px;height:34px;font-size:14px}
  .brand__name{font-size:17px}
  .brand__sub{font-size:9px;letter-spacing:.12em}
}

/* ---------- footer ---------- */
.site-footer{
  margin-top:clamp(48px,8vw,120px);
  background:var(--ink);
  border-top:1px solid var(--grid);
}
.footer-frame{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:clamp(24px,4vw,56px);
  max-width:var(--frame-max);margin:0 auto;
  padding:clamp(32px,5vw,64px) var(--gutter) clamp(28px,4vw,48px);
}
.footer-brand__name{
  display:inline-block;
  font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.02em;color:var(--paper);
  padding-bottom:5px;border-bottom:2px solid var(--signal);
}
.footer-brand__summary{margin-top:16px;max-width:36ch;font-size:14.5px;line-height:1.8;color:var(--mist)}
.footer-brand__meta{margin-top:18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:var(--mist);opacity:.85}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.footer-col__title{
  font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  color:var(--signal);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--grid);
}
.footer-col__list{display:grid;gap:2px}
.footer-link{display:inline-block;padding:7px 0;font-size:14.5px;color:var(--mist);transition:color var(--dur) var(--ease)}
.footer-link:hover{color:var(--cyan)}
.footer-contact__list{display:grid;gap:10px}
.footer-contact__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline;padding-bottom:9px;border-bottom:1px solid var(--grid)}
.footer-contact__row dt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;color:var(--mist);white-space:nowrap}
.footer-contact__row dd{font-size:14px;color:var(--paper);word-break:break-word}
.footer-contact__row dd .mono{font-size:12.5px}
.footer-contact__note{margin-top:14px;font-size:12.5px;line-height:1.7;color:var(--mist)}
.footer-legal{
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;
  max-width:var(--frame-max);margin:0 auto;padding:16px var(--gutter) 22px;
  border-top:1px solid var(--grid);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;color:var(--mist);
}
.footer-legal__meta{opacity:.7}
@media (max-width:1023px){
  .footer-frame{grid-template-columns:1fr 1fr;gap:32px}
  .footer-contact{grid-column:1 / -1}
}
@media (max-width:639px){
  .footer-frame{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr 1fr}
  .footer-legal{font-size:10.5px;justify-content:flex-start}
}

/* ---------- responsive grid ---------- */
@media (max-width:899px){
  .grid-12{grid-template-columns:1fr}
  .span-4,.span-5,.span-6,.span-7,.span-8,.span-9,.span-12{grid-column:1 / -1}
  .toc{position:static;top:auto}
  .status-rail{position:static;top:auto;border-left:0;padding-left:0;grid-auto-flow:column;overflow-x:auto}
  .status-rail__item{border-bottom:0;border-right:1px solid var(--grid);padding:6px 12px 6px 0;white-space:nowrap}
}
@media (max-width:599px){
  .media-frame--21x9{aspect-ratio:16/9}
  .lead{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .header-progress__bar{transition:none}
  .to-top{transition:none}
}