:root{
  --ink:#1f2617;
  --ink-2:#141a0f;
  --ink-3:#2b3423;
  --neon:#80ff00;
  --acid:#00ff00;
  --paper:#f4ffdd;
  --line:rgba(128,255,0,.30);
  --r:28px;
}

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

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

body{
  margin:0;
  min-height:100%;
  font-family:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:17px;
  line-height:1.7;
  color:var(--paper);
  background-color:var(--ink);
  background-image:
    radial-gradient(circle at 10% 6%,rgba(0,255,0,.12),transparent 44%),
    radial-gradient(circle at 92% 84%,rgba(128,255,0,.14),transparent 50%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    repeating-linear-gradient(0deg,rgba(128,255,0,.075) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,rgba(128,255,0,.06) 0 1px,transparent 1px 46px);
  mix-blend-mode:screen;
}

img{max-width:100%}
a{color:inherit}

:focus-visible{
  outline:3px solid var(--acid);
  outline-offset:3px;
}

/* ---------- 顶部 ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--ink-2);
  border-bottom:3px solid var(--neon);
  box-shadow:0 10px 0 rgba(0,0,0,.35);
}

.ticker{
  overflow:hidden;
  background:var(--neon);
  color:var(--ink-2);
  border-bottom:2px solid var(--ink-2);
}

.ticker-track{
  display:inline-flex;
  white-space:nowrap;
  animation:slide 30s linear infinite;
  will-change:transform;
}

.ticker-track span{
  padding:.22rem 1.1rem;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.16em;
}

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

.brandrow{
  display:flex;
  align-items:center;
  padding:.6rem 1rem .2rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  min-height:44px;
  text-decoration:none;
  color:var(--paper);
}

.mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 auto;
  overflow:hidden;
  border:2px solid var(--neon);
  border-radius:12px;
  background:var(--neon);
  color:var(--ink-2);
  font-weight:700;
  font-size:1.1rem;
  transform:rotate(-7deg);
  box-shadow:3px 3px 0 rgba(0,0,0,.55);
  animation:jitter 5s ease-in-out infinite;
}

.mark-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@keyframes jitter{
  0%,100%{transform:rotate(-7deg) translateY(0)}
  40%{transform:rotate(-4deg) translateY(-2px)}
  70%{transform:rotate(-9deg) translateY(1px)}
}

.brand-name{
  font-size:1.2rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
}

/* ---------- 导航 ---------- */

.mainnav{
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  padding:0 0 .55rem;
}

.mainnav::-webkit-scrollbar{display:none}

.navlist{
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  gap:.35rem;
  margin:0;
  padding:.2rem 1rem 0;
  width:max-content;
}

.navlist li:nth-child(odd) a{transform:rotate(-1.4deg)}
.navlist li:nth-child(even) a{transform:rotate(1.2deg)}

.navlist a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.4rem .8rem;
  font-size:16px;
  line-height:1.2;
  text-decoration:none;
  color:var(--paper);
  border:2px solid var(--line);
  border-radius:999px;
  background:rgba(128,255,0,.06);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}

.navlist a:hover,
.navlist a:focus-visible{
  background:var(--neon);
  border-color:var(--neon);
  color:var(--ink-2);
}

/* ---------- 首屏 ---------- */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
  border-bottom:3px solid var(--neon);
  isolation:isolate;
}

.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}

.hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(160%) contrast(1.08);
  mix-blend-mode:luminosity;
  opacity:.85;
}

.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(200deg,rgba(20,26,15,.25) 0%,rgba(20,26,15,.82) 62%,rgba(20,26,15,.96) 100%),
    radial-gradient(circle at 78% 22%,rgba(128,255,0,.30),transparent 58%);
}

.hero-ghost{
  position:absolute;
  right:-.12em;
  bottom:-.14em;
  z-index:1;
  font-size:clamp(4rem,17vw,13rem);
  font-weight:700;
  line-height:.8;
  letter-spacing:-.04em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px var(--neon);
  opacity:.6;
  mix-blend-mode:screen;
  pointer-events:none;
}

