*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

:root{
  --paper:#F5F1E4;
  --green:#0B2B22;
  --green-deep:#071C16;
  --signal:#C6FF3C;
  --blue:#2D6FF0;
  --blue-soft:#8FB6FF;
  --orange:#E1522B;
  --ink:#211A12;
  --ink-soft:#3B3229;
  --moss:#7E8A76;
  --khaki:#E4E9DC;
  --white:#FFFFFF;
  --line:rgba(33,26,18,.16);
  --line-soft:rgba(33,26,18,.08);
  --line-invert:rgba(245,241,228,.2);
  --wrap:1240px;
  --pad-x:clamp(18px,4vw,56px);
  --gap:clamp(16px,2.2vw,28px);
  --r-sm:6px;
  --r-md:14px;
  --r-lg:26px;
  --font-head:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-body:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  font-family:var(--font-body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.75;
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(11,43,34,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,43,34,.035) 1px,transparent 1px);
  background-size:34px 34px;
  min-height:100vh;
  overflow-x:hidden;
}

h1,.h1{font-family:var(--font-head);font-weight:900;font-size:clamp(2.25rem,4.8vw,3.5rem);line-height:1.1;letter-spacing:-.02em}
h2,.h2{font-family:var(--font-head);font-weight:900;font-size:clamp(1.6rem,2.8vw,2.25rem);line-height:1.2;letter-spacing:-.02em}
h3,.h3{font-family:var(--font-head);font-weight:800;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.32;letter-spacing:-.01em}
h4,.h4{font-family:var(--font-head);font-weight:800;font-size:1.0625rem;line-height:1.4}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:860px}
.mono-label{font-family:var(--font-mono);font-size:.8125rem;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--moss)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.divider{height:1px;background:var(--line);border:0;margin-block:clamp(24px,3vw,40px)}
.hl{background:var(--signal);color:var(--green);padding:.05em .3em;border-radius:3px}
.on-dark{background:var(--green);color:var(--paper)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper)}
.band{background:var(--green);color:var(--paper);padding-block:clamp(40px,5vw,72px)}
[id]{scroll-margin-top:132px}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}
.on-dark :focus-visible,.site-footer :focus-visible,.site-header :focus-visible{outline-color:var(--signal)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--paper)}
.skip-link{position:absolute;left:14px;top:-70px;z-index:120;background:var(--signal);color:var(--green);font-family:var(--font-mono);font-size:.8125rem;font-weight:700;letter-spacing:.08em;padding:12px 18px;border-radius:0 0 var(--r-sm) var(--r-sm);transition:top .2s var(--ease)}
.skip-link:focus{top:0}

