:root{
  --paper:#FBFBF9;      
  --ink:#000000;        
  --mut:#6B6B68;        
  --hair:#DAD9D4;       
  --red:#C8102E;        
  --gut:48px;           
  --disp:'Archivo Black','Archivo Black Fallback','Arial Black',Arial,sans-serif;
  --body:'Archivo','Archivo Fallback','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','IBM Plex Mono Fallback',ui-monospace,'SF Mono',Menlo,monospace;
}
@font-face{font-family:'Archivo Black Fallback'; src:local('Arial Black'),local('Arial');
  ascent-override:92.5%; descent-override:24.0%; line-gap-override:0%; size-adjust:107.5%}
@font-face{font-family:'Archivo Fallback'; src:local('Helvetica Neue'),local('Arial');
  ascent-override:93.8%; descent-override:24.4%; line-gap-override:0%; size-adjust:103.2%}
@font-face{font-family:'IBM Plex Mono Fallback'; src:local('Menlo'),local('Courier New');
  ascent-override:88.0%; descent-override:26.0%; line-gap-override:0%; size-adjust:95.5%}
*{box-sizing:border-box}
html{color-scheme:light}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;   
}
.page{max-width:1440px; margin:0 auto}
a{color:var(--ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
@media (hover:hover){ a:hover{color:var(--red); text-decoration-thickness:2px} }
a:focus-visible{color:var(--red); text-decoration-thickness:2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a{transition:color .12s ease, text-decoration-thickness .12s ease}
}
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ink); outline-offset:2px; border-radius:0;
  box-shadow:0 0 0 5px var(--paper)}
.systembar a[aria-current]:focus-visible,.systembar a[data-section]:focus-visible,.cta.solid:focus-visible,.screen .r.on :focus-visible{
  outline-color:var(--paper); box-shadow:0 0 0 5px var(--ink)}
