:root{--bg: #0b0e11;--panel: #12161b;--panel2: #171c22;--ink: #e8ecef;--mut: #96a1a9;--line: rgba(255, 255, 255, .09);--accent: #e8b34b;--mono: "JetBrains Mono", ui-monospace, monospace}[data-theme=light]{--bg: #f4f2ec;--panel: #fdfcf9;--panel2: #eceae2;--ink: #16191c;--mut: #5b636a;--line: rgba(10, 14, 20, .12);--accent: #b9821e}*{box-sizing:border-box;margin:0}html,body{height:100%}body{background:var(--bg);color:var(--ink);font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.hd{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:14px 28px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.brand{font-weight:800;font-size:21px;letter-spacing:-.5px}.brand-dot{color:var(--accent)}.hd-tag{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut)}.hd-right{margin-left:auto;display:flex;align-items:center;gap:10px}.hd-count{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}.hd-btn{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-size:13px;transition:border-color .15s,background .15s}.hd-btn:hover{border-color:var(--accent)}.wrap{max-width:1180px;margin:0 auto;padding:40px 28px 80px}.hero{padding:34px 0 10px;max-width:720px}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--accent);font-weight:700}.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.06;letter-spacing:-1.5px;margin:12px 0 18px;font-weight:800}.accent{color:var(--accent)}.lede{color:var(--mut);font-size:17px}.filters{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:34px 0 22px}.search{flex:1 1 260px;max-width:380px;padding:11px 16px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14.5px;outline:none}.search:focus{border-color:var(--accent)}.search::placeholder{color:var(--mut)}.tags{display:flex;gap:8px;flex-wrap:wrap}.tag{padding:7px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--mut);transition:all .15s}.tag:hover{color:var(--ink);border-color:var(--mut)}.tag.on{color:var(--bg);background:var(--ink);border-color:var(--ink);font-weight:600}.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}.card{display:block;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 18px 40px #00000047}.card-stage{position:relative;height:216px;overflow:hidden;background:var(--panel2)}.card-live{position:absolute;top:0;right:0;bottom:0;left:0}.card-poster{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 20% 0%,hsla(var(--h),55%,52%,.2),transparent 55%),radial-gradient(120% 110% at 90% 100%,hsla(calc(var(--h) + 40),60%,45%,.14),transparent 60%)}.card-glyph{font-size:64px;opacity:.85;color:hsl(var(--h),55%,62%)}.card-wake{position:absolute;bottom:12px;left:50%;transform:translate(-50%);font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mut);opacity:.7}.card-meta{display:flex;align-items:center;gap:10px;padding:16px 18px 2px}.card-meta h3{font-size:17px;letter-spacing:-.2px}.card-blurb{padding:4px 18px 18px;color:var(--mut);font-size:14px}.empty{color:var(--mut);padding:40px 0}.chip{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}.chip-webgl{color:#7ab8ff;border-color:color-mix(in srgb,#7ab8ff 40%,transparent)}.chip-canvas{color:#7fe0a8;border-color:color-mix(in srgb,#7fe0a8 40%,transparent)}.chip-svg{color:#e8b34b;border-color:color-mix(in srgb,#e8b34b 40%,transparent)}.chip-dom{color:#d49bf2;border-color:color-mix(in srgb,#d49bf2 40%,transparent)}.chip-deps{text-transform:none;letter-spacing:.4px}.crumbs{display:flex;justify-content:space-between;gap:14px;font-size:14px;color:var(--mut);margin-bottom:30px;flex-wrap:wrap}.crumbs a:hover{color:var(--ink)}.crumbs-side{display:flex;gap:22px}.c-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.c-head h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1px;font-weight:800}.c-detail{max-width:720px;color:var(--mut);margin:14px 0 6px}.c-derived{font-size:13.5px;color:var(--mut);margin-bottom:22px}.c-derived a{color:var(--accent)}.stage{position:relative;height:min(60vh,540px);border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel2)}.stage-live{position:absolute;top:0;right:0;bottom:0;left:0}.variants{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 34px}.code{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}.code-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:0 10px;flex-wrap:wrap}.code-tabs button,.code-acts button{padding:11px 14px;font-size:13px;font-family:var(--mono);color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}.code-tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}.code-acts button:hover{color:var(--accent)}.code pre{max-height:480px;overflow:auto;padding:18px 20px}.code code{font:12.5px/1.65 var(--mono);color:var(--ink)}.ft{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:26px 28px 46px;border-top:1px solid var(--line);color:var(--mut);font-size:13.5px}.ft a{color:var(--accent)}@media(max-width:720px){.hd{padding:12px 16px;gap:10px}.hd-tag,.hd-count,.hd-home{display:none}.wrap{padding:24px 16px 60px}.stage{height:62vw;min-height:300px}.code pre{max-height:380px}}