*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0}
ul[class],ol[class],nav ul,footer ul{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}
:root{
  --bg-deep:#050B1A;
  --bg-mid:#0A1630;
  --bg-console:#102448;
  --cyan:#19F5D0;
  --cyan-dim:#0E8F82;
  --lava:#FF5A2A;
  --ice:#E8F4FF;
  --steel:#8BA3C7;
  --edge:#1C3E6B;
  --edge-lit:#2E5B96;
  --font-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --font-mono:"JetBrains Mono","Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shell:min(1320px,92vw);
  --gap:clamp(16px,2.2vw,30px);
  --pad-block:clamp(48px,7vw,110px);
  --shadow-hard:8px 8px 0 rgba(3,7,16,.9);
  --ease-out:cubic-bezier(.2,.8,.2,1);
}
html{scroll-padding-top:96px}
body{
  min-height:100vh;
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  color:var(--ice);
  background-color:var(--bg-deep);
  background-image:
    linear-gradient(rgba(28,62,107,.26) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,62,107,.26) 1px,transparent 1px),
    radial-gradient(60% 42% at 12% 0%,rgba(25,245,208,.10),transparent 62%),
    radial-gradient(52% 38% at 92% 4%,rgba(255,90,42,.07),transparent 66%);
  background-size:96px 96px,96px 96px,100% 820px,100% 820px;
  background-repeat:repeat,repeat,no-repeat,no-repeat;
  background-position:0 0,0 0,center top,center top;
  overflow-x:hidden;
}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:var(--cyan);color:var(--bg-deep)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.label{
  display:block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
}
.shell{width:var(--shell);margin-inline:auto}
.shell--narrow{width:min(880px,92vw);margin-inline:auto}
.section{padding-block:var(--pad-block)}
.section__head{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  padding-top:18px;
  margin-bottom:clamp(24px,3.4vw,48px);
  border-top:2px solid var(--edge);
}
.section__kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.section__title{
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:900;
  font-style:italic;
  letter-spacing:-.02em;
  line-height:1.12;
  color:var(--ice);
}
.section__title em{font-style:inherit;color:var(--cyan)}
.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--asym{grid-template-columns:1fr}
@media (min-width:760px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--asym{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .section__head{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:2rem}
}
.panel{
  position:relative;
  background:var(--bg-mid);
  border:2px solid var(--edge);
  padding:clamp(18px,2.4vw,30px);
}
.panel--console{background:var(--bg-console)}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:var(--bg-mid);
  border:2px solid var(--edge);
  padding:clamp(18px,2.2vw,28px);
  transition:transform .24s var(--ease-out),border-color .24s var(--ease-out),box-shadow .24s var(--ease-out);
}
.card:hover{transform:translate(-3px,-3px);border-color:var(--cyan-dim);box-shadow:var(--shadow-hard)}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.45em;
  padding:.36em .7em;
  border:1px solid var(--edge-lit);
  background:rgba(16,36,72,.65);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
}
.tag--live{border-color:var(--lava);color:var(--lava)}
.tag--active{border-color:var(--cyan);color:var(--cyan);background:rgba(25,245,208,.10)}
.stat{display:flex;flex-direction:column;gap:6px}
.stat__key{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--steel);
}
.stat__value{
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:700;
  line-height:1;
  color:var(--cyan);
  font-variant-numeric:tabular-nums;
}
.rule{height:2px;border:0;background:var(--edge);width:100%}
.prose{max-width:72ch;font-size:1rem;line-height:1.78;color:#CFE0F5}
.prose>*+*{margin-top:1.1em}
.prose h2,.prose h3{font-weight:800;letter-spacing:-.01em;color:var(--ice);line-height:1.3}
.prose h2{font-size:1.5rem}
.prose h3{font-size:1.15rem}
.prose a{color:var(--cyan);border-bottom:1px solid rgba(25,245,208,.4)}
.prose a:hover{border-bottom-color:var(--cyan)}
.prose ul,.prose ol{padding-left:1.3em;list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:.5em}
.prose strong{color:var(--ice)}
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.55em;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
  margin-bottom:clamp(18px,2.4vw,30px);
}
.breadcrumb a{color:var(--steel);transition:color .2s var(--ease-out)}
.breadcrumb a:hover{color:var(--cyan)}
.breadcrumb li{display:flex;align-items:center;gap:.55em}
.breadcrumb li+li::before{content:"/";color:var(--edge-lit)}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  padding:.72em 1.15em;
  border:2px solid var(--edge);
  background:var(--bg-console);
  color:var(--ice);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  line-height:1;
  white-space:nowrap;
  transition:transform .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out),background-color .2s var(--ease-out);
}
.btn:hover{transform:translate(-2px,-2px);border-color:var(--cyan);color:var(--cyan);box-shadow:4px 4px 0 rgba(25,245,208,.22)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn--lava{
  background:var(--lava);
  border-color:var(--lava);
  color:#150500;
  font-weight:800;
}
.btn--lava:hover{background:#FF7A50;border-color:#FF7A50;color:#150500;box-shadow:4px 4px 0 rgba(255,90,42,.3)}
.btn--ghost{background:transparent;border-color:var(--edge-lit);color:var(--steel)}
.btn--ghost:hover{color:var(--cyan);border-color:var(--cyan);background:rgba(25,245,208,.07)}
.frame{
  position:relative;
  display:block;
  overflow:hidden;
  border:2px solid var(--edge);
  background:
    linear-gradient(135deg,var(--bg-mid) 0%,var(--bg-console) 100%);
}
.frame::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(28,62,107,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,62,107,.55) 1px,transparent 1px);
  background-size:32px 32px;
  opacity:.55;
}
.frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}
.frame--16x9{aspect-ratio:16/9}
.frame--4x3{aspect-ratio:4/3}
.frame--1x1{aspect-ratio:1/1}
.frame--banner{aspect-ratio:21/9}
.frame--cut{clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%)}
.frame__tag{
  position:absolute;
  z-index:3;
  left:0;
  bottom:0;
  padding:.4em .8em;
  background:var(--cyan);
  color:var(--bg-deep);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.figcaption{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--steel);
}
.js-reveal [data-reveal]{opacity:0;transform:translateY(18px)}
.js-reveal [data-reveal].is-visible{
  opacity:1;
  transform:none;
  transition:opacity .42s ease-out,transform .42s var(--ease-out);
}
/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(5,11,26,.94);
  border-bottom:2px solid var(--edge);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transition:box-shadow .24s var(--ease-out);
}
.site-header.is-scrolled{box-shadow:0 14px 34px rgba(3,7,16,.7)}
.skip-link{
  position:absolute;
  left:14px;
  top:-120px;
  z-index:90;
  padding:.7em 1.1em;
  background:var(--cyan);
  color:var(--bg-deep);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  transition:top .18s var(--ease-out);
}
.skip-link:focus{top:12px}
.cmdbar{
  width:var(--shell);
  margin-inline:auto;
  min-height:66px;
  display:flex;
  align-items:stretch;
  gap:clamp(10px,1.6vw,24px);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding-block:10px;
  min-width:0;
}
.brand__mark{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  background:var(--cyan);
  color:var(--bg-deep);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  transform:skewX(-9deg);
  box-shadow:4px 4px 0 rgba(14,143,130,.55);
}
.brand__text{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.brand__name{font-size:1.05rem;font-weight:800;letter-spacing:.02em;color:var(--ice)}
.brand__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--steel);
}
.nav-toggle{
  display:none;
  align-items:center;
  gap:.55em;
  padding:.55em .85em;
  border:2px solid var(--edge);
  background:var(--bg-console);
  color:var(--ice);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.nav-toggle:hover{border-color:var(--cyan);color:var(--cyan)}
.nav-toggle__bars{
  display:block;
  width:16px;
  height:8px;
  background:
    linear-gradient(var(--cyan),var(--cyan)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--cyan),var(--cyan)) 0 100%/100% 2px no-repeat;
  transition:transform .2s var(--ease-out),background-image .2s var(--ease-out);
}
.site-nav{margin-left:auto;display:flex;align-items:stretch}
.site-nav__list{display:flex;align-items:stretch;gap:0}
.site-nav__list li{display:flex;min-width:0}
.site-nav__list a{
  position:relative;
  display:flex;
  align-items:center;
  gap:.5em;
  height:100%;
  padding:0 clamp(8px,1vw,16px);
  border-left:1px solid rgba(28,62,107,.75);
  font-size:.875rem;
  font-weight:500;
  color:var(--steel);
  white-space:nowrap;
  transition:color .2s var(--ease-out),background-color .2s var(--ease-out);
}
.site-nav__list li:last-child a{border-right:1px solid rgba(28,62,107,.75)}
.site-nav__list a::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:3px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .24s var(--ease-out);
}
.site-nav__list a:hover{color:var(--ice);background:rgba(16,36,72,.6)}
.site-nav__list a:hover::after{transform:scaleX(1)}
.site-nav__list a[aria-current="page"]{
  color:var(--cyan);
  background:linear-gradient(180deg,rgba(25,245,208,0) 0%,rgba(25,245,208,.12) 100%);
}
.site-nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav__idx{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--edge-lit);
  font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease-out);
}
.site-nav__list a:hover .site-nav__idx{color:var(--cyan)}
.site-nav__list a[aria-current="page"] .site-nav__idx{color:var(--lava)}
.site-nav__label{display:inline-block}
.cmdbar__action{display:flex;align-items:center;padding-block:10px}
.scroll-progress{
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg,var(--cyan) 0%,var(--lava) 100%);
  pointer-events:none;
}
/* ---------- footer ---------- */
.site-footer{
  position:relative;
  margin-top:clamp(56px,8vw,120px);
  border-top:2px solid var(--edge);
  background:linear-gradient(180deg,var(--bg-mid) 0%,var(--bg-deep) 72%);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-2px;
  left:0;
  width:clamp(80px,18vw,220px);
  height:2px;
  background:var(--cyan);
}
.footer__shell{
  width:var(--shell);
  margin-inline:auto;
  padding-top:clamp(34px,5vw,72px);
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3vw,44px);
}
.footer__brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.footer__note{font-size:.95rem;line-height:1.7;color:var(--steel);max-width:36ch}
.footer__tags{display:flex;flex-wrap:wrap;gap:8px}
.footer__title{
  margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
}
.footer__list{display:flex;flex-direction:column;gap:10px}
.footer__link{
  display:inline-flex;
  font-size:.95rem;
  color:var(--steel);
  transition:color .2s var(--ease-out),transform .2s var(--ease-out);
}
.footer__link:hover{color:var(--cyan);transform:translateX(4px)}
.footer__contact{display:flex;flex-direction:column;gap:14px}
.footer__contact li{display:flex;flex-direction:column;gap:3px}
.footer__value{
  font-size:.92rem;
  line-height:1.6;
  color:var(--ice);
  overflow-wrap:anywhere;
}
.footer__bottom{
  margin-top:clamp(32px,4vw,56px);
  padding-block:20px clamp(20px,3vw,32px);
  border-top:1px solid var(--edge);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
}
.footer__meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--steel);
}
.footer__meta--right{color:var(--edge-lit)}
@media (min-width:680px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1040px){
  .footer__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
}
/* ---------- responsive nav ---------- */
@media (max-width:960px){
  body{background-size:72px 72px,72px 72px,100% 620px,100% 620px}
  .cmdbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand toggle"
      "nav nav"
      "action action";
    align-items:center;
    gap:10px;
    padding-block:10px;
    min-height:0;
  }
  .brand{grid-area:brand;padding-block:0}
  .nav-toggle{grid-area:toggle;display:inline-flex;justify-self:end}
  .cmdbar__action{grid-area:action;padding-block:0;display:block}
  .cmdbar__action .btn{width:100%;font-size:11px;padding:.6em .8em;letter-spacing:.14em}
  .site-nav{
    grid-area:nav;
    margin-left:0;
    display:block;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    border-top:2px solid transparent;
    transition:max-height .32s var(--ease-out),opacity .22s ease-out,border-color .22s var(--ease-out);
  }
  .site-header[data-open] .site-nav{
    max-height:82vh;
    overflow-y:auto;
    opacity:1;
    border-top-color:var(--edge);
  }
  .site-nav__list{flex-direction:column;align-items:stretch;padding-block:6px}
  .site-nav__list li{display:block}
  .site-nav__list a{
    height:auto;
    padding:13px 6px;
    border-left:0;
    border-bottom:1px solid rgba(28,62,107,.7);
    font-size:1rem;
  }
  .site-nav__list li:last-child a{border-right:0}
  .site-nav__list a::after{left:0;right:auto;width:44px}
  .site-nav__list a[aria-current="page"]{
    background:rgba(25,245,208,.09);
  }
  .site-header[data-open] .nav-toggle__bars{
    background-image:
      linear-gradient(var(--lava),var(--lava)),
      linear-gradient(var(--lava),var(--lava));
    transform:scaleX(.72);
  }
}
@media (max-width:420px){
  .brand__mark{width:32px;height:32px;font-size:12px}
  .brand__name{font-size:.95rem}
  .brand__meta{font-size:10px;letter-spacing:.12em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .card:hover,.btn:hover{transform:none}
}