:root{color:#f5f0e7;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:optimizelegibility;--muted:#a8b0b0;--line:#30383b;background:#101416;font-family:Avenir Next,Avenir,sans-serif}*{box-sizing:border-box}body{min-width:280px;margin:0}::selection{color:#101416;background:#e8c8ad}html{scrollbar-color:#657275 #101416}a{color:inherit;-webkit-tap-highlight-color:transparent;text-decoration:none}a:focus-visible{outline-offset:5px;outline:2px solid #e8c8ad}.home{width:min(100% - 96px,1060px);margin-inline:auto}.masthead{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:24px;padding-block:32px;display:flex}.masthead>a{letter-spacing:-.04em;align-items:center;gap:9px;min-height:32px;font-size:clamp(13px,1.5vw,16px);font-weight:500;display:inline-flex}.brand-dot{background:#e8c8ad;border-radius:50%;width:5px;height:5px}.masthead>span,footer{color:var(--muted);font-size:12px}.introduction{padding-block:64px 52px}h1,.scene-title{letter-spacing:-.025em;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-weight:400}h1{text-wrap:balance;margin:0;font-size:clamp(40px,5vw,60px);line-height:1.1}.introduction p{color:var(--muted);margin:20px 0 0;font-size:14px;line-height:1.8}.list-heading{color:var(--muted);justify-content:space-between;align-items:baseline;padding-bottom:16px;display:flex}.list-heading h2{margin:0;font-size:12px;font-weight:500}.list-heading>span{font-variant-numeric:tabular-nums;font-size:12px}.scene-list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.scene-list li{border-bottom:1px solid var(--line)}.scene-link{grid-template-columns:minmax(210px,1fr) minmax(220px,1.2fr) 24px;align-items:center;gap:24px;min-height:86px;margin-inline:-12px;padding:18px 12px;transition:background-color .24s,color .24s;display:grid}.scene-title{font-size:28px;line-height:1.2}.scene-description{color:var(--muted);font-size:13px;line-height:1.6}.scene-link svg{width:22px;height:22px;color:var(--muted);transition:transform .24s cubic-bezier(.16,1,.3,1),color .24s}.scene-link:hover,.scene-link:focus-visible{color:#e8c8ad;background:#1b2428}.scene-link:hover svg,.scene-link:focus-visible svg{color:#e8c8ad;transform:translate(4px)}.page-link{color:var(--muted);grid-template-columns:auto minmax(0,1fr) 20px;align-items:baseline;gap:20px;margin:32px -12px 0;padding:14px 12px;font-size:13px;line-height:1.6;transition:background-color .24s,color .24s;display:grid}.page-link-title{color:#f5f0e7;letter-spacing:-.02em;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-size:21px;transition:color .24s}.page-link svg{align-self:center;width:18px;height:18px;transition:transform .24s cubic-bezier(.16,1,.3,1)}.page-link:hover,.page-link:focus-visible{color:#e8c8ad;background:#1b2428}.page-link:hover .page-link-title,.page-link:focus-visible .page-link-title{color:#e8c8ad}.page-link:hover svg,.page-link:focus-visible svg{transform:translate(4px)}footer{justify-content:space-between;align-items:center;gap:20px;padding-block:28px 32px;display:flex}footer a{text-underline-offset:4px;align-items:center;gap:8px;min-height:44px;display:inline-flex}footer a:hover{color:#f5f0e7;text-decoration:underline}footer svg{width:13px;height:13px}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=640px){.home{width:calc(100% - 40px)}.masthead{flex-wrap:wrap;row-gap:6px;padding-block:18px}.masthead>span{text-align:left;max-width:none;font-size:11px;line-height:1.5}.introduction{padding-block:42px 36px}.scene-link{grid-template-columns:minmax(0,1fr) 24px;gap:5px 16px;padding-block:17px}.scene-title{font-size:25px}.scene-description{grid-area:2/1;font-size:12px}.scene-link svg{grid-area:1/2/3}.page-link{grid-template-columns:minmax(0,1fr) 20px;gap:4px 16px;margin-top:24px}.page-link svg{grid-area:1/2/3}footer{padding-block:20px}}@media (prefers-reduced-motion:reduce){.scene-link,.scene-link svg,.page-link,.page-link-title,.page-link svg{transition:none}.scene-link:hover svg,.scene-link:focus-visible svg,.page-link:hover svg,.page-link:focus-visible svg{transform:none}}:root{--mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;--hover:#1b2428;--accent:#e8c8ad}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.figures{flex-wrap:wrap;gap:16px 44px;margin:36px 0 0;display:flex}.figures div{flex-direction:column-reverse;gap:6px;display:flex}.figures dt{color:var(--muted);font-size:12px}.figures dd{letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;margin:0;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-size:34px;line-height:1}.toc{padding-bottom:64px}.toc ol{border-top:1px solid var(--line);grid-template-columns:repeat(auto-fill,minmax(230px,1fr));column-gap:32px;margin:0;padding:0;list-style:none;display:grid}.toc li{border-bottom:1px solid var(--line)}.toc a{justify-content:space-between;align-items:baseline;gap:12px;min-height:52px;padding-block:14px;transition:color .24s;display:flex}.toc-title{letter-spacing:-.02em;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-size:19px}.toc-meta{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}.toc a:hover,.toc a:focus-visible{color:var(--accent)}.scene{border-top:1px solid var(--line);padding-block:56px 20px;scroll-margin-top:12px}.scene-head{grid-template-columns:minmax(0,1fr) auto auto;align-items:end;gap:12px 32px;padding-bottom:22px;display:grid}.scene-head .scene-title{margin:0;font-size:clamp(28px,3.4vw,36px);line-height:1.15}.scene-stack,.scene-count{color:var(--muted);margin:0;font-size:12px}.scene-stack{letter-spacing:.02em;margin-top:8px}.scene-count{font-variant-numeric:tabular-nums;padding-bottom:12px}.scene-open{align-items:center;gap:8px;min-height:44px;font-size:13px;transition:color .24s;display:inline-flex}.scene-open svg{width:16px;height:16px;transition:transform .24s cubic-bezier(.16,1,.3,1)}.scene-open:hover,.scene-open:focus-visible{color:var(--accent)}.scene-open:hover svg,.scene-open:focus-visible svg{transform:translate(3px)}.scene-where{color:var(--muted);margin:0;padding-bottom:12px;font-size:12px}.scene-where code{font-family:var(--mono);color:#ded9cf}.group-head{border-top:1px solid var(--line);padding-block:96px 40px}.group-title{letter-spacing:-.025em;margin:0;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-size:clamp(34px,4.2vw,46px);font-weight:400;line-height:1.1}.group-head p{color:var(--muted);margin:16px 0 0;font-size:14px;line-height:1.8}.shader-list{border-top:1px solid var(--line);margin:0;padding:0;list-style:none}.shader-list>li{border-bottom:1px solid var(--line);scroll-margin-top:12px}.shader summary,.shared a{grid-template-columns:minmax(170px,.8fr) minmax(0,2fr) 76px 18px;align-items:baseline;gap:8px 24px;margin-inline:-12px;padding:16px 12px;transition:background-color .24s,color .24s;display:grid}.shader summary{cursor:pointer;list-style:none}.shader summary::-webkit-details-marker{display:none}.shader summary:hover,.shared a:hover,.shared a:focus-visible{background:var(--hover)}.shader summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;background:var(--hover)}li:target>.shader>summary,li:target.shared a{box-shadow:inset 2px 0 var(--accent)}.shader-heading{flex-direction:column;align-items:flex-start;gap:9px;min-width:0;display:flex}.shader-name{font-family:var(--mono);overflow-wrap:anywhere;font-size:14px}.stages{flex-wrap:wrap;gap:6px;display:flex}.stage{border:1px solid;border-radius:999px;padding:1px 8px 2px;font-size:11px;line-height:1.4}.stage-compute{color:#e8c8ad;border-color:#e8c8ad66}.stage-vertex{color:#aecbb9;border-color:#aecbb966}.stage-fragment{color:#a3cadb;border-color:#a3cadb66}.stage-module{color:var(--muted);border-color:var(--line)}.shader-summary{color:var(--muted);font-size:13px;line-height:1.65}.shader:not([open]) .shader-summary{-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.shader-lines{color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}.shader summary svg,.shared svg{width:18px;height:18px;color:var(--muted);align-self:center;transition:transform .24s cubic-bezier(.16,1,.3,1),color .24s}.shader[open] summary svg{transform:rotate(180deg)}.shader summary:hover svg,.shared a:hover svg,.shared a:focus-visible svg{color:var(--accent)}.shared .shader-name{color:var(--muted)}.shared-note{color:var(--muted);grid-column:2/4;font-size:12px}.shared a:hover .shader-name,.shared a:focus-visible .shader-name{color:var(--accent)}.shader-body{padding:6px 0 30px}.facts{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 28px;margin:0 0 20px;font-size:12px;display:grid}.facts dt{color:var(--muted);margin-bottom:5px}.facts dd{color:#ded9cf;overflow-wrap:anywhere;margin:0;line-height:1.65}.facts code,.workgroup{font-family:var(--mono);font-size:12px}.workgroup{color:var(--muted)}.facts a{text-underline-offset:3px;-webkit-text-decoration:underline #56626a;text-decoration:underline #56626a}.facts a:hover{color:var(--accent);text-decoration-color:currentColor}.code{border:1px solid var(--line);font:12.5px/1.65 var(--mono);tab-size:2;background:#0b0f10;border-radius:6px;grid-template-columns:auto minmax(0,1fr);display:grid}.code pre{font:inherit;margin:0;padding-block:16px}.gutter{color:#5c676b;text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid #1d2528;padding-inline:14px 12px}.source{color:#ded9cf;scrollbar-color:#3d484c transparent;padding-inline:16px;overflow-x:auto}.source:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:0 6px 6px 0}.source .c{color:#82908e;font-style:italic}.source .k{color:#e8c8ad}.source .t{color:#aecbb9}.source .n{color:#e9ae95}.source .a,.source .p{color:#c9b8e8}.source .f{color:#a3cadb}.materials .group-head{padding-top:88px}.materials-unsupported{color:var(--accent);display:none}.materials[data-state=unsupported] .materials-unsupported{display:block}.material-family{padding-bottom:56px}.material-family+.material-family{border-top:1px solid var(--line);padding-top:40px}.family-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;display:flex}.family-head .scene-title{margin:0;font-size:clamp(24px,2.8vw,30px);line-height:1.15}.family-head .scene-title a{transition:color .24s}.family-head .scene-title a:hover,.family-head .scene-title a:focus-visible{color:var(--accent)}.family-note{max-width:72ch;color:var(--muted);margin:14px 0 26px;font-size:13px;line-height:1.7}.family-status{min-height:1.6em;color:var(--muted);margin:-12px 0 14px;font-size:12px}.family-status>span{display:none}.material-family[data-state=loading] .when-loading,.material-family[data-state=failed] .when-failed{display:inline}.material-family[data-state=loading] .when-loading{animation:1.6s ease-in-out infinite alternate materials-wait}@keyframes materials-wait{0%{opacity:.45}to{opacity:1}}.material-lights{border:1px solid var(--line);border-radius:999px;gap:2px;padding:3px;display:inline-flex}.material-lights[hidden]{display:none}.material-lights button{min-height:36px;color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:0 14px;font-size:12px;transition:background-color .24s,color .24s}.material-lights button:hover{color:#f5f0e7}.material-lights button[aria-pressed=true]{color:#101416;background:#f5f0e7}.material-lights button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.material-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:30px 20px;display:grid;position:relative}.material-canvas{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.material{margin:0}.material-ball{aspect-ratio:1;background:radial-gradient(circle at 42% 38%,#2b3337,#151b1d 58%,#111618);border-radius:6px}.material figcaption{gap:5px;margin-top:12px;display:grid}.material-name{letter-spacing:-.015em;font-family:Baskerville,Palatino Linotype,Palatino,Georgia,serif;font-size:18px}.material-source{font-family:var(--mono);color:var(--accent);justify-self:start;font-size:12px}a.material-source{text-underline-offset:3px;-webkit-text-decoration:underline #e8c8ad59;text-decoration:underline #e8c8ad59}a.material-source:hover{text-decoration-color:currentColor}.material-description{color:var(--muted);font-size:12px;line-height:1.6}.shader-list.harness{margin-top:36px}@media (width<=640px){.figures{gap:14px 28px;margin-top:28px}.figures dd{font-size:28px}.toc{padding-bottom:44px}.scene{padding-top:44px}.scene-head{grid-template-columns:minmax(0,1fr) auto;align-items:center}.scene-head>div{grid-column:1/-1}.scene-count,.scene-where{padding-bottom:0}.scene-where{grid-column:1/-1}.group-head{padding-block:64px 28px}.materials .group-head{padding-top:64px}.material-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.material-lights{width:100%}.material-lights button{flex:1}.shader summary,.shared a{grid-template-columns:minmax(0,1fr) auto 18px;gap:10px 14px}.shader-summary,.shared-note{grid-area:2/1/auto/-1}.shader summary svg,.shared svg{grid-area:1/3}.shared-note{grid-column:1/3}.shared svg{grid-row:1/3}.code{font-size:12px}.gutter{padding-inline:10px 8px}.source{padding-inline:12px}}@media (prefers-reduced-motion:reduce){.toc a,.scene-open,.scene-open svg,.shader summary,.shared a,.shader summary svg,.shared svg,.material-lights button,.family-head .scene-title a{transition:none}.material-family[data-state=loading] .when-loading{animation:none}.scene-open:hover svg,.scene-open:focus-visible svg{transform:none}}