:root{--paper:#F3F3F1;--white:#FFFFFF;--ink:#17151C;--lav:#9999FF;--orange:#FFD21F;--soft:rgba(23,21,28,.74);--line:rgba(23,21,28,.18);--b:8px;--display:"Archivo","Arial Narrow",sans-serif;--body:"Public Sans",system-ui,sans-serif;}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--ink) var(--paper);accent-color:var(--ink)}body{margin:0;background:var(--paper);color:var(--ink);font:400 1rem/1.6 var(--body);overflow-x:clip;caret-color:var(--ink)}::selection{background:var(--lav);color:var(--ink)}img,svg{display:block;max-width:100%}a{color:var(--ink)}:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-0.01em}p,li{text-wrap:pretty}h2{font-size:1rem;line-height:1.4}small,.small{font-size:.875rem}.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 max(calc(var(--b) * 2),env(safe-area-inset-left)) 0 max(calc(var(--b) * 2),env(safe-area-inset-right))}.top{padding-top:max(calc(var(--b) * 2),env(safe-area-inset-top));padding-bottom:calc(var(--b) * 2)}.top .wrap{display:flex;align-items:center;gap:calc(var(--b) * 1.5)}.logo{width:48px;height:48px}.brand{font-family:var(--display);font-weight:800;font-size:1rem;text-decoration:none}.story{display:grid;grid-template-columns:minmax(0,1fr);gap:0 calc(var(--b) * 8)}.intro{padding-bottom:calc(var(--b) * 3)}h1{font-size:clamp(1.85rem,1.1rem + 3.3vw,3.25rem);line-height:1.06;max-width:16ch}.sub{margin:calc(var(--b) * 2) 0 0;max-width:44ch;color:var(--soft)}.callouts{list-style:none;margin:calc(var(--b) * 2) 0 0;padding:0;max-width:30rem}.callouts li{display:flex;align-items:center;gap:calc(var(--b) * 1.5);padding:var(--b) 0;border-bottom:1px solid var(--line);font-size:.875rem;line-height:1.4}.callouts li:last-child{border-bottom:0;padding-top:calc(var(--b) * 2);flex-wrap:wrap}.num{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid var(--ink);border-radius:50%;font:800 .875rem/1 var(--display)}.btn-go{display:inline-flex;align-items:center;justify-content:center;min-width:240px;min-height:56px;padding:0 calc(var(--b) * 3);background:var(--orange);color:var(--ink);border:3px solid var(--ink);border-radius:8px;font:800 1rem/1 var(--display);text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1)}@media (hover: hover) and (pointer: fine){.btn-go:hover{transform:translateY(-2px)}}.btn-go:active{transform:translateY(1px)}.under{flex-basis:100%;margin:var(--b) 0 0 40px;color:var(--soft)}.fig{position:sticky;top:0;z-index:2;background:var(--paper);margin:0 calc(var(--b) * -2);padding:calc(var(--b) * 1.5) calc(var(--b) * 2);border-bottom:1px solid var(--line)}.fig svg{width:100%;max-width:400px;height:auto;margin:0 auto}.fig .t{font-family:var(--body);font-weight:600;fill:var(--ink)}.fig .tw{font-family:var(--body);font-weight:600;fill:var(--white)}.fig g,.fig rect,.fig path,.fig circle{transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}.fig .move{transform-box:fill-box}.fig[data-step="1"] .after{opacity:.22}.fig[data-step="1"] .move,.fig[data-step="2"] .move,.fig[data-step="3"] .move{transform:translate(-24px,0)}.fig[data-step="1"] .trail,.fig[data-step="2"] .trail,.fig[data-step="3"] .trail,.fig[data-step="1"] .keys,.fig[data-step="2"] .keys,.fig[data-step="3"] .keys{opacity:0}.fig[data-step="1"] .fill,.fig[data-step="2"] .fill{opacity:0}.fig .mark{fill:var(--ink)}.fig[data-step="1"] .m1,.fig[data-step="2"] .m2,.fig[data-step="3"] .m3,.fig[data-step="4"] .m4{fill:var(--orange)}.fig[data-step="1"] .m1 + text,.fig[data-step="2"] .m2 + text,.fig[data-step="3"] .m3 + text,.fig[data-step="4"] .m4 + text{fill:var(--ink)}.steps{padding-top:calc(var(--b) * 5)}.lead{margin:var(--b) 0 0;max-width:44ch;color:var(--soft)}.applies{display:flex;flex-wrap:wrap;gap:var(--b);list-style:none;margin:calc(var(--b) * 2) 0 0;padding:0}.applies li{border:1px solid var(--ink);border-radius:4px;padding:2px var(--b);font-size:.875rem}.applies li:first-child{border-color:transparent;padding-left:0;font-weight:600}.stack{list-style:none;margin:calc(var(--b) * 3) 0 0;padding:0;display:grid;gap:0}.tile{border-bottom:1px solid var(--line);padding:var(--b) 0;display:flex;gap:calc(var(--b) * 1.5);align-items:baseline}.tile strong{font-family:var(--display);font-weight:800}.tile span{color:var(--soft);font-size:.875rem}.shot{margin:calc(var(--b) * 3) 0 0;border:1px solid var(--ink);padding:var(--b);background:var(--white)}.shot img{width:100%;height:auto}.shot figcaption{font-size:.875rem;color:var(--soft);padding-top:var(--b)}.step{min-height:70dvh;display:flex;align-items:center;gap:calc(var(--b) * 2)}.step p{margin:0;font-size:1rem;font-weight:600;max-width:30ch}.band{margin-top:calc(var(--b) * 8);padding:calc(var(--b) * 6) 0 calc(var(--b) * 12);background:var(--white);border-top:1px solid var(--line)}.hang{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--b) * 2)}.ledger{list-style:none;margin:0;padding:0}.ledger li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;padding:calc(var(--b) * 1.5) 0;border-bottom:1px solid var(--line)}.ledger li:first-child{border-top:1px solid var(--line)}.sign{font:800 1.75rem/1 var(--display)}.ride{position:relative;margin-top:calc(var(--b) * -8);background:var(--paper);border:1px solid var(--ink);border-radius:8px;padding:calc(var(--b) * 3) calc(var(--b) * 2)}.notes{margin:calc(var(--b) * 2) 0 0;padding-left:calc(var(--b) * 3);font-size:.875rem;color:var(--soft)}.notes li{padding:4px 0}.fn{display:inline-grid;place-items:center;width:44px;height:44px;margin:-14px -10px -14px -6px;vertical-align:middle;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);font:800 .875rem/1 var(--display)}.fn span{display:inline-grid;place-items:center;width:22px;height:22px;border:1.5px solid var(--ink);border-radius:50%}[popover]{max-width:min(22rem,calc(100vw - 32px));border:2px solid var(--ink);border-radius:8px;background:var(--white);color:var(--ink);padding:calc(var(--b) * 2);font-size:.875rem;line-height:1.5}[popover]::backdrop{background:rgba(23,21,28,.25)}.sec{padding-top:calc(var(--b) * 8)}.facts h2{padding-bottom:var(--b);border-bottom:4px solid var(--ink)}.facts p{margin:calc(var(--b) * 1.5) 0 0}.flip{display:grid;width:100%;max-width:30rem;padding:0;border:0;background:none;cursor:pointer;perspective:1000px;text-align:left;font:inherit;color:inherit}.flip .face{grid-area:1 / 1;border:2px solid var(--ink);border-radius:8px;padding:calc(var(--b) * 3);background:var(--paper);backface-visibility:hidden;transition:transform .6s cubic-bezier(.16,1,.3,1)}.flip .back{transform:rotateY(180deg)}.flip[aria-pressed="true"] .front{transform:rotateY(-180deg)}.flip[aria-pressed="true"] .back{transform:rotateY(0deg)}.face strong{display:block;font-family:var(--display);font-weight:800;margin-bottom:4px}.face .hint{display:block;margin-top:var(--b);font-size:.875rem;color:var(--soft);text-decoration:underline}.close{padding:calc(var(--b) * 10) 0 calc(var(--b) * 4)}.close p{margin:0 0 calc(var(--b) * 2);font-weight:600;max-width:36ch}.btn-go.big{min-width:min(100%,320px);min-height:72px;padding:0 calc(var(--b) * 5)}.seealso{padding:calc(var(--b) * 3) 0 0}.seealso ul{margin:var(--b) 0 0;padding-left:calc(var(--b) * 3);font-size:.875rem}.seealso a{display:inline-block;padding:10px 0}.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--paper);border-top:1px solid var(--ink);padding:var(--b) max(calc(var(--b) * 2),env(safe-area-inset-right)) max(var(--b),env(safe-area-inset-bottom)) max(calc(var(--b) * 2),env(safe-area-inset-left));transform:translateY(110%);transition:transform .35s cubic-bezier(.16,1,.3,1)}.bar.on{transform:none}.bar-in{max-width:1160px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--b)}.toc-btn{min-height:44px;padding:0 4px;background:none;border:0;font:600 .875rem/1.2 var(--body);color:var(--ink);cursor:pointer;text-align:left;min-width:0;overflow:hidden;text-overflow:ellipsis;}.bar .btn-go{min-width:0;min-height:44px;padding:0 calc(var(--b) * 2);font-size:.875rem;border-width:2px;flex:none;opacity:0;pointer-events:none;transition:opacity .3s}.bar.cta-on .btn-go{opacity:1;pointer-events:auto}.sheet{display:none;max-width:1160px;margin:0 auto;padding:var(--b) 0}.sheet.open{display:block}.sheet ol{list-style:none;margin:0;padding:0}.sheet a{display:block;padding:10px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}footer{margin-top:calc(var(--b) * 6);border-top:1px solid var(--line);padding:calc(var(--b) * 3) 0 calc(var(--b) * 12)}.foot{display:flex;flex-direction:column;gap:var(--b)}.foot .links{display:flex;flex-wrap:wrap;gap:0 calc(var(--b) * 2);font-size:.875rem}.foot .links a{display:inline-block;padding:10px 0}.foot .copy{font-size:.875rem;color:var(--soft)}@media (min-width: 720px){.logo{width:56px;height:56px}.hang{grid-template-columns:200px minmax(0,1fr);gap:calc(var(--b) * 4)}.ride{padding:calc(var(--b) * 4)}.foot{flex-direction:row;justify-content:space-between;align-items:center}.stack{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--b) * 3);perspective:900px;padding:calc(var(--b) * 4) 0 calc(var(--b) * 2)}.tile{flex-direction:column;gap:4px;border:2px solid var(--ink);border-radius:6px;padding:calc(var(--b) * 2);background:var(--paper);transform:rotateX(50deg) rotateZ(-30deg);box-shadow:-8px 8px 0 -2px var(--paper),-8px 8px 0 0 var(--ink);transition:transform .4s cubic-bezier(.16,1,.3,1)}.tile:nth-child(2){transform:rotateX(50deg) rotateZ(-30deg) translateZ(16px)}.tile:nth-child(3){transform:rotateX(50deg) rotateZ(-30deg) translateZ(32px)}}@media (min-width: 720px) and (hover: hover) and (pointer: fine){.tile:hover{transform:rotateX(50deg) rotateZ(-30deg) translateZ(48px)}}@media (min-width: 960px){.story{grid-template-columns:minmax(0,1fr) 420px}.intro{grid-column:1;grid-row:1;padding-top:calc(var(--b) * 4)}.fig{grid-column:2;grid-row:1 / span 2;align-self:start;top:calc(var(--b) * 4);margin:calc(var(--b) * 3) 0 0;padding:0;border:0;background:none}.steps{grid-column:1;grid-row:2}}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none !important;animation:none !important}}:is(body,html){overflow-x:clip;max-width:100%;}