:root{--bg-primary:#000;--bg-secondary:#0a0a0a;--bg-elevated:#111;--bg-glass:#000000d9;--bg-glass-hover:#000000f2;--text-primary:#fff;--text-secondary:#ccc;--text-muted:#666;--accent:#fff;--accent-glow:#ffffff26;--accent-dim:#ccc;--border-subtle:#ffffff1a;--border-highlight:#fff3;--hover-subtle:#ffffff0d;--hover-medium:#ffffff1a;--hover-strong:#fff3;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--shadow-soft:0 4px 20px #000c;--shadow-glow:0 0 30px #ffffff0d;--transition-fast:.2s ease;--transition-normal:.3s ease;--transition-slow:.4s ease;--font:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow:hidden}#visualizer-canvas{z-index:0;background:var(--bg-primary);width:100vw;height:100vh;transition:filter .1s;position:fixed;top:0;left:0}#visualizer-canvas.invert-colors{filter:invert()}#flash-overlay{z-index:10;pointer-events:none;opacity:0;transition:opacity 50ms,background 50ms;position:fixed;inset:0}#flash-overlay.flash-white{opacity:1;background:#fff}#flash-overlay.flash-black{opacity:1;background:#000}#permission-error{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:3000;background:#000000d9;justify-content:center;align-items:center;width:100vw;height:100vh;display:flex;position:fixed;top:0;left:0}.permission-card{background:var(--bg-surface);border:1px solid var(--glass-border);text-align:center;border-radius:24px;width:90%;max-width:400px;padding:40px;animation:.4s cubic-bezier(.175,.885,.32,1.275) popIn;box-shadow:0 20px 40px #0006}.permission-icon{margin-bottom:20px;font-size:3rem}.permission-card h3{color:var(--text-primary);margin-bottom:12px;font-size:1.5rem}.permission-card p{color:var(--text-muted);margin-bottom:24px;line-height:1.6}.permission-steps{text-align:left;background:#ffffff0d;border-radius:12px;margin-bottom:30px;padding:20px}.permission-steps ol{margin:0;padding-left:20px}.permission-steps li{color:var(--text-primary);margin-bottom:10px;font-size:.9rem}.permission-steps strong{color:var(--accent-primary)}#btn-retry-permission{border-radius:12px;width:100%;margin-bottom:12px;padding:14px;font-weight:600}#btn-close-permission{width:100%;color:var(--text-muted);cursor:pointer;background:0 0;border:none;padding:10px;font-size:.85rem}#btn-close-permission:hover{color:var(--text-primary)}@keyframes popIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.hidden{display:none!important}body.force-hide-ui #control-bar,body.force-hide-ui #preset-drawer,body.force-hide-ui #keyboard-guide,body.force-hide-ui #toast{opacity:0!important;pointer-events:none!important}#start-screen{z-index:100;background:var(--bg-primary);justify-content:center;align-items:center;animation:.6s fadeIn;display:flex;position:fixed;inset:0}.start-card{text-align:center;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);width:90%;max-width:440px;box-shadow:var(--shadow-soft);padding:48px 36px;animation:.7s slideUp}.start-logo{margin-bottom:36px}.logo-icon{filter:drop-shadow(0 0 8px #ffffff4d);width:72px;height:72px;margin-bottom:16px;animation:3s ease-in-out infinite logoPulse}.start-card h1{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:6px;font-size:2.2rem;font-weight:300}.start-subtitle{color:var(--text-secondary);font-size:.9rem}.start-sources{margin-bottom:24px}.start-sources h2{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:16px;font-size:.8rem;font-weight:500}.source-btn{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);width:100%;color:var(--text-primary);cursor:pointer;transition:all var(--transition-normal);text-align:left;font-family:var(--font);align-items:center;gap:14px;margin-bottom:10px;padding:16px 20px;display:flex}.source-btn:hover{background:var(--hover-subtle);border-color:var(--border-highlight);transform:translateY(-1px)}.source-btn:active{transform:translateY(0)}.source-icon{text-align:center;flex-shrink:0;width:40px;font-size:1.6rem}.source-label{font-size:1rem;font-weight:600;display:block}.source-desc{color:var(--text-secondary);margin-top:2px;font-size:.78rem;display:block}.start-hint{color:var(--text-muted);margin-top:8px;font-size:.72rem}#control-bar{z-index:50;transition:opacity var(--transition-slow), transform var(--transition-slow);pointer-events:none;padding:0 16px 16px;position:fixed;bottom:0;left:0;right:0}#control-bar.auto-hidden{opacity:0;transform:translateY(20px)}#control-bar:not(.auto-hidden){opacity:1;transform:translateY(0)}.control-bar-inner{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);pointer-events:auto;align-items:center;gap:8px;padding:10px 16px;display:flex}.preset-info{flex:1;min-width:0}.preset-label{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;transition:color var(--transition-fast);font-size:.82rem;font-weight:500;display:block;overflow:hidden}.preset-label:hover{color:var(--text-primary)}.control-section{align-items:center;gap:4px;display:flex}.transport{gap:2px}.ctrl-btn{border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font);white-space:nowrap;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:8px;font-size:.78rem;font-weight:500;display:flex}.ctrl-btn svg{fill:currentColor;flex-shrink:0;width:20px;height:20px}.ctrl-btn:hover{color:var(--text-primary);background:var(--hover-subtle);border-color:var(--border-subtle)}.ctrl-btn:active{transform:scale(.95)}.ctrl-btn.accent{color:var(--text-primary);border-color:var(--text-primary);filter:drop-shadow(0 0 6px #ffffff80);background:#ffffff14}.ctrl-btn.accent:hover{color:var(--text-primary);border-color:var(--text-primary);filter:drop-shadow(0 0 10px #ffffffb3);background:#ffffff1f}.ctrl-select{appearance:none;border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:1px solid #0000;outline:none;max-width:150px;padding:8px 12px;font-size:.78rem;font-weight:500}.ctrl-select:hover{color:var(--text-primary);background:var(--hover-subtle);border-color:var(--border-subtle)}.ctrl-select:focus{border-color:var(--border-highlight)}.ctrl-select option{background:var(--bg-elevated);color:var(--text-primary)}.audio-source{border-left:1px solid var(--border-subtle);border-right:1px solid var(--border-subtle);gap:4px;padding-left:8px;padding-right:8px}#audio-player{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);pointer-events:auto;margin-top:8px;padding:10px 16px}.player-info{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}#audio-filename{color:var(--text-secondary);text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:12px;font-size:.78rem;font-weight:500;overflow:hidden}#audio-time{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.72rem}.player-controls{align-items:center;gap:12px;margin-top:8px;display:flex}.seek-bar,.volume-bar{appearance:none;background:var(--bg-elevated);cursor:pointer;width:100%;height:4px;transition:height var(--transition-fast);border-radius:2px;outline:none}.seek-bar:hover,.volume-bar:hover{height:6px}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-primary);cursor:pointer;width:14px;height:14px;transition:transform var(--transition-fast);border-radius:50%;box-shadow:0 0 8px #ffffff4d}.volume-bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text-primary);cursor:pointer;width:14px;height:14px;transition:transform var(--transition-fast);border-radius:50%;box-shadow:0 0 8px #ffffff4d}.seek-bar::-webkit-slider-thumb:hover{transform:scale(1.3)}.volume-bar::-webkit-slider-thumb:hover{transform:scale(1.3)}.seek-bar::-moz-range-thumb{background:var(--text-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #ffffff4d}.volume-bar::-moz-range-thumb{background:var(--text-primary);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px;box-shadow:0 0 8px #ffffff4d}.volume-bar{flex-shrink:0;width:80px}#preset-drawer{z-index:60;background:var(--bg-glass);border-left:1px solid var(--border-subtle);pointer-events:auto;flex-direction:column;width:360px;max-width:90vw;animation:.3s slideInRight;display:flex;position:fixed;top:0;bottom:0;right:0;box-shadow:-8px 0 40px #000c}.drawer-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 20px 12px;display:flex}.drawer-header h3{color:var(--text-primary);font-size:1rem;font-weight:500}.drawer-search{padding:12px 20px}#preset-search{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font);transition:border-color var(--transition-fast);outline:none;padding:10px 14px;font-size:.85rem}#preset-search::placeholder{color:var(--text-muted)}#preset-search:focus{border-color:var(--border-highlight);box-shadow:0 0 0 2px #ffffff1a}.drawer-tabs{gap:4px;padding:0 20px 12px;display:flex}.drawer-tab{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);color:var(--text-secondary);font-family:var(--font);cursor:pointer;transition:all var(--transition-fast);text-align:center;flex:1;padding:6px;font-size:.75rem;font-weight:500}.drawer-tab:hover{background:var(--hover-subtle);color:var(--text-primary)}.drawer-tab.active{background:var(--text-primary);color:var(--bg-primary);border-color:var(--text-primary)}.drawer-count{color:var(--text-muted);padding:0 20px 8px;font-size:.72rem}.drawer-list{scrollbar-width:thin;scrollbar-color:var(--bg-elevated) transparent;flex:1;padding:0 12px 20px;list-style:none;overflow-y:auto}.drawer-list::-webkit-scrollbar{width:6px}.drawer-list::-webkit-scrollbar-track{background:0 0}.drawer-list::-webkit-scrollbar-thumb{background:var(--bg-elevated);border-radius:3px}.drawer-list li{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);justify-content:space-between;align-items:center;padding:9px 12px;font-size:.8rem;display:flex}.preset-name-text{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.preset-heart{opacity:0;width:16px;height:16px;transition:all var(--transition-fast);color:var(--text-muted);flex-shrink:0;margin-left:8px;transform:scale(.8)}.preset-heart svg{fill:currentColor;width:100%;height:100%}.drawer-list li:hover{background:var(--hover-subtle);color:var(--text-primary)}.drawer-list li:hover .preset-heart{opacity:.5;transform:scale(1)}.drawer-list li:hover .preset-heart:hover{color:#ff3b3b;opacity:1;transform:scale(1.1)}.drawer-list li.is-favorite .preset-heart{opacity:1;color:#ff3b3b;transform:scale(1)}.drawer-list li.active{background:var(--hover-medium);color:var(--text-primary);border-left:2px solid var(--text-primary);padding-left:10px}.heart-btn{padding:6px}.heart-btn.is-favorite .icon-heart-outline{display:none}.heart-btn.is-favorite .icon-heart-filled{color:#ff3b3b;filter:drop-shadow(0 0 6px #ff3b3b66);display:block!important}#keyboard-guide{z-index:150;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);width:90%;max-width:700px;box-shadow:var(--shadow-soft);pointer-events:auto;padding:24px;animation:.2s scaleIn;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.guide-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.guide-header h3{color:var(--text-primary);font-size:1.1rem;font-weight:500}.guide-content{grid-template-columns:1fr 1fr;gap:0 24px;display:grid}.guide-col{flex-direction:column;gap:20px;display:flex}.guide-section h4{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:12px;font-size:.75rem;font-weight:600}.guide-row{border-bottom:1px solid var(--hover-subtle);color:var(--text-secondary);justify-content:space-between;align-items:center;padding:8px 0;font-size:.85rem;display:flex}.guide-row:last-child{border-bottom:none}kbd{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:3px 8px;font-family:monospace;font-size:.75rem;font-weight:600;display:inline-block;box-shadow:0 2px #ffffff1a}#toast{z-index:200;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);box-shadow:var(--shadow-soft);opacity:0;transition:all var(--transition-normal);pointer-events:none;padding:10px 24px;font-size:.82rem;font-weight:500;position:fixed;top:24px;left:50%;transform:translate(-50%)translateY(-10px)}#toast.show{opacity:1;transform:translate(-50%)translateY(0)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-48%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes logoPulse{0%,to{filter:drop-shadow(0 0 8px #fff3);transform:scale(1)}50%{filter:drop-shadow(0 0 16px #fff6);transform:scale(1.05)}}[data-tooltip]{position:relative}[data-tooltip]:after{content:attr(data-tooltip);background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:.72rem;font-family:var(--font);white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;box-shadow:var(--shadow-soft);z-index:100;padding:6px 10px;font-weight:500;transition:opacity .15s,transform .15s,visibility .15s;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%)translateY(4px)}#btn-close-drawer[data-tooltip]:after{left:auto;right:0;transform:translate(0)translateY(4px)}#btn-close-drawer[data-tooltip]:hover:after{transform:translate(0)translateY(0)}[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.popover{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:260px;box-shadow:var(--shadow-soft);z-index:100;transition:all var(--transition-normal);pointer-events:auto;padding:16px;animation:.3s slideInUp;position:absolute;bottom:calc(100% + 12px);right:0;transform:translateY(10px)}.popover.hidden{opacity:0;transform:translateY(20px);pointer-events:none!important}.popover-header{border-bottom:1px solid var(--border-subtle);margin-bottom:16px;padding-bottom:8px}.popover-header h4{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:12px;font-size:.75rem;font-weight:600}.popover-hint{color:var(--text-secondary);margin:0 0 4px;font-size:.72rem;font-weight:500}.tuning-group label .value-readout{float:right;color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:600}.status-dot{background:var(--text-muted);opacity:.4;width:6px;height:6px;transition:all var(--transition-fast);border-radius:50%;position:absolute;top:6px;right:6px}.status-dot.active{opacity:1;background:#0f8;box-shadow:0 0 6px #0f8c}.ctrl-btn{position:relative}.vu-meter-container{background:#ffffff0d;border:1px solid #ffffff0d;border-radius:7px;width:100%;height:14px;position:relative;overflow:hidden}.vu-meter-bar{background:linear-gradient(90deg,#0f8 0% 60%,#fc0 80%,#ff3b3b 100%);width:0%;height:100%;transition:width 50ms ease-out;box-shadow:0 0 10px #0f83}.vu-meter-labels{justify-content:space-between;margin-top:4px;padding:0 2px;display:flex}.vu-meter-labels span{color:var(--text-muted);letter-spacing:.05em;font-size:.6rem;font-weight:700}.signal-status{color:var(--text-muted);transition:color .3s}.signal-status.active{color:#0f8;text-shadow:0 0 5px #00ff8880}.tuning-group{margin-bottom:20px}.tuning-group label{color:var(--text-secondary);margin-bottom:8px;font-size:.72rem;font-weight:500;display:block}.slider-with-icon{align-items:center;gap:10px;display:flex}.slider-with-icon span{font-size:.9rem}.slider-with-icon input{flex:1}.tuning-row{gap:12px;margin-bottom:20px;display:flex}.toggle-group{flex-direction:column;flex:1;gap:6px;display:flex}.toggle-group label{color:var(--text-muted);font-size:.68rem;font-weight:500}.toggle-group input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:var(--text-primary)}.boost-btn{background:var(--text-primary);width:100%;color:var(--bg-primary);border-radius:var(--radius-md);font-family:var(--font);letter-spacing:.1em;cursor:pointer;transition:all var(--transition-fast);border:none;padding:12px;font-size:.75rem;font-weight:700}.boost-btn:hover{filter:brightness(.9);transform:scale(1.02)}.boost-btn:active{transform:scale(.98)}.boost-btn.active{color:#fff;background:#ff3b3b;box-shadow:0 0 20px #ff3b3b66}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(10px)}}@media (width<=600px){.start-card{padding:32px 24px}.start-card h1{font-size:1.8rem}.control-bar-inner{gap:4px;padding:8px 10px}.preset-info{display:none}.ctrl-btn{padding:6px}.ctrl-btn svg{width:18px;height:18px}.audio-source span{display:none}#preset-drawer{width:100vw;max-width:100vw}.volume-bar{width:50px}}