.layer-info-banner{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background:#ffffff0d;border-radius:12px;margin-bottom:2rem;flex-wrap:wrap}.layer-info-banner .info-text{color:var(--text-secondary);font-size:.9rem;margin-left:auto}.button-showcase{display:flex;gap:1rem;flex-wrap:wrap;padding:1rem;background:#0000004d;border-radius:12px;min-height:100px;align-items:center;justify-content:center}.button-grid-section{margin:3rem 0;padding:2rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.1)}.button-grid-section h2{color:var(--accent-secondary);margin-bottom:.5rem}.button-grid-section>.description{color:var(--text-secondary);margin-bottom:1.5rem}.button-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:500px;margin:0 auto 1.5rem;padding:1.5rem;background:linear-gradient(145deg,#1a1a2a,#0a0a15);border-radius:16px;box-shadow:inset 0 2px 10px #00000080,0 5px 20px #0000004d}.matrix-controls{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.control-btn{padding:.75rem 1.5rem;background:linear-gradient(145deg,#2a2a3a,#1a1a2a);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-size:.9rem}.control-btn:hover{background:linear-gradient(145deg,#3a3a4a,#2a2a3a);border-color:var(--accent-primary);box-shadow:0 0 10px #00ff884d}.control-btn:active{transform:scale(.98)}.layered-demo-section{margin:3rem 0;padding:2rem;background:var(--bg-card);border-radius:16px;border:1px solid rgba(255,255,255,.1)}.layered-demo-section h2{color:var(--accent-secondary);margin-bottom:.5rem}.layered-demo-section>.description{color:var(--text-secondary);margin-bottom:1.5rem}.layered-demo-container{display:flex;flex-direction:column;gap:1rem}.layer-controls{display:flex;gap:1rem;flex-wrap:wrap;padding:1rem;background:#0000004d;border-radius:8px}.layer-controls label{display:flex;align-items:center;gap:.5rem;cursor:pointer}.layer-controls input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-primary)}#layered-demo{height:400px;background:#050508;border-radius:12px;overflow:hidden}.advanced-buttons-section{margin:3rem 0}.advanced-buttons-section h2{color:var(--accent-primary);margin-bottom:1.5rem;text-align:center}.arcade-style .arcade-btn{width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;position:relative;background:radial-gradient(circle at 30% 30%,#f44,#a00);box-shadow:0 8px #600,0 12px 20px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3;transition:all .1s ease}.arcade-style .arcade-btn:hover{filter:brightness(1.1)}.arcade-style .arcade-btn:active{transform:translateY(4px);box-shadow:0 4px #600,0 6px 10px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.green{background:radial-gradient(circle at 30% 30%,#4f4,#0a0);box-shadow:0 8px #060,0 12px 20px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.green:active{box-shadow:0 4px #060,0 6px 10px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.blue{background:radial-gradient(circle at 30% 30%,#48f,#04a);box-shadow:0 8px #026,0 12px 20px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.blue:active{box-shadow:0 4px #026,0 6px 10px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.yellow{background:radial-gradient(circle at 30% 30%,#ff4,#aa0);box-shadow:0 8px #660,0 12px 20px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.arcade-style .arcade-btn.yellow:active{box-shadow:0 4px #660,0 6px 10px #00000080,inset 0 -3px 10px #0000004d,inset 0 3px 10px #fff3}.industrial-style .industrial-btn{width:70px;height:70px;border-radius:8px;border:3px solid #555;cursor:pointer;position:relative;background:linear-gradient(145deg,#4a4a4a,#2a2a2a);box-shadow:0 4px #1a1a1a,0 8px 15px #00000080,inset 0 1px #ffffff1a;transition:all .1s ease}.industrial-style .industrial-btn:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#333;box-shadow:inset 0 2px 4px #00000080}.industrial-style .industrial-btn.active:before{background:var(--accent-danger);box-shadow:inset 0 2px 4px #0000004d,0 0 20px var(--accent-danger)}.industrial-style .industrial-btn.warning:before{background:var(--accent-warning);box-shadow:inset 0 2px 4px #0000004d,0 0 20px var(--accent-warning)}.industrial-style .industrial-btn.success:before{background:var(--accent-primary);box-shadow:inset 0 2px 4px #0000004d,0 0 20px var(--accent-primary)}.holographic-style .holo-btn{width:100px;height:50px;border-radius:8px;border:1px solid rgba(0,255,255,.5);cursor:pointer;position:relative;background:linear-gradient(135deg,#00ffff1a,#ff00ff1a,#00ffff1a);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#0ff;font-size:.8rem;text-transform:uppercase;letter-spacing:2px;overflow:hidden;transition:all .3s ease}.holographic-style .holo-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.holographic-style .holo-btn:hover{border-color:#0ffc;box-shadow:0 0 20px #00ffff4d,inset 0 0 20px #00ffff1a}.holographic-style .holo-btn:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.1) 2px,rgba(0,0,0,.1) 4px);pointer-events:none}.organic-style .organic-btn{width:80px;height:80px;border-radius:50% 45% 55% 50%/50% 55% 45% 50%;border:none;cursor:pointer;position:relative;background:radial-gradient(circle at 40% 40%,#6f9,#2a5,#163);box-shadow:0 5px 15px #00643266,inset 0 -5px 15px #0003,inset 0 5px 15px #fff3;animation:breathe 4s ease-in-out infinite;transition:all .3s ease}@keyframes breathe{0%,to{transform:scale(1);border-radius:50% 45% 55% 50%/50% 55% 45% 50%}25%{border-radius:55% 50% 45%/45% 50% 55%}50%{transform:scale(1.05);border-radius:45% 55% 50% 50%/55% 45% 50% 50%}75%{border-radius:50% 50% 55% 45%/50% 50% 45% 55%}}.organic-style .organic-btn:hover{filter:brightness(1.2)}.organic-style .organic-btn.purple{background:radial-gradient(circle at 40% 40%,#c8f,#84a,#527);box-shadow:0 5px 15px #64009666,inset 0 -5px 15px #0003,inset 0 5px 15px #fff3}.organic-style .organic-btn.orange{background:radial-gradient(circle at 40% 40%,#fa4,#c60,#840);box-shadow:0 5px 15px #96500066,inset 0 -5px 15px #0003,inset 0 5px 15px #fff3}.matrix-btn{position:relative;width:100%;aspect-ratio:1;min-height:60px}.matrix-btn.animate-on .led-button-element{animation:buttonActivate .3s ease}@keyframes buttonActivate{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@media (max-width: 600px){.button-matrix{grid-template-columns:repeat(4,1fr);gap:.5rem;padding:1rem}.matrix-btn{min-height:50px}.arcade-style .arcade-btn,.organic-style .organic-btn{width:60px;height:60px}.industrial-style .industrial-btn{width:55px;height:55px}}