html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}#fractalCanvas{z-index:1000;width:100%;height:100%;position:fixed;top:0;left:0}#cmOverlay{box-sizing:border-box;pointer-events:auto;z-index:9000;flex-direction:column;gap:20px;width:100%;height:100%;padding:20px;display:flex;position:fixed;top:0;left:0}#cmOverlay.hidden{display:none}#cmCanvas,#curveCanvas{box-sizing:border-box;border:1px solid #fff;width:100%;height:50px}#cmKnobs{flex-direction:row;align-items:flex-start;gap:10px;display:flex}#primCmap,#miscCmap,#xCmap{flex-direction:column;gap:10px;display:inline-flex}#xCmap,#primCmap,#miscCmap{background:#111;border:1px solid #0abaff55;border-radius:10px;padding:10px;box-shadow:0 0 20px #0abaff22}#channels,#xchannels,#miscchannels{flex-direction:row;gap:10px;display:inline-flex}.cmap-row{flex-direction:row;gap:20px;display:flex}.channel-panel{background:#111;border-radius:10px;flex-direction:column;flex:1;gap:10px;padding:16px;display:flex}.channel-red{border:1px solid #f44a;box-shadow:0 0 20px #f442}.channel-green{border:1px solid #4f4a;box-shadow:0 0 20px #4f42}.channel-blue{border:1px solid #48fa;box-shadow:0 0 20px #48f2}.channel-all{border:1px solid #babaff88;box-shadow:0 0 20px #babaff}.knob-wrapper{flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.mod-toggle{color:#fff;cursor:pointer;background:#333;border:1px solid #666;border-radius:6px;margin-top:6px;padding:4px 10px;font-size:10px}.mod-toggle.active{color:#000;background:#0abaff;border-color:#0abaff}.knob-label{color:#cef;white-space:nowrap;opacity:0;pointer-events:none;background:#000a;border:1px solid #0abaff55;border-radius:4px;padding:2px 6px;font-family:Inter,sans-serif;font-size:14px;transition:opacity .25s 40ms,transform .25s 40ms,text-shadow .25s 40ms;position:absolute;top:-26px;left:50%;transform:translate(-50%)translateY(6px)}.knob-wrapper:hover .knob-label,.knob-wrapper.dragging .knob-label{opacity:1;animation:.35s ease-out labelPulse;transform:translate(-50%)translateY(0)}@keyframes labelPulse{0%{text-shadow:0 0 #0abaff00}40%{text-shadow:0 0 10px #0abaffaa}to{text-shadow:0 0 6px #0abaff55}}.knob-row{gap:10px;display:flex}.knob-row input[type=range]{width:100%}.knob{cursor:pointer;background:radial-gradient(circle at 30% 30%,#3a3a3a,#1a1a1a);border:2px solid #0abaff;border-radius:50%;width:50px;height:50px;transition:transform 50ms linear,box-shadow 20ms;position:relative;box-shadow:0 0 10px #0abaff55,inset 0 0 10px #000}.knob:active{transform:scale(.95);box-shadow:0 0 20px #0abaffaa}.knob:after{content:"";background:#0abaff;border-radius:2px;width:4px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%)}#modOverlay{-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:9999;background:0 0;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#modOverlay.hidden{display:none}#modUIContainer{color:#e0e0e0;background:#1a1a1a;border-radius:12px;flex-direction:column;gap:18px;min-width:380px;max-width:520px;max-height:70vh;padding:20px;font-family:sans-serif;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 25px #0009}.mod-slot{background:#262626;border:1px solid #333;border-radius:10px;flex-direction:column;gap:12px;padding:14px;display:flex}.mod-slot label{color:#ccc;margin-bottom:4px;font-size:13px}.mod-slot input[type=range]{width:100%}.param-knobs{flex-direction:column;gap:10px;display:flex}#modClose{color:#fff;cursor:pointer;z-index:10000;background:#444;border:none;border-radius:6px;padding:8px 14px;position:absolute;bottom:20px;right:20px}#modClose:hover{background:#666}button.polish{letter-spacing:.5px;font-family:Arial;font-size:14px;font-weight:600}.dual-slider input[type=range]{background:0 0;width:100%;height:30px;margin:0;position:absolute;top:0;left:0}.dual-slider{width:100%;height:20px;display:flex;position:relative}.dual-slider .track{background:#fcfcfc;border-radius:2px;width:100%;height:8px;position:absolute;top:6px;left:0}.dual-slider .range{background:#0af;border-radius:2px;height:8px;position:absolute;top:6px}.dual-slider .thumb{cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;position:absolute;top:2px;transform:translate(-50%)}.dual-slider .thumb.min{background:#0af}.dual-slider .thumb.max{background:#fa0}#presetSaveBtn{float:right}#presetPopup{z-index:12000;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#presetPopup.hidden,#presetSaveUI.hidden,#presetLoadUI.hidden{display:none}#presetPopupInner{color:#eee;background:#1a1a1a;border-radius:12px;flex-direction:column;gap:12px;width:300px;padding:20px;display:flex}#presetList{border:1px solid #333;max-height:50vh;margin:0;padding:0 6px 0 0;list-style:none;overflow:hidden auto}#presetList li{cursor:pointer;background:#333;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:6px;padding:8px;display:flex}#presetList::-webkit-scrollbar{width:8px}#presetList::-webkit-scrollbar-thumb{background:#555;border-radius:4px}#presetList::-webkit-scrollbar-track{background:#222}#alertPopup{z-index:20000;background:0 0;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}#alertPopup.hidden{display:none}#alertPopupInner{color:#eee;background:#1a1a1a;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:20px;display:flex}#yesNoDialog{z-index:13000;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#yesNoDialog.hidden{display:none}#yesNoInner{color:#eee;background:#1a1a1a;border-radius:10px;flex-direction:column;align-items:center;padding:16px 20px;display:flex}#yesNoMessage{white-space:pre-line;text-align:center;margin-bottom:12px}#yesno-buttons{display:flex}.button{color:#eee;cursor:pointer;text-align:center;white-space:nowrap;background:#444;border:1px solid #666;border-radius:6px;margin:10px;padding:6px 14px;transition:transform 50ms;display:inline-block}.button:active{transform:scale(.95)}.button:hover{background:#555}.modsDiv{background:#444;flex-direction:column;display:flex}.centerdiv{align-self:center;gap:20px;display:flex}#xlutBar{color:#ddd;gap:12px;padding:4px 0;font-size:12px;display:flex}#xlutBar select{color:#eee;background:#222;border:1px solid #555}
