:root{--bg:#0b0b0d;--bg2:#141416;--line:#26262a;--line2:#35353b;--ink:#fff;--muted:#8e8e96;--faint:#5f5f67;--display:"Outfit",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--body:"Nunito",ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--col:720px}*{box-sizing:border-box}html{color-scheme:dark;background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:17px;line-height:1.65}a{color:inherit;text-decoration:none}.wrap{max-width:var(--col);margin:0 auto;padding:0 24px}.label{font-family:var(--display);letter-spacing:.04em;color:var(--muted);font-size:12px;line-height:1.7}.label b{color:var(--muted);font-weight:500}.nav{max-width:var(--col);justify-content:space-between;align-items:center;margin:0 auto;padding:22px 24px 0;display:flex}.nav .brand{font-size:16px;font-weight:600;font-family:var(--display);align-items:center;gap:10px;display:flex}.nav .links{font-family:var(--display);color:var(--muted);letter-spacing:.04em;font-size:12px}.nav .links a{padding:4px 2px}.nav .links a:hover,.nav .links a.here{color:var(--ink)}header.post{max-width:var(--col);margin:0 auto;padding:76px 24px 20px}header.post h1{font-family:var(--display);letter-spacing:-.008em;margin:0 0 16px;font-size:36px;font-weight:600;line-height:1.15}header.post .dek{color:var(--muted);margin:0 0 22px;font-size:18px;line-height:1.6}header.post .by{font-family:var(--display);letter-spacing:.01em;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;font-size:15px;line-height:1.6}header.post .by span{color:var(--ink);font-weight:500}article p{margin:0 0 1.15em}article h2{font-family:var(--display);letter-spacing:-.008em;margin:2.2em 0 .6em;font-size:24px;font-weight:600;line-height:1.25}article h3{font-family:var(--display);margin:1.8em 0 .5em;font-size:19px;font-weight:600;line-height:1.3}article .wrap a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;text-decoration-thickness:1px}article .wrap a:hover{text-decoration-color:var(--muted)}article strong{font-weight:700}article em{font-style:italic}article ul{margin:0 0 1.15em;padding-left:1.15em}article li{margin:0 0 .45em;padding-left:.2em}article li::marker{color:var(--muted)}.callout{border-left:2px solid var(--line2);margin:1.6em 0;padding:2px 0 2px 18px}.callout p{margin:0}figure.fig{max-width:var(--col);margin:34px auto;padding:0 24px}figure.fig .panel{background:var(--ink);border-radius:10px;padding:16px 14px 10px;position:relative}figure.fig .panel.img{background:#fff;padding:14px}figure.fig svg,figure.fig img{width:100%;height:auto;display:block}figure.fig .natural svg{max-width:var(--max,560px);margin:0 auto}.mobile-figure,.house-mobile{display:none}@media (width<=560px){.figures-responsive .mobile-figure{display:inline}.figures-responsive .desktop-figure{display:none}.house-mobile{gap:16px;display:grid}.house-mobile>div{aspect-ratio:720/450;overflow:hidden}figure.fig .house-mobile img{width:222.222%;max-width:none}.house-mobile>div:last-child img{transform:translate(-55%)}.house-mobile-ready>img{display:none!important}}figure.fig figcaption{font-family:var(--display);color:var(--muted);margin:12px 0 0;font-size:12px;line-height:1.7}figure.fig figcaption b{color:var(--ink);font-weight:500}figure.fig .panel.has-replay{padding-bottom:42px}figure.fig .replay{color:#4a5b70;opacity:.7;cursor:pointer;background:#f6f7f9;border:1px solid #c9ced4;border-radius:50%;place-items:center;width:28px;height:28px;padding:0;transition:opacity .15s;display:grid;position:absolute;bottom:10px;right:10px}figure.fig .replay svg{width:16px;height:16px;display:block}figure.fig .replay:hover,figure.fig .replay:focus-visible{opacity:1}figure.fig .replay:focus-visible{outline-offset:2px;outline:2px solid #4a5b70}figure.fig.anim:not(.played) .replay{opacity:0;pointer-events:none}figure.fig .loading{display:none}@media screen and (prefers-reduced-motion:no-preference){figure.fig.anim{--dt:1.1s;--send:.5s;--land:1s}figure.fig.anim .step{--t:calc((var(--offset,0) + var(--t0,var(--i))) * var(--dt))}figure.fig.anim .bar{transform-box:fill-box;transform-origin:top}figure.fig.anim .bar.lead{--land:0s}figure.fig.anim:not(.play) :is(.msg,.dot,.hit){opacity:0}figure.fig.anim:not(.play) .bar{transform:scaleY(0)}figure.fig.anim:not(.play) .arrow{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);marker-end:none}figure.fig.anim.play .msg{animation:fig-fade .4s ease-out calc(var(--t) + var(--send)) backwards}figure.fig.anim.play .dot{animation:fig-fade .2s ease-out calc(var(--t) + var(--send)) backwards}figure.fig.anim.play .hit{animation:fig-fade .3s ease-out calc(var(--t) + var(--land)) backwards}figure.fig.anim.play .arrow{animation:fig-draw calc(var(--land) - var(--send)) ease-in calc(var(--t) + var(--send)) backwards}figure.fig.anim.play .bar{animation:fig-grow max(calc(var(--span) * var(--dt) + var(--send) - var(--land)),.3s) linear calc(var(--t) + var(--land)) backwards}figure.fig.anim.play .step.human .loading{--wake:calc((var(--offset,0) + var(--from)) * var(--dt) + var(--land));--wait:calc((var(--until) - var(--from)) * var(--dt) - var(--land) + var(--send));display:inline}figure.fig.anim.play .step.human .loading rect{animation:fig-pill var(--wait) linear var(--wake) both}figure.fig.anim.play .step.human .loading circle{animation:fig-wait var(--wait) linear var(--wake) both}figure.fig.anim.play .step.human .loading circle:nth-of-type(2){animation-delay:calc(var(--wake) + .13s);animation-duration:calc(var(--wait) - .13s)}figure.fig.anim.play .step.human .loading circle:nth-of-type(3){animation-delay:calc(var(--wake) + .26s);animation-duration:calc(var(--wait) - .26s)}}@media screen and (prefers-reduced-motion:no-preference) and (width<=560px){figure.fig.anim [data-pane=b]{--offset:var(--after)}}@keyframes fig-fade{0%{opacity:0}}@keyframes fig-pill{0%,to{opacity:0}4%,96%{opacity:1}}@keyframes fig-wait{0%,to{opacity:0}5%,25%,45%,65%,85%{opacity:.25}15%,35%,55%,75%,95%{opacity:1}}@keyframes fig-grow{0%{transform:scaleY(0)}}@keyframes fig-draw{0%{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);marker-end:none}to{stroke-dasharray:var(--len);stroke-dashoffset:0;marker-end:none}}.contact{max-width:var(--col);margin:4px auto 0;padding:0 24px}.contact .row{border-top:1px solid var(--line);justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;display:flex}.contact .row:last-child{border-bottom:1px solid var(--line)}.contact .n{font-size:16px}.contact .m{color:var(--muted);white-space:nowrap;text-align:right;font-size:15px}.contact .row:hover .m{color:var(--ink)}@media (width<=560px){.contact .row{flex-direction:column;gap:0}.contact .m{white-space:normal;text-align:left}}article{padding-bottom:88px}@media (width<=560px){header.post h1{font-size:30px}article h2{font-size:22px}}html{scroll-behavior:smooth}article h2,article h3{scroll-margin-top:28px;position:relative}article .anchor{color:var(--faint);opacity:0;font-weight:400;text-decoration:none;transition:opacity .15s;position:absolute;top:0;left:-1.1em}article h2:hover .anchor,article h3:hover .anchor,article .anchor:focus{opacity:1}@media (width<=820px){article .anchor{display:none}}.toc{font-family:var(--display);margin:22px 0 0;font-size:14px;line-height:1.55}.toc .toct{letter-spacing:.06em;color:var(--faint);margin-bottom:6px;font-size:12px}.toc ol{margin:0;padding:0;list-style:none}.toc li{margin:0}.toc li.l3{padding-left:14px}.toc a{color:var(--muted);border-left:1px solid var(--line);padding:3px 0 3px 12px;text-decoration:none;display:block}.toc a:hover{color:var(--ink)}.toc a.on{color:var(--ink);border-left-color:var(--ink)}@media (width<=767px){.toc{display:none}}@media (width>=1280px){.toc{width:214px;max-height:calc(100vh - 48px);margin:0;font-size:13px;position:fixed;top:50%;left:calc(50% - 614px);overflow:auto;transform:translateY(-50%)}}header.post .by{justify-content:space-between;align-items:baseline;gap:16px;display:flex}.share{font-family:var(--display);position:relative}.sharebtn{font:inherit;color:var(--muted);border:1px solid var(--line2);cursor:pointer;background:0 0;border-radius:999px;padding:5px 14px;font-size:14px}.sharebtn:hover{color:var(--ink);border-color:var(--muted)}.signup-inline{max-width:440px;margin:24px auto 0;padding:0;scroll-margin-top:28px}.signup-inline .signup-description{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#blog-signup{grid-template-columns:1fr;gap:10px;max-width:none;display:grid}.signup-inline label{font:500 16px/1.4 var(--display);color:var(--ink)}.signup-controls{background:var(--bg2);border:1px solid #696970;border-radius:8px;align-items:stretch;gap:4px;min-width:0;padding:4px;display:flex}.signup-controls input{width:0;min-width:0;color:var(--ink);font:400 16px var(--body);background:0 0;border:0;border-radius:4px;flex:1;min-height:44px;padding:10px}.signup-controls input::placeholder{color:var(--muted);opacity:1}.signup-controls button{background:var(--line);color:var(--ink);min-height:44px;font:500 14px var(--display);cursor:pointer;border:0;border-radius:4px;flex-shrink:0;padding:10px 16px;transition:background-color .15s}.signup-controls button:hover{background:var(--line2)}@media (prefers-reduced-motion:reduce){.signup-controls button{transition:none}}.signup-controls button:disabled{opacity:.65;cursor:not-allowed}form[aria-busy=true] .signup-controls button{cursor:wait}.signup-inline input:focus-visible,.signup-inline button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.signup-inline .signup-error{color:#ffb4a8;grid-column:1/-1;margin:0;font-size:14px}.signup-controls:has(input[aria-invalid=true]){border-color:#ffb4a8}.signup-inline [hidden],#blog-signup[hidden]{display:none}#blog-signup-status:focus{outline:none}#blog-signup-status:not(:empty){font:500 16px/1.4 var(--display);padding:12px 0}