/* Stater — brand identity in CSS.
   Palette and type come from brand/README.md: black coin, holographic mark
   (cream -> pale blue), ink grounds, Archivo / IBM Plex Mono / Newsreader. */
:root{
  --ground:#0A1312; --ground-2:#0D1A17; --panel:#111F1C; --panel-2:#16241F;
  --line:#1E302C; --line-2:#2A3F39;
  --ink:#06181B; --paper:#EDF2F2; --muted:#93A8A2; --muted-2:#6B817B;
  --teal:#14B8A8; --mint:#4FE8D8; --cream:#F6F1C8; --blue:#C2CEEE; --green:#4E9B80;
  --holo:linear-gradient(120deg,var(--cream) 0%,#E4EBD4 42%,var(--blue) 100%);
  --r:16px; --r-sm:10px; --max:1140px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--paper);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
a{color:var(--mint); text-decoration:none; transition:color .2s var(--ease)}
a:hover{color:var(--cream)}
code,.mono{font-family:"IBM Plex Mono",Menlo,monospace}
h1,h2,h3,h4{letter-spacing:-.03em; line-height:1.08; margin:0; font-weight:800}
h1{font-size:clamp(42px,6.6vw,80px); font-weight:900; letter-spacing:-.045em}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:clamp(20px,2.4vw,26px); letter-spacing:-.025em}
h4{font-size:18px; letter-spacing:-.02em; font-weight:700}
p{margin:0 0 16px}
.serif{font-family:Newsreader,Georgia,serif}

/* ---------- banner + nav ---------- */
.banner{background:var(--holo); color:var(--ink); font-weight:600; font-size:13.5px;
  text-align:center; padding:9px 18px; position:relative; z-index:60}
nav{position:sticky; top:0; z-index:50; background:rgba(10,19,18,.78);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease)}
nav.stuck{border-bottom-color:var(--line); background:rgba(10,19,18,.94)}
nav .wrap{display:flex; align-items:center; gap:30px; height:70px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px;
  letter-spacing:-.03em; color:var(--paper)}
.brand:hover{color:var(--paper)}
.brand img{width:36px; height:36px; transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-12deg) scale(1.06)}
.navlinks{display:flex; gap:4px; margin-left:auto}
.navlinks a{color:var(--muted); font-size:15px; font-weight:500; padding:8px 14px;
  border-radius:8px; position:relative}
.navlinks a:hover{color:var(--paper); background:var(--panel)}
.navlinks a.on{color:var(--ink); background:var(--holo); font-weight:600}
.btn{display:inline-flex; align-items:center; gap:9px; padding:13px 24px; border-radius:11px;
  font-weight:600; font-size:16px; background:var(--holo); color:var(--ink);
  border:1px solid transparent; transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.btn:hover{color:var(--ink); transform:translateY(-2px); box-shadow:0 12px 30px -10px rgba(194,206,238,.4)}
.btn.sm{padding:9px 16px; font-size:14.5px}
.btn.ghost{background:transparent; color:var(--paper); border-color:var(--line-2)}
.btn.ghost:hover{color:var(--paper); border-color:var(--muted); box-shadow:none; background:var(--panel)}
.burger{display:none; margin-left:auto; background:none; border:0; cursor:pointer; padding:10px; gap:5px; flex-direction:column}
.burger span{display:block; width:22px; height:2px; background:var(--paper); transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobilemenu{display:none; flex-direction:column; border-top:1px solid var(--line); padding:10px 26px 20px}
.mobilemenu a{padding:13px 0; color:var(--paper); font-size:17px; font-weight:600; border-bottom:1px solid var(--line)}
.mobilemenu.open{display:flex}

/* ---------- hero ---------- */
.hero{position:relative; padding:110px 0 92px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 50% at 22% 18%, rgba(194,206,238,.10), transparent 62%),
             radial-gradient(48% 42% at 82% 8%, rgba(246,241,200,.09), transparent 60%),
             radial-gradient(45% 45% at 62% 78%, rgba(79,232,216,.07), transparent 62%);
  pointer-events:none; animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-3%,2%,0) scale(1.08)}}
.hero .wrap{position:relative}
.tag{display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
  border:1px solid var(--line-2); background:var(--panel); padding:7px 14px; border-radius:30px; font-weight:500}
