:root{--yellow:#FFFC00;--red:#D72550;--ink:#111111;--white:#FFFFFF;--sand:#E6E3D6;--u:.5rem;--band:var(--white);--s-small:.875rem;--s-body:clamp(1.125rem,1rem + .6vw,1.375rem);--s-head:clamp(2rem,1.4rem + 2.6vw,3.25rem);color-scheme:light;accent-color:var(--red);caret-color:var(--red);scrollbar-color:var(--ink) var(--sand);}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;font-size:var(--s-body);line-height:1.55;overflow-x:clip}::selection{background:var(--ink);color:var(--yellow)}p{margin:0;text-wrap:pretty}h1{margin:0;text-wrap:balance}a{color:inherit}.col{width:min(100% - calc(var(--u) * 4),36rem);margin-inline:auto;container-type:inline-size;container-name:note}.top{padding-top:calc(var(--u) * 1.5 + env(safe-area-inset-top))}.tab{display:inline-flex;align-items:center;gap:var(--u);height:44px;padding:0 calc(var(--u) * 2) 0 calc(var(--u) * 1);background:var(--yellow);border-radius:16px 16px 0 0;font-weight:800;font-size:var(--s-small);letter-spacing:0}.tab img{width:32px;height:32px;border-radius:8px;display:block}@supports (corner-shape:squircle){.tab{corner-shape:squircle;border-radius:24px 24px 0 0}}.hero{background:var(--yellow);padding:calc(var(--u) * 3) 0 calc(var(--u) * 6)}.hero h1{font-weight:800;font-size:var(--s-head);line-height:1.06;letter-spacing:-.025em}.hero .line{margin-top:calc(var(--u) * 2);max-width:34ch}.btn-go{display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:240px;padding:0 calc(var(--u) * 4);border-radius:999px;background:var(--red);color:var(--white);font-weight:800;font-size:var(--s-body);text-decoration:none;line-height:1.1;transition:transform .2s cubic-bezier(.16,1,.3,1)}.btn-go:focus-visible,.flip:focus-visible,.foot a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.foot a:focus-visible{outline-color:var(--yellow)}@media (hover:hover) and (pointer:fine){.btn-go:hover{transform:translateY(-2px)}}.hero .btn-go{margin-top:calc(var(--u) * 3)}.story{background:var(--band);padding:calc(var(--u) * 4) 0 calc(var(--u) * 4);transition:background-color .4s ease-out}body:has(.flip[aria-pressed="true"]){--band:color-mix(in srgb,var(--yellow) 16%,var(--white))}.intro{margin-bottom:calc(var(--u) * 3)}.fig{position:sticky;top:0;z-index:2;background:var(--band);padding:calc(var(--u) * 1) 0 calc(var(--u) * 1);margin:0;transition:background-color .4s ease-out}.fig svg{display:block;height:min(38dvh,22rem);width:auto;max-width:100%;margin-inline:auto}.flip{display:flex;align-items:center;gap:calc(var(--u) * 1.5);min-height:44px;margin:var(--u) auto 0;padding:0 var(--u);background:none;border:0;color:var(--ink);font:inherit;font-size:var(--s-small);font-weight:800;cursor:pointer;border-radius:8px}.track{position:relative;width:44px;height:24px;border-radius:12px;background:var(--sand);flex:none;transition:background-color .25s ease-out}.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .25s cubic-bezier(.16,1,.3,1)}.flip[aria-pressed="true"] .track{background:var(--yellow);box-shadow:inset 0 0 0 1px var(--ink)}.flip[aria-pressed="true"] .knob{transform:translateX(20px)}.steps{list-style:none;margin:0;padding:0}.steps li{min-height:52dvh;display:flex;align-items:flex-end;gap:calc(var(--u) * 2);padding-bottom:calc(var(--u) * 4)}.steps li:first-child{min-height:40dvh}.n{flex:none;width:2rem;font-weight:800;color:var(--red);font-variant-numeric:tabular-nums}@container note (min-width:30rem){.steps li{gap:calc(var(--u) * 3)}.n{width:2.5rem}}.fig [class^="p-"],.fig .row,.fig .sort{transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s ease-out}.p-dim{opacity:0}.fig[data-step="1"] .p-dim{opacity:.55}.fig[data-step="1"] .p-typed{opacity:0}.fig[data-step="1"] .row,.fig[data-step="2"] .row{opacity:0;transform:translateX(-16px)}.fig[data-step="1"] .p-tiles,.fig[data-step="2"] .p-tiles,.fig[data-step="3"] .p-tiles{opacity:0;transform:translateY(16px)}.p-title-b{opacity:0}body:has(.flip[aria-pressed="true"]) .p-title-a{opacity:0}body:has(.flip[aria-pressed="true"]) .p-title-b{opacity:1}body:has(.flip[aria-pressed="true"]) .s1{transform:translateY(64px)}body:has(.flip[aria-pressed="true"]) .s2{transform:translateY(32px)}body:has(.flip[aria-pressed="true"]) .s3{transform:translateY(-96px)}.close{background:var(--yellow);padding:calc(var(--u) * 6) 0 calc(var(--u) * 8)}.close .btn-go{margin-top:calc(var(--u) * 3)}.sign{margin-top:calc(var(--u) * 4);font-weight:800}.foot{background:var(--ink);color:var(--white);padding:calc(var(--u) * 5) 0 calc(var(--u) * 12 + env(safe-area-inset-bottom));font-size:var(--s-small)}.foot .col{display:flex;justify-content:space-between;align-items:center;gap:calc(var(--u) * 2);flex-wrap:wrap}.foot b{font-weight:800}.foot a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;border-radius:4px}.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--white);border-top:1px solid var(--sand);padding:calc(var(--u) * 1.5) calc(var(--u) * 2) calc(var(--u) * 1.5 + env(safe-area-inset-bottom));display:flex;justify-content:center;transform:translateY(110%);visibility:hidden;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s linear .35s}.bar.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.16,1,.3,1),visibility 0s}.bar .btn-go{width:min(100%,26rem)}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){.rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}@keyframes rise{from{opacity:.2;transform:translateY(24px)}to{opacity:1;transform:none}}}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s !important;animation:none !important}}:is(html,body){overflow-x:clip;max-inline-size:100%}