@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root{
  --neon:#87ff71;
  --sun:#ffce5c;
  --ink:#192617;
  --ink2:#22331f;
  --paper:#f0fbe9;
  --muted:rgba(240,251,233,.78);
  --dash:rgba(135,255,113,.32);
  --r:28px;
}

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

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

body{
  margin:0;
  font-family:'Plus Jakarta Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:17px;
  line-height:1.8;
  color:var(--paper);
  background-color:var(--ink);
  background-image:radial-gradient(rgba(135,255,113,.14) 1.4px,transparent 1.5px);
  background-size:24px 24px;
  overflow-x:hidden;
}

a{color:var(--neon)}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 1.05em}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

small{
  display:block;
  font-size:.72rem;
  letter-spacing:.24em;
  font-weight:700;
  color:var(--sun);
}

.shell{width:min(100% - 28px,1120px);margin-inline:auto}

/* 顶部细条 */
.strip{
  background-color:var(--sun);
  background-image:radial-gradient(var(--ink) 1.2px,transparent 1.3px);
  background-size:14px 14px;
  color:var(--ink);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.26em;
  padding:5px 12px;
  text-align:center;
}
.strip p{display:inline-block;margin:0;padding:0 12px;background:var(--sun)}

/* 顶栏 */
.bar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  background:rgba(25,38,23,.95);
  border-bottom:2px dashed var(--dash);
}

.mark{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:var(--sun);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  border:2px solid var(--ink);
  transform:rotate(-6deg);
}
.mark img{width:34px;height:34px;border-radius:10px;object-fit:cover}
.mark-glyph{font-size:1.15rem;line-height:1}

/* 全屏菜单 */
.menu summary{
  position:relative;
  z-index:60;
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  padding:11px 18px;
  border-radius:999px;
  border:2px dashed var(--neon);
  color:var(--neon);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.14em;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:''}
.menu[open] summary{background:var(--neon);color:var(--ink);border-style:solid}

.bars{
  width:18px;
  height:12px;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 2px,100% 2px,100% 2px;
  background-position:0 0,0 5px,0 10px;
  background-repeat:no-repeat;
}

.menu menu{
  position:fixed;
  inset:0;
  z-index:50;
  margin:0;
  padding:82px 20px 36px;
  list-style:none;
  display:grid;
  align-content:center;
  gap:2px;
  overflow:auto;
  background-color:var(--ink);
  background-image:
    repeating-linear-gradient(45deg,rgba(135,255,113,.09) 0 2px,transparent 2px 22px),
    radial-gradient(rgba(255,206,92,.18) 1.6px,transparent 1.7px);
  background-size:auto,26px 26px;
}
.menu menu li{border-bottom:2px dashed var(--dash)}
.menu menu a{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:52px;
  padding:14px 6px;
  color:var(--paper);
  text-decoration:none;
  font-weight:700;
  font-size:clamp(1.05rem,4.2vw,1.5rem);
}
.menu menu a:hover,.menu menu a:focus-visible{color:var(--neon)}
.menu menu .idx{font-size:.7rem;letter-spacing:.2em;color:var(--sun);min-width:2.4em}

/* 主视觉 */
.hero{
  position:relative;
  overflow:hidden;
  min-height:70vh;
  display:grid;
  align-items:center;
  padding:34px 0 54px;
}
.hero-in{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:28px;
  align-items:center;
}
.hero-copy{text-align:right}

.badge{
  display:inline-block;
  transform:rotate(-3deg);
  background:var(--sun);
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:6px 15px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.18em;
  box-shadow:4px 4px 0 var(--neon);
}

h1{
  margin:16px 0 12px;
  font-size:clamp(2rem,7vw,3.4rem);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--neon);
  text-shadow:4px 4px 0 rgba(255,206,92,.3);
}
.lead{margin:0 0 0 auto;max-width:32ch;color:var(--muted);font-size:1rem}

.hero-art{position:relative;min-height:250px}
.sh{position:absolute;display:block}
.tri{left:4%;top:8%;width:118px;height:104px;background:var(--neon);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(-9deg);animation:float 7s ease-in-out infinite}
.sq{right:12%;top:0;width:84px;height:84px;background:var(--sun);border-radius:24px;transform:rotate(14deg);animation:float 9s ease-in-out infinite reverse}
.cir{left:34%;bottom:10%;width:66px;height:66px;border-radius:50%;border:8px dotted var(--neon);animation:spin 18s linear infinite}
.wave{right:0;bottom:16%;width:150px;height:34px;border-radius:18px;transform:rotate(-4deg);background:repeating-linear-gradient(90deg,var(--sun) 0 10px,transparent 10px 20px)}

