:root{--paper:#EDEEEF;--ink:#141414;--red:#D80F1A;--green:#3DBE5F;--stone:#595D63;--panel:#262626;--soft:#C4C7CB;--line:rgba(20,20,20,.16);--line-d:rgba(237,238,239,.2);--u:8px;--r:6px;--fs-big:clamp(1.75rem,1.1rem + 2.4vw,3rem);--fs-mid:clamp(1.375rem,1.1rem + 1vw,1.875rem);--fs-body:1rem;--display:"Rubik","Atkinson Hyperlegible",system-ui,sans-serif;--text:"Atkinson Hyperlegible",system-ui,sans-serif;color-scheme:light;}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--stone) var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.6 var(--text);overflow-x:clip;caret-color:var(--red)}::selection{background:var(--red);color:var(--paper)}img,svg{display:block;max-width:100%}a{color:inherit;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:var(--r)}h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.02em}p,li{text-wrap:pretty}.wrap{width:min(1120px,100% - 2 * clamp(12px,4vw,40px));margin-inline:auto}.top{display:flex;justify-content:center;padding:calc(var(--u) + env(safe-area-inset-top)) 0 var(--u)}.top img{width:56px;height:56px}.hero{padding:0 max(12px,env(safe-area-inset-left)) calc(var(--u) * 3)}.win{max-width:1120px;margin:0 auto;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:var(--r);overflow:hidden}.win-bar{height:24px;background:var(--panel);display:flex;align-items:flex-end;padding:0 var(--u)}.win-bar span{display:block;width:120px;height:16px;background:var(--ink);border-radius:var(--r) var(--r) 0 0}.win-body{display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--u) * 2)}.hero h1{font-size:var(--fs-big);line-height:1.08;max-width:18ch}.lead{margin:var(--u) 0 calc(var(--u) * 2);max-width:46ch;color:var(--soft)}.lead a,.hero h1 a{color:inherit}.fig{margin:0;width:100%;max-width:480px}.fig svg{width:100%;height:auto}.cta-wrap{position:relative;margin-top:var(--u)}.btn{display:inline-flex;align-items:center;justify-content:center;min-width:260px;min-height:64px;padding:0 calc(var(--u) * 4);border-radius:999px;background:var(--red);color:var(--paper);border:3px solid var(--paper);font:800 var(--fs-mid)/1 var(--display);text-decoration:none;transform:rotate(-2deg);transition:transform .3s cubic-bezier(.16,1,.3,1)}@media (hover: hover) and (pointer: fine){.btn:hover{transform:rotate(0deg) scale(1.03)}}.mk{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);color:var(--ink);font:800 1rem/1 var(--display);flex:none}.cta-wrap .mk{position:absolute;left:-8px;top:-12px;z-index:1;border:1px solid var(--ink)}.under{margin:var(--u) 0 0;color:var(--soft)}.fig text{font-family:var(--text);font-size:15px;fill:var(--paper)}.fig .zip text,.fig .m text{fill:var(--ink);font-weight:700}.fig .blk,.fig .rows,.fig .zip,.fig .ok,.fig .play,.fig .scan,.fig .m{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);transform-box:fill-box;transform-origin:center}.fig .blk,.fig .scan{opacity:0}.fig[data-step="0"] .blk{opacity:1}.fig[data-step="0"] .rows{opacity:.2}.fig[data-step="0"] .zip,.fig[data-step="1"] .zip,.fig[data-step="2"] .zip{opacity:0;transform:translateY(8px)}.fig[data-step="0"] .ok,.fig[data-step="1"] .ok{opacity:0}.fig[data-step="0"] .play,.fig[data-step="1"] .play{opacity:0;transform:scale(.6)}.fig[data-step="0"] .m,.fig[data-step="1"] .m,.fig[data-step="2"] .mc{opacity:0}.fig[data-step="1"] .scan{opacity:1;animation:scan 1.6s cubic-bezier(.16,1,.3,1) infinite alternate}@keyframes scan{from{transform:translateX(0)}to{transform:translateX(296px)}}.band{padding:calc(var(--u) * 10) 0}.dark{background:var(--ink);color:var(--paper)}.dark p,.dark li{color:var(--soft)}.dark a{text-decoration-color:var(--red)}h2{font-size:var(--fs-mid);line-height:1.2;display:flex;gap:calc(var(--u) * 1.5);align-items:center;margin-bottom:calc(var(--u) * 2)}.light .mk{background:var(--ink);color:var(--paper)}h3{font-size:var(--fs-body);line-height:1.3;margin-bottom:var(--u)}.stand{max-width:62ch;margin:0 0 calc(var(--u) * 6);color:var(--paper)!important}.stand::first-letter{float:left;font:800 4.5rem/.8 var(--display);margin:.3rem var(--u) 0 0;color:var(--red)}.story{display:grid;gap:0}.pin{position:sticky;top:calc(var(--u) + env(safe-area-inset-top));z-index:0;align-self:start}.pin .win{border-color:var(--line-d);padding:var(--u)}.pin .fig{max-width:400px;margin:0 auto}.steps{list-style:none;margin:0;padding:0;position:relative;z-index:1}.step{min-height:70dvh;display:flex;align-items:center}.step p{margin:0;padding:calc(var(--u) * 2);background:var(--ink);border:1px solid var(--line-d);border-radius:var(--r);font:700 var(--fs-mid)/1.3 var(--text);color:var(--paper)!important;opacity:.45;transition:opacity .4s}.step.on p{opacity:1}.step:first-child{padding-top:30dvh}.pull{margin:0 0 calc(var(--u) * 8);max-width:30ch}.pull blockquote{margin:0;padding-left:calc(var(--u) * 2);border-left:1px solid var(--red)}.pull p{margin:0;font:800 var(--fs-mid)/1.25 var(--display)}.bento{display:grid;gap:calc(var(--u) * 2);grid-template-columns:1fr}.tile{border:1px solid var(--line);border-radius:var(--r);padding:calc(var(--u) * 3)}.dark .tile{border-color:var(--line-d)}.intro{max-width:60ch;margin:0 0 calc(var(--u) * 3)}.sw{display:flex;align-items:center;gap:calc(var(--u) * 1.5);background:none;border:0;padding:var(--u) 0;font:700 var(--fs-body)/1.2 var(--text);color:var(--ink);cursor:pointer;min-height:44px}.track{width:64px;height:36px;border-radius:999px;background:var(--red);position:relative;flex:none;transition:background .3s}.knob{position:absolute;top:4px;left:4px;width:28px;height:28px;border-radius:50%;background:var(--paper);transition:transform .35s cubic-bezier(.16,1,.3,1);view-transition-name:knob}.sw[aria-checked="true"] .track{background:#1f7a37}.sw[aria-checked="true"] .knob{transform:translateX(28px)}.sw .lbl-g{color:var(--stone)}.sw[aria-checked="true"] .lbl-g{color:var(--ink)}.sw[aria-checked="true"] .lbl-r{color:var(--stone)}.flaglist{view-transition-name:flaglist}.fl ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--u)}.fl li{display:grid;grid-template-columns:24px 1fr;gap:var(--u);align-items:start}.fl li b{font:800 .875rem/24px var(--display);text-align:center;border:1px solid var(--line);border-radius:var(--r)}.fl h3{display:flex;align-items:center;gap:var(--u)}.fl h3 svg{width:24px;height:24px}.fl.red h3 svg{fill:var(--red)}.fl.green h3 svg{fill:#1f7a37}.tognote{margin:var(--u) 0 0;color:var(--stone)}.q{margin:0 0 var(--u);font:800 var(--fs-mid)/1.25 var(--display);color:var(--paper)!important}.no{margin:0}.fits{margin:calc(var(--u) * 3) 0 0;max-width:60ch;color:var(--paper)!important}.more{border:1px solid var(--soft);border-radius:var(--r);padding:calc(var(--u) * 3);margin-top:calc(var(--u) * 6);max-width:520px}.more p{margin:0}.box{max-width:62ch;margin:0;padding:calc(var(--u) * 2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.closing{margin-top:calc(var(--u) * 10);text-align:left}.ticks{list-style:none;margin:0 0 calc(var(--u) * 3);padding:0;display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u) * 3)}.ticks li{display:flex;align-items:center;gap:var(--u);font-weight:700}.ticks svg{width:20px;height:20px;fill:var(--red)}.closing .btn{border-color:var(--ink)}.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:var(--u) 12px calc(var(--u) + env(safe-area-inset-bottom));background:var(--ink);border-top:1px solid var(--line-d);transform:translateY(110%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s .35s}.bar.show{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.16,1,.3,1)}.bar .btn{min-height:56px;transform:none;font-size:1.25rem}.chip{position:fixed;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:19;display:flex;align-items:center;gap:var(--u);min-height:44px;padding:0 calc(var(--u) * 2);border-radius:999px;background:var(--paper);color:var(--ink);border:1px solid var(--ink);font-weight:700;text-decoration:none;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}.chip.show{opacity:1;visibility:visible;transition:opacity .3s}.chip svg{width:20px;height:20px;fill:currentColor}footer{background:var(--ink);color:var(--paper);padding:calc(var(--u) * 8) 0 calc(var(--u) * 14 + env(safe-area-inset-bottom));border-top:1px solid var(--line-d)}footer .logo{width:48px;height:48px;margin:0 auto calc(var(--u) * 4)}.credits{margin:0 auto;max-width:560px;display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 1.5) calc(var(--u) * 3)}.credits dt{text-align:right;color:var(--soft)}.credits dd{margin:0;text-align:left}.credits summary{cursor:pointer;min-height:24px}.credits details a{display:inline-block;margin-top:var(--u)}@media (min-width: 900px){.top img{width:72px;height:72px}.win-body{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"h f" "l f" "c f" "u f";align-items:center;text-align:left;column-gap:calc(var(--u) * 6);padding:calc(var(--u) * 5)}.hero h1{grid-area:h;align-self:end}.lead{grid-area:l}.fig-hero{grid-area:f}.cta-wrap{grid-area:c;justify-self:start}.under{grid-area:u;align-self:start}.story{grid-template-columns:1fr 1fr;column-gap:calc(var(--u) * 8)}.pin{top:calc(50dvh - 200px)}.step:first-child{padding-top:0}.bento{grid-template-columns:repeat(3,1fr)}.span2{grid-column:span 2}.fitwrap{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--u) * 6);align-items:start}.more{margin-top:0}}@media (max-width: 480px){.tile{padding:calc(var(--u) * 2)}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}html{scroll-behavior:auto}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}::view-transition-group(*){animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1)}html{max-width:100%;overflow-x:clip;}body{max-width:100%;overflow-x:clip;}