@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Public+Sans:wght@100..900&display=swap');

:root{
  --acc:#00ff80;
  --blue:#0000ff;
  --fg:#eafff4;
  --dim:#9fd8b8;
  --line:rgba(0,255,128,.24);
  --head:'Lexend Mega','Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#000;
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:var(--acc)}
h1,h2,h3{font-family:var(--head);font-weight:800;letter-spacing:-.015em;line-height:1.14}
p{margin:0 0 1.1em}

.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* 头部 */
.site-head{background:#000;border-bottom:3px solid var(--acc)}
.brand-row{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:12px;
  border-bottom:3px solid var(--blue);
}
.logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  padding:6px 0;
  color:var(--acc);
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(1.2rem,4.4vw,2.1rem);
  text-decoration:none;
  letter-spacing:-.03em;
}
.logo .mark{width:34px;height:34px;object-fit:contain}
.head-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  min-height:46px;
  min-width:78px;
  padding:0 20px;
  background:var(--acc);
  color:#000;
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  border-radius:4px;
}
.head-cta:hover{background:var(--blue);color:#fff}

nav.primary ol{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  overflow-x:auto;
}
nav.primary li{flex:0 0 auto}
nav.primary a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:10px 15px;
  color:var(--fg);
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border-right:1px solid var(--line);
  white-space:nowrap;
}
nav.primary a:hover{background:var(--acc);color:#000}

/* 首屏 */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  align-items:center;
  min-height:100vh;
  min-height:100svh;
  border-bottom:4px solid var(--acc);
  overflow:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 79px,rgba(0,255,128,.13) 79px 80px);
}
.hero-bg{
  position:absolute;
  left:-2%;
  bottom:-.6rem;
  z-index:0;
  font-family:var(--head);
  font-weight:800;
  font-size:clamp(3rem,15vw,11rem);
  line-height:.82;
  letter-spacing:-.05em;
  white-space:nowrap;
  color:transparent;
  -webkit-text-stroke:2px rgba(0,255,128,.3);
  pointer-events:none;
}
.hero-copy{
  grid-column:2;
  grid-row:1;
  z-index:2;
  text-align:right;
  padding:48px 24px 48px 8px;
}
.hero-copy h1{
  display:inline-block;
  margin:0;
  padding:.34em .5em;
  background:var(--blue);
  color:#fff;
  font-size:clamp(1.7rem,4.4vw,3.2rem);
  box-shadow:9px 9px 0 var(--acc);
}
.collage{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:1;
  height:100%;
  min-height:60vh;
}
.collage figure{
  position:absolute;
  margin:0;
  overflow:hidden;
  background:#06180f;
}
.collage figure img{width:100%;height:100%;object-fit:cover;display:block}
.fig-a{
  width:64%;
  height:56%;
  top:9%;
  left:4%;
  border:3px solid var(--acc);
  transform:rotate(-2deg);
}
.fig-b{
  width:54%;
  height:44%;
  bottom:9%;
  left:28%;
  border:3px solid var(--blue);
  transform:rotate(2deg);
  background:var(--blue);
}

