*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0a;--surface:#111;--surface-hover:#1a1a1a;--border:#222;--border-hover:#333;--text:#e0e0e0;--text-dim:#999;--muted:#555;--accent:#c8ff00;--accent-dim:#c8ff0014;--accent-glow:#c8ff0026;--row-hover:#161616;--row-active:#1c1c1c;--shadow:#0006;--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--transition-fast:.1s;--transition-normal:.15s;--transition-slow:.25s;--header-height:auto;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px)}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;scroll-behavior:smooth;font-size:14px}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-tap-highlight-color:transparent;touch-action:manipulation;flex-direction:column;min-height:100vh;line-height:1.5;display:flex}header{padding:28px 24px 20px;padding-top:calc(20px + var(--safe-area-top));border-bottom:1px solid var(--border);background:var(--bg);-webkit-backdrop-filter:blur(12px);z-index:10;transition:box-shadow var(--transition-normal);position:sticky;top:0}header:focus-within{box-shadow:0 1px 0 var(--border)}.header-top{align-items:baseline;gap:12px;margin-bottom:16px;display:flex}h1{letter-spacing:-.01em;color:var(--text);font-size:1.15rem;font-weight:600}#count{color:var(--muted);font-size:.78rem}.search-wrap{margin-bottom:14px;position:relative}#search{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text);transition:border-color var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);outline:none;padding:9px 36px 9px 12px;font-size:.95rem}#search::placeholder{color:var(--muted)}#search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim);background:var(--surface-hover)}#search:hover:not(:focus){border-color:var(--border-hover)}.search-clear{color:var(--muted);cursor:pointer;opacity:0;transition:opacity var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);pointer-events:none;border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex;position:absolute;top:50%;right:10px;transform:translateY(-50%)}#search:not(:placeholder-shown)~.search-clear{opacity:1;pointer-events:auto}.search-clear:hover{color:var(--text);transform:translateY(-50%)scale(1.1)}.search-clear:active{transform:translateY(-50%)scale(.95)}.filters{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.filter-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);letter-spacing:.04em;cursor:pointer;text-transform:uppercase;transition:all var(--transition-fast);white-space:nowrap;padding:5px 10px;font-size:.72rem;font-weight:500;position:relative;overflow:hidden}.filter-btn:before{content:"";background:var(--accent);opacity:0;transition:opacity var(--transition-fast);position:absolute;inset:0}.filter-btn:hover{border-color:var(--border-hover);color:var(--text);background:var(--surface-hover)}.filter-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.filter-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}.filter-btn:active{transform:scale(.97)}main{flex:1;padding:0 24px 40px}#list{margin-top:12px}.kit-row{border-bottom:1px solid var(--border);color:inherit;transition:background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border-radius:var(--radius-sm);cursor:pointer;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:0 -6px;padding:11px 6px;text-decoration:none;animation:.18s both fadeIn;display:grid;position:relative}.kit-row:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-dim), transparent);opacity:0;transition:opacity var(--transition-normal);pointer-events:none;position:absolute;inset:0}.kit-row:hover{background:var(--row-hover)}.kit-row:hover:before{opacity:1}.kit-row:active{background:var(--row-active);transform:scale(.995)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.kit-left{min-width:0}.kit-title{color:var(--text);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;font-size:.88rem;font-weight:500;overflow:hidden}.kit-desc{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.kit-right{flex-shrink:0;align-items:center;gap:7px;display:flex}.badge{letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-sm);white-space:nowrap;transition:all var(--transition-fast);padding:2px 7px;font-size:.65rem;font-weight:600}.badge-cat{background:var(--surface);color:var(--text-dim);border:1px solid var(--border)}html.dark-mode .badge-cat:hover{background:#222;border-color:#333}html.light-mode .badge-cat:hover{background:#e8e8e8;border-color:#ddd}html.dark-mode .badge-src-DRUM_KITS{color:#980;background:#1a1500;border:1px solid #332b00}html.dark-mode .badge-src-KITS4BEATS{color:#068;background:#001520;border:1px solid #023}html.dark-mode .badge-src-REDDIT_KITS{color:#c40;background:#1a0a00;border:1px solid #331a00}html.dark-mode .badge-src-GMEH{color:#7c4dff;background:#0d001a;border:1px solid #1e0040}html.dark-mode .badge-src-DRUM_KITS:hover{background:#221a00;border-color:#443800}html.dark-mode .badge-src-KITS4BEATS:hover{background:#001a25;border-color:#034}html.dark-mode .badge-src-REDDIT_KITS:hover{background:#220a00;border-color:#420}html.dark-mode .badge-src-GMEH:hover{background:#102;border-color:#2a0055}html.light-mode .badge-src-DRUM_KITS{color:#970;background:#fffae6;border:1px solid #ebe0cc}html.light-mode .badge-src-KITS4BEATS{color:#058;background:#e6f3ff;border:1px solid #cce0f0}html.light-mode .badge-src-REDDIT_KITS{color:#c40;background:#fff0e6;border:1px solid #f0e0cc}html.light-mode .badge-src-GMEH{color:#6a3dd0;background:#f0e6ff;border:1px solid #e0d0f0}html.light-mode .badge-src-DRUM_KITS:hover{background:#fff3cc;border-color:#ddd800}html.light-mode .badge-src-KITS4BEATS:hover{background:#cce0f0;border-color:#08c}html.light-mode .badge-src-REDDIT_KITS:hover{background:#ffe0cc;border-color:#e60}html.light-mode .badge-src-GMEH:hover{background:#dcd0f0;border-color:#86e}.open-icon{color:var(--muted);transition:color var(--transition-fast);font-size:.85rem}.kit-row:hover .open-icon{color:var(--accent)}.fave-btn{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex}.fave-btn:hover{color:var(--accent)}.fave-btn.active{color:#f44}.fave-btn.active:hover{color:#f66}.open-link{color:var(--muted);border-radius:var(--radius-sm);transition:all var(--transition-fast);justify-content:center;align-items:center;padding:4px;display:flex}.kit-row:hover .open-link{color:var(--accent)}#empty{text-align:center;color:var(--muted);padding:60px 0;font-size:.85rem;display:none}#load-more{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--muted);cursor:pointer;transition:all var(--transition-fast);width:100%;font-size:.82rem;font-family:var(--font-sans);margin:20px auto 0;padding:9px 20px;display:none;position:relative;overflow:hidden}#load-more:before{content:"";background:linear-gradient(90deg, transparent, var(--accent-dim), transparent);transition:transform .4s;position:absolute;inset:0;transform:translate(-100%)}#load-more:hover{border-color:var(--accent);color:var(--text);background:var(--surface-hover)}#load-more:hover:before{transform:translate(100%)}#load-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px}#load-more:active{transform:scale(.98)}#settings-toggle{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;margin-left:auto;padding:6px;display:flex}#settings-toggle:hover{color:var(--text);background:var(--surface)}#analytics-link{align-items:center;gap:6px;text-decoration:none;display:flex}#analytics-link:hover{color:var(--text);background:var(--surface)}.settings-panel{background:var(--bg);border-left:1px solid var(--border);z-index:100;width:320px;max-width:100%;height:100vh;padding:20px;padding-top:calc(20px + var(--safe-area-top));transition:transform var(--transition-normal);box-shadow:-4px 0 20px var(--shadow);position:fixed;top:0;right:0;overflow-y:auto;transform:translate(100%)}.settings-panel:not([hidden]){transform:translate(0)}.settings-panel-overlay{z-index:99;opacity:0;pointer-events:none;transition:opacity var(--transition-normal);background:#00000080;position:fixed;inset:0}html.light-mode .settings-panel-overlay{background:#ffffff80}.settings-panel:not([hidden])~.settings-panel-overlay{opacity:1;pointer-events:auto}.settings-section{margin-bottom:24px}.settings-section h3{letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-size:.7rem;font-weight:600}.settings-close{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;padding:4px;font-size:1.2rem;line-height:1;position:absolute;top:16px;right:16px}.settings-close:hover{color:var(--text);background:var(--surface)}.setting{border-bottom:1px solid var(--border);cursor:pointer;justify-content:space-between;align-items:center;padding:8px 0;display:flex}.setting:last-child{border-bottom:none}.setting span{color:var(--text);font-size:.85rem}.setting select{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;padding:4px 8px;font-size:.8rem}.setting input[type=color]{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:0 0;width:32px;height:24px;padding:0}.setting input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.setting-btn{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);cursor:pointer;transition:all var(--transition-fast);margin-bottom:8px;padding:8px 12px;font-size:.8rem;display:block}.setting-btn:hover{border-color:var(--border-hover);background:var(--surface-hover)}.setting-btn.danger{color:#f66;border-color:#422}.setting-btn.danger:hover{background:#200;border-color:#633}html.light-mode{--bg:#f5f5f5;--surface:#fff;--surface-hover:#eee;--border:#ddd;--border-hover:#ccc;--text:#1a1a1a;--text-dim:#555;--muted:#888;--row-hover:#eaeaea;--row-active:#e0e0e0;--shadow:#0000001a;--accent:#090;--accent-dim:#0099001a;--accent-glow:#0903}html.dark-mode{--bg:#0a0a0a;--surface:#111;--surface-hover:#1a1a1a;--border:#222;--border-hover:#333;--text:#e0e0e0;--text-dim:#999;--muted:#555;--row-hover:#161616;--row-active:#1c1c1c;--shadow:#0006}@media (width<=480px){header{padding:18px 14px 14px}main{padding:0 14px 40px}.badge-src-DRUM_KITS,.badge-src-KITS4BEATS,.badge-src-REDDIT_KITS,.badge-src-GMEH{display:none}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}::-webkit-scrollbar-corner{background:var(--bg)}::selection{background:var(--accent);color:var(--bg)}html.light-mode ::selection{background:var(--accent);color:#000}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes ripple{0%{opacity:1;transform:scale(0)}to{opacity:0;transform:scale(2.5)}}.kit-row[downloading]{pointer-events:none;opacity:.7}.kit-row[downloading]:after{content:"";background:radial-gradient(circle, var(--accent-dim) 0%, transparent 70%);animation:1s ease-in-out infinite pulse;position:absolute;inset:0}body.loading:after{content:"";background:var(--bg);z-index:9999;animation:.2s fadeIn;position:fixed;inset:0}html:has(#search:focus){scroll-padding-top:120px}@media (forced-colors:active){.filter-btn.active,#load-more:focus-visible{outline:2px solid highlight}}