@import"https://fonts.googleapis.com/css2?family=Bank+Gothic&display=swap";@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap";:root{font-family:Orbitron,Bank Gothic,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;--accent-color: #00bcd4}body{margin:0;padding:0;min-width:320px;min-height:100vh;background-color:#000;overflow-x:auto;overflow-y:hidden}#root{width:100vw;height:100vh;margin:0;padding:0;overflow:visible}.visualizer-container{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:visible}.top-bar{flex:0 0 60px;display:flex;justify-content:space-between;align-items:center;background-color:#000;border-bottom:1px solid #333;padding:0 50px;box-sizing:border-box;z-index:200;overflow:visible;position:relative}.top-bar .title{font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:2px;flex-shrink:0}.top-bar .controls{display:flex;gap:15px;align-items:center;flex-shrink:0}.main-canvas{flex:1;display:block;width:100%}.overlay{position:fixed;top:60px;left:0;width:100%;height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000c;z-index:100}.start-btn{padding:15px 40px;font-size:1.2rem;font-family:Orbitron,sans-serif;background:var(--accent-color);border:none;color:#000;cursor:pointer;border-radius:0;font-weight:700;letter-spacing:1px;transition:all .2s;box-shadow:0 0 15px #00bcd480}.start-btn:hover{background:#fff;box-shadow:0 0 25px #fffc}.theme-select{appearance:none;-webkit-appearance:none;padding:8px 30px 8px 15px;background-color:#111;color:#fff;border:1px solid #444;border-radius:0;cursor:pointer;font-family:Orbitron,sans-serif;font-size:.8rem;text-transform:uppercase;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right 10px top 50%;background-size:8px auto}.theme-select:hover{border-color:#fff}.control-btn{appearance:none;-webkit-appearance:none;padding:8px 15px;background-color:#111;color:#fff;border:1px solid #444;border-radius:0;cursor:pointer;font-family:Orbitron,sans-serif;font-size:.8rem;text-transform:uppercase;text-align:center;transition:all .2s}.control-btn:hover{border-color:#fff;background-color:#222}.stop-btn{background:red;color:#fff;border:none;padding:8px 20px;font-family:Orbitron,sans-serif;font-weight:700;cursor:pointer;text-transform:uppercase}.stop-btn:hover{background:#f44}.mobile-only{display:none}.mobile-menu-btn{background:#333;color:#fff;border:none;padding:8px 20px;font-family:Orbitron,sans-serif;font-weight:700;cursor:pointer;text-transform:uppercase;font-size:1.2rem}.mobile-menu-btn:hover{background:#555}.mobile-dropdown{position:absolute;top:100%;right:20px;background:#000000f2;border:1px solid #444;min-width:200px;z-index:1000;margin-top:5px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.mobile-dropdown-item{padding:12px 20px;color:#fff;cursor:pointer;border-bottom:1px solid #333;font-family:Orbitron,sans-serif;font-size:.85rem;text-transform:uppercase;transition:background .2s}.mobile-dropdown-item:hover{background:#ffffff1a}.mobile-dropdown-item:last-child{border-bottom:none}.theme-submenu{background:#141414f2;border-left:3px solid var(--accent-color)}.theme-submenu-item{padding:10px 20px 10px 30px;color:#ccc;cursor:pointer;border-bottom:1px solid #222;font-family:Orbitron,sans-serif;font-size:.75rem;transition:all .2s}.theme-submenu-item:hover{background:#00bcd433;color:#fff}.theme-submenu-item.active{background:#00bcd44d;color:var(--accent-color);font-weight:700}.theme-submenu-item:last-child{border-bottom:none}@media(min-width:1133px)and (max-width:1500px){.top-bar .title{font-size:1.1rem;letter-spacing:1px}.top-bar .controls{gap:10px}.theme-select{padding:6px 25px 6px 12px;font-size:.75rem}.stop-btn{padding:6px 15px;font-size:.85rem}}@media(max-width:1132px){.desktop-only{display:none!important}.mobile-only{display:flex!important;gap:10px;align-items:center;flex-shrink:0;padding-right:5px}.top-bar{flex-direction:row;flex:0 0 auto;min-height:60px;padding:10px 25px 10px 20px;gap:15px;position:relative;justify-content:space-between;align-items:center;overflow:visible}.top-bar .title{font-size:1rem;letter-spacing:1px;flex-shrink:0;margin-right:auto}.top-bar .controls{gap:10px;flex-shrink:0;margin-left:auto}.theme-select{padding:6px 20px 6px 10px;font-size:.7rem}.stop-btn{padding:6px 12px;font-size:.75rem}.overlay{top:60px;height:calc(100vh - 60px)}}@media(min-width:1133px){.mobile-only{display:none!important}.desktop-only{display:flex!important}}@media(max-width:768px){.top-bar .title{font-size:.9rem}.top-bar .controls{gap:6px}.theme-select{padding:5px 18px 5px 8px;font-size:.65rem}.stop-btn{padding:5px 10px;font-size:.7rem}}.info-btn{margin-top:20px;padding:12px 30px;font-size:1rem;font-family:Orbitron,sans-serif;background:#333;border:2px solid var(--accent-color);color:var(--accent-color);cursor:pointer;border-radius:0;font-weight:700;letter-spacing:1px;transition:all .3s;box-shadow:0 0 10px #00bcd44d}.info-btn:hover{background:var(--accent-color);color:#000;box-shadow:0 0 20px #00bcd4cc}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000d9;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(135deg,#1a1a1a,#0a0a0a);border:2px solid var(--accent-color);padding:40px;max-width:600px;width:90%;box-shadow:0 0 40px #00bcd480;animation:slideIn .3s ease-out;position:relative}@keyframes slideIn{0%{transform:translateY(-50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content h2{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--accent-color);margin:0 0 20px;font-size:1.5rem;font-weight:600;letter-spacing:.5px;text-align:center}.modal-content p{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#ddd;line-height:1.8;margin:15px 0;font-size:1rem}.modal-content p strong{color:#fff;font-weight:700}.modal-content a{color:var(--accent-color);text-decoration:none;transition:all .2s}.modal-content a:hover{color:#fff;text-shadow:0 0 10px var(--accent-color)}.modal-close-btn{margin-top:30px;padding:12px 40px;font-size:1rem;font-family:Orbitron,sans-serif;background:var(--accent-color);border:none;color:#000;cursor:pointer;border-radius:0;font-weight:700;letter-spacing:1px;transition:all .2s;box-shadow:0 0 15px #00bcd480;display:block;margin-left:auto;margin-right:auto}.modal-close-btn:hover{background:#fff;box-shadow:0 0 25px #fffc}@media(max-width:768px){.modal-content{padding:25px;width:85%}.modal-content h2{font-size:1.2rem}.modal-content p{font-size:.9rem}.info-btn{padding:10px 25px;font-size:.9rem}}