*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #040010;--surface: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .1);--border-hover: rgba(255, 255, 255, .22);--text: #f0f0ff;--text-muted: rgba(240, 240, 255, .45);--purple: #a855f7;--blue: #3b82f6;--teal: #14b8a6;--radius: 16px;--font: "Inter", system-ui, sans-serif;--mono: "JetBrains Mono", ui-monospace, monospace}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100dvh}h1,h2,h3{line-height:1.15}code,pre{font-family:var(--mono)}.container{max-width:1280px;margin:0 auto;padding:0 2rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--border);background:#040010b3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:1.2rem;padding-bottom:1.2rem}.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--text)}.logo-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;font-size:1rem;box-shadow:0 0 20px #a855f766}.logo-name{font-weight:800;font-size:1.1rem}.logo-version{font-size:.65rem;padding:2px 8px;border-radius:99px;background:#a855f726;border:1px solid rgba(168,85,247,.3);color:#c084fc;font-family:var(--mono)}.nav-links{display:flex;gap:.75rem;align-items:center}.nav-link{font-size:.85rem;color:var(--text-muted);text-decoration:none;padding:.4rem .9rem;border-radius:8px;border:1px solid transparent;transition:color .2s,background .2s,border-color .2s}.nav-link:hover{color:var(--text);background:var(--surface);border-color:var(--border)}.nav-link.npm{font-family:var(--mono);background:var(--surface);border-color:var(--border)}.hero{padding:5rem 0 3rem;text-align:center}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:99px;border:1px solid rgba(168,85,247,.3);background:#a855f71a;color:#c084fc;font-size:.8rem;margin-bottom:1.75rem}.hero h1{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;background:linear-gradient(135deg,#fff 30%,#c084fc 65%,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1.25rem}.hero p{font-size:1.15rem;color:var(--text-muted);max-width:540px;margin:0 auto 2rem}.hero-stats{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.stat-card{padding:.9rem 1.75rem;border-radius:12px;background:var(--surface);border:1px solid var(--border);text-align:center}.stat-card .stat-n{font-size:1.75rem;font-weight:900;color:var(--text)}.stat-card .stat-l{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.gallery-section{padding:0 0 4rem}.gallery-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.25rem}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}.preset-card{position:relative;height:220px;border-radius:var(--radius);overflow:hidden;cursor:pointer;border:1px solid var(--border);transition:border-color .25s,transform .25s,box-shadow .25s}.preset-card:hover,.preset-card.active{border-color:var(--border-hover);transform:scale(1.025);box-shadow:0 20px 60px #00000080;z-index:2}.card-bg{position:absolute;inset:0}.card-dots{position:absolute;inset:0;opacity:.18;background-image:radial-gradient(circle,currentColor 1px,transparent 1px);background-size:18px 18px;transition:opacity .25s}.preset-card.active .card-dots{opacity:0}.card-canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s}.card-fade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,0,16,.85) 0%,rgba(4,0,16,.1) 55%,transparent 100%);pointer-events:none}.card-info{position:absolute;bottom:0;left:0;right:0;padding:1rem;pointer-events:none}.card-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.card-emoji{font-size:1.15rem}.card-name{font-weight:700;font-size:.95rem}.card-desc{font-size:.72rem;color:var(--text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-tags{position:absolute;top:.75rem;left:.75rem;display:flex;flex-direction:column;gap:.3rem;pointer-events:none;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s}.preset-card:hover .card-tags,.preset-card.active .card-tags{opacity:1;transform:translateY(0)}.tag{font-size:.62rem;font-family:var(--mono);padding:2px 8px;border-radius:99px;border:1px solid;white-space:nowrap}.tag-physics{background:#a855f740;border-color:#a855f766;color:#d8b4fe}.tag-renderer{background:#3b82f640;border-color:#3b82f666;color:#93c5fd}.tag-interaction{background:#14b8a640;border-color:#14b8a666;color:#5eead4}.tag-badge{background:#fbbf2433;border-color:#fbbf2466;color:#fde68a;font-family:var(--mono);font-size:.6rem;padding:2px 8px;border-radius:99px;border:1px solid;position:absolute;top:.75rem;right:.75rem;pointer-events:none;max-width:55%;text-align:right}.maximize-icon{position:absolute;top:.75rem;right:.75rem;color:#ffffff4d;font-size:.75rem;opacity:0;transition:opacity .2s;pointer-events:none}.preset-card:hover .maximize-icon,.preset-card.active .maximize-icon{opacity:1}.card-docs-hint{position:absolute;bottom:3.5rem;right:.75rem;font-size:.68rem;color:#ffffff73;background:#0006;padding:3px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.1);pointer-events:none;opacity:0;transition:opacity .2s}.card-docs-hint.visible{opacity:1}.modal-backdrop{position:fixed;inset:0;z-index:50;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-canvas{position:absolute;inset:0;width:100%;height:100%}.modal-drawer{position:absolute;top:0;right:0;bottom:0;width:min(480px,100%);background:#060214bf;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:0;overflow-y:auto;animation:slideIn .25s cubic-bezier(.16,1,.3,1);padding:2rem 1.75rem}@keyframes slideIn{0%{transform:translate(40px);opacity:0}to{transform:translate(0);opacity:1}}.modal-drawer::-webkit-scrollbar{width:4px}.modal-drawer::-webkit-scrollbar-track{background:transparent}.modal-drawer::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}.drawer-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.75rem}.drawer-title{display:flex;align-items:center;gap:.6rem}.drawer-emoji{font-size:1.75rem}.drawer-name{font-size:1.75rem;font-weight:900}.drawer-desc{font-size:.9rem;color:var(--text-muted);line-height:1.6;margin-bottom:1.25rem}.drawer-plugins{display:flex;flex-direction:column;gap:.4rem;background:#ffffff08;border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;margin-bottom:1.5rem}.drawer-plugin-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem}.dp-icon{font-size:.9rem;flex-shrink:0}.dp-kind{color:var(--text-muted);width:70px;flex-shrink:0;font-size:.78rem}.dp-name{font-family:var(--mono);font-size:.8rem;font-weight:500}.drawer-section{margin-bottom:1.5rem}.tabs{display:flex;gap:.25rem;margin-bottom:.5rem;background:#ffffff0a;border-radius:8px;padding:3px;border:1px solid var(--border)}.tab{flex:1;padding:.4rem .75rem;font-size:.72rem;border:none;border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font)}.tab:hover{color:var(--text);background:#ffffff0d}.tab.tab-active{background:#ffffff1a;color:var(--text);font-weight:600}.drawer-code pre{max-height:260px;overflow-y:auto}.drawer-footer{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:.75rem}.install-cmd{font-family:var(--mono);font-size:.78rem;background:#a855f71f;border:1px solid rgba(168,85,247,.25);color:#c084fc;padding:.35rem .85rem;border-radius:8px}.drawer-gh-link{font-size:.8rem;color:var(--text-muted);text-decoration:none;transition:color .2s;white-space:nowrap}.drawer-gh-link:hover{color:var(--text)}.modal-close{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#ffffff0f;border:1px solid rgba(255,255,255,.15);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center;transition:background .2s}.modal-close:hover{background:#ffffff24}.api-section{border-top:1px solid var(--border);padding:4rem 0}.api-section h2{font-size:1.4rem;font-weight:700;margin-bottom:1.5rem}.code-blocks{display:flex;flex-direction:column;gap:1rem;max-width:720px}.code-block{border-radius:12px;overflow:hidden;background:var(--surface);border:1px solid var(--border)}.code-header{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-bottom:1px solid var(--border);background:#ffffff08}.dot{width:10px;height:10px;border-radius:50%}.dot-r{background:#ff5f57b3}.dot-y{background:#ffbd2eb3}.dot-g{background:#27c93fb3}.code-label{margin-left:.5rem;font-size:.75rem;color:var(--text-muted);font-family:var(--mono)}.code-block pre{padding:1.25rem;font-size:.83rem;overflow-x:auto;color:#f0f0ffcc;line-height:1.65}.site-footer{border-top:1px solid var(--border);padding:2rem 0;text-align:center;color:var(--text-muted);font-size:.85rem}.site-footer a{color:var(--purple);text-decoration:none}.site-footer a:hover{text-decoration:underline}