:root{
  --lime:#80ff00;
  --green:#00ff00;
  --ink:#1f2617;
  --ink-2:#131a0e;
  --paper:#eaffe0;
  --glass:rgba(255,255,255,.09);
  --line:rgba(128,255,0,.34);
  --r:28px;
  --head-h:96px;
  --pad:clamp(16px,4vw,44px);
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 12% 6%,rgba(0,255,0,.20),transparent 44%),
    radial-gradient(circle at 88% 3%,rgba(128,255,0,.24),transparent 40%),
    radial-gradient(circle at 70% 88%,rgba(0,255,0,.12),transparent 46%),
    var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
  filter:saturate(112%);
}

p{margin:0 0 1em}
a{color:var(--lime)}
img{max-width:100%;height:auto;display:block}

/* 顶栏 */
.top{
  position:sticky;
  top:0;
  z-index:60;
  display:flex;
  align-items:center;
  gap:10px 12px;
  flex-wrap:wrap;
  padding:10px var(--pad);
  background:rgba(19,26,14,.86);
  backdrop-filter:blur(16px) saturate(170%);
  border-bottom:2px solid var(--line);
}

.brand{
  flex:0 0 auto;
  font-size:1.12rem;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--lime);
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  transform:rotate(-1.6deg);
  animation:jitter 4.2s ease-in-out infinite;
}

.brand:hover,.brand:focus-visible{background:var(--green);color:var(--ink)}

.top nav{flex:1 1 260px;min-width:0}

.top nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 4px;
}

.top nav a{
  display:inline-block;
  padding:10px 11px;
  min-height:44px;
  border-radius:999px;
  border:2px solid transparent;
  color:var(--paper);
  text-decoration:none;
  font-size:16px;
  line-height:1.4;
}

.top nav a:hover,.top nav a:focus-visible{
  background:var(--green);
  color:var(--ink);
  border-color:var(--ink);
}

.cta{
  flex:0 0 auto;
  display:inline-block;
  padding:11px 20px;
  min-height:44px;
  border-radius:999px;
  background:var(--lime);
  color:var(--ink);
  font-weight:700;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--green);
  transform:rotate(1.8deg);
  transition:transform .18s ease,box-shadow .18s ease;
}

.cta:hover,.cta:focus-visible{
  transform:rotate(-1.4deg) translate(-1px,-1px);
  box-shadow:6px 6px 0 var(--green);
}

/* 首屏 */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:calc(var(--head-h) + 30px) 18px 96px;
  overflow:hidden;
  text-align:center;
}

.hero-media{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
}

.hero-media img{
  position:absolute;
  width:min(40vw,330px);
  filter:saturate(155%) contrast(108%);
  border:6px solid var(--paper);
  border-radius:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  mix-blend-mode:normal;
  object-fit:cover;
}

.hero-media img:nth-child(1){
  top:12%;
  left:-5%;
  transform:rotate(-8deg);
  z-index:1;
}

.hero-media img:nth-child(2){
  bottom:16%;
  right:-6%;
  transform:rotate(6.5deg);
  z-index:2;
}

.hero-txt{
  position:relative;
  z-index:3;
  max-width:22em;
}

.hero-txt h1{
  margin:0;
  font-size:clamp(2.5rem,9vw,5.4rem);
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--lime);
  text-shadow:5px 5px 0 rgba(0,255,0,.28);
  mix-blend-mode:screen;
  transform:rotate(-1deg);
}

.hero-desc{
  margin:1.1em auto 0;
  max-width:26em;
  font-size:clamp(1rem,2.3vw,1.15rem);
  line-height:1.65;
  color:var(--paper);
  background:rgba(19,26,14,.55);
  border:2px dashed var(--line);
  border-radius:var(--r);
  padding:12px 18px;
  backdrop-filter:blur(8px);
}

.marquee{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  overflow:hidden;
  background:rgba(0,255,0,.12);
  border-top:2px dashed var(--line);
  border-bottom:2px dashed var(--line);
}

.marquee p{
  margin:0;
  white-space:nowrap;
  font-weight:700;
  font-size:16px;
  letter-spacing:.2em;
  color:var(--lime);
  padding:8px 0;
  animation:slide 22s linear infinite;
}

/* 正文 */
main{display:block}

div{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  max-width:1180px;
  margin:0 auto;
  padding:54px var(--pad) 84px;
}

div > article{
  grid-column:1;
  position:relative;
  margin:0 0 34px;
  padding:clamp(20px,3.4vw,38px);
  background:var(--glass);
  border:2px solid rgba(255,255,255,.18);
  border-radius:var(--r);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:0 20px 48px rgba(0,0,0,.4);
  scroll-margin-top:150px;
  transform:rotate(-.35deg);
}

