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

:root{
  --bg-main:#0B1026;
  --bg-deep:#05070D;
  --bg-card:#141B33;
  --line:#28345B;
  --text:#FFFFFF;
  --text-dim:#A6B3D1;
  --green:#00FF66;
  --orange:#FF6E00;
  --cyan:#00D4FF;
  --amber:#FFB340;
  --rail-width:280px;
  --container-max:1400px;
  --font-head:'Poppins','Helvetica Neue','PingFang SC','Noto Sans SC',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-data:'JetBrains Mono','Courier New',monospace;
  --transition:200ms ease;
  --header-z:100
}

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  line-height:1.6;
  color:var(--text);
  background:var(--bg-main);
  min-height:100vh;
  -webkit-font-smoothing:antialiased
}

h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--text)
}

h1{font-size:clamp(2.4rem,6vw,4.5rem)}
h2{font-size:clamp(1.6rem,3vw,2.4rem)}
h3{font-size:1.25rem}

p{margin-bottom:1rem}

a{
  color:var(--green);
  text-decoration:none
}
a:hover{color:var(--orange)}
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:2px
}

button{font:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}

#main-content{display:block;min-height:70vh}

@media (min-width:900px){
  body{margin-left:var(--rail-width)}
}

.container{
  width:min(100%,var(--container-max));
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem)
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:64px;
  background:var(--bg-deep);
  border-bottom:1px solid var(--line);
  z-index:var(--header-z)
}

.skip-link{
  position:absolute;
  top:0.75rem;
  left:0.75rem;
  z-index:220;
  background:var(--green);
  color:var(--bg-deep);
  padding:0.6rem 0.9rem;
  font-weight:700;
  transform:translateY(-300%);
  transition:transform 150ms ease
}
.skip-link:focus{
  transform:translateY(0);
  color:var(--bg-deep)
}

.site-header__inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 1rem
}

.site-brand{
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-shrink:0
}

.site-brand__mark{
  width:38px;
  height:38px;
  background:var(--green);
  color:var(--bg-deep);
  display:grid;
  place-items:center;
  font-family:var(--font-data);
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:-0.02em;
  clip-path:polygon(0 0,100% 0,100% 70%,70% 100%,0 100%)
}

.site-brand__name{
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:-0.02em;
  color:var(--text)
}

.site-nav-toggle{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  color:var(--text);
  padding:0.4rem
}

.site-nav-toggle__line{
  position:relative;
  width:24px;
  height:2px;
  background:currentColor;
  transition:background 150ms ease
}
.site-nav-toggle__line::before,
.site-nav-toggle__line::after{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform 150ms ease,top 150ms ease
}
.site-nav-toggle__line::before{top:-8px}
.site-nav-toggle__line::after{top:8px}

.site-nav-toggle__label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

.site-nav{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:min(84vw,320px);
  background:var(--bg-deep);
  border-right:1px solid var(--line);
  padding:5.5rem 1.25rem 2rem;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  transform:translateX(-100%);
  visibility:hidden;
  transition:transform 220ms ease,visibility 220ms linear
}

.site-header[data-open] .site-nav{
  transform:translateX(0);
  visibility:visible
}

.site-header[data-open] .site-nav-toggle__line{
  background:transparent
}
.site-header[data-open] .site-nav-toggle__line::before{
  top:0;
  transform:rotate(45deg)
}
.site-header[data-open] .site-nav-toggle__line::after{
  top:0;
  transform:rotate(-45deg)
}

.site-nav__link{
  padding:0.75rem 0.5rem;
  color:var(--text-dim);
  font-weight:700;
  border-left:2px solid transparent;
  transition:color 150ms ease,background 150ms ease,border-color 150ms ease
}
.site-nav__link:hover{
  color:var(--text);
  background:rgba(0,255,102,0.08);
  border-left-color:var(--green)
}
.site-nav__link[aria-current="page"]{
  color:var(--text);
  background:linear-gradient(90deg,rgba(0,255,102,0.15),transparent);
  border-left-color:var(--orange)
}

.site-cta{
  display:none
}

.rail-progress{
  display:none
}
.rail-progress__bar{
  display:block;
  width:100%;
  height:0;
  background:var(--green)
}

@media (min-width:900px){
  .site-header{
    right:auto;
    width:var(--rail-width);
    height:100vh;
    border-right:1px solid var(--line);
    border-bottom:none
  }
  .site-header__inner{
    height:100%;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    padding:2rem 1.25rem
  }
  .site-brand__mark{
    width:46px;
    height:46px;
    font-size:0.9rem
  }
  .site-brand__name{
    font-size:1.3rem
  }
  .site-nav-toggle{
    display:none
  }
  .site-nav{
    position:static;
    width:auto;
    height:auto;
    padding:2.5rem 0 0;
    transform:none;
    visibility:visible;
    border-right:none;
    gap:0.35rem
  }
  .site-header[data-open] .site-nav{
    transform:none;
    visibility:visible
  }
  .site-cta{
    display:block;
    margin-top:auto;
    padding:0.9rem 1.25rem;
    background:var(--green);
    color:var(--bg-deep);
    text-align:center;
    font-family:var(--font-head);
    font-weight:900;
    letter-spacing:0.02em;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
    transition:background 150ms ease,transform 150ms ease
  }
  .site-cta:hover{
    background:var(--orange);
    color:var(--bg-deep);
    transform:translateY(-2px)
  }
  .rail-progress{
    display:block;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:3px;
    background:var(--line)
  }
  .rail-progress__bar{
    height:0
  }
}

