:root{
  --ink:#0A0A0A;
  --paper:#F5F6F8;
  --brand:#1A2E45;
  --green:#21E6A3;
  --gold:#C9A227;
  --line:#E0E0E0;
  --dim:#8A8A8A;
  --panel:#2A3B4C;
  --charcoal:#101418;
  --white:#FFFFFF;
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Source Han Mono','Roboto Mono','Courier New',monospace;
  --container-w:1280px;
  --gutter:52px;
  --header-h:72px;
  --border-w:3px;
  --shadow-hard:6px 6px 0 rgba(0,0,0,.55);
  --transition:160ms cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--ink); }
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    var(--ink);
  background-size:48px 48px, 48px 48px, auto;
  color:rgba(245,246,248,.92);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; border:none; background:none; color:inherit; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:800; line-height:1.25; letter-spacing:-.01em; }
::selection{ background:var(--green); color:var(--ink); }
:focus-visible{ outline:3px solid var(--green); outline-offset:2px; }
main#main-content{ flex:1 0 auto; width:100%; }
@media (min-width:1024px){
  body{ padding-left:var(--gutter); }
}
.skip-link{
  position:fixed;
  top:-80px;
  left:8px;
  z-index:400;
  background:var(--green);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:700;
  padding:10px 18px;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.6);
  transition:top var(--transition);
}
.skip-link:focus-visible{ top:8px; }
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--ink);
  border-bottom:var(--border-w) solid var(--green);
}
.site-header__bar{
  max-width:var(--container-w);
  margin:0 auto;
  height:var(--header-h);
  padding:0 clamp(16px,3vw,32px);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:24px;
}
.site-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:var(--paper);
}
.site-brand__mark{
  position:relative;
  width:26px;
  height:26px;
  flex:0 0 26px;
  border:2px solid var(--green);
  background:var(--brand);
  box-shadow:0 0 12px rgba(33,230,163,.35);
}
.site-brand__mark::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.site-brand__name{
  font-family:var(--font-display);
  font-weight:900;
  font-size:22px;
  letter-spacing:.02em;
  white-space:nowrap;
}
.site-brand__name-accent{ color:var(--green); }
.site-brand__tag{
  font-family:var(--font-body);
  font-size:11px;
  color:var(--dim);
  border:1px solid rgba(255,255,255,.2);
  padding:2px 6px;
  letter-spacing:.08em;
  white-space:nowrap;
}
.site-nav{ display:flex; align-items:stretch; gap:4px; }
.site-nav__link{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 16px;
  font-family:var(--font-body);
  font-size:14px;
  color:rgba(245,246,248,.9);
  white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition);
}
.site-nav__index{ font-size:10px; color:var(--green); opacity:.85; transition:color var(--transition); }
.site-nav__link::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:8px;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--transition);
}
.site-nav__link:hover{ color:var(--green); }
.site-nav__link:hover::after{ transform:scaleX(1); }
.site-nav__link[aria-current="page"]{
  background:var(--green);
  color:var(--ink);
  box-shadow:0 0 18px rgba(33,230,163,.4);
}
.site-nav__link[aria-current="page"] .site-nav__index{ color:var(--ink); opacity:1; }
.site-nav__link[aria-current="page"]::after{ display:none; }
.nav-toggle{
  display:none;
  align-items:center;
  gap:8px;
  align-self:center;
  min-height:40px;
  background:transparent;
  border:1px solid rgba(245,246,248,.3);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:13px;
  padding:8px 12px;
  transition:border-color var(--transition), background var(--transition), color var(--transition);
}
.nav-toggle:hover{ border-color:var(--green); background:rgba(33,230,163,.08); color:var(--green); }
.nav-toggle__box{ display:flex; flex-direction:column; gap:4px; width:18px; }
.nav-toggle__bar{ width:18px; height:2px; background:var(--green); transition:transform var(--transition); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{ transform:translateY(3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{ transform:translateY(-3px) rotate(-45deg); }
.site-header__rail{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:var(--gutter);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--charcoal);
  background-size:12px 12px, 12px 12px, auto;
  border-right:1px dashed rgba(255,255,255,.14);
  pointer-events:none;
}
.site-header__rail-line{
  position:absolute;
  top:28px;
  bottom:28px;
  left:50%;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(33,230,163,.6), transparent);
}
.site-header__rail-text{
  font-family:var(--font-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.5em;
  color:rgba(245,246,248,.35);
  writing-mode:vertical-rl;
  white-space:nowrap;
  padding-left:12px;
}
.site-header__rail-dot{
  position:absolute;
  bottom:22px;
  left:50%;
  width:8px;
  height:8px;
  margin-left:-4px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 10px rgba(33,230,163,.9), 0 0 24px rgba(33,230,163,.4);
}
.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:300;
  pointer-events:none;
}
.scroll-progress::before{
  content:"";
  display:block;
  width:var(--progress,0%);
  height:100%;
  background:var(--green);
  box-shadow:0 0 12px rgba(33,230,163,.9);
  transition:width 80ms linear;
}
.site-footer{
  position:relative;
  margin-top:auto;
  background:var(--charcoal);
  border-top:var(--border-w) solid var(--green);
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px;
  pointer-events:none;
}
.site-footer__grid,.site-footer__bottom{ position:relative; z-index:1; }
.site-footer__grid{
  max-width:var(--container-w);
  margin:0 auto;
  padding:clamp(48px,7vw,80px) clamp(16px,3vw,32px) 48px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:clamp(24px,4vw,56px);
}
.site-footer__brand .site-brand{ margin-bottom:18px; }
.site-footer__statement{
  font-size:14px;
  color:rgba(245,246,248,.75);
  max-width:42ch;
  margin-bottom:14px;
}
.site-footer__desc{
  font-size:11px;
  line-height:1.9;
  letter-spacing:.04em;
  color:var(--dim);
}
.site-footer__heading{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--green);
  margin-bottom:20px;
}
.site-footer__contact,.site-footer__links{ display:flex; flex-direction:column; }
.site-footer__list li{
  font-size:13px;
  color:rgba(245,246,248,.72);
  padding:6px 0;
}
.site-footer__key{
  display:inline-block;
  min-width:2.6em;
  color:var(--dim);
  margin-right:8px;
}
.site-footer__list a{ position:relative; color:var(--paper); transition:color var(--transition); }
.site-footer__list a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform var(--transition);
}
.site-footer__list a:hover{ color:var(--green); }
.site-footer__list a:hover::after{ transform:scaleX(1); }
.site-brand--footer .site-brand__mark{ width:22px; height:22px; flex-basis:22px; }
.site-brand--footer .site-brand__name{ font-size:18px; }
.site-footer__bottom{ border-top:1px solid rgba(245,246,248,.14); }
.site-footer__bottom-inner{
  max-width:var(--container-w);
  margin:0 auto;
  padding:16px clamp(16px,3vw,32px) 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--dim);
}
.site-footer__icp{ letter-spacing:.1em; }
.container{
  width:100%;
  max-width:var(--container-w);
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(16px,3vw,32px);
  padding-right:clamp(16px,3vw,32px);
}
.section{ padding:clamp(56px,8vw,96px) 0; }
.section--dark{ background:var(--ink); color:rgba(245,246,248,.92); }
.section--light{ background:var(--paper); color:var(--ink); }
.section--canvas{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(10,10,10,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,.06) 1px, transparent 1px);
  background-size:32px 32px,32px 32px;
  color:var(--ink);
}
.section--brand{ background:var(--brand); color:var(--paper); }
.section-heading{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,52px);
  font-weight:900;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:1.2em;
}
.section-heading__index{
  display:block;
  font-family:var(--font-body);
  font-size:.32em;
  font-weight:400;
  letter-spacing:.3em;
  color:var(--green);
  margin-bottom:.6em;
}
.section-heading--speed{
  position:relative;
  display:inline-block;
  z-index:0;
}
.section-heading--speed::after{
  content:"";
  position:absolute;
  inset:-6px -14px;
  z-index:-1;
  background:repeating-linear-gradient(115deg, var(--green) 0 10px, transparent 10px 22px);
  opacity:.32;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  padding:14px 28px;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  text-align:center;
  transition:background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.btn:hover{ background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--green); }
