@font-face{font-family:Archivo;src:url(/_astro/af98634ce4d06bb994f5a77ff2d7e86fb1eff21148812874dda84ac10b17958a.0xdipIZB.ttf) format("truetype");font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:Archivo;src:url(/_astro/f8b0d6d185e3ed752c5605b053720ac425d476e9e56990b7636771f7755fccdd.DCq3kH7j.ttf) format("truetype");font-style:normal;font-weight:700;font-display:swap}@font-face{font-family:Geist Mono;src:url(/_astro/125a40e52db026e00ca98c8e7af9b55f4ae30306629e41453bdf37e0ecdf6c05.k60172xs.otf) format("opentype");font-style:normal;font-weight:400;font-display:swap}:root{--bg: #d3d3d3;--ink: #171717;--paper: #ffffff;--muted: color-mix(in srgb, #171717 58%, #d3d3d3);--line: #171717;--accent: #171717;--rail: 220px;--font-sans: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--font-2: "Archivo", sans-serif}*{box-sizing:border-box}*:not([data-scrollbar]){scrollbar-width:none}*:not([data-scrollbar])::-webkit-scrollbar{display:none}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg);color:var(--ink);font-family:var(--font-sans)}body{display:grid;grid-template-columns:var(--rail) 1fr;height:100dvh;max-height:100dvh}.rail{z-index:2;height:100%;min-height:0;padding:1.5rem 1.1rem;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;gap:1rem;overflow:hidden}.mark{margin:0;flex-shrink:0;font-family:var(--font-sans);font-size:.7857rem;line-height:1;letter-spacing:.0629rem}.backend{margin:0;flex-shrink:0;font-family:var(--font-sans);font-size:var(--type-xs-font-size, .5714rem);line-height:var(--type-xs-line-height, .5714rem);letter-spacing:var(--type-xs-letter-spacing, .0686rem);text-transform:uppercase;color:var(--ink)}.backend-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem;flex-shrink:0;padding:0;border:0}.backend-toggle button{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink);padding:.4rem 0;font:inherit;font-size:var(--type-xs-font-size, .5714rem);letter-spacing:var(--type-xs-letter-spacing, .0686rem);text-transform:uppercase;cursor:pointer}.backend-toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper)}nav{display:flex;flex-direction:column;gap:.15rem;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:none}nav button{appearance:none;border:0;background:transparent;color:var(--muted);text-align:left;padding:.35rem .5rem;font:inherit;font-size:.7857rem;line-height:1.15;letter-spacing:.02em;cursor:pointer;flex-shrink:0}nav button[aria-current=true]{background:var(--ink);color:var(--paper)}.hint{flex-shrink:0;margin:0;color:var(--ink);font-family:var(--font-2);font-size:var(--type-sm-font-size, .8571rem);line-height:var(--type-sm-line-height, 1.0286rem);letter-spacing:var(--type-sm-letter-spacing, -.0343rem)}#stage{position:relative;z-index:1;height:100%;min-height:0;overflow:hidden;background:var(--bg)}#stage[data-demo=item-fill],#stage[data-demo=textured-item],#stage[data-demo=sdf-icons],#stage[data-demo=msdf-text],#stage[data-demo=scroll-cards],#stage[data-demo=scroll-sections]{background:transparent}#stage.scroll-demo{overflow-y:auto;overscroll-behavior:none}#stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.overlay{position:absolute;z-index:2;inset:auto 28px 28px;pointer-events:none;max-width:42ch;padding:.75rem .9rem;background:var(--bg);color:var(--ink)}.scroll-demo .overlay{position:sticky;margin:0 28px 28px;inset:auto}.overlay h1{margin:0 0 8px;font-family:var(--font-2);font-size:1.15rem;line-height:1.2;letter-spacing:-.04rem;font-weight:400}.overlay p{margin:0;color:var(--ink);font-family:var(--font-2);font-size:var(--type-sm-font-size, .8571rem);line-height:var(--type-sm-line-height, 1.0286rem);letter-spacing:var(--type-sm-letter-spacing, -.0343rem)}.cards{position:relative;z-index:1;display:grid;gap:24px;padding:64px 48px;min-height:100%;align-content:center}.card{height:220px;border:1px solid var(--line)}.cards--icons{grid-template-columns:repeat(3,minmax(0,1fr))}.card--icon{height:180px;aspect-ratio:1;width:min(100%,180px);justify-self:center;border:none;background:transparent}.msdf-stage{position:relative;z-index:1;display:grid;place-items:center;min-height:100%;padding:64px 48px}.msdf-box{width:min(720px,100%);height:160px;border:1px solid var(--line)}.scroll-stack{position:relative;z-index:1;display:flex;flex-direction:column;gap:48px;padding:80px 48px 120px;min-height:220dvh}.scroll-block{display:grid;gap:12px}.scroll-label{margin:0;color:var(--ink);font-family:var(--font-sans);font-size:var(--type-xs-font-size, .5714rem);letter-spacing:var(--type-xs-letter-spacing, .0686rem);text-transform:uppercase}.scroll-card{height:240px}.scroll-stack--sections{gap:32px;min-height:260dvh}.scroll-section{position:relative;min-height:42dvh;border:1px solid var(--line);display:flex;align-items:flex-end;padding:20px 24px}.fallback{padding:48px;color:var(--muted)}@media(max-width:720px){html,body{overflow:auto;height:auto;overscroll-behavior:none}body{grid-template-columns:1fr;height:auto;max-height:none}.rail{height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}nav{overflow:visible;flex:none}#stage{height:auto;min-height:100dvh;overflow:visible}#stage.scroll-demo{height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:none}.scroll-stack{padding:64px 20px 100px}}.rail a{color:inherit;text-underline-offset:.2em}@media(max-width:720px){.rail #nav{max-height:180px;overflow-y:auto}#stage:not(.scroll-demo){height:75dvh;min-height:520px;position:relative;overflow:hidden}}