:root{
--ink:#0E0E10;
--ink2:#151519;
--ink3:#1E1E24;
--lime:#E8FF3A;
--cream:#F4F1EA;
--dim:rgba(244,241,234,.62);
--line:rgba(244,241,234,.14);
--font:"Inter",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--ink);
color:var(--cream);
font-family:var(--font);
font-size:17px;
line-height:1.65;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.015em;margin:0}
div[id]{scroll-margin-top:84px}

/* 顶部细条 */
.ticker{
background:var(--lime);
color:var(--ink);
height:32px;
display:flex;
align-items:center;
overflow:hidden;
font-size:13px;
font-weight:800;
letter-spacing:.24em;
}
.ticker-track{display:flex;flex:0 0 auto;white-space:nowrap;animation:slide 26s linear infinite}
.ticker-track span{position:relative;padding:0 20px;flex:0 0 auto}
.ticker-track span::after{
content:"";
position:absolute;
right:-3px;
top:50%;
width:6px;height:6px;
border-radius:50%;
background:var(--ink);
transform:translateY(-50%);
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 左侧栏 / 导航 */
.rail{
position:sticky;
top:0;
z-index:60;
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
background:var(--ink);
border-bottom:1px solid var(--line);
}
.mark{
flex:0 0 auto;
width:44px;height:44px;
display:grid;
place-items:center;
background:var(--lime);
color:var(--ink);
text-decoration:none;
font-weight:800;
font-size:16px;
letter-spacing:-.04em;
border-radius:12px;
transform:rotate(-7deg);
transition:transform .25s ease;
}
.mark:hover{transform:rotate(0) scale(1.05)}
.rail-nav{flex:1 1 auto;min-width:0}
.rail-nav ol{
list-style:none;
margin:0;
padding:0;
display:flex;
gap:4px;
overflow-x:auto;
scrollbar-width:none;
}
.rail-nav ol::-webkit-scrollbar{display:none}
.rail-nav a{
display:flex;
align-items:center;
min-height:44px;
padding:0 12px;
font-size:16px;
font-weight:600;
text-decoration:none;
white-space:nowrap;
border-radius:999px;
color:var(--cream);
opacity:.8;
transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.rail-nav a:hover,.rail-nav a:focus-visible{opacity:1;background:var(--ink3);color:var(--lime)}

/* Hero */
.hero{
position:relative;
overflow:hidden;
min-height:46vh;
display:flex;
flex-direction:column;
justify-content:flex-end;
text-align:right;
padding:30px 20px 52px;
background:radial-gradient(130% 120% at 100% 0%,#1d2a12 0%,var(--ink) 62%);
clip-path:polygon(0 0,100% 0,100% calc(100% - 32px),0 100%);
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:grayscale(.35) contrast(1.05)}
.hero.has-img::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(14,14,16,.35) 0%,rgba(14,14,16,.92) 78%);
}
.hero-badge{
position:absolute;
top:18px;right:18px;
z-index:2;
background:var(--lime);
color:var(--ink);
font-size:16px;
font-weight:800;
letter-spacing:.06em;
padding:7px 15px;
border-radius:999px;
transform:rotate(5deg);
box-shadow:0 0 0 4px rgba(232,255,58,.16);
}
.hero-in{position:relative;z-index:2}
.hero h1{
font-size:clamp(2.4rem,10.5vw,5.4rem);
letter-spacing:-.035em;
line-height:1.02;
background:linear-gradient(104deg,var(--cream) 34%,var(--lime) 94%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
text-wrap:balance;
}
.letter{display:inline-block;animation:rise .62s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*36ms)}
@keyframes rise{from{opacity:0;transform:translateY(.55em) rotate(7deg)}to{opacity:1;transform:none}}
.hero-desc{
margin:14px 0 0 auto;
max-width:34ch;
font-size:16px;
line-height:1.6;
color:var(--dim);
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}

/* 主体 */
.sheet{display:grid;gap:20px;padding:24px 18px 46px}
.toc{
background:var(--ink2);
border:1px solid var(--line);
border-radius:22px;
padding:18px 18px 8px;
}
.toc h2{font-size:18px;letter-spacing:.05em}
.toc hr{width:44px;height:0;border:0;border-top:3px solid var(--lime);margin:12px 0 6px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.toc a{
display:flex;
align-items:center;
min-height:44px;
font-size:16px;
font-weight:600;
text-decoration:none;
color:var(--dim);
border-bottom:1px dashed var(--line);
transition:color .2s ease,padding-left .2s ease;
}
.toc li:last-child a{border-bottom:0}
.toc a:hover,.toc a:focus-visible{color:var(--lime);padding-left:6px}

.flow{min-width:0}
.flow>div{
background:var(--ink2);
border-bottom:3px solid var(--lime);
border-radius:28px;
padding:26px 20px;
margin:0 0 20px;
}
.flow h2{font-size:clamp(1.35rem,4.6vw,1.9rem);margin:0}
.flow h3{font-size:1.16rem;margin:1.5em 0 .2em;color:var(--lime)}
.flow p{margin:.85em 0;color:rgba(244,241,234,.9)}
.flow hr{width:54px;height:0;border:0;border-top:3px solid var(--lime);margin:12px 0 4px}
.flow a{color:var(--lime);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.flow a:hover{background:rgba(232,255,58,.14)}
.flow ul,.flow ol{padding-left:1.25em;margin:.9em 0}
.flow li{margin:.45em 0}
.flow strong{color:var(--lime);font-weight:700}
.flow blockquote{
margin:1em 0;
padding:.6em 0 .6em 1em;
border-left:3px solid var(--lime);
color:var(--dim);
}

/* 页脚 */
footer{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:16px 20px;
padding:28px 18px 40px;
border-top:1px solid var(--line);
background:var(--ink2);
}
.f-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.f-mark{
width:40px;height:40px;
display:grid;
place-items:center;
background:var(--lime);
color:var(--ink);
border-radius:10px;
text-decoration:none;
font-size:16px;
letter-spacing:-.04em;
transform:rotate(-7deg);
}
.f-sub{flex:1 1 220px;min-width:0}
.sub{
display:flex;
min-width:0;
background:var(--ink3);
border:1px solid var(--line);
border-radius:999px;
overflow:hidden;
}
.sub input{
flex:1 1 auto;
min-width:0;
border:0;
background:transparent;
color:var(--cream);
font-family:inherit;
font-size:16px;
padding:11px 16px;
}
.sub input::placeholder{color:var(--dim)}
.sub input:focus{outline:2px solid var(--lime);outline-offset:-2px}
.sub button{
border:0;
background:var(--lime);
color:var(--ink);
font-family:inherit;
font-size:16px;
font-weight:800;
padding:0 18px;
min-height:44px;
cursor:pointer;
}
.f-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px}
.f-nav a{
display:flex;
align-items:center;
min-height:44px;
font-size:16px;
text-decoration:none;
color:var(--dim);
}
.f-nav a:hover,.f-nav a:focus-visible{color:var(--lime)}
.f-legal{font-size:16px;color:var(--dim)}

/* 滚动显现 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* 桌面 */
@media (min-width:860px){
body{padding-left:118px}
.rail{
position:fixed;
left:0;top:0;bottom:0;
width:118px;
flex-direction:column;
align-items:center;
gap:26px;
padding:22px 12px;
border-bottom:0;
border-right:1px solid var(--line);
}
.rail-nav{flex:1 1 auto;width:100%;min-height:0}
.rail-nav ol{flex-direction:column;gap:6px;overflow:visible}
.rail-nav a{
justify-content:center;
padding:0 6px;
border-radius:12px;
line-height:1.25;
text-align:center;
}
.mark{width:52px;height:52px;font-size:18px}
.ticker{height:36px;font-size:12px}
.hero-badge{top:22px;right:118px;font-size:16px}
.hero{padding:40px 118px 64px 48px;min-height:45vh}
.hero-desc{max-width:42ch}
.sheet{grid-template-columns:216px minmax(0,1fr);gap:40px;padding:46px 48px 78px}
.toc{position:sticky;top:26px;align-self:start}
.flow>div{padding:34px 34px}
footer{padding:30px 48px 44px;flex-wrap:nowrap}
.f-legal{margin-left:auto}
}
@media (min-width:1180px){
.flow>div{padding:40px 44px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.letter{animation:none}
.ticker-track{animation:none}
.reveal{opacity:1;transform:none;transition:none}
.mark,.toc a{transition:none}
}

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