.btn--solid{ background:var(--green); border-color:var(--green); color:var(--ink); }
.btn--solid:hover{ background:var(--ink); color:var(--green); border-color:var(--green); box-shadow:4px 4px 0 var(--green); }
.btn--outline{ background:transparent; border-color:var(--paper); color:var(--paper); }
.btn--outline:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); box-shadow:4px 4px 0 var(--green); }
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--dim);
  padding:18px 0;
}
.breadcrumb a{ color:var(--paper); transition:color var(--transition); }
.breadcrumb a:hover{ color:var(--green); }
.breadcrumb [aria-current="page"]{ color:var(--green); }
.img-frame{
  position:relative;
  overflow:hidden;
  border:2px solid var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
    var(--panel);
  background-size:24px 24px,24px 24px,auto;
  box-shadow:var(--shadow-hard);
  aspect-ratio:16/9;
}
.img-frame img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-frame--square{ aspect-ratio:1/1; }
.img-frame--portrait{ aspect-ratio:4/5; }
.img-frame--light{
  background-color:var(--line);
  border-color:var(--dim);
  box-shadow:6px 6px 0 rgba(10,10,10,.18);
}
.img-frame__label{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  font-family:var(--font-body);
  font-size:11px;
  letter-spacing:.12em;
  background:rgba(10,10,10,.75);
  color:var(--green);
  padding:4px 8px;
  border:1px solid rgba(33,230,163,.35);
}
.bento-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:20px;
}
.bento-cell{
  grid-column:span 4;
  min-height:160px;
  padding:24px;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--shadow-hard);
}
.bento-cell--dark{
  background:var(--panel);
  color:rgba(245,246,248,.92);
  border-color:transparent;
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
}
.bento-cell--green{ background:var(--green); border-color:var(--ink); }
.bento-cell--wide{ grid-column:span 8; }
.bento-cell--full{ grid-column:1 / -1; }
.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.1em;
  padding:6px 12px;
  border:1px solid currentColor;
  color:var(--paper);
}
.tag--live{ color:var(--green); border-color:var(--green); }
.tag--live::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.tag--gold{ color:var(--gold); border-color:var(--gold); }
@media (max-width:1023px){
  body{ padding-left:0; }
  .site-header__rail{ display:none; }
  .site-header__bar{ height:64px; }
  .nav-toggle{ display:inline-flex; }
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px 16px 16px;
    background:var(--charcoal);
    border-bottom:var(--border-w) solid var(--green);
    box-shadow:0 16px 32px rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity var(--transition), transform var(--transition), visibility var(--transition);
  }
  .site-nav[data-open]{ opacity:1; visibility:visible; transform:translateY(0); }
  .site-nav__link{
    height:auto;
    justify-content:flex-start;
    padding:14px 16px;
    border:1px solid rgba(245,246,248,.14);
    background:rgba(245,246,248,.03);
  }
  .site-nav__link:hover{ background:rgba(33,230,163,.08); border-color:var(--green); color:var(--green); }
  .site-nav__link[aria-current="page"]{
    background:var(--green);
    border-color:var(--green);
    color:var(--ink);
    box-shadow:0 0 14px rgba(33,230,163,.35);
  }
  .site-nav__link[aria-current="page"]:hover{ color:var(--ink); }
  .site-nav__link::after{ display:none; }
  .site-footer__grid{ grid-template-columns:1fr; gap:32px; padding-top:48px; padding-bottom:36px; }
  .site-footer__bottom-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .site-brand__tag{ display:none; }
  .site-brand__name{ font-size:19px; }
  .site-brand__mark{ width:24px; height:24px; flex-basis:24px; }
  .bento-grid{ grid-template-columns:repeat(6,1fr); gap:12px; }
  .bento-cell,.bento-cell--wide{ grid-column:span 6; }
  .section{ padding:44px 0; }
  .site-footer__desc{ font-size:10px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .skip-link{ transition:none; }
  .scroll-progress::before{ transition:none; }
}