*,*::before,*::after{box-sizing:border-box}
:root{
  --neon:#87ff71;
  --sun:#ffce5c;
  --ink:#192617;
  --bg:#192617;
  --panel:#20321f;
  --panel-2:#141f10;
  --text:#f2ffe9;
  --dim:#c2dab5;
  --r:4px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--bg);
  background-image:repeating-linear-gradient(45deg,rgba(135,255,113,.055) 0 10px,rgba(0,0,0,0) 10px 20px);
  color:var(--text);
  font-family:"Manrope",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
body.lock{overflow:hidden}
img{max-width:100%}
a{color:var(--sun)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 顶栏 */
.bar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 14px;
  background:rgba(25,38,23,.97);
  border-bottom:4px solid var(--neon);
}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;text-decoration:none}
.brand-name{font-family:"Syne","Manrope",sans-serif;font-weight:700;font-size:16px;letter-spacing:.08em;color:var(--neon)}
.brand-dot{width:22px;height:22px;display:inline-block;background:var(--sun);border:3px solid var(--neon);border-radius:50% 50% 50% 2px;transform:rotate(-14deg)}
.brand-logo{width:40px;height:40px;object-fit:contain;border-radius:var(--r);border:3px solid var(--neon)}
.burger{
  min-height:44px;padding:0 16px;
  font:inherit;font-size:16px;font-weight:700;
  color:var(--sun);background:transparent;
  border:4px solid var(--sun);border-radius:var(--r);
  cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease;
}
.burger[aria-expanded="true"]{background:var(--sun);color:var(--ink);transform:rotate(-3deg)}

/* 全屏遮罩菜单 */
.menu{
  position:fixed;inset:0;z-index:55;
  padding:84px 20px 40px;overflow-y:auto;
  background-color:var(--ink);
  background-image:radial-gradient(rgba(135,255,113,.26) 1.5px,rgba(0,0,0,0) 1.7px);
  background-size:26px 26px;
  visibility:hidden;opacity:0;
  transition:opacity .22s ease,visibility .22s ease;
}
.menu.is-open{visibility:visible;opacity:1}
.menu-nav{max-width:660px;margin:0 auto}
.menu-nav ul{list-style:none;margin:0;padding:0}
.menu-nav a{
  display:flex;align-items:center;gap:12px;
  min-height:54px;padding:10px 4px;
  font-family:"Syne","Manrope",sans-serif;
  font-size:clamp(19px,5vw,28px);font-weight:700;line-height:1.3;
  color:var(--text);text-decoration:none;
  border-bottom:3px dotted rgba(135,255,113,.38);
  transition:transform .18s ease,color .18s ease;
}
.menu-nav a:hover,.menu-nav a:focus-visible{color:var(--neon);transform:translateX(8px)}
.mi-mark{width:12px;height:12px;flex:0 0 12px;background:var(--sun);clip-path:polygon(50% 0,100% 100%,0 100%)}
.menu-nav li:nth-child(even) .mi-mark{border-radius:50%;clip-path:none;background:var(--neon)}

/* 版心 */
.stage{
  max-width:1140px;margin:0 auto;
  padding:20px 16px 56px;
  display:grid;grid-template-columns:minmax(0,1fr);gap:24px;
}
@media (min-width:1000px){
  .stage{grid-template-columns:minmax(0,1fr) 250px;align-items:start;gap:28px}
}

/* 首屏 */
.hero{
  display:grid;gap:18px;align-items:center;
  padding:6px 0 24px;margin:0 0 26px;
  border-bottom:4px solid var(--sun);
}
@media (min-width:760px){
  .hero{grid-template-columns:1.05fr .95fr;min-height:45vh}
}
.hero h1{
  margin:0 0 12px;
  font-family:"Syne","Manrope",sans-serif;
  font-size:clamp(27px,5.4vw,50px);font-weight:700;line-height:1.16;
  letter-spacing:-.01em;color:var(--neon);
}
.hero-lead{margin:0;font-size:17px;line-height:1.72;color:var(--dim);max-width:46ch}
.hero-art{
  margin:0;position:relative;overflow:hidden;
  aspect-ratio:4/3;
  border:4px solid var(--sun);border-radius:var(--r);
  background:var(--panel-2);
  clip-path:polygon(0 0,100% 0,100% 86%,86% 100%,0 100%);
}
.hero-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero-art.rot img{position:absolute;inset:0;opacity:0;animation:rot 15s infinite}
.hero-art.rot img:nth-child(2){animation-delay:5s}
.hero-art.rot img:nth-child(3){animation-delay:10s}
@keyframes rot{0%{opacity:0}4%{opacity:1}30%{opacity:1}34%{opacity:0}100%{opacity:0}}
.hero-art.shapes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px;padding:10px}
.hero-art.shapes span:nth-child(1){background:var(--neon);clip-path:polygon(50% 0,100% 100%,0 100%)}
.hero-art.shapes span:nth-child(2){background:var(--sun);border-radius:50%}
.hero-art.shapes span:nth-child(3){
  grid-column:1 / -1;
  background-image:repeating-linear-gradient(45deg,var(--neon) 0 8px,rgba(0,0,0,0) 8px 16px);
  clip-path:polygon(0 0,100% 0,82% 100%,0 100%);
}