/* 正文 + 侧栏 */
.body-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 276px;
  gap:0;
  border-bottom:4px solid var(--acc);
}
.post{
  min-width:0;
  padding:38px 26px 44px 0;
}
.post > div{padding:0 0 42px}
.post > div + div{
  border-top:3px solid var(--blue);
  padding-top:38px;
}
.post h2{
  font-size:clamp(1.45rem,3.1vw,2.05rem);
  color:var(--acc);
  margin:0 0 6px;
}
.post h3{
  font-size:clamp(1.15rem,2.2vw,1.4rem);
  color:#fff;
  margin:1.6em 0 .5em;
}
.post h2 + hr,.post h3 + hr{margin:8px 0 22px}
.post p,.post li{font-size:1.0625rem;line-height:1.78;color:#e5fff2}
.post ul,.post ol{padding-left:1.3em;margin:0 0 1.2em}
.post li{margin-bottom:.5em}
.post a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
.post a:hover{background:var(--acc);color:#000;text-decoration:none}
.post strong{color:var(--acc)}
.post img{border:3px solid var(--acc);display:block;margin:1.2em 0;height:auto}
.post figure{margin:1.2em 0}
.post blockquote{
  margin:1.2em 0;
  padding:14px 18px;
  background:#07160f;
  border-left:5px solid var(--acc);
  border-radius:4px;
  color:#d8ffe8;
}
.post blockquote p:last-child{margin:0}
.post table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:1rem}
.post th,.post td{border:2px solid var(--line);padding:9px 11px;text-align:left}
.post th{background:var(--blue);color:#fff}
.post code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#0b1f15;
  padding:2px 5px;
  border-radius:4px;
}
.post div[id]{scroll-margin-top:24px}

hr{
  border:0;
  height:3px;
  background:var(--acc);
  margin:14px 0 24px;
}

.side{
  border-left:3px solid var(--blue);
  background:#040d09;
  padding:38px 18px 44px;
  scroll-margin-top:24px;
}
.side h2{font-size:1.05rem;margin:0;color:var(--acc);font-family:var(--head)}
.side hr{height:3px;background:var(--blue);margin:10px 0 16px}
.side ol{list-style:none;margin:0;padding:0}
.side li a{
  display:flex;
  align-items:center;
  min-height:46px;
  padding:11px 13px;
  margin-bottom:8px;
  background:#08170f;
  border-radius:4px;
  color:#dbffe9;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
}
.side li a:hover{background:var(--blue);color:#fff}

/* 页脚 */
.site-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
  max-width:1180px;
  margin:0 auto;
  padding:24px 18px 30px;
  border-top:4px solid var(--acc);
}
.site-foot .logo{min-height:42px;font-size:1.05rem;padding:0}
.f-nav ol{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:0;
  gap:2px;
}
.f-nav a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:6px 11px;
  color:#cdeddb;
  font-size:1rem;
  text-decoration:none;
  border-radius:4px;
}
.f-nav a:hover{background:var(--acc);color:#000}
.f-legal{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  color:var(--dim);
  font-size:.98rem;
}
.f-mini ol{display:flex;list-style:none;margin:0;padding:0;gap:8px}
.f-mini a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 12px;
  border:2px solid var(--acc);
  border-radius:4px;
  color:var(--acc);
  font-weight:700;
  text-decoration:none;
}
.f-mini a:hover{background:var(--acc);color:#000}

/* 进场 */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .18s linear,transform .18s linear}
html.js [data-reveal].in{opacity:1;transform:none}

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

/* 窄屏 */
@media (max-width:880px){
  .body-grid{grid-template-columns:1fr}
  .post{padding:30px 0 34px}
  .side{
    border-left:0;
    border-top:3px solid var(--blue);
    padding:30px 0 36px;
    background:transparent;
  }
  .side ol{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .side li a{margin-bottom:0;background:#08170f}
}

@media (max-width:760px){
  .hero{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    min-height:100svh;
  }
  .hero-copy{order:-1;text-align:left;padding:28px 0 18px;z-index:2}
  .hero-copy h1{box-shadow:7px 7px 0 var(--acc)}
  .collage{order:2;height:230px;min-height:230px;margin-bottom:26px}
  .fig-a{width:62%;height:78%;top:6%;left:0}
  .fig-b{width:52%;height:64%;bottom:4%;left:auto;right:0}
  .hero-bg{bottom:-.3rem}
  .brand-row{gap:8px}
  .head-cta{min-width:66px;padding:0 14px}
  .site-foot{gap:8px 14px}
  .f-legal{margin-left:0;width:100%;justify-content:space-between;grid-row:3}
}

@media (max-width:430px){
  .wrap{padding:0 14px}
  .side ol{grid-template-columns:1fr}
  .post h2{font-size:1.32rem}
}
</｜DSML｜ parameter>
</｜DSML｜ invoke>
</｜DSML｜ calls>

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