:root{--bg-color: #050510;--text-color: #e0e0e0;--primary-color: #00f0ff;--secondary-color: #ff0055;--accent-color: #39ff14;--panel-bg: rgba(255, 255, 255, .05);--panel-border: rgba(255, 255, 255, .1);--font-family: "Inter", system-ui, sans-serif;--shadow-color: rgba(0, 0, 0, .3);--input-bg: rgba(255, 255, 255, .05);--hover-glow: rgba(0, 240, 255, .2)}:root.light-mode{--bg-color: #f0f4f8;--text-color: #1a1a2e;--primary-color: #0077b6;--secondary-color: #d00000;--accent-color: #007200;--panel-bg: rgba(255, 255, 255, .85);--panel-border: rgba(0, 0, 0, .15);--shadow-color: rgba(0, 0, 0, .15);--input-bg: rgba(0, 0, 0, .05);--hover-glow: rgba(0, 119, 182, .2)}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);overflow:hidden;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}#root{width:100vw;height:100vh;display:flex;flex-direction:column}button{cursor:pointer;border:none;background:var(--panel-bg);color:var(--primary-color);padding:.5rem 1rem;border-radius:4px;border:1px solid var(--panel-border);transition:all .2s ease}button:hover{background:var(--hover-glow);border-color:var(--primary-color);box-shadow:0 0 10px var(--primary-color)}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--panel-border);border-radius:12px;padding:1rem;box-shadow:0 4px 6px var(--shadow-color);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}canvas{outline:none}.theme-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--panel-bg);border:1px solid var(--panel-border);cursor:pointer;font-size:1.2rem;transition:all .3s ease}.theme-toggle:hover{transform:scale(1.1);box-shadow:0 0 15px var(--primary-color)}.menu-toggle{display:none;align-items:center;justify-content:space-between;width:100%;padding:.5rem 0;background:transparent;border:none;color:var(--primary-color);font-size:1.2rem;cursor:pointer}.menu-toggle .hamburger{display:flex;flex-direction:column;gap:4px;width:24px}.menu-toggle .hamburger span{display:block;height:3px;background:var(--primary-color);border-radius:2px;transition:all .3s ease}.menu-toggle.open .hamburger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.menu-toggle.open .hamburger span:nth-child(2){opacity:0}.menu-toggle.open .hamburger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.menu-content{display:flex;flex-direction:column;gap:10px;max-height:2000px;overflow:hidden;transition:max-height .4s ease-in-out,opacity .3s ease;opacity:1}.menu-content.collapsed{max-height:0;opacity:0;padding:0}.header-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.header-row h1{margin:0;font-size:1.5rem;color:var(--primary-color)}@media(max-width:768px){.menu-toggle{display:flex}.hud-panel{left:10px!important;right:10px!important;top:10px!important;max-width:none!important}.hud-panel .panel{padding:.75rem}.status-bar{display:none!important}.header-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.header-row h1{justify-self:start}.header-row .theme-toggle{justify-self:center}.header-row .header-controls{justify-self:end}}.led-indicator{display:none;position:fixed;bottom:15px;right:15px;width:12px;height:12px;border-radius:50%;box-shadow:0 0 8px currentColor;z-index:100;transition:all .3s ease}.led-indicator.online{background-color:#39ff14;color:#39ff14}.led-indicator.offline{background-color:#f05;color:#f05}.mobile-play-btn{display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:60px;height:60px;border-radius:50%;font-size:1.5rem;z-index:100;border:2px solid;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease}.mobile-play-btn.playing{background:#f053;border-color:#f05;color:#f05;box-shadow:0 0 20px #f056}.mobile-play-btn.stopped{background:#39ff1433;border-color:#39ff14;color:#39ff14;box-shadow:0 0 20px #39ff1466}.mobile-play-btn:hover{transform:translate(-50%) scale(1.1)}.mobile-loop-btn{display:none;position:fixed;bottom:25px;left:calc(50% + 50px);width:40px;height:40px;border-radius:50%;font-size:1rem;z-index:100;border:2px solid;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s ease;background:#64646433;border-color:#666;color:#666}.mobile-loop-btn.active{background:#00f0ff33;border-color:#00f0ff;color:#00f0ff;box-shadow:0 0 15px #00f0ff66}.mobile-loop-btn:hover{transform:scale(1.1)}.led-indicator{cursor:pointer}.led-indicator:hover{transform:scale(1.3);box-shadow:0 0 15px currentColor}@media(max-width:768px){.led-indicator{display:block}.mobile-play-btn,.mobile-loop-btn{display:flex;align-items:center;justify-content:center}}@media(max-width:400px){.header-row h1{font-size:1.2rem}.theme-toggle{width:35px;height:35px;font-size:1rem}.mobile-play-btn{width:50px;height:50px;font-size:1.2rem}.mobile-loop-btn{width:35px;height:35px;font-size:.9rem;left:calc(50% + 40px);bottom:27px}}