.skip{position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-decoration:none}
.skip:focus{left:0}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--disp); letter-spacing:-.04em; text-wrap:balance}
p,li,.body,.say,.statnote,.d{text-wrap:pretty}
:root{ --measure:58ch }
.lead,.statnote,.d,.screen .foot .big,.screen .r.txt,main p:not([class]){max-width:var(--measure)}
.reg{font-family:var(--mono); font-size:.92em; font-weight:500; white-space:nowrap}
.cap{font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.1em}
.cap.mut{color:var(--mut)}
.cap.red{color:var(--red)}
.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
.nav{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px var(--gut); border-bottom:3px solid var(--ink); flex-wrap:wrap}
.nav .logo{font-family:'Archivo Black',Arial,sans-serif; font-size:17px; letter-spacing:-.01em; text-decoration:none}
.nav .links{display:flex; gap:26px; flex-wrap:wrap}
.nav .links a{text-decoration:none}
.nav .links a[aria-current],.nav .links a[data-section]{border-bottom:3px solid var(--ink)}
.nav .links a{padding:12px 0; display:inline-block; line-height:1}
.systembar{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border-bottom:1px solid var(--ink)}
.systembar a{padding:10px 18px; border-right:1px solid var(--ink); color:var(--mut); text-decoration:none}
.systembar a:first-child{padding-left:var(--gut)}
.systembar a:last-child{border-right:0}
.systembar a[aria-current],.systembar a[data-section]{background:var(--ink); color:var(--paper)}
@media (hover:hover){ .systembar a:not([aria-current]):not([data-section]):hover{background:var(--fill); color:var(--ink)} }
.systembar a:not([aria-current]):not([data-section]):focus-visible{background:var(--paper); color:var(--ink)}
.hero{padding:88px var(--gut) 72px}
.hero.tight{padding-top:72px}
h1{font-size:clamp(44px,7.8vw,112px); line-height:.9; margin:20px 0 0; max-width:15ch}
h1.sm{font-size:clamp(40px,6.4vw,92px); max-width:16ch; margin-top:18px}
h1.xs{font-size:clamp(38px,6.1vw,88px); max-width:18ch; margin-top:18px}
.hero p{margin:30px 0 0; font-size:19px; font-weight:500; max-width:70ch}
.band{border-top:3px solid var(--ink); border-bottom:1px solid var(--ink)}
.rule{border-bottom:1px solid var(--ink)}
.g12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr))}
.g3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
.bR{border-right:1px solid var(--ink)}
.bB{border-bottom:1px solid var(--ink)}
.pad{padding:38px 30px}
.padL{padding:40px 40px 40px var(--gut)}
.padR{padding:40px var(--gut) 40px 40px}
.cell{padding:42px 34px}
.cell.first{padding-left:var(--gut)}
.cell.last{padding-right:var(--gut)}
.stat{font-family:var(--disp); font-size:52px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.stat.sm{font-size:34px}
.statlabel{margin-top:8px}
.statnote{font-size:13px; color:var(--mut); margin-top:6px; line-height:1.45}
h2{font-size:clamp(34px,4.4vw,62px); line-height:.95; max-width:18ch}
h2.md{font-size:clamp(28px,2.9vw,38px); line-height:.98; max-width:none}
h2.sm{font-size:clamp(24px,2.3vw,30px); letter-spacing:-.035em; max-width:none}
h3{font-size:27px; letter-spacing:-.03em}
h3.sm{font-size:20px; letter-spacing:-.025em}
.sec{padding:96px var(--gut) 0}
.sec + .band,.sec + .rows,.sec + .g3,.sec + .g2,.sec + .steps,.sec + .swapgrid{margin-top:44px}
.sec p.lead{margin:24px 0 0; font-size:17px; font-weight:500; max-width:62ch}
.body{font-size:16px; line-height:1.65; margin-top:22px; max-width:52ch}
.body.wide{max-width:60ch}   
.acts{display:flex; gap:0; margin-top:26px; flex-wrap:wrap}
.cta{display:inline-flex; align-items:center; height:50px; padding:0 26px; font-weight:700;
  font-size:15px; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; white-space:nowrap}
.cta.solid{background:var(--ink); color:var(--paper)}
@media (hover:hover){ .cta.solid:hover{color:var(--paper); background:var(--red)}
  .cta.line:hover{background:var(--ink); color:var(--paper)} }
.cta.solid:focus-visible{background:var(--red)}
.cta.line:focus-visible{background:var(--ink); color:var(--paper)}
@media (prefers-reduced-motion:no-preference){ .cta{transition:background .14s ease, color .14s ease} }
.cta.line{border:2px solid var(--ink); border-left:0}
.acts .cta.line:first-child{border-left:2px solid var(--ink)}
.rows{border-top:3px solid var(--ink)}
.rowhead,.row{display:grid; align-items:center; padding:20px var(--gut); border-bottom:1px solid var(--hair)}
.rowhead{padding-block:12px; border-bottom:1px solid var(--ink)}
.row:last-child{border-bottom:0}
.row .r{text-align:right; font-size:16px; font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.row .r.b{font-weight:700}
.row .l{font-size:16px; font-weight:600}
.row .l s{font-weight:400; color:var(--mut)}
.price{grid-template-columns:1fr 190px 190px}
.two{grid-template-columns:1fr 1.35fr; align-items:start; gap:24px}
.two .l{font-size:15.5px}
.two .d{font-size:14.5px; color:var(--mut); line-height:1.55}
.swapgrid{display:grid; grid-template-columns:300px 1fr; border-bottom:1px solid var(--ink)}
.swaphead{padding:42px 30px 42px var(--gut); border-right:1px solid var(--ink)}
.swap{display:grid; grid-template-columns:1fr 44px 1fr; align-items:center; padding:19px 30px; border-bottom:1px solid var(--hair)}
.swap:last-child{border-bottom:0}
.swap s{color:var(--mut); font-size:15px}
.swap .arrow{color:var(--mut); text-align:center}
.swap b{font-size:15px}
.screen{border:3px solid var(--ink)}
.screen .top{display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:10px 14px; border-bottom:3px solid var(--ink)}
.screen .r{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:13px 18px; border-bottom:1px solid var(--hair); font-size:14px}
.screen .r.on{background:var(--ink); color:var(--paper); font-weight:700; font-size:14.5px}
.screen .r.txt{display:block; font-size:13.5px; color:var(--mut)}
.screen .r:last-child{border-bottom:0}
.screen .foot{padding:12px 14px; border-top:3px solid var(--ink)}
.screen .foot .big{font-size:15px; font-weight:600; margin-top:5px}
.screen table{width:100%; border-collapse:collapse; font-size:13px}
.screen th,.screen td{text-align:left; padding:12px 18px; border-bottom:1px solid var(--hair); white-space:nowrap}
.screen thead th{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--mut)}
.screen tbody tr:last-child td{border-bottom:0}
.screen td.n{text-align:right; font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.screen .sub{display:block; font-size:10.5px; color:var(--mut); font-weight:400;
  font-family:var(--mono); letter-spacing:-.01em}
.tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap}
.tag.red{color:var(--red)}
.tag.box{border:1px solid currentColor; padding:1px 6px}
.slot{border:3px dashed var(--ink); padding:34px 24px; text-align:center; color:var(--mut)}
.slot b{display:block; color:var(--ink); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:7px}
.steps{border-top:3px solid var(--ink)}
.step{display:grid; grid-template-columns:60px 1fr 300px; gap:0; border-bottom:1px solid var(--hair)}
.step > div{padding:28px 30px}
.step .n{padding-left:var(--gut); font-family:'Archivo Black',Arial,sans-serif; font-size:20px; color:var(--mut)}
.step .cost{border-left:1px solid var(--hair); padding-right:var(--gut); font-size:14px; color:var(--mut)}
.step h3{margin-bottom:5px}
details{border-bottom:1px solid var(--hair)}
@media (hover:hover){ details summary:hover{background:var(--fill,#F1EFEA)} }
details summary:focus-visible{background:var(--fill,#F1EFEA); outline-offset:-3px}
details[open] summary{font-weight:700}
details summary{cursor:pointer; list-style:none; padding:24px var(--gut);
  font-size:17px; font-weight:600; display:flex; justify-content:space-between; gap:20px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+'; font-weight:400; color:var(--mut)}
details[open] summary::after{content:'\2013'}
details .a{padding:0 var(--gut) 26px; font-size:15.5px; color:var(--mut); max-width:64ch; line-height:1.6}
.end{padding:96px var(--gut); border-top:3px solid var(--ink)}
.foot{padding:44px var(--gut) 36px; border-top:1px solid var(--ink); font-size:12.5px; color:var(--mut); line-height:1.9}
.foot .cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); gap:24px; margin-bottom:20px}
.foot .cols div{display:flex; flex-direction:column; gap:5px}
.foot .cols a{text-decoration:none; color:var(--ink); font-size:13.5px}
.foot .cols .cap{color:var(--mut); margin-bottom:3px}
@media (max-width:1000px){
  :root{--gut:22px}
  .g12 > *{grid-column:1/-1 !important; border-right:0 !important}
  .g3,.g2{grid-template-columns:1fr}
  .bR{border-right:0; border-bottom:1px solid var(--ink)}
  .systembar{grid-template-columns:repeat(3,1fr)}
  .systembar a{border-bottom:1px solid var(--ink)}
  .price{grid-template-columns:1fr 96px 96px}
  .swapgrid{grid-template-columns:1fr}
  .swaphead{border-right:0; border-bottom:1px solid var(--ink)}
  .step{grid-template-columns:44px 1fr}
  .step .cost{grid-column:2; border-left:0; border-top:1px solid var(--hair)}
  .two{grid-template-columns:1fr; gap:4px}
}
.figwrap{padding:0 var(--gut); margin-top:44px}
@media (max-width:720px){
  .figwrap{padding:0}
  .fig .art{overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent)}
  .fig .art svg{min-width:460px}
}
.fig{border:3px solid var(--ink); background:var(--paper)}
.fig .cap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:3px solid var(--ink); color:var(--mut)}
.fig .cap b{color:var(--ink); font-weight:600}
.fig .art{padding:38px 30px; display:flex; justify-content:center}
.fig svg{width:100%; height:auto; max-width:1000px; display:block; color:var(--ink)}
.fig .say{padding:16px 18px; padding-right:max(18px, 100% - 58ch);
  border-top:1px solid var(--hair); font-size:14px; color:var(--mut); line-height:1.6}
.rec{border:3px dashed var(--ink); background:var(--paper); margin-top:44px}
.rec .hd{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1px dashed var(--ink)}
.rec .hd .what{font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.08em}
.rec .bd{padding:26px 18px 22px; display:grid; grid-template-columns:1fr 1fr; gap:26px}
.rec .bd > div{display:flex; flex-direction:column; gap:6px}
.rec .k{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--mut)}
.rec .v{font-size:14.5px; line-height:1.55}
.rec .v code{font-family:var(--mono); font-size:13.5px; font-weight:500}
.rec ol{margin:4px 0 0; padding-left:20px; font-size:14px; line-height:1.7}
@media (max-width:800px){.rec .bd{grid-template-columns:1fr; gap:18px}}
.dg{stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter}
.dg.thin{stroke-width:1.2}
.dg.fill{fill:currentColor; stroke:none}
.dgt{fill:currentColor; stroke:none; font-family:var(--body); font-size:11px;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.dgt.n{font-family:var(--disp); font-size:16px; letter-spacing:-.02em; text-transform:none}
.dgt.sm{font-size:9.5px; font-weight:500; letter-spacing:.06em; opacity:.55}
.dgt.mid{font-size:13px; text-transform:none; letter-spacing:0; font-weight:600}
.dgt.mono{font-family:var(--mono); font-size:10px; letter-spacing:0; text-transform:none; font-weight:400}
.inv{fill:var(--paper); stroke:none}
@keyframes dgDraw{to{stroke-dashoffset:0}}
@keyframes dgUp{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@keyframes dgLift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)}}
@keyframes dgPulse{0%,100%{opacity:.25} 50%{opacity:1}}
@keyframes dgGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes dgGrowY{from{transform:scaleY(0)} to{transform:scaleY(1)}}
@keyframes dgFall{0%{opacity:0; transform:translateY(-14px)} 12%,100%{opacity:1; transform:none}}
@keyframes dgTick{0%,100%{opacity:1} 50%{opacity:.2}}
.an-draw{stroke-dasharray:1; stroke-dashoffset:1; animation:dgDraw 1.5s ease-out forwards}
.an-up{animation:dgUp .55s ease-out both}
.an-lift{animation:dgLift 4.5s ease-in-out infinite}
.an-pulse{animation:dgPulse 2.6s ease-in-out infinite}
.an-grow{transform-origin:left center; animation:dgGrow 1.6s ease-out both}
.an-growy{transform-origin:center bottom; animation:dgGrowY 1.2s ease-out both}
.an-fall{animation:dgFall .5s ease-out both}
.an-tick{animation:dgTick 1.8s steps(1,end) infinite}
.fig .an-draw,.fig .an-up,.fig .an-grow,.fig .an-growy,.fig .an-fall,
.cand .an-draw,.cand .an-up,.cand .an-grow,.cand .an-growy,.cand .an-fall{animation-play-state:paused}
.fig.seen .an-draw,.fig.seen .an-up,.fig.seen .an-grow,.fig.seen .an-growy,.fig.seen .an-fall,
.cand.seen .an-draw,.cand.seen .an-up,.cand.seen .an-grow,.cand.seen .an-growy,.cand.seen .an-fall{animation-play-state:running}
.no-js .fig .an-draw,.no-js .fig .an-up,.no-js .fig .an-grow,.no-js .fig .an-growy,.no-js .fig .an-fall,
.no-js .cand .an-draw,.no-js .cand .an-up,.no-js .cand .an-grow,.no-js .cand .an-growy,.no-js .cand .an-fall{
  animation:none !important; stroke-dasharray:none !important; stroke-dashoffset:0 !important;
  opacity:1 !important; transform:none !important}
@keyframes dgBlink{0%,72%,100%{opacity:1} 80%,92%{opacity:.22}}
@keyframes dgCreep{0%{transform:translateX(0)} 50%{transform:translateX(5px)} 100%{transform:translateX(0)}}
@keyframes dgBreathe{0%,100%{opacity:.4} 50%{opacity:1}}
.an-blink{animation:dgBlink 3.4s ease-in-out infinite}
.an-creep{animation:dgCreep 3.8s ease-in-out infinite}
.an-breathe{animation:dgBreathe 3s ease-in-out infinite}
@media (hover:hover){
  .screen tbody tr:hover,.rows .row:hover,.limits .row:hover{background:var(--fill)}
  .swap:hover{background:var(--fill)}
}
.screen tbody tr:focus-within,.rows .row:focus-within,.limits .row:focus-within{background:var(--fill)}
.cell:has(> h3 > a),.sys article:has(h3 a){position:relative}
.cell > h3 > a::after,.sys article h3 a::after{content:''; position:absolute; inset:0}
@media (hover:hover){ .cell:has(> h3 > a):hover,.sys article:has(h3 a):hover{background:var(--fill)} }
.cell:has(> h3 > a:focus-visible),.sys article:has(h3 a:focus-visible){background:var(--fill)}
.topbar{position:fixed; inset:0 0 auto 0; z-index:60; background:var(--paper);
  border-bottom:3px solid var(--ink);
  opacity:0; transform:translateY(-100%); pointer-events:none;

  visibility:hidden}
.topbar[data-fixed]{opacity:1; transform:none; pointer-events:auto; visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .topbar{transition:transform .22s ease, opacity .22s ease, visibility .22s}
}
.topbar .in{max-width:1440px; margin:0 auto; display:flex; align-items:center; gap:22px;
  padding:0 var(--gut); min-height:52px}
.topbar .who{font-family:var(--disp); font-size:14px; white-space:nowrap; text-decoration:none}
.topbar .who span{font-family:var(--body); font-weight:400; color:var(--mut)}
@property --mL{syntax:'<length>'; inherits:false; initial-value:0px}
@property --mR{syntax:'<length>'; inherits:false; initial-value:0px}
.topbar .track{display:flex; gap:22px; overflow-x:auto; scrollbar-width:none;
  overscroll-behavior-x:contain; scroll-padding-left:var(--gut); min-height:52px; align-items:center;
  min-width:0; --mL:0px; --mR:0px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--mL),#000 calc(100% - var(--mR)),transparent);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--mL),#000 calc(100% - var(--mR)),transparent)}
@supports (animation-timeline:scroll(self inline)){
  .topbar .track{animation:trackEdge linear both; animation-timeline:scroll(self inline)}
  @keyframes trackEdge{
    0%     {--mL:0px;  --mR:20px}   
    .01%   {--mL:20px; --mR:20px}
    99.99% {--mL:20px; --mR:20px}
    to     {--mL:20px; --mR:0px}    
  }
}
.topbar .track::-webkit-scrollbar{display:none}
.topbar .track a{font-family:var(--body); font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; text-decoration:none; white-space:nowrap; color:var(--mut); padding:16px 0}
.topbar .track a[aria-current]{color:var(--ink); box-shadow:inset 0 -3px 0 0 var(--ink)}
@media (hover:hover){ .topbar .track a:hover{color:var(--ink)} }
.topbar .track a:focus-visible{color:var(--ink)}
.topbar .cta{height:34px; padding:0 16px; font-size:12px}
.topbar .prog{position:absolute; left:0; bottom:-3px; height:3px; background:var(--ink); width:0}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .topbar .prog{width:100%; transform-origin:left center;
      animation:barRead linear both; animation-timeline:scroll(root block)}
    @keyframes barRead{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  }
}
:root{scroll-behavior:auto}
[id]{scroll-margin-top:76px}
@counter-style pad{system:extends decimal; pad:2 "0"}
.numbered{counter-reset:sec}
.numbered > .sec,.numbered > .secn{counter-increment:sec}
.numbered > .sec > .cap::before,.numbered > .secn > .cap::before{
  content:counter(sec,pad) " \00B7 "; color:var(--mut)}
