.doc main{display:block}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.doc-hero{position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(130px,17vh,200px) var(--gut) clamp(58px,9vh,104px)}
.doc-hero>canvas{position:absolute; inset:0; width:100%; height:100%;
  z-index:0; image-rendering:pixelated; opacity:.5}
.doc-hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(76% 68% at 8% 62%, rgba(5,6,7,.94) 0%, rgba(5,6,7,.52) 48%, transparent 80%),
    linear-gradient(to bottom, rgba(5,6,7,.72), transparent 34%, var(--void))}
.doc-hero-in{position:relative; z-index:2; max-width:min(760px,100%)}

.doc-hero > .sec-head{position:relative; z-index:2}
.doc-hero .lede{margin:26px 0 0; max-width:46ch; color:var(--body);
  font-size:19px; line-height:1.8}
.doc-hero .lede b{color:var(--ink); font-weight:700}
.doc-updated{margin:22px 0 0; font-family:var(--mono); font-size:12px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--faint); max-width:52ch;
  line-height:1.9}

.t-gold{--tone:#F4B728}
.t-green{--tone:#3DE08A}
.t-steel{--tone:#7FA6C4}

.alloc{display:flex; height:clamp(54px,7vw,82px); margin-top:clamp(34px,5vh,54px);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#080A0B}
.alloc .seg{display:block; width:0; background:var(--tone); position:relative;
  transition:width 1.1s var(--ease); transition-delay:var(--d)}
.alloc .seg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 55%)}
.reveal.in .alloc .seg,.alloc.in .seg{width:var(--w)}

.alloc-legend{display:grid; gap:10px 26px; margin-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.lg{display:flex; align-items:baseline; gap:9px; font-family:var(--mono); font-size:13px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.lg i{width:9px; height:9px; flex:0 0 9px; border-radius:2px; background:var(--tone);
  transform:translateY(1px)}
.lg b{font-size:20px; font-weight:400; color:var(--ink); letter-spacing:0}
.lg span{flex:1 1 auto}
.lg em{font-style:normal; color:var(--tone)}

.tbl-wrap{margin-top:clamp(30px,4.5vh,48px); overflow-x:auto;
  border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.3)}
.tbl{width:100%; border-collapse:collapse; min-width:620px}
.tbl th,.tbl td{text-align:left; padding:14px 18px; vertical-align:top;
  border-bottom:1px solid var(--line); font-size:16px; line-height:1.6}
.tbl thead th{font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  background:rgba(255,255,255,.022); white-space:nowrap}
.tbl tbody td{color:var(--body)}
.tbl tbody td:first-child{color:var(--ink); white-space:nowrap}
.tbl tbody td b{color:var(--ink); font-weight:700}
.tbl td em{display:block; font-style:normal; font-family:var(--mono);
  font-size:12px; letter-spacing:.08em; color:var(--faint); margin-top:3px}
.tbl .num{font-family:var(--mono); text-align:right; white-space:nowrap; color:var(--ink)}
.tbl tbody tr{transition:background .25s}
.tbl tbody tr:hover{background:rgba(255,255,255,.028)}
.tbl tfoot th{font-family:var(--mono); font-size:14px; color:var(--gold);
  font-weight:400; border-bottom:0; background:rgba(244,183,40,.045)}
.tbl .dot{display:inline-block; width:8px; height:8px; border-radius:2px;
  background:var(--tone,var(--faint)); margin-right:9px; transform:translateY(0)}
.tbl code{font-family:var(--mono); font-size:14px; color:var(--gold)}

@media (max-width:640px){
  .tbl-stack{min-width:0}
  .tbl-stack thead{display:none}
  .tbl-stack tr{display:block; padding:16px 18px; border-bottom:1px solid var(--line)}
  .tbl-stack tbody tr:last-child{border-bottom:0}
  .tbl-stack td{display:block; padding:0; border-bottom:0}
  .tbl-stack tbody td:first-child{white-space:normal; font-weight:700}
  .tbl-stack td + td{margin-top:10px}
  .tbl-stack td[data-label]::before{content:attr(data-label); display:block;
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint); margin-bottom:3px}
}

.note-cards{display:grid; gap:14px; margin-top:clamp(26px,4vh,40px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.note{padding:24px 22px; border:1px solid var(--line); border-radius:15px;
  background:rgba(0,0,0,.32)}
.note h3{margin:0 0 12px; font-size:18px; font-weight:700; color:var(--ink)}
.note p{margin:0 0 11px; font-size:16px; line-height:1.72; color:var(--body)}
.note p:last-child{margin-bottom:0}
.note b{color:var(--ink); font-weight:700}
.note code{font-family:var(--mono); font-size:14px; color:var(--gold)}
.note em{color:var(--ink); font-style:italic}

.steps{list-style:none; margin:clamp(32px,5vh,50px) 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:15px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.steps li{display:flex; gap:14px; padding:22px 20px; background:var(--void)}
.st-n{font-family:var(--mono); font-size:14px; letter-spacing:.12em;
  color:var(--gold); opacity:.8; padding-top:2px}
.steps b{display:block; color:var(--ink); font-size:17px; margin-bottom:5px}
.steps p{margin:0; font-size:15px; line-height:1.68; color:var(--body)}

.steps-prose li{display:block; font-size:15px; line-height:1.68; color:var(--body)}
.steps-prose b{display:inline; font-size:inherit; margin:0}

.callout{display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px;
  margin-top:clamp(26px,4vh,40px); padding:22px 24px; border-radius:15px;
  border:1px solid rgba(244,183,40,.3); background:rgba(244,183,40,.05)}
.callout p{margin:0; flex:1 1 320px; font-size:17px; line-height:1.7; color:var(--body)}

.timeline{list-style:none; margin:clamp(32px,5vh,50px) 0 0; padding:0;
  position:relative}
.timeline::before{content:""; position:absolute; left:7px; top:8px; bottom:8px;
  width:1px; background:linear-gradient(180deg,var(--venom),var(--line) 22%,var(--line))}
.timeline li{position:relative; display:grid; gap:4px 20px; padding:0 0 26px 34px;
  grid-template-columns:minmax(96px,auto) minmax(0,1fr)}
@media (max-width:640px){ .timeline li{grid-template-columns:1fr; gap:6px} }
.timeline li::before{content:""; position:absolute; left:2px; top:6px;
  width:11px; height:11px; border-radius:50%; background:var(--void);
  border:1px solid var(--line2)}
.timeline li.now::before{background:var(--venom); border-color:var(--venom);
  box-shadow:0 0 12px var(--venom)}
.tl-when{font-family:var(--mono); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold); padding-top:2px}
.timeline li.now .tl-when{color:var(--venom)}
.tl-body b{display:block; color:var(--ink); font-size:18px; margin-bottom:5px}
.tl-body p{margin:0; font-size:16px; line-height:1.7; color:var(--body); max-width:56ch}

.nots b{color:var(--ink); font-weight:700}
.fine.bad{color:var(--bad)}

@media (prefers-reduced-motion:reduce){
  .alloc .seg{transition:none}
}

.fine{
  padding:16px 20px; border:1px solid var(--line);
  border-left:3px solid rgba(244,183,40,.45); border-radius:10px;
  background:rgba(14,19,15,.5); max-width:74ch;
}

.strip{
  display:grid; grid-template-columns:repeat(10,1fr); gap:10px;
  margin-top:clamp(26px,4vh,40px);
}
.st-cell{
  position:relative; margin:0; border:1px solid var(--line2);
  background:#070b08; overflow:hidden; aspect-ratio:1;
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease,
             border-color .25s ease, box-shadow .25s ease;
  transition-delay:calc(var(--i) * 55ms);
}
.reveal.in .st-cell{opacity:1; transform:none}
.st-cell img{
  display:block; width:100%; height:100%; object-fit:cover;
  image-rendering:pixelated;
  filter:grayscale(.55) brightness(.62) contrast(1.05);
  transition:filter .3s ease, transform .35s ease;
}
.st-cell figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:5px 6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--faint); background:linear-gradient(transparent,rgba(3,6,4,.92));
  opacity:0; transition:opacity .25s ease;
}

.st-cell:hover img{filter:grayscale(.2) brightness(.85) contrast(1.05)}
.st-cell:hover figcaption{opacity:1}

@media (hover:none){
  .st-cell figcaption{opacity:1}
}

@media (max-width:860px){ .strip{grid-template-columns:repeat(5,1fr)} }
@media (max-width:480px){ .strip{grid-template-columns:repeat(4,1fr); gap:6px} }
@media (prefers-reduced-motion:reduce){
  .st-cell{transition:none; opacity:1; transform:none}
  .st-cell:hover img{transform:none}
}

.doc-end{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:clamp(56px,9vh,110px) var(--gut) clamp(20px,3vh,40px);
  text-align:center;
}
.doc-end-line{
  margin:0; font-family:var(--mono); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--faint);
}
.doc-end-back{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:10px; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--venom) 40%, transparent);
  background:color-mix(in srgb, var(--venom) 7%, transparent);
  color:var(--venom); font-family:var(--mono); font-size:14px;
  letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .2s, background .2s, transform .2s var(--ease);
}
.doc-end-back:hover{
  border-color:var(--venom);
  background:color-mix(in srgb, var(--venom) 14%, transparent);
  transform:translateY(-2px);
}
.doc-end-back span{transition:transform .2s var(--ease)}
.doc-end-back:hover span{transform:translateX(-4px)}
@media (prefers-reduced-motion:reduce){
  .doc-end-back,.doc-end-back span{transition:none}
  .doc-end-back:hover{transform:none}
  .doc-end-back:hover span{transform:none}
}