.hero-copy{
  position:relative;
  z-index:2;
  width:100%;
  max-width:980px;
  margin-left:auto;
  padding:6rem 1.1rem 3.2rem;
  text-align:right;
}

.hero-copy h1{
  margin:0;
  font-size:clamp(2rem,7.6vw,4.6rem);
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
  text-shadow:4px 4px 0 rgba(0,0,0,.55);
}

.hero-jump{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:1.4rem;
  padding:.6rem 1.3rem;
  font-size:1rem;
  font-weight:700;
  text-decoration:none;
  color:var(--ink-2);
  background:var(--neon);
  border:3px solid var(--ink-2);
  border-radius:999px;
  box-shadow:5px 5px 0 rgba(0,0,0,.6);
  transform:rotate(-2deg);
  transition:transform .18s ease,box-shadow .18s ease;
}

.hero-jump:hover{
  transform:rotate(1deg) translate(-2px,-2px);
  box-shadow:8px 8px 0 rgba(0,0,0,.6);
}

/* ---------- 主体 ---------- */

main{position:relative;z-index:1}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:2.4rem 1rem 4rem;
}

.sheet{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1.1rem;
}

.sheet-head,
.prose{
  background:var(--paper);
  color:var(--ink);
  border:3px solid var(--ink-2);
  border-radius:var(--r);
  box-shadow:0 20px 42px rgba(0,0,0,.5);
  min-width:0;
}

.sheet-head{
  padding:1.5rem 1.15rem 1.1rem;
  transform:rotate(-.6deg);
}

.sheet-head h2{
  margin:0;
  font-size:clamp(1.55rem,4.4vw,2.4rem);
  line-height:1.12;
  letter-spacing:-.02em;
  text-wrap:balance;
}

.sheet-head h2::after{
  content:"";
  display:block;
  width:74px;
  height:8px;
  margin-top:.7rem;
  background:var(--neon);
  border:2px solid var(--ink-2);
  border-radius:999px;
}

.subtitle{
  margin:.85rem 0 0;
  padding-left:.8rem;
  font-size:1rem;
  line-height:1.65;
  color:#3a4530;
  border-left:6px solid var(--ink-2);
  overflow-wrap:break-word;
}

.prose{
  padding:1.2rem 1.15rem 2rem;
  overflow-wrap:break-word;
}

.prose div[id]{scroll-margin-top:172px}

.prose > div{
  padding-top:1.4rem;
  margin-top:1.7rem;
  border-top:2px dashed rgba(31,38,23,.28);
}

.prose > div:first-child{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.prose h2{
  margin:.1rem 0 .7rem;
  font-size:clamp(1.35rem,3.6vw,1.95rem);
  line-height:1.2;
  letter-spacing:-.01em;
  border-bottom:3px solid var(--ink-2);
  padding-bottom:.35rem;
}

.prose h3{
  margin:1.4rem 0 .5rem;
  font-size:1.15rem;
  line-height:1.35;
}

.prose h3::before{
  content:"";
  display:inline-block;
  width:.62em;
  height:.62em;
  margin-right:.5rem;
  background:var(--neon);
  border:2px solid var(--ink-2);
  vertical-align:baseline;
}

.prose p{margin:0 0 1rem}

.prose ul,
.prose ol{
  margin:0 0 1rem;
  padding-left:1.35rem;
}

.prose li{margin:.3rem 0}

.prose a{
  color:#123b06;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.prose a:hover{background:var(--neon)}

.prose img{
  height:auto;
  border:3px solid var(--ink-2);
  border-radius:18px;
  box-shadow:6px 6px 0 rgba(31,38,23,.35);
  margin:.4rem 0 1rem;
}

.prose blockquote{
  margin:0 0 1rem;
  padding:.8rem 1rem;
  background:rgba(128,255,0,.25);
  border-left:7px solid var(--ink-2);
  border-radius:0 16px 16px 0;
}

.prose blockquote p:last-child{margin-bottom:0}

.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:1rem;
  margin:0 0 1rem;
}

.prose th,
.prose td{
  border:2px solid var(--ink-2);
  padding:.5rem .6rem;
  text-align:left;
}

.prose th{background:var(--neon)}

.prose code{
  background:rgba(31,38,23,.12);
  padding:.1em .35em;
  border-radius:6px;
}

/* ---------- 侧栏 ---------- */

.rail{
  align-self:start;
  padding:1rem .9rem 1.1rem;
  background:var(--ink-2);
  border:2px solid var(--neon);
  border-radius:22px;
  box-shadow:7px 7px 0 rgba(128,255,0,.32);
  transform:rotate(.7deg);
}

.rail-title{
  margin:0 0 .7rem;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--neon);
  text-transform:none;
}