.tblScroll,.screen .tblScroll{overflow-x:auto; scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent)}
@supports (animation-timeline:scroll(self)){
  .tblScroll{animation:edgeHair linear both; animation-timeline:scroll(self inline)}
  @keyframes edgeHair{
    0%{box-shadow:inset -1px 0 0 0 transparent}
    .01%,99.99%{box-shadow:inset -1px 0 0 0 var(--hair)}
    to{box-shadow:inset -1px 0 0 0 transparent}}
}
@media (max-width:1000px){
  .topbar .in{gap:12px; padding:0 20px}
  .topbar .track{gap:16px}
  .topbar .track a{font-size:11px; letter-spacing:.07em}
  .topbar .cta{flex:none; height:30px; padding:0 12px; font-size:11px}
}
@media (max-width:560px){ .topbar .track{display:none} }
.steps{position:relative}
.step{position:relative}
.step::before{content:''; position:absolute; left:calc(var(--gut) - 16px); top:0; bottom:-1px;
  width:3px; background:var(--hair); pointer-events:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .step::after{content:''; position:absolute; left:calc(var(--gut) - 16px); top:0; bottom:-1px;
      width:3px; background:var(--ink); transform:scaleY(0); transform-origin:top center;
      pointer-events:none; animation:stepPast linear both; animation-timeline:view();
      animation-range:cover 30% cover 70%}

    @keyframes stepPast{from{transform:scaleY(0)} to{transform:scaleY(1)}}
  }
}
.screen thead th{position:sticky; top:0; z-index:2; background:var(--paper);
  border-bottom:0; box-shadow:inset 0 -1px 0 0 var(--hair)}
