@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}:root{--primary:#5d9b9b;--secondary:#d4b483;--bg:#f9f9f9;--text:#333}*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}body{background-color:var(--bg);color:var(--text);min-height:100vh;padding:2rem}header{text-align:center;margin-bottom:2rem}h1{font-size:2.5rem;color:var(--primary);margin-bottom:.5rem}.subtitle{color:var(--secondary);font-size:1.2rem}.sound-panel{max-width:800px;margin:0 auto;background:#fff;border-radius:15px;padding:2rem;box-shadow:0 10px 20px rgba(0,0,0,.1)}.sound-item{display:flex;align-items:center;padding:1rem 0;border-bottom:1px solid #eee}.sound-item:last-child{border-bottom:0}.sound-name{flex:1;font-size:1.2rem;color:var(--primary)}.sound-controls{display:flex;align-items:center;gap:1rem}.control-btn{background:0 0;border:0;font-size:1.5rem;color:var(--primary);cursor:pointer;transition:all .3s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%}.control-btn:hover{background:rgba(93,155,155,.1);transform:scale(1.1)}.control-btn.active{color:var(--secondary)}.volume-slider{width:100px;-webkit-appearance:none;height:6px;background:#ddd;border-radius:3px;outline:0}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer}@media (max-width:800px){.sound-panel{background:transparent;padding:2rem;box-shadow:none}}