:root{--bg-elevated:var(--bg-elev);--bg-inset:var(--bg-elev-2);--card:var(--surface-bg);--card-hover:var(--tile-hover-bg);--border:var(--line);--border-strong:color-mix(in oklab, var(--bg), var(--fg) 24%);--text:var(--fg);--text-dim:var(--fg-dim);--text-faint:var(--fg-dimmer);--accent-hover:color-mix(in oklab, var(--accent), var(--fg) 14%);--accent-contrast:var(--accent-fg);--accent-soft:color-mix(in srgb, var(--accent) 12%, transparent);--accent-soft-strong:color-mix(in srgb, var(--accent) 22%, transparent);--success:#17a673;--danger:#e0455f;--shadow-sm:0 1px 2px #1410200f;--shadow-md:0 8px 24px #1410201a;--shadow-lg:0 16px 48px #14102029;--focus-ring:0 0 0 3px var(--accent-soft-strong);--sans:var(--font-body);--mono:var(--font-mono);font-family:var(--sans);color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:root[data-mode=dark]{--success:#35d399;--danger:#ff6b83;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 8px 24px #00000073;--shadow-lg:0 20px 60px #0000008c}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{color:var(--text)}#root{flex-direction:column;min-height:100svh;display:flex}button,input{font-family:inherit}::selection{background:var(--accent-soft-strong)}:focus-visible{box-shadow:var(--focus-ring);border-radius:8px;outline:none}.app{flex-direction:column;min-height:100svh;display:flex;position:relative}.app.drag-active:after{content:"";pointer-events:none;border:3px dashed var(--accent);background:var(--accent-soft);z-index:40;position:fixed;inset:0}.drop-banner{z-index:41;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.drop-banner-card{background:var(--bg-elevated);border:2px solid var(--accent);color:var(--text);box-shadow:var(--shadow-lg);border-radius:20px;padding:28px 40px;font-size:20px;font-weight:600}.toolbar{z-index:20;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 24px;display:flex;position:sticky;top:0}.toolbar-identity{align-items:center;gap:10px;min-width:0;display:flex}.toolbar-logo{background:linear-gradient(135deg, var(--accent), #ff7ac9);color:#fff;border-radius:9px;flex:none;justify-content:center;align-items:center;width:30px;height:30px;display:flex}.toolbar-title{flex-direction:column;min-width:0;line-height:1.25;display:flex}.toolbar-title strong{white-space:nowrap;text-overflow:ellipsis;max-width:32ch;font-size:14.5px;font-weight:600;overflow:hidden}.toolbar-title span{color:var(--text-faint);font-size:12px}.toolbar-search{flex:200px;min-width:140px;max-width:320px;position:relative}.toolbar-search input{border:1px solid var(--border);background:var(--bg-inset);width:100%;color:var(--text);border-radius:10px;padding:8px 12px 8px 32px;font-size:13.5px}.toolbar-search input::placeholder{color:var(--text-faint)}.toolbar-search svg{color:var(--text-faint);position:absolute;top:50%;left:10px;transform:translateY(-50%)}.toolbar-groups{scrollbar-width:none;flex:auto;gap:6px;min-width:0;display:flex;overflow-x:auto}.toolbar-groups::-webkit-scrollbar{display:none}.chip{border-radius:var(--btn-radius);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow);clip-path:var(--btn-clip);cursor:pointer;white-space:nowrap;transition:all .18s var(--ease), transform .3s var(--spring);flex:none;padding:6px 12px;font-size:12.5px;font-weight:500}.chip:hover{border-color:var(--btn-hover-border);background:var(--btn-hover-bg);color:var(--btn-hover-fg);box-shadow:var(--btn-hover-shadow)}.chip:active,.btn:active,.icon-btn:active{transform:var(--btn-active-transform)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.toolbar-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.volume-control{color:var(--text-dim);background:var(--bg-inset);border:1px solid var(--border);border-radius:10px;align-items:center;gap:6px;padding:6px 10px;display:flex}.volume-control input[type=range]{width:80px;accent-color:var(--accent)}.icon-btn{border-radius:min(var(--btn-radius), 10px);border:1px solid var(--btn-border);background:var(--btn-bg);width:34px;height:34px;color:var(--btn-fg);box-shadow:var(--btn-shadow);clip-path:var(--btn-clip);cursor:pointer;transition:all .18s var(--ease), transform .3s var(--spring);justify-content:center;align-items:center;display:inline-flex}.icon-btn:hover{color:var(--btn-hover-fg);border-color:var(--btn-hover-border);background:var(--btn-hover-bg);box-shadow:var(--btn-hover-shadow)}.btn{border-radius:min(var(--btn-radius), 10px);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--btn-shadow);clip-path:var(--btn-clip);cursor:pointer;transition:all .18s var(--ease), transform .3s var(--spring);white-space:nowrap;align-items:center;gap:6px;padding:7px 14px;font-size:13px;font-weight:500;display:inline-flex}.btn:hover{border-color:var(--btn-hover-border);background:var(--btn-hover-bg);color:var(--btn-hover-fg);box-shadow:var(--btn-hover-shadow)}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-danger-ghost{color:var(--danger)}.upload-screen{flex:1;justify-content:center;align-items:center;padding:32px 20px;display:flex}.upload-card{border:2px dashed var(--border-strong);border-radius:calc(var(--radius) + 8px);text-align:center;background:var(--surface-bg);width:min(560px,100%);-webkit-backdrop-filter:var(--surface-blur);backdrop-filter:var(--surface-blur);box-shadow:var(--shadow-md);padding:48px 36px;transition:border-color .15s,box-shadow .15s}.upload-card.active{border-color:var(--accent);box-shadow:var(--focus-ring), var(--shadow-md)}.upload-icon{background:linear-gradient(135deg, var(--accent), #ff7ac9);color:#fff;border-radius:18px;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 20px;display:flex}.upload-card h1{letter-spacing:-.2px;margin:0 0 8px;font-size:22px;font-weight:650}.upload-card p{color:var(--text-dim);margin:0 0 24px;font-size:14.5px;line-height:1.55}.upload-actions{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:20px;display:flex}.upload-hint{color:var(--text-faint);font-size:12.5px;line-height:1.6}.upload-hint code{font-family:var(--mono);background:var(--bg-inset);border-radius:5px;padding:1px 5px;font-size:12px}.upload-error{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);text-align:left;border-radius:10px;margin-top:18px;padding:10px 14px;font-size:13px}.upload-loading{color:var(--text-dim);flex-direction:column;align-items:center;gap:14px;font-size:14px;display:flex}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.content{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:20px 24px 60px}.group-section{margin-bottom:30px}.group-heading{align-items:center;gap:7px;margin:0 0 12px;padding-left:2px;display:flex}.group-icon{justify-content:center;align-items:center;display:inline-flex}.group-heading h2{color:var(--text);text-transform:uppercase;letter-spacing:.4px;margin:0;font-size:14px;font-weight:650}.group-heading .count{color:var(--text-faint);font-size:12.5px;font-weight:500}.sound-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;display:grid}.empty-state{text-align:center;color:var(--text-faint);flex-direction:column;align-items:center;gap:10px;padding:80px 20px;font-size:14px;display:flex}.empty-state-icon{opacity:.5}.warnings{background:color-mix(in srgb, var(--danger) 10%, transparent);color:var(--danger);border-radius:10px;margin:0 0 18px;padding:10px 14px;font-size:12.5px;line-height:1.6}.sound-card{color:var(--text);font:inherit;cursor:pointer;text-align:left;flex-direction:column;gap:10px;padding:14px;display:flex;position:relative;overflow:hidden}.sound-card[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.sound-card-top{justify-content:space-between;align-items:flex-start;gap:8px;display:flex}.sound-card-icon{background:var(--bg-inset);width:36px;height:36px;color:var(--card-accent,var(--text-dim));border-radius:11px;flex:none;justify-content:center;align-items:center;transition:all .15s;display:flex}.sound-card:hover .sound-card-icon:not(.loading){background:color-mix(in srgb, var(--card-accent,var(--border-strong)) 16%, var(--bg-inset))}.sound-card[aria-pressed=true] .sound-card-icon{background:var(--accent);color:var(--accent-contrast)}.sound-card-icon.loading{animation:1s ease-in-out infinite pulse-op}@keyframes pulse-op{0%,to{opacity:.4}50%{opacity:1}}.sound-card-badges{color:var(--text-faint);flex-direction:column;align-items:flex-end;gap:4px;font-size:10.5px;display:flex}.badge-loop{color:var(--accent);align-items:center;gap:3px;font-weight:600;display:inline-flex}.sound-card-name{color:var(--text);word-break:break-word;font-size:13.5px;font-weight:600;line-height:1.3}.sound-card-meta{color:var(--text-faint);justify-content:space-between;gap:6px;font-size:11.5px;display:flex}.progress-track{background:var(--bg-inset);border-radius:2px;height:3px;margin-top:2px;overflow:hidden}.progress-fill{background:var(--accent);transform-origin:0;width:0%;height:100%}.progress-fill.playing{animation:linear forwards fill-bar}.progress-fill.looping{width:100%;animation:1.4s ease-in-out infinite pulse-bar}@keyframes fill-bar{0%{width:0%}to{width:100%}}@keyframes pulse-bar{0%,to{opacity:.35}50%{opacity:1}}.app-footer{text-align:center;color:var(--text-faint);padding:18px;font-size:12px}.app-footer a{color:var(--text-dim)}@media (width<=640px){.toolbar{padding:12px 14px}.content{padding:16px 14px 50px}.toolbar-title strong{max-width:20ch}}html:root[data-family=xp] .content{padding-top:54px}html:root[data-family=xp] .toolbar-title strong,html:root[data-family=xp] .toolbar-title span{color:inherit}html:root[data-family=xp] .toolbar .chip,html:root[data-family=xp] .toolbar .btn,html:root[data-family=xp] .toolbar .icon-btn,html:root[data-family=xp] .toolbar .volume-control,html:root[data-family=xp] .toolbar .toolbar-search{color:var(--accent-fg);background:#ffffff29;border-color:#00000059}html:root[data-family=xp] .toolbar .chip[aria-pressed=true]{background:var(--xp-title-3);box-shadow:inset 1px 1px 2px #0006}html:root[data-family=xp] .toolbar input{color:var(--accent-fg)}html:root[data-family=cyber] .group-heading h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}html:root[data-family=cyber] .sound-card-name{text-transform:uppercase;letter-spacing:.05em}html:root[data-family=cyber] .sound-card-icon{clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));border-radius:0}html:root[data-family=cyber] :is(.toolbar-search,.volume-control,.toolbar-logo){border-radius:0}html:root[data-family=arcade] .group-heading h2{font-family:var(--font-display);color:var(--accent);font-weight:400}html:root[data-family=arcade] .sound-card-icon{box-shadow:0 0 0 2px var(--accent), 0 0 12px -2px var(--glow);border-radius:50%}html:root[data-family=arcade] .sound-card[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent), 0 0 26px -4px var(--glow)}html:root[data-family=factorio] :is(.toolbar-search,.volume-control){background:var(--bg-elev-2);box-shadow:var(--fo-well);border-color:#000;border-radius:0}html:root[data-family=factorio] .group-heading h2{color:var(--fo-heading);font-weight:700}html:root[data-family=factorio] .sound-card-icon{border-radius:2px;box-shadow:0 0 0 1px #000,inset 1px 1px #fff3}html:root[data-family=factorio] .content{padding-top:58px}@media (width<=640px){.toolbar{gap:10px;padding:12px 14px;position:relative}.toolbar-search{flex:100%;max-width:none}.toolbar-groups{flex:100%}.content{padding-left:14px;padding-right:14px}}