:root{--ds-surface-0:#f6f5f1;--ds-surface-1:#fff;--ds-surface-2:#f0eee8;--ds-surface-3:#e8e5dd;--ds-border:#e2dfd7;--ds-border-strong:#cbc6ba;--ds-text:#14213a;--ds-text-2:#3f4a60;--ds-text-3:#5f6b84;--ds-accent:#c9984d;--ds-accent-hover:#b8842f;--ds-accent-soft:#c9984d29;--ds-on-accent:#14213a;--ds-link:#0f5aa8;--ds-success:#177a42;--ds-warning:#9a6416;--ds-danger:#c93c3c;--ds-info:#0f5aa8;--ds-focus-ring:0 0 0 2px var(--ds-surface-0), 0 0 0 4px var(--ds-accent);--ds-shadow-overlay:0 8px 24px #14213a1f;--ds-font-sans:"Supreme", sans-serif;--ds-font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ds-text-xs:12px;--ds-text-sm:13px;--ds-text-md:14px;--ds-text-lg:16px;--ds-text-xl:20px;--ds-text-2xl:24px;--ds-text-3xl:32px;--ds-weight-regular:400;--ds-weight-medium:500;--ds-weight-semibold:600;--ds-weight-bold:700;--ds-leading:1.5;--ds-leading-tight:1.25;--ds-tracking-tight:-.01em;--ds-space-1:4px;--ds-space-2:8px;--ds-space-3:12px;--ds-space-4:16px;--ds-space-5:20px;--ds-space-6:24px;--ds-space-8:32px;--ds-space-10:40px;--ds-space-12:48px;--ds-space-16:64px;--ds-radius-sm:6px;--ds-radius-md:10px;--ds-radius-lg:16px;--ds-radius-full:999px;--ds-border-width:1px;--ds-duration:.15s;--ds-duration-slow:.25s;--ds-ease:cubic-bezier(.2, 0, 0, 1);--ds-control-sm:28px;--ds-control-md:36px;--ds-control-lg:40px;--ds-row-height:44px;--ds-topbar-height:56px;--ds-player-height:60px;--ds-icon-sm:16px;--ds-icon-md:20px;--ds-icon-stroke:1.75;--ds-container:1200px;--ds-gutter:24px;--ds-gap:20px;--ds-z-topbar:500;--ds-z-player:900;--ds-z-backdrop:1000;--ds-z-dialog:1001;--ds-z-toast:9999}:root[data-theme=dark]{--ds-surface-0:#0a1324;--ds-surface-1:#111d33;--ds-surface-2:#182741;--ds-surface-3:#1f3050;--ds-border:#223553;--ds-border-strong:#2f4668;--ds-text:#f2eee2;--ds-text-2:#a7b3c4;--ds-text-3:#8593a8;--ds-accent:#d4a257;--ds-accent-hover:#e0b06a;--ds-accent-soft:#d4a25724;--ds-on-accent:#0a1324;--ds-link:#6aaef5;--ds-success:#5fcf8a;--ds-warning:#e3b341;--ds-danger:#ef6b6b;--ds-info:#6aaef5;--ds-focus-ring:0 0 0 2px var(--ds-surface-0), 0 0 0 4px var(--ds-accent);--ds-shadow-overlay:0 8px 24px #00000059}@font-face{font-family:Supreme;font-weight:400;font-style:normal;font-display:swap;src:url(/kodini-color-extractor/assets/Supreme-Regular-4XHPfODv.woff2)format("woff2")}@font-face{font-family:Supreme;font-weight:500;font-style:normal;font-display:swap;src:url(/kodini-color-extractor/assets/Supreme-Medium-r1fq46EK.woff2)format("woff2")}@font-face{font-family:Supreme;font-weight:700;font-style:normal;font-display:swap;src:url(/kodini-color-extractor/assets/Supreme-Bold-tOPSM1Q8.woff2)format("woff2")}*{box-sizing:border-box;margin:0;padding:0}:root{--app-transition-colors:background-color var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);--app-nav-height:60px;--app-scrim:#00000080;--app-overlay-light:#fff;--app-overlay-edge:#00000059;--app-overlay-label:#000000b3;--app-swatch-hover:#7f7f7f2e;--app-swatch-active:#7f7f7f38;--app-hue-spectrum:linear-gradient(to right, red, #ff0, #0f0, #0ff, #00f, #f0f, red);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}html,body{font-family:var(--ds-font-sans);font-size:var(--ds-text-lg);line-height:var(--ds-leading);background:var(--ds-surface-0);color:var(--ds-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background-color var(--ds-duration-slow) var(--ds-ease), color var(--ds-duration-slow) var(--ds-ease)}#app{min-height:100vh;padding-top:var(--app-nav-height)}button,select,input{font-family:inherit}@media (width<=480px){:root{--app-nav-height:50px}}body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]),:where(body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie])) :where(:not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie])){background-color:#0000!important}body>:not(#app):not(#app-layer):not(script) :is([class*=drop],[class*=sub-menu],[class*=submenu],[class*=popup],[class*=popover],[class*=megamenu]){background-color:var(--ds-surface-1)!important}body>:not(#app):not(#app-layer):not(script) span:empty{background-color:currentColor!important;border-color:currentColor!important}body>:not(#app):not(#app-layer):not(script) :is(button,[aria-expanded],[role=button]) svg :is(line,path,rect){stroke:currentColor!important;fill:currentColor!important}body>:not(#app):not(#app-layer):not(script) [class*=toggler-icon]{filter:brightness(0)saturate()!important}:root[data-theme=dark] body>:not(#app):not(#app-layer):not(script) [class*=toggler-icon]{filter:brightness(0)saturate()invert()!important}body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]),body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]) :not([class*=cookie]):not([id*=cookie]){color:var(--ds-text)!important}body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]) a:not([class*=cookie]):not([id*=cookie]),body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]) a:not([class*=cookie]):not([id*=cookie]) *{color:var(--ds-link)!important}body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]) a:hover:not([class*=cookie]):not([id*=cookie]),body>:not(#app):not(#app-layer):not(script):not(.cookie-banner):not(.cookie-consent):not([class*=cookie]):not([id*=cookie]) a:hover:not([class*=cookie]):not([id*=cookie]) *{color:var(--ds-accent)!important}#app button,#app [role=button],#app select,#app input[type=range],#app input[type=color]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}#app input[type=range]{appearance:none;border-radius:var(--ds-radius-full);background:var(--ds-border-strong);touch-action:pan-y;cursor:pointer;outline:none;width:100%;height:6px;margin:0}#app input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--ds-accent);border:2px solid var(--ds-surface-1);cursor:pointer;border-radius:50%;width:14px;height:14px}#app input[type=range]::-moz-range-thumb{box-sizing:border-box;background:var(--ds-accent);border:2px solid var(--ds-surface-1);cursor:pointer;border-radius:50%;width:14px;height:14px}#app input[type=range]::-moz-range-track{border-radius:var(--ds-radius-full);background:var(--ds-border-strong);height:6px}#app input[type=range]:focus-visible{box-shadow:var(--ds-focus-ring)}#app input[type=range]:disabled{cursor:not-allowed}#app input[type=range].slider-field__range--hue{background:var(--app-hue-spectrum)}@media (pointer:coarse){#app input[type=range]{height:8px}#app input[type=range]::-webkit-slider-thumb{width:20px;height:20px}#app input[type=range]::-moz-range-thumb{width:20px;height:20px}}.app-page{background:var(--ds-surface-0);flex-direction:column;min-height:100vh;display:flex}.app-container{--workspace-top:var(--app-nav-height);flex:1;display:flex}.sidebar{background:var(--ds-surface-1);width:320px;min-width:320px;padding:var(--ds-space-5);border-right:var(--ds-border-width) solid var(--ds-border);top:var(--workspace-top,60px);height:calc(100vh - var(--workspace-top,60px));transition:var(--app-transition-colors);flex-direction:column;align-self:flex-start;display:flex;position:sticky;overflow-y:auto}.panel-header{justify-content:space-between;align-items:center;gap:var(--ds-space-2);margin-bottom:var(--ds-space-5);min-height:var(--ds-control-md);display:flex}.panel-title{font-size:var(--ds-text-lg);font-weight:var(--ds-weight-semibold);line-height:var(--ds-leading);color:var(--ds-text);margin:0}.workspace-main{min-width:0;padding:var(--ds-space-10);background:var(--ds-surface-0);flex:1;justify-content:center;align-items:center;display:flex}@media (width<=900px){.workspace-main{padding:var(--ds-space-5) var(--ds-space-4)}}.sidebar-hint{font-size:var(--ds-text-sm);line-height:var(--ds-leading);color:var(--ds-text-2);margin:0}.sidebar-note{font-size:var(--ds-text-xs);line-height:var(--ds-leading);color:var(--ds-text-3);margin:0}.field-row{justify-content:space-between;align-items:center;gap:var(--ds-space-2);display:flex}.field-row label{font-size:var(--ds-text-sm);font-weight:var(--ds-weight-medium);color:var(--ds-text-2)}.field-select{width:58%;min-width:0;height:var(--ds-control-md);padding:0 var(--ds-space-3);border:var(--ds-border-width) solid var(--ds-border-strong);border-radius:var(--ds-radius-md);background:var(--ds-surface-2);color:var(--ds-text);font-family:inherit;font-size:var(--ds-text-md);font-weight:var(--ds-weight-medium);cursor:pointer;transition:border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);flex:none}.field-select:hover{border-color:var(--ds-text-3)}.field-select:focus-visible{border-color:var(--ds-accent);box-shadow:var(--ds-focus-ring);outline:none}.field-select:disabled{opacity:.6;cursor:not-allowed}.export-buttons{gap:var(--ds-space-2);flex-direction:column;display:flex}.export-btn{justify-content:center;align-items:center;gap:var(--ds-space-2);height:var(--ds-control-md);padding:0 var(--ds-space-4);border:var(--ds-border-width) solid var(--ds-border-strong);border-radius:var(--ds-radius-md);background:var(--ds-surface-2);color:var(--ds-text);font-family:inherit;font-size:var(--ds-text-md);font-weight:var(--ds-weight-medium);white-space:nowrap;cursor:pointer;transition:var(--app-transition-colors);line-height:1;display:flex}.export-btn svg{width:var(--ds-icon-sm);height:var(--ds-icon-sm);flex-shrink:0}.export-btn:hover:not(:disabled){background:var(--ds-surface-3)}.export-btn:focus-visible{box-shadow:var(--ds-focus-ring);outline:none}.export-btn:disabled{opacity:.45;cursor:not-allowed}.export-btn-primary{background:var(--ds-accent);color:var(--ds-on-accent);font-weight:var(--ds-weight-semibold);border-color:#0000}.export-btn-primary:hover:not(:disabled){background:var(--ds-accent-hover)}.history-actions{gap:var(--ds-space-1);margin-bottom:var(--ds-space-4);flex-wrap:wrap;display:flex}.btn-history{justify-content:center;align-items:center;gap:var(--ds-space-1);height:var(--ds-control-sm);padding:0 var(--ds-space-2);border:var(--ds-border-width) solid var(--ds-border-strong);border-radius:var(--ds-radius-sm);background:var(--ds-surface-2);color:var(--ds-text);font-family:inherit;font-size:var(--ds-text-xs);font-weight:var(--ds-weight-medium);white-space:nowrap;cursor:pointer;transition:var(--app-transition-colors);flex:auto;line-height:1;display:inline-flex}.btn-history svg{width:var(--ds-icon-sm);height:var(--ds-icon-sm);flex-shrink:0}.btn-history:hover:not(:disabled){background:var(--ds-surface-3)}.btn-history:focus-visible{box-shadow:var(--ds-focus-ring);outline:none}.btn-history:disabled{opacity:.45;cursor:not-allowed}.sidebar-footer{padding-top:var(--ds-space-5);margin-top:auto}@media (width>=1600px){.sidebar{width:360px;min-width:360px}}@media (width<=1200px){.app-container{flex-wrap:wrap}}@media (width<=900px){.app-container{flex-direction:column}.sidebar{border-right:none;border-bottom:var(--ds-border-width) solid var(--ds-border);width:100%;min-width:100%;height:auto;max-height:none;padding:var(--ds-space-4);position:static;overflow-y:visible}}@media (width<=480px){.sidebar{padding:var(--ds-space-3)}.export-btn{min-height:var(--ds-row-height)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}