:root{--bg-color: #ffffff;--panel-bg: #f9f9f9;--text-color: #333333;--text-muted: #888888;--border-color: #e0e0e0;--accent-color: #000000;--accent-text: #ffffff;--active-bg: #eeeeee;--hover-bg: #f0f0f0;--font-ui: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;--canvas-bg: #ffffff;--letterbox-bg: #000000}body.dark-mode{--bg-color: #000000;--panel-bg: #111111;--text-color: #e0e0e0;--text-muted: #666666;--border-color: #333333;--accent-color: #ffffff;--accent-text: #000000;--active-bg: #222222;--hover-bg: #1a1a1a;--canvas-bg: #000000;--letterbox-bg: #222222;--letterbox-bg: #ffffff}*{box-sizing:border-box;margin:0;padding:0;outline:none;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-ui);background:var(--bg-color);color:var(--text-color);overflow:hidden;width:100vw;height:100vh;font-size:12px;line-height:1.4}#app-root{display:grid;grid-template-columns:260px 1fr 260px;grid-template-rows:100vh;width:100vw;height:100vh}.panel-side{background:#111111d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-right:1px solid rgba(255,255,255,.05);overflow-y:auto;display:flex;flex-direction:column;padding:0;z-index:10}body:not(.dark-mode) .panel-side{background:#ffffffbf;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}#mainPanel{display:grid;grid-template-rows:auto 1fr 40px;grid-column:2;background:var(--bg-color);position:relative;overflow:hidden;height:100vh;min-width:0}#mainPanel>*{pointer-events:auto}#leftPanel{grid-column:1}#rightPanel{grid-column:3;border-right:none;border-left:1px solid var(--border-color)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.panel-header{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;background:transparent;position:sticky;top:0;z-index:20}.panel-header:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.panel-header h3{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text-color);margin:0;text-transform:uppercase}.count-badge{background:var(--accent-color);color:var(--accent-text);padding:2px 6px;border-radius:2px;font-size:10px;font-family:var(--font-mono);font-weight:700}.count-input{background:var(--bg-color);color:var(--accent-color);border:1px solid var(--border-color);border-radius:2px;font-size:10px;font-family:var(--font-mono);width:40px;text-align:center}.preset-grid-left{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px}.preset-item{aspect-ratio:1;background:var(--bg-color);cursor:pointer;position:relative;transition:background .1s;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0}.preset-item:hover{background:var(--hover-bg)}.preset-item.active-in-scene{box-shadow:0 0 15px #ff0000e6,inset 0 0 10px #f009!important;border:2px solid #ff0000!important;z-index:5;transform:scale(1.05)}.preset-item canvas{width:100%!important;height:100%!important;display:block;object-fit:cover}.preset-item .add-btn,.preset-item .remove-btn{position:absolute;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:10px;border:none;cursor:pointer;opacity:0;transition:opacity .2s;z-index:5}.preset-item:hover .add-btn,.preset-item:hover .remove-btn{opacity:1}.preset-item .add-btn{top:2px;right:2px;background:var(--accent-color);color:var(--accent-text);border-radius:2px}.preset-item .remove-btn{bottom:2px;right:2px;background:#f44;color:#fff;border-radius:2px}.upload-section,.text-input-section{padding:12px 16px;border-bottom:1px solid var(--border-color)}.upload-btn{width:100%;padding:8px;background:transparent;border:1px dashed var(--border-color);color:var(--text-muted);font-size:11px;cursor:pointer;transition:all .2s}.upload-btn:hover{border-color:var(--accent-color);color:var(--accent-color)}input[type=text]{width:100%;padding:8px;background:var(--bg-color);border:1px solid var(--border-color);color:var(--text-color);font-family:var(--font-mono);font-size:11px}.transition-panel-compact{padding:0;border-bottom:1px solid var(--border-color)}.transition-buttons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-color);padding:1px}.transition-btn{background:var(--bg-color);border:none;padding:10px;font-size:10px;color:var(--text-color);cursor:pointer;text-align:center}.transition-btn:hover{background:var(--hover-bg)}.transition-btn.active{background:var(--accent-color);color:var(--accent-text)}.next-image-btn{width:100%;padding:12px;background:var(--bg-color);border:none;border-top:1px solid var(--border-color);font-weight:700;cursor:pointer;color:var(--text-color)}.next-image-btn:hover{background:var(--hover-bg)}.wireframe-controls-grid{display:flex;padding:12px 16px;gap:8px;border-bottom:1px solid var(--border-color)}.stroke-btn{flex:1;border:1px solid var(--border-color);border-radius:2px}#topBar{border-bottom:1px solid var(--border-color);background:var(--bg-color);display:flex;align-items:center;justify-content:center;position:relative;z-index:20;min-height:50px;padding:4px 0}.mode-control-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:2px 12px;width:100%;margin:0 auto}.mode-group{display:flex;align-items:center;gap:4px;padding:2px 4px}.mode-group.system-tools{gap:2px}@media (max-width: 1200px){.mode-group{flex-basis:100%;justify-content:center}}@media (max-width: 1000px){.mode-btn{padding:0 8px!important;font-size:9px!important;gap:4px!important}.mode-btn .icon{font-size:12px!important}}.mode-btn{height:30px;padding:0 8px;border:1px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;gap:4px;font-size:10px;font-weight:500;border-radius:4px;transition:all .2s;white-space:nowrap;flex-shrink:0}.mode-btn:hover{background:var(--hover-bg);color:var(--text-color)}.mode-btn.active{background:var(--active-bg);color:var(--accent-color);border-color:var(--accent-color);box-shadow:0 0 15px rgba(var(--accent-rgb),.4);position:relative;animation:neon-pulse 2s infinite ease-in-out}@keyframes neon-pulse{0%{box-shadow:0 0 5px rgba(var(--accent-rgb),.2)}50%{box-shadow:0 0 20px rgba(var(--accent-rgb),.6)}to{box-shadow:0 0 5px rgba(var(--accent-rgb),.2)}}.dropdown-container{position:relative;height:100%;display:flex;align-items:center}.quick-settings-menu{position:absolute;top:calc(100% - 2px);left:50%;transform:translate(-50%);background:#141414f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);padding:12px;border-radius:8px;display:none;flex-direction:column;gap:12px;min-width:200px;z-index:1000;box-shadow:0 10px 40px #000c}.dropdown-container:hover .quick-settings-menu{display:flex}.quick-settings-menu .menu-item{display:flex;flex-direction:column;gap:6px}.quick-settings-menu label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;opacity:.7;color:#fff}.quick-settings-menu.minimal{min-width:150px;padding:8px;gap:8px}.quick-row{display:flex;gap:6px;width:100%}.quick-row.circles{justify-content:space-between}.quick-row.speed-row{padding-top:6px;border-top:1px solid rgba(255,255,255,.1)}.quick-slider{width:100%;height:2px}.color-circle-btn{width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3);cursor:pointer;transition:transform .1s,border-color .2s}.color-circle-btn:hover{transform:scale(1.2);border-color:#fff;box-shadow:0 0 10px #ffffff4d}.color-circle-btn.active{border:2px solid #fff;box-shadow:0 0 15px #ffffff80}.mode-btn.active:after{content:"";position:absolute;bottom:0;left:20%;width:60%;height:3px;background:#0ff;box-shadow:0 0 12px #0ffc;border-radius:2px 2px 0 0}.mode-icon{font-size:14px}.mode-seekbars{position:absolute;top:100%;left:0;width:100%;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-color);padding:16px;display:flex;justify-content:center;gap:24px;z-index:15;box-shadow:0 4px 12px #0000000d}body.dark-mode .mode-seekbars{background:#141414f2}.seekbar-item{display:flex;flex-direction:column;gap:8px;width:140px}.seekbar-item label{font-size:10px;color:var(--text-muted);display:flex;justify-content:space-between}body.mirror-mode #canvasWrapper:after{content:"";position:absolute;top:0;left:50%;width:50%;height:100%;background:inherit;transform:scaleX(-1);z-index:100;pointer-events:none;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}body.mirror-mode #canvasWrapper{transform:scaleX(-1)}#canvasWrapper{position:relative;width:100%;height:100%;background:var(--letterbox-bg);display:flex;justify-content:center;align-items:center;overflow:hidden;transition:background .3s ease}.canvas-container{width:100%;height:100%;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden}canvas{display:block;width:100%;height:100%;object-fit:contain;background:var(--canvas-bg);transition:background .3s ease}#p5-container canvas{background:transparent!important}body.dark-mode #p5-container canvas{filter:invert(1) hue-rotate(180deg)}.canvas-overlays{position:absolute;bottom:16px;left:16px;display:flex;flex-direction:column;gap:8px}.overlay-btn{width:36px;height:36px;background:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px #0000001a;color:var(--text-color)}.overlay-btn:hover{transform:scale(1.05)}.mixer-info-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg-color);border-bottom:1px solid var(--border-color);height:40px}.track-info{width:200px}.track-title{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-color)}.audio-indicator{flex:1;display:flex;justify-content:center;align-items:center;height:100%;padding:0 16px}.indicator-bars{width:60%;height:16px;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:2px;position:relative;overflow:hidden}.indicator-bars:after{content:"";position:absolute;top:0;left:0;height:100%;width:50%;background:var(--accent-color);opacity:.5;animation:barPulse .5s infinite alternate}@keyframes barPulse{0%{width:40%;opacity:.3}to{width:60%;opacity:.6}}.status-display{text-align:right;font-family:var(--font-mono);font-size:10px;color:var(--text-muted);min-width:100px}.bpm-display{font-weight:700;color:var(--text-color)}.menu-section{padding:16px;border-bottom:1px solid var(--border-color)}.menu-section h3{font-size:11px;font-weight:700;color:var(--text-color);margin-bottom:12px;letter-spacing:.5px}.slider-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:8px}input[type=range]{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:2px;background:var(--border-color);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--bg-color);border:2px solid var(--text-color);border-radius:50%;cursor:pointer;transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2);background:var(--text-color)}.slider-wrapper span{font-family:var(--font-mono);font-size:10px;width:32px;text-align:right;color:var(--text-muted)}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:11px;font-weight:500}.info-text{font-size:10px;color:var(--text-muted);margin-top:6px;line-height:1.4}.symmetry-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}.symmetry-btn{padding:6px;background:var(--bg-color);border:1px solid var(--border-color);font-family:var(--font-mono);font-size:10px;cursor:pointer}.symmetry-btn.active{background:var(--accent-color);color:var(--accent-text);border-color:var(--accent-color)}.color-sliders-compact{display:flex;flex-direction:column;gap:4px}.label-mini{font-size:9px;width:12px;color:var(--text-muted)}.color-preview-box{height:24px;width:100%;border:1px solid var(--border-color);margin-top:8px;border-radius:2px}.vj-controls{display:flex;gap:8px;margin-bottom:12px}.vj-pro-btn{flex:1;padding:8px;border:1px solid var(--text-color);background:transparent;font-size:10px;font-weight:700;cursor:pointer;transition:all .2s}.vj-pro-btn:hover{background:var(--text-color);color:var(--bg-color)}.reset-btn{width:100%;padding:10px;background:#f0f0f0;border:none;color:#666;font-size:11px;font-weight:700;cursor:pointer}.reset-btn:hover{background:#e0e0e0;color:#333}.mode-selection{display:flex;flex-wrap:wrap;gap:4px}.mode-tag-btn{padding:4px 8px;background:var(--bg-color);border:1px solid var(--border-color);border-radius:2px;font-size:9px;font-family:var(--font-mono);cursor:pointer;color:var(--text-muted)}.mode-tag-btn.active{background:var(--accent-color);color:var(--accent-text);border-color:var(--accent-color)}.color-picker-group input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:24px;height:24px;cursor:pointer;background:none}.color-picker-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-picker-group input[type=color]::-webkit-color-swatch{border:1px solid var(--border-color);border-radius:50%}.context-menu{position:fixed;background:var(--bg-color);border:1px solid var(--border-color);box-shadow:0 4px 12px #0000001a;padding:4px 0;z-index:10000;min-width:140px;display:none}.context-menu.show{display:block}.context-menu-item{padding:8px 16px;font-size:11px;cursor:pointer;color:var(--text-color)}.context-menu-item:hover{background:var(--hover-bg)}.context-menu-separator{height:1px;background:var(--border-color);margin:4px 0}@media (max-width: 1024px){#app-root{grid-template-columns:220px 1fr 220px}}@media (max-width: 768px){#app-root{grid-template-columns:0 1fr 0}.panel-side{display:none}}.icon{width:20px;height:20px;background-image:url(/icons.png);background-size:400% 400%;display:inline-block;vertical-align:middle;filter:invert(0);opacity:.7;transition:opacity .2s}.icon.symbol{background-image:none!important;font-size:16px;display:flex;align-items:center;justify-content:center;line-height:1}body.dark-mode .icon{filter:invert(1)}.mode-btn:hover .icon,.mode-btn.active .icon{opacity:1}.icon-mandala{background-position:0% 0%}.icon-ai{background-position:33.33% 0%}.icon-auto{background-position:66.66% 0%}.icon-gravity{background-position:100% 0%}.icon-solid{background-position:0% 33.33%}.icon-wire{background-position:33.33% 33.33%}.icon-mix{background-position:66.66% 33.33%}.icon-play{background-position:100% 33.33%}.icon-pause{background-position:0% 66.66%}.icon-mic{background-position:33.33% 66.66%}.icon-moon{background-position:66.66% 66.66%}.icon-palette{background-position:100% 66.66%}.icon-camera{background-position:0% 100%}.icon-x{background-position:33.33% 100%}.icon-fullscreen{background-position:66.66% 100%}.icon-record{background-position:100% 100%}.mode-btn{gap:8px;padding:0 12px}.overlay-btn{padding:0}body.high-contrast{--bg-color: #000000;--panel-bg: #000000;--text-color: #FFFFFF;--text-muted: #CCCCCC;--border-color: #FFFFFF;--accent-color: #FFFFFF;--accent-text: #000000;--active-bg: #FFFFFF;--hover-bg: #333333;--focus-color: #FFFFFF}body.high-contrast .controls{background:#000;border:2px solid #FFFFFF}body.high-contrast button{background:#000;color:#fff;border:2px solid #FFFFFF;font-weight:700}body.high-contrast button:hover,body.high-contrast button:focus{background:#fff;color:#000;border-color:#fff}body.high-contrast .mode-btn.active{background:#fff;color:#000;border:3px solid #FFFFFF}*:focus-visible{outline:2px solid var(--text-color);outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--text-color);outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}body.show-keyboard-hints:after{content:"キーボードショートカット: Space=曼荼羅 ↑↓=対称数 R=リフレクト H=ハイコントラスト M=マイク A=音声";position:fixed;bottom:10px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:8px 16px;border-radius:4px;font-size:11px;z-index:9999;pointer-events:none}.fx-btn.active{background:#00ffff26!important;border-color:#0ff9!important;color:#fff!important;text-shadow:0 0 8px rgba(0,255,255,.8)!important;box-shadow:0 0 15px #0ff3,inset 0 0 5px #00ffff1a!important;animation:fx-pulse 2s infinite alternate}@keyframes fx-pulse{0%{box-shadow:0 0 10px #00ffff1a}to{box-shadow:0 0 20px #00ffff4d}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (pointer: coarse){button,.control-btn,.mode-btn,.preset-item{min-width:44px}}.simple-mode #leftPanel{display:none!important}.simple-mode #topBar .mode-control-bar>button:not(#topMandalaBtn):not(#topAutoBtn):not(#topAiBtn){display:none!important}.radar-container{width:100%;height:280px;display:flex;justify-content:center;align-items:center;background:#0003;border-radius:8px;margin-bottom:10px}.simple-mode #audioInfo{display:none!important}.simple-mode #bottomControls{justify-content:center}.simple-mode #mainPanel{width:100%!important;left:0!important}#musicPanel{background:var(--panel-bg);border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;padding:0 16px;z-index:20}.music-controls-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.music-icon-btn{background:transparent;border:none;color:var(--text-color);cursor:pointer;font-size:14px;padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px}.music-icon-btn:hover{background:var(--hover-bg)}#musicTrackTitle{font-size:11px;font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;color:var(--text-muted)}.music-eq-center{display:flex;gap:16px;flex:1;justify-content:center}.eq-bar-group{display:flex;flex-direction:column;align-items:center;gap:2px}.divider-vertical{width:1px;height:20px;background:#ffffff14;margin:0 8px}.eq-bar-container{width:8px;height:20px;background:var(--border-color);border-radius:2px;position:relative;overflow:hidden}.eq-bar{position:absolute;bottom:0;left:0;width:100%;height:20%;background:var(--accent-color);transition:height .05s linear}.eq-label{font-size:8px;font-weight:700;color:var(--text-muted)}.music-stats-right{display:flex;gap:16px;flex:1;justify-content:flex-end;font-family:Outfit,sans-serif;font-size:10px;color:var(--text-muted);letter-spacing:.05em}.stat-item span{color:var(--text-color);font-weight:700}#generatingOverlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--text-color);font-family:var(--font-mono),monospace;font-size:24px;font-weight:700;letter-spacing:.1em;border-right:3px solid var(--accent-color);white-space:nowrap;overflow:hidden;width:0;padding-right:5px;z-index:1000;pointer-events:none;animation:typing 2s steps(13,end) forwards,blink-caret .75s step-end infinite}body.dark-mode #generatingOverlay{color:#fff;border-right-color:#fff}@keyframes typing{0%{width:0}to{width:12em}}@keyframes blink-caret{0%,to{border-color:transparent}50%{border-color:var(--accent-color)}}.hidden{display:none!important}.autopilot-btn.active{background:red!important;color:#fff!important;animation:pilotPulse 1s infinite alternate}@keyframes pilotPulse{0%{opacity:.8;box-shadow:0 0 5px #ff000080}to{opacity:1;box-shadow:0 0 15px #f00c}}.void-dialogue-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:600px;max-width:90vw;background:#000000e6;border:1px solid #333;padding:20px;z-index:1000;font-family:JetBrains Mono,Courier New,monospace;color:#0f0;box-shadow:0 0 30px #00ff001a}.void-terminal{height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.void-output .mode-btn-compact.active{background:#00ffff26;border-color:#0ff9;color:#0ff}.effect-selector{background:#0003;padding:2px;border-radius:6px;border:1px solid rgba(255,255,255,.03)}.dj-effect-btn{background:transparent;border:1px solid transparent;color:#ffffff4d;font-family:Outfit,sans-serif;font-size:9px;letter-spacing:.1em;font-weight:700;padding:6px 0;border-radius:4px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);flex:1;text-transform:uppercase}.dj-effect-btn:hover{color:#ffffffb3;background:#ffffff0d}.dj-effect-btn.current{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;box-shadow:0 0 15px #ffffff1a,inset 0 0 5px #ffffff1a;text-shadow:0 0 8px rgba(255,255,255,.5)}.dj-effect-btn[data-effect=glitch]:hover,.dj-effect-btn[data-effect=glitch].current{color:#f05;border-color:#f056;box-shadow:0 0 15px #ff005526}.dj-effect-btn[data-effect=mosaic]:hover,.dj-effect-btn[data-effect=mosaic].current{color:#0ff;border-color:#0ff6;box-shadow:0 0 15px #00ffff26}.void-output{white-space:pre-wrap;line-height:1.5}.void-output .mode-btn-compact{background:#28282dcc;border:1px solid rgba(255,255,255,.1);color:#fff9;padding:6px 10px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.void-output .mode-btn-compact:hover{background:#3c3c41e6;color:#fff;border-color:#fff3}.void-output .mode-btn-compact.active{background:#00ffff26;border-color:#0ff9;color:#0ff;text-shadow:0 0 10px rgba(0,255,255,.5);box-shadow:inset 0 0 10px #00ffff1a}.void-input-line{display:flex;gap:10px}.void-input{color:#fff}.cursor{animation:blink 1s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.void-keyboard{display:flex;justify-content:center;gap:20px;padding-top:20px;border-top:1px solid #222}.void-keyboard-section{display:flex;gap:10px}.void-key{background:#111;border:1px solid #333;color:#0f0;padding:10px 20px;font-family:inherit;cursor:pointer;transition:all .2s}.void-key:hover{background:#0f0;color:#000}.ui-hidden .panel-side,.ui-hidden #topBar,.ui-hidden #musicPanel{opacity:0;pointer-events:none;transition:all .5s ease-in-out}.ui-hidden #leftPanel{transform:translate(-100%)}.ui-hidden #rightPanel{transform:translate(100%)}.ui-hidden #musicPanel{transform:translateY(100%)}.ui-hidden #topBar{transform:translateY(-100%)}