@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

:root{
  --lime:#80ff00;
  --neon:#00ff00;
  --ink:#1f2617;
  --ink2:#2b3520;
  --paper:#f4ffdf;
  --dim:#bcd99f;
  --r:28px;
  --bw:3px;
  --hand:"Caveat","Comic Sans MS","Segoe Script",cursive;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:
    radial-gradient(circle at 84% 6%,rgba(128,255,0,.20),transparent 42%),
    radial-gradient(circle at 6% 58%,rgba(0,255,0,.14),transparent 46%),
    var(--ink);
  color:var(--paper);
  font-family:"Quicksand",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

a{color:var(--lime);text-decoration:none}
a:hover{color:var(--neon)}
img{max-width:100%;display:block}
p{margin:0 0 1em}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}

/* 顶部细条 */
.ticker{
  background:var(--lime);
  color:var(--ink);
  border-bottom:var(--bw) solid var(--ink);
  overflow:hidden;
  font-family:var(--hand);
  font-size:22px;
  font-weight:700;
  letter-spacing:.08em;
}
.ticker-run{
  display:flex;
  gap:.55em;
  width:max-content;
  padding:2px 0;
  white-space:nowrap;
  animation:slide 26s linear infinite;
}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 页头 */
.bar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:16px;
  padding:10px clamp(12px,3vw,28px);
  background:rgba(31,38,23,.95);
  border-bottom:var(--bw) solid var(--lime);
}
.logo{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  border-radius:50%;
  background:var(--lime);
  color:var(--ink);
  border:var(--bw) solid var(--paper);
  transform:rotate(-9deg);
  transition:transform .25s ease;
  overflow:hidden;
  z-index:2;
}
.logo:hover{transform:rotate(9deg) scale(1.07)}
.logo .mark{width:100%;height:100%;object-fit:cover;border-radius:50%}
.logo span.mark{display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink)}

.nav{flex:1 1 auto;min-width:0}
.nav ol{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:0;
  padding:0;
  list-style:none;
  justify-content:flex-end;
}
.nav li{min-width:0}
.nav a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  padding:8px 13px;
  border:2px solid var(--lime);
  border-radius:999px;
  color:var(--paper);
  font-weight:600;
  font-size:16px;
  white-space:nowrap;
  background:rgba(128,255,0,.07);
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.nav a .i{font-size:12px;color:var(--lime);line-height:1}
.nav li:nth-child(odd) a{transform:rotate(-1.4deg)}
.nav li:nth-child(even) a{transform:rotate(1.4deg)}
.nav a:hover,.nav a:focus-visible{background:var(--lime);color:var(--ink);transform:rotate(0) scale(1.04)}
.nav a:hover .i,.nav a:focus-visible .i{color:var(--ink)}

/* 头图区 */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,1fr);
  align-items:center;
  gap:clamp(16px,4vw,44px);
  min-height:45vh;
  padding:clamp(20px,4vw,40px) clamp(14px,4vw,40px) clamp(34px,6vw,60px);
  border-bottom:var(--bw) solid var(--lime);
  clip-path:polygon(0 0,100% 0,100% 93%,0 100%);
}
.hero-art{
  margin:0;
  position:relative;
  aspect-ratio:4/3;
  border:var(--bw) solid var(--paper);
  border-radius:var(--r);
  overflow:hidden;
  transform:rotate(-2deg);
  background:linear-gradient(135deg,var(--neon),var(--ink2));
  z-index:1;
}
.hero-art .hero-img{width:100%;height:100%;object-fit:cover;filter:saturate(150%) contrast(1.04)}
.hero-art .blob{
  position:absolute;
  inset:0;
  background:conic-gradient(from 30deg,var(--lime),var(--neon),var(--ink2),var(--lime));
  filter:saturate(160%);
}
.hero-copy{text-align:right;min-width:0}
.hero-copy h1{
  font-family:var(--hand);
  font-size:clamp(36px,6.4vw,76px);
  font-weight:700;
  color:var(--lime);
  margin:0 0 12px;
  text-shadow:4px 4px 0 rgba(0,0,0,.45);
  transform:rotate(-1.5deg);
  overflow-wrap:anywhere;
}
.hero-copy .lead{
  max-width:44ch;
  margin:0 0 20px auto;
  color:var(--dim);
  font-size:17px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 26px;
  border:var(--bw) solid var(--ink);
  border-radius:999px;
  background:var(--lime);
  color:var(--ink);
  font-weight:700;
  font-size:17px;
  transform:rotate(-1.5deg);
  transition:transform .2s ease,background .2s ease;
}
.btn:hover,.btn:focus-visible{background:var(--neon);color:var(--ink);transform:rotate(1.5deg) scale(1.03)}
.btn.big{font-size:20px;padding:14px 34px;min-height:54px}

