:root{--bg-color: #030712;--surface-color: #020617;--accent-color: #00e5ff;--accent-glow: rgba(0, 229, 255, .5);--text-primary: #f8fafc;--text-secondary: #94a3b8;--border-color: rgba(0, 229, 255, .2);--grid-color: rgba(0, 229, 255, .05);--font-main: "JetBrains Mono", monospace}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);min-height:100vh;overflow-x:hidden;overflow-y:scroll;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem}.container{width:100%;max-width:1000px;z-index:1}.circuit-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none;background-color:var(--bg-color)}.circuit-svg{width:100%;height:100%;color:var(--accent-color);opacity:.1}.circuit-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,transparent 0%,var(--bg-color) 80%)}.scanlines{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#12101000 50%,#0000001a 50%);background-size:100% 4px;z-index:-1;pointer-events:none;opacity:.3}.console{background:#020617d9;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-color);position:relative;padding:2rem;box-shadow:0 0 40px #00000080}.console:before,.console:after{content:"";position:absolute;width:20px;height:20px;border:2px solid var(--accent-color)}.console:before{top:-2px;left:-2px;border-right:none;border-bottom:none}.console:after{bottom:-2px;right:-2px;border-left:none;border-top:none}.top-meta{display:flex;gap:2rem;font-size:.7rem;color:var(--accent-color);margin-bottom:1.5rem;letter-spacing:2px;opacity:.8}.meta-item:before{content:">";margin-right:5px}.header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.title-group h1{font-size:2.5rem;font-weight:700;letter-spacing:-1px;text-transform:uppercase;color:var(--text-primary);position:relative;display:inline-block}.title-group h1:before,.title-group h1:after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;background:transparent}.title-group h1:before{left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s infinite linear alternate-reverse}.title-group h1:after{left:-2px;text-shadow:-2px 0 var(--accent-color);clip:rect(44px,450px,56px,0);animation:glitch-anim2 5s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(31px,9999px,94px,0)}20%{clip:rect(70px,9999px,71px,0)}40%{clip:rect(29px,9999px,83px,0)}60%{clip:rect(16px,9999px,91px,0)}80%{clip:rect(2px,9999px,23px,0)}to{clip:rect(14px,9999px,7px,0)}}@keyframes glitch-anim2{0%{clip:rect(65px,9999px,100px,0)}20%{clip:rect(52px,9999px,54px,0)}40%{clip:rect(11px,9999px,85px,0)}60%{clip:rect(89px,9999px,55px,0)}80%{clip:rect(33px,9999px,34px,0)}to{clip:rect(12px,9999px,47px,0)}}.sub-title{font-size:.7rem;color:var(--accent-color);letter-spacing:4px;margin-top:.2rem;opacity:.7}.volume-control{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}.vol-label{font-size:.6rem;color:var(--text-secondary);letter-spacing:2px}.slider-wrapper{display:flex;align-items:center;gap:1rem}input[type=range]{-webkit-appearance:none;width:150px;background:transparent}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;background:#00e5ff1a;border:1px solid var(--border-color)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:14px;width:6px;background:var(--accent-color);cursor:pointer;margin-top:-6px;box-shadow:0 0 10px var(--accent-glow)}.volume-percentage{font-size:.8rem;color:var(--accent-color)}.visualizer-container{background:#0006;border:1px solid var(--border-color);padding:1.5rem 1rem .5rem;margin-bottom:2rem;position:relative;overflow:hidden}.visualizer-label{position:absolute;top:5px;left:10px;font-size:.6rem;color:var(--accent-color);letter-spacing:1px;opacity:.7}.visualizer-canvas{width:100%;height:100px;display:block}.sound-grid-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;font-size:.7rem;color:var(--text-secondary);letter-spacing:2px}.header-line{flex:1;height:1px;background:var(--border-color)}.sound-buttons{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin-bottom:2rem}.sound-btn{background:#02061766;border:1px solid var(--border-color);color:var(--text-secondary);padding:1rem;font-family:var(--font-main);font-size:.75rem;text-align:left;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:.8rem;min-height:100px}.sound-btn .material-icons-outlined{font-size:1.5rem;color:var(--accent-color);opacity:.8}.sound-btn:hover{background:#00e5ff0d;color:var(--text-primary);border-color:var(--accent-color);transform:translateY(-2px)}.sound-btn.active{background:var(--accent-color);color:var(--bg-color);font-weight:700;box-shadow:0 0 20px var(--accent-glow)}.sound-btn.active .material-icons-outlined{color:var(--bg-color)}.sound-btn-new:not(.active){border-color:var(--accent-color);background:#00e5ff12;color:var(--text-primary);box-shadow:0 0 16px #00e5ff38}.sound-btn-new:not(.active):hover{background:#00e5ff1f;box-shadow:0 0 20px var(--accent-glow)}.sound-badge{position:absolute;top:8px;right:8px;padding:2px 5px;font-size:.55rem;font-weight:700;letter-spacing:1px;line-height:1.2;white-space:nowrap;z-index:1;color:var(--bg-color);background:var(--accent-color)}.sound-btn.active .sound-badge{color:var(--accent-color);background:var(--bg-color)}.footer-meta{margin-top:3rem}.footer-line{height:1px;background:var(--border-color);margin-bottom:1rem}.footer-text{display:flex;justify-content:space-between;font-size:.6rem;color:var(--text-secondary);letter-spacing:1px}.footer-text a{color:var(--accent-color);text-decoration:none}.footer-text a:hover{text-decoration:underline;text-shadow:0 0 8px var(--accent-glow)}@media (max-width: 768px){.header{flex-direction:column;align-items:flex-start;gap:1.5rem}.volume-control{align-items:flex-start;width:100%}input[type=range]{width:100%}}