:root{--fill:#F1EFEA}
.tblScroll,.screen .tblScroll{overflow:auto; max-height:78vh; overscroll-behavior-x:contain}
@media (max-width:1000px){
  .step::before,.step::after{left:calc(var(--gut) - 12px)}
  .screen thead th:first-child,.screen tbody td:first-child{
    position:sticky; left:0; background:var(--paper); box-shadow:inset -1px 0 0 0 var(--hair)}
  .screen tbody td:first-child{z-index:1}
  .screen thead th:first-child{z-index:3}

  @media (hover:hover){ .screen tbody tr:hover td:first-child{background:var(--fill)} }
  .screen tbody tr:focus-within td:first-child{background:var(--fill)}
}
.screen th.n{text-align:right}
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.screen tbody tr.empty td{padding:34px 18px; text-align:center; white-space:normal;
  color:var(--mut); font-size:13px; line-height:1.6}
.screen tbody tr.empty td b{display:block; color:var(--ink); font-weight:600;
  font-size:13.5px; margin-bottom:3px}
.screen tbody tr.empty:hover,.screen tbody tr.empty:focus-within{background:transparent}
.screen tbody tr.empty td:first-child{position:static; box-shadow:none; background:transparent}
.screen th,.screen td{vertical-align:baseline}
.screen .sub{margin-top:2px; line-height:1.4}
@media (prefers-reduced-motion:reduce){

  *{transition-duration:.01ms !important; transition-delay:0s !important}

  .an-draw,.an-up,.an-grow,.an-growy,.an-fall{
    animation:none !important; stroke-dasharray:none !important; stroke-dashoffset:0 !important;
    opacity:1 !important; transform:none !important}

  .an-lift,.an-creep{animation:none !important; transform:none !important}

  .an-pulse,.an-breathe,.an-tick{animation:none !important; opacity:1 !important}

  .an-blink{animation-duration:12s !important}

}
@supports (content:"a" / ""){
  details summary::after{content:'+' / ''}
  details[open] summary::after{content:'\2013' / ''}
}
h2.rowhead{font-family:var(--body); font-size:12px; line-height:1.5;
  max-width:none; letter-spacing:.1em}
@media (max-width:1000px){
  .cta{white-space:normal; height:auto; min-height:50px; padding-block:11px;
       line-height:1.25; text-align:center}

  h1,h2,h3{overflow-wrap:break-word}
}
.fig .cap .src{font-family:var(--mono); text-transform:none; letter-spacing:0;
  font-size:11.5px; font-weight:500; color:var(--mut)}
.figref{white-space:nowrap}
.fig[id]{scroll-margin-top:88px}
.ascii{
  font-family:var(--mono); font-size:13px; line-height:1.35;
  white-space:pre;                 
  overflow-x:auto; overscroll-behavior-x:contain;
  margin:0; padding:0; color:var(--ink);
  font-variant-ligatures:none;     
  font-variant-numeric:normal;     
  -webkit-text-size-adjust:100%;   
  tab-size:8;
}
.fig .art.ascii-art{display:block; padding:30px 24px}
@media (max-width:900px){ .ascii{font-size:12px} .fig .art.ascii-art{padding:24px 18px} }
@media (max-width:620px){ .ascii{font-size:11px} }
@media (max-width:430px){ .ascii{font-size:10px} }
@media (prefers-reduced-motion:no-preference){

  @view-transition{navigation:auto}
  .nav{view-transition-name:sitenav}
}
.crumbs ol{list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px}
.crumbs li{display:flex; align-items:baseline; gap:9px}
.crumbs li + li::before{content:'\203A'; color:var(--mut); font-weight:400} 
.crumbs [aria-current="page"]{color:var(--ink)}
.seahero{position:relative; overflow:hidden;

  min-height:min(78vh, 660px); display:flex; flex-direction:column; justify-content:flex-start}
.seahero > .cap,.seahero > h1{position:relative}   
.seacv{position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; z-index:0}
@media (max-width:760px){ .seahero{min-height:min(72vh, 520px)} }
@media print{ .seacv{display:none !important} .seahero{min-height:0} }
.fig .cap{position:relative; padding-right:52px}   
.fig .replay{position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  font:500 14px/1 var(--mono); width:28px; height:28px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-transform:none; letter-spacing:0}
@media (hover:hover){
  .fig .replay{opacity:0}                              
  .fig:hover .replay,.fig:focus-within .replay{opacity:1}
  .fig .replay:hover{background:var(--ink); color:var(--paper)}
}
.fig .replay:focus-visible{opacity:1}
.fig.off .an-lift,.fig.off .an-pulse,.fig.off .an-tick,.fig.off .an-blink,.fig.off .an-creep,.fig.off .an-breathe,
.cand.off .an-lift,.cand.off .an-pulse,.cand.off .an-tick,.cand.off .an-blink,.cand.off .an-creep,.cand.off .an-breathe{
  animation-play-state:paused}
@media print{ .fig .replay{display:none} }
.screen .top{position:relative; padding-right:52px}
.screen .replay{position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:1px solid var(--ink); background:var(--paper); color:var(--ink);
  font:500 14px/1 var(--mono); width:28px; height:28px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; text-transform:none; letter-spacing:0}
@media (hover:hover){
  .screen .replay{opacity:0}
  .screen:hover .replay,.screen:focus-within .replay{opacity:1}
  .screen .replay:hover{background:var(--ink); color:var(--paper)}
}
.screen .replay:focus-visible{opacity:1}
.figwrap > .rec{display:none}
@media print{ .screen .replay{display:none} }
.topbar .who{padding:14px 0; display:inline-flex; align-items:center}
.fig .replay,.screen .replay{width:32px; height:32px}
@media (max-width:560px){ .fig .replay,.screen .replay{display:none} .screen .top,.fig .cap{padding-right:18px} }
@media (max-width:720px){ .fig.wide .art svg{min-width:760px} }
.fig .art.screenshot, .cand .art.screenshot{display:block; padding:0}
.fig .art.screenshot .maplegend, .cand .art.screenshot .maplegend{display:flex; flex-wrap:wrap; gap:14px; padding:10px 16px;
  border-bottom:1px solid var(--hair); font-size:11.5px; color:var(--mut)}
.fig .art.screenshot .maplegend b, .cand .art.screenshot .maplegend b{color:var(--ink); font-weight:600}
.fig .art.screenshot svg.map, .cand .art.screenshot svg.map{display:block; width:100%; height:auto; max-width:none; background:#fcfcfe}
@media (max-width:720px){
  .fig .art.screenshot, .cand .art.screenshot{overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent)}
  .fig .art.screenshot svg.map, .cand .art.screenshot svg.map{min-width:760px}
  .fig .art.screenshot .maplegend, .cand .art.screenshot .maplegend{min-width:760px}
}
@media print{ .fig .art.screenshot svg.map, .cand .art.screenshot svg.map{background:none} }
@keyframes kas-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){ .kas-pulse{animation:none !important} }
@media (max-width:720px){ .fig .art{justify-content:flex-start} }
.ask .fld{display:flex; flex-direction:column; gap:4px; margin:0}
.ask label,.ask legend{font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--mut); padding:0}
.ask input,.ask textarea{
  font:inherit; font-size:16px;            
  color:var(--ink); background:transparent;
  border:0; border-bottom:3px solid var(--ink); border-radius:0;
  padding:0 2px; height:44px; width:100%; appearance:none}
