:root{--paper:#faf7f1;--ink:#171411;--ink-2:#4a433a;--muted:#6f675a;--rust:#c2240c;--hairline:#e4ded3;--marker-ink:#26221c;--note-text:#3a3120;--serif:"Fraunces", "Georgia", "Times New Roman", serif;--marker:"Reenie Beanie", "Bradley Hand", "Marker Felt", cursive;--hand:"Caveat", "Bradley Hand", "Marker Felt", cursive;--ui:"Spline Sans", "Geist", system-ui, sans-serif;--mono:ui-monospace, "SFMono-Regular", "Cascadia Mono", menlo, monospace;--x:clamp(1.25rem, 6vw, 4.5rem)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--paper);min-height:100svh;color:var(--ink);font-family:var(--ui);font-synthesis:none;text-rendering:optimizelegibility;flex-direction:column;margin:0;font-size:1rem;line-height:1.5;display:flex;overflow-x:hidden}img{max-width:100%;height:auto;display:block}a{color:inherit}button{font:inherit;color:inherit}code{font-family:var(--mono)}::selection{background:var(--rust);color:var(--paper)}.marker{font-family:var(--marker);color:var(--marker-ink);font-weight:400}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.defs{width:0;height:0;position:absolute}.skip-link{z-index:100;background:var(--ink);color:var(--paper);font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;padding:.5rem .9rem;font-size:.75rem;position:absolute;top:-4rem;left:1rem}.skip-link:focus{top:1rem}.grain{z-index:40;pointer-events:none;mix-blend-mode:multiply;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.shell{padding-inline:var(--x)}.masthead{border-bottom:1px solid var(--hairline);align-items:center;gap:1rem;padding-block:clamp(.9rem,2vh,1.4rem);display:flex}.lockup{align-items:center;gap:.7rem;text-decoration:none;display:inline-flex}.crow{width:2.25rem;height:auto;transform:rotate(-2deg)}.lockup-name{font-family:var(--serif);letter-spacing:.06em;text-transform:uppercase;font-size:1.05rem;font-weight:500}.lockup-product{margin-left:-.2rem;font-size:1.5rem;transform:rotate(-1.5deg)}.lockup-product:before{content:"/ ";color:var(--muted);font-family:var(--ui);font-size:.9rem}.social{gap:.9rem;margin-left:auto;display:flex}.social a{color:var(--ink-2);align-items:center;gap:.35rem;text-decoration:none;display:inline-flex}.social .stars{font-family:var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;font-size:.72rem;line-height:1}.social a:hover{color:var(--rust)}.social svg{fill:currentColor;width:1.05rem;height:1.05rem}.u{white-space:nowrap;display:inline-block;position:relative}.nw{white-space:nowrap}.u-svg{pointer-events:none;width:104%;height:.26em;position:absolute;bottom:-.12em;left:-2%;overflow:visible}.u-ink{fill:none;stroke:var(--marker-ink);stroke-width:1.8px;stroke-linecap:round;vector-effect:non-scaling-stroke}.u-ink--2{stroke-width:1.4px;opacity:.9}.u-rust{fill:none;stroke:var(--rust);stroke-width:2px;stroke-linecap:round;opacity:.82;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:0}@media (prefers-reduced-motion:no-preference){.line .u-rust{stroke-dashoffset:100px;animation:.55s ease-out .35s forwards oeDraw}@keyframes oeDraw{to{stroke-dashoffset:0}}}main{flex:1}.wall{align-content:center;justify-items:center;gap:clamp(3rem,7vh,4.5rem);width:100%;max-width:84rem;min-height:calc(100svh - 4.6rem);margin-inline:auto;padding-block:clamp(3rem,10vh,6rem);display:grid}.center{text-align:center;flex-direction:column;align-items:center;gap:clamp(1.6rem,4.5vh,2.6rem);width:100%;display:flex}.line{max-width:24ch;margin:0;font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.08}.line-sub{color:var(--ink-2);margin-top:.45em;font-size:.42em;text-decoration:none;display:block}.line-sub:hover{color:var(--rust)}.stars-foot{align-content:center;justify-items:center;gap:1.9rem;min-height:42svh;display:grid}.stars-line{text-align:center;max-width:40ch;font-family:var(--hand);color:var(--ink-2);margin:0;font-size:clamp(1.35rem,2vw,1.85rem);font-weight:600;line-height:1.3}.stars-line:empty{display:none}.actions{flex-wrap:wrap;justify-content:center;gap:.9rem;display:flex}.stamp{background:var(--ink);color:var(--paper);font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;padding:1rem 1.6rem;font-size:.8rem;text-decoration:none;display:inline-block;position:relative}.stamp--icon{align-items:center;gap:.65rem;display:inline-flex}.stamp--icon .mark{fill:currentColor;width:1.15em;height:1.15em}.stamp:hover{background:var(--rust)}.stamp:active{filter:url(#oe-ink-bleed);transform:translate(1px,1px)}.stamp:after{content:"";background:var(--ink);opacity:0;pointer-events:none;z-index:-1;transition:opacity .42s ease-out;position:absolute;inset:0;transform:translate(3px,3px)}.stamp:active:after{opacity:.05;transition:none}.stamp:focus-visible{outline:3px solid var(--rust);outline-offset:4px}.loop{width:min(100%,35rem);height:auto;display:block;overflow:visible}.loop--tall{display:none}.loop path{fill:none;stroke:var(--marker-ink);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.loop path.thick{stroke-width:5px}.loop text{font-family:var(--hand);fill:var(--marker-ink);font-weight:600}.loop .red path{stroke:var(--rust)}.loop .red text{fill:var(--rust)}.loop .faint>path,.loop .faint g path:first-child{stroke-dasharray:9 9}.loop .faint text{fill:var(--rust)}.loop .you path{stroke-dasharray:8 8;opacity:.6}.loop .you text{fill:var(--ink-2)}.loop .pulse path{stroke:var(--rust);stroke-width:13px;stroke-linecap:round;stroke-dasharray:.001 2;stroke-dashoffset:.05px}.loop .mark{opacity:0}.loop .pulse path,.loop .mark{animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:paused}.loop.is-playing .pulse path,.loop.is-playing .mark{animation-play-state:running}.loop .p-in path{animation-name:pIn}.loop .p-fork1 path{animation-name:pFork1}.loop .p-join1 path{animation-name:pJoin1}.loop .p-no path{animation-name:pNo}.loop .p-again path{animation-name:pAgain}.loop .p-fork2 path{animation-name:pFork2}.loop .p-join2 path{animation-name:pJoin2}.loop .p-merge path{animation-name:pMerge}@keyframes pIn{0%{stroke-dashoffset:.05px}8%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pFork1{0%,8%{stroke-dashoffset:.05px}18%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pJoin1{0%,22%{stroke-dashoffset:.05px}30%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pNo{0%,30%{stroke-dashoffset:.05px}38%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pAgain{0%,40%{stroke-dashoffset:.05px}48%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pFork2{0%,48%{stroke-dashoffset:.05px}56%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pJoin2{0%,60%{stroke-dashoffset:.05px}68%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}@keyframes pMerge{0%,72%{stroke-dashoffset:.05px}80%{stroke-dashoffset:-1.02px}to{stroke-dashoffset:-1.02px}}.loop .m-code-ok{animation-name:mCodeOk}.loop .m-acc-x,.loop .m-acc-red{animation-name:mAccNo}.loop .m-repair-red{animation-name:mRepair}.loop .m-acc-ok{animation-name:mAccOk}.loop .m-both-ok{animation-name:mBothOk}.loop .m-merge-ok{animation-name:mMergeOk}@keyframes mCodeOk{0%,18%{opacity:0}22%,94%{opacity:1}98%,to{opacity:0}}@keyframes mAccNo{0%,18%{opacity:0}22%,50%{opacity:1}54%,to{opacity:0}}@keyframes mRepair{0%,36%{opacity:0}40%,46%{opacity:1}50%,to{opacity:0}}@keyframes mAccOk{0%,54%{opacity:0}58%,94%{opacity:1}98%,to{opacity:0}}@keyframes mBothOk{0%,66%{opacity:0}70%,94%{opacity:1}98%,to{opacity:0}}@keyframes mMergeOk{0%,78%{opacity:0}82%,94%{opacity:1}98%,to{opacity:0}}.lanes{text-align:center;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vh,2.5rem);max-width:72rem;margin-inline:auto;padding-block:clamp(3rem,10vh,6rem) clamp(4rem,12vh,7rem);display:flex}.lanes-title{max-width:32ch;margin:0;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.12}.lanes-stage{width:100%}.race{width:100%;height:auto;display:block;overflow:visible}.race--tall{display:none}.race path{fill:none;stroke:var(--marker-ink);stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round}.race text{font-family:var(--hand);fill:var(--marker-ink);font-weight:600}.race .red path,.race path.red{stroke:var(--rust)}.race .red text{fill:var(--rust)}.race .hatch-line{stroke:var(--rust);stroke-width:2.2px}.race .ticket-fill{opacity:.5}.race .finish path{stroke-dasharray:9 9}.race .clock{stroke-width:4px}.notes{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(1.5rem,4vw,2.5rem) clamp(1rem,4vw,2rem);width:100%;max-width:46rem;margin:0;padding:0;list-style:none;display:grid}.note{position:relative}.notes>.note:first-child{--r:-4deg}.notes>.note:nth-child(2){--r:2.5deg;--dy:10px}.notes>.note:nth-child(3){--r:-1.5deg;--dy:6px}.notes>.note:nth-child(4){--r:3.5deg}.notes>.note:nth-child(5){--r:-2.5deg;--dy:8px}.notes>.note:nth-child(6){--r:1.8deg;--dy:4px}.tone-0{--note-top:#fff7a1;--note-mid:#fdeb6d;--note-bottom:#f5da4c}.tone-1{--note-top:#fff9b8;--note-mid:#fcef86;--note-bottom:#f3df5e}.tone-2{--note-top:#fff2a4;--note-mid:#fbe271;--note-bottom:#f0cf45}.note-paper{background:linear-gradient(180deg, #17141113 0, #17141109 .9rem, #17141100 1.7rem), linear-gradient(165deg, var(--note-top) 0%, var(--note-mid) 48%, var(--note-bottom) 100%);min-height:10.5rem;transform:rotate(var(--r,0deg)) translate(0, var(--dy,0px));padding:1.15rem 1rem 1rem;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease-out;position:relative;box-shadow:0 1px 1px #1714110f,1px 4px 8px -3px #1714112e,6px 16px 26px -12px #17141161}.note-paper:hover{transform:rotate(var(--r,0deg)) translate(0, calc(var(--dy,0px) - 3px));box-shadow:0 1px 1px #1714110f,2px 6px 10px -3px #17141133,10px 22px 32px -12px #1714116b}.note:has([aria-expanded=true]){z-index:10}.note:has([aria-expanded=true]) .note-paper{transform:rotate(0)}.note-btn{text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:100%;padding:0;display:block}.note-btn:before{content:"";position:absolute;inset:0}.note-btn:focus-visible{outline:none}.note-paper:has(.note-btn:focus-visible){outline:3px solid var(--rust);outline-offset:5px}.note-q{text-transform:uppercase;font-size:clamp(1.35rem,1.9vw,1.65rem);line-height:1.08;display:block}.note-a{color:var(--note-text);margin-top:.75rem;font-size:.92rem;line-height:1.45;position:relative}.note-a code{overflow-wrap:anywhere;background:#ffffff80;padding:.05em .3em;font-size:.78rem}.note-a a{color:var(--rust);white-space:nowrap}@media (width>=1180px){.wall{grid-template-columns:15rem minmax(0,1fr) 15rem;align-items:center;column-gap:clamp(2.5rem,5vw,5rem)}.center{grid-area:1/2}.notes{display:contents}.note{grid-row:1;align-self:start;width:14rem}.notes>.note:first-child{grid-column:1;justify-self:end;margin-top:0}.notes>.note:nth-child(2){grid-column:3;justify-self:start;margin-top:1.5rem}.notes>.note:nth-child(3){grid-column:1;justify-self:start;margin-top:11rem}.notes>.note:nth-child(4){grid-column:3;justify-self:end;margin-top:13rem}.notes>.note:nth-child(5){grid-column:1;justify-self:end;margin-top:22rem}.notes>.note:nth-child(6){grid-column:3;justify-self:start;margin-top:24.5rem}.note:has([aria-expanded=true]){width:21rem}.notes>.note:nth-child(odd):has([aria-expanded=true]){justify-self:start}.notes>.note:nth-child(2n):has([aria-expanded=true]){justify-self:end}}@media (width<=560px){.lockup-name,.loop--wide,.race--wide{display:none}.race--tall{display:block}.loop--tall{order:2;width:100%;display:block}.actions{order:1}.notes{grid-template-columns:1fr}.note-paper{min-height:0}}@media (prefers-reduced-motion:reduce){.loop .pulse path,.loop .mark{animation-name:none}.loop .pulse{display:none}.loop .m-acc-ok,.loop .m-code-ok,.loop .m-both-ok,.loop .m-merge-ok{opacity:1}.note-paper,.stamp:after{transition:none}}.foot{border-top:1px solid var(--hairline);text-align:center;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding-block:1.5rem 2.5rem;font-size:.7rem}.foot a{text-decoration:none}.foot a:hover{color:var(--rust)}@media (prefers-reduced-motion:reduce){.note-paper,.stamp:after{transition:none}}