/* 主体分栏 */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,270px);
  gap:clamp(18px,3vw,40px);
  align-items:start;
  padding:clamp(20px,4vw,44px) clamp(14px,4vw,40px) 44px;
}
.prose{min-width:0}
.prose > div{
  position:relative;
  scroll-margin-top:120px;
  padding:clamp(18px,3vw,30px) 0;
  border-top:2px dashed rgba(128,255,0,.35);
}
.prose > div:first-child{border-top:0;padding-top:0}
.prose > div::before{
  content:"";
  position:absolute;
  top:8px;
  left:0;
  width:16px;
  height:16px;
  background:var(--neon);
  border:2px solid var(--ink);
  border-radius:5px;
  transform:rotate(18deg);
  mix-blend-mode:screen;
  z-index:2;
}
.prose > div:first-child::before{display:none}
.prose h2{
  font-family:var(--hand);
  font-size:clamp(26px,3.4vw,38px);
  color:var(--lime);
  margin-top:.1em;
  overflow-wrap:anywhere;
}
.prose h3{font-size:20px;color:var(--neon);margin-top:1.2em}
.prose p{margin:0 0 1em;overflow-wrap:break-word}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1em}
.prose li{margin:.3em 0}
.prose blockquote{
  margin:1em 0;
  padding:12px 18px;
  border-left:6px solid var(--neon);
  border-radius:0 var(--r) var(--r) 0;
  background:rgba(0,255,0,.07);
  color:var(--paper);
}
.prose img{border:var(--bw) solid var(--lime);border-radius:20px;margin:1em 0;height:auto}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.prose th,.prose td{border:2px solid rgba(128,255,0,.4);padding:8px 10px;text-align:left}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace;background:rgba(0,255,0,.14);padding:1px 5px;border-radius:6px}
.prose a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.subtitle{margin:.1em 0 .9em;color:var(--dim);font-size:16px;font-weight:500;line-height:1.7}

/* 收尾块 */
.outro{
  margin-top:30px;
  padding:clamp(22px,4vw,42px);
  border:var(--bw) solid var(--lime);
  border-radius:var(--r);
  background:linear-gradient(140deg,rgba(128,255,0,.18),rgba(0,255,0,.05));
  transform:rotate(-.7deg);
}
.outro h2{
  font-family:var(--hand);
  font-size:clamp(26px,4vw,44px);
  color:var(--lime);
  margin:0 0 .15em;
}
.outro .subtitle{margin:0 0 18px}
.outro-cta{margin:0}

/* 侧栏 */
.rail{
  position:sticky;
  top:96px;
  border:var(--bw) solid var(--lime);
  border-radius:var(--r);
  padding:18px 16px;
  background:rgba(0,255,0,.07);
  transform:rotate(1deg);
  z-index:5;
}
.rail h2{
  font-family:var(--hand);
  font-size:27px;
  color:var(--neon);
  margin:0;
}
.rail .subtitle{font-size:15px;margin:0 0 12px}
.rail-list{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.rail-list li{display:flex;align-items:center;gap:8px;min-width:0}
.rail-list .num{font-family:var(--hand);font-weight:700;font-size:17px;color:var(--neon);flex:0 0 auto}
.rail-list a{
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  min-height:42px;
  padding:5px 8px;
  border:2px solid transparent;
  border-radius:12px;
  color:var(--paper);
  font-size:16px;
  overflow-wrap:anywhere;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.rail-list a:hover,.rail-list a:focus-visible{background:var(--lime);color:var(--ink);border-color:var(--ink);transform:translateX(-3px)}
.rail-list li:hover .num{color:var(--ink)}

/* 页脚 */
.foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 26px;
  padding:clamp(24px,4vw,44px) clamp(14px,4vw,40px) 38px;
  border-top:var(--bw) solid var(--lime);
  background:var(--ink2);
}
.foot p{margin:0}
.f-brand{
  font-family:var(--hand);
  font-size:27px;
  font-weight:700;
  color:var(--lime);
  text-align:left;
  display:flex;
  align-items:center;
  gap:8px;
}
.f-brand .mark{font-size:19px;color:var(--neon)}
.f-links{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:flex-end;align-items:center}
.f-links a{display:inline-flex;align-items:center;min-height:40px;padding:4px 7px;font-size:16px}
.f-cta{grid-column:1/-1;margin:10px 0 4px;text-align:center}
.f-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:12px 44px;
  border:var(--bw) solid var(--paper);
  border-radius:999px;
  background:var(--lime);
  color:var(--ink);
  font-size:20px;
  font-weight:700;
  transition:background .2s ease,transform .2s ease;
}
.f-cta a:hover,.f-cta a:focus-visible{background:var(--neon);color:var(--ink);transform:rotate(-1.4deg)}
.foot small{grid-column:1/-1;text-align:center;color:var(--dim);font-size:14px;line-height:1.7;margin-top:6px}

/* 滚动显现 */
.reveal{opacity:0;transform:translateY(20px) rotate(-.8deg);transition:opacity .55s ease,transform .55s ease}
.reveal.in{opacity:1;transform:none}
.rail.reveal.in{transform:rotate(1deg)}

/* 断点 */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;order:2;transform:none;margin-top:8px}
  .rail.reveal.in{transform:none}
}

@media (max-width:760px){
  .bar{flex-wrap:nowrap;gap:10px;padding:8px 12px}
  .logo{width:44px;height:44px}
  .nav{flex:1 1 auto;overflow:hidden}
  .nav ol{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
  .nav a{min-height:44px;padding:8px 11px;font-size:16px}
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    clip-path:polygon(0 0,100% 0,100% 96%,0 100%);
    padding-top:16px;
  }
  .hero-copy{order:-1;text-align:right}
  .hero-art{aspect-ratio:16/9;transform:rotate(-1.5deg)}
  .hero-copy h1{font-size:clamp(32px,10vw,46px)}
  .hero-copy .lead{font-size:16px;margin-bottom:16px}
  .prose > div{scroll-margin-top:118px}
  .foot{grid-template-columns:1fr;text-align:center}
  .f-brand{justify-content:center;text-align:center}
  .f-links{justify-content:center}
  .outro{transform:none}
  .f-cta a{padding:12px 32px}
}

@media (max-width:400px){
  body{font-size:16px}
  .hero-copy h1{font-size:30px}
  .f-cta a{font-size:18px;padding:12px 24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .rail{transform:none!important}
}

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