:root{
  --bg:#141517;--fg:#ececea;--dim:rgba(236,236,234,.6);--line:rgba(236,236,234,.18);
  --f:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:dark;
}
:root.light{--bg:#efeeea;--fg:#151618;--dim:rgba(21,22,24,.62);--line:rgba(21,22,24,.2);color-scheme:light}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:56px}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.65 var(--f);-webkit-font-smoothing:antialiased;padding-bottom:30px}
a{color:inherit;text-underline-offset:.25em}
a:hover{background:var(--fg);color:var(--bg);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.wrap{max-width:78ch;margin:0 auto;padding:0 20px}
.dim{color:var(--dim)}

.bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 20px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar nav{display:flex;gap:18px;flex-wrap:wrap}
.bar a{text-decoration:none}
#invert{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.25em}
#invert:hover{background:var(--fg);color:var(--bg);text-decoration:none}

.hero{padding-top:36px}
#art{margin:0 0 14px;min-height:240px}
#art canvas{display:block;position:relative;pointer-events:none}
h1{margin:0 0 10px;font-size:clamp(34px,9vw,68px);line-height:1;letter-spacing:-.05em}
.lead{margin:0 0 18px;font-size:15px}
.swap{background:none;border:0;padding:0;text-align:left;min-height:1.65em;font-weight:700}
.swap::after{content:"_";animation:blink 1s steps(1) infinite}

.btn{display:inline-block;margin:6px 10px 6px 0;padding:8px 14px;border:1px solid var(--fg);
  background:var(--fg);color:var(--bg);text-decoration:none}
.btn.ghost{background:none;color:var(--fg)}
.btn:hover,.btn:focus-visible{background:var(--bg);color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}

h2{margin:64px 0 14px;font-size:14px}
h2::before{content:"## ";color:var(--dim)}

.term{border:1px solid var(--line);background:var(--bg)}
.tabs{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;border-right:1px solid var(--line);padding:6px 14px}
.tabs button:hover{background:var(--line)}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
#bench>.tabs{border:1px solid var(--line);border-bottom:0}
.out{margin:0;padding:14px;min-height:8.5em;white-space:pre-wrap;word-break:break-word}
.out::after{content:"_";animation:blink 1s steps(1) infinite}
.chart{margin:0;padding:14px;border:1px solid var(--line);background:var(--bg);overflow-x:auto;white-space:pre;line-height:1.9}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px}
ul{margin:0;padding:0;list-style:none}
li{padding-left:2ch;text-indent:-2ch}
.keep li::before{content:"+ "}
.drop li::before{content:"- ";color:var(--dim)}
.drop li{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--line)}

.foot{margin-top:72px;padding-top:20px;padding-bottom:48px;border-top:1px solid var(--line);color:var(--dim)}
.foot p{margin:4px 0}

@keyframes blink{50%{opacity:0}}
@media (max-width:620px){.cols{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}

#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
html.has-cur #bg{
  -webkit-mask-image:radial-gradient(circle at var(--mx,-100px) var(--my,-100px),transparent 0 24px,#000 34px);
  mask-image:radial-gradient(circle at var(--mx,-100px) var(--my,-100px),transparent 0 24px,#000 34px)}
main,.foot{position:relative;z-index:1}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.brand img{border-radius:5px;display:block}
.bar nav a[aria-current]{text-decoration:underline;text-underline-offset:.35em}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:34px 0 0;border:1px solid var(--line);background:var(--bg)}
.stats li{padding:12px 14px;text-indent:0;border-right:1px solid var(--line);color:var(--dim);font-size:12px}
.stats li:last-child{border-right:0}
.stats li::before{content:none}
.stats b{display:block;color:var(--fg);font-size:28px;line-height:1.2;letter-spacing:-.04em}
#bench>.tabs{background:var(--bg)}
.status{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:22px;padding:4px 20px;
  border-top:1px solid var(--line);background:var(--bg);color:var(--dim);font-size:12px}
.status button{margin-left:auto;background:none;border:0;padding:0;color:inherit}
.status button:hover{color:var(--fg);text-decoration:underline}
dialog{border:1px solid var(--fg);background:var(--bg);color:var(--fg);padding:0;width:min(560px,92vw);margin:14vh auto 0}
dialog::backdrop{background:rgba(0,0,0,.5)}
#pin{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:inherit;font:inherit;padding:13px 14px;outline:0}
#plist li{padding:6px 14px;text-indent:0;cursor:pointer}
#plist li::before{content:none}
#plist li[aria-selected="true"]{background:var(--fg);color:var(--bg)}
@media (max-width:620px){.stats{grid-template-columns:1fr 1fr}.stats li:nth-child(2){border-right:0}.stats li:nth-child(-n+2){border-bottom:1px solid var(--line)}.hide-sm{display:none}}

html.has-cur,html.has-cur *,html.has-cur ::backdrop{cursor:none!important}
#cur,#cur-box{position:fixed;inset:auto;left:0;top:0;margin:0;padding:0;border:0;background:transparent;overflow:visible;
  pointer-events:none;mix-blend-mode:difference}
#cur{width:0;height:0}
#cur.out,#cur-box.out{opacity:0}
#cur i{position:absolute;left:0;top:0;display:block;width:14px;height:20px;background:#fff;transform-origin:0 0;
  clip-path:polygon(0 0,2px 0,2px 2px,4px 2px,4px 4px,6px 4px,6px 6px,8px 6px,8px 8px,10px 8px,10px 10px,12px 10px,12px 12px,14px 12px,14px 14px,10px 14px,10px 16px,6px 16px,6px 20px,4px 20px,4px 18px,0 18px);transition:scale .12s}
#cur[data-s=ibeam] i{width:2px;height:20px;clip-path:none;translate:-1px -10px;transform-origin:50% 50%}
#cur[data-s=box] i,#cur[data-s=cross] i{width:6px;height:6px;border-radius:50%;clip-path:none;translate:-3px -3px;transform-origin:50% 50%}
#cur.down i{scale:.7}
#cur-box{--b:linear-gradient(#fff,#fff);width:34px;height:34px;opacity:0;transition:opacity .15s;
  background:var(--b) 0 0/9px 2px no-repeat,var(--b) 0 0/2px 9px no-repeat,var(--b) 100% 0/9px 2px no-repeat,var(--b) 100% 0/2px 9px no-repeat,
  var(--b) 0 100%/9px 2px no-repeat,var(--b) 0 100%/2px 9px no-repeat,var(--b) 100% 100%/9px 2px no-repeat,var(--b) 100% 100%/2px 9px no-repeat}
#cur-box[data-s=box]:not(.out),#cur-box[data-s=cross]:not(.out){opacity:1}