:root{--white:#f8f9fa;--pink:#ffc8dd;--brown:#d4a373;--dark:#1a1a1a;--light-gray:#e9ecef}*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(135deg,#f5f7fa 0,#c3cfe2 100%);min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.container{width:100%;max-width:900px;background:var(--white);border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.1);overflow:hidden}header{background:var(--dark);color:var(--white);padding:20px;text-align:center}h1{font-weight:300;margin-bottom:10px}.subtitle{opacity:.8;font-weight:300}.noise-container{display:flex;flex-wrap:wrap;gap:20px;padding:20px}.noise-card{flex:1;min-width:250px;background:var(--white);border-radius:12px;padding:20px;box-shadow:0 4px 15px rgba(0,0,0,.05);transition:transform .3s ease;display:flex;flex-direction:column;border:1px solid var(--light-gray)}.noise-card:hover{transform:translateY(-5px)}.noise-card.white{border-top:4px solid var(--light-gray)}.noise-card.pink{border-top:4px solid var(--pink)}.noise-card.brown{border-top:4px solid var(--brown)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.noise-title{font-size:1.5rem;font-weight:500}.noise-color{width:24px;height:24px;border-radius:50%}.white-color{background:var(--light-gray)}.pink-color{background:var(--pink)}.brown-color{background:var(--brown)}.noise-description{color:#666;margin-bottom:20px;line-height:1.5}canvas{width:100%;height:100px;background:var(--light-gray);border-radius:8px;margin-bottom:20px}.controls{display:flex;flex-direction:column;gap:10px}.volume-control{display:flex;align-items:center;gap:10px}button{padding:10px 20px;border:0;border-radius:30px;font-size:.9rem;cursor:pointer;transition:all .2s ease;font-weight:500}.play-btn{background:var(--dark);color:var(--white);flex:1}.play-btn:hover{opacity:.9}.play-btn.playing{background:#e63946}input[type=range]{flex:1;height:8px;-webkit-appearance:none;background:var(--light-gray);border-radius:4px;outline:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;cursor:pointer}.white-control::-webkit-slider-thumb{background:var(--light-gray)}.pink-control::-webkit-slider-thumb{background:var(--pink)}.brown-control::-webkit-slider-thumb{background:var(--brown)}footer{text-align:center;padding:20px;color:#666;font-size:.9rem}@media (max-width:768px){.noise-card{min-width:100%}}