:root{--bg:#0b0c10;--bg-elev:#15171f;--bg-tile:#1b1e2a;--line:#262a38;--text:#f3f4f8;--muted:#8b90a4;--accent:#5b8cff;--radius:16px;--maxw:1180px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,Arial,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(1200px 600px at 12% -10%, #5b8cff2e, transparent 60%), radial-gradient(1000px 500px at 110% 0%, #ff477e29, transparent 55%), var(--bg);color:var(--text)}.app{max-width:var(--maxw);margin:0 auto;padding:28px 20px 96px}.header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px;display:flex}.brand{align-items:center;gap:14px;display:flex}.logo{color:#fff;background:linear-gradient(135deg,#5b8cff,#ff477e);border-radius:14px;place-items:center;width:52px;height:52px;font-size:22px;display:grid;box-shadow:0 8px 26px #5b8cff59}.header h1{letter-spacing:-.02em;margin:0;font-size:30px;font-weight:800}.header h1 .accent{background:linear-gradient(135deg,#5b8cff,#ff477e);color:#0000;-webkit-background-clip:text;background-clip:text}.tagline{color:var(--muted);margin:2px 0 0;font-size:13px}.search{flex:1;align-items:center;gap:12px;min-width:240px;max-width:460px;display:flex}.search input{color:var(--text);background:var(--bg-elev);border:1px solid var(--line);border-radius:999px;outline:none;flex:1;padding:12px 16px;font-size:15px;transition:border-color .15s,box-shadow .15s}.search input:focus{border-color:#5b8cff;box-shadow:0 0 0 3px #5b8cff38}.search .count{color:var(--muted);white-space:nowrap;font-size:12px}.filterbar{flex-wrap:wrap;gap:8px;margin-bottom:22px;display:flex}.chip{color:var(--muted);background:var(--bg-elev);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;transition:color .15s,border-color .15s,background .15s}.chip:hover:not(:disabled){color:var(--text);border-color:#3a4256}.chip.active{color:#fff;background:linear-gradient(135deg,#5b8cff,#ff477e);border-color:#0000}.chip:disabled{opacity:.4;cursor:not-allowed}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;display:grid}.tile{text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;min-height:104px;color:var(--text);background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, var(--bg-tile)), var(--bg-tile));border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));border-radius:var(--radius);justify-content:center;align-items:center;padding:18px 14px;transition:transform 80ms,box-shadow .18s,border-color .18s;display:flex;position:relative;overflow:hidden}.tile:before{content:"";background:var(--accent);opacity:0;transition:opacity .18s;position:absolute;inset:0}.tile:hover{border-color:var(--accent);box-shadow:0 10px 30px color-mix(in srgb, var(--accent) 30%, transparent);transform:translateY(-2px)}.tile:active{transform:translateY(0)scale(.97)}.tile:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.tile-name{word-break:break-word;font-size:15px;font-weight:700;line-height:1.25;position:relative}.tile.is-playing{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent), 0 12px 34px color-mix(in srgb, var(--accent) 45%, transparent);animation:.9s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 0 2px var(--accent), 0 10px 26px color-mix(in srgb, var(--accent) 35%, transparent)}50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent), 0 14px 40px color-mix(in srgb, var(--accent) 55%, transparent)}}.tile.is-highlighted{animation:.6s 4 alternate flash}@keyframes flash{0%{border-color:var(--line)}to{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent)}}.star{width:26px;height:26px;color:var(--muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:8px;place-items:center;padding:0;font-size:15px;line-height:1;transition:opacity .15s,color .15s,transform .1s;display:grid;position:absolute;top:8px;left:8px}.tile:hover .star,.star.on{opacity:1}.star.on{color:#ffd54a}.star:hover{transform:scale(1.18)}.placeholder-badge{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:#00000047;border-radius:6px;padding:2px 6px;font-size:9px;font-weight:700;position:absolute;top:8px;right:8px}.tile-actions{opacity:0;gap:6px;transition:opacity .15s;display:flex;position:absolute;bottom:8px;right:8px}.tile:hover .tile-actions{opacity:1}.action{width:26px;height:26px;color:var(--text);border:1px solid var(--line);cursor:pointer;background:#00000057;border-radius:8px;place-items:center;font-size:12px;text-decoration:none;display:grid}.action:hover{border-color:var(--accent)}.empty{text-align:center;background:var(--bg-elev);border:1px dashed var(--line);border-radius:var(--radius);max-width:520px;margin:60px auto;padding:40px 28px}.empty h2{margin:0 0 10px}.empty p{color:var(--muted);line-height:1.6}.empty .muted{font-size:13px}.empty code{color:var(--text);background:var(--bg-tile);border-radius:6px;padding:2px 6px;font-size:13px}.stop-all{color:#fff;cursor:pointer;opacity:0;pointer-events:none;background:linear-gradient(135deg,#ff477e,#ef476f);border:none;border-radius:999px;padding:13px 20px;font-size:14px;font-weight:700;transition:opacity .2s,transform .2s;position:fixed;bottom:22px;right:22px;transform:translateY(20px);box-shadow:0 10px 30px #ef476f73}.stop-all.show{opacity:1;pointer-events:auto;transform:translateY(0)}.footer{text-align:center;color:var(--muted);margin-top:40px;font-size:12px}.footer kbd{border:1px solid var(--line);background:var(--bg-elev);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px}@media (prefers-reduced-motion:reduce){.tile,.tile.is-playing,.tile.is-highlighted,.stop-all{transition:none;animation:none}}