.hdr-top{background:var(--green);color:var(--paper);border-bottom:1px solid var(--green-deep)}
.hdr-top__inner{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.6vw,26px);min-height:54px;padding-block:7px}
.hdr-logo{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto}
.hdr-logo__mark{display:grid;place-items:center;width:38px;height:38px;background:var(--signal);color:var(--green);font-family:var(--font-head);font-weight:900;font-size:1.0625rem;line-height:1;border-radius:4px 14px 4px 14px;transition:border-radius .25s var(--ease)}
.hdr-logo:hover .hdr-logo__mark{border-radius:14px 4px 14px 4px}
.hdr-logo__text{display:flex;flex-direction:column;gap:3px}
.hdr-logo__name{font-family:var(--font-head);font-weight:900;font-size:1.0625rem;line-height:1.1;letter-spacing:-.01em}
.hdr-logo__motto{font-family:var(--font-mono);font-weight:500;font-size:.6875rem;line-height:1.2;letter-spacing:.16em;color:var(--signal)}
.hdr-pos{font-family:var(--font-mono);font-size:.75rem;line-height:1.5;letter-spacing:.06em;color:rgba(245,241,228,.6);max-width:38ch}
.hdr-quick{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hdr-search{display:inline-flex;align-items:center;gap:10px;padding:9px 15px;border:1.5px solid var(--signal);border-radius:999px;color:var(--paper);background:rgba(245,241,228,.06);font-family:var(--font-head);font-weight:700;font-size:.875rem;line-height:1;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.hdr-search:hover{background:var(--signal);color:var(--green);box-shadow:0 0 0 5px rgba(198,255,60,.2)}
.hdr-search__icon{position:relative;flex:0 0 auto;width:11px;height:11px;border:2px solid currentColor;border-radius:50%}
.hdr-search__icon::after{content:"";position:absolute;right:-4px;bottom:-3px;width:6px;height:2px;background:currentColor;transform:rotate(45deg)}
.hdr-search__kbd{font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;padding:3px 6px;border:1px solid currentColor;border-radius:3px;opacity:.85}
.hdr-android{display:inline-flex;align-items:center;padding:11px 17px;border-radius:999px;background:var(--signal);color:var(--green);font-family:var(--font-head);font-weight:700;font-size:.875rem;line-height:1;transition:background .18s var(--ease),box-shadow .18s var(--ease)}
.hdr-android:hover{background:var(--white);box-shadow:0 0 0 5px rgba(198,255,60,.28)}

.hdr-main{position:relative;background:linear-gradient(180deg,#F7F4E9 0%,var(--paper) 100%);border-bottom:2px solid var(--green)}
.hdr-main__inner{display:flex;align-items:center;gap:18px;min-height:62px}
.nav-toggle{display:none;align-items:center;gap:10px;padding:10px 15px;border:1.5px solid var(--green);border-radius:999px;color:var(--green);font-family:var(--font-head);font-weight:700;font-size:.875rem;line-height:1}
.nav-toggle__bars{position:relative;width:18px;height:12px}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .2s var(--ease),top .2s var(--ease)}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars::after{top:10px}
.nav-toggle[aria-expanded="true"]{background:var(--signal);border-color:var(--signal)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:5px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:5px;transform:rotate(-45deg)}

.site-nav{flex:1 1 auto}
.site-nav__list{display:flex;align-items:center;gap:clamp(8px,1.7vw,24px);flex-wrap:wrap}
.site-nav__link{position:relative;display:inline-block;padding:9px 1px;font-family:var(--font-head);font-weight:700;font-size:.9688rem;line-height:1.4;color:var(--ink);transition:color .18s var(--ease)}
.site-nav__link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--signal);transform:scaleX(0);transform-origin:left center;transition:transform .22s var(--ease)}
.site-nav__link:hover{color:var(--green)}
.site-nav__link:hover::after{transform:scaleX(1)}
.site-nav__link[aria-current="page"]{color:var(--green)}
.site-nav__link[aria-current="page"]::after{transform:scaleX(1)}

.hdr-deco{margin-left:auto;display:flex;align-items:center;gap:14px;padding-left:16px;border-left:1px solid var(--line);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss);white-space:nowrap}
.hdr-deco__code{color:var(--orange)}
.hdr-deco__date{color:var(--moss)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:1.5px solid transparent;border-radius:999px;font-family:var(--font-head);font-weight:700;font-size:1rem;line-height:1;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.btn--signal{background:var(--signal);color:var(--green)}
.btn--signal:hover{background:var(--white);box-shadow:0 0 0 5px rgba(198,255,60,.25)}
.btn--dark{background:var(--green);color:var(--paper)}
.btn--dark:hover{background:#123C30;box-shadow:0 0 0 5px rgba(11,43,34,.14)}
.btn--ghost{border-color:var(--green);color:var(--green)}
.btn--ghost:hover{background:var(--green);color:var(--paper)}
.btn--sm{padding:10px 16px;font-size:.875rem}

/* ---------- footer ---------- */
.site-footer{position:relative;margin-top:clamp(56px,8vw,120px);background:var(--green);color:var(--paper);overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(198,255,60,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,60,.07) 1px,transparent 1px);background-size:46px 46px;pointer-events:none}
.footer__inner{position:relative;z-index:1;padding-block:clamp(40px,5vw,68px)}
.footer-feedback{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(18px,3vw,32px);border:1px solid var(--line-invert);border-left:4px solid var(--signal);border-radius:var(--r-md);background:rgba(245,241,228,.05)}
.footer-feedback__text{max-width:56ch}
.footer-feedback__tag{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.footer-feedback__line{font-size:.9375rem;line-height:1.7;color:rgba(245,241,228,.82)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(20px,3vw,44px);margin-top:clamp(32px,4vw,56px)}
.footer-col{min-width:0}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.footer-brand__mark{display:grid;place-items:center;width:32px;height:32px;background:var(--signal);color:var(--green);font-family:var(--font-head);font-weight:900;font-size:.9375rem;border-radius:4px 12px 4px 12px}
.footer-brand__name{font-family:var(--font-head);font-weight:900;font-size:1.0625rem;letter-spacing:-.01em}
.footer-brand__note{font-size:.9375rem;line-height:1.7;color:rgba(245,241,228,.7);max-width:30ch}
.footer-title{margin-bottom:14px;font-family:var(--font-mono);font-weight:600;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,241,228,.5)}
.footer-list{display:flex;flex-direction:column;gap:10px}
.footer-link{display:inline-block;font-size:.9375rem;line-height:1.5;color:rgba(245,241,228,.86);border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.footer-link:hover{color:var(--signal);border-bottom-color:var(--signal)}
.footer-contact__row{display:flex;flex-direction:column;gap:2px}
.footer-contact__label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,241,228,.45)}
.footer-contact__value{font-size:.9375rem;line-height:1.6;color:rgba(245,241,228,.88);word-break:break-word}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(28px,3.5vw,48px);padding-top:20px;border-top:1px solid var(--line-invert);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:rgba(245,241,228,.55)}
.footer-base__legal,.footer-base__copy{margin:0}

