*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --color-bg:#0A0E17;
  --color-bg-alt:#121A29;
  --color-surface:#1A2536;
  --color-accent:#00FF85;
  --color-accent-2:#00B3FF;
  --color-text:#F2F6FC;
  --color-text-muted:#A7B4C8;
  --color-border:#263241;
  --color-warning:#FFC857;
  --font-title:"Inter","Noto Sans SC",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --content-max:1440px;
  --radius:10px;
  --transition:.3s ease;
  --ease-out:cubic-bezier(.22,1,.36,1)
}
html{scroll-behavior:smooth;background:var(--color-bg)}
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-title);color:var(--color-text);line-height:1.2;font-weight:700;margin:0 0 .5em}
p{margin-bottom:1em}
a{color:var(--color-accent-2);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-accent)}
ul:not([class]),ol:not([class]){padding-left:1.5em;margin-bottom:1em}
ul[class],ol[class]{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--color-accent);color:var(--color-bg)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
#main-content,[data-section-anchor],.section[id]{scroll-margin-top:140px}
.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}
.container{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 32px}
.section{padding:80px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:6px;font-family:var(--font-body);
  font-size:14px;font-weight:700;line-height:1.4;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition)
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--color-accent);color:var(--color-bg)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--color-text);color:var(--color-bg);box-shadow:0 0 24px rgba(0,255,133,.35)}
.btn--ghost{background:transparent;border-color:var(--color-border);color:var(--color-text)}
.btn--ghost:hover{border-color:var(--color-accent);color:var(--color-accent);box-shadow:inset 0 0 0 1px var(--color-accent)}
.btn--sm{padding:8px 16px;font-size:13px;border-radius:4px}
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(10,14,23,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  transition:background .4s ease,box-shadow .4s ease
}
.site-header.is-scrolled{background:rgba(10,14,23,.97);box-shadow:0 12px 40px rgba(0,0,0,.4)}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:2000;
  background:var(--color-accent);color:var(--color-bg);
  padding:10px 20px;border-radius:6px;
  font-size:14px;font-weight:700;
  transform:translateY(-200%);transition:transform .3s ease
}
.skip-link:focus,.skip-link:focus-visible{transform:translateY(0);outline:2px solid var(--color-text);outline-offset:2px}
.header-progress{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(38,50,65,.5);pointer-events:none;z-index:10}
.header-progress__bar{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--color-accent) 0%,var(--color-accent-2) 100%);transition:width .15s linear}
.header-shell{width:100%;max-width:var(--content-max);margin:0 auto;padding:0 32px}
.header-top{display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:24px;position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--color-text);flex-shrink:0}
.brand::before{content:"";width:10px;height:10px;background:var(--color-accent);box-shadow:0 0 14px rgba(0,255,133,.5);flex:0 0 auto}
.brand:hover .brand__mark{color:var(--color-accent)}
.brand__mark{font-family:var(--font-title);font-size:26px;font-weight:800;letter-spacing:.04em;line-height:1;color:var(--color-text);transition:color var(--transition)}
.brand__sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--color-accent-2);border-left:1px solid var(--color-border);padding-left:12px;line-height:1.2}
.brand:hover .brand__sub{color:var(--color-accent)}
.brand--footer .brand__mark{font-size:22px}
.header-tools{display:flex;align-items:center;gap:16px;margin-left:auto}
.header-search{position:relative;display:flex;align-items:center}
.header-search__icon{position:absolute;left:12px;width:14px;height:14px;border:2px solid var(--color-text-muted);border-radius:50%;pointer-events:none;opacity:.7}
.header-search__icon::after{content:"";position:absolute;bottom:-5px;right:-2px;width:6px;height:2px;background:var(--color-text-muted);transform:rotate(45deg)}
.header-search__input{background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text);padding:10px 14px 10px 38px;border-radius:6px;font-family:var(--font-body);font-size:14px;width:220px;transition:width .35s var(--ease-out),border-color var(--transition),box-shadow var(--transition)}
.header-search__input::placeholder{color:var(--color-text-muted)}
.header-search__input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(0,255,133,.15);width:280px}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:48px;height:48px;background:transparent;border:1px solid var(--color-border);border-radius:6px;cursor:pointer;transition:border-color var(--transition)}
.nav-toggle:hover{border-color:var(--color-accent)}
.nav-toggle__bar{display:block;width:22px;height:2px;background:var(--color-text);transition:transform .3s ease,opacity .3s ease}
.nav-toggle[data-open] .nav-toggle__bar:nth-child(2){transform:translateY(7px) rotate(45deg)}
.nav-toggle[data-open] .nav-toggle__bar:nth-child(3){opacity:0}
.nav-toggle[data-open] .nav-toggle__bar:nth-child(4){transform:translateY(-7px) rotate(-45deg)}
.header-nav{display:flex;align-items:stretch;border-top:1px solid var(--color-border)}
.header-nav__list{display:flex;list-style:none;margin:0;padding:0}
.header-nav__item{display:flex}
.header-nav__link{display:flex;align-items:center;gap:8px;padding:16px 20px;font-size:15px;font-weight:600;color:var(--color-text-muted);text-decoration:none;border-right:1px solid var(--color-border);white-space:nowrap;transition:color .25s ease,background .25s ease,box-shadow .25s ease}
.header-nav__item:first-child .header-nav__link{border-left:1px solid var(--color-border)}
.header-nav__link:hover{color:var(--color-text);background:rgba(26,37,54,.6)}
.header-nav__link[aria-current="page"]{color:var(--color-text);background:linear-gradient(180deg,rgba(0,255,133,.1) 0%,transparent 100%);box-shadow:inset 0 3px 0 var(--color-accent)}
.header-nav__index{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--color-accent);letter-spacing:.04em}
.header-nav__label{font-size:15px;font-weight:600;letter-spacing:.02em}
.header-nav__meta{display:flex;align-items:center;margin-left:auto;padding:0 16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.header-nav__meta-item{display:inline-flex;align-items:center}
.header-nav__meta-item+.header-nav__meta-item{margin-left:8px}
.header-nav__meta-item+.header-nav__meta-item::before{content:"//";color:var(--color-accent);margin-right:8px}
.site-footer{position:relative;background:var(--color-bg-alt);border-top:1px solid var(--color-border);overflow:hidden}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--color-accent) 0%,transparent 35%,rgba(0,179,255,.6) 100%);opacity:.5}
.footer-shell{width:100%;max-width:var(--content-max);margin:0 auto;padding:56px 32px 24px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:48px}
.footer-brand__desc{margin-top:16px;font-size:14px;line-height:1.7;color:var(--color-text-muted);max-width:44ch}
.footer-brand__trust{display:flex;align-items:flex-start;gap:12px;margin-top:20px;padding:14px 16px;border:1px solid var(--color-border);border-radius:8px;background:rgba(0,255,133,.04);font-size:12px;line-height:1.6;color:var(--color-text-muted)}
.footer-brand__trust-icon{display:inline-block;width:9px;height:9px;margin-top:5px;border:2px solid var(--color-accent);transform:rotate(45deg);flex:0 0 auto}
.footer-col__title{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);margin:0 0 20px;padding-bottom:10px;border-bottom:1px solid var(--color-border);font-weight:500}
.footer-col__list{list-style:none;margin:0;padding:0}
.footer-col__list li{margin-bottom:10px}
.footer-col__list a{font-size:14px;color:var(--color-text-muted);text-decoration:none;transition:color var(--transition),padding-left var(--transition);line-height:1.5}
.footer-col__list a:hover{color:var(--color-accent);padding-left:4px}
.footer-contact__item{display:flex;flex-direction:column;margin-bottom:14px}
.footer-contact__label{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);opacity:.7;margin-bottom:2px}
.footer-contact__value{font-size:14px;color:var(--color-text);line-height:1.5;word-break:break-all}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--color-border);margin-top:48px;padding-top:20px;font-family:var(--font-mono);font-size:12px;color:var(--color-text-muted)}
.footer-bottom__icp{letter-spacing:.04em}
.footer-bottom__copyright{letter-spacing:.04em}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}
.card--interactive{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.card--interactive:hover{transform:translateY(-3px);border-color:rgba(0,255,133,.4);box-shadow:0 12px 36px rgba(0,0,0,.35),0 0 20px rgba(0,255,133,.12)}
.section-heading{display:flex;align-items:baseline;gap:16px;margin-bottom:32px;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.section-heading__index{font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--color-accent);letter-spacing:.06em}
.section-heading__title{font-family:var(--font-title);font-size:32px;font-weight:700;color:var(--color-text);margin:0;letter-spacing:-.01em}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:100px}
.tag--accent{color:var(--color-accent);border-color:rgba(0,255,133,.35);background:rgba(0,255,133,.08)}
.tag--blue{color:var(--color-accent-2);border-color:rgba(0,179,255,.35);background:rgba(0,179,255,.08)}
.breadcrumb{margin-bottom:32px}
.breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;margin:0;padding:0;font-family:var(--font-mono);font-size:13px}
.breadcrumb li+li::before{content:"/";color:var(--color-text-muted);margin-right:8px}
.breadcrumb a{color:var(--color-accent-2);text-decoration:none;transition:color var(--transition)}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb [aria-current="page"]{color:var(--color-text-muted)}
.img-frame{position:relative;display:block;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}
.img-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,255,133,.06) 0%,rgba(0,179,255,.06) 50%,transparent 100%);pointer-events:none}
.img-frame--16-9{aspect-ratio:16/9}
.img-frame--4-3{aspect-ratio:4/3}
.img-frame--1-1{aspect-ratio:1/1}
.img-frame--3-4{aspect-ratio:3/4}
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js [data-reveal].is-revealed{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}
@media (max-width:1280px){
  .header-nav__link{padding:16px 14px}
  .header-nav__meta{display:none}
}
@media (max-width:1024px){
  .header-search__input{width:180px}
  .header-search__input:focus{width:200px}
  .header-nav__link{padding:14px 12px}
  .header-nav__label{font-size:14px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .section{padding:64px 0}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .header-shell{padding:0 20px}
  .header-top{min-height:60px;gap:12px}
  .header-search{display:none}
  .brand__mark{font-size:24px}
  .brand__sub{font-size:11px}
  .header-tools{margin-left:auto;gap:8px}
  .nav-toggle{display:inline-flex;flex-shrink:0}
  .header-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;background:var(--color-bg);
    border-bottom:1px solid var(--color-border);
    box-shadow:0 20px 48px rgba(0,0,0,.5)
  }
  .header-nav[data-open]{display:flex}
  .header-nav__list{flex-direction:column;width:100%}
  .header-nav__item:first-child .header-nav__link{border-left:none}
  .header-nav__link{border-right:none;border-bottom:1px solid var(--color-border);padding:16px 20px;min-height:auto}
  .header-nav__index{min-width:28px}
  .header-nav__meta{display:none}
  .container{padding:0 20px}
  .section{padding:48px 0}
  .footer-shell{padding:40px 20px 20px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:center;text-align:center;gap:6px;margin-top:32px}
}
@media (max-width:480px){
  .brand__sub{display:none}
  .brand__mark{font-size:22px}
  .brand::before{width:8px;height:8px}
}