html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}.hidden{display:none!important}#fractalCanvas{z-index:1000;touch-action:none;cursor:grab;width:100%;height:100%;position:fixed;top:0;left:0}#fractalCanvas.navigating{cursor:grabbing}#fullscreenBtn{z-index:9001;position:fixed;top:12px;right:12px}#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;min-height:0;padding:8px;display:flex;overflow:auto}#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{-webkit-user-select:none;user-select:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.knob-label{color:#cef;white-space:nowrap;margin-top:5px;font-size:11px;line-height:16px}.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-value{font-variant-numeric:tabular-nums;color:#cef;white-space:nowrap;opacity:0;pointer-events:none;z-index:5;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.dragging .knob-value{opacity:1;animation:.35s ease-out labelPulse;transform:translate(-50%)translateY(0)}.knob-wrapper:has(.knob:hover) .knob-value{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;touch-action:none;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-punch-arc{z-index:1;opacity:0;pointer-events:none;border-radius:50%;position:absolute;inset:4px;-webkit-mask:radial-gradient(circle closest-side,#0000 75%,#000 75% 87%,#0000 90%);mask:radial-gradient(circle closest-side,#0000 75%,#000 75% 87%,#0000 90%)}.knob-punch-needle{z-index:3;transform:rotate(var(--punch-offset,0deg));pointer-events:none;position:absolute;inset:0}.knob-punch-needle:after{content:"";border-radius:2px;width:4px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%)}.knob.punch-up .knob-punch-arc{opacity:.5;background:conic-gradient(from 0deg, #ff3535 0deg, #ff3535 var(--punch-sweep), transparent var(--punch-sweep))}.knob.punch-up .knob-punch-needle:after{background:#ff3535}.knob.punch-down .knob-punch-arc{opacity:.5;background:conic-gradient(from var(--punch-offset), #35e66c 0deg, #35e66c var(--punch-sweep), transparent var(--punch-sweep))}.knob.punch-down .knob-punch-needle:after{background:#35e66c}.knob:active{transform:scale(.95);box-shadow:0 0 20px #0abaffaa}.knob:after{content:"";z-index:2;background:#0abaff;border-radius:2px;width:4px;height:14px;position:absolute;top:8px;left:50%;transform:translate(-50%)}#modOverlay{z-index:9999;pointer-events:none;background:0 0;justify-content:center;align-items:center;width:auto;height:auto;display:flex;position:fixed;top:24px;left:24px}#modOverlay.hidden{display:none}#modUIContainer{color:#e0e0e0;box-sizing:border-box;pointer-events:auto;background:#1a1a1a;border:1px solid #0abaff55;border-radius:12px;flex-direction:column;gap:18px;width:min(560px,100vw - 48px);min-width:0;max-height:calc(70vh - 33.6px);padding:16px;font-family:sans-serif;display:flex;position:relative;overflow-y:auto;box-shadow:0 0 25px #0009}.modHeader{cursor:move;-webkit-user-select:none;user-select:none;color:#cef;background:#333;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:10px;display:flex}.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,.param-controls{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:static}#modClose:hover{background:#666}#modContent{flex-direction:column;gap:14px;display:flex}.mod-slot-heading,.param-control-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.mod-slot-heading h2{color:#cef;margin:0;font-size:15px}.mod-section{flex-direction:column;gap:8px;min-width:0;display:flex}.mod-section h3{color:#7ccfee;letter-spacing:.06em;margin:0;font-size:12px}.param-control{flex-direction:column;gap:6px;display:flex}.param-control output{color:#cef;font-variant-numeric:tabular-nums;font-size:12px}#modUIContainer select{box-sizing:border-box;color:#e0e0e0;background:#151b22;border:1px solid #427087;border-radius:6px;width:100%;padding:7px}#modUIContainer input{accent-color:#0abaff}.param-checkbox{flex-direction:row;justify-content:space-between;align-items:center}.param-control-error{color:#f88}#baseModeOptions{background:#14242e;border:1px solid #0abaff44;border-radius:10px;padding:14px}.mod-remove{color:#fbb}.mod-add{align-self:flex-start}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}#editorToolbar,#xlutBar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}#presetBtn{margin-left:auto}#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{display:none}#presetPopupInner{box-sizing:border-box;color:#eee;background:#1a1a1a;border-radius:12px;flex-direction:column;gap:12px;width:min(1080px,100vw - 32px);max-height:calc(100vh - 48px);padding:20px;display:flex;overflow-y:auto}.preset-list{border:1px solid #333;max-height:35vh;margin:0;padding:0 6px 0 0;list-style:none;overflow:hidden auto}.preset-list li{background:#333;border-radius:6px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;padding:8px;display:flex}.preset-list::-webkit-scrollbar{width:8px}.preset-list::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.preset-list::-webkit-scrollbar-track{background:#222}.preset-header,.preset-actions,#presetSaveUI{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.preset-header{justify-content:space-between}.preset-header h2{margin:0 0 8px}#presetPopupInner button,#presetPopupInner input,#presetPopupInner select,#presetBtn{color:#e0efff;background:#18232c;border:1px solid #427087;border-radius:6px;padding:8px}#presetPopupInner button{cursor:pointer}#presetPopupInner button:hover{background:#294152}.preset-load{text-align:left;overflow-wrap:anywhere;flex:1;min-width:100px}#presetStatus,#communityConfigNotice,#problemStatus{overflow-wrap:anywhere;color:#cef;margin:0}.preset-key{flex-direction:column;gap:5px;font-size:12px;display:flex}.community-auth,.community-tabs,.community-browser-tools{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.community-auth>div{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.community-tabs{border-bottom:1px solid #427087;gap:4px}.community-tabs button[aria-selected=true]{background:#17617b!important;border-color:#61c9ee!important}.community-browser-tools{justify-content:space-between}.community-browser-tools label,#presetSaveUI label,#problemForm label{flex-direction:column;flex:220px;gap:5px;display:flex}#presetSaveUI .preset-publish{flex-direction:row;align-items:center}#presetDescriptionInput,#problemForm textarea,#problemForm input{box-sizing:border-box;color:#e0efff;width:100%;font:inherit;background:#101820;border:1px solid #427087;border-radius:6px;padding:8px}.community-preset-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;max-height:48vh;padding:2px;display:grid;overflow-y:auto}.community-preset-card{background:#202a31;border:1px solid #344c59;border-radius:10px;flex-direction:column;gap:8px;min-width:0;padding:12px;display:flex}.community-preset-preview{background:radial-gradient(ellipse at 25% 60%, var(--preview-a), transparent 55%), radial-gradient(ellipse at 75% 30%, var(--preview-b), transparent 55%), #101820;border-radius:7px;min-height:76px}.community-preset-heading,.community-preset-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.community-preset-heading h3,.community-preset-card p{margin:0}.community-preset-heading h3{overflow-wrap:anywhere;font-size:16px}.featured-badge{color:#ffe08a;white-space:nowrap;font-size:12px}.community-preset-author,.community-preset-stats{color:#b6d7e5;font-size:13px}.community-preset-description{overflow-wrap:anywhere;font-size:13px}.community-preset-actions button{flex:auto}.community-error{color:#faa}#problemPopup{z-index:15000;background:#000000b8;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#problemPopup.hidden{display:none}#problemForm{box-sizing:border-box;color:#eee;background:#1a1a1a;border-radius:12px;flex-direction:column;gap:12px;width:min(620px,100vw - 32px);max-height:calc(100vh - 32px);padding:20px;display:flex;overflow:auto}#problemBtn:disabled{opacity:.5;cursor:not-allowed}@media (width<=650px){.community-browser-tools{flex-direction:column;align-items:stretch}.community-preset-list{grid-template-columns:1fr}}#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}
