:root{--paper:#fbf1ef;--grid:#efc9c4;--ink:#191a33;--indigo:#2b2d6e;--pass:#0e7c7b;--flag:#f2a900;--bad:#c8283d;--display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;--body:"Source Serif 4",Georgia,serif;--ease:cubic-bezier(.2,.8,.2,1);--chartpaper:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px), linear-gradient(#efc9c473 1px,transparent 1px),linear-gradient(90deg,#efc9c473 1px,transparent 1px)}*{box-sizing:border-box}html{scroll-behavior:smooth;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background:var(--paper);color:var(--ink);font:19px/1.6 var(--body);margin:0;overflow-x:hidden}a{color:var(--indigo)}:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}.progress{z-index:30;background:var(--flag);transform-origin:0;will-change:transform;height:4px;position:fixed;inset:0 0 auto;transform:scaleX(0)}nav{z-index:20;background:linear-gradient(var(--paper) 55%,transparent);justify-content:space-between;align-items:center;padding:16px clamp(16px,4vw,40px);display:flex;position:fixed;inset:0 0 auto}@media (width<=600px){nav{background:var(--paper);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent)}}.mark{font:800 22px var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none}.navlinks{gap:clamp(14px,3vw,28px);display:flex}.navlink{font:500 15px var(--display);color:var(--ink);background:linear-gradient(var(--flag),var(--flag)) 0 100%/100% 2px no-repeat;transition:background-size .25s var(--ease);background-origin:content-box;background-clip:content-box;margin:-10px 0;padding:10px 0;text-decoration:none}.navlink:hover{background-size:100% 100%}.hero{background-color:var(--paper);grid-template-rows:auto 1fr auto;height:100svh;min-height:640px;padding-top:clamp(70px,10vh,110px);display:grid;position:relative;overflow:hidden}.hero:before{content:"";background-image:var(--chartpaper);will-change:transform;background-size:60px 60px,60px 60px,12px 12px,12px 12px;animation:40s linear infinite paper;position:absolute;inset:0 -600px 0 0}.hero>*{z-index:1;position:relative}@keyframes paper{to{transform:translate(-600px)}}h1,h2{font-family:var(--display);letter-spacing:-.04em;margin:0 0 .5em;font-weight:800;line-height:1}.hero h1{margin:0;padding:0 clamp(16px,4vw,40px);font-size:clamp(44px,min(7.6vw,13vh),130px)}.ln{margin-bottom:-.1em;padding-bottom:.1em;display:block;overflow:hidden}.ln>span{animation:rise .7s var(--ease) 50ms forwards;display:block;transform:translateY(110%)}.ln:nth-child(2)>span{color:var(--indigo);animation-delay:.15s}@keyframes rise{to{transform:none}}.hero-row{justify-content:space-between;align-items:flex-end;gap:32px;padding:clamp(12px,2.5vh,30px) clamp(16px,4vw,40px) clamp(16px,3vh,32px);display:flex}.hero-copy{opacity:0;max-width:38rem;animation:.6s .45s forwards fade}@keyframes fade{to{opacity:1}}.lead{margin:0 0 .8em;font-size:1.12em}.yours{color:var(--indigo);background:#fbe0b0;border-radius:8px;margin:0 0 1.3em;padding:12px 16px;font-size:.95em;line-height:1.5}.yours strong{font:800 1.05em var(--display);letter-spacing:-.01em;color:var(--ink)}.yours q{quotes:none;font:500 .92em var(--display);white-space:nowrap;background:var(--paper);border:1.5px solid var(--indigo);border-radius:5px;padding:1px 7px}.actions{flex-wrap:wrap;align-items:center;gap:14px;margin:0;display:flex}.note{font:500 15px var(--display);color:var(--indigo);margin:1em 0 0}.btn{background:var(--ink);color:var(--paper);font:500 17px var(--display);transition:transform .2s var(--ease),box-shadow .2s var(--ease);box-shadow:0 0 0 0 var(--flag);border-radius:999px;padding:15px 28px;text-decoration:none;display:inline-block;position:relative}.btn:hover{box-shadow:0 0 0 6px var(--flag);transform:translateY(-3px)}.btn.alt{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}.btn.alt:hover{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 6px var(--flag)}.verdicts{z-index:1;opacity:0;width:min(240px,34vw);height:100px;animation:.6s 1.2s forwards fade;position:absolute;top:clamp(14px,3vh,30px);right:clamp(16px,4vw,40px)}.vs{will-change:transform,opacity;text-align:center;font:800 clamp(20px,2.2vw,30px)/1.05 var(--display);letter-spacing:-.02em;background:var(--paper);opacity:0;border:4px double;border-radius:10px;place-items:center;animation:7.2s infinite cyc;display:grid;position:absolute;inset:0;rotate:-4deg}.vs.v1{color:var(--pass)}.vs.v2{color:var(--indigo);animation-delay:2.4s}.vs.v3{color:var(--bad);animation-delay:4.8s}@keyframes cyc{0%{opacity:0;scale:2}4%{opacity:1;scale:.94}8%{scale:1}30%{opacity:1;scale:1}34%{opacity:0;scale:1}to{opacity:0}}.strip{border-top:2px solid var(--ink);background:#fbf1ef8c;height:clamp(170px,27vh,290px);position:relative}.strip canvas{will-change:transform;width:100%;height:100%;display:block}[hidden]{display:none!important}.auth{background:var(--paper);border:2px solid var(--ink);min-width:0;box-shadow:6px 6px 0 var(--ink);opacity:0;border-radius:6px;flex:0 31rem;padding:18px 20px 14px;animation:.6s .6s forwards fade}.auth-title{letter-spacing:-.02em;margin:0 0 12px;font-size:22px}.fields{grid-template-columns:1fr 1fr;gap:10px 12px;display:grid}.field{font:500 14px var(--display);flex-direction:column;gap:4px;display:flex}.field input{font:400 17px var(--body);color:var(--ink);border:1.5px solid var(--ink);background:#fffaf8;border-radius:5px;width:100%;min-width:0;padding:9px 11px}.field input:focus-visible{outline-offset:1px}.field input[aria-invalid=true]{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}.auth-actions{flex-wrap:wrap;align-items:center;gap:10px 12px;margin:14px 0 0;display:flex}.auth .btn{cursor:pointer;border:0;padding:11px 22px;font-size:16px}.auth .btn:disabled{opacity:.6;cursor:progress}.forgot{font:500 14px var(--display);color:var(--indigo);cursor:pointer;text-underline-offset:3px;background:0 0;border:0;padding:6px 2px;text-decoration:underline}.auth-actions .forgot{margin-left:auto}.signed-in p{margin:0}.signed-in strong{font-family:var(--display);overflow-wrap:anywhere}.auth-status{min-height:1.4em;font:500 14px/1.4 var(--display);color:var(--indigo);margin:10px 0 0}.auth-status:empty{min-height:0;margin:0}.auth-status.error{color:var(--bad)}.auth-status:focus{outline:none}.story{padding:0 clamp(16px,4vw,40px)}.step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(16px,3vw,48px);min-height:80vh;padding:clamp(40px,8vh,90px) 0;display:grid}.copy{max-width:34rem}h2{font-size:clamp(30px,3.4vw,50px)}.js .copy h2 .w{opacity:0;transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i)*55ms);display:inline-block;transform:translateY(.7em)rotate(2deg)}.js .step.seen h2 .w{opacity:1;transform:none}.copy p{margin:0 0 1em}.js .copy p{opacity:0;transition:opacity .7s ease .35s,transform .7s var(--ease) .35s;transform:translateY(14px)}.js .step.seen .copy p{opacity:1;transform:none}.stage{contain:paint;aspect-ratio:5/3;border:2px solid var(--ink);background-color:var(--paper);background-image:var(--chartpaper);background-size:60px 60px,60px 60px,12px 12px,12px 12px;border-radius:6px;width:100%;margin:0;position:relative;overflow:hidden}.chart{width:100%;height:100%;position:absolute;inset:0}.lab{font:500 18px var(--display);fill:var(--ink)}.trace{fill:none;stroke:var(--ink);stroke-width:1.2px;stroke-linejoin:round;stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000)}.stage.in .trace{animation:draw 2.4s var(--ease) forwards}@keyframes draw{to{stroke-dashoffset:0}}.stage[data-step="1"] .trace{stroke:var(--indigo)}.q{font:800 34px var(--display);fill:var(--indigo);opacity:0;transform-box:fill-box;transform-origin:50%;scale:0}.stage.in[data-step="1"] .q{animation:pop .5s var(--ease) calc(var(--r)*.18s + .6s) forwards,bob 2.4s ease-in-out calc(var(--r)*.18s + 1.2s) infinite}@keyframes pop{0%{opacity:0;scale:0}70%{opacity:1;scale:1.3}to{opacity:.95;scale:1}}@keyframes bob{50%{translate:0 -5px}}.scan{fill:var(--ink);opacity:0}.stage.in[data-step="2"] .scan{animation:2.6s cubic-bezier(.5,0,.3,1) .5s forwards scan}@keyframes scan{0%{opacity:1;transform:translate(0)}96%{opacity:1}to{opacity:0;transform:translateX(var(--scan,886px))}}.band{fill:var(--flag);opacity:0;transition:opacity .5s}.btag{font:800 17px var(--display);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;opacity:0;transition:opacity .5s}.stage.in[data-step="2"] .band{opacity:.5;transition-delay:var(--d)}.stage.in[data-step="2"] .btag{opacity:1;transition-delay:var(--d)}.stage.in[data-step="3"] .band{opacity:.16}.stage.in[data-step="3"] .band.focus{opacity:.65;stroke:var(--ink);stroke-width:2.5px;stroke-dasharray:10 7;animation:1.2s linear infinite march}@keyframes march{to{stroke-dashoffset:-34px}}.stage.in[data-step="3"] .btag{opacity:.35}.stage.in[data-step="4"] .band,.stage.in[data-step="5"] .band{opacity:.34}.stage .band.added,.stage .btag.added{opacity:0!important}.stage.in[data-step="4"] .band.added{stroke:var(--indigo);stroke-width:2px;stroke-dasharray:6 5;transition:opacity .5s 2s;opacity:.6!important}.stage.in[data-step="4"] .btag.added{transition:opacity .5s 2s;opacity:1!important}.stage.in[data-step="5"] .band.added{opacity:.34!important}.stage.in[data-step="5"] .btag.added{opacity:.6!important}.stage.in[data-step="4"] .btag,.stage.in[data-step="5"] .btag{opacity:.6}.pick{fill:#2b2d6e1f;stroke:var(--indigo);stroke-width:2.5px;stroke-dasharray:8 6;opacity:0;transform-box:fill-box;transform-origin:0;scale:0 1}.stage.in[data-step="4"] .pick{animation:grow 1s var(--ease) 1.5s forwards}@keyframes grow{to{opacity:1;scale:1}}.callout,.composer,.stamp{opacity:0;pointer-events:none;position:absolute}.callout,.composer{background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:4px;padding:14px 18px;font-size:16px;line-height:1.5}.callout{width:min(56%,400px);min-height:6.4em;top:66%;left:5%}.callout b{font-family:var(--display)}.stage.in[data-step="3"] .callout{animation:slidein .6s var(--ease) .6s forwards}@keyframes slidein{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}.composer{width:min(58%,360px);top:6%;right:4%}.composer p{opacity:0;margin:.25em 0}.composer b{font-family:var(--display);color:var(--indigo);margin-right:.4em}.stage.in[data-step="4"] .composer{animation:slidein .5s var(--ease) .3s forwards}.stage.in[data-step="4"] .composer p{animation:slidein .5s var(--ease) forwards}.stage.in[data-step="4"] .composer p:first-child{animation-delay:.5s}.stage.in[data-step="4"] .composer p:nth-child(2){animation-delay:1.8s}.stage.in[data-step="4"] .composer p:nth-child(3){animation-delay:2.9s}#sayText:after{content:"";background:var(--ink);vertical-align:-2px;width:2px;height:1em;margin-left:2px;animation:1s step-end infinite blink;display:inline-block}@keyframes blink{50%{opacity:0}}.stamp{text-align:center;background:var(--paper);border:4px double var(--indigo);color:var(--indigo);border-radius:10px;padding:18px 30px;top:50%;left:50%;translate:-50% -50%;rotate:-4deg}.stamp strong{font:800 clamp(24px,3vw,44px)/1.05 var(--display);letter-spacing:-.02em;display:block}.stamp span{font:500 15px var(--display);margin-top:6px;display:block}.stamp code{border:2px solid var(--pass);color:var(--pass);font:500 14px var(--display);border-radius:99px;margin-top:10px;padding:3px 10px;display:inline-block}.stage.in[data-step="5"] .stamp{animation:.55s cubic-bezier(.3,1.4,.5,1) .6s forwards slam}@keyframes slam{0%{opacity:0;scale:2.4}55%{opacity:1;scale:.93}to{opacity:1;scale:1}}.finale{padding:clamp(60px,12vh,140px) clamp(16px,4vw,40px) 0;position:relative;overflow:hidden}.finale>:not(.strip){max-width:60rem;margin-left:auto;margin-right:auto}.finale h2{font-size:clamp(40px,7vw,104px)}.paths{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:clamp(24px,4vw,56px);display:grid}.path{border-top:3px solid var(--ink);padding-top:18px}.path h3{font:800 clamp(28px,3.2vw,44px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 .4em}.path h3 a{color:var(--ink);background:linear-gradient(var(--flag),var(--flag)) 0 100%/100% 4px no-repeat;transition:background-size .25s var(--ease);text-decoration:none}.path h3 a:hover{background-size:100% 100%}.path h3 a span{transition:transform .25s var(--ease);display:inline-block}.path h3 a:hover span{transform:translate(6px)}.path p{margin:0 0 .6em}.path .sub{font:500 16px var(--display)}.fine{color:var(--indigo);font-size:15px;margin-top:2.5em!important;margin-bottom:clamp(48px,9vh,90px)!important}.strip.end{height:clamp(160px,26vh,240px);margin:0 calc(-1*clamp(16px,4vw,40px))}@media (width<=860px){.hero{height:auto;min-height:100svh}.hero-row{flex-direction:column;align-items:stretch}.auth{flex:none}.step{grid-template-columns:1fr;gap:24px;min-height:0}.callout{width:88%;padding:8px 12px;font-size:13px}.composer{width:92%;padding:8px 12px;font-size:13px;right:4%}.stamp{padding:10px 16px}}@media (width<=600px){.stage{aspect-ratio:auto}.chart{aspect-ratio:520/600;height:auto;display:block;position:relative}.lab{font-size:25px}.btag{stroke-width:6px;font-size:22px}.trace{stroke-width:1.6px}.q{font-size:46px}.callout,.composer{width:auto;min-height:0;box-shadow:4px 4px 0 var(--ink);margin:0 12px 14px;padding:10px 14px;font-size:15px;position:relative;inset:auto!important}.stamp{top:42%}.fields{grid-template-columns:1fr}.verdicts{width:180px;height:76px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}.ln>span,.hero-copy,.verdicts,.js .copy h2 .w,.js .copy p{opacity:1;transform:none}.vs.v1{opacity:1}.vs.v2,.vs.v3{display:none}}
