@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root{
  --neon:#87ff71;
  --sun:#ffce5c;
  --ink:#192617;
  --paper:#f2fce9;
  --text:#dcf3d2;
  --line:#3a5334;
  --rail:236px;
}

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

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

body{
  margin:0;
  padding-left:var(--rail);
  background:var(--ink);
  color:var(--text);
  font-family:'Noto Sans SC',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:17px;
  line-height:1.72;
  letter-spacing:.01em;
  overflow-x:hidden;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:700;line-height:1.2;letter-spacing:-.022em;margin:0;color:var(--paper)}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px}

/* ---- 左侧竖排导航 ---- */
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px 16px;
  background:#111c0e;
  border-right:2px dashed var(--line);
  z-index:40;
  overflow-y:auto;
}

.mark{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  background:var(--sun);
  border-radius:4px;
  text-decoration:none;
  transform:rotate(-3deg);
  flex:0 0 auto;
}
.mark-i{width:40px;height:40px;object-fit:contain}
.mark-shape{width:22px;height:22px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}

.nav{margin-top:2px}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav li{border-bottom:1px dashed rgba(135,255,113,.22)}
.nav li:nth-child(3){border-bottom:2px solid var(--neon)}
.nav a{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-height:46px;
  padding:6px 4px;
  text-align:right;
  text-decoration:none;
  font-weight:500;
  color:#d5f0ca;
  border-radius:4px;
}
.nav a::before{
  content:"";
  width:7px;height:7px;
  background:var(--sun);
  opacity:0;
  transform:rotate(45deg);
  transition:opacity .2s ease;
  flex:0 0 auto;
}
.nav a:hover,.nav a:focus-visible{background:var(--neon);color:var(--ink)}
.nav a:hover::before,.nav a:focus-visible::before{opacity:1;background:var(--ink)}

.cta{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 10px;
  background:var(--neon);
  color:var(--ink);
  font-weight:700;
  text-align:center;
  text-decoration:none;
  border-radius:4px;
  transform:rotate(-1.6deg);
}
.cta:hover{background:var(--sun)}

/* ---- 主区 ---- */
main{padding:0 clamp(16px,3.2vw,44px)}

.hero{
  position:relative;
  min-height:45vh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:26px 0;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(80deg,rgba(25,38,23,0) 42%,rgba(25,38,23,.92) 82%);
  z-index:2;
  pointer-events:none;
}
.hero .art{position:absolute;inset:0;pointer-events:none}

.sh{position:absolute;display:block}
.sh-1{
  width:clamp(90px,16vw,190px);height:clamp(90px,16vw,190px);
  background:var(--sun);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  left:4%;top:8%;
  transform:rotate(-7deg);
}
.sh-2{
  width:clamp(60px,10vw,130px);height:clamp(60px,10vw,130px);
  border-radius:50%;
  background:var(--neon);
  left:37%;top:56%;
  mix-blend-mode:screen;
  transform:rotate(9deg);
}
.sh-3{
  width:clamp(54px,9vw,104px);height:clamp(54px,9vw,104px);
  border:6px dotted var(--neon);
  left:63%;top:9%;
  transform:rotate(12deg);
}
.sh-4{
  width:clamp(80px,14vw,170px);height:clamp(80px,14vw,170px);
  background:rgba(255,206,92,.55);
  left:15%;top:58%;
  clip-path:polygon(0 0,100% 26%,66% 100%);
  mix-blend-mode:screen;
}
.dots{
  position:absolute;inset:0;
  background-image:radial-gradient(var(--line) 1.5px,transparent 1.6px);
  background-size:17px 17px;
  opacity:.55;
}

.ph{
  position:absolute;
  object-fit:cover;
  border:3px solid var(--paper);
  border-radius:4px;
  box-shadow:10px 10px 0 rgba(0,0,0,.42);
}
.ph-a{width:clamp(110px,19vw,220px);left:7%;top:15%;transform:rotate(-5deg);z-index:3}
.ph-b{width:clamp(90px,15vw,168px);left:34%;top:44%;transform:rotate(6deg);z-index:4}

