@layer components{._container_g8yap_12{container-type:inline-size;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);flex-wrap:wrap}._swatches_g8yap_22{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}._swatch_g8yap_22{position:relative;width:32px;height:32px;border-radius:var(--radius-md);border:1px solid var(--color-border);cursor:pointer;background:none;padding:0;transition:border-color var(--duration-fast) var(--easing-productive),box-shadow var(--duration-fast) var(--easing-productive)}._swatch_g8yap_22:before{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);min-width:48px;min-height:48px}._swatch_g8yap_22:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}._swatch_g8yap_22:hover:not(._selected_g8yap_59){border-color:var(--color-border-hover)}._selected_g8yap_59{border-color:var(--color-focus-ring);box-shadow:0 0 0 2px var(--color-focus-ring)}._swatch-color_g8yap_70{width:100%;height:100%;border-radius:calc(var(--radius-md) - 1px)}._transparent-pattern_g8yap_77{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}._hex-input-wrapper_g8yap_92{display:flex;align-items:center;gap:var(--space-1);margin-inline-start:auto}._hex-prefix_g8yap_99{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-muted);-webkit-user-select:none;user-select:none}._hex-input_g8yap_92{width:5.5em;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:light-dark(rgba(255,255,255,.5),rgba(255,255,255,.05));font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-primary);line-height:1;transition:border-color var(--duration-fast) var(--easing-productive),box-shadow var(--duration-fast) var(--easing-productive)}._hex-input_g8yap_92:focus-visible{outline:none;border-color:var(--color-focus-ring);box-shadow:0 0 0 2px var(--color-focus-ring)}._hex-input_g8yap_92::placeholder{color:var(--color-text-muted)}@media(prefers-reduced-motion:reduce){._swatch_g8yap_22,._hex-input_g8yap_92{transition:none}}}@layer components{._container_jd38w_15{container-type:inline-size;display:flex;flex-direction:column;gap:var(--space-3)}._segmentedControl_jd38w_23{display:flex;flex-direction:row;gap:var(--space-1);padding:var(--space-1);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:blur(var(--glass-blur-subtle));-webkit-backdrop-filter:blur(var(--glass-blur-subtle))}._segment_jd38w_23{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-0-5);flex:1;min-height:48px;padding:var(--space-2) var(--space-3);border:1px solid transparent;border-radius:var(--radius-md);background:transparent;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-text-secondary);cursor:pointer;transition:background var(--duration-fast) var(--easing-productive),color var(--duration-fast) var(--easing-productive),border-color var(--duration-fast) var(--easing-productive),box-shadow var(--duration-fast) var(--easing-productive)}._segment_jd38w_23:before{content:"";position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);min-width:48px;min-height:48px}._segment_jd38w_23:hover:not(._active_jd38w_71){background:light-dark(rgba(0,0,0,.03),rgba(255,255,255,.03));color:var(--color-text-primary)}._segment_jd38w_23:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}._active_jd38w_71{background:var(--color-primary);color:#fff;border-color:transparent;box-shadow:var(--shadow-sm)}._active_jd38w_71:hover{background:var(--color-primary-hover)}._formatLabel_jd38w_95{font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:var(--tracking-wide);line-height:1}._fileSize_jd38w_103{font-size:var(--text-xs);font-weight:var(--font-normal);opacity:.75;line-height:1}._active_jd38w_71 ._fileSize_jd38w_103{opacity:.85}._colorPickerSection_jd38w_115{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);backdrop-filter:blur(var(--glass-blur-subtle));-webkit-backdrop-filter:blur(var(--glass-blur-subtle))}._colorPickerLabel_jd38w_127{font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text-secondary);white-space:nowrap}@media(prefers-reduced-motion:reduce){._segment_jd38w_23{transition:none}}@container (max-width: 280px){._segmentedControl_jd38w_23{flex-direction:column}}}