*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background:#e8f4f8;min-height:100vh;color:#2c3e50;overflow-x:hidden;position:relative}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%,#2980b9 2px,transparent 2px),radial-gradient(circle at 75% 75%,#34495e 1.5px,transparent 1.5px),radial-gradient(circle at 25% 75%,#2980b9 1px,transparent 1px),radial-gradient(circle at 75% 25%,#3498db 1.8px,transparent 1.8px),radial-gradient(circle at 50% 50%,#2c3e50 1.2px,transparent 1.2px),radial-gradient(circle at 12% 88%,#2980b9 .8px,transparent .8px),radial-gradient(circle at 88% 12%,#34495e 1.4px,transparent 1.4px);background-size:60px 60px,80px 80px,45px 45px,70px 70px,35px 35px,90px 90px,55px 55px;background-position:0 0,20px 20px,15px 30px,35px 10px,5px 25px,40px 45px,25px 5px;opacity:.6;z-index:-1}#app{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}.header{text-align:center;padding:3rem 2rem;background:#e8f4f8;background-image:radial-gradient(circle at 50% 50%,#2980b9 .5px,transparent .5px);background-repeat:repeat;background-position:0 0;background-size:4px 4px;border:4px solid #34495e;border-bottom:6px solid #2c3e50;margin:2rem;position:relative;box-shadow:0 4px #bdc3c7}.header:before{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:2px solid #95a5a6;pointer-events:none}.header:after{content:"";position:absolute;bottom:0;left:20px;width:420px;height:420px;background-image:url(/img/logo.png);background-repeat:no-repeat;background-position:left bottom;background-size:contain;z-index:10;pointer-events:none}.title{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;margin-bottom:1rem;letter-spacing:.05em;color:#2c3e50;text-transform:uppercase;font-family:Arial Black,Arial,sans-serif;position:relative;z-index:20;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:2px 2px 0 #fff,-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff}.subtitle{font-size:1.1rem;font-weight:600;letter-spacing:.05em;color:#7f8c8d;margin-bottom:1.5rem;text-transform:uppercase;position:relative;z-index:20}.terminal-line{font-family:Courier New,monospace;font-size:.85rem;color:#34495e;text-align:center;max-width:500px;margin:0 auto;padding:.8rem 1.2rem;background:#fff;border:3px solid #34495e;border-radius:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;position:relative;z-index:20}.prompt{color:#e74c3c;font-weight:700}.command{color:#2980b9;margin-left:.5rem;font-weight:700}.command:after{content:"";animation:none}.soundboard{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem}.buttons-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;max-width:1200px;width:100%}.sound-button{background:#fff;border:4px solid var(--button-color, #34495e);border-radius:0;padding:2rem 1rem;color:var(--button-color, #34495e);font-family:Arial,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;position:relative;transition:all .2s ease;overflow:hidden;min-height:140px;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 4px #0000001a}.sound-button:before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(45deg,var(--button-color),var(--button-color) 8px,#fff 8px,#fff 16px);opacity:.8}.sound-button:after{content:"";position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;transform:translate(-50%,-50%);opacity:.1;z-index:0}.sound-button:hover{transform:translateY(-2px);box-shadow:0 6px #00000026,0 8px 15px #0000001a;background:#f8f9fa}.sound-button:hover:before{opacity:1}.sound-button:hover:after{opacity:.15}.sound-button.pressed{transform:translateY(2px);box-shadow:0 2px #0000001a;background:var(--button-color);color:#fff}.button-label{font-size:1rem;margin-bottom:.5rem;z-index:2;position:relative;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.button-icon{font-size:2rem;z-index:2;position:relative;transition:all .3s ease;color:var(--button-color);font-weight:700}.sound-button:hover .button-icon{transform:scale(1.1)}.sound-button.disabled{opacity:.4;cursor:not-allowed;background:#f8f9fa;color:#95a5a6;border-color:#95a5a6}.sound-button.disabled:hover{transform:none;box-shadow:0 4px #0000001a;background:#f8f9fa}.sound-button.disabled:before{opacity:.2}.sound-button.disabled .button-icon{color:#95a5a6}.sound-button.disabled:hover .button-icon{transform:none}.sound-button.playing{background:var(--button-color);color:#fff;animation:playingPulse 1.5s ease-in-out infinite alternate}.sound-button.playing:before{background:repeating-linear-gradient(45deg,#fff,#fff 8px,transparent 8px,transparent 16px);opacity:.3}.sound-button.playing .button-icon{color:#fff}@keyframes playingPulse{0%{box-shadow:0 4px #0000001a,0 0 0 0 var(--button-color)}to{box-shadow:0 4px #0000001a,0 0 0 8px transparent}}.footer{text-align:center;padding:2rem;background:#34495e;color:#ecf0f1;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin:2rem;border:4px solid #2c3e50;box-shadow:0 4px #bdc3c7}.notification{position:fixed;top:20px;right:20px;background:#fff;color:#e74c3c;padding:1rem 1.5rem;border:4px solid #e74c3c;font-family:inherit;font-weight:700;z-index:1000;animation:slideIn .3s ease-out;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px #c0392b}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 768px){.buttons-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;padding:0 1rem}.sound-button{padding:1.5rem .5rem;min-height:100px}.header{padding:2rem 1rem;background-size:60px auto;background-position:left 15px center}.header:after{width:120px;height:120px;left:15px}.soundboard{padding:1rem}}@media (max-width: 480px){.buttons-grid{grid-template-columns:repeat(2,1fr)}.sound-button{font-size:.9rem;padding:1rem;min-height:80px}.header{padding:1.5rem .5rem;background-size:100px auto;background-position:left 10px center;position:relative;margin:1rem}.header:after{width:140px;height:140px;bottom:10px;left:10px;z-index:25}.title{font-size:1.8rem}}