:root{color-scheme:dark;--bg: #09090b;--panel: #0c0c0e;--line: #1b1b1f;--text: #ededf0;--dim: #8a8a93;--accent: #8b5cf6;--pad-x: clamp(20px, 4vw, 56px)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}body{color:var(--text);font:15px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}.mode-link{font-size:13px;color:var(--dim);text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:6px 10px;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}.mode-link:hover{color:var(--text);border-color:#2c2c33;background:#ffffff0d}.content{padding:clamp(20px,3vw,36px) var(--pad-x) clamp(20px,4vw,56px)}.gallery-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;margin:0 0 32px}.tag{color:var(--dim);margin:0;max-width:64ch;flex:1 1 360px}.tag code{font-size:12px;background:#ffffff0d;padding:1px 5px;border-radius:5px}.tag a{color:var(--text)}.family{margin-bottom:44px;scroll-margin-top:88px}.family-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}.family-head h2{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0;white-space:nowrap}.family-head .rule{flex:1;height:1px;background:var(--line)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:26px}.tile{border-radius:14px;background:var(--panel);transition:transform .2s}.tile:hover{transform:translateY(-2px)}.tile.menu-open{position:relative;z-index:20}.tile.failed .stage:after{content:"shader failed to compile";position:absolute;inset:0;display:grid;place-items:center;color:#f87171;font:12px ui-monospace,monospace}.stage{position:relative;display:block;aspect-ratio:16 / 10;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;background-color:#0a0a0b;cursor:pointer}.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .45s ease}.stage canvas.live{opacity:1}.bar{display:flex;align-items:center;gap:12px;padding:12px 14px}.label{display:flex;flex-direction:column;min-width:0}.name{font-weight:600;color:inherit;text-decoration:none}.name:hover{text-decoration:underline;text-underline-offset:3px}.desc{color:var(--dim);font-size:12px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.pop{position:absolute;z-index:200;min-width:160px;padding:6px;background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-line);border-radius:12px;box-shadow:0 16px 40px #00000080}.pop[hidden]{display:none}.actions{display:flex;align-items:center;gap:4px;margin-left:auto}.tile-theme{position:relative;display:flex}.tile-theme-trigger{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s}.tile-theme-trigger:hover,.tile.menu-open .tile-theme-trigger{background:#ffffff0d;border-color:var(--line)}.tile-theme-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.18)}.tile-theme-menu{top:calc(100% + 6px);right:0;max-height:min(60vh,460px);overflow-y:auto}.menu{position:relative}.menu-trigger{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;color:var(--dim);background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}.menu-trigger:hover,.tile.menu-open .menu-trigger{color:var(--text);background:#ffffff0d;border-color:var(--line)}.menu-pop{top:calc(100% + 6px);right:0}.menu-item{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--text);background:transparent;border:0;border-radius:8px;padding:7px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}.menu-item:hover{background:#ffffff12}.theme-menu{top:calc(100% + 8px);right:0;max-height:min(60vh,460px);overflow-y:auto}.theme-option,.tile-theme-option{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--text);background:transparent;border:0;border-radius:8px;padding:6px 9px;cursor:pointer;text-transform:capitalize}.theme-option:hover,.tile-theme-option:hover{background:#ffffff12}.theme-option.active,.tile-theme-option.active{color:#fff}.theme-option.active .swatch,.tile-theme-option.active .swatch{box-shadow:0 0 0 2px var(--glass-bg),0 0 0 3px var(--accent)}.theme-option .swatch,.tile-theme-option .swatch{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.18);flex:none}.filterbar{margin:0}.filter-head{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-left:auto}.tag-search{font:inherit;font-size:13px;color:var(--text);background:#ffffff0a;border:1px solid var(--line);border-radius:9px;padding:7px 11px;width:min(220px,50vw);outline:none;transition:border-color .15s}.tag-search:focus{border-color:#2c2c33}.tag-search::placeholder{color:var(--dim)}.filter-status{color:var(--dim);font-size:13px}.filter-clear{font:inherit;font-size:12px;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;transition:border-color .15s,background .15s}.filter-clear[hidden]{display:none}.filter-clear:hover{border-color:#2c2c33;background:#ffffff0d}.active-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.active-tags[hidden]{display:none}.active-chip{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:12px;color:#fff;background:color-mix(in srgb,var(--accent) 28%,transparent);border:1px solid var(--accent);border-radius:999px;padding:4px 10px;cursor:pointer}.active-chip .x{font-size:14px;line-height:1;opacity:.85}.tag-toggle{font:inherit;font-size:12px;color:var(--text);background:transparent;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}.tag-toggle:hover{border-color:#2c2c33;background:#ffffff0d}.tag-cloud{display:flex;flex-wrap:wrap;gap:6px;padding:2px;margin-bottom:24px}.tag-cloud[hidden]{display:none}.cloud-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;color:var(--dim);background:#ffffff08;border:1px solid var(--line);border-radius:999px;padding:4px 9px;cursor:pointer;transition:color .12s,border-color .12s,background .12s}.cloud-chip:hover{color:var(--text);border-color:#2c2c33}.cloud-chip .n{font-size:10px;opacity:.6}.cloud-chip.on{color:#fff;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 20%,transparent)}.tags{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 12px}.tag-chip{font:inherit;font-size:11px;color:var(--dim);background:#ffffff08;border:1px solid var(--line);border-radius:6px;padding:2px 7px;cursor:pointer;transition:color .12s,border-color .12s}.tag-chip:hover{color:var(--text);border-color:#2c2c33}.tag-chip.on{color:#fff;border-color:var(--accent)}.tile.hidden,.family.hidden{display:none}.name:focus-visible,.tag-search:focus-visible,.filter-clear:focus-visible,.tag-toggle:focus-visible,.active-chip:focus-visible,.cloud-chip:focus-visible,.tag-chip:focus-visible,.mode-link:focus-visible,[data-pop-trigger]:focus-visible,.tile-theme-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}@media(max-width:760px){.grid{grid-template-columns:1fr;gap:18px}.gallery-head{gap:12px 16px;margin-bottom:24px}.tag{flex-basis:100%;max-width:none}.filter-head{width:100%;justify-content:flex-start}.tag-search{width:100%;flex:1 1 160px}}@media(max-width:480px){.family{margin-bottom:32px}.family-head{gap:12px;margin-bottom:14px}.bar{padding:10px 12px;gap:10px}.stage{aspect-ratio:16 / 11}.tag-cloud{margin-bottom:18px}}