:root{--bg: #0f0f11;--surface: #1a1a1e;--surface-hover: #232329;--border: #2a2a30;--text: #f0f0f5;--text-muted: #8b8b96;--accent: #00d4ff;--danger: #ff6b6b;--radius: 12px;--button-bg-opacity: .3}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;height:100%;-webkit-tap-highlight-color:transparent}#root{min-height:100%}.app{display:flex;flex-direction:column;min-height:100vh;padding:16px;gap:16px}.top-bar{display:flex;flex-direction:column;gap:12px;position:sticky;top:0;background:var(--bg);z-index:10;padding-bottom:8px}.top-bar-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.title-row{justify-content:center;position:relative}.title-row .install-button{position:absolute;right:0}.title-block{display:flex;flex-direction:column;align-items:center;gap:2px}.title{margin:0;font-size:1.5rem;font-weight:700;text-align:center}.cache-label{margin:0;font-size:.75rem;color:var(--text-muted);text-align:center}.search-bar{position:relative;width:100%}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.search-bar input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:12px 12px 12px 40px;font-size:1rem;outline:none}.search-bar input:focus{border-color:var(--accent)}.stop-button{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--danger);color:#fff;border:none;border-radius:var(--radius);padding:12px 16px;font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s ease}.stop-button:disabled{opacity:.4;cursor:not-allowed}.install-button{display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-size:.95rem;cursor:pointer}.install-button:hover{background:var(--surface-hover)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:16px;flex:1}@media (min-width: 768px){.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}.sound-button{aspect-ratio:1;border:none;border-radius:var(--radius);background:var(--surface);color:var(--text);display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:clamp(.6rem,2.5vw,.85rem);font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 2px var(--border);transition:transform .1s ease,box-shadow .15s ease,background .15s ease;position:relative;overflow:hidden}.sound-button:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);opacity:0;transition:opacity .15s ease;pointer-events:none}.sound-button.pressed{transform:scale(.96);box-shadow:inset 0 0 0 3px var(--accent)}.sound-button.pressed:before{opacity:.15}.sound-button:hover{background:var(--surface-hover)}.sound-name{position:relative;z-index:1;word-break:break-word}.sound-bg{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:var(--button-bg-opacity)}.sound-bg-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}.sound-bg-emoji{font-size:3.5rem;line-height:1;-webkit-user-select:none;user-select:none}.empty{grid-column:1 / -1;color:var(--text-muted);text-align:center;padding:40px}.tooltip{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.85rem;z-index:50}.tooltip-arrow{fill:var(--border)}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;z-index:100;animation:fadeIn .15s ease}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;width:90%;max-width:360px;z-index:101;animation:fadeIn .15s ease}.dialog-title{margin:0 0 8px;font-size:1.25rem}.dialog-description{margin:0 0 20px;color:var(--text-muted);font-size:.95rem}.dialog-actions{display:flex;gap:12px;justify-content:flex-end}.dialog-button{background:transparent;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 16px;cursor:pointer}.dialog-button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}.dialog-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-muted);cursor:pointer}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.preload-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;z-index:200;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.preload-overlay.fade-in{animation:fadeIn .2s ease forwards}.preload-overlay.fade-out{animation:fadeOut .35s ease forwards}.preload-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:16px}.preload-card.slide-in{animation:slideUp .25s cubic-bezier(.34,1.56,.64,1) forwards}.preload-card.slide-out{animation:slideDown .3s ease forwards}.preload-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .75s linear infinite}.preload-label{margin:0;font-size:.95rem;color:var(--text-muted)}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideDown{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.97)}}@keyframes spin{to{transform:rotate(360deg)}}