
:root{--bg:#080a0c;--panel:#12171b;--panel2:#192027;--ink:#f7f8f9;--muted:#b5c0c7;--line:#354049;--accent:#e9ff00;--accent2:#fff951;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;line-height:1.7}a{color:var(--accent2);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit}img{max-width:100%;height:auto}h1,h2,h3{line-height:1.2;letter-spacing:-.025em}h1{font-size:clamp(2.5rem,5vw,5.3rem);max-width:880px;margin:.4em 0}h2{font-size:clamp(1.5rem,2.7vw,2.3rem);color:#fff}h3{font-size:1.18rem}p{color:#d7dee1}.wrap{max-width:var(--max);margin:auto;padding:0 24px}.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;z-index:99;background:#fff;color:#000;padding:10px}.top{position:sticky;top:0;z-index:30;background:rgba(8,10,12,.97);border-bottom:1px solid #29333a;backdrop-filter:blur(14px)}.top>.wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:82px}.brand{display:inline-flex;align-items:center;flex-shrink:0}.brand img{display:block;object-fit:contain;width:146px;height:auto;max-height:64px}.nav{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.nav a{font-size:.84rem;font-weight:750;color:#e4e9eb;padding:9px 2px;border-bottom:2px solid transparent}.nav a:hover,.nav a.active{color:var(--accent);border-color:var(--accent);text-decoration:none}.menu{display:none;background:#161b1e;color:#fff;border:1px solid #485057;border-radius:5px;padding:8px 13px}.hero{background:radial-gradient(ellipse at 82% 12%,#354008 0%,transparent 40%),linear-gradient(145deg,#12191c,#080a0c 75%);border-bottom:1px solid #313b40;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;min-height:520px;padding-top:70px;padding-bottom:70px}.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--accent)}.hero p{font-size:1.08rem;max-width:660px;color:#d1dadd}.hero-art{position:relative;border:1px solid #536024;background:#101518;border-radius:18px;overflow:hidden;box-shadow:0 30px 100px #000b;transform:perspective(1200px) rotateY(-5deg)}.hero-art img{display:block;width:100%;height:310px;object-fit:cover;object-position:center}.art-label{background:#151c20;color:#dfe5e6;padding:8px 16px;font-size:.75rem}.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin:27px 0}.affiliate-cta{background:var(--accent);color:#111;font-weight:900;border:0;border-radius:4px;padding:13px 30px;box-shadow:0 6px 30px #e9ff0020;opacity:1;cursor:default}.affiliate-cta:disabled{color:#111;opacity:1}.ghost{font-weight:800;color:#fff;border-bottom:1px solid var(--accent)}.pills{display:flex;gap:9px;flex-wrap:wrap}.pills span{background:#1c2425;color:#e1e8e8;border:1px solid #354143;padding:5px 13px;font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.intro{padding-top:45px;padding-bottom:25px}.intro p{max-width:880px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;align-items:start;gap:54px;padding-bottom:70px}.article{min-width:0}.article section{padding:24px 0 32px;border-bottom:1px solid #293238;scroll-margin-top:105px}.article section h2{border-left:5px solid var(--accent);padding-left:17px}.article section p{font-size:1.015rem}.note{background:#192125;border-left:3px solid var(--accent);color:#e5e9eb;padding:15px 18px;margin-top:18px;border-radius:0 6px 6px 0}.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick a{display:flex;flex-direction:column;gap:5px;border:1px solid #394347;background:#161d20;border-radius:8px;padding:17px;font-weight:800}.quick small{color:#bec9cb;font-size:.78rem;font-weight:400}.sidebar{position:sticky;top:112px;background:#151b1e;border:1px solid #354043;padding:22px;border-radius:10px}.sidebar a{display:block;padding:8px 0;color:#d6e0e2;font-size:.89rem;border-bottom:1px solid #303a3d}.sidebar a:hover{color:var(--accent)}.footer{border-top:1px solid #2f383c;background:#101518;padding:40px 0;color:#aebbbd}.footer a{color:#d6e1e3}.footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer nav{display:flex;gap:18px;flex-wrap:wrap}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(max-width:1000px){.top>.wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}.nav{width:100%;justify-content:center}.hero-grid{gap:28px}.layout{grid-template-columns:minmax(0,1fr) 225px;gap:25px}}@media(max-width:700px){.wrap{padding-left:18px;padding-right:18px}.top>.wrap{flex-wrap:nowrap;min-height:70px}.brand img{width:118px}.menu{display:block}.nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0d1114;padding:15px 22px 22px;box-shadow:0 20px 35px #000a;max-height:70vh;overflow:auto}.nav.open{display:flex;flex-direction:column;align-items:stretch}.nav a{width:100%;padding:10px 4px}.hero-grid{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:44px;padding-bottom:45px}.hero-art{transform:none}.hero-art img{height:220px}.layout{display:flex;flex-direction:column}.sidebar{position:static;width:100%;order:-1}.quick{grid-template-columns:1fr}.intro{padding-top:28px}.article section{padding:17px 0 26px}.footer .wrap{display:block}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Accessibility and stable header layout */
@media (min-width:701px) and (max-width:1100px){.top>.wrap{gap:14px}.nav{gap:9px}.nav a{font-size:.79rem}}
@media (max-width:700px){.hero-art img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}.top>.wrap{position:relative}.nav{z-index:40}}
@media (max-width:420px){h1{font-size:2.25rem}.hero-grid{gap:25px}.hero p{font-size:1rem}}

/* Final editorial QA: stable sidebar and mobile TOC */
.sidebar{max-height:calc(100vh - 132px);overflow-y:auto;overscroll-behavior:contain}
.sidebar strong{display:block;color:#fff;font-size:1rem;margin-bottom:10px}
.sidebar a{overflow-wrap:anywhere;line-height:1.35}
@media(max-width:700px){.sidebar{max-height:none;overflow:visible}.sidebar a{display:inline-block;margin-right:12px;padding:7px 0}.hero-art{max-width:100%}}
@media(min-width:701px) and (max-width:1000px){.sidebar{padding:15px}}