.to-top{position:fixed;right:clamp(14px,3vw,32px);bottom:clamp(14px,3vw,32px);z-index:70;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--signal);color:var(--green);font-family:var(--font-head);font-weight:700;font-size:.8125rem;line-height:1;letter-spacing:.04em;box-shadow:0 16px 30px -14px rgba(11,43,34,.75);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s var(--ease),background .18s var(--ease)}
.to-top[data-visible]{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--white)}
.to-top__arrow{font-family:var(--font-mono);font-size:.9375rem}

/* ---------- breadcrumb ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--moss)}
.breadcrumb a{color:var(--moss);border-bottom:1px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.breadcrumb a:hover{color:var(--green);border-bottom-color:var(--signal)}
.breadcrumb__sep{color:var(--orange)}
.breadcrumb [aria-current="page"]{color:var(--ink)}

/* ---------- sections & grid ---------- */
.section{padding-block:clamp(56px,7vw,100px)}
.section--tight{padding-block:clamp(30px,4vw,56px)}
.section__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-bottom:clamp(24px,3vw,40px);padding-bottom:14px;border-bottom:2px solid var(--green)}
.section__num{font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.16em;color:var(--orange);border:1px solid var(--orange);border-radius:3px;padding:3px 8px;line-height:1.2}
.section__title{font-family:var(--font-head);font-weight:900;font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.2;letter-spacing:-.02em}
.lede{max-width:42em;font-size:clamp(1.0625rem,1.4vw,1.1875rem);line-height:1.7;color:var(--ink-soft)}
.grid{display:grid;gap:var(--gap)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-4{grid-column:span 4}
.col-5{grid-column:span 5}
.col-6{grid-column:span 6}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:1/-1}

/* ---------- cards / tags / stats ---------- */
.card{position:relative;padding:clamp(18px,2vw,26px);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:rgba(11,43,34,.3);box-shadow:0 22px 42px -30px rgba(11,43,34,.7)}
.card--khaki{background:var(--khaki)}
.card--dark{background:var(--green);color:var(--paper);border-color:transparent}
.card__num{display:block;margin-bottom:12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;color:var(--orange)}
.card--dark .card__num{color:var(--signal)}
.card__title{margin-bottom:8px;font-family:var(--font-head);font-weight:800;font-size:1.125rem;line-height:1.35}
.card__meta{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;color:var(--moss)}
.card--dark .card__meta{color:rgba(245,241,228,.6)}

.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line);border-radius:3px;background:var(--paper);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}
.tag--signal{background:var(--signal);border-color:var(--signal);color:var(--green)}
.tag--orange{border-color:var(--orange);color:var(--orange)}
.tag--blue{border-color:var(--blue);color:var(--blue)}
.on-dark .tag,.card--dark .tag{background:transparent;border-color:var(--line-invert);color:rgba(245,241,228,.78)}

