:root{
--g:#00ff80;
--b:#0000ff;
--k:#000;
--w:#eafff4;
--dim:rgba(234,255,244,.68);
--line:rgba(0,255,128,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--k);
color:var(--w);
font-family:Nunito,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
font-size:17px;
line-height:1.7;
font-weight:400;
}
img,svg,video{max-width:100%}
a{color:var(--g)}
h1,h2,h3,h4{font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:700;letter-spacing:.01em}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}
section[id]{scroll-margin-top:126px}

/* 顶部细条 */
.topbar{height:30px;display:flex;align-items:center;overflow:hidden;background:var(--b);border-bottom:3px solid var(--g)}
.tick{display:flex;width:max-content;animation:slide 34s linear infinite}
.tick ul{display:flex;align-items:center;list-style:none;margin:0;padding:0}
.tick li{
font-family:Fredoka,Nunito,sans-serif;
font-size:15px;
font-weight:600;
letter-spacing:.1em;
color:#fff;
padding:0 14px;
white-space:nowrap;
}
.tick li::after{content:"·";margin-left:14px;color:var(--g);font-weight:700}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 页头：品牌行在上，菜单行在下 */
.hdr{position:sticky;top:0;z-index:40;background:var(--k);border-bottom:4px solid var(--g)}
.brandline{
max-width:1180px;
margin:0 auto;
padding:8px 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.logo{
display:flex;
align-items:center;
min-height:46px;
font-family:Fredoka,Nunito,sans-serif;
font-weight:700;
font-size:clamp(20px,4.8vw,30px);
line-height:1.1;
color:var(--g);
text-decoration:none;
letter-spacing:.02em;
}
.logo::before{
content:"";
flex:none;
width:14px;
height:14px;
margin-right:11px;
background:var(--b);
border:3px solid var(--g);
}
.toggler{
display:none;
align-items:center;
font:inherit;
font-weight:700;
font-size:16px;
min-height:46px;
padding:0 18px;
background:var(--g);
color:var(--k);
border:3px solid var(--g);
cursor:pointer;
}
.mainnav{max-width:1180px;margin:0 auto;padding:0 18px;border-top:2px solid var(--line)}
.mainnav ol{list-style:none;display:flex;flex-wrap:wrap;margin:0;padding:0}
.mainnav li{animation:rise .18s steps(3,end) both}
.mainnav li:nth-child(1){animation-delay:0ms}
.mainnav li:nth-child(2){animation-delay:40ms}
.mainnav li:nth-child(3){animation-delay:80ms}
.mainnav li:nth-child(4){animation-delay:120ms}
.mainnav li:nth-child(5){animation-delay:160ms}
.mainnav li:nth-child(6){animation-delay:200ms}
.mainnav li:nth-child(7){animation-delay:240ms}
.mainnav a{
display:flex;
align-items:center;
min-height:48px;
padding:6px 16px;
font-size:16px;
font-weight:700;
color:var(--w);
text-decoration:none;
border-right:2px solid var(--line);
}
.mainnav li:nth-child(2n) a{background:rgba(0,0,255,.32)}
.mainnav li:last-child a{border-right:0}
.mainnav a:hover,.mainnav a:focus{background:var(--g);color:var(--k)}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* 主区骨架：内容左，侧栏右 */
main{display:block}
.wrap{
max-width:1180px;
margin:0 auto;
padding:0 18px;
display:grid;
grid-template-columns:minmax(0,1fr) 302px;
column-gap:30px;
align-items:start;
}

/* 头图：纯文字超大标题 */
.hero{
grid-column:1/-1;
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:18px;
min-height:68vh;
padding:46px 10px 54px;
text-align:center;
border-bottom:4px solid var(--g);
}
.hero-bg{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-family:Fredoka,Nunito,sans-serif;
font-weight:700;
font-size:clamp(66px,19vw,220px);
line-height:1;
letter-spacing:.02em;
color:transparent;
-webkit-text-stroke:2px rgba(0,255,128,.22);
white-space:nowrap;
pointer-events:none;
user-select:none;
}
.hero-h1{
position:relative;
margin:0;
max-width:17ch;
font-size:clamp(36px,8.4vw,92px);
line-height:1.06;
color:#fff;
text-shadow:6px 6px 0 var(--b);
}
.hero-lead{
position:relative;
margin:0;
max-width:58ch;
font-size:clamp(16px,2vw,19px);
line-height:1.65;
color:#bfffdd;
}

/* 正文卡片区 */
.body{grid-column:1;min-width:0}
article{counter-reset:sec;margin:34px 0 46px}
article section{
counter-increment:sec;
position:relative;
overflow:hidden;
margin:0 0 26px;
padding:30px 24px 24px;
background:#050b08;
border:3px solid var(--g);
border-radius:28px;
box-shadow:0 18px 40px rgba(0,255,128,.13);
}
article section::before{
content:counter(sec,decimal-leading-zero);
position:absolute;
top:-8px;
right:12px;
font-family:Fredoka,Nunito,sans-serif;
font-weight:700;
font-size:clamp(54px,9vw,92px);
line-height:1;
color:rgba(0,255,128,.16);
pointer-events:none;
}
article section:last-child{margin-bottom:0}
article>*:last-child{margin-bottom:0}

article h2{margin:0 0 14px;font-size:clamp(23px,3.4vw,34px);line-height:1.22;color:var(--g)}
article h3{margin:24px 0 10px;font-size:clamp(18px,2.4vw,23px);line-height:1.3;color:#fff}
article h4{margin:20px 0 8px;font-size:17px;color:var(--g)}
article h2>span,article h3>span,article h4>span{color:inherit}
article p{margin:0 0 15px;max-width:74ch}
article ul,article ol{margin:0 0 16px;padding-left:24px}
article li{margin:0 0 9px}
article li::marker{color:var(--g);font-weight:700}
article strong{color:var(--g)}
article em{color:#fff;font-style:normal;border-bottom:2px solid var(--b)}
article a{color:var(--g);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
article a:hover{background:var(--g);color:var(--k);text-decoration:none}
article blockquote{
margin:0 0 16px;
padding:14px 18px;
border-left:8px solid var(--b);
background:rgba(0,0,255,.24);
}
article blockquote p:last-child{margin-bottom:0}
article figure{margin:0 0 16px}
article figcaption{font-size:15px;color:var(--dim);padding-top:6px}
article img{
display:block;
width:100%;
height:auto;
border:3px solid var(--g);
border-radius:28px;
background:#0a1410;
}
article table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:16px}
article th,article td{border:2px solid rgba(0,255,128,.5);padding:10px 12px;text-align:left;vertical-align:top}
article th{background:rgba(0,0,255,.3);color:#fff}
article code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:15px;
background:#0c1a12;
border:1px solid rgba(0,255,128,.42);
padding:2px 5px;
}
article pre{
margin:0 0 16px;
padding:14px;
overflow-x:auto;
background:#0c1a12;
border:2px solid var(--line);
}
article hr{border:0;border-top:3px dashed var(--line);margin:22px 0}

/* 右侧栏 */
aside.side{
grid-column:2;
position:sticky;
top:112px;
align-self:start;
margin:34px 0 0;
padding:18px 16px;
background:#00060f;
border:3px solid var(--b);
border-radius:28px;
box-shadow:0 18px 40px rgba(0,0,255,.32);
}
aside.side h2{margin:0 0 10px;font-size:17px;letter-spacing:.14em;color:var(--g)}
aside.side ol{list-style:none;margin:0;padding:0;counter-reset:s}
aside.side li{counter-increment:s;border-top:2px solid var(--line)}
aside.side li:first-child{border-top:0}
aside.side a{
display:flex;
align-items:center;
gap:10px;
min-height:44px;
padding:5px 4px;
font-size:16px;
font-weight:700;
color:var(--w);
text-decoration:none;
}
aside.side a::before{
content:counter(s,decimal-leading-zero);
font-family:Fredoka,Nunito,sans-serif;
font-size:14px;
color:var(--g);
flex:none;
}
aside.side a:hover{background:var(--b);color:#fff}

/* 页脚单行 */
footer{margin-top:26px;background:var(--k);border-top:4px solid var(--g)}
.fbar{
max-width:1180px;
margin:0 auto;
padding:12px 18px;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 18px;
}
.fbrand a{
display:flex;
align-items:center;
min-height:42px;
font-family:Fredoka,Nunito,sans-serif;
font-weight:700;
font-size:18px;
color:var(--g);
text-decoration:none;
}
.fnav{flex:1 1 360px;min-width:0}
.fnav-t{margin:0;font-size:15px;letter-spacing:.14em;color:var(--dim);font-weight:600}
.fnav ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2px}
.fnav a{
display:flex;
align-items:center;
min-height:42px;
padding:0 8px;
font-size:15px;
font-weight:600;
color:var(--w);
text-decoration:none;
}
.fnav a:hover{background:var(--g);color:var(--k)}
.cr{margin:0;font-size:15px;color:var(--dim)}

/* 断点 */
@media (max-width:900px){
.wrap{grid-template-columns:minmax(0,1fr)}
.hero{grid-column:1/-1}
aside.side{grid-column:1;position:static;margin:0 0 40px}
.body{grid-column:1}
}
@media (max-width:820px){
.toggler{display:inline-flex}
.mainnav{display:none;border-top:3px solid var(--g);padding:0}
.hdr.open .mainnav{display:block}
.mainnav ol{flex-direction:column}
.mainnav li{animation:none}
.mainnav a{border-right:0;border-bottom:2px solid var(--line);min-height:52px;padding:6px 18px}
.mainnav li:nth-child(2n) a{background:rgba(0,0,255,.2)}
section[id]{scroll-margin-top:88px}
.hero{min-height:54vh;padding:34px 8px 40px;gap:14px}
.hero-h1{font-size:clamp(32px,10vw,56px);text-shadow:4px 4px 0 var(--b)}
.hero-bg{font-size:clamp(56px,24vw,140px)}
article{margin:26px 0 36px}
article section{padding:24px 18px 18px;border-radius:22px}
}
@media (max-width:420px){
.brandline{padding:8px 14px}
.mainnav a{padding:6px 14px}
.wrap{padding:0 14px}
.fbar{padding:12px 14px}
article th,article td{padding:8px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.tick{animation:none}
.mainnav li{animation:none}
}

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