.site-footer{
  background:var(--bg-deep);
  border-top:1px solid var(--line);
  color:var(--text-dim);
  font-size:0.95rem
}

.site-footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  padding-block:3rem 2rem
}

.site-footer__brand{
  max-width:28rem
}
.site-footer__tagline{
  font-family:var(--font-data);
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--green);
  margin-top:0.6rem
}
.site-footer__bio{
  margin-top:0.75rem
}
.site-footer__title{
  font-family:var(--font-data);
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:0.75rem
}
.site-footer__nav,
.site-footer__legal,
.site-footer__contact{
  display:flex;
  flex-direction:column;
  gap:0.45rem
}
.site-footer__nav a,
.site-footer__legal a{
  color:var(--text-dim);
  transition:color 150ms ease,padding-left 150ms ease
}
.site-footer__nav a:hover,
.site-footer__legal a:hover{
  color:var(--text);
  padding-left:0.3rem
}
.site-footer__contact p{
  margin:0
}
.site-footer__bottom{
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  padding-bottom:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  font-size:0.85rem;
  color:var(--text-dim)
}
.site-footer__bottom p{
  margin:0
}

.site-brand--footer .site-brand__mark{
  width:42px;
  height:42px
}
.site-brand--footer .site-brand__name{
  font-size:1.2rem
}

@media (min-width:720px){
  .site-footer__grid{
    grid-template-columns:1.5fr 1fr 1fr 1.5fr
  }
  .site-footer__bottom{
    flex-direction:row;
    align-items:center;
    justify-content:space-between
  }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  padding:0.85rem 1.3rem;
  font-family:var(--font-head);
  font-weight:900;
  letter-spacing:0.02em;
  color:var(--bg-deep);
  background:var(--green);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background 150ms ease,transform 150ms ease
}
.btn:hover{
  background:var(--orange);
  color:var(--bg-deep);
  transform:translateY(-2px)
}
.btn--orange{
  background:var(--orange)
}
.btn--orange:hover{
  background:var(--green)
}
.btn--ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  clip-path:none
}
.btn--ghost:hover{
  background:rgba(0,255,102,0.08);
  border-color:var(--green);
  transform:none
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  list-style:none;
  padding:0;
  margin:0 0 2rem
}
.breadcrumbs li{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--text-dim);
  font-family:var(--font-data);
  font-size:0.85rem
}
.breadcrumbs li+li::before{
  content:'/';
  color:var(--line)
}
.breadcrumbs a{
  color:var(--text-dim)
}
.breadcrumbs a:hover{
  color:var(--green)
}
.breadcrumbs [aria-current="page"]{
  color:var(--text);
  font-weight:700
}

.prose{
  font-size:1rem
}
.prose p{
  margin-bottom:1.1rem
}
.prose h2,
.prose h3{
  margin-top:2rem
}
.prose ul{
  margin:0 0 1.1rem 1.5rem
}

.grid{
  display:grid;
  gap:1rem
}
.grid--2{
  grid-template-columns:1fr
}
.grid--3{
  grid-template-columns:1fr
}
.grid--4{
  grid-template-columns:1fr
}
@media (min-width:640px){
  .grid--2{
    grid-template-columns:repeat(2,1fr)
  }
  .grid--3{
    grid-template-columns:repeat(3,1fr)
  }
  .grid--4{
    grid-template-columns:repeat(2,1fr)
  }
}
@media (min-width:980px){
  .grid--4{
    grid-template-columns:repeat(4,1fr)
  }
}

.img-frame{
  position:relative;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line)
}
.img-frame--16x9{
  aspect-ratio:16/9
}
.img-frame--portrait{
  aspect-ratio:3/4
}
.img-frame--cover img{
  width:100%;
  height:100%;
  object-fit:cover
}

.section-label{
  font-family:var(--font-data);
  font-size:0.8rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:0.5rem
}
.section-title{
  font-size:clamp(1.8rem,4vw,3rem)
}
.section-intro{
  max-width:60ch;
  color:var(--text-dim);
  margin-top:0.5rem
}

.data-card{
  background:var(--bg-card);
  border:1px solid var(--line);
  padding:1.5rem;
  position:relative
}

.data-chip{
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.5rem;
  background:var(--bg-card);
  border:1px solid var(--line);
  font-family:var(--font-data);
  font-size:0.85rem;
  color:var(--cyan)
}

@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important
  }
}