:root{
  --bg:#07070e; --bg-2:#0b0b15; --surface:#11111d; --surface-2:#161624;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --text:#ECECF4; --text-dim:#A6A6BE; --text-faint:#6E6E85;
  --pink:#FF4D8D; --purple:#8B5CFF; --blue:#4D7CFF; --orange:#FF8A3C; --gold:#FFB347;
  --brand:linear-gradient(135deg,#FFB347 0%,#FF8A3C 28%,#FF4D8D 60%,#8B5CFF 100%);
  --maxw:1310px;
  --barh:52px;
  --disp:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding-top:var(--barh); background:var(--bg); color:var(--text); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -5%, rgba(255,77,141,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 5%, rgba(139,92,255,.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(77,124,255,.06), transparent 60%);
  background-attachment:fixed;
}
::selection{background:rgba(255,77,141,.30); color:#fff}
a{color:inherit; text-decoration:none}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; padding:64px 24px 56px; border-bottom:1px solid var(--border)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size:34px 34px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:min(560px,80%); height:1px; transform:translateX(-50%);
  background:var(--brand); opacity:.6; filter:blur(.3px);
}
.hero-inner{position:relative; max-width:var(--maxw); margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
.logo{width:78px; height:78px; object-fit:contain; filter:drop-shadow(0 8px 28px rgba(255,107,60,.45)); animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.eyebrow{font-family:var(--sans); font-size:12px; letter-spacing:.34em; text-transform:uppercase; color:var(--text-dim); font-weight:600; display:flex; align-items:center; gap:10px}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 10px rgba(255,77,141,.8)}
.wordmark{font-family:var(--disp); font-weight:700; font-size:clamp(40px,7vw,68px); letter-spacing:.06em; margin:0; color:#F7F7FC; line-height:1}
.wordmark .amp{background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{font-family:var(--disp); font-weight:500; font-size:clamp(15px,2.2vw,19px); background:var(--brand); -webkit-background-clip:text; background-clip:text; color:transparent; margin:0; letter-spacing:.01em}
.subtitle{color:var(--text-dim); font-size:14px; margin:0; max-width:560px}
.subtitle b{color:var(--text); font-weight:600}

/* ---------- Layout ---------- */
.shell{max-width:var(--maxw); margin:0 auto; padding:40px 24px 0; display:grid; grid-template-columns:232px 1fr; gap:48px; align-items:start}
.toc{position:sticky; top:calc(var(--barh) + 16px); max-height:calc(100vh - var(--barh) - 32px); overflow:auto; padding:8px 0 24px; font-size:13.5px}
.toc .toc-label{font-family:var(--sans); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--text-faint); font-weight:600; margin:0 0 14px; padding-left:14px}
.toc a{display:block; padding:6px 14px; color:var(--text-dim); border-left:1px solid var(--border); transition:color .15s, border-color .15s, background .15s; line-height:1.45}
.toc a.toc-sub{padding-left:26px; font-size:12.5px; color:var(--text-faint)}
.toc a:hover{color:var(--text); border-left-color:var(--pink); background:rgba(255,255,255,.02)}
.toc a.toc-sub:hover{color:var(--text-dim)}
.content{min-width:0; padding-bottom:72px}

/* ---------- Typography ---------- */
h2,h3,h4{font-family:var(--disp); font-weight:600; line-height:1.25; scroll-margin-top:calc(var(--barh) + 16px)}
h2{
  font-size:clamp(22px,3vw,27px); margin:52px 0 18px; padding:0 0 12px; color:#F7F7FC;
  border-bottom:1px solid var(--border); position:relative; letter-spacing:-.01em;
}
h2:first-of-type{margin-top:8px}
h3{font-size:17px; margin:30px 0 12px; color:#F2F2F8}
p{margin:14px 0}
strong{color:#F7F7FC; font-weight:600}
em{color:var(--text-dim); font-style:italic}
a[href^="http"]{color:var(--gold); border-bottom:1px solid rgba(255,179,71,.3)}
a[href^="http"]:hover{border-bottom-color:var(--gold)}
a.person{color:inherit; border-bottom:none; text-decoration:none}
a.person:hover{color:var(--gold); border-bottom:1px solid rgba(255,179,71,.3)}
code{font-family:var(--mono); font-size:.88em; background:var(--surface-2); color:var(--gold);
  padding:2px 7px; border-radius:6px; border:1px solid var(--border)}
hr{display:none}

/* ---------- Lists ---------- */
ul,ol{margin:16px 0; padding-left:22px}
li{margin:8px 0}
li::marker{color:var(--text-faint)}
li > p{margin:6px 0}
li > p:first-child{margin-top:0}
li > p:last-child{margin-bottom:0}
ul li::marker{content:""}
ul li{position:relative; padding-left:18px}
ul li::before{content:""; position:absolute; left:0; top:.82em; width:6px; height:6px; border-radius:50%;
  background:var(--brand); box-shadow:0 0 8px rgba(255,77,141,.5)}
/* numbered Implementation list -> gradient badges */
ol{list-style:none; padding-left:0; counter-reset:imp}
ol li{counter-increment:imp; position:relative; padding-left:44px; min-height:30px}
ol li::before{
  content:counter(imp,decimal-leading-zero); position:absolute; left:0; top:1px;
  width:30px; height:26px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:600; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:7px;
}
ol li::after{content:""; position:absolute; left:34px; top:13px; width:6px; height:1px; background:var(--border-strong)}

/* mission H3 cards */
h3 .mission-mark{font-size:15px; margin-right:8px; filter:drop-shadow(0 0 6px rgba(255,179,71,.6))}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto; margin:22px 0; border:1px solid var(--border); border-radius:14px}
table{border-collapse:separate; border-spacing:0; width:100%; background:linear-gradient(180deg,var(--surface),#0e0e18); font-size:14px}
table.data{box-shadow:0 1px 0 var(--border) inset}
thead th{
  font-family:var(--sans); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  font-weight:600; text-align:left; padding:14px 16px; background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
tbody td{padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:top; color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.025)}
tbody td strong{color:#F7F7FC}

/* matrix table */
table.matrix{font-size:13px}
table.matrix thead th{text-align:left}
table.matrix td:first-child{width:36px; text-align:center; color:var(--text-faint); font-family:var(--mono); font-size:12px}
table.matrix td:nth-child(2){font-weight:600; color:#F4F4FA; min-width:200px}
table.matrix td:nth-child(3),table.matrix td:nth-child(4){text-align:center; white-space:nowrap}
table.matrix td:nth-child(5),table.matrix td:nth-child(6){color:var(--text-dim); font-size:12.5px; line-height:1.55; min-width:230px}
td.cell-pill{padding:10px 12px}

/* pills */
.pill{display:inline-block; padding:3px 11px; border-radius:999px; font-size:11.5px; font-weight:600;
  letter-spacing:.02em; border:1px solid transparent; white-space:nowrap; font-family:var(--sans)}
.pill-critical{color:#FF8FA0; background:rgba(255,77,107,.12); border-color:rgba(255,77,107,.34)}
.pill-high{color:#FFB37A; background:rgba(255,138,60,.12); border-color:rgba(255,138,60,.34)}
.pill-med{color:#FFD98A; background:rgba(255,179,71,.12); border-color:rgba(255,179,71,.34)}
.pill-lowmed{color:#82BCFF; background:rgba(77,124,255,.12); border-color:rgba(77,124,255,.34)}
.pill-low{color:#7CE6BA; background:rgba(80,220,160,.12); border-color:rgba(80,220,160,.34)}

/* lead summary line */
.content p > strong:only-child{display:inline-block; margin-top:4px}

/* Questions section — refined open-questions cards */
h2#questions + ul{margin:22px 0; padding:0; list-style:none; display:grid; gap:12px}
h2#questions + ul li{position:relative; padding:16px 18px 16px 52px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; margin:0}
h2#questions + ul li::before{
  content:"?"; position:absolute; left:16px; top:16px; width:24px; height:24px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:700; font-size:14px; line-height:1; color:#1c1308;
  background:var(--brand);
  box-shadow:0 4px 12px rgba(255,77,141,.25), inset 0 0 0 1px rgba(255,255,255,.12);
}
h2#questions + ul li em{display:block; color:var(--text-dim); font-style:italic; margin:0 0 6px; font-size:14px; line-height:1.55}

/* hero author line */
.hero-author{margin:6px 0 0; font-size:13px; color:var(--text-dim); letter-spacing:.01em}
.hero-author strong{color:var(--text); font-weight:600}
.hero-author a{color:var(--gold); border-bottom:1px solid rgba(255,179,71,.3)}
.hero-author a:hover{border-bottom-color:var(--gold)}

/* Disclaimer / IP notice */
.disclaimer{margin:8px 0 32px; padding:18px 20px; background:var(--surface); border:1px solid var(--border-strong); border-radius:14px}
.disclaimer-title{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:600; font-size:15px; color:#F2F2F8; margin:0 0 12px; letter-spacing:.01em}
.disclaimer-icon{width:18px; height:18px; flex:0 0 auto; color:var(--gold)}
.disclaimer p{margin:10px 0; font-size:13.5px; line-height:1.65; color:var(--text-dim)}
.disclaimer p strong{color:var(--text); font-weight:600}
.disclaimer a{color:var(--gold); border-bottom:1px solid rgba(255,179,71,.3)}
.disclaimer a:hover{border-bottom-color:var(--gold)}

/* footer */
.footer{border-top:1px solid var(--border); padding:34px 24px 60px; margin-top:20px}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:center}
.footer .brand-mini{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:600; letter-spacing:.06em; color:#F2F2F8}
.footer .brand-mini img{width:26px; height:26px; object-fit:contain}
.footer .meta{font-size:12.5px; color:var(--text-faint); text-align:right; line-height:1.6}
.footer .meta b{color:var(--text-dim); font-weight:600}

/* back to top */
#top{position:fixed; right:22px; bottom:22px; width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong);
  background:rgba(17,17,29,.85); backdrop-filter:blur(8px); color:var(--text); cursor:pointer; display:none;
  align-items:center; justify-content:center; z-index:50; transition:transform .15s, border-color .15s}
#top:hover{transform:translateY(-2px); border-color:var(--pink)}
#top svg{width:16px; height:16px}

/* floating topbar */
.topbar{position:fixed; top:0; left:0; right:0; z-index:9000; background:rgba(7,7,14,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.topbar-inner{max-width:var(--maxw); margin:0 auto; height:var(--barh); padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar .tb-brand{display:flex; align-items:center; gap:10px; font-family:var(--disp); font-weight:700; letter-spacing:.06em; color:#F7F7FC; font-size:15px}
.topbar .tb-brand img{width:24px; height:24px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(255,107,60,.4))}
.topbar .tb-author{font-size:12.5px; color:var(--text-dim); letter-spacing:.02em; white-space:nowrap}
.topbar .tb-author b{color:var(--text); font-weight:600}

/* responsive */
@media (max-width:980px){
  .shell{grid-template-columns:1fr; gap:0}
  .toc{position:static; max-height:none; margin-bottom:18px; padding:18px 0; border-bottom:1px solid var(--border); display:none}
}
@media (max-width:640px){
  .hero{padding:48px 18px 40px}
  .shell{padding:30px 18px 0}
  .topbar-inner{padding:0 16px}
  table{font-size:13px}
  .footer-inner{flex-direction:column; align-items:flex-start}
  .footer .meta{text-align:left}
}
@media print{
  body{background:#fff; color:#111; padding-top:0}
  .toc,#top,.hero::before,.hero::after,.topbar{display:none}
  .hero{border:none; padding:8px 0}
  .wordmark,.tagline{color:#111; -webkit-text-fill-color:#111}
  .footer{border-color:#ccc}
}