@keyframes float{50%{transform:translateY(-14px) rotate(5deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* 版面 */
main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 21rem;
  gap:38px;
  align-items:start;
  padding:10px 0 66px;
}

article{min-width:0}
article div{
  padding:38px 0;
  border-top:2px dashed var(--dash);
  scroll-margin-top:104px;
}
article div:first-child{border-top:0;padding-top:6px}
article p{margin:0 0 1.05em}
article ul,article ol{margin:0 0 1.1em;padding-left:1.35em}
article li{margin:.34em 0}
article a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
article strong{color:var(--sun)}
article img{border-radius:18px;margin:0 0 1.1em}
article blockquote{
  margin:0 0 1.1em;
  padding:16px 20px;
  border-left:6px solid var(--neon);
  background:rgba(135,255,113,.08);
  border-radius:0 18px 18px 0;
}
article table{width:100%;border-collapse:collapse;margin:0 0 1.1em;font-size:.96rem}
article th,article td{border:2px dashed var(--dash);padding:9px 11px;text-align:left}

article h2{
  margin:.2em 0 .7em;
  font-size:clamp(1.42rem,4.4vw,1.92rem);
  line-height:1.32;
  letter-spacing:-.01em;
  color:var(--neon);
}
article h2::after{
  content:"";
  display:block;
  width:58px;
  height:10px;
  margin-top:12px;
  background:var(--sun);
  clip-path:polygon(0 45%,100% 0,100% 100%,0 100%);
}
article h3{margin:1.4em 0 .55em;font-size:1.12rem;color:var(--sun);line-height:1.45}

/* 侧栏 */
aside{
  position:sticky;
  top:96px;
  background:var(--sun);
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:var(--r);
  padding:22px 20px;
  transform:rotate(-.7deg);
  box-shadow:8px 8px 0 rgba(135,255,113,.5);
}
aside small{color:var(--ink);opacity:.72}
aside h2{margin:.3em 0 .7em;font-size:1.25rem;color:var(--ink);line-height:1.35}
aside h2::after{content:"";display:block;width:44px;height:8px;margin-top:8px;background:var(--ink)}
aside ol{margin:0;padding:0;list-style:none}
aside li{border-top:2px dashed rgba(25,38,23,.35)}
aside li:first-child{border-top:0}
aside a{
  display:block;
  padding:9px 0;
  min-height:40px;
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:.94rem;
}
aside a:hover,aside a:focus-visible{text-decoration:underline;text-decoration-thickness:2px}

/* 页脚 */
.foot{
  border-top:3px dashed var(--dash);
  background:rgba(0,0,0,.24);
  padding:26px 16px 34px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 18px;
}
.foot p{margin:0;font-weight:700;color:var(--neon);font-size:.95rem;letter-spacing:.04em}
.foot small{color:var(--muted);letter-spacing:.08em}

/* 滚动显现 */
.pre{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.pre.in{opacity:1;transform:none}
aside.pre{transform:translateY(16px) rotate(-.7deg)}
aside.pre.in{transform:rotate(-.7deg)}

@media (max-width:900px){
  main{grid-template-columns:1fr;gap:26px}
  aside{position:static;order:2}
  aside,aside.pre,aside.pre.in{transform:none}
  article div{scroll-margin-top:92px}
  .hero-in{grid-template-columns:1fr}
  .hero-art{min-height:170px;order:2}
  .hero-copy{text-align:left}
  .lead{margin-left:0}
  .tri{width:96px;height:84px;left:0}
  .sq{width:66px;height:66px;right:18%}
  .wave{width:120px}
}

@media (max-width:520px){
  body{font-size:16.5px}
  .hero{min-height:auto;padding-top:24px;padding-bottom:34px}
  article h2{font-size:1.42rem}
  .menu menu{padding-top:74px}
  .foot{padding:22px 14px 30px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sh{animation:none}
  .pre{opacity:1;transform:none;transition:none}
  aside.pre{transform:none}
}

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