div > article:nth-of-type(even){transform:rotate(.42deg)}

div h2{
  margin:.1em 0 0;
  font-size:clamp(1.65rem,4vw,2.35rem);
  line-height:1.16;
  letter-spacing:-.025em;
  color:var(--green);
}

div h3{
  margin:.1em 0 0;
  font-size:clamp(1.25rem,2.8vw,1.5rem);
  line-height:1.3;
  color:var(--lime);
}

hr{
  border:0;
  height:3px;
  margin:.75em 0 1.1em;
  border-radius:3px;
  background:linear-gradient(90deg,var(--lime),rgba(128,255,0,0));
}

div article a{
  color:var(--lime);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

div article a:hover{background:var(--green);color:var(--ink);text-decoration:none}

div article ul,div article ol{padding-left:1.3em}
div article li{margin:.35em 0}
div article strong{color:var(--green)}
div article blockquote{
  margin:1.2em 0;
  padding:.4em 0 .4em 1em;
  border-left:5px solid var(--lime);
  color:rgba(234,255,224,.92);
}
div article table{width:100%;border-collapse:collapse;font-size:16px}
div article th,div article td{border:2px solid var(--line);padding:10px;text-align:left}
div article code{
  background:rgba(0,255,0,.16);
  border-radius:6px;
  padding:.1em .35em;
  font-size:15px;
}

/* 侧栏 */
aside{
  grid-column:1;
  margin:6px 0 0;
  padding:20px;
  border:2px solid var(--lime);
  border-radius:var(--r);
  background:rgba(0,255,0,.14);
  backdrop-filter:blur(12px) saturate(160%);
  box-shadow:6px 6px 0 rgba(0,255,0,.22);
  transform:rotate(1.2deg);
  align-self:start;
}

aside h2{
  margin:0;
  font-size:1.24rem;
  letter-spacing:-.01em;
  color:var(--lime);
}

aside hr{margin:.55em 0 .8em}

aside p{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}

aside a{
  display:block;
  padding:11px 14px;
  min-height:44px;
  border-radius:999px;
  background:rgba(19,26,14,.5);
  border:2px solid rgba(255,255,255,.16);
  color:var(--paper);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
}

aside a:hover,aside a:focus-visible{
  background:var(--green);
  border-color:var(--ink);
  color:var(--ink);
}

/* 页脚 */
footer{
  border-top:3px solid var(--lime);
  background:var(--ink-2);
  padding:28px var(--pad) 36px;
}

.foot-row{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 24px;
}

.foot-brand{
  font-size:clamp(1.7rem,6vw,2.7rem);
  font-weight:700;
  letter-spacing:-.035em;
  color:var(--lime);
  text-decoration:none;
  line-height:1.1;
  transform:rotate(-1.2deg);
}

footer nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}

footer nav a{
  display:inline-block;
  padding:11px 9px;
  min-height:44px;
  color:var(--paper);
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  border-radius:10px;
}

footer nav a:hover,footer nav a:focus-visible{background:var(--green);color:var(--ink)}

.copy{
  margin:0;
  font-size:16px;
  color:rgba(234,255,224,.78);
}

/* 入场 */
.js div > article,
.js aside{
  opacity:0;
  translate:0 22px;
  transition:opacity .55s ease,translate .55s cubic-bezier(.2,.75,.3,1);
}

.js div > article.in,
.js aside.in{opacity:1;translate:0 0}

@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@keyframes jitter{
  0%,100%{transform:rotate(-1.6deg)}
  50%{transform:rotate(1.4deg) translateY(-1px)}
}

/* 桌面：侧栏固定于右 */
@media (min-width:1000px){
  div{
    grid-template-columns:minmax(0,1fr) 300px;
    column-gap:46px;
  }
  aside{
    grid-column:2;
    grid-row:1 / span 60;
    margin-top:54px;
    position:sticky;
    top:calc(var(--head-h) + 20px);
    transform:rotate(1.6deg);
  }
}

@media (max-width:999px){
  aside{margin-top:14px}
}

@media (max-width:640px){
  :root{--head-h:112px}
  .hero{padding-top:calc(var(--head-h) + 14px);padding-bottom:104px}
  .hero-media img{width:44vw;border-width:4px}
  .hero-media img:nth-child(1){top:9%;left:-8%}
  .hero-media img:nth-child(2){bottom:20%;right:-9%}
  .hero-desc{font-size:16px;padding:10px 14px}
  .foot-row{flex-direction:column;align-items:flex-start}
  .copy{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .brand,.marquee p{animation:none}
  .js div > article,
  .js aside{opacity:1;translate:none;transition:none}
  .cta{transition:none}
}

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