.tag i{width:6px; height:6px; border-radius:50%; background:var(--mint); animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(79,232,216,.5)} 50%{opacity:.6; box-shadow:0 0 0 6px rgba(79,232,216,0)}}
.hero h1{margin:26px 0 22px; max-width:14ch}
.grad{background:var(--holo); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{font-size:clamp(18px,2.1vw,22px); color:var(--muted); max-width:620px; margin:0 0 36px; line-height:1.58}
.cta{display:flex; gap:13px; flex-wrap:wrap}

/* ---------- sections ---------- */
section{padding:96px 0; position:relative}
section + section{border-top:1px solid var(--line)}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:16px; display:block}
.sub{color:var(--muted); max-width:660px; margin:18px 0 44px; font-size:18px; line-height:1.6}
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:28px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease)}
.card:hover{transform:translateY(-4px); border-color:var(--line-2); background:var(--panel-2)}
.card p{color:var(--muted); font-size:15.5px; margin:10px 0 0}
.card .ic{width:40px; height:40px; border-radius:11px; background:var(--holo); display:grid;
  place-items:center; margin-bottom:16px; font-weight:800; color:var(--ink); font-size:17px}
.card.plain:hover{transform:none}

/* stat strip */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:60px}
.stat{background:var(--panel); padding:24px}
.stat .k{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:9px}
.stat .v{font-size:23px; font-weight:800; letter-spacing:-.03em}

/* steps */
.steps{counter-reset:s; display:grid; gap:16px}
.step{display:flex; gap:20px; padding:24px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r)}
.step::before{counter-increment:s; content:counter(s,decimal-leading-zero);
  font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink);
  background:var(--holo); width:34px; height:34px; border-radius:9px; display:grid;
  place-items:center; flex:none; font-weight:600}
.step h4{margin-bottom:6px}
.step p{color:var(--muted); font-size:15.5px; margin:0}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:15px}
th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted-2); font-weight:500; padding:0 13px 12px; border-bottom:1px solid var(--line)}
td{padding:14px 13px; border-bottom:1px solid var(--line); vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .2s var(--ease)}
tbody tr:hover{background:var(--panel-2)}
.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.tablewrap{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; overflow-x:auto}
.addr{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted-2)}
.addr a{color:var(--muted-2)}
.addr a:hover{color:var(--mint)}
.pill{display:inline-block; font-size:11px; font-family:"IBM Plex Mono",monospace;
  padding:3px 9px; border-radius:20px; border:1px solid var(--line-2); color:var(--muted)}
.pill.safe{color:var(--mint); border-color:rgba(79,232,216,.32)}
.pill.lock{color:var(--blue); border-color:rgba(194,206,238,.32)}
.pill.vest{color:var(--cream); border-color:rgba(246,241,200,.28)}
.bar{height:6px; border-radius:3px; background:var(--panel-2); overflow:hidden; margin-top:7px; min-width:80px}
.bar i{display:block; height:100%; background:var(--holo); width:0; transition:width 1.1s var(--ease)}
.live{display:inline-flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--muted-2)}
.dot.on{background:var(--mint); animation:pulse 2.4s ease-in-out infinite}
.dot.err{background:#E0755A}
.loading{color:var(--muted-2)}
.state{font-family:"IBM Plex Mono",monospace; font-size:13px}
.state.done{color:var(--mint)} .state.no{color:#E0755A} .state.part{color:var(--cream)}

/* ---------- roadmap ---------- */
.phases{display:grid; gap:0; position:relative; margin-top:12px}
.phase{display:grid; grid-template-columns:130px 1fr; gap:28px; padding:30px 0; border-top:1px solid var(--line)}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase .when{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--muted-2); padding-top:4px}
.phase .when b{display:block; color:var(--cream); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:5px; font-weight:600}
.phase ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:15.5px}
.phase li{margin-bottom:7px}
.phase li::marker{color:var(--line-2)}
.phase.now .when b{color:var(--mint)}
.phase.now{background:linear-gradient(90deg,rgba(79,232,216,.05),transparent 60%)}

