:root{
  --neon:#87ff71;
  --mustard:#ffce5c;
  --ink:#192617;
  --ink-2:#132010;
  --ink-3:#243a22;
  --paper:#f2ffe8;
  --line:rgba(135,255,113,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--ink);
  background-image:radial-gradient(var(--ink-3) 1.5px,transparent 1.6px);
  background-size:20px 20px;
  color:var(--paper);
  font-family:Karla,system-ui,-apple-system,"Segoe UI","Noto Sans SC",sans-serif;
  font-size:17px;
  line-height:1.72;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%}
h1,h2,h3{font-family:"Playfair Display SC",Georgia,"Songti SC",serif;font-weight:700;line-height:1.12;letter-spacing:.01em}
a{color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}

.skip{
  position:absolute;left:12px;top:-70px;z-index:80;
  padding:10px 16px;background:var(--neon);color:var(--ink);
  font-weight:700;text-decoration:none;transition:top .18s;
}
.skip:focus{top:10px}

.top{position:sticky;top:0;z-index:40;background:var(--ink);border-bottom:3px solid var(--neon)}
.bar{
  display:flex;align-items:center;gap:10px;
  max-width:1180px;margin:0 auto;
  padding:8px clamp(12px,3vw,26px);
}
.mark{
  flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  background:var(--neon);color:var(--ink);text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
.mark-shape{width:20px;height:20px;background:var(--ink);clip-path:polygon(50% 0,100% 100%,0 100%)}

.menu{margin-left:auto;position:relative}
.menu>summary{
  display:flex;align-items:center;gap:9px;min-height:46px;padding:0 15px;
  background:var(--mustard);color:var(--ink);font-weight:700;cursor:pointer;
  list-style:none;clip-path:polygon(0 0,100% 0,100% 74%,86% 100%,0 100%);
}
.menu>summary::-webkit-details-marker{display:none}
.burger{
  width:18px;height:12px;flex:0 0 auto;background:
    linear-gradient(var(--ink),var(--ink)) 0 0/18px 3px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 5px/18px 3px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 10px/18px 3px no-repeat;
}
.menu>menu{
  position:absolute;right:0;top:calc(100% + 12px);margin:0;padding:8px;
  list-style:none;min-width:min(258px,84vw);max-height:72vh;overflow:auto;display:grid;gap:2px;
  background:var(--paper);color:var(--ink);
  border:3px solid var(--ink);box-shadow:10px 10px 0 var(--neon);
}
.menu>menu a{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;
  color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:2px dotted #a9c79c;
}
.menu>menu a:hover{background:var(--ink);color:var(--neon)}
.pip{flex:0 0 auto;width:9px;height:9px;background:var(--neon);border:2px solid var(--ink);transform:rotate(45deg)}

.cta{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:46px;padding:0 16px;background:var(--neon);color:var(--ink);
  font-weight:700;text-decoration:none;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,100% 76%,84% 100%,0 100%);
}
.cta:hover{background:var(--mustard)}

.strip{display:none}

@media (min-width:820px){
  .strip{
    display:flex;gap:8px;overflow-x:auto;
    max-width:1180px;margin:0 auto;padding:0 clamp(12px,3vw,26px) 10px;
    scrollbar-width:thin;
  }
  .strip a{
    display:inline-flex;align-items:center;min-height:40px;padding:4px 12px;
    font-size:16px;color:var(--neon);text-decoration:none;white-space:nowrap;
    border:2px dashed var(--line);
  }
  .strip a:hover{background:var(--neon);color:var(--ink);border-style:solid;border-color:var(--ink)}
}

.hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:100vh;min-height:100svh;border-bottom:4px solid var(--neon);
}
.hero-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(25,38,23,.94) 0%,rgba(25,38,23,.72) 52%,rgba(25,38,23,.3) 100%);
}
.art{position:absolute;inset:0;z-index:2;pointer-events:none}
.art .sh{position:absolute;display:block;mix-blend-mode:screen;opacity:.85}
.tri{
  top:12%;right:8%;width:150px;height:150px;background:var(--mustard);
  clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(12deg);
  animation:spin 28s linear infinite;
}
.ring{top:46%;right:22%;width:118px;height:118px;border:12px solid var(--neon);border-radius:50%;opacity:.5}
.dotgrid{
  bottom:14%;right:5%;width:168px;height:110px;transform:rotate(-8deg);opacity:.75;
  background-image:radial-gradient(var(--mustard) 3px,transparent 3.2px);background-size:18px 18px;
}
.stick{top:20%;left:5%;width:14px;height:206px;background:var(--neon);transform:rotate(24deg);opacity:.45}
.zig{
  bottom:31%;left:7%;width:158px;height:26px;background:var(--mustard);opacity:.9;
  clip-path:polygon(0 100%,8% 0,16% 100%,24% 0,32% 100%,40% 0,48% 100%,56% 0,64% 100%,72% 0,80% 100%,88% 0,96% 100%,100% 40%,100% 100%);
}
@keyframes spin{to{transform:rotate(372deg)}}

@media (max-width:719px){
  .ring,.stick,.zig{display:none}
  .tri{width:104px;height:104px;top:8%;right:6%}
  .dotgrid{width:126px;height:84px;bottom:9%}
}

.hero-in{
  position:relative;z-index:3;width:100%;max-width:1180px;margin:0 auto;
  padding:0 clamp(14px,3vw,26px) clamp(46px,9vw,92px);text-align:left;
}
.badge{
  display:inline-block;margin:0 0 18px;padding:6px 14px;
  background:var(--mustard);color:var(--ink);font-weight:700;font-size:16px;line-height:1.4;
  transform:rotate(-3deg);box-shadow:5px 5px 0 var(--neon);
}
.hero h1{
  margin:0;color:var(--neon);font-size:clamp(38px,9vw,84px);
  letter-spacing:.02em;overflow-wrap:break-word;text-shadow:6px 6px 0 rgba(25,38,23,.85);
}
.hero-go{
  display:inline-flex;align-items:center;min-height:48px;margin-top:28px;padding:0 22px;
  font-size:17px;font-weight:700;color:var(--neon);text-decoration:none;
  border:3px dashed var(--neon);
}
.hero-go:hover{background:var(--neon);color:var(--ink);border-style:solid}

