:root{
  --bg:#0b0b0f;--panel:#0e0e12;--panel2:#111116;--border:#1a1a20;--muted:#a6a6b0;--text:#ececf0;--title:#ffffff;
  --brand:#ffc700;--brand-2:#e7b800;--link:#e8c24a;
  --radius:14px;--shadow:0 14px 36px rgba(0,0,0,.35);
  --maxw:1180px;--sidebar:280px;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body{opacity:0;transition:opacity .2s ease}
@media (prefers-color-scheme: light){:root{--bg:#0b0b0f;--panel:#0d0d10;--panel2:#0f0f12;--border:#17171c;--text:#ececf0;--title:#ffffff;--muted:#a6a6b0}}
/* Background like main site */
#webgl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.gradient-overlay{position:fixed;inset:0;pointer-events:none;z-index:0;background:linear-gradient(180deg,rgba(5,5,7,.55),rgba(5,5,7,.62)),radial-gradient(1000px 600px at 12% 18%, rgba(255,199,0,.08), transparent 60%),radial-gradient(900px 520px at 82% 8%, rgba(255,255,255,.06), transparent 60%),radial-gradient(900px 520px at 50% 88%, rgba(255,199,0,.06), transparent 60%)}
/* Layout */
.layout{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:32px 24px 96px;display:grid;grid-template-columns:var(--sidebar) 1fr;gap:28px}
@media (max-width:1024px){.layout{grid-template-columns:1fr}}
.sidebar{position:sticky;top:24px;height:fit-content;border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--title)}
.badge{margin-left:auto;background:rgba(255,199,0,.08);border:1px solid var(--border);border-radius:999px;padding:2px 10px;font-size:11px;color:var(--link)}
.nav{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
.nav a{display:flex;align-items:center;gap:10px;position:relative;padding:10px 14px;border-radius:8px;color:#e6e6ee;text-decoration:none;border:1px solid #dcdcdc;background:linear-gradient(180deg,rgba(246,246,246,.06),rgba(246,246,246,.03));font-family:ui-monospace,Consolas,Monaco,monospace;text-transform:uppercase;letter-spacing:.12em;overflow:hidden}
.nav a .rail{position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--brand), var(--brand-2));opacity:.0;transition:opacity .18s ease}
.nav a .label{position:relative}
.nav a:hover{background:linear-gradient(180deg,rgba(246,246,246,.10),rgba(246,246,246,.05));color:#fff}
.nav a.active{background:linear-gradient(180deg,rgba(255,199,0,.18),rgba(255,199,0,.10));border-color:rgba(255,199,0,.45);box-shadow:inset 0 0 0 1px rgba(255,199,0,.25),0 8px 24px rgba(255,199,0,.10);color:#fff}
.nav a.active .rail{opacity:1}
/* Appendices collapsible */
.nav details{margin-top:8px;border:1px solid #dcdcdc;border-radius:8px;overflow:hidden}
.nav details>summary{list-style:none;cursor:pointer;padding:10px 14px;color:#e6e6ee;background:linear-gradient(180deg,rgba(246,246,246,.06),rgba(246,246,246,.03));font-family:ui-monospace,Consolas,Monaco,monospace;text-transform:uppercase;letter-spacing:.12em;display:flex;align-items:center;gap:10px;position:relative}
.nav details>summary.active{background:linear-gradient(180deg,rgba(255,199,0,.18),rgba(255,199,0,.10));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,199,0,.25)}
.nav details>summary::before{content:"[";margin-right:8px}
.nav details>summary::after{content:"]";margin-left:8px}
.nav details[open]>summary{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06))}
.nav .subnav{display:grid;padding:8px;background:rgba(255,255,255,.02)}
.nav .subnav a{margin:4px 8px;border-radius:6px}
/* Page */
.page{min-width:0}
.hero{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:36px 30px;box-shadow:var(--shadow)}
/* Flat mode (all pages except home) */
.flat .hero{border:0;background:transparent;box-shadow:none;padding:0 0 18px 0}
.hero h1{margin:0 0 8px 0;font-size:48px;line-height:1.08;color:transparent;background:linear-gradient(120deg,#ffffff 0%,#ffeaa6 35%,#ffc700 60%,#ffd24a 100%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;animation:headlineGlow 14s ease-in-out infinite alternate}
@keyframes headlineGlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.subtitle{margin:0;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:rgba(255,255,255,.03);border-radius:999px;padding:6px 12px;font-size:12px;color:#d7d7e2}
.section{margin-top:26px;border:1px solid var(--border);background:var(--panel2);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)}
.flat .section{border:0;background:transparent;box-shadow:none;padding:0;margin-top:22px}
.flat .section + .section{border-top:1px solid var(--border);padding-top:18px}
/* Home (index) layout refinements */
.home .hero{padding:44px 34px;border:1px solid #222;background:linear-gradient(180deg,rgba(20,20,26,.85),rgba(16,16,22,.85))}
.home .hero h1{font-size:56px}
.eyebrow{font-family:monospace;letter-spacing:.12em;color:#b6b6c6;text-transform:uppercase;font-size:12px;margin:0 0 8px 0}
/* Tile grid for grouped navigation */
.tile-grid{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1050px){.tile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.tile-grid{grid-template-columns:1fr}}
.tile{display:block;border:1px solid var(--border);background:var(--panel2);border-radius:14px;padding:16px;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease, border-color .2s}
.tile:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.35);border-color:#2a2a34}
.tile h4{margin:4px 0 6px 0;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,Consolas,Monaco,monospace;display:flex;align-items:center}
.tile h4::before{content:"[";margin-right:8px;color:#e9e9ef}
.tile h4::after{content:"]";margin-left:8px;color:#e9e9ef}
.tile p{margin:0;color:#cfd0de}
/* Prose & feature layout for richer pages */
.prose p{margin:0 0 12px 0}
.prose ul{margin:0 0 12px 18px}
.feature-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.feature-grid{grid-template-columns:1fr}}
.feature{padding:12px 12px 12px 16px;border-left:3px solid var(--brand);background:transparent}
.kpis{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin:10px 0 6px 0}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{border:1px solid var(--border);border-radius:10px;padding:12px 14px;background:var(--panel2)}
.kpi .num{font-size:26px;color:#fff}
.kpi .label{color:#bdbdd0}
.checklist{list-style:none;padding-left:0;margin:0}
.checklist li{position:relative;padding-left:22px;margin:8px 0;color:#d9d9e2}
.checklist li::before{content:"✔";position:absolute;left:0;top:0;color:#9fe870}
h2{margin:0 0 12px 0;font-size:26px;line-height:1.25;color:#fff}
h3{margin:18px 0 8px 0;font-size:19px;line-height:1.35;color:#fff}
p{margin:0 0 12px 0;color:#d9d9e2}
ul,ol{margin:0 0 12px 20px}
.muted{color:var(--muted)}
.callout{border:1px solid var(--border);border-left:3px solid var(--brand);background:rgba(255,255,255,.02);padding:12px;border-radius:10px;color:#e6e6f0}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}
code,pre{background:#0b0b0d;border:1px solid var(--border);border-radius:10px}
code{padding:2px 6px;font-family:ui-monospace,Consolas,Monaco,monospace}
pre{padding:12px;overflow:auto}
.mono{font-family:ui-monospace,Consolas,Monaco,monospace;color:#e6e6f0}
figure{margin:0 0 12px 0}
figcaption{color:#bdbdd0;font-size:12px;margin-top:6px}
a{color:var(--link)}
a:hover{text-decoration:underline}
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.table th,.table td{padding:12px;border-bottom:1px solid var(--border)}
.table th{background:rgba(255,255,255,.03);text-align:left;color:#ddd}
.table tr:last-child td{border-bottom:0}
/* Cards grid on index */
.cards{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1050px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.cards{grid-template-columns:1fr}}
.card{display:block;border:1px solid var(--border);background:var(--panel2);border-radius:14px;padding:16px;text-decoration:none;color:inherit;transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(0,0,0,.35)}
.card h4{margin:4px 0 6px 0;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-family:ui-monospace,Consolas,Monaco,monospace;display:flex;align-items:center}
.card h4::before{content:"[";margin-right:8px;color:#e9e9ef}
.card h4::after{content:"]";margin-left:8px;color:#e9e9ef}
.card p{margin:0;color:#cfd0de}
.footer{position:relative;z-index:1;margin-top:28px;border-top:1px solid var(--border);padding:18px 0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.22));backdrop-filter:saturate(140%) blur(4px);color:#c9c9d6;font-size:12px;opacity:0;animation:wpFooterIn .35s ease .2s forwards}
.footer .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.footer a{color:#d8d8e2;text-decoration:none;transition:color .15s ease}
.footer a:hover{color:#ffffff;text-decoration:underline}
@keyframes wpFooterIn{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
/* Bracket buttons like main site */
.actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid #dcdcdc;padding:0 24px;height:56px;line-height:56px;color:#111;background:linear-gradient(180deg,#f3f3f3 0%,#e7e7e7 60%,#d0d0d0 100%);text-decoration:none;font-family:monospace;text-transform:uppercase;box-shadow:inset 0 0 54px 0 rgba(255,255,255,.55),0 8px 24px rgba(0,0,0,.25)}
.btn:hover{filter:brightness(.98)}
.btn.secondary{border:1px solid #dcdcdc;color:#eaeaea;background:linear-gradient(180deg,rgba(235,235,235,.10),rgba(235,235,235,.05));box-shadow:inset 0 0 40px rgba(255,255,255,.06)}