@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Fraunces:opsz,wght@9..144,700&display=swap');
:root{--violet:#6946d8;--ink:#201e2a}*{box-sizing:border-box}body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(circle at 85% 0,#e8ddff,transparent 32rem),#f8f6f1;font:16px 'DM Sans',sans-serif}header{max-width:1280px;margin:auto;padding:28px 32px;display:flex;align-items:center;gap:12px}header p{margin:0;color:var(--violet);font-size:.7rem;font-weight:700;letter-spacing:.15em}h1{margin:0 auto 0 0;font:700 2rem Fraunces,serif}#stop{border:0;border-radius:9px;padding:12px 16px;background:#d7455f;color:#fff;font:600 .9rem 'DM Sans',sans-serif;cursor:pointer}main{max-width:1280px;margin:auto;padding:10px 32px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}.sound{min-height:150px;padding:20px;border:1px solid #dfd9ec;border-radius:15px;background:linear-gradient(135deg,#6946d8,#8c66e8);box-shadow:0 5px 0 #ddd5ed;color:#fff;text-align:left;cursor:pointer;transition:transform .15s}.sound:hover{transform:translateY(-3px)}.sound:disabled{background:#aaa3b2;cursor:not-allowed}.sound.playing{background:linear-gradient(135deg,#e36a58,#e94b88)}.sound span,.sound small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sound span{font-size:1.3rem;font-weight:700}.sound small{margin-top:9px;opacity:.82;font-size:.82rem}.empty{color:#706d7d}@media(max-width:600px){header{padding:20px}main{padding:5px 20px 30px;grid-template-columns:1fr}h1{font-size:1.6rem}}