:root,:root[data-theme=dark]{color-scheme:dark;--color-primary-light: #AFC6FF;--color-primary-main: #82AAFF;--color-primary-dark: #4976A1;--color-primary-ink: #AFC6FF;--color-primary-ink-strong: #FFFFFF;--color-primary-solid: #82AAFF;--color-primary-solid-hover: #AFC6FF;--color-on-primary-solid: #011627;--color-secondary-light: #A3B7C7;--color-secondary-main: #8DA0AF;--color-secondary-dark: #2A3F51;--color-accent-cyan: #7fdbca;--color-accent-coral: #FFAB70;--color-accent-green: #C3E88D;--color-accent-pink: #F07178;--color-accent-yellow: #FFCB6B;--color-accent-purple: #C792EA;--color-semantic-success: #C3E88D;--color-semantic-warning: #FFCB6B;--color-semantic-error: #F07178;--color-semantic-info: #82AAFF;--color-neutral-white: #FFFFFF;--color-neutral-light-gray: #D6DEEB;--color-neutral-gray: #637777;--color-neutral-dark-gray: #1D3B53;--color-neutral-black: #000000;--color-bg-floor: #010E18;--color-bg-base: #011627;--color-bg-surface: #0A1E30;--color-bg-elevated: #132A3E;--color-bg-medium: #1D3B53;--color-bg-card: #011627;--color-bg-scrim: rgba(1, 22, 39, .6);--color-text-primary: #D6DEEB;--color-text-secondary: #9DB2C0;--color-text-muted: #7E8E94;--color-text-inverse: #011627;--color-border: #2A3F51;--color-border-transparent: rgba(42, 63, 81, .53);--color-primary-main-rgb: 130, 170, 255;--color-accent-cyan-rgb: 127, 219, 202;--color-accent-coral-rgb: 255, 171, 112;--color-accent-green-rgb: 195, 232, 141;--color-accent-pink-rgb: 240, 113, 120;--color-accent-yellow-rgb: 255, 203, 107;--color-accent-purple-rgb: 199, 146, 234;--color-border-rgb: 42, 63, 81;--color-neutral-white-rgb: 255, 255, 255;--color-neutral-black-rgb: 0, 0, 0;--color-bg-base-rgb: 1, 22, 39;--color-text-primary-rgb: 214, 222, 235;--color-primary-tint-soft: color-mix(in srgb, var(--color-primary-main) 14%, var(--color-bg-base));--color-primary-tint: color-mix(in srgb, var(--color-primary-main) 22%, var(--color-bg-base));--color-primary-tint-strong: color-mix(in srgb, var(--color-primary-main) 32%, var(--color-bg-base));--color-accent-cyan-tint-soft: color-mix(in srgb, var(--color-accent-cyan) 14%, var(--color-bg-base));--color-accent-cyan-tint: color-mix(in srgb, var(--color-accent-cyan) 22%, var(--color-bg-base))}:root[data-theme=light]{color-scheme:light;--color-primary-light: #6FBEF6;--color-primary-main: #4876D6;--color-primary-dark: #288ED7;--color-primary-ink: #264B91;--color-primary-ink-strong: #23468A;--color-primary-solid: #2F5BB8;--color-primary-solid-hover: #264B91;--color-on-primary-solid: #FFFFFF;--color-secondary-light: #A9C4D8;--color-secondary-main: #87A4B8;--color-secondary-dark: #5E7484;--color-accent-cyan: #176D67;--color-accent-coral: #9B3F3D;--color-accent-green: #0B6B51;--color-accent-pink: #92215F;--color-accent-yellow: #7A5B00;--color-accent-purple: #6B2FA0;--color-semantic-success: #0B6B51;--color-semantic-warning: #7A5B00;--color-semantic-error: #92215F;--color-semantic-info: #4876D6;--color-neutral-white: #FFFFFF;--color-neutral-light-gray: #93A1A1;--color-neutral-gray: #697098;--color-neutral-dark-gray: #403F53;--color-neutral-black: #000000;--color-bg-floor: #D6E4F2;--color-bg-base: #EFEFEF;--color-bg-surface: #E7ECF2;--color-bg-elevated: #F6F6F6;--color-bg-medium: #FBFBFB;--color-bg-card: #EFEFEF;--color-bg-scrim: rgba(64, 63, 83, .5);--color-text-primary: #403F53;--color-text-secondary: #5A607A;--color-text-muted: #78808A;--color-text-inverse: #FBFBFB;--color-border: #5E7484;--color-border-transparent: rgba(94, 116, 132, .53);--color-primary-main-rgb: 72, 118, 214;--color-accent-cyan-rgb: 23, 109, 103;--color-accent-coral-rgb: 155, 63, 61;--color-accent-green-rgb: 11, 107, 81;--color-accent-pink-rgb: 146, 33, 95;--color-accent-yellow-rgb: 122, 91, 0;--color-accent-purple-rgb: 107, 47, 160;--color-border-rgb: 94, 116, 132;--color-neutral-white-rgb: 255, 255, 255;--color-neutral-black-rgb: 0, 0, 0;--color-bg-base-rgb: 239, 239, 239;--color-text-primary-rgb: 64, 63, 83;--color-primary-tint-soft: color-mix(in srgb, var(--color-primary-main) 14%, var(--color-bg-base));--color-primary-tint: color-mix(in srgb, var(--color-primary-main) 22%, var(--color-bg-base));--color-primary-tint-strong: color-mix(in srgb, var(--color-primary-main) 32%, var(--color-bg-base));--color-accent-cyan-tint-soft: color-mix(in srgb, var(--color-accent-cyan) 14%, var(--color-bg-base));--color-accent-cyan-tint: color-mix(in srgb, var(--color-accent-cyan) 22%, var(--color-bg-base))}:root{--font-family-title: "Outfit", sans-serif;--font-family-body: "Outfit", sans-serif;--font-family-mono: "FiraCode", monospace;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-size-tiny: .6875rem;--font-size-small: .8125rem;--font-size-body: .9375rem;--font-size-medium: 1.0625rem;--font-size-large: 1.25rem;--font-size-xlarge: 1.5rem;--font-size-xxlarge: 2rem;--font-size-display: 2.5rem;--line-height-tiny: 1.2;--line-height-small: 1.2;--line-height-body: 1.45;--line-height-medium: 1.35;--line-height-large: 1.25;--line-height-xlarge: 1.2;--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--spacing-xxl: 20px;--spacing-xxxl: 24px;--spacing-4xl: 32px;--spacing-5xl: 48px;--spacing-6xl: 64px;--touch-target: 44px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-pill: 100px;--border-hairline: .5px;--border-thin: 1px;--border-medium: 2px;--border-heavy: 3px;--shadow-small: 0 1px 2px rgba(0, 0, 0, .22);--shadow-medium: 0 2px 4px rgba(0, 0, 0, .25);--shadow-large: 0 4px 12px rgba(0, 0, 0, .3);--shadow-floating: 0 -2px 8px rgba(0, 0, 0, .25);--z-base: 1;--z-elevated: 2;--z-dropdown: 100;--z-sticky: 200;--z-modal: 1000;--z-overlay: 1100;--z-toast: 1200;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--transition-theme: .3s ease}.github-attribution{position:fixed;bottom:.85rem;right:1rem;z-index:50;display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;background:var(--color-bg-elevated);color:var(--color-text-secondary);border:1px solid var(--color-bg-medium);border-radius:999px;font-family:system-ui,sans-serif;font-size:.76rem;font-weight:500;text-decoration:none;box-shadow:0 2px 8px #0000004d;transition:background .15s ease,color .15s ease,border-color .15s ease}.github-attribution:hover{background:var(--color-bg-medium);color:var(--color-accent-cyan);border-color:var(--color-accent-cyan)}.github-attribution:focus-visible{outline:2px solid var(--color-accent-cyan);outline-offset:2px}.github-attribution-icon{font-size:1.1em;line-height:1}*{box-sizing:border-box}body{font-family:var(--font-family-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-bg-base);color:var(--color-text-primary);height:100vh;overflow:hidden;text-align:center;width:100vw;margin:0}.app-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}header{padding:var(--spacing-md) var(--spacing-xl);display:flex;align-items:center;justify-content:flex-start;width:100%;border-bottom:var(--border-thin) solid var(--color-border);background-color:var(--color-bg-surface);text-align:left;flex-shrink:0}.title{font-family:var(--font-family-title);font-size:var(--font-size-xlarge);font-weight:var(--font-weight-bold);letter-spacing:-.01em;line-height:var(--line-height-xlarge)}.credit{font-size:var(--font-size-tiny);color:var(--color-text-muted);text-decoration:none;transition:color var(--transition-fast)}.credit:hover{color:var(--color-primary-main)}.header-text{margin:0 var(--spacing-md)}.header-text p{margin-block-start:0;margin-block-end:0}.logo{display:inline-block;height:44px;width:44px}.theme-toggle{margin-left:auto;display:flex;align-items:center;gap:var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none}.theme-toggle-track{width:36px;height:20px;background:var(--color-primary-main);border-radius:var(--radius-pill);position:relative;transition:background var(--transition-fast)}.theme-toggle-thumb{width:16px;height:16px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left var(--transition-fast)}.theme-toggle-thumb.light{left:18px}.toolbar{display:flex;align-items:center;justify-content:flex-end;padding:var(--spacing-md) var(--spacing-xl);background:var(--color-bg-elevated);border-bottom:var(--border-thin) solid var(--color-border);gap:var(--spacing-lg);flex-shrink:0}.toolbar-group{display:flex;align-items:center;gap:var(--spacing-md)}.toolbar-label{font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.06em}.toolbar-divider{width:var(--border-thin);height:var(--spacing-4xl);background:var(--color-border);opacity:.5}.select-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);min-width:84px;min-height:var(--touch-target);font-size:var(--font-size-tiny);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);background:var(--color-bg-medium);color:var(--color-text-primary);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-lg);cursor:pointer;transition:border-color var(--transition-fast)}.select-trigger:not([data-disabled]):hover,.select-trigger[data-state=open]{border-color:var(--color-primary-main)}.select-trigger:focus-visible{outline:var(--border-medium) solid var(--color-primary-main);outline-offset:1px}.select-trigger[data-disabled]{opacity:.35;cursor:default}.select-icon{display:flex;color:var(--color-text-secondary)}.select-content{min-width:var(--radix-select-trigger-width);background:var(--color-bg-elevated);border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-large);overflow:hidden;z-index:var(--z-dropdown)}.select-viewport{padding:var(--spacing-sm)}.select-item{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);min-height:var(--touch-target);padding:var(--spacing-md) var(--spacing-md);border-radius:var(--radius-sm);font-family:var(--font-family-body);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none}.select-item[data-highlighted]{background:var(--color-primary-tint);color:var(--color-primary-light)}.select-item[data-state=checked]{color:var(--color-primary-main);font-weight:var(--font-weight-semibold)}.select-indicator{display:flex}.btn-ghost{display:inline-flex;align-items:center;gap:var(--spacing-sm);min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-primary-dark);background:var(--color-primary-tint);color:var(--color-primary-ink);font-family:var(--font-family-body);font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.btn-ghost:disabled{opacity:.35;cursor:default}.btn-ghost:not(:disabled):hover{border-color:var(--color-primary-main);color:var(--color-primary-ink-strong);background:var(--color-primary-tint-strong)}.btn-primary{display:inline-flex;align-items:center;gap:var(--spacing-sm);min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-xl);border-radius:var(--radius-md);border:var(--border-thin) solid var(--color-primary-solid);background:var(--color-primary-solid);color:var(--color-on-primary-solid);font-family:var(--font-family-body);font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.btn-primary:hover{background:var(--color-primary-solid-hover);border-color:var(--color-primary-solid-hover)}.segment-group{display:flex;border:var(--border-thin) solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}.segment-btn{min-height:var(--touch-target);padding:var(--spacing-sm) var(--spacing-xl);font-size:var(--font-size-tiny);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);background:transparent;color:var(--color-text-secondary);border:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.segment-btn:not(:last-child){border-right:var(--border-thin) solid var(--color-border)}.segment-btn.active{background:var(--color-primary-main);color:var(--color-text-inverse)}.segment-btn:not(.active):not(:disabled):hover{background:var(--color-primary-tint-soft);color:var(--color-primary-main)}.segment-btn:disabled{opacity:.35;cursor:default}.helper-bar{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-xl);background:var(--color-bg-surface);border-bottom:var(--border-thin) solid var(--color-border);flex-shrink:0}.helper-text{font-size:var(--font-size-small);color:var(--color-text-muted);letter-spacing:.01em}.helper-step{display:inline-flex;align-items:center;gap:var(--spacing-sm)}.helper-dot{width:3px;height:3px;border-radius:50%;background:var(--color-text-muted);margin:0 var(--spacing-md);opacity:.6}.container{flex:1;min-height:0;background-color:var(--color-bg-base);display:flex;padding:var(--spacing-lg);overflow:hidden}.photo-container{background-color:var(--color-bg-elevated);border-radius:var(--radius-lg);height:100%;width:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow-small)}.photo-container.drag-over{background-color:var(--color-primary-tint-soft);outline:var(--border-medium) dashed var(--color-primary-main);outline-offset:-4px}.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg)}.empty-state img{width:56px;height:56px;opacity:.4;transition:opacity var(--transition-fast)}.original-pane:not(:has(.image-wrapper)):hover .empty-state img{opacity:.7}.image-text{margin-top:var(--spacing-sm)}.image-text .tagline{font-size:var(--font-size-tiny);color:var(--color-text-muted);margin-top:var(--spacing-sm)}.empty-preview{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-medium);opacity:.5;text-align:center;-webkit-user-select:none;user-select:none}.original-pane:not(:has(.image-wrapper)){cursor:pointer;border:var(--border-medium) dashed var(--color-border);transition:border-color var(--transition-fast),background var(--transition-fast)}.original-pane:not(:has(.image-wrapper)):hover{border-color:var(--color-primary-main);background:var(--color-primary-tint-soft)}.split-view{display:flex;gap:var(--spacing-xl);width:100%;height:100%;padding:var(--spacing-xl);align-items:stretch}.split-pane{flex:1;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;position:relative;padding:var(--spacing-xl);border-radius:var(--radius-md);background:var(--color-bg-surface);box-shadow:var(--shadow-medium)}.pane-label{position:absolute;top:var(--spacing-md);left:50%;transform:translate(-50%);font-size:var(--font-size-small);font-weight:var(--font-weight-bold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);background:var(--color-bg-elevated);padding:var(--spacing-xs) var(--spacing-lg);border-radius:var(--radius-sm);border:var(--border-thin) solid var(--color-border);z-index:var(--z-elevated);opacity:.8;pointer-events:none}.image-wrapper{position:relative;max-width:100%;line-height:0}.image-file{display:block;max-height:calc(100vh - 240px);max-width:100%;height:auto;width:auto;object-fit:contain;border-radius:var(--radius-md);border:var(--border-hairline) solid var(--color-border-transparent);box-shadow:var(--shadow-large)}.image-remove{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:24px;height:24px;border-radius:50%;border:none;background:#00000073;color:#fff;font-size:16px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast),background var(--transition-fast);z-index:var(--z-elevated)}.image-wrapper:hover .image-remove{opacity:1}.image-remove:hover{background:#000000b3}.image-replace{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);height:var(--touch-target);display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-lg);border:none;border-radius:var(--radius-pill);background:#00000073;color:#fff;font-family:var(--font-family-body);font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);line-height:1;cursor:pointer;z-index:var(--z-elevated);transition:background var(--transition-fast)}.image-replace:hover{background:#000000b3}.mobile-center{width:100%;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl)}input[type=file]{display:none}canvas{display:none;max-height:100%;max-width:100%;border-radius:var(--radius-md)}span.bold{font-weight:var(--font-weight-bold);font-size:var(--font-size-large);color:var(--color-primary-main)}.palette-pane{overflow-y:auto;align-items:flex-start;justify-content:center;scrollbar-width:thin;scrollbar-gutter:stable}.palette-pane>*{margin-block:auto}.palette-pane>.palette-panel{margin-block:0 auto}.palette-panel{width:100%;display:flex;flex-direction:column;text-align:left}.palette-header{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.palette-header h3{margin:0;font-size:var(--font-size-medium);font-weight:var(--font-weight-bold);letter-spacing:-.01em}.palette-count{margin-left:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-pill);background:var(--color-bg-elevated);border:var(--border-thin) solid var(--color-border-transparent);font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-secondary)}.palette-top{position:sticky;top:calc(-1 * var(--spacing-xl));z-index:var(--z-elevated);margin-top:calc(-1 * var(--spacing-xl));padding:var(--spacing-xl) 0 var(--spacing-xl);margin-bottom:var(--spacing-lg);background:var(--color-bg-surface);border-bottom:var(--border-thin) solid var(--color-border-transparent)}.palette-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.palette-order{display:flex;align-items:center;gap:var(--spacing-md)}.palette-order-label{font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.palette-strip{display:flex;height:clamp(44px,6vh,72px);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-medium)}.palette-strip-segment{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;border:none;padding:0;font-family:var(--font-family-mono);font-size:var(--font-size-tiny);font-weight:var(--font-weight-bold);cursor:pointer;transition:min-width var(--transition-normal)}.palette-strip-value{white-space:nowrap;color:var(--swatch-ink);opacity:0;transition:opacity var(--transition-fast)}.palette-strip-segment[data-pressed],.palette-strip-segment:focus-visible{min-width:calc(var(--value-length) * 1ch + 2 * var(--spacing-md))}.palette-strip-segment[data-pressed] .palette-strip-value,.palette-strip-segment:focus-visible .palette-strip-value{opacity:.9}@media(hover:hover){.palette-strip-segment:hover{min-width:calc(var(--value-length) * 1ch + 2 * var(--spacing-md))}.palette-strip-segment:hover .palette-strip-value{opacity:.9}}.palette-strip-segment:focus-visible{outline:var(--border-medium) solid var(--color-primary-main);outline-offset:-2px}.palette-strip-segment.is-selected:after{content:"";position:absolute;left:50%;bottom:5px;width:6px;height:6px;border-radius:50%;background:var(--swatch-ink);opacity:.85;transform:translate(-50%)}@media(prefers-reduced-motion:no-preference){.palette-strip-segment.is-selected:after{animation:strip-dot-in .32s cubic-bezier(.34,1.56,.64,1)}.bd-row.is-selected .bd-swatch{animation:swatch-pop .36s cubic-bezier(.34,1.56,.64,1)}.bd-bar{transition:width var(--transition-slow)}}@keyframes strip-dot-in{0%{opacity:0;transform:translate(-50%) scale(0)}}@keyframes swatch-pop{50%{transform:scale(1.3)}}.palette-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:var(--font-size-small)}.view-tabs{margin-top:var(--spacing-lg)}.view-tabs .segment-btn{flex:1;padding-block:var(--spacing-md);font-size:var(--font-size-small)}.view-panels{display:contents}.view-panel{min-width:0}.views-both .view-panel:not(.is-active),.view-heading{display:none}.view-heading{margin:0 0 var(--spacing-md);font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}@media(min-width:801px){.palette-pane{container:palette / inline-size}}@container palette (min-width: 640px){.views-both .view-tabs{display:none}.views-both .view-panels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--spacing-4xl);align-items:start}.views-both .view-panel:not(.is-active),.views-both .view-heading{display:block}.views-both .color-space-plot{max-width:min(100%,56vh)}}.view-caption{margin:0 0 var(--spacing-lg);font-size:var(--font-size-small);line-height:1.5;color:var(--color-text-secondary)}.bd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.bd-row{position:relative;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);border:var(--border-thin) solid transparent;transition:background var(--transition-fast),border-color var(--transition-fast)}.bd-row[data-pressed]{background:var(--color-bg-elevated)}@media(hover:hover){.bd-row:hover{background:var(--color-bg-elevated)}}.bd-row.is-selected{background:var(--color-primary-tint-soft);border-color:var(--color-primary-main)}.bd-select{width:100%;display:grid;grid-template-columns:20px 3.5rem 1fr;align-items:center;gap:var(--spacing-md);padding:0;border:none;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.bd-select:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.bd-select:focus-visible{outline:var(--border-medium) solid var(--color-primary-main);outline-offset:2px;border-radius:var(--radius-sm)}.bd-swatch{width:20px;height:20px;border-radius:var(--radius-sm);border:var(--border-hairline) solid var(--color-border)}.bd-share{font-family:var(--font-family-mono);font-size:var(--font-size-small);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;text-align:right}.bd-track{display:block;min-width:0}.bd-bar{display:flex;min-width:6px;height:14px;border-radius:var(--radius-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(var(--color-border-rgb),.6)}.bd-bar>span{flex-basis:0;min-width:2px}.bd-shades{display:flex;flex-wrap:wrap;gap:var(--spacing-xs) var(--spacing-lg);margin-top:var(--spacing-xs);padding-left:calc(20px + 3.5rem + 2 * var(--spacing-md))}.bd-shade{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) 0;border:none;background:none;color:var(--color-text-secondary);font-family:var(--font-family-mono);font-size:var(--font-size-tiny);cursor:pointer}.bd-shade[data-pressed],.bd-shade:focus-visible{color:var(--color-text-primary)}@media(hover:hover){.bd-shade:hover{color:var(--color-text-primary)}}.bd-shade.is-selected{color:var(--color-text-primary)}.bd-shade.is-selected .bd-shade-dot{outline:var(--border-medium) solid var(--color-primary-main);outline-offset:1px}.bd-shade-dot{width:10px;height:10px;border-radius:50%;border:var(--border-hairline) solid var(--color-border)}.bd-shade-value{font-weight:var(--font-weight-bold)}.bd-shade-share{color:var(--color-text-muted)}.color-space-plot{width:100%;max-width:min(400px,46vh);margin:0 auto var(--spacing-lg)}.color-space-plot svg{display:block;width:100%;height:auto}.cs-disc{fill:var(--color-bg-elevated);stroke:var(--color-border)}.cs-grid{fill:none;stroke:var(--color-border);stroke-opacity:.7}.cs-sep{fill:none;stroke:var(--color-primary-main);stroke-opacity:.35;stroke-dasharray:4 4;transition:stroke-opacity var(--transition-normal)}.cs-tick{stroke:var(--color-text-primary);stroke-width:2}.cs-hit{fill:transparent}.cs-peak{stroke:var(--color-primary-main);stroke-width:2;transition:stroke var(--transition-fast),stroke-width var(--transition-fast)}.cs-peak,.cs-sep{transform-box:fill-box;transform-origin:center}.cs-family{cursor:pointer;transition:opacity var(--transition-fast)}.cs-family.is-dim{opacity:.25}.cs-family.is-selected .cs-peak{stroke:var(--color-text-primary);stroke-width:3}.cs-family.is-selected .cs-sep{stroke-opacity:.8}.color-space .view-caption{margin-bottom:var(--spacing-md)}.cs-legend{list-style:none;margin:var(--spacing-lg) 0 0;padding:0;display:grid;gap:var(--spacing-sm);font-size:var(--font-size-small);color:var(--color-text-secondary)}.cs-legend li{display:flex;align-items:center;gap:var(--spacing-md)}.cs-legend-glyph{flex-shrink:0;width:20px;height:20px;overflow:visible}.cs-legend-sep{fill:none;stroke:var(--color-primary-main);stroke-opacity:.8;stroke-dasharray:3 3}.cs-members circle{fill:var(--color-text-primary);opacity:.55}canvas.sample-overlay{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-width:none;max-height:none;pointer-events:none;opacity:0;transition:opacity var(--transition-normal)}canvas.sample-overlay.is-shown{opacity:1}.overlay-chip{position:absolute;left:var(--spacing-sm);bottom:var(--spacing-sm);z-index:var(--z-elevated);display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);border:none;border-radius:var(--radius-pill);background:#0009;color:#fff;font-size:var(--font-size-tiny);font-weight:var(--font-weight-semibold);line-height:1.4;cursor:pointer}.overlay-chip:hover{background:#000c}.overlay-chip-dot{width:10px;height:10px;border-radius:50%;border:1px solid white}.toast{position:fixed;left:50%;bottom:calc(var(--spacing-xl) * 2);transform:translate(-50%);z-index:var(--z-overlay);pointer-events:none}.toast-message{display:block;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-pill);background:var(--color-bg-elevated);border:var(--border-thin) solid var(--color-border);box-shadow:var(--shadow-large);color:var(--color-text-primary);font-family:var(--font-family-mono);font-size:var(--font-size-small);font-weight:var(--font-weight-bold);white-space:nowrap}.palette-download{font-size:var(--font-size-small)}.image-file.eyedropper-active{cursor:crosshair}.eyedropper-preview{position:fixed;pointer-events:none;transform:translate(-50%,-100%);margin-top:-60px;display:flex;flex-direction:column;align-items:center;z-index:var(--z-overlay);filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.eyedropper-preview-swatch{width:48px;height:48px;border-radius:var(--radius-md);border:2px solid var(--color-neutral-white);box-shadow:var(--shadow-medium)}.eyedropper-preview-label{margin-top:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-sm);background:#000000b3;color:var(--color-neutral-white);font-family:var(--font-family-mono);font-size:var(--font-size-tiny);font-weight:var(--font-weight-bold);white-space:nowrap}@media(max-width:800px){::-webkit-scrollbar{width:0;background:transparent}body,.app-shell{height:100dvh}.app-shell{padding-bottom:3.1rem}header{justify-content:space-between;padding:var(--spacing-md) var(--spacing-xl)}.header-text p{font-size:var(--font-size-small)}.header-text{margin:0 0 0 var(--spacing-md)}.title{font-size:var(--font-size-large)}.toolbar{gap:var(--spacing-md);flex-wrap:nowrap;padding:var(--spacing-md)}.toolbar-label,.toolbar-divider{display:none}.toolbar-group{flex:1;min-width:0}.select-trigger{width:100%;min-width:0;padding:var(--spacing-md);font-size:var(--font-size-small)}.helper-dot{display:none}.helper-bar{padding:var(--spacing-sm) var(--spacing-md)}.container{flex:1;min-height:0;padding:var(--spacing-sm) var(--spacing-md)}.photo-container{height:100%;width:100%}.select-item{padding:var(--spacing-lg) var(--spacing-md);font-size:var(--font-size-body)}.split-view{flex-direction:column;gap:var(--spacing-sm);padding:var(--spacing-sm);overflow:hidden}.split-pane{flex:none;padding:var(--spacing-md)}.pane-label{display:none}.split-view.is-empty .split-pane{flex:1}.split-view.is-empty .pane-label{display:block}.palette-pane{flex:1;min-height:0;overflow:hidden;align-items:stretch}.palette-panel{height:100%;min-height:0}.palette-top{position:static;flex-shrink:0;margin:0 0 var(--spacing-md);padding:0;border-bottom:none;background:none}.palette-strip{height:36px}.view-panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding-top:var(--spacing-md)}.view-panel>*{min-height:calc(100% + 18dvh - var(--image-shrink, 0px));transform:translateY(var(--image-shrink, 0px))}.view-tabs{margin-top:var(--spacing-md)}.color-space-plot{max-width:min(260px,36dvh)}.toast{bottom:5.5rem}.image-file{max-height:calc(30dvh - var(--image-shrink, 0px))}}