:root{--page-background-color:#2a0045;--card-background-color:purple;--input-background-color:indigo;--body-text-color:#00dd58;--label-text-color:#fff;--placeholder-text-color:#fff;--active-focus-highlight-color:purple;--border-color:#00dd58;--button-background-color:indigo;--button-text-color:#00dd58;--border-radius:16px;--gradient-frame-background:#ffd400;--font-body:"Roboto", Ubuntu, Arial, monospace;--font-display:"Arial", monospace;--font-size-normal:24px;--font-size-small:calc(var(--font-size-normal) - 2px);--font-size-medium:calc(var(--font-size-normal) + 2px);--font-size-large:calc(var(--font-size-normal) + 6px);--font-size-xlarge:42px;--tab-button-font-size:30px;--app-background-default:var(--card-background-color);--card-title-text-color:#39ff14;--card-body-text-color:var(--body-text-color);--tab-active-background-color:var(--active-focus-highlight-color);--tab-active-text-color:#39ff14;--tab-inactive-background-color:#46076d;--tab-inactive-text-color:var(--label-text-color);--gradient-preview-window-background-color:indigo;--gradient-dropdown-background-color:var(--input-background-color);--gradient-dropdown-inactive-text-color:var(--body-text-color);--gradient-dropdown-hover-active-text-color:#fff;--gradient-dropdown-hover-background-color:var(--active-focus-highlight-color);--gradient-input-background-color:var(--input-background-color);--gradient-input-text-color:#fff;--gradient-button-background-color:var(--button-background-color);--gradient-button-text-color:#00dd58;--gradient-palette-strip-background-color:#46076d;--gradient-label-background-color:transparent;--gradient-category-menu-background-color:var(--card-background-color);--gradient-category-item-hover-background-color:var(--active-focus-highlight-color);--gradient-category-item-hover-text-color:#fff;--gradient-category-item-text-color:#00e5ff;--colorwheel-body-background-color:var(--page-background-color);--colorwheel-card-background-color:var(--card-background-color);--colorwheel-card-text-color:var(--body-text-color);--colorwheel-active-button-background-color:var(--button-background-color);--colorwheel-active-button-text-color:#00dd58;--colorwheel-inactive-button-background-color:var(--input-background-color);--colorwheel-inactive-button-text-color:var(--label-text-color);--colorwheel-slider-label-text-color:var(--label-text-color);--colorwheel-slider-maximum-text-color:var(--label-text-color)}#gradient-tab{--page-background-color:var(--tab1-page-background-color);--card-background-color:var(--tab1-card-background-color);--card-title-text-color:var(--tab1-card-title-text-color);--card-body-text-color:var(--tab1-card-body-text-color);--input-background-color:var(--tab1-input-background-color);--body-text-color:var(--tab1-body-text-color);--label-text-color:var(--tab1-label-text-color);--placeholder-text-color:var(--tab1-placeholder-text-color);--active-focus-highlight-color:var(--tab1-active-focus-highlight-color);--border-color:var(--tab1-border-color);--button-background-color:var(--tab1-button-background-color);--button-text-color:var(--tab1-button-text-color);--gradient-preview-window-background-color:var(--tab1-preview-window-background-color);--gradient-dropdown-background-color:var(--tab1-dropdown-background-color);--gradient-dropdown-inactive-text-color:var(--tab1-dropdown-inactive-text-color);--gradient-dropdown-hover-background-color:var(--tab1-dropdown-hover-background-color);--gradient-dropdown-hover-active-text-color:var(--tab1-dropdown-hover-active-text-color);--gradient-input-background-color:var(--tab1-input-background-color);--gradient-input-text-color:var(--tab1-input-text-color);--gradient-button-background-color:var(--tab1-button-background-color);--gradient-button-text-color:var(--tab1-button-text-color);--gradient-palette-strip-background-color:var(--tab1-palette-strip-background-color);--gradient-label-background-color:var(--tab1-label-background-color);--gradient-category-menu-background-color:var(--tab1-category-menu-background-color);--gradient-category-item-hover-background-color:var(--tab1-category-item-hover-background-color);--gradient-category-item-hover-text-color:var(--tab1-category-item-hover-text-color);--gradient-category-item-text-color:var(--tab1-category-item-text-color)}#colorwheel-tab{--page-background-color:var(--tab2-page-background-color);--card-background-color:var(--tab2-card-background-color);--card-title-text-color:var(--tab2-card-title-text-color);--card-body-text-color:var(--tab2-card-body-text-color);--input-background-color:var(--tab2-input-background-color);--body-text-color:var(--tab2-body-text-color);--label-text-color:var(--tab2-label-text-color);--placeholder-text-color:var(--tab2-placeholder-text-color);--active-focus-highlight-color:var(--tab2-active-focus-highlight-color);--border-color:var(--tab2-border-color);--button-background-color:var(--tab2-button-background-color);--button-text-color:var(--tab2-button-text-color);--colorwheel-body-background-color:var(--tab2-colorwheel-body-background-color);--colorwheel-card-background-color:var(--tab2-colorwheel-card-background-color);--colorwheel-card-text-color:var(--tab2-colorwheel-card-text-color);--colorwheel-active-button-background-color:var(--tab2-colorwheel-active-button-background-color);--colorwheel-active-button-text-color:var(--tab2-colorwheel-active-button-text-color);--colorwheel-inactive-button-background-color:var(--tab2-colorwheel-inactive-button-background-color);--colorwheel-inactive-button-text-color:var(--tab2-colorwheel-inactive-button-text-color);--colorwheel-slider-label-text-color:var(--tab2-colorwheel-slider-label-text-color);--colorwheel-slider-maximum-text-color:var(--tab2-colorwheel-slider-maximum-text-color)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--page-background-color);color:var(--body-text-color);font-size:var(--font-size-medium);min-height:100vh;font-family:var(--font-body), "Roboto";flex-direction:column;display:flex;overflow-x:hidden}#app-intro-title{color:#0f0;text-align:center;font-weight:700;font-size:var(--font-size-large);padding:10px 24px 0;display:block}.nav{background:var(--tab-inactive-background-color);border-bottom:2px solid var(--border-color);flex-shrink:0;justify-content:space-between;align-items:center;height:75px;padding:0 20px;display:flex}.nav-links{align-items:center;gap:8px;display:flex}.nav-link{font-family:var(--font-body), "Century Gothic UI", monospace;font-size:var(--font-size-xlarge);cursor:pointer;color:var(--label-text-color);background:0 0;border:2px solid #0000;border-radius:30px;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-weight:800;text-decoration:none;transition:all .18s;display:flex}.nav-link:hover{color:var(--body-text-color);border-color:var(--active-focus-highlight-color);background:var(--input-background-color)}.nav-link.active{color:#fff;background:var(--active-focus-highlight-color);filter:brightness(1.25);border-color:var(--active-focus-highlight-color);min-height:80px;font-weight:900}.nav-settings-btn{cursor:pointer;font-size:var(--font-size-xlarge);color:var(--label-text-color);background:0 0;border:none;border-radius:50%;align-items:center;padding:4px 8px;transition:color .2s,background .2s;display:flex}.nav-settings-btn:hover{color:var(--active-focus-highlight-color);filter:brightness(1.25);background:var(--input-background-color)}.page{flex-direction:column;flex:1;min-height:0;display:none}.page.active{display:flex}.rainbow-banner{background:linear-gradient(90deg,#af0a5f 0%,#c60 20%,#ca0 40%,teal 60%,#1a3366 80%,#551a66 100%);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;height:100px;margin:10px 16px 0;display:flex;position:relative;box-shadow:0 4px 20px #00000080}.donate-link{color:#fff;font-family:var(--font-body);font-size:var(--font-size-large);text-shadow:1px 1px #000000b3;font-weight:700;text-decoration:none;transition:color .15s;position:absolute;right:64px}.donate-link:hover{color:#39ff14}.donate-link:focus-visible{outline-offset:3px;outline:3px solid #39ff14}.banner-text{font-family:var(--font-body), monospace;font-size:var(--banner-font-size,var(--font-size-xlarge));letter-spacing:.04em;text-shadow:2px 2px #000000e6;text-transform:var(--banner-text-transform,none);-webkit-user-select:none;user-select:none;font-weight:900}.banner-word-huemanity{color:#af0a5f}.banner-word-for{color:#60ff1c}.banner-word-all{color:#fff;font-size:var(--font-size-xlarge);text-transform:uppercase}.app-layout{grid-template-columns:var(--left-panel-width,600px) 28px 1fr;flex:1;min-height:0;transition:grid-template-columns .3s;display:grid}.app-layout.panel-collapsed{--left-panel-width:0px}@media (width<=90vw){.app-layout{grid-template-columns:1fr}.panel-collapse-toggle{display:none}}.left-panel{flex-direction:column;gap:7px;max-width:580px;padding:10px 12px 10px 10px;transition:max-width .3s,opacity .3s,padding .3s;display:flex;overflow:hidden}.left-panel.collapsed{opacity:0;max-width:0;padding:0}.control-section-heading{font-size:var(--font-size-medium);color:#00dd58;letter-spacing:.05em;font-weight:800}.control-row{align-items:center;gap:6px;padding:6px 0;display:flex}#leftPanel .control-row{border-style:solid;border-width:2px;border-color:var(--border-color);border-radius:var(--border-radius);padding:8px 12px}.control-label{font-size:var(--font-size-medium);color:#00dd58;white-space:nowrap;flex-shrink:0;min-width:20px;font-weight:700}.control-input{background:var(--input-background-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:#fff;font-family:var(--font-body), monospace;font-size:var(--font-size-medium);outline:none;flex:1;width:100%;min-width:0;padding:8px 10px;font-weight:600;transition:border-color .2s}.control-input:focus{border-color:var(--active-focus-highlight-color);filter:brightness(1.25)}.control-input::placeholder{color:var(--placeholder-text-color)}.control-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.control-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.control-input[type=number]{-moz-appearance:textfield}.control-select{background:var(--input-background-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:#fff;font-family:var(--font-body), monospace;font-size:var(--font-size-medium);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffccee' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;outline:none;flex:1;min-width:0;padding:12px 30px 12px 14px;font-weight:600;transition:border-color .2s}.control-select:focus{border-color:var(--active-focus-highlight-color)}.icon-btn{border-radius:var(--border-radius);border:2px solid var(--border-color);background:var(--input-background-color);width:36px;height:36px;color:var(--label-text-color);font-size:var(--font-size-medium);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex}.icon-btn:hover{border-color:var(--active-focus-highlight-color);color:var(--active-focus-highlight-color)}.icon-btn.favorites-active{color:var(--active-focus-highlight-color);border-color:var(--gold-color);background:#f8d2031a}.icon-btn.starred{color:var(--active-focus-highlight-color);border-color:var(--gold-color)}.palette-color-strip{border:1px solid var(--border-color);background:var(--gradient-palette-strip-background-color);border-radius:5px;width:100%;height:22px;display:block}#gradient-type-selector-btn,#category-selector-btn,#palette-selector-btn{background:var(--input-background-color);border-style:solid;border-width:2px;border-color:var(--border-color);border-radius:var(--border-radius);color:#00dd58;font-family:var(--font-body), monospace;font-size:var(--font-size-medium);cursor:pointer;justify-content:space-between;align-items:center;width:100%;height:52px;margin:10px 0;padding:0 14px;font-weight:700;transition:all .15s;display:flex}#gradient-type-selector-btn:hover,#category-selector-btn:hover,#palette-selector-btn:hover{border-color:var(--active-focus-highlight-color)}#gradient-tab .control-select,#gradient-tab #gradient-type-selector-btn,#gradient-tab #category-selector-btn,#gradient-tab #palette-selector-btn{background:var(--gradient-dropdown-background-color,var(--input-background-color))}#category-selector-btn,#palette-selector-btn{height:auto;min-height:52px;padding-top:10px;padding-bottom:10px;line-height:1.25}#category-selector-btn .category-current-label{text-align:right}#palette-selector-btn{flex:1;width:auto;min-width:0}#gradient-tab .control-input{background:var(--gradient-input-background-color,var(--input-background-color));color:var(--gradient-input-text-color,#fff)}#gradient-tab .palette-color-strip{background:var(--gradient-palette-strip-background-color)}#gradient-tab .control-label{background:var(--gradient-label-background-color,transparent);color:var(--card-body-text-color,#00dd58)}.gradient-type-current-label{color:#fff;font-weight:900}.dimensions-pair{border-style:solid;border-width:2px;border-color:var(--border-color);border-radius:var(--border-radius);gap:8px;margin:10px 0;padding:8px 12px;display:flex}.dimensions-pair>div{flex:1;align-items:center;gap:5px;display:flex}.dimensions-pair input{flex:1;min-width:0}.btn{border-radius:var(--border-radius);font-family:var(--font-body) monospace;font-size:var(--font-size-medium);cursor:pointer;border:2px solid #0000;justify-content:center;align-items:center;gap:6px;height:auto;min-height:52px;padding:10px 14px;font-weight:800;transition:all .15s;display:flex}.btn-primary{background:var(--button-background-color);color:var(--button-text-color);border-color:var(--button-background-color)}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:active{filter:brightness(1.25)}.btn-outline{color:var(--button-text-color);border-color:var(--border-color);background:0 0}.btn-outline:hover{border-color:var(--active-focus-highlight-color);color:var(--button-text-color);background:var(--input-background-color)}.btn-pair-row{gap:6px;margin:10px 0;display:flex}.btn-pair-row .btn{flex:1}#btnOptions{background:var(--input-background-color);border:2px solid var(--active-focus-highlight-color);color:var(--active-focus-highlight-color);font-family:var(--font-body);font-size:var(--font-size-medium);border-radius:var(--border-radius);cursor:pointer;justify-content:center;align-items:center;gap:8px;width:100%;height:42px;font-weight:900;transition:all .15s;display:flex}#btnOptions:hover{background:var(--active-focus-highlight-color);color:#fff}.panel-collapse-toggle{justify-content:center;padding-top:14px;display:flex}#btnTogglePanel{color:var(--label-text-color);font-size:var(--font-size-xlarge);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;padding:0;line-height:1;transition:all .2s;display:flex;position:relative}#btnTogglePanel:hover{color:var(--active-focus-highlight-color)}.right-panel{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex;overflow:auto}.gradient-preview-frame{background:var(--gradient-preview-window-background-color,indigo);border:2px solid var(--border-color);border-radius:var(--border-radius);flex:1;justify-content:center;align-items:flex-start;min-height:480px;display:flex;overflow:hidden}#splashIdleImage{object-fit:contain;border-radius:16px;width:100%;max-height:100%;display:block}#gradientCanvas{z-index:1;border-radius:16px;max-width:100%;max-height:100%;display:none;position:relative}#gradientCanvasBg{display:none}.gradient-info-row{font-size:var(--font-size-medium);color:var(--label-text-color);align-items:center;gap:1.25em;padding:0 4px;display:flex}#previewPaletteName{color:#0f0;font-weight:800}#btnRandomMax{display:none}.app-layout.panel-collapsed .gradient-preview-frame{position:relative}.app-layout.panel-collapsed #gradientCanvas,.app-layout.panel-collapsed #splashIdleImage{object-fit:cover;width:100%;max-width:100%;height:100%;max-height:100%}.app-layout.panel-collapsed #btnRandomMax{z-index:10;display:block;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#btnStarMax{display:none}.app-layout.panel-collapsed #btnStarMax{z-index:10;display:flex;position:absolute;top:18px;right:18px}.dedication-text{text-align:center;font-size:var(--font-size-large);padding:8px 24px 12px;line-height:1.5;color:#fff!important}.dedication-text strong{font-weight:700;color:#fff!important}#gradient-tab{background:var(--page-background-color)}.brand-watermark{opacity:.65;pointer-events:none;z-index:5;-webkit-user-select:none;user-select:none;width:65px;height:auto;position:fixed;bottom:1rem;right:1rem}.popup-overlay{z-index:400;background:#000000a6;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.popup-overlay.open{display:flex}.popup-box{background:var(--card-background-color);border:2px solid var(--active-focus-highlight-color);border-radius:16px;width:560px;max-height:88vh;padding:28px;position:relative;overflow-y:auto;box-shadow:0 12px 60px #000000b3}.popup-title{font-family:var(--font-display);font-size:var(--font-size-medium);color:#39ff14;letter-spacing:.05em;cursor:move;-webkit-user-select:none;user-select:none;margin-bottom:22px;font-weight:700}.popup-title:focus-visible{outline-offset:3px;outline:3px solid #39ff14}.popup-close-btn{color:var(--label-text-color);font-size:var(--font-size-xlarge);cursor:pointer;background:0 0;border:none;padding:0;line-height:1;position:absolute;top:14px;right:16px}.popup-close-btn:hover,.delta-panel-close:hover{color:#39ff14}.popup-section{margin-bottom:20px}.popup-section-heading{font-size:var(--font-size-medium);color:var(--active-focus-highlight-color);letter-spacing:.1em;text-transform:capitalize;border-bottom:1px solid var(--border-color);margin-bottom:12px;padding-bottom:6px;font-weight:800}.theme-color-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.theme-color-row label{font-size:var(--font-size-medium);color:var(--body-text-color);flex:1;font-weight:700}input[type=color]{border:2px solid var(--border-color);cursor:pointer;background:0 0;border-radius:8px;flex-shrink:0;width:52px;height:38px;padding:2px}.export-presets-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.export-preset-btn{background:var(--input-background-color);border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--body-text-color);font-family:var(--font-body);cursor:pointer;text-align:left;padding:10px;font-size:24px;font-weight:700;line-height:1.4;transition:all .15s}.export-preset-btn:hover{border-color:var(--active-focus-highlight-color);background:var(--active-focus-highlight-color)}.export-preset-btn span{color:var(--placeholder-text-color);font-size:22px;font-weight:600;display:block}.popup-action-row{gap:10px;margin-top:6px;display:flex}.popup-action-row .btn{flex:1;justify-content:center}.gradient-type-btn,.aspect-ratio-btn{background:var(--gradient-dropdown-background-color,var(--input-background-color));border:2px solid var(--border-color);border-radius:var(--border-radius);color:var(--gradient-dropdown-inactive-text-color,#00e5ff);font-family:var(--font-body);font-size:var(--font-size-medium);cursor:pointer;text-align:center;justify-content:center;align-items:center;height:64px;font-weight:700;transition:all .15s;display:flex}.gradient-type-btn:hover,.aspect-ratio-btn:hover{background:var(--gradient-dropdown-hover-background-color,var(--gradient-dropdown-background-color));border-color:var(--gradient-dropdown-hover-active-text-color,#00e5ff);color:var(--gradient-dropdown-hover-active-text-color,#fff)}.gradient-type-btn.active,.aspect-ratio-btn.active{background:var(--gradient-dropdown-hover-background-color,var(--active-focus-highlight-color));color:var(--gradient-dropdown-hover-active-text-color,#39ff14);border-color:#39ff14;font-weight:900}#aspect-ratio-popup .popup-body{flex-direction:column;gap:8px;display:flex}.toast-notification{background:var(--active-focus-highlight-color);color:#fff;font-family:var(--font-body);font-size:var(--font-size-medium);opacity:0;pointer-events:none;z-index:999;border-radius:40px;padding:12px 34px;font-weight:800;transition:opacity .3s,transform .3s;position:fixed;bottom:32px;left:50%;transform:translate(-50%)translateY(14px)}.toast-notification.show{opacity:1;transform:translate(-50%)translateY(0)}.tab-bar{background:var(--tab-inactive-background-color);border-bottom:2px solid var(--border-color);flex-wrap:wrap;flex-shrink:0;align-items:flex-end;gap:4px;padding:10px 16px 0;display:flex}.tab-button{font-family:var(--font-body);font-size:var(--tab-button-font-size);border:2px solid var(--border-color);background:var(--tab-inactive-background-color);color:var(--label-text-color);cursor:pointer;white-space:nowrap;border-bottom:none;border-radius:8px 8px 0 0;padding:15px 22px;font-weight:700;line-height:1.3;transition:all .18s}.tab-button:hover{background:var(--input-background-color);color:var(--body-text-color);border-color:var(--active-focus-highlight-color)}.tab-button.active{background:var(--active-focus-highlight-color);color:#39ff14;font-weight:700;font-size:var(--tab-button-font-size);z-index:1;border-color:#39ff14;padding:19px 22px;position:relative;bottom:-2px}.tab-button.inactive{font-size:var(--tab-button-font-size);border-color:#4f1990;font-weight:700}.tab-panel{flex-direction:column;flex:1;min-height:0;display:none}.tab-panel.active{padding-top:32px;display:flex}.settings-layout{flex-direction:column;gap:28px;max-width:1400px;padding:28px;display:flex}.settings-section{background:var(--appsettings-card-background,var(--appsettings-panel-backgrounds,var(--app-background-default)));border:2px solid var(--border-color);border-radius:var(--border-radius);padding:24px}.settings-section-heading{font-size:var(--font-size-medium);color:#39ff14;letter-spacing:.08em;text-transform:capitalize;border-bottom:1px solid var(--border-color);margin-bottom:18px;padding-bottom:10px;font-weight:800}#gradient-tab .settings-section{background:var(--card-background-color);border:2px solid #fff}#gradient-tab .settings-section-heading{color:var(--card-title-text-color,#39ff14)}.tab-coming-soon{color:var(--label-text-color);font-size:var(--font-size-medium);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;display:flex}.tab-coming-soon-icon{font-size:64px}.tab-coming-soon-note{font-size:var(--font-size-medium);color:var(--placeholder-text-color)}.gradient-type-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.category-list{background:var(--gradient-category-menu-background-color,transparent);border-radius:var(--border-radius);flex-direction:column;gap:8px;padding:6px;display:flex}.category-btn{background:var(--input-background-color);border-style:solid;border-width:2px;border-color:var(--border-color);border-radius:var(--border-radius);color:var(--gradient-category-item-text-color,#00e5ff);font-family:var(--font-body);font-size:var(--font-size-medium);cursor:pointer;text-align:left;align-items:center;min-height:52px;padding:0 16px;font-weight:700;transition:all .15s;display:flex}.category-btn:hover{background:var(--gradient-category-item-hover-background-color,var(--active-focus-highlight-color));color:var(--gradient-category-item-hover-text-color,#fff);border-color:var(--gradient-category-item-hover-text-color,#00e5ff)}.category-btn.active{background:var(--gradient-category-item-hover-background-color,var(--active-focus-highlight-color));color:var(--gradient-category-item-hover-text-color,#39ff14);border-color:#39ff14;font-weight:900}.colorwheel-layout{flex:1;grid-template-columns:minmax(400px,800px) 1fr;gap:20px;min-height:0;padding:16px;display:grid;overflow:hidden}.cw-left{flex-direction:column;align-items:center;gap:10px;display:flex}#wheelContainer{justify-content:left;align-items:center;width:100%;display:flex}.lock-row{gap:8px;width:100%;max-width:520px;display:flex}.lock-row .btn{flex:1}.cw-full-btn{width:100%;margin-top:4px}.btn-active{background:var(--active-focus-highlight-color);border-color:var(--active-focus-highlight-color);color:#fff;font-weight:900}.cw-right{flex-direction:column;gap:6px;min-height:0;display:flex;overflow:hidden}.cw-top-area{flex-shrink:0;align-items:flex-start;gap:14px;display:flex}.cw-color-swatch{border-radius:var(--border-radius);border:4px solid var(--border-color);background:red;flex-shrink:0;width:150px;height:150px}.cw-hex-area{flex-direction:column;flex:1;gap:6px;min-width:0;display:flex}.cw-hex-input{letter-spacing:.08em;font-size:var(--font-size-large);font-weight:700;font-family:Roboto,monospace!important}.cw-color-formats{border-style:solid;border-width:2px;border-color:var(--border-color);border-radius:var(--border-radius);grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:8px;padding:12px 16px;display:grid}.cw-color-formats span{font-family:Roboto,monospace;font-size:var(--font-size-medium);color:var(--label-text-color);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#paletteNameDisplay,#btnReset,#btnReset:hover{color:#fff}.cw-sliders{flex-direction:column;flex-shrink:0;gap:20px;padding:16px 0;display:flex}.cw-slider-row{align-items:center;gap:10px;padding:8px 0;display:flex}.cw-label{text-align:left;flex-shrink:0;width:90px}.cw-slider{cursor:pointer;appearance:none;border:none;border-radius:16px;outline:none;flex:1;height:18px}.cw-slider::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--active-focus-highlight-color);cursor:pointer;background:#fff;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 6px #00000080}.cw-slider::-moz-range-thumb{border:3px solid var(--active-focus-highlight-color);cursor:pointer;background:#fff;border-radius:8px;width:15px;height:15px;box-shadow:0 2px 6px #00000080}.cw-readout{font-family:Courier New,monospace;font-size:var(--font-size-medium);color:var(--body-text-color);text-align:right;flex-shrink:0;min-width:52px}.cw-bottom-row{gap:8px;min-height:250px;max-height:300px;display:flex;overflow:hidden}.cw-actions-row{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.cw-palette-section,.cw-history-section{background:var(--colorwheel-card-background-color,var(--app-background-default));border:2px solid var(--border-color);border-radius:var(--border-radius);flex-direction:column;flex:0 auto;align-self:flex-start;gap:8px;padding:12px;display:flex;overflow:hidden}.cw-section-header{flex-shrink:0;align-items:center;gap:8px;display:flex}.cw-section-title{font-size:var(--font-size-large);color:var(--active-focus-highlight-color);white-space:nowrap;flex-shrink:0;font-weight:800}.cw-swatch-grid{flex-wrap:wrap;flex:1;align-content:flex-start;gap:6px;display:flex;overflow-y:auto}.empty-message{color:var(--placeholder-text-color);font-size:var(--font-size-medium);font-style:italic}.color-tooltip{color:#fff;background:#af0a5f;border-radius:8px;max-width:500px;padding:16px 20px}.color-tooltip ol{margin:8px 0 0;padding-left:1.6em}.color-tooltip li{margin-bottom:6px}.swatch-wrapper{display:inline-block;position:relative}.mini-swatch{cursor:pointer;border:2px solid #ffffff40;border-radius:6px;width:40px;height:40px;transition:transform .15s,border-color .15s;display:block}.mini-swatch:hover{border-color:#fff;transform:scale(1.1)}.swatch-tooltip{color:#fff;white-space:nowrap;pointer-events:none;opacity:0;z-index:100;background:#0d1b3e;border-radius:6px;padding:10px;font-family:Courier New,monospace;font-size:22px;transition:opacity .15s;position:absolute;bottom:calc(100% + 5px);left:50%;transform:translate(-50%)}.swatch-wrapper:hover .swatch-tooltip{opacity:1}.swatch-delete{color:#fff;cursor:pointer;opacity:0;background:#c05;border:none;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;padding:0;font-size:13px;line-height:1;transition:opacity .15s;display:flex;position:absolute;top:-6px;right:-6px}.swatch-wrapper:hover .swatch-delete{opacity:1}.delta-panel{display:none}.delta-host{position:relative}.delta-btn{border:2px solid var(--active-focus-highlight-color,#f0c);width:48px;height:48px;color:var(--body-text-color,#fff);cursor:pointer;z-index:50;background:#00000059;border-radius:8px;font-size:24px;font-weight:700;position:absolute;top:8px;right:8px}.delta-btn:focus-visible{outline-offset:3px;outline:3px solid #39ff14}.delta-btn:hover{background:var(--active-focus-highlight-color,#f0c)}.delta-panel{background:var(--card-background-color,#2a0045);border:2px solid var(--active-focus-highlight-color,#f0c);z-index:500;text-align:left;border-radius:12px;width:260px;padding:16px;display:none;position:absolute;top:44px;right:8px;box-shadow:0 10px 40px #0009}.delta-panel.open{display:block}.delta-panel-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.delta-panel-title{color:var(--body-text-color,#f5e6ff);font-weight:700}.delta-panel-close{color:var(--body-text-color,#f5e6ff);cursor:pointer;background:0 0;border:none;font-size:20px;line-height:1}.delta-row{margin-bottom:12px}.delta-row label{color:var(--body-text-color,#f5e6ff);margin-bottom:6px;display:block}.delta-slider{width:100%}.delta-case-row{gap:6px;display:flex}.delta-case-btn{border:1px solid var(--active-focus-highlight-color,#f0c);color:var(--body-text-color,#f5e6ff);cursor:pointer;background:0 0;border-radius:6px;flex:1;padding:6px}.delta-case-btn.active{background:var(--active-focus-highlight-color,#f0c)}.delta-save-btn{background:var(--active-focus-highlight-color,#f0c);color:#fff;cursor:pointer;border:none;border-radius:8px;width:100%;margin-top:4px;padding:8px;font-weight:700}.color-input-pair{align-items:center;gap:6px;display:flex}.color-text-input{width:116px;font-size:var(--font-size-small);padding:6px 8px}.color-text-input.invalid{border-color:#ff5252}.info-icon{color:var(--gradient-dropdown-inactive-text-color,#00e5ff);cursor:help;-webkit-user-select:none;user-select:none;margin-left:10px;font-size:32px;display:inline-block;position:relative}.info-icon:hover,.info-icon:focus{color:var(--gradient-dropdown-hover-active-text-color,#fff)}.info-tooltip{visibility:hidden;opacity:0;z-index:100;background:var(--card-background-color,#2a0045);color:#fff;border:2px solid var(--border-color,#00dd58);text-align:center;white-space:normal;border-radius:10px;width:max-content;max-width:320px;padding:12px 16px;font-size:22px;font-weight:600;line-height:1.4;transition:opacity .15s;position:absolute;bottom:130%;left:auto;right:0}.info-icon:hover .info-tooltip,.info-icon:focus .info-tooltip{visibility:visible;opacity:1}#category-selector-btn~.info-icon .info-tooltip,#palette-selector-btn~.info-icon .info-tooltip{top:130%;bottom:auto}#btnTogglePanel:after{content:attr(data-tip);visibility:hidden;opacity:0;z-index:100;background:var(--card-background-color,#2a0045);color:#fff;border:2px solid var(--border-color,#00dd58);text-align:center;white-space:normal;pointer-events:none;border-radius:10px;width:max-content;max-width:320px;padding:12px 16px;font-size:22px;font-weight:600;line-height:1.4;transition:opacity .15s;position:absolute;top:50%;left:calc(100% + 10px);transform:translateY(-50%)}#btnTogglePanel:hover:after,#btnTogglePanel:focus-visible:after{visibility:visible;opacity:1}