.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.4rem;
}

.rail-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.42rem .7rem;
  font-size:16px;
  line-height:1.25;
  text-decoration:none;
  color:var(--paper);
  border:2px solid rgba(128,255,0,.35);
  border-radius:14px;
  background:rgba(128,255,0,.05);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.rail-list li:nth-child(odd) a{transform:rotate(-1.1deg)}
.rail-list li:nth-child(even) a{transform:rotate(1deg)}

.rail-list a:hover,
.rail-list a:focus-visible{
  background:var(--neon);
  border-color:var(--neon);
  color:var(--ink-2);
}

.rail-sticker{
  margin:1rem 0 0;
  padding:.5rem .7rem;
  font-size:.95rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink-2);
  background:var(--neon);
  border:2px solid var(--ink-2);
  border-radius:12px;
  transform:rotate(-2deg);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
  overflow-wrap:break-word;
}

/* ---------- 页脚 ---------- */

.foot{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1rem;
  align-items:center;
  padding:1.8rem 1rem 2rem;
  background:var(--ink-2);
  border-top:3px solid var(--neon);
}

.foot-big{
  display:inline-block;
  font-size:clamp(1.5rem,5.2vw,2.5rem);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--neon);
  transform:rotate(-1.6deg);
}

.foot-nav .navlist{
  padding:0;
  flex-wrap:wrap;
  width:auto;
}

.foot-nav .navlist a{
  min-height:40px;
  padding:.35rem .7rem;
  font-size:16px;
}

.foot-nav .navlist li:nth-child(odd) a{transform:rotate(-1deg)}
.foot-nav .navlist li:nth-child(even) a{transform:rotate(.9deg)}

.foot-legal p{
  margin:0;
  font-size:.95rem;
  color:rgba(244,255,221,.72);
  overflow-wrap:break-word;
}

/* ---------- 动效 ---------- */

.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 55ms);
}

.js [data-reveal].in{
  opacity:1;
  transform:none;
}

.js .sheet-head[data-reveal].in{transform:rotate(-.6deg)}
.js .rail-list li[data-reveal].in,
.js .navlist li[data-reveal].in{transform:none}

/* ---------- 断点 ---------- */

@media (min-width:900px){
  .sheet{
    grid-template-columns:minmax(0,1fr) 290px;
    align-items:start;
    gap:1.6rem;
  }
  .sheet-head{grid-column:1 / -1}
  .prose{padding:1.6rem 1.8rem 2.4rem}
  .sheet-head{padding:1.8rem 1.8rem 1.3rem}
  .rail{position:sticky;top:176px}
  .wrap{padding:3rem 1.5rem 5rem}
  .hero-copy{padding:6rem 2rem 4rem}
  .prose div[id]{scroll-margin-top:160px}
  .foot{
    grid-template-columns:1.3fr 1.2fr .8fr;
    padding:1.6rem 2rem;
    gap:1.4rem;
  }
  .foot-legal{text-align:right}
}

@media (min-width:1200px){
  .brandrow{padding-left:1.5rem}
  .mainnav .navlist{padding-left:1.5rem}
}

@media (max-width:520px){
  body{font-size:16.5px}
  .hero-copy{padding-top:5rem}
  .hero-jump{margin-top:1.1rem}
  .sheet-head{padding:1.25rem 1rem .9rem}
  .prose{padding:1rem 1rem 1.7rem}
  .prose div[id]{scroll-margin-top:186px}
  .rail{transform:rotate(0)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
  .mark{animation:none}
  .js [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .hero-jump{transition:none}
}

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