.ask textarea{height:auto; min-height:80px; line-height:1.6; padding-top:8px; resize:vertical}
.ask input:focus,.ask textarea:focus{outline:0; background:var(--fill)}
.ask input:focus-visible,.ask textarea:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px}
.ask input[type=number]{-moz-appearance:textfield}
.ask input[type=number]::-webkit-outer-spin-button,
.ask input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.ask .chips{border:0; padding:0; margin:24px 0 0; min-width:0}
.ask .chips > label{display:inline-flex; align-items:center; margin:10px 8px 0 0;
  border:1px solid currentColor; padding:7px 14px; cursor:pointer;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  white-space:nowrap; color:var(--ink)}
.ask .chips input{position:absolute; width:1px; height:1px; opacity:0; margin:0}
.ask .chips input:checked + span{color:var(--paper)}
.ask .chips > label:has(input:checked){background:var(--ink); color:var(--paper)}
@supports not selector(:has(*)){

  .ask .chips input:checked + span{color:var(--ink); box-shadow:inset 3px 0 0 0 var(--ink); padding-left:8px}
}
@media (hover:hover){ .ask .chips > label:hover{background:var(--fill)}
  .ask .chips > label:has(input:checked):hover{background:var(--red)} }
.ask .chips > label:has(input:focus-visible){outline:3px solid var(--ink); outline-offset:2px}
.ask .askend{display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-top:26px; flex-wrap:wrap}
.ask .askend .statnote{margin-top:0}
.ask button.cta{border:0; font:inherit; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em; cursor:pointer}
.ask button.cta[aria-disabled=true]{background:var(--paper); color:var(--mut);
  border:2px solid var(--hair); cursor:not-allowed}
