@font-face{font-family:"Fraunces";src:url(fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--ink:#3A2A63;--soft:#5E4C86;--hit:#F0156F;--pad:max(6vw,calc((100vw - 74rem)/2));--gap:clamp(1.75rem,4vw,3.5rem);--band:clamp(3.5rem,7vw,6rem);--body:clamp(1.05rem,1.4vw,1.2rem)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F6CFCF;color:var(--ink);font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 100,"WONK" 0;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--hit);outline-offset:3px}
.sky{position:relative;background:linear-gradient(172deg,#FDE8D3 0,#F8CFCB 36vh,#CDBBEE 88vh,#DDE0F7 176vh,#FFFFFF calc(100% - 16rem))}
.hero{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;padding:0 var(--pad)}
.stage{position:absolute;inset:0;z-index:0;pointer-events:none}
canvas{position:sticky;top:0;display:block;width:100%;height:100lvh}
header,.say{position:relative}
header{display:flex;justify-content:space-between;align-items:center;min-height:5rem;font-weight:540}
header a{text-decoration:none}
.brand{font-size:1.35rem;font-weight:560;letter-spacing:-.015em}
header nav{display:flex;gap:1.75rem}
header nav a:hover{text-decoration:underline;text-underline-offset:.25em}
.say{max-width:32rem;margin-block:auto;padding-bottom:4rem}
h1{margin:0;font-size:clamp(2.6rem,4.6vw,4.2rem);font-weight:420;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.lede{margin:1rem 0 0;max-width:27rem;text-wrap:balance;font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:400;line-height:1.35;color:var(--soft)}
.cta{display:inline-block;margin-top:.9rem;padding:.7rem 1.35rem;border-radius:.4rem;background:var(--ink);color:#fff;font-weight:540;text-decoration:none}
.cta:hover{background:var(--hit)}
.try{position:absolute;width:max-content;max-width:calc(100% - 2rem);transform:translateX(-50%);text-align:center}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.tabs button{font:inherit;font-weight:540;padding:.45rem .85rem;border:1.5px solid var(--ink);border-radius:2rem;background:transparent;color:var(--ink);cursor:pointer}
.tabs button:hover{background:rgba(58,42,99,.1)}
.tabs button[aria-pressed="true"]{background:var(--ink);color:#fff}
.what{margin:.6rem 0 0;color:var(--soft)}
.tabs button.tried::after{content:" ✓"}
.meter{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-width:20rem;margin:.4rem auto 0}
.meter i{width:7px;height:7px;border-radius:50%;background:rgba(58,42,99,.22)}
.meter i.on{background:var(--hit)}
.done{margin:.4rem 0 0;font-weight:540}
.hots{position:absolute;inset:0;pointer-events:none}
.hot{position:absolute;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto}
.hot::before,.hot::after{content:"";position:absolute;inset:.9rem;border-radius:50%}
.hot::before{background:var(--hit);box-shadow:0 0 0 2px #fff}
.hot::after{border:2px solid var(--hit);animation:ping 1.8s ease-out infinite}
.hot.on{display:none}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.hot::after{animation:none;opacity:0}}
.live{margin:.15rem 0 0;font-size:.9rem;font-weight:540;color:var(--ink);font-variant-numeric:tabular-nums}
.note{position:absolute;right:var(--pad);bottom:.9rem;margin:0;font-size:.8rem;color:var(--soft)}
.side{position:relative;z-index:1;display:grid;grid-template-columns:1fr 2fr;gap:var(--gap);align-items:center;min-height:72vh;padding:var(--band) var(--pad)}
h2{margin:0;font-size:clamp(2.1rem,3.6vw,3.2rem);font-weight:420;line-height:1.08;letter-spacing:-.022em;text-wrap:balance}
h3{margin:0 0 .9rem;font-size:1.25rem;font-weight:560;line-height:1.2;letter-spacing:-.01em}
p,li,strong,span{text-wrap:pretty}
.side p{margin:.8rem 0 0;font-size:var(--body);color:var(--soft)}
.dawn{background:linear-gradient(172deg,#FDE8D3 0,#F8CFCB 34%,#CDBBEE 72%,#FFFFFF 100%)}
.dawn .beat{padding-top:clamp(2rem,5vw,4rem)}
.dawn h1{max-width:18ch}
.dawn .lede{max-width:34rem}
header nav a[aria-current]{text-decoration:underline;text-underline-offset:.25em}
.board{margin:clamp(1.75rem,3vw,2.5rem) 0 0;padding:0;list-style:none}
.board li{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr 4.5rem 4.5rem;gap:var(--gap);align-items:center;padding:.55rem 0;border-bottom:1px solid #E6DFF2;color:var(--soft)}
.board .head{padding-top:0;font-size:.85rem;font-weight:540;color:var(--ink)}
.board .head span:nth-child(n+3){text-align:right}
.r-name small{display:block;font-size:.8rem}
.r-bar{height:.6rem;border-radius:1rem;background:#EFE9F8;overflow:hidden}
.r-bar i{display:block;height:100%;border-radius:1rem;background:#BDB0D8}
.r-dir,.r-acc{text-align:right;font-variant-numeric:tabular-nums}
.r-dir{font-weight:540;color:var(--ink)}
.board .ours .r-name,.board .ours .r-dir{color:var(--hit);font-weight:600}
.board .ours .r-bar i{background:var(--hit)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);margin:1.5rem 0 0;padding:0;list-style:none}
.facts b{display:block;font-size:clamp(2.1rem,3.6vw,3rem);font-weight:420;line-height:1.05;letter-spacing:-.025em}
.facts span{display:block;margin-top:.35rem;color:var(--soft)}
.plain{display:flex;flex-direction:column;min-height:100svh;background:linear-gradient(172deg,#FDE8D3 0,#F8CFCB 36vh,#CDBBEE 88vh) no-repeat}
.hero-bar{padding:0 var(--pad)}
.gate{flex:1;padding:2rem var(--pad);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.gate .more{margin-top:1rem}
.more{display:inline-block;margin-top:.9rem;font-weight:540;text-underline-offset:.25em}
.spots{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:1rem}
figure{margin:0}
figcaption{text-align:center;font-size:.95rem;font-weight:540;color:var(--soft)}
.fine{margin:.9rem 0 0;font-size:.85rem;line-height:1.4;color:var(--soft)}
.side .fine{font-size:.85rem}
.useful{margin-top:clamp(2.25rem,4vw,3.25rem)}
.beat{position:relative;z-index:1;padding:var(--band) var(--pad)}
.beat>p,.beat>div>p,.split>div>p{max-width:40rem;margin:.9rem 0 0;font-size:var(--body);color:var(--soft)}
.answer{margin:2rem 0 0;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:420;line-height:1.1;letter-spacing:-.02em}
.split{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--gap);align-items:center}
.race{margin:0;padding:1.5rem;border-radius:.8rem;background:rgba(255,255,255,.55)}
.race p{margin:0}
.lane{font-size:.9rem;font-weight:540;color:var(--ink)}
.race ol{margin:.6rem 0 0;padding:0;list-style:none;color:var(--soft)}
.race li{width:44%;min-width:max-content;padding:.5rem .7rem;border:1px solid #D9CFEA;border-radius:.45rem;background:#fff;font-size:.95rem;white-space:nowrap;box-shadow:0 .25rem .75rem rgba(58,42,99,.07);transition:clip-path .7s ease-out}
.race li+li{margin-top:.35rem}
.race li:nth-child(2){width:40%;margin-left:18%;transition-delay:.25s}
.race li:nth-child(3){width:38%;margin-left:36%;transition-delay:.5s}
.race li:nth-child(4){width:46%;margin-left:auto;transition-delay:.75s}
.race.wait li{clip-path:inset(0 100% 0 0)}
.axis{margin-top:.6rem;padding-top:.4rem;border-top:1.5px solid var(--ink);text-align:right;font-size:.9rem;color:var(--soft)}
.lane.sim{margin-top:1.4rem;color:var(--hit)}
.runs{display:flex;gap:.35rem;margin-top:.6rem}
.runs i{flex:1;height:1.6rem;border-radius:.3rem;background:var(--hit);transition:opacity .2s;transition-delay:calc(1.3s + var(--i) * .09s)}
.race.wait .runs i{opacity:0}
.again{margin-top:.6rem;font-size:.9rem;color:var(--soft)}
.model.joined{padding-top:1.5rem}
#change{padding-bottom:0}
#do{min-height:0;padding-bottom:0}
#movement .useful{margin-top:clamp(2.25rem,4vw,3.25rem)}
.routes{justify-self:end;width:100%;max-width:30rem;font-size:1.05rem}
.routes text{fill:var(--ink);font-family:inherit;font-weight:540}
.routes .hot-label{fill:var(--hit)}
.street{fill:none;stroke:#D9CFEA;stroke-width:14;stroke-linecap:round}
.way{fill:none;stroke:var(--hit);stroke-width:2.5;stroke-dasharray:3 8;stroke-linecap:round}
.crowd circle{fill:var(--ink)}
.moved circle,.closed{fill:var(--hit)}
.cross{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round}
.stopnext,.car{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.asks{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem var(--gap);margin:0;padding:0;list-style:none;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.25}
.asks li{padding-top:.7rem;border-top:1.5px solid var(--ink)}
.ripple{display:grid;grid-template-columns:repeat(19,1fr);gap:.55rem;justify-self:end;width:100%;max-width:30rem}
.ripple i{aspect-ratio:1;border-radius:50%;background:rgba(58,42,99,.2)}
.ripple i.one{background:var(--hit);transform:scale(1.7)}
.ripple.run i{animation:calm 6s ease-out infinite}
.ripple.run i.moved{animation-name:moved}
.ripple.run i.one{animation:none}
@keyframes calm{0%,16%,100%{background:rgba(58,42,99,.2);transform:none}5%{background:rgba(58,42,99,.5);transform:scale(1.2)}}
@keyframes moved{0%,100%{background:rgba(58,42,99,.2);transform:none}5%,55%{background:var(--hit);transform:scale(1.25)}70%{background:rgba(58,42,99,.2);transform:none}}
@media(prefers-reduced-motion:reduce){.ripple.run i,.ripple.run i.moved{animation:none}.ripple i.moved{background:var(--hit)}}
.uses{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem var(--gap);margin:0;padding:0;list-style:none;color:var(--soft)}
.uses b{display:block;font-weight:540;color:var(--ink)}
.model{padding:var(--band) var(--pad);background:#fff}
.model.tint{background:#F3EEFB}
.lead{max-width:40rem;margin:.8rem 0 0;font-size:var(--body);color:var(--soft)}
.wins,.pair,.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.wins{margin-top:clamp(2.25rem,4vw,3.25rem)}
.wins b{display:block;font-size:clamp(2.75rem,5vw,4.25rem);font-weight:420;line-height:1;letter-spacing:-.03em}
.wins strong{display:block;margin-top:.6rem;font-size:1.05rem;font-weight:540;line-height:1.3}
.wins span{display:block;margin-top:.3rem;color:var(--soft)}
.pair{margin-top:clamp(2.75rem,5vw,4rem)}
.pair>:last-child{grid-column:span 2}
.rank{list-style:none;margin:0;padding:0}
.rank li{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid #E6DFF2;color:var(--soft)}
.tint .rank li{border-color:#D9CFEA}
.rank li b{font-weight:540;color:var(--ink);font-variant-numeric:tabular-nums}
.rank li.ours,.rank li.ours b{color:var(--hit);font-weight:600}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem var(--gap);margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{position:relative;padding-left:2.25rem;counter-increment:s;color:var(--soft)}
.steps li::before{content:counter(s);position:absolute;left:0;top:.05rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:#fff;font-size:.8rem;font-weight:540;line-height:1.5rem;text-align:center}
.steps b{display:block;font-weight:540;color:var(--ink)}
.limits{margin-top:clamp(2.25rem,4vw,3.25rem);padding-top:1.5rem;border-top:1px solid #D9CFEA}
.limits h3{margin:0}
.limits div{grid-column:span 2}
.limits ul{margin:0;padding:0;list-style:none;color:var(--soft)}
.limits li{padding-bottom:.35rem}
.limits .more{margin-top:.5rem}
.end{padding:var(--band) var(--pad);background:var(--ink);color:#fff}
.end .cta{background:#fff;color:var(--ink);margin-top:1.25rem}
.end .cta:hover{background:var(--hit);color:#fff}
footer{padding:2rem var(--pad);background:var(--ink);color:#CFC6E6;font-size:.85rem}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem var(--gap)}
footer p{margin:0}
footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
footer a{text-underline-offset:.2em}
@media(max-width:60rem){
  .try{left:var(--pad);right:var(--pad);width:auto;max-width:none;transform:none}
  .say{max-width:none;margin-block:0;padding-bottom:0;text-align:center}
  h1{margin:0 auto;max-width:34rem}
  .lede{margin:.8rem auto 0}
  .note{bottom:.6rem;right:0;left:0;text-align:center}
  .side,.split{grid-template-columns:1fr;min-height:0}
  .asks{grid-template-columns:repeat(3,1fr)}
  .ripple,.routes{justify-self:start}
  .facts{grid-template-columns:1fr 1fr}
  .uses{grid-template-columns:1fr 1fr}
}
@media(max-width:44rem){
  :root{--pad:1.25rem}
  header nav a:nth-child(n+3){display:none}
  .wins,.pair,.limits,.steps,.uses,.asks{grid-template-columns:1fr}
  .ripple{gap:.35rem}
  .board li{grid-template-columns:1fr 3.5rem 3.8rem;gap:.75rem}
  .board .r-bar,.board .head span:nth-child(2){display:none}
  .pair>:last-child,.limits div{grid-column:auto}
}