*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#fbfbf7;--card:#ffffff;--ink:#14130f;--mute:#6b6a63;
  --line:#ebe9e0;--acc:#5c8a00;--acc2:#3f6300;--neon:#c6ff4a;--neon-ink:#1c2a05;
  --sans:"Segoe UI",system-ui,Arial,sans-serif;
  --r:20px;--rs:14px;
}
body{
  background-color:var(--bg);
  background-image:
    radial-gradient(560px 400px at 100% 0%,rgba(198,255,74,.2),transparent 60%),
    radial-gradient(480px 380px at 0% 100%,rgba(92,138,0,.08),transparent 55%),
    radial-gradient(circle,rgba(20,19,15,.05) 1.2px,transparent 1.4px);
  background-size:auto,auto,22px 22px;
  background-repeat:no-repeat,no-repeat,repeat;
  color:var(--ink);font:16px/1.6 var(--sans);overflow-x:hidden;
}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.shell{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.side{background:#0e0d0a;color:#e7e5e4;padding:26px 18px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{font-weight:800;letter-spacing:-.01em;color:#fff;display:block;margin-bottom:4px;font-size:14px}
.side .logo small{display:block;font-weight:600;color:var(--neon);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.side input{
  width:100%;margin:18px 0 8px;padding:10px 14px;border:1px solid #2a2820;border-radius:999px;
  background:#17150f;color:#fff;font:14px/1 inherit;
}
.side .search-off{font-size:11px;color:#767459;margin:0 4px 16px;line-height:1.35}
.side h3{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#767459;margin:20px 0 8px;font-weight:700}
.side a{display:block;color:#c9c6bc;padding:8px 12px;font-size:13.5px;font-weight:700;border-radius:999px;margin:1px 0;line-height:1.3}
.side a:hover{background:#1a1810;color:#fff}
.side a.on{background:var(--neon);color:var(--neon-ink);font-weight:700}

.main{padding:44px 48px 64px;max-width:860px}
.crumb{font-size:13px;color:var(--mute);margin-bottom:14px;font-weight:600}
h1{font-size:38px;letter-spacing:-.025em;line-height:1.12;margin:0 0 16px;font-weight:800}
.hl{background:var(--neon);padding:.05em .22em;border-radius:.28em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{color:var(--mute);font-size:17px;margin-bottom:20px;max-width:580px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;font-size:12.5px;font-weight:700;color:var(--acc2);box-shadow:0 10px 20px -16px rgba(20,19,15,.2)}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc)}

.btn{
  display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:#fff;font-weight:800;
  font-size:14px;padding:13px 22px;border-radius:999px;text-decoration:none;letter-spacing:.01em;
  box-shadow:0 16px 28px -10px rgba(92,138,0,.45);transition:transform .12s,box-shadow .12s;
}
.btn:hover{transform:translateY(-2px);text-decoration:none;background:var(--acc2)}
.btn.sm{padding:9px 16px;font-size:12.5px}

.cta-strip{
  background:#eef7d9;border:1px solid #d7e8a8;border-radius:999px;padding:10px 10px 10px 18px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between;margin:0 0 26px;
}
.cta-strip p{font-size:13px;color:var(--acc2);font-weight:700;margin:0}
.cta-strip strong{color:var(--ink)}

.cta-block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  margin:36px 0 8px;text-align:center;box-shadow:0 24px 44px -28px rgba(20,19,15,.2);
}
.cta-block h2{font-size:21px;margin:0 0 8px;font-weight:800}
.cta-block p{color:var(--mute);max-width:440px;margin:0 auto 20px;font-size:14px}

.facts{
  width:100%;border-collapse:collapse;margin:8px 0 28px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:14.5px;
  box-shadow:0 20px 36px -26px rgba(20,19,15,.18);
}
.facts th{text-align:left;padding:12px 16px;background:#eef7d9;color:var(--acc2);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:800}
.facts td{padding:11px 16px;border-top:1px solid var(--line)}
.facts td:first-child{width:38%;color:var(--mute);font-weight:700;font-size:12.5px}

.cats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 40px}
.cat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:0 20px 36px -26px rgba(20,19,15,.18);transition:transform .15s,box-shadow .15s;
}
.cat:hover{transform:translateY(-3px);box-shadow:0 24px 40px -22px rgba(20,19,15,.26)}
.cat h2{font-size:16.5px;margin-bottom:6px;font-weight:700;color:var(--ink)}
.cat p{font-size:13.5px;color:var(--mute)}
.cat span{
  display:inline-flex;margin-top:12px;font-size:11.5px;color:var(--acc2);font-weight:800;
  background:#eef7d9;border-radius:999px;padding:4px 11px;letter-spacing:.02em;
}
.cat-top{display:flex;align-items:center;gap:12px;margin-bottom:8px}

article.body p{margin:0 0 15px;color:#2a2924}
article.body h2{font-size:21px;margin:28px 0 10px;font-weight:800;letter-spacing:-.01em}
article.body ol{margin:0 0 16px 20px}
article.body li{margin:0 0 8px;color:#2a2924}
.warn{
  background:#fff8e8;border:1px solid #f3dba0;border-radius:var(--r);padding:16px 18px;margin:18px 0;
  font-size:14px;box-shadow:0 16px 28px -22px rgba(20,19,15,.15);
}
.list a{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--rs);color:var(--ink);font-weight:700;background:var(--card)}
.list a:hover{border-color:var(--acc);text-decoration:none;background:#f7fbec}
.foot{margin-top:52px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}

.ph{
  margin:0 0 20px;position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:linear-gradient(155deg,#fbfbf7,#eef7d9 65%,#fbfbf7);
  aspect-ratio:16/9;box-shadow:0 24px 44px -28px rgba(20,19,15,.22);
}
.ph::after{content:"";position:absolute;top:0;left:0;right:0;height:32px;background:#fff;border-bottom:1px solid var(--line)}
.ph::before{
  content:"";position:absolute;top:12px;left:14px;width:8px;height:8px;border-radius:50%;background:#f0617a;
  box-shadow:16px 0 0 #e6b800,32px 0 0 #3dd68c;z-index:2;
}
.ph-sq{width:44px;height:44px;aspect-ratio:1;margin:0;border-radius:12px;flex-shrink:0;box-shadow:none}
.ph-sq::before,.ph-sq::after{display:none}
.ph-meta{position:absolute;inset:32px 0 0 0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:10px;gap:4px}
.ph-meta::before{content:"🖼";font-size:28px;opacity:.3;margin-bottom:2px;filter:grayscale(1)}
.ph-sq .ph-meta{inset:0}
.ph-sq .ph-meta::before{display:none}
.ph-k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);font-weight:700}
.ph-file{font-size:13px;color:var(--ink);font-weight:700}
.ph-path{font-size:11px;color:var(--mute)}
.ph-path code{color:var(--acc2)}
.ph-hint{font-size:11px;color:var(--mute);max-width:380px}
.ph-sq .ph-meta{padding:2px;gap:0}
.ph-sq .ph-k,.ph-sq .ph-path,.ph-sq .ph-hint{display:none}
.ph-sq .ph-file{font-size:6px;line-height:1}
.ph.has-img::before,.ph.has-img::after{display:none}
.ph.has-img .ph-meta{display:none}
.ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

@media (max-width:800px){
  .shell{grid-template-columns:1fr}
  .side{position:relative;height:auto}
  .main{padding:28px 20px 48px}
  .cats{grid-template-columns:1fr}
  h1{font-size:28px}
}

.side .btn-go{display:flex;justify-content:center;margin:14px 0 2px;background:var(--neon);color:var(--neon-ink);box-shadow:none}
.side .btn-go:hover{background:#d8ff6a;color:var(--neon-ink)}