@media (hover:hover){ .ask button.cta[aria-disabled=true]:hover{background:var(--paper); color:var(--mut)} }
@media print{
  @page{margin:14mm 12mm}
  :root{--gut:0mm}
  html,body{background:#fff}
  .page{max-width:none}

  .topbar,.skip,.rec,.figref,.end .cta{display:none !important}

  .fig .an-draw,.fig .an-up,.fig .an-grow,.fig .an-growy,.fig .an-fall,.fig .an-tick,
  .cand .an-draw,.cand .an-up,.cand .an-grow,.cand .an-growy,.cand .an-fall,
  .an-blink,.an-creep,.an-breathe,.an-lift{
    animation:none !important; stroke-dasharray:none !important; stroke-dashoffset:0 !important;
    opacity:1 !important; transform:none !important; visibility:visible !important}
  .fig svg{max-width:none; width:100%}
  .fig .art{overflow:visible}

  .cta,.cta.solid,.screen .hd,.row.hi,.dgt.inv,tr.hi,.band .k,
  .systembar a[aria-current],.systembar a[data-section],
  .links a[aria-current],.links a[data-section],.q.hi,.hi{
    background:#fff !important; color:#000 !important; border:1px solid #000 !important}

  .systembar a[aria-current],.systembar a[data-section],
  .links a[aria-current],.links a[data-section]{
    border:0 !important; box-shadow:inset 0 -2px 0 0 #000 !important; font-weight:700}
  .inv{fill:#fff !important}
  svg .dg,svg .dgt{color:#000}

  main a[href^="http"]::after{
    content:" (" attr(href) ")"; font-family:var(--mono); font-size:.8em; color:#555;
    word-break:break-all}

  .fig,.screen,.rec,tr,details,.swapgrid > *,.steps li,.g2 > *,.band > *{break-inside:avoid}
  h1,h2,h3,h4{break-inside:avoid}
  h1,h2,h3,.cap,.k{break-after:avoid}
  section{break-inside:auto}

  details{display:block}
  details > .a,details[open] > .a{display:block !important}
  summary{list-style:none; font-weight:700}
  summary::marker,summary::-webkit-details-marker{display:none}

  body{font-size:10.5pt; line-height:1.45}
  h1,h1.sm{font-size:20pt; line-height:1.05}
  h2{font-size:14pt}
  .body,.body.wide,.lead,details .a,.statnote,.d,.screen .foot .big,.screen .r.txt,
  main p:not([class]){max-width:none}
  .fig .say{padding-right:18px}

  .foot::after{content:"cbmgo.app — Ten on Tone LLC, 437 S Hill St, Los Angeles, CA 90013";
    display:block; margin-top:10px; font-family:var(--mono); font-size:8pt; color:#555}
}
@media (hover:hover){
  .fig svg .lane{transition:opacity .15s ease}
  .fig svg:hover .lane{opacity:.12}
  .fig svg .lane:hover{opacity:1}
}
.fig svg .mapnode{cursor:pointer}
.fig svg .mapnode:focus{outline:none}
.fig svg .mapnode:focus-visible circle:nth-of-type(2){stroke:var(--ink); stroke-width:3.4}
@media (hover:hover){ .fig svg .mapnode:hover circle:nth-of-type(2){stroke-width:3.4} }
html.mp-open{overflow:hidden}
.mappanel{position:fixed; inset:0; z-index:60}
.mappanel .mp-back{position:absolute; inset:0; background:rgba(0,0,0,.34); opacity:0;
  transition:opacity .18s ease}
.mappanel[data-in] .mp-back{opacity:1}
.mappanel .mp-body{position:absolute; top:0; right:0; bottom:0; width:min(680px, 100%);
  background:var(--paper); border-left:3px solid var(--ink); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .18s ease}
.mappanel[data-in] .mp-body{transform:none}
.mappanel .mp-top{flex:none; display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; padding:16px 20px; border-bottom:3px solid var(--ink)}
.mappanel .mp-title{font-family:var(--disp); font-size:22px; letter-spacing:-.02em; margin-top:4px}
.mappanel .mp-x{flex:none; width:44px; height:44px; border:2px solid var(--ink); background:var(--paper);
  color:var(--ink); font-size:15px; line-height:1; cursor:pointer}
.mappanel .mp-x:hover{background:var(--ink); color:var(--paper)}
.mappanel .mp-scroll{flex:1; overflow:auto; overscroll-behavior:contain}
.mappanel table{width:100%; border-collapse:collapse; font-size:14px}
.mappanel th,.mappanel td{text-align:left; padding:11px 16px; border-bottom:1px solid var(--hair)}
.mappanel td.mono,.mappanel td.n,.mappanel th:nth-child(1),.mappanel th:nth-child(3),
.mappanel th:nth-child(4),.mappanel td:nth-child(3){white-space:nowrap}
.mappanel td:nth-child(2),.mappanel td:nth-child(5){min-width:9ch}
.mappanel thead th{position:sticky; top:0; background:var(--paper); z-index:1;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--mut);
  border-bottom:1px solid var(--ink)}
.mappanel td.mono{font-family:var(--mono); font-size:13px}
.mappanel td.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
.mappanel tr.late td{background:var(--fill)}
.mappanel tr.late b{color:var(--red)}
.mappanel .mp-foot{flex:none; padding:14px 20px; border-top:1px solid var(--ink);
  font-size:12.5px; color:var(--mut); line-height:1.5;
  padding-right:max(20px, 100% - 58ch)}
@media (max-width:560px){
  .mappanel .mp-body{border-left:0; border-top:3px solid var(--ink); top:auto; height:86%}
  .mappanel .mp-title{font-size:19px}
  .mappanel th,.mappanel td{padding:10px 12px; font-size:13px}

  .mappanel th:nth-child(3),.mappanel td:nth-child(3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .mappanel .mp-body{transition:none}
  .mappanel .mp-back{transition:none}
}
@media print{ .mappanel{display:none} }