.wrap{
  display:grid;grid-template-columns:minmax(0,1fr);gap:30px;
  max-width:1180px;margin:0 auto;
  padding:clamp(26px,4vw,52px) clamp(14px,3vw,26px) clamp(40px,6vw,72px);
}
@media (min-width:960px){
  .wrap{grid-template-columns:minmax(0,1fr) 268px;gap:46px;align-items:start}
}
.content{min-width:0}
.prose{min-width:0;font-size:17px}
.prose>article{
  border-top:3px dashed var(--line);
  border-left:3px dotted rgba(255,206,92,.42);
  padding:clamp(26px,4vw,44px) 0 clamp(26px,4vw,44px) clamp(14px,2.5vw,26px);
  scroll-margin-top:150px;
}
.prose>article:nth-child(even){background:rgba(135,255,113,.05)}
.prose>article:first-child{border-top:0;padding-top:0}
@media (max-width:819px){
  .prose>article{scroll-margin-top:88px}
}
.prose h2{font-size:clamp(25px,4vw,38px);margin:0 0 14px;color:var(--mustard)}
.prose h3{font-size:clamp(20px,3vw,26px);margin:26px 0 10px;color:var(--neon)}
.prose p{margin:0 0 16px;color:#dff6d1}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.3em}
.prose li{margin:8px 0}
.prose li::marker{color:var(--neon)}
.prose a{color:var(--neon);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.prose a:hover{background:var(--neon);color:var(--ink);text-decoration:none}
.prose strong{color:var(--mustard)}
.prose blockquote{margin:0 0 18px;padding:14px 18px;background:var(--ink-3);border-left:6px solid var(--mustard)}
.prose blockquote p:last-child{margin:0}
.prose img{width:100%;height:auto;margin:0 0 18px;border:3px solid var(--ink-3)}

.toc{
  align-self:start;padding:20px 18px;background:var(--mustard);color:var(--ink);
  border:3px solid var(--ink);box-shadow:9px 9px 0 var(--neon);
}
@media (min-width:960px){
  .toc{position:sticky;top:132px}
}
.toc h2{margin:0;font-size:24px;color:var(--ink)}
.toc .subtitle{
  margin:2px 0 14px;padding-bottom:10px;font-size:16px;font-weight:600;letter-spacing:.06em;
  border-bottom:3px dotted rgba(25,38,23,.42);
}
.toc-list{margin:0;padding:0;list-style:none;counter-reset:t}
.toc-list li{counter-increment:t}
.toc-list a{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;
  color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:2px dotted rgba(25,38,23,.25);
}
.toc-list a::before{
  content:counter(t,decimal-leading-zero);
  font-family:"Playfair Display SC",Georgia,serif;font-size:15px;color:#41703a;
}
.toc-list a:hover{background:rgba(25,38,23,.14)}
.totop{
  display:inline-flex;align-items:center;min-height:44px;margin-top:14px;padding:0 14px;
  background:var(--ink);color:var(--neon);font-weight:700;text-decoration:none;
}
.totop:hover{background:var(--ink-3);color:var(--mustard)}

.foot{
  display:grid;grid-template-columns:1fr;gap:26px;
  padding:clamp(30px,5vw,52px) clamp(14px,3vw,26px) 0;
  border-top:6px solid var(--neon);background:var(--ink-2);
}
@media (min-width:820px){
  .foot{grid-template-columns:1fr 1.6fr 1fr;padding-left:max(16px,calc((100% - 1128px)/2));padding-right:max(16px,calc((100% - 1128px)/2))}
}
.foot article{min-width:0}
.foot h2{margin:0 0 12px;font-size:20px;color:var(--mustard)}
.f-mark{
  display:inline-grid;place-items:center;width:56px;height:56px;
  background:var(--neon);color:var(--ink);text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%);
}
.f-name{margin:10px 0 0;font-family:"Playfair Display SC",Georgia,serif;font-size:20px;color:var(--neon)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.f-grid a{
  display:flex;align-items:center;min-height:44px;color:var(--paper);text-decoration:none;
  border-bottom:2px dotted rgba(135,255,113,.28);
}
.f-grid a:hover{color:var(--neon)}
.subform{display:flex;flex-wrap:wrap;gap:8px}
.subform input{
  flex:1 1 130px;min-height:46px;padding:0 12px;border:3px solid var(--neon);
  background:var(--ink);color:var(--paper);font:inherit;font-size:16px;border-radius:0;
}
.subform input::placeholder{color:#9bbf8a}
.subform button{
  min-height:46px;padding:0 18px;border:0;background:var(--mustard);color:var(--ink);
  font:inherit;font-weight:700;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 76%,84% 100%,0 100%);
}
.subform button:hover{background:var(--neon)}
.base{
  grid-column:1/-1;margin-top:6px;padding:16px 0 30px;text-align:center;
  border-top:3px dotted rgba(135,255,113,.3);font-size:16px;color:#a9c79c;
}
.base p{margin:2px 0}

@media (prefers-reduced-motion:no-preference){
  .prose>article{animation:rise .5s ease both}
  .prose>article:nth-child(1){animation-delay:.02s}
  .prose>article:nth-child(2){animation-delay:.06s}
  .prose>article:nth-child(3){animation-delay:.1s}
  .prose>article:nth-child(4){animation-delay:.14s}
  .prose>article:nth-child(5){animation-delay:.18s}
  .prose>article:nth-child(6){animation-delay:.22s}
  .prose>article:nth-child(7){animation-delay:.26s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .cta,.hero-go,.totop,.subform button{transition:background .18s,color .18s,border-color .18s}
}

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