.f-color-picker{width:var(--f-color-window-width);padding:var(--space-1);scrollbar-gutter:auto;overflow:auto}.f-color-picker.f-scroll-region{scrollbar-gutter:stable both-edges;padding:var(--space-1) max(0px,calc(var(--space-2) - var(--f-scroll-inset,0px)))}.f-color-picker.f-scroll-region::-webkit-scrollbar{width:var(--space-2);height:var(--space-2)}.f-color-picker__header{gap:var(--space-2);margin-bottom:var(--space-2);align-items:center;display:flex}.f-color-picker__info{gap:calc(var(--space-1)/2);flex:1;min-width:0;display:grid}.f-color-picker__info strong{font-weight:500}.f-color-picker__usage{font-size:var(--font-size-label);opacity:var(--ui-control-readout-muted-alpha);line-height:1.4}.f-color-picker__area{height:calc(var(--space-4)*5);border-radius:var(--radius-1);touch-action:none;cursor:crosshair;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);position:relative}.f-color-picker__area:focus-visible{outline:var(--f-focus-width) solid var(--focus-ring);outline-offset:var(--f-focus-offset)}.f-color-picker__handle{width:var(--space-2);height:var(--space-2);border:var(--f-focus-width) solid var(--picker-contrast,#fff);box-shadow:none;pointer-events:none;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.f-color-picker__hue{appearance:none;width:100%;height:var(--ui-control-height);margin:var(--space-1) 0;cursor:ew-resize;touch-action:pan-y;background:0 0;padding:0;display:block}.f-color-picker__hue::-webkit-slider-runnable-track{height:var(--space-1);border-radius:var(--radius-1);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.f-color-picker__hue::-moz-range-track{height:var(--space-1);border-radius:var(--radius-1);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.f-color-picker__hue::-webkit-slider-thumb{appearance:none;width:var(--space-2);height:var(--space-2);margin-top:calc(var(--space-1)/-2);border:var(--f-focus-width) solid var(--picker-contrast,#fff);box-shadow:none;background:0 0;border-radius:50%}.f-color-picker__hue::-moz-range-thumb{width:var(--space-2);height:var(--space-2);border:var(--f-focus-width) solid var(--picker-contrast,#fff);box-shadow:none;background:0 0;border-radius:50%}.f-color-picker__channels{gap:var(--space-1);padding-top:var(--space-1);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.f-color-picker__channels label{gap:var(--space-1);font-size:var(--font-size-label);display:grid}.f-color-picker__channels input{appearance:textfield}.f-color-picker__channels input::-webkit-inner-spin-button{appearance:none}.f-color-picker__channel-value{min-width:0;display:block;position:relative}.shared-controls-surface .f-color-picker__channel-value input.f-number-input{font-family:var(--font-family-mono);padding-inline-end:var(--space-4)}.f-color-picker__unit{inset-inline-end:var(--space-1);font:var(--font-size-field)/var(--line-height-label) var(--font-family-mono);opacity:var(--ui-control-readout-muted-alpha);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.f-color-picker__channel-value:has(input:focus) .f-color-picker__unit{color:var(--ui-control-selected-ink)}.f-color-picker__values{grid-template-columns:calc(var(--ui-control-height)*2) minmax(0,1fr);gap:var(--space-1);align-items:start;display:grid}.f-color-picker__comparison{min-height:var(--ui-control-height);align-items:center;display:flex}.f-color-picker__restore,.f-color-picker__current{appearance:none;align-content:center;justify-items:center;gap:calc(var(--space-1)/2);min-width:0;width:var(--ui-control-height);min-height:var(--ui-control-height);color:inherit;font:inherit;border-radius:var(--radius-1);font-size:var(--font-size-label);background:0 0;border:0;grid-template-columns:minmax(0,1fr);padding:0;font-weight:400;display:grid;position:relative}.f-color-picker__comparison span:not(.f-color-picker__chip),.f-color-picker__hex-field>span{display:none}.f-color-picker__restore{cursor:pointer;touch-action:manipulation;outline:none}.f-color-picker__restore:is(:hover,:focus-visible) .f-color-picker__chip{outline:var(--f-focus-width) solid var(--text-primary);outline-offset:var(--f-focus-offset)}.f-color-picker__chip{width:100%;height:var(--ui-control-height);box-shadow:inset 0 0 0 var(--border-width) var(--color-rule);display:block}.f-color-picker__restore .f-color-picker__chip{border-radius:var(--radius-1) 0 0 var(--radius-1)}.f-color-picker__current .f-color-picker__chip{border-radius:0 var(--radius-1) var(--radius-1) 0}.f-color-picker__hex-field{align-items:stretch;gap:calc(var(--space-1)/2);font-size:var(--font-size-label);flex-direction:column-reverse;min-width:0;display:flex}.f-color-picker__hex-field>span{text-align:center}.shared-controls-surface input.f-color-picker__hex.f-text-input{font-family:var(--font-family-mono);text-transform:uppercase}.f-color-picker__error{font-size:var(--font-size-label);margin:var(--space-1) 0 0;line-height:1.4}.f-color-picker [aria-invalid=true]{outline:var(--border-width) solid var(--text-primary)}.f-color-picker__precision{margin:var(--space-1) 0 0;border:0;padding:0}.f-color-picker__precision>summary{cursor:pointer;min-height:var(--ui-control-height);font-size:var(--font-size-small);justify-content:space-between;align-items:center;list-style:none;display:flex}.f-color-picker__precision>summary::-webkit-details-marker{display:none}.f-color-picker__precision[open] .f-chevron [data-arm=left]{transform:rotate(-90deg)}.f-color-picker__precision[open] .f-chevron [data-arm=right]{transform:rotate(90deg)}@media (width<=599px){.f-color-picker__area{height:calc(var(--space-5)*3)}}.f-color-picker[data-movable=true] .f-color-picker__header{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.f-color-picker[data-movable=true] .f-color-picker__header.is-dragging{cursor:grabbing}.f-color-picker[data-movable=true] .f-color-picker__info{flex:1;min-width:0}.f-color-picker[data-movable=true] .f-color-picker__info:focus-visible{outline:var(--f-focus-width) solid var(--focus-ring);outline-offset:var(--f-focus-offset);border-radius:var(--radius-1)}.f-color-picker[data-neutral=true] .f-color-picker__channels{grid-template-columns:1fr}.f-color-picker[data-neutral=true] .f-color-picker__area{margin-bottom:var(--space-2)}.f-color-picker [hidden]{display:none!important}.f-color-picker__action.f-button{width:100%;margin-top:var(--space-1);padding-inline:var(--space-1);font-size:var(--font-size-small);box-shadow:none;justify-content:flex-start}.f-viewfinder-trigger{pointer-events:auto;flex:none}.f-viewfinder-trigger[aria-expanded=true]{background:var(--surface-subtle)}.f-viewfinder-panel{pointer-events:auto;width:var(--f-color-window-width);padding:var(--space-2);--ui-control-label-column:calc(var(--space-6) + var(--space-4));overflow:auto}.f-viewfinder-heading{justify-content:space-between;align-items:center;gap:var(--space-1);margin-bottom:var(--space-1);display:flex}.f-viewfinder-heading strong{font-size:var(--font-size-small);font-weight:500}.f-viewfinder-color{grid-template-columns:var(--ui-control-label-column) minmax(0,1fr);align-items:center;gap:var(--space-1);margin-top:var(--space-1);display:grid}.f-viewfinder-color>span{color:var(--color-copy)}.f-viewfinder-color .f-button{justify-content:space-between;width:100%}.f-viewfinder-swatch{width:var(--space-2);height:var(--space-2);border:var(--border-width) solid var(--color-rule);border-radius:calc(var(--radius-1)/2);flex:none}.f-viewfinder-color .f-button__label{font-family:var(--font-family-mono)}.viewport[data-theme=dark]{--text-primary:var(--f-neutral-light);--surface-canvas:var(--f-neutral-dark);--surface-subtle:color-mix(in srgb,var(--f-neutral-light) 7%,transparent);--color-rule:color-mix(in srgb,var(--f-neutral-light) 12%,transparent);--accent-primary:var(--f-neutral-light);--focus-ring:var(--f-neutral-light)}.f-hint{z-index:1000;max-width:calc(100vw - var(--space-4));width:max-content;padding:var(--space-1) var(--space-2);border:var(--border-width) solid var(--color-rule);border-radius:var(--radius-1);background:var(--surface-canvas);color:var(--text-primary);font:var(--font-size-small)/1.5 var(--font-family-sans);white-space:pre-line;text-align:start;pointer-events:none;box-shadow:var(--shadow-small,none);margin:0;position:fixed;inset:auto}.f-hint[hidden]{display:none}