:root{--bg:#0e0f12;--sur:#171a1f;--line:#2c3038;--tx:#ece9e4;--mut:#b5b0a8;--forge:#E8641E}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.6 system-ui,sans-serif}
a{color:var(--tx)}main{max-width:960px;margin:auto;padding:24px 20px 48px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:10px;z-index:9}
.top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:8px 20px;border-bottom:1px solid var(--line)}
.brand{font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;min-height:44px;display:flex;align-items:center}
nav ul{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:4px}
nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;border-radius:6px;color:var(--mut)}
nav a:hover,nav a[aria-current]{color:var(--tx);background:var(--sur)}
:focus-visible{outline:3px solid #fff;outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:var(--sur);color:var(--tx);font:inherit;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--forge);border-color:var(--forge);color:#111;font-weight:700}
.btn:disabled{opacity:.6;cursor:not-allowed}
.hero{padding:48px 0 32px}.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:.2em 0}
.eyebrow{color:var(--mut);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;margin:0}
.featured{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--sur);padding:24px;border-radius:12px}
@media(max-width:700px){.featured{grid-template-columns:1fr}}
.panel{margin:0 0 16px}.panel svg{width:100%;display:block;border:2px solid var(--line);border-radius:6px}
figcaption,.small{color:var(--mut);font-size:.85rem}
.card{background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px}
.tag{display:inline-block;border:1px solid var(--mut);color:var(--mut);border-radius:99px;padding:0 10px;font-size:.8rem}
.row{display:flex;gap:12px;flex-wrap:wrap}.steps li{padding:8px 0;border-bottom:1px solid var(--line)}
footer{border-top:1px solid var(--line);text-align:center;padding:20px;color:var(--mut)}
.reader-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.reader-tools{display:flex;gap:8px;position:relative}.menu summary{list-style:none}
.menu-body{position:absolute;right:0;top:52px;width:280px;background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:14px;z-index:5}
.toggle{display:flex;align-items:center;gap:10px;min-height:44px}.toggle input{width:22px;height:22px}
.badge{display:inline-block;border:1px solid var(--forge);padding:2px 10px;border-radius:99px}
fieldset.choice{border:1px solid var(--line);border-radius:12px;padding:18px}fieldset.choice legend{font-weight:700;padding:0 6px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.choices{grid-template-columns:1fr}}
.choices .btn{min-height:88px;font-size:1.15rem;font-weight:700}
.tabs [role=tab]{min-height:44px;padding:0 18px;background:none;border:0;border-bottom:3px solid transparent;color:var(--mut);font:inherit;cursor:pointer}
.tabs [role=tab][aria-selected=true]{color:var(--tx);border-color:var(--tx)}
@media (prefers-reduced-motion:no-preference){#story{animation:f .3s}}@keyframes f{from{opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}
