*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);position:relative;overflow:hidden}.app:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,107,53,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,255,65,.1) 0%,transparent 50%);pointer-events:none}.title{font-size:clamp(2rem,8vw,4rem);font-weight:900;letter-spacing:.2em;text-transform:uppercase;background:linear-gradient(90deg,#ff6b35,#f7c59f,#00ff41,#2ec4b6,#ff6b35);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s linear infinite;text-shadow:none;margin-bottom:.5rem}.title-icon{display:inline-block;animation:bounce .6s ease-in-out infinite alternate}.title-icon:last-child{animation-delay:.3s}@keyframes gradient-shift{0%{background-position:0% center}to{background-position:200% center}}@keyframes bounce{0%{transform:translateY(-5px) rotate(-10deg)}to{transform:translateY(5px) rotate(10deg)}}.subtitle{font-size:1rem;color:#888;font-style:italic;margin-bottom:3rem;letter-spacing:.1em}.sound-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;max-width:800px;width:100%;padding:1rem}.sound-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2.5rem 2rem;background:linear-gradient(145deg,#2a2a4a,#1a1a2e);border:3px solid var(--btn-color);border-radius:20px;cursor:pointer;transition:all .2s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 20px var(--btn-shadow),inset 0 0 20px #0000004d;overflow:hidden}.sound-button:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent 0deg,var(--btn-color) 60deg,transparent 120deg);opacity:0;transition:opacity .3s;animation:rotate-bg 3s linear infinite}.sound-button:hover:before{opacity:.1}@keyframes rotate-bg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sound-button.playing{animation:pulse .5s ease-in-out infinite;border-width:4px}.sound-button.playing:after{content:"";position:absolute;inset:-10px;border:2px solid var(--btn-color);border-radius:25px;animation:ripple 1s ease-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 20px var(--btn-shadow),inset 0 0 20px #0000004d}50%{box-shadow:0 0 40px var(--btn-shadow),0 0 60px var(--btn-shadow),inset 0 0 20px #0000004d}}@keyframes ripple{0%{transform:scale(1);opacity:1}to{transform:scale(1.2);opacity:0}}.sound-emoji{font-size:4rem;filter:drop-shadow(0 0 10px var(--btn-shadow));transition:transform .2s}.sound-button:hover .sound-emoji{animation:wiggle .5s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}.sound-name{font-size:1.2rem;font-weight:700;color:var(--btn-color);text-transform:uppercase;letter-spacing:.15em;text-shadow:0 0 10px var(--btn-shadow)}.playing-indicator{position:absolute;bottom:10px;font-size:1rem;color:var(--btn-color);animation:music-notes .8s ease-in-out infinite}@keyframes music-notes{0%,to{transform:translateY(0);opacity:1}50%{transform:translateY(-5px);opacity:.6}}.footer{margin-top:4rem;display:flex;align-items:center;gap:.5rem;color:#555;font-size:.9rem}.footer-emoji{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app:has(.sound-button.playing){animation:background-pulse 2s ease-in-out infinite}@keyframes background-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.1)}}