.hero .copy{position:relative;z-index:5;text-align:right;max-width:min(100%,36rem)}
.brand{
  margin:0 0 8px;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--sun);
}
.hero h1{font-size:clamp(1.9rem,6vw,3.5rem);margin:0}

/* ---- 内容栏 ---- */
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding-bottom:52px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 236px;
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
.post{max-width:46rem}

.post div{
  padding:38px 0;
  border-top:2px dashed var(--line);
  scroll-margin-top:22px;
}
.post div:first-of-type{border-top:none;padding-top:4px}

.post h2{font-size:clamp(1.35rem,3vw,1.9rem);margin:0 0 14px}
.post h3{font-size:clamp(1.1rem,2.2vw,1.3rem);margin:26px 0 10px}
.post h2>span,.post h3>span{
  display:inline-block;
  padding:0 .1em;
  background:linear-gradient(transparent 64%,rgba(255,206,92,.42) 64%,rgba(255,206,92,.42) 96%,transparent 96%);
}
.post p{margin:0 0 14px}
.post ul,.post ol{margin:0 0 16px;padding-left:1.25em}
.post li{margin:0 0 8px}
.post li::marker{color:var(--neon)}
.post strong{color:var(--paper)}
.post a{
  color:var(--neon);
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px;
}
.post a:hover{background:var(--neon);color:var(--ink);text-decoration:none}
.post blockquote{
  margin:0 0 16px;
  padding:10px 16px;
  border-left:6px solid var(--sun);
  background:#142010;
  border-radius:0 4px 4px 0;
}
.post img{border-radius:4px;margin:0 0 16px}
.post code{background:#142010;padding:1px 5px;border-radius:3px;color:var(--sun)}

/* ---- 右侧目录 ---- */
.side{
  position:sticky;
  top:24px;
  padding:16px 14px;
  background:#111c0e;
  border:2px dotted var(--line);
  border-radius:4px;
}
.side h2{font-size:1rem;letter-spacing:.16em;margin:0 0 10px;color:var(--sun)}
.side h2>span{display:inline-block;padding-bottom:2px;border-bottom:2px solid var(--sun)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side a{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:42px;
  padding:6px 8px;
  text-align:right;
  text-decoration:none;
  font-size:.95rem;
  color:#cbe9c0;
  border-radius:4px;
}
.side a:hover,.side a:focus-visible{background:var(--sun);color:var(--ink)}

/* ---- 页脚 ---- */
.foot{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(16px,3.2vw,44px);
  border-top:2px dashed var(--line);
  font-size:.95rem;
  color:#a9c79e;
}
.foot p{margin:0}
.foot small a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  background:var(--sun);
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  border-radius:4px;
}

/* ---- 滚入动效 ---- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

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

/* ---- 窄屏 ---- */
@media (max-width:900px){
  body{padding-left:0;padding-top:66px}
  .rail{
    right:0;bottom:auto;
    width:auto;height:66px;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-right:none;
    border-bottom:2px dashed var(--line);
    overflow:visible;
  }
  .mark{width:44px;height:44px}
  .nav{flex:1 1 auto;min-width:0;margin:0}
  .nav ul{
    flex-direction:row;
    gap:4px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{border-bottom:none;flex:0 0 auto}
  .nav a{
    min-height:44px;
    padding:0 10px;
    white-space:nowrap;
    border:1px solid rgba(135,255,113,.25);
  }
  .nav a::before{display:none}
  .cta{margin:0;flex:0 0 auto;min-height:44px;padding:0 12px;font-size:.95rem;white-space:nowrap}
  .hero{min-height:44vh;padding:16px 0 20px}
  .hero .copy{max-width:100%}
  .wrap{grid-template-columns:minmax(0,1fr);gap:26px}
  .post{max-width:none}
  .side{position:static}
  .post div{scroll-margin-top:80px}
}

@media (max-width:420px){
  .cta{font-size:.85rem;padding:0 8px;letter-spacing:0}
  .brand{font-size:.9rem;letter-spacing:.14em}
}

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