:root{ --hx-pv-hero:linear-gradient(135deg,var(--hx-green-50),var(--hx-green-100) 60%,var(--hx-tint-cool)); }
.hx-pvx .pv-hero{background:var(--hx-pv-hero);padding-block:clamp(32px,4vw,60px)}
.hx-pvx .pv-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:clamp(20px,4vw,48px)}
.hx-pvx .pv-hero h1{margin:0;font-size:var(--hx-fs-hero);font-weight:var(--hx-fw-black); line-height:var(--hx-lh-tight);letter-spacing:var(--hx-tracking-tight);color:var(--hx-green-900)}
.hx-pvx .pv-lead{margin:16px 0 0;max-width:var(--hx-measure);font-size:var(--hx-fs-md); line-height:var(--hx-lh);color:var(--hx-green-900)}
.hx-pvx .pv-hero-img{justify-self:end;border-radius:var(--hx-r-lg);}
.hx-pvx .pv-body{padding-block:clamp(36px,5vw,64px)}
.hx-pvx .pv-cols{display:grid;grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap:clamp(28px,4vw,56px);align-items:start}
.hx-pvx .pv-main{min-width:0;}
.hx-pvx .pv-toc{position:sticky;top:clamp(16px,3vw,28px);padding:var(--hx-s-5);background:var(--hx-surface);border:1px solid var(--hx-line); border-radius:var(--hx-r-lg)}
.hx-pvx .pv-toc-h{margin:0 0 var(--hx-s-3);font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--hx-muted)}
.hx-pvx .pv-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:var(--hx-s-1)}
.hx-pvx .pv-toc li{counter-increment:toc}
.hx-pvx .pv-toc a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--hx-s-2); padding:var(--hx-s-2);border-radius:var(--hx-r-xs);font-size:var(--hx-fs-sm); line-height:var(--hx-lh-snug);color:var(--hx-body);text-decoration:none;transition:background var(--hx-dur) var(--hx-ease),color var(--hx-dur) var(--hx-ease)}
.hx-pvx .pv-toc a::before{content:counter(toc);font-variant-numeric:tabular-nums; font-weight:var(--hx-fw-bold);color:var(--hx-green-700)}
.hx-pvx .pv-toc a:hover{background:var(--hx-green-50);color:var(--hx-green-800)}
.hx-pvx .pv-main{counter-reset:sec}
.hx-pvx .pv-sec{counter-increment:sec;padding-bottom:clamp(24px,3vw,34px); border-bottom:1px solid var(--hx-line);margin-bottom:clamp(24px,3vw,34px)}
.hx-pvx .pv-sec h2{position:relative;margin:0 0 var(--hx-s-3);padding-left:44px;font-size:var(--hx-fs-lg);font-weight:var(--hx-fw-bold);line-height:var(--hx-lh-snug);color:var(--hx-ink)}
.hx-pvx .pv-sec h2::before{content:counter(sec);position:absolute;left:0;top:-2px; width:32px;height:32px;border-radius:var(--hx-r-sm);display:grid;place-items:center;background:var(--hx-green-50);color:var(--hx-green-800);font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-bold);font-variant-numeric:tabular-nums;user-select:none}
.hx-pvx .pv-sec p{margin:0;font-size:var(--hx-fs-base);line-height:1.7;color:var(--hx-body)}
.hx-pvx .pv-gloss{padding:clamp(22px,3vw,32px);background:var(--hx-surface);border:1px solid var(--hx-line);border-radius:var(--hx-r-xl)}
.hx-pvx .pv-gloss > h2{margin:0 0 var(--hx-s-5);font-size:var(--hx-fs-lg);font-weight:var(--hx-fw-bold);color:var(--hx-ink)}
.hx-pvx .pv-term + .pv-term{margin-top:var(--hx-s-5);padding-top:var(--hx-s-5);border-top:1px solid var(--hx-line-2)}
.hx-pvx .pv-term h3{margin:0 0 var(--hx-s-2);font-size:var(--hx-fs-base);font-weight:var(--hx-fw-bold);color:var(--hx-green-800)}
.hx-pvx .pv-term p{margin:0;font-size:var(--hx-fs-sm);line-height:1.7;color:var(--hx-body)}
.hx-pvx .pv-term p + p{margin-top:var(--hx-s-3)}
.hx-pvx .pv-url{margin-top:var(--hx-s-3);padding:var(--hx-s-4);background:var(--hx-card);border:1px solid var(--hx-line);border-radius:var(--hx-r-sm)}
.hx-pvx .pv-url-full{margin:0 0 var(--hx-s-3);font-family:var(--hx-mono); font-size:var(--hx-fs-sm);color:var(--hx-ink);word-break:break-all}
.hx-pvx .pv-url dl{margin:0;display:grid;gap:var(--hx-s-1)}
.hx-pvx .pv-url dl > div{display:flex;gap:var(--hx-s-2);font-size:var(--hx-fs-sm);line-height:var(--hx-lh)}
.hx-pvx .pv-url dt{flex:0 0 96px;font-family:var(--hx-mono);color:var(--hx-green-800)}
.hx-pvx .pv-url dd{margin:0;color:var(--hx-body);min-width:0}
.hx-pvx .pv-close{margin:clamp(24px,3vw,34px) 0 0;font-size:var(--hx-fs-base);line-height:1.7;color:var(--hx-body)}
.hx-pvx .pv-close .cont{color:var(--hx-cta);font-weight:var(--hx-fw-semi);text-decoration:none}
.hx-pvx .pv-close .cont:hover{text-decoration:underline}
@media (max-width:1024px){
  .hx-pvx .pv-cols{grid-template-columns:1fr}
  .hx-pvx .pv-toc{position:static;top:auto}
  .hx-pvx .pv-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-pvx .pv-hero-grid{grid-template-columns:1fr}
  .hx-pvx .pv-hero-img{justify-self:start}
}
@media (max-width:640px){
  .hx-pvx .pv-toc ol{grid-template-columns:1fr}
  .hx-pvx .pv-sec h2{padding-left:0;padding-top:40px}
  .hx-pvx .pv-sec h2::before{top:0}
  .hx-pvx .pv-url dl > div{flex-direction:column;gap:0}
  .hx-pvx .pv-url dt{flex:none}
}