*{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #00ff88;--color-primary-rgb: 0, 255, 136;--color-primary-hover: #00cc6a;--color-bg-panel: rgba(30, 30, 50, .8);--color-bg-panel-dark: rgba(15, 15, 26, .95);--color-border: #444;--color-border-light: #333;--color-text-primary: #e0e0e0;--color-text-secondary: #aaa;--color-text-muted: #888;--color-text-dim: #666;--color-text-bright: #ccc;--color-danger: #ff6666;--color-danger-bg: rgba(255, 102, 102, .1);--color-danger-dark: #ff6b6b;--color-warning: #ffaa00;--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 10px;--spacing-lg: 15px;--spacing-xl: 20px;--transition-fast: all .15s;--transition-normal: all .2s;--border-standard: 1px solid var(--color-border);--border-light: 1px solid var(--color-border-light);--radius-sm: 3px;--radius-md: 4px;--radius-lg: 8px;--radius-round: 50%}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#0f0f1a,#1a1a2e);color:#e0e0e0;min-height:100vh;overflow-x:hidden}html{overflow-x:hidden}.app{display:flex;height:100vh;overflow:hidden}.presets-sidebar::-webkit-scrollbar,.modules-sidebar::-webkit-scrollbar,.modules-list::-webkit-scrollbar,.main-content::-webkit-scrollbar,.preset-list::-webkit-scrollbar{width:0px}.presets-sidebar::-webkit-scrollbar-track,.modules-sidebar::-webkit-scrollbar-track,.modules-list::-webkit-scrollbar-track,.main-content::-webkit-scrollbar-track,.preset-list::-webkit-scrollbar-track{background:transparent}.presets-sidebar::-webkit-scrollbar-thumb,.modules-sidebar::-webkit-scrollbar-thumb,.modules-list::-webkit-scrollbar-thumb,.main-content::-webkit-scrollbar-thumb,.preset-list::-webkit-scrollbar-thumb{background:transparent}.presets-sidebar::-webkit-scrollbar-thumb:hover,.modules-sidebar::-webkit-scrollbar-thumb:hover,.modules-list::-webkit-scrollbar-thumb:hover,.main-content::-webkit-scrollbar-thumb:hover,.preset-list::-webkit-scrollbar-thumb:hover{background:transparent}.sidebar-toggle{display:none;position:fixed;top:15px;left:15px;z-index:1001;background:#0f8;color:#0f0f1a;border:none;border-radius:5px;width:40px;height:40px;font-size:24px;cursor:pointer;flex-shrink:0}.sidebar-toggle:hover{background:#00cc6a}.sidebar-overlay{display:none}.presets-sidebar{width:260px;min-width:260px;background:var(--color-bg-panel-dark);border-right:1px solid #333;padding:20px;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;transition:transform .3s ease}.sidebar-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #333}.sidebar-header>div{flex:1;text-align:center}.about-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(var(--color-primary-rgb),.1);border:1px solid #00ff88;border-radius:var(--radius-round);color:var(--color-primary);font-size:14px;font-weight:600;cursor:pointer;transition:var(--transition-normal);flex-shrink:0}.about-button:hover{background:rgba(var(--color-primary-rgb),.2);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.3)}.sidebar-header h1{font-size:2rem;font-weight:700;color:var(--color-primary);text-shadow:0 0 20px rgba(var(--color-primary-rgb),.5);letter-spacing:.2em;margin:0}.subtitle{color:var(--color-text-dim);font-size:.85rem;letter-spacing:.1em;margin:0}.modules-sidebar{width:260px;min-width:260px;background:var(--color-bg-panel-dark);border-left:1px solid #333;padding:20px;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;transition:transform .3s ease}.modules-sidebar h1{font-size:2rem;font-weight:700;color:var(--color-primary);text-shadow:0 0 20px rgba(var(--color-primary-rgb),.5);letter-spacing:.15em;text-align:center;margin:0}.modules-list{flex:1;overflow-y:auto;margin-top:15px}.modules-empty{padding:30px 15px;text-align:center;font-size:.85rem;color:var(--color-text-dim);font-style:italic}.module-list-item{padding:12px 15px;background:var(--color-bg-panel);border:var(--border-light);border-radius:var(--radius-lg);margin-bottom:10px;transition:var(--transition-normal)}.module-list-item:hover{border-color:#444;background:#28283ccc}.module-list-item-header{display:flex;align-items:center;justify-content:space-between}.module-list-item-name{font-size:.9rem;font-weight:500;text-transform:uppercase;letter-spacing:.1em}.module-add-button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:rgba(var(--color-primary-rgb),.1);border:1px solid #00ff88;border-radius:var(--radius-round);color:var(--color-primary);font-size:18px;font-weight:600;cursor:pointer;transition:var(--transition-normal);flex-shrink:0;line-height:1}.module-add-button:hover{background:rgba(var(--color-primary-rgb),.2);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.3)}.modules-sidebar-toggle{display:none;position:fixed;top:15px;right:15px;z-index:1001;background:#0f8;color:#0f0f1a;border:none;border-radius:5px;width:40px;height:40px;font-size:24px;cursor:pointer;flex-shrink:0}.modules-sidebar-toggle:hover{background:#00cc6a}.modules-sidebar-overlay{display:none}.module-remove-button{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #555;border-radius:var(--radius-md);color:var(--color-text-muted);font-size:18px;font-weight:300;cursor:pointer;transition:var(--transition-normal);flex-shrink:0;line-height:1;margin-right:8px}.module-remove-button:hover{background:#f663;border-color:var(--color-danger);color:var(--color-danger)}.main-content{flex:1;display:flex;flex-direction:column;padding:20px;min-width:0;overflow-y:auto}.visualizer-container{position:relative;width:100%;height:200px;margin-bottom:20px;border-radius:var(--radius-lg);overflow:hidden;border:var(--border-light);flex-shrink:0}.visualizer-canvas{width:100%;height:100%;display:block}.visualizer-label{position:absolute;top:10px;left:50%;transform:translate(-50%);font-size:.75rem;color:#555;text-transform:uppercase;letter-spacing:.1em}.visualizer-wavy-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:4rem;font-weight:700;color:var(--color-primary);text-shadow:0 0 30px rgba(var(--color-primary-rgb),.5);letter-spacing:.15em;pointer-events:none;opacity:0}.visualizer-wavy-text.animate{animation:wavyFadeIn 1s ease-in-out forwards}.visualizer-wavy-text.animate-initial{animation:wavyFadeInInitial 2s ease-in-out forwards}@keyframes wavyFadeIn{0%{opacity:0}to{opacity:.8}}@keyframes wavyFadeInInitial{0%{opacity:0}to{opacity:.8}}.visualizer-pause{position:absolute;top:10px;right:10px;width:32px;height:32px;background:var(--color-bg-panel);border:var(--border-standard);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.visualizer-pause:hover{background:#323246e6;border-color:var(--color-text-dim);color:var(--color-text-secondary)}.visualizer-pause.paused{background:#fa03;border-color:var(--color-warning);color:var(--color-warning)}.visualizer-reset{position:absolute;top:10px;left:10px;padding:6px 10px;height:32px;background:var(--color-bg-panel);border:var(--border-standard);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:var(--transition-normal)}.visualizer-reset:hover{background:#f663;border-color:var(--color-danger);color:var(--color-danger)}.visualizer-shuffle{position:absolute;top:10px;left:82px;padding:6px 10px;height:32px;background:var(--color-bg-panel);border:var(--border-standard);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:14px;cursor:pointer;transition:var(--transition-normal)}.visualizer-shuffle:hover{background:rgba(var(--color-primary-rgb),.2);border-color:var(--color-primary);color:var(--color-primary)}.visualizer-volume-container{position:absolute;bottom:10px;right:10px;width:180px;height:32px;background:var(--color-bg-panel);border:var(--border-standard);border-radius:var(--radius-md);display:flex;align-items:center;padding:0 10px}.visualizer-volume{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#333;border-radius:2px;outline:none;cursor:pointer}.visualizer-volume::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#0f8;border-radius:var(--radius-round);cursor:pointer;transition:transform .1s,box-shadow .1s}.visualizer-volume::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 8px rgba(var(--color-primary-rgb),.5)}.visualizer-volume::-moz-range-thumb{width:14px;height:14px;background:#0f8;border-radius:var(--radius-round);cursor:pointer;border:none}.visualizer-export{position:absolute;bottom:10px;left:10px;width:80px;height:32px;background:rgba(var(--color-primary-rgb),.1);border:1px solid #00ff88;border-radius:var(--radius-md);color:var(--color-primary);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-normal)}.visualizer-export:hover:not(:disabled){background:rgba(var(--color-primary-rgb),.2);border-color:var(--color-primary-hover)}.visualizer-export.recording{background:#f003;border-color:red;color:red;animation:pulse 1s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #f006}50%{box-shadow:0 0 0 8px #f000}}.visualizer-export:disabled{opacity:.5;cursor:not-allowed}.visualizer-format-select{position:absolute;bottom:10px;left:100px;height:32px;padding:0 8px;background:var(--color-bg-panel);border:var(--border-standard);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:var(--transition-normal)}.visualizer-format-select:hover:not(.disabled){background:#323246e6;border-color:var(--color-text-dim);color:var(--color-text-secondary)}.visualizer-format-select.disabled{opacity:.5;cursor:not-allowed}.visualizer-format-select option{background:#1e1e32;color:var(--color-text-secondary)}.controls-container{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;margin-bottom:20px}.controls-hint{text-align:center;padding:40px 20px;color:#555;font-size:.9rem;font-style:italic}.controls-hint span{color:var(--color-primary);font-weight:500}.control-panel{background:var(--color-bg-panel);border-radius:var(--radius-lg);padding:12px;border:var(--border-light);transition:border-color .2s}.control-panel:hover{border-color:#444}.control-panel h2{display:flex;align-items:center;font-size:.85rem;font-weight:500;color:var(--color-text-muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid #333;padding-bottom:8px}.panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;border-bottom:1px solid #333;padding-bottom:8px}.panel-header .panel-title{margin:0;border:none;padding:0}.panel-header .info-tooltip{margin-left:6px}.control-panel>h2{display:flex;align-items:center}.control-panel>h2 .info-tooltip{margin-left:6px}.toggle-button{width:32px;height:32px;background:#222;border:2px solid #444;border-radius:var(--radius-round);cursor:pointer;position:relative;transition:var(--transition-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center}.toggle-button:before{content:"";position:absolute;width:14px;height:14px;border:2px solid #555;border-radius:var(--radius-round);border-top-color:transparent;transform:rotate(0);transition:var(--transition-normal)}.toggle-button:after{content:"";position:absolute;width:2px;height:6px;background:#555;top:5px;border-radius:1px;transition:var(--transition-normal)}.toggle-button.enabled{background:#00ff8826;border-color:var(--color-primary);box-shadow:0 0 15px rgba(var(--color-primary-rgb),.4)}.toggle-button.enabled:before{border-color:var(--color-primary);border-top-color:transparent;box-shadow:0 0 8px rgba(var(--color-primary-rgb),.6)}.toggle-button.enabled:after{background:#0f8;box-shadow:0 0 8px rgba(var(--color-primary-rgb),.6)}.toggle-button:hover{border-color:var(--color-text-dim)}.toggle-button.enabled:hover{border-color:var(--color-primary);box-shadow:0 0 20px rgba(var(--color-primary-rgb),.6)}.control-panel.disabled .panel-controls{opacity:.4;transition:opacity .2s}.panel-controls{transition:opacity .2s}.control-panel.disabled .panel-controls input[type=range]{pointer-events:auto;cursor:pointer}.control-row{margin-bottom:12px}.control-row:last-child{margin-bottom:0}.control-row label{display:block;font-size:.8rem;color:var(--color-text-secondary);margin-bottom:6px}.control-row .value{color:var(--color-primary);font-family:Consolas,Monaco,monospace;font-size:.85em}.editable-value{color:var(--color-primary);font-family:Consolas,Monaco,monospace;font-size:1em;cursor:pointer;padding:2px 4px;border-radius:var(--radius-sm);transition:background .15s;display:inline-block;margin:0 3px 0 0;text-align:left}.editable-value:hover{background:rgba(var(--color-primary-rgb),.1)}.editable-value-input{color:var(--color-primary);font-family:Consolas,Monaco,monospace;font-size:1em;background:#1a1a2e;border:1px solid #00ff88;border-radius:var(--radius-sm);padding:1px 3px;text-align:left;display:inline-block;margin:0 1px 0 0;vertical-align:baseline;box-sizing:border-box}.editable-value-input::-webkit-outer-spin-button,.editable-value-input::-webkit-inner-spin-button{opacity:0;position:absolute;right:0;width:0;height:0}.editable-value-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.2)}.control-row .hint{font-size:.65rem;color:#555;margin-top:3px}input[type=range]{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#333;border-radius:var(--radius-sm);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:#0f8;border-radius:var(--radius-round);cursor:pointer;transition:transform .1s,box-shadow .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.5)}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:#0f8;border-radius:var(--radius-round);cursor:pointer;border:none}.play-button{width:100%;padding:10px 20px;font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border:2px solid #00ff88;background:transparent;color:var(--color-primary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal)}.play-button:hover{background:rgba(var(--color-primary-rgb),.1);box-shadow:0 0 20px rgba(var(--color-primary-rgb),.3)}.play-button.playing{background:#0f8;color:#1a1a2e}.wave-selector{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.wave-button{padding:6px 10px;font-size:.7rem;text-transform:capitalize;border:var(--border-standard);background:transparent;color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal)}.wave-button:hover{border-color:var(--color-text-dim);color:var(--color-text-secondary)}.wave-button.active{border-color:var(--color-primary);color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1)}.filter-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.filter-button{padding:5px 8px;font-size:.65rem;text-transform:capitalize;border:var(--border-standard);background:transparent;color:var(--color-text-muted);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal)}.filter-button:hover{border-color:var(--color-text-dim);color:var(--color-text-secondary)}.filter-button.active{border-color:var(--color-primary);color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1)}.control-panel.oscillator h2,.control-panel.oscillator .panel-title{color:var(--color-text-muted);transition:color .5s ease}.control-panel.oscillator.playing h2,.control-panel.oscillator.playing .panel-title{color:#e0e0e0}.control-panel.filter h2,.control-panel.filter .panel-title{color:#ff6b6b;transition:color .5s ease}.control-panel.eq h2,.control-panel.eq .panel-title{color:#00ced1;transition:color .5s ease}.control-panel.distortion h2,.control-panel.distortion .panel-title{color:orange;transition:color .5s ease}.control-panel.bitcrusher h2,.control-panel.bitcrusher .panel-title{color:#f0f;transition:color .5s ease}.control-panel.ringmod h2,.control-panel.ringmod .panel-title{color:#0ff;transition:color .5s ease}.control-panel.vibrato h2,.control-panel.vibrato .panel-title{color:#9370db;transition:color .5s ease}.control-panel.tremolo h2,.control-panel.tremolo .panel-title{color:gold;transition:color .5s ease}.control-panel.phaser h2,.control-panel.phaser .panel-title{color:#ff1493;transition:color .5s ease}.control-panel.flanger h2,.control-panel.flanger .panel-title{color:#ff69b4;transition:color .5s ease}.control-panel.granular h2,.control-panel.granular .panel-title{color:#20b2aa;transition:color .5s ease}.control-panel.delay h2,.control-panel.delay .panel-title{color:#ff4500;transition:color .5s ease}.control-panel.reverb h2,.control-panel.reverb .panel-title{color:#8a2be2;transition:color .5s ease}.control-panel.master-volume h2,.control-panel.master-volume .panel-title{color:#e0e0e0;transition:color .5s ease}.control-panel.disabled h2,.control-panel.disabled .panel-title{color:#888!important;transition:color .5s ease}.info-tooltip{position:relative;display:inline-flex;align-items:center}.info-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:10px;font-weight:600;font-style:italic;font-family:Georgia,serif;color:var(--color-text-dim);padding:0 0 1px;margin:0;background:transparent;border:1px solid #555;border-radius:var(--radius-round);cursor:help;transition:var(--transition-normal)}.info-icon:hover{color:var(--color-primary);border-color:var(--color-primary)}.info-text{visibility:hidden;opacity:0;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);width:220px;padding:10px 12px;background:#141423fa;border:var(--border-standard);border-radius:6px;font-size:.72rem;font-weight:400;font-style:normal;line-height:1.5;color:var(--color-text-bright);text-transform:none;letter-spacing:normal;text-align:left;box-shadow:0 4px 20px #0006;z-index:1000;transition:opacity .2s,visibility .2s;pointer-events:none}.info-text:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:6px solid transparent;border-top-color:#444}.info-tooltip:hover .info-text{visibility:visible;opacity:1}@media (min-width: 900px){.control-panel:nth-child(5n) .info-text,.control-panel:last-child .info-text{left:auto;right:0;transform:translate(0)}.control-panel:nth-child(5n) .info-text:after,.control-panel:last-child .info-text:after{left:auto;right:10px;transform:translate(0)}}.piano-container{margin-top:auto;padding:15px;background:var(--color-bg-panel);border-radius:var(--radius-lg);border:var(--border-light)}.piano{position:relative;height:120px;-webkit-user-select:none;user-select:none}.white-keys{display:flex;height:100%;gap:2px}.piano-key{border:none;cursor:pointer;transition:all .05s}.white-key{flex:1;background:linear-gradient(to bottom,#f5f5f5,#e0e0e0);border-radius:0 0 4px 4px;border:1px solid #999;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.white-key:hover{background:linear-gradient(to bottom,#fff,#f0f0f0)}.white-key:active,.white-key.pressed{background:linear-gradient(to bottom,#ddd,#ccc);transform:translateY(2px)}.key-label{font-size:.7rem;color:var(--color-text-dim);font-weight:600;text-transform:uppercase}.black-key .key-label{font-size:.55rem;color:var(--color-text-secondary)}.black-keys{position:absolute;top:0;left:0;right:0;height:60%;pointer-events:none}.black-key{position:absolute;width:calc(((100% - 26px) / 14) * .67);height:100%;background:linear-gradient(to bottom,#333,#111);border-radius:0 0 3px 3px;border:1px solid #000;pointer-events:auto;z-index:1}.black-key:hover{background:linear-gradient(to bottom,#444,#222)}.black-key:active,.black-key.pressed{background:linear-gradient(to bottom,#222,#000);transform:translateY(2px)}.app-footer{text-align:center}.app-footer p{font-size:.7rem;color:#555;font-family:Consolas,Monaco,monospace}.feedback-request{margin-top:15px;color:#888!important}.feedback-request a{color:var(--color-primary);text-decoration:none;font-weight:700;transition:color .2s}.feedback-request a:hover{color:var(--color-primary-hover);text-decoration:underline}.preset-manager,.preset-panel{display:flex;flex-direction:column;flex:1;overflow:hidden}.preset-header{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #333;flex-shrink:0}.preset-header h3{font-size:.75rem;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.1em;margin:0}.preset-save-button{padding:6px 8px;font-size:1.1rem;border:1px solid #00ff88;background:transparent;color:var(--color-primary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-normal);height:32px;width:42px;flex-shrink:0;margin-left:6px;display:flex;align-items:center;justify-content:center;line-height:1}.preset-save-button:hover{background:rgba(var(--color-primary-rgb),.1);box-shadow:0 0 10px rgba(var(--color-primary-rgb),.3)}.preset-name-input{flex:0 1 auto;min-width:0;padding:6px 8px;font-size:.8rem;background:#141423cc;border:var(--border-standard);border-radius:var(--radius-md);color:#e0e0e0;outline:none;height:32px}.preset-name-input:focus{border-color:var(--color-primary)}.preset-name-input::placeholder{color:var(--color-text-dim)}.preset-error{padding:8px 12px;margin:0 12px;font-size:.75rem;color:#ff6b6b;background:#ff6b6b1a;border:1px solid #ff6b6b;border-radius:var(--radius-md);flex-shrink:0}.preset-list{flex:1;overflow-y:auto;padding:8px 0}.preset-empty{padding:30px 15px;text-align:center;font-size:.8rem;color:var(--color-text-dim);font-style:italic}.preset-item{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:var(--color-bg-panel);border:var(--border-light);border-radius:var(--radius-lg);margin-bottom:10px;cursor:pointer;transition:var(--transition-normal)}.preset-item:hover{background:#28283ccc;border-color:#444}.preset-item .preset-name{font-size:.85rem;color:var(--color-text-bright);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;flex:1;min-width:0;line-height:1.3;word-break:break-word;overflow-wrap:break-word}.preset-item .preset-actions{display:flex;align-items:center;gap:12px;margin-left:8px}.preset-share-button,.preset-delete-button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--color-text-dim);background:transparent;border:none;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast);flex-shrink:0}.preset-share-button:hover{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.1)}.preset-delete-button:hover{color:var(--color-danger);background:var(--color-danger-bg)}.preset-link-id{font-size:.8rem;color:var(--color-text-dim);font-family:Courier New,monospace;padding:3px 8px;background:rgba(var(--color-primary-rgb),.1);border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);font-weight:500}.preset-link-id:hover{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.2)}.preset-list-header{font-size:.95rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:1.5px;text-align:center;padding:8px 0;margin-bottom:4px;font-weight:500}.toast-notification{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#0f8;color:#0f0f1a;padding:10px 20px;border-radius:5px;font-size:.9rem;font-weight:500;box-shadow:0 4px 12px #0000004d;animation:toastFadeIn .3s ease forwards;z-index:1000;display:flex;align-items:center;gap:12px}.toast-notification.fading-out{animation:toastFadeOut .3s ease forwards}.toast-undo-button{background:transparent;color:#0f0f1a;border:1px solid #0f0f1a;padding:2px 8px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s ease}.toast-undo-button:hover{background:#0f0f1a;color:var(--color-primary)}@keyframes toastFadeIn{0%{opacity:0;transform:translate(-50%) translateY(10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastFadeOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}@media (max-width: 900px){.app{padding:10px;padding-top:max(10px,env(safe-area-inset-top,0));padding-bottom:env(safe-area-inset-bottom,0)}.app-header h1{font-size:1.8rem}.controls-hint{font-size:.8rem;padding:30px 15px}.visualizer-container{height:150px}.visualizer-wavy-text{font-size:2.5rem}.visualizer-volume-container{width:120px}.visualizer-format-select{left:100px}.controls-container{grid-template-columns:repeat(3,1fr);gap:10px}.control-panel{padding:12px}.filter-selector{grid-template-columns:repeat(2,1fr)}.editable-value{cursor:default;pointer-events:none}.editable-value:hover{background:transparent}.toggle-button{width:28px;height:28px}.toggle-button:before{width:12px;height:12px}.toggle-button:after{width:2px;height:5px;top:4px}.sidebar-toggle{display:flex;align-items:center;justify-content:center}.sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999}.presets-sidebar{position:fixed;top:0;left:0;height:100vh;z-index:1000;transform:translate(-100%)}.presets-sidebar.open{transform:translate(0)}.modules-sidebar-toggle{display:flex;align-items:center;justify-content:center}.modules-sidebar-overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;z-index:999}.modules-sidebar{position:fixed;top:0;right:0;height:100vh;z-index:1000;transform:translate(100%)}.modules-sidebar.open{transform:translate(0)}.main-content{padding:60px 8px 20px}}@media (max-width: 900px) and (orientation: portrait){.info-tooltip .info-icon{display:none}.panel-title{cursor:pointer}.info-tooltip.show-info .info-text{visibility:visible;opacity:1}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000;animation:modalFadeIn .2s ease}.modal-content{background:#141423fa;border:var(--border-standard);border-radius:12px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px #00000080;animation:modalSlideIn .3s ease;position:relative}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#1e1e3280}.modal-content::-webkit-scrollbar-thumb{background:#444;border-radius:var(--radius-md)}.modal-content::-webkit-scrollbar-thumb:hover{background:#555}.modal-close{position:absolute;top:15px;right:15px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:var(--border-standard);border-radius:var(--radius-round);color:var(--color-text-muted);font-size:20px;cursor:pointer;transition:var(--transition-normal)}.modal-close:hover{background:#f663;border-color:var(--color-danger);color:var(--color-danger)}.modal-content h2{padding:20px 25px 15px;font-size:1.5rem;font-weight:300;color:var(--color-primary);text-shadow:0 0 20px rgba(var(--color-primary-rgb),.5);letter-spacing:.1em;margin:0;border-bottom:1px solid #333}.modal-body{padding:20px 25px}.modal-body h3{font-size:.9rem;font-weight:500;color:#e0e0e0;margin:20px 0 10px;text-transform:uppercase;letter-spacing:.1em}.modal-body h3:first-child{margin-top:0}.modal-body p{font-size:.85rem;line-height:1.6;color:var(--color-text-secondary);margin-bottom:12px}.modal-body ul{margin:10px 0;padding-left:20px}.modal-body li{font-size:.85rem;line-height:1.6;color:var(--color-text-secondary);margin-bottom:6px}.modal-body code{background:#0000004d;padding:2px 6px;border-radius:var(--radius-sm);font-family:Consolas,Monaco,monospace;font-size:.8rem;color:var(--color-primary)}.modal-body a{color:var(--color-primary);text-decoration:none;transition:color .2s}.modal-body a:hover{color:var(--color-primary-hover);text-decoration:underline}.modal-footer{padding:15px 25px;border-top:1px solid #333;text-align:center}.modal-footer p{font-size:.75rem;color:var(--color-text-dim);margin:0}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width: 900px){.modal-content{width:95%;max-height:85vh}.modal-content h2{font-size:1.2rem;padding:15px 20px 12px}.modal-body{padding:15px 20px}.modal-body p,.modal-body li{font-size:.8rem}}