*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-background);color:var(--color-text, var(--color-foreground, #1a1a1a));font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh;transition:background-color .2s ease,color .2s ease}header.site{position:sticky;top:0;z-index:50;padding:12px clamp(16px,4vw,24px);background:var(--color-surface);border-bottom:1px solid var(--color-border)}.controls label{font-size:13px;opacity:.85;display:inline-flex;gap:6px;align-items:center}main{padding:clamp(16px,4vw,24px);max-width:1200px;margin:0 auto}.hero{position:relative;overflow:hidden;margin:0 0 40px;border:0;border-radius:0;border-bottom:1px solid var(--color-border)}#heroBg{display:block;min-height:clamp(360px,60vh,560px)}.hero-inner{position:relative;z-index:2;box-sizing:border-box;max-width:600px;margin-block:clamp(20px,6vh,64px);margin-inline-start:max(clamp(16px,4vw,24px),calc((100% - 1200px)/2 + clamp(16px,4vw,24px)));margin-inline-end:clamp(16px,4vw,24px);padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;gap:14px;text-align:left;background:color-mix(in oklab,var(--color-background) 72%,transparent);border:var(--border-width-thin, 1px) solid var(--color-border);border-radius:var(--radius-l, 16px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.hero-inner h2{margin:0;font-size:clamp(26px,4vw,34px);line-height:1.2}.hero-inner p{margin:0;opacity:.9;max-width:540px}.hero-inner code{background:color-mix(in oklab,var(--color-text) 10%,transparent);color:var(--color-text, var(--color-foreground, #1a1a1a));padding:4px 10px;border-radius:var(--radius-s, 6px);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.9em;display:inline-block;width:max-content;max-width:100%}.section-title{margin:24px 0 16px;font-size:18px;opacity:.85}.gallery-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px}.gallery-head .section-title{margin:0}.group-tabs{display:flex;gap:8px;flex-wrap:wrap}.group-tab{font:inherit;font-size:13px;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text, var(--color-foreground, #1a1a1a));cursor:pointer;transition:border-color .15s ease,background .15s ease}.group-tab:hover{border-color:var(--color-primary)}.group-tab.active{border-color:var(--color-primary);background:color-mix(in oklab,var(--color-primary) 18%,var(--color-surface))}.group-tab .count{font-family:ui-monospace,monospace;font-size:11px;opacity:.6;background:#ffffff0f;padding:1px 6px;border-radius:99px}.gallery-note{margin:6px 0 18px;font-size:13px;opacity:.55;max-width:640px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.grid .card{padding:0;overflow:hidden;display:flex;flex-direction:column}.card-stage{height:180px}.card-stage bg-wc{display:block;width:100%;height:100%}.card-stage:empty{background:repeating-linear-gradient(45deg,color-mix(in oklab,var(--color-foreground) 4%,transparent) 0 10px,transparent 10px 20px)}.card-stage.stage-dark,.card-stage.stage-dark:empty{background:#181826}.card-stage.stage-dark bg-wc{--bg-wc-color-bg: #181826;--bg-wc-color-fg: #e8e8f0}.card-meta{padding:10px 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-border)}.card-meta h3{margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px}.badge{font-size:10px;padding:3px 8px;border-radius:99px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}.badge.webgl{background:color-mix(in oklab,var(--color-primary) 20%,transparent);color:var(--color-primary)}.badge.canvas2d{background:color-mix(in oklab,var(--color-accent) 20%,transparent);color:var(--color-accent)}.badge.css3d{background:color-mix(in oklab,var(--color-info) 20%,transparent);color:var(--color-info)}.card-modes{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}.mode-pill{font:600 11px/1 ui-monospace,monospace;letter-spacing:.04em;color:var(--color-foreground);background:color-mix(in oklab,var(--color-foreground) 8%,transparent);border:1px solid var(--color-border);border-radius:99px;padding:5px 11px;cursor:pointer}.mode-pill:hover{border-color:color-mix(in oklab,var(--color-primary) 50%,var(--color-border))}.mode-pill[aria-pressed=true]{background:var(--color-primary);border-color:transparent;color:var(--color-background)}.mode-pill:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.card-controls{padding:8px 14px 14px;display:flex;flex-direction:column;gap:6px;font-size:12px;opacity:.92;border-top:1px solid var(--color-border)}.card-controls label{display:flex;align-items:center;gap:10px}.card-controls label>span{width:64px;opacity:.7;font-family:ui-monospace,monospace}.card-controls input[type=range]{flex:1;accent-color:var(--color-primary)}.card-controls .val{width:38px;text-align:right;font-family:ui-monospace,monospace;opacity:.7}.snippet{margin-top:48px}.snippet pre{background:var(--color-surface);border:1px solid var(--color-border);border-radius:10px;padding:16px;overflow-x:auto;font-size:13px;line-height:1.55}.snippet code{font-family:ui-monospace,SF Mono,Menlo,monospace}.snippet .muted{opacity:.65;font-size:13px;margin-top:8px}html{scroll-behavior:smooth}main.content a{color:var(--color-primary)}code,pre{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace}section[id]{scroll-margin-top:80px}main.content{max-width:980px;margin:0 auto;padding:56px clamp(20px,4vw,32px) 96px;display:flex;flex-direction:column;gap:56px}main.content h1{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.025em;margin:0 0 8px}.page-head .muted{margin:0;max-width:640px}main.content h2{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;margin:0 0 18px;border-bottom:1px solid var(--color-border);padding-bottom:10px}main.content h3{font-size:18px;margin:24px 0 12px;font-weight:600}main.content p{margin:0 0 14px}p code,li code,td code,dl code{font-size:.9em;background:var(--color-surface, var(--code-bg, #131722));border:1px solid var(--color-border, var(--code-border, #232a3a));padding:1px 6px;border-radius:4px;color:var(--color-accent)}.muted{opacity:.65;font-size:14px}code-block{display:block;margin:0 0 16px}code-block:not(:defined){white-space:pre;overflow-x:auto;background:var(--color-surface, var(--code-bg, #131722));border:1px solid var(--color-border, var(--code-border, #232a3a));border-radius:10px;padding:14px 16px;font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.55;color:#d6dae8;tab-size:2}.code-block{position:relative;background:var(--color-surface, var(--code-bg, #131722));border:1px solid var(--color-border, var(--code-border, #232a3a));border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.55;margin:0 0 16px;color:#d6dae8}.code-block:before{content:attr(data-lang);position:absolute;top:8px;right:12px;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--color-text-muted, var(--color-muted, #6b7280));opacity:.6}.code-block code{font-family:inherit;color:inherit;background:none;border:0;padding:0}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:720px){.grid-2{grid-template-columns:1fr}}.table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface)}table{width:100%;border-collapse:collapse;font-size:14px}thead{background:var(--color-surface-raised, var(--color-surface, var(--color-surface-elevated, #1b1f2a)))}th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--color-border);vertical-align:top}th{font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted, var(--color-muted, #6b7280))}tr:last-child td{border-bottom:none}tbody tr:hover{background:#5b8eff0d}.ordered,.checks{padding-left:22px;margin:0 0 14px}.ordered li,.checks li{margin:6px 0}.checks{list-style:none;padding-left:0}.checks li{position:relative;padding-left:24px}.checks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--color-info);font-weight:700}.boxed{background:color-mix(in oklab,var(--color-background) 82%,transparent);border:var(--border-width-thin, 1px) solid var(--color-border);border-radius:var(--radius-l, 14px);padding:28px clamp(20px,4vw,36px);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}#data-background{padding:56px 0;border-radius:16px;overflow:hidden}