.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1.5px solid var(--green);border-radius:999px;background:transparent;color:var(--green);font-family:var(--font-head);font-weight:700;font-size:.875rem;line-height:1;transition:background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.chip:hover{background:rgba(11,43,34,.06)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--signal);border-color:var(--signal);box-shadow:0 0 0 4px rgba(198,255,60,.22)}

.stat{display:flex;flex-direction:column;gap:6px}
.stat__value{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1;color:var(--green)}
.stat__label{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.stat--signal .stat__value{color:var(--blue)}
.on-dark .stat__value,.card--dark .stat__value{color:var(--signal)}
.on-dark .stat--signal .stat__value,.card--dark .stat--signal .stat__value{color:var(--blue-soft)}

.metric{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1;letter-spacing:-.01em;color:var(--green)}
.metric--blue{color:var(--blue)}
.metric--orange{color:var(--orange)}
.on-dark .metric,.card--dark .metric{color:var(--signal)}

/* ---------- media ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-md);aspect-ratio:16/9;background:linear-gradient(135deg,#0B2B22 0%,#123C30 46%,#1B4A3A 100%);isolation:isolate}
.media::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(198,255,60,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,60,.12) 1px,transparent 1px);background-size:30px 30px;opacity:.65;pointer-events:none}
.media img{width:100%;height:100%;object-fit:cover}
.media--wide{aspect-ratio:21/9}
.media--square{aspect-ratio:1/1}
.media--tall{aspect-ratio:3/4}

/* ---------- toc ---------- */
.toc{font-family:var(--font-mono);font-size:.8125rem}
.toc__title{margin-bottom:12px;font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--moss)}
.toc__list{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.toc__link{display:block;padding:8px 0 8px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--moss);line-height:1.5;transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.toc__link:hover{color:var(--green)}
.toc__link[aria-current="true"]{color:var(--green);border-left-color:var(--signal);background:rgba(198,255,60,.16)}

/* ---------- prose ---------- */
.prose{max-width:46rem}
.prose p{margin-bottom:1.15em}
.prose h2{margin:1.6em 0 .6em}
.prose h3{margin:1.4em 0 .5em}
.prose a{color:var(--ink);border-bottom:1px solid var(--blue)}
.prose a:hover{background:rgba(45,111,240,.12)}
.prose ul{margin:0 0 1.2em}
.prose ul li{position:relative;padding-left:18px;margin-bottom:10px}
.prose ul li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--orange)}
.prose ol{counter-reset:n;margin:0 0 1.2em 1.2em;list-style:decimal}
.prose ol li{margin-bottom:10px}

/* ---------- motion ---------- */
.js-on [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
.js-on [data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hdr-pos{display:none}
  .hdr-deco{display:none}
}
@media (max-width:900px){
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column:1/-1}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-toggle{display:inline-flex;margin-left:auto}
  .hdr-main__inner{min-height:56px}
  .site-nav{position:absolute;left:0;right:0;top:100%;display:none;max-height:calc(100vh - 130px);overflow:auto;padding:8px var(--pad-x) 20px;background:var(--paper);border-bottom:2px solid var(--green);box-shadow:0 28px 44px -30px rgba(11,43,34,.65)}
  .site-nav[data-open]{display:block}
  .site-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .site-nav__item{border-bottom:1px solid var(--line-soft)}
  .site-nav__link{display:block;padding:15px 0;font-size:1.0625rem}
  .site-nav__link::after{bottom:9px;left:0;right:auto;width:26px}
}
@media (max-width:620px){
  .hdr-top__inner{min-height:0;padding-block:9px}
  .hdr-quick{width:100%;margin-left:0}
  .hdr-search,.hdr-android{flex:1 1 auto;justify-content:center}
  .hdr-search__kbd{display:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-feedback .btn{width:100%}
  .to-top{padding:11px 14px}
  .to-top__text{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js-on [data-reveal]{opacity:1;transform:none}
  .card:hover{transform:none}
  .hdr-logo:hover .hdr-logo__mark{border-radius:4px 14px 4px 14px}
}