/* ---------- whitepaper page ---------- */
.doc{max-width:760px; margin:0 auto}
.doc section{padding:52px 0; border-top:1px solid var(--line)}
.doc section:first-child{border-top:0; padding-top:12px}
.doc h2{font-size:clamp(26px,3.2vw,36px); margin-bottom:18px}
.doc h3{font-size:19px; margin:34px 0 10px}
.doc p{color:#C6D3D0; font-size:17px; line-height:1.75}
.doc li{color:#C6D3D0; margin-bottom:9px}
.doc ul{padding-left:20px}
.doc table{margin:20px 0; font-size:14.5px}
.doc code{background:var(--panel-2); padding:2px 6px; border-radius:5px; font-size:.88em; color:var(--cream)}
.doc .note,.doc .risk{background:var(--panel); border-left:2px solid var(--line-2);
  padding:16px 20px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:18px 0}
.doc .risk{border-left-color:#E0755A}
.doc .risk b{color:var(--paper)}
.toc{position:sticky; top:96px; align-self:start; font-size:14px}
.toc a{display:block; color:var(--muted-2); padding:5px 0 5px 13px; border-left:2px solid var(--line)}
.toc a:hover,.toc a.on{color:var(--paper); border-left-color:var(--mint)}
.doclayout{display:grid; grid-template-columns:210px 1fr; gap:56px; align-items:start}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:64px 0 40px; margin-top:0}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px}
footer .wrap + .wrap{display:block; margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.fcol h5{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin:0 0 14px; font-weight:500}
.fcol a{display:block; color:var(--muted); font-size:15px; padding:4px 0}
.fcol a:hover{color:var(--paper)}
.fmuted{color:var(--muted-2); font-size:14.5px; margin-top:14px; line-height:1.6}
.small{font-size:13px}
.disclaim{font-size:12.5px; color:var(--muted-2); line-height:1.65; max-width:900px}

/* ---------- motion ---------- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
[data-reveal].in{opacity:1; transform:none}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}

/* Motion is decoration. Anyone who has asked their system to stop it gets the
   finished state immediately rather than a degraded version of the animation. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
  [data-reveal]{opacity:1; transform:none}
  .bar i{transition:none}
}

@media (max-width:920px){
  .doclayout{grid-template-columns:1fr; gap:0}
  .toc{display:none}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .navlinks{display:none}
  .burger{display:flex}
  .btn.sm{display:none}
  .hero{padding:72px 0 62px}
  section{padding:64px 0}
  .phase{grid-template-columns:1fr; gap:6px}
  footer .wrap{grid-template-columns:1fr; gap:30px}
  table{font-size:13.5px}
  th{padding:0 8px 10px; font-size:10px}
  td{padding:12px 8px}
  .tablewrap{padding:8px 10px}
  .addr{font-size:11.5px}
  .card{padding:22px}
}

/* ============================================================
   The "one coin, every chain" visuals
   ============================================================ */

/* ---- hero split ---- */
.herogrid{display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}
.orbitwrap{position:relative; display:grid; place-items:center}
.orbit{width:100%; max-width:540px; overflow:visible}
.orbit .ring circle{fill:none; stroke:var(--line); stroke-width:1}
.orbit .track{fill:none; stroke:var(--line-2); stroke-width:1.5; stroke-dasharray:3 14;
  transform-origin:300px 300px; animation:orbitspin 46s linear infinite}
.orbit .track.slow{animation-duration:78s; animation-direction:reverse}
@keyframes orbitspin{to{transform:rotate(360deg)}}
.orbit .spoke line{stroke:var(--line-2); stroke-width:1}
.orbit .pulse{fill:var(--cream)}
.orbit .node circle{fill:var(--panel); stroke:var(--line-2); stroke-width:1;
  animation:bob 7s var(--ease) infinite; animation-delay:var(--d)}
.orbit .node text{text-anchor:middle; font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; fill:var(--paper); letter-spacing:.04em; font-weight:500}
.orbit .node .lbl{font-size:12px; fill:var(--muted); letter-spacing:.02em; font-weight:400}
.orbit .node.n2 circle{stroke-dasharray:2 4}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}
.orbit .halo{fill:none; stroke:url(#og); stroke-width:1.5; opacity:.5;
  transform-origin:300px 300px; animation:halo 3.6s var(--ease) infinite}
@keyframes halo{0%,100%{transform:scale(1); opacity:.5} 50%{transform:scale(1.14); opacity:0}}
.orbitnote{margin-top:14px; font-size:13px; color:var(--muted-2); text-align:center; max-width:420px}

/* ---- chain marquee ---- */
.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; background:var(--ground-2); position:relative}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--ground-2),transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--ground-2),transparent)}
.mtrack{display:flex; gap:46px; width:max-content; animation:marquee 34s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mitem{display:flex; align-items:center; gap:11px; font-family:"IBM Plex Mono",monospace;
  font-size:14px; color:var(--muted-2); white-space:nowrap}
.mitem b{color:var(--muted); font-weight:500}
.mitem i{width:7px; height:7px; border-radius:50%; background:var(--line-2); font-style:normal}

/* ---- payment flow ---- */
.flow{display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:0; align-items:center; margin-top:16px}
.fbox{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:24px; text-align:center}
.fbox .fk{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:10px}
.fbox h4{margin-bottom:7px}
.fbox p{color:var(--muted); font-size:14.5px; margin:0}
.fbox.mid{border-color:var(--line-2); background:var(--panel-2)}
.wire{position:relative; height:2px; background:var(--line); min-width:64px; overflow:visible}
.wire span{position:absolute; top:-4px; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--holo); animation:travel 2.8s var(--ease) infinite}
.wire.w2 span{animation-delay:1.4s}
@keyframes travel{0%{left:0; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{left:100%; opacity:0}}

/* ---- section backdrop mesh ---- */
.mesh{position:relative; overflow:hidden}
.mesh::before{content:""; position:absolute; inset:0;
  background:radial-gradient(40% 40% at 15% 30%, rgba(194,206,238,.07), transparent 60%),
             radial-gradient(35% 35% at 85% 70%, rgba(246,241,200,.06), transparent 60%);
  animation:drift 34s ease-in-out infinite alternate; pointer-events:none}
.mesh .wrap{position:relative}

@media (prefers-reduced-motion:reduce){
  .orbit .track,.orbit .node circle,.orbit .halo,.mtrack,.wire span,.mesh::before{animation:none!important}
  .orbit .pulse{display:none}
  .mtrack{transform:none}
}
@media (max-width:980px){
  .herogrid{grid-template-columns:1fr; gap:34px}
  .orbitwrap{order:-1}
  .orbit{max-width:400px}
  .flow{grid-template-columns:1fr; gap:14px}
  .wire{width:2px; height:34px; min-width:0; justify-self:center}
  .wire span{left:-4px; top:0; animation-name:travelv}
  @keyframes travelv{0%{top:0; opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:100%; opacity:0}}
}

/* ============================================================
   Roadmap timeline
   ============================================================ */
.tl{position:relative; margin-top:10px}
.tl::before{content:""; position:absolute; left:23px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(var(--line-2), var(--line) 70%, transparent)}
.ph{position:relative; padding:0 0 42px 74px}
.ph:last-child{padding-bottom:0}
.ph .marker{position:absolute; left:0; top:0; width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center; background:var(--panel); border:1px solid var(--line-2);
  font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--muted); z-index:1}
