:root {
  color-scheme: dark;
  --bg: #050505;
  --text: #f4f4f2;
  --muted: #898989;
  --faint: #4a4a4a;
  --line: #272727;
  --line-strong: #444444;
  --green: #f4f4f2;
  --mono: "DM Mono", Consolas, monospace;
  --sans: Inter, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--text); background: linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),var(--bg); background-size:64px 64px; font-family:var(--sans); -webkit-font-smoothing:antialiased; }
a { color: inherit; text-decoration: none; }
.reading-progress { position:fixed; z-index:100; left:0; right:0; top:0; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; }
.article-site-header { position:fixed; z-index:20; inset:0 0 auto; height:72px; display:grid; grid-template-columns:178px 1fr auto; align-items:center; border-bottom:1px solid #2b2d2a; background:rgba(5,6,5,.92); backdrop-filter:blur(18px); }
.article-brand { height:100%; padding:0 24px; display:flex; align-items:center; gap:10px; border-right:1px solid #222421; font-size:13px; letter-spacing:.1em; }
.article-brand svg { width:27px; fill:none; stroke:var(--text); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.article-brand .brand-logo { width:22px; height:38px; object-fit:contain; flex:0 0 auto; }
.article-header-state { justify-self:center; display:flex; align-items:center; gap:11px; color:#666a63; font:8px var(--mono); letter-spacing:.12em; }
.article-header-state i { width:6px; height:6px; border-radius:50%; background:var(--text); box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.article-back { height:36px; margin-right:18px; padding:0 14px; display:flex; align-items:center; border:1px solid var(--line-strong); font:8px var(--mono); letter-spacing:.08em; }
.article-back:hover { border-color:var(--green); color:var(--green); }
.article-site-rail { position:fixed; z-index:10; left:0; top:72px; bottom:0; width:178px; padding:26px 22px 20px; display:flex; flex-direction:column; border-right:1px solid #222421; background:rgba(7,8,7,.94); font-family:var(--mono); }
.article-rail-label { margin-bottom:20px; color:#3e413d; font-size:6px; letter-spacing:.16em; }
#articleToc { display:grid; }
#articleToc a { min-height:44px; display:grid; grid-template-columns:24px 1fr; align-items:start; gap:3px; color:#575b55; font-size:7px; line-height:1.35; }
#articleToc a small { color:#343733; font-size:6px; }
#articleToc a:hover { color:var(--text); }
.article-rail-stake { height:38px; margin-top:20px; padding:0 11px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line-strong); font-size:7px; }
.article-rail-stake:hover { border-color:var(--green); color:var(--green); }
.article-rail-foot { margin-top:auto; display:grid; gap:9px; color:#30332f; font-size:6px; letter-spacing:.08em; }
.article-main { margin-left:178px; padding:96px 24px 24px; }
.article-hero { position:relative; min-height:min(66vh,680px); max-width:1420px; margin:0 auto; overflow:hidden; border:1px solid var(--line-strong); background:#080908; }
.article-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.16) brightness(.58); }
.article-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,5,.97) 0%,rgba(5,6,5,.82) 38%,rgba(5,6,5,.2) 72%),linear-gradient(0deg,rgba(5,6,5,.8),transparent 50%); }
.article-hero-grid { position:absolute; z-index:1; inset:0; background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:72px 72px; }
.article-hero-copy { position:absolute; z-index:2; left:clamp(28px,5vw,78px); bottom:clamp(74px,10vh,120px); max-width:780px; }
.article-hero-copy > span { color:var(--green); font:8px var(--mono); letter-spacing:.16em; }
.article-hero h1 { max-width:760px; margin:20px 0 22px; font-size:clamp(52px,7vw,108px); font-weight:400; line-height:.88; letter-spacing:-.075em; }
.article-hero p { max-width:600px; margin:0; color:#a0a49c; font-size:14px; line-height:1.65; }
.article-hero-meta { position:absolute; z-index:2; left:clamp(28px,5vw,78px); right:28px; bottom:24px; padding-top:14px; display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.17); color:#666a63; font:7px var(--mono); letter-spacing:.1em; }
.article-body { width:min(900px,calc(100% - 48px)); margin:0 auto; padding:84px 0 110px; }
.article-body h2 { margin:90px 0 28px; padding-top:24px; display:grid; grid-template-columns:42px 1fr; align-items:start; gap:14px; border-top:1px solid var(--line); font-size:clamp(28px,3.2vw,47px); font-weight:400; line-height:1.02; letter-spacing:-.045em; scroll-margin-top:96px; }
.article-body h2 span { padding-top:8px; color:#5c6059; font:8px var(--mono); letter-spacing:.1em; }
.article-body p { margin:0 0 24px; color:#b6bab2; font-size:16px; line-height:1.84; }
.article-body strong { color:#f1f3ed; font-weight:500; }
.article-body code { padding:3px 6px; border:1px solid #484848; background:#0b0b0b; color:#f4f4f2; font:12px var(--mono); }
.article-body ol,.article-body ul { margin:20px 0 32px; padding-left:24px; color:#b6bab2; font-size:15px; line-height:1.75; }
.article-body li { padding-left:8px; margin-bottom:9px; }
.article-body a { color:#dfe2da; text-decoration:underline; text-decoration-color:#545851; text-underline-offset:4px; }
.article-body a:hover { color:var(--green); }
.article-body blockquote { margin:64px 0 0; padding:24px 28px; border:1px solid #414141; border-left:3px solid #f4f4f2; color:#929292; font:11px/1.7 var(--mono); }
.article-figure { width:min(1160px,calc(100vw - 250px)); margin:70px 0 84px 50%; transform:translateX(-50%); border:1px solid var(--line-strong); background:#050605; }
.article-figure > div { padding:18px; border-bottom:1px solid var(--line); }
.article-figure img { display:block; width:100%; aspect-ratio:2/1; object-fit:contain; background:#070707; filter:grayscale(1) contrast(1.08); }
.article-figure figcaption { min-height:46px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#7f837b; font:8px var(--mono); letter-spacing:.08em; }
.article-figure figcaption span { color:var(--green); }
.article-pagination { max-width:1160px; margin:0 auto 18px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line-strong); }
.article-pagination a { min-height:126px; padding:24px; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; gap:9px; border-right:1px solid var(--line); }
.article-pagination a:last-child { border-right:0; text-align:right; }
.article-pagination small { grid-column:1/-1; color:#555952; font:7px var(--mono); letter-spacing:.11em; }
.article-pagination b { align-self:end; max-width:420px; font-size:18px; font-weight:400; }
.article-pagination span { align-self:end; color:var(--green); }
.article-pagination a:hover { background:#0d0f0d; }
.article-footer { max-width:1160px; min-height:70px; margin:0 auto; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); color:#5c6059; font:7px var(--mono); letter-spacing:.08em; }
.article-footer nav { display:flex; gap:18px; }
.article-footer a:hover { color:var(--green); }
@media(max-width:900px){.article-site-header{grid-template-columns:1fr auto}.article-header-state{display:none}.article-site-rail{display:none}.article-main{margin-left:0;padding:82px 12px 12px}.article-hero{min-height:620px}.article-body{width:min(720px,calc(100% - 28px))}.article-figure{width:calc(100vw - 40px)}.article-hero::after{background:linear-gradient(0deg,rgba(5,6,5,.95),rgba(5,6,5,.25))}.article-hero-copy{left:24px;right:24px}.article-pagination{grid-template-columns:1fr}.article-pagination a{border-right:0;border-bottom:1px solid var(--line)}.article-pagination a:last-child{border-bottom:0}}
@media(max-width:560px){.article-brand{padding:0 14px;border-right:0}.article-back{margin-right:8px;padding:0 10px}.article-hero{min-height:570px}.article-hero h1{font-size:49px}.article-hero p{font-size:12px}.article-body{padding-top:54px}.article-body p{font-size:15px}.article-body h2{margin-top:68px;grid-template-columns:28px 1fr}.article-figure>div{padding:8px}.article-footer{display:grid;gap:14px;padding-block:18px}.article-footer nav{justify-content:space-between}}