/* 正文卡片 */
.sheet{counter-reset:sec;min-width:0}
.sheet > article:not(.hero){
  position:relative;counter-increment:sec;
  margin:0 0 24px;padding:26px 18px 20px;
  background:var(--panel);
  border:4px solid rgba(135,255,113,.55);
  border-radius:var(--r);
  scroll-margin-top:96px;
}
.sheet > article:not(.hero):nth-of-type(even){border-color:rgba(255,206,92,.62);border-style:dashed}
.sheet > article:not(.hero)::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute;top:6px;right:12px;
  font-family:"Syne","Manrope",sans-serif;font-size:34px;font-weight:700;line-height:1;
  color:rgba(255,206,92,.42);
}
.sheet h2{
  margin:0 0 14px;
  font-family:"Syne","Manrope",sans-serif;
  font-size:clamp(21px,3.2vw,29px);font-weight:700;line-height:1.3;
  color:var(--neon);
}
.sheet h2 > span{display:inline;padding:0 2px;background:linear-gradient(rgba(0,0,0,0) 64%,rgba(255,206,92,.26) 64%)}
.sheet h3{
  margin:22px 0 10px;
  font-family:"Syne","Manrope",sans-serif;
  font-size:19px;line-height:1.4;color:var(--sun);
}
.sheet h3 > span{display:inline;border-bottom:3px dotted rgba(255,206,92,.6);padding-bottom:1px}
.sheet p{margin:0 0 14px;font-size:17px;line-height:1.78}
.sheet ul,.sheet ol{margin:0 0 14px;padding-left:1.25em}
.sheet li{margin:0 0 8px;line-height:1.72}
.sheet a{color:var(--sun);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.sheet strong,.sheet b{color:var(--neon)}
.sheet img{height:auto;border:4px solid var(--sun);border-radius:var(--r)}
.sheet blockquote{
  margin:0 0 14px;padding:12px 16px;
  border-left:6px solid var(--neon);
  background:rgba(135,255,113,.08);
}
.sheet blockquote p:last-child{margin:0}
.sheet table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;font-size:16px}
.sheet th,.sheet td{border:2px solid rgba(135,255,113,.34);padding:8px 10px;text-align:left}
.sheet figure{margin:0 0 14px}
.sheet figcaption{font-size:16px;color:var(--dim);margin-top:6px}

/* 右侧栏 */
.rail{
  padding:16px 14px;
  background:var(--panel-2);
  border:4px dotted var(--sun);border-radius:var(--r);
}
@media (min-width:1000px){.rail{position:sticky;top:96px}}
.rail h2{
  margin:0 0 10px;
  font-family:"Syne","Manrope",sans-serif;
  font-size:15px;letter-spacing:.2em;color:var(--sun);
}
.rail h2 > span{border-bottom:3px solid var(--neon);padding-bottom:2px}
.rail ul{list-style:none;margin:0;padding:0}
.rail a{
  display:flex;align-items:center;min-height:40px;padding:6px 0;
  font-size:16px;line-height:1.4;color:var(--text);text-decoration:none;
  border-bottom:2px dotted rgba(135,255,113,.26);
}
.rail a:hover,.rail a:focus-visible{color:var(--neon)}

/* 页脚 */
.foot{margin-top:8px;padding:30px 16px 22px;background:var(--panel-2);border-top:4px solid var(--neon)}
.foot-grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.1fr 1.1fr .8fr}}
.foot h3{margin:0 0 10px;font-family:"Syne","Manrope",sans-serif;font-size:15px;letter-spacing:.16em;color:var(--sun)}
.foot h3 > span{display:inline;border-bottom:3px solid var(--neon);padding-bottom:2px}
.foot address{font-style:normal;font-size:16px;line-height:1.6}
.foot-brand{display:inline-block;padding:6px 10px;border:3px dashed rgba(255,206,92,.7);border-radius:var(--r);color:var(--text)}
.foot-mark{margin:0;font-family:"Syne","Manrope",sans-serif;font-weight:700;font-size:clamp(22px,4vw,32px);line-height:1.15;color:rgba(135,255,113,.34);word-break:break-all}
.sub{display:flex;flex-wrap:wrap;gap:8px}
.sub input{
  flex:1 1 140px;min-height:46px;padding:0 12px;
  font:inherit;font-size:16px;color:var(--text);
  background:#0f1a0c;border:4px solid rgba(135,255,113,.6);border-radius:var(--r);
}
.sub input::placeholder{color:#8fa985}
.sub button{
  min-height:46px;padding:0 18px;
  font:inherit;font-size:16px;font-weight:700;
  color:var(--ink);background:var(--neon);
  border:4px solid var(--neon);border-radius:var(--r);cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.sub button:hover{background:var(--sun);border-color:var(--sun)}
.foot-base{
  max-width:1140px;margin:22px auto 0;padding-top:14px;
  border-top:3px dotted rgba(135,255,113,.32);
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
}
@media (min-width:760px){.foot-base{flex-direction:row;align-items:center;justify-content:space-between}}
.copy{margin:0;font-size:16px;color:var(--dim)}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 16px}
.foot-links a{display:inline-flex;align-items:center;min-height:40px;font-size:16px;color:var(--dim);text-decoration:none}
.foot-links a:hover,.foot-links a:focus-visible{color:var(--neon);text-decoration:underline}

/* 入场动效 */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-art.rot img{animation:none;position:static;opacity:1}
  .hero-art.rot img:not(:first-child){display:none}
  .menu,.burger,.menu-nav a{transition:none}
}

@media (max-width:480px){
  .bar{padding:8px 12px}
  .brand-name{font-size:15px;letter-spacing:.04em}
  .stage{padding:16px 12px 44px}
  .sheet > article:not(.hero){padding:22px 14px 16px}
  .sheet > article:not(.hero)::before{font-size:28px;top:4px;right:10px}
  .foot{padding:26px 12px 18px}
}

button[aria-expanded]{min-width:44px;min-height:44px}