.ph.done .marker{background:var(--holo); color:var(--ink); border-color:transparent; font-weight:600}
.ph.active .marker{border-color:var(--mint); color:var(--mint)}
.ph.active .marker::after{content:""; position:absolute; inset:-5px; border-radius:18px;
  border:1px solid var(--mint); opacity:.4; animation:halo 2.8s var(--ease) infinite}
.phhead{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:6px}
.phhead h3{margin:0}
.chip{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:4px 10px; border-radius:20px; border:1px solid var(--line-2);
  color:var(--muted-2); white-space:nowrap}
.chip.done{color:var(--ink); background:var(--holo); border-color:transparent; font-weight:600}
.chip.active{color:var(--mint); border-color:rgba(79,232,216,.4)}
.ph > p{color:var(--muted); font-size:15.5px; margin:0 0 16px; max-width:640px}
.items{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.items li{display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--muted)}
.items li::before{content:"○"; color:var(--line-2); font-size:13px; line-height:1.5; flex:none}
.items li.ok{color:#B8C9C4}
.items li.ok::before{content:"✓"; color:var(--mint); font-weight:700}
.items li.now::before{content:"◆"; color:var(--cream)}
.items li b{color:var(--paper); font-weight:600}
.tlnote{margin-top:44px}
@media (max-width:760px){
  .tl::before{left:17px}
  .ph{padding-left:56px; padding-bottom:34px}
  .ph .marker{width:36px; height:36px; border-radius:11px; font-size:12px}
}

/* ============================================================
   Keyboard access · a dark theme suppresses the default ring
   ============================================================ */
:focus{outline:none}
:focus-visible{outline:2px solid var(--mint); outline-offset:3px; border-radius:4px}
.btn:focus-visible,.navlinks a:focus-visible{outline-offset:4px}

.skip{position:fixed; left:-9999px; top:0; z-index:100;
  background:var(--holo); color:var(--ink); padding:12px 20px; border-radius:0 0 10px 0;
  font-weight:700; font-size:15px}
.skip:focus{left:0; color:var(--ink)}

.sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---- roadmap progress ---- */
.prog{margin:0 0 42px; max-width:560px}
.prog .plabel{display:flex; justify-content:space-between; font-family:"IBM Plex Mono",monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px}
.prog .ptrack{height:8px; border-radius:4px; background:var(--panel-2); overflow:hidden; display:flex; gap:3px}
.prog .pseg{flex:1; background:var(--line); border-radius:2px}
.prog .pseg.done{background:var(--holo)}
.prog .pseg.active{background:linear-gradient(90deg,var(--mint) 45%,var(--line) 45%)}

/* ---- whitepaper TOC, two levels ---- */
.toc a.sub{padding-left:26px; font-size:13px; color:var(--muted-2); opacity:.85}
.toc a.sub:hover,.toc a.sub.on{opacity:1}