.color-picker-field{display:flex;min-width:0;align-items:center;gap:.5rem}.color-picker-trigger{position:relative;display:grid;width:var(--color-swatch-size,2.35rem);min-width:var(--color-swatch-size,2.35rem);height:var(--color-swatch-size,2.35rem);place-items:center;overflow:hidden;border:0;border-radius:999px;background:var(--color-picker-value);box-shadow:0 0 0 1px var(--theme-border-subtle);cursor:pointer;transition:box-shadow .16s ease,transform .16s ease,filter .16s ease}.color-picker-trigger:after,.color-picker-trigger:before{display:none;content:none}.color-picker-trigger:hover:not(:disabled){box-shadow:0 0 0 1px var(--theme-border-subtle),0 0 0 3px var(--btn-primary-bg);filter:brightness(1.03);transform:translateY(-1px)}.color-picker-trigger:focus-visible{outline:none;box-shadow:0 0 0 1px var(--theme-border-subtle),0 0 0 3px var(--btn-primary-bg)}.color-picker-trigger:disabled{cursor:not-allowed;opacity:.52}.color-picker-hex-input{min-width:0;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:uppercase}.color-picker-panel{width:318px;padding:.8rem!important}.color-picker-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.7rem}.color-picker-panel-title,.color-picker-panel-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-picker-panel-title{font-size:.78rem;font-weight:800}.color-picker-panel-value{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace);font-size:.72rem;font-weight:700}.color-picker-sv{position:relative;height:11rem;overflow:hidden;border-radius:1rem;background:var(--color-picker-hue);box-shadow:inset 0 0 0 1px rgb(255 255 255/.16),0 .75rem 1.8rem rgb(0 0 0/.22);cursor:crosshair;touch-action:none}.color-picker-sv:after,.color-picker-sv:before{position:absolute;inset:0;content:"";pointer-events:none}.color-picker-sv:before{background:linear-gradient(90deg,#fff,rgb(255 255 255/0))}.color-picker-sv:after{background:linear-gradient(0deg,#000,rgb(0 0 0/0))}.color-picker-hue:focus-visible,.color-picker-sv:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgb(255 255 255/.2),0 0 0 3px var(--btn-primary-bg)}.color-picker-sv-cursor{position:absolute;left:var(--color-picker-sat);top:var(--color-picker-val);z-index:1;width:1rem;height:1rem;border:2px solid #fff;border-radius:999px;box-shadow:0 0 0 1px rgb(0 0 0/.55),0 .45rem .9rem rgb(0 0 0/.28);transform:translate(-50%,-50%)}.color-picker-control-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.45rem;margin-top:.7rem}.color-picker-hue{position:relative;height:1rem;border-radius:999px;background:linear-gradient(90deg,#ff3b30,#ffcc00,#34c759,#00c7be,#007aff,#af52de,#ff2d55,#ff3b30);box-shadow:inset 0 0 0 1px rgb(255 255 255/.16),0 .55rem 1rem rgb(0 0 0/.2);cursor:ew-resize;touch-action:none}.color-picker-hue-cursor{position:absolute;left:var(--color-picker-hue-pos);top:50%;width:1.2rem;height:1.2rem;border:2px solid #fff;border-radius:999px;background:var(--color-picker-hue);box-shadow:0 0 0 1px rgb(0 0 0/.4),0 .45rem .9rem rgb(0 0 0/.28);transform:translate(-50%,-50%)}.color-picker-icon-button.btn{--btn-icon-only-size:2rem}.color-picker-input-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,.75fr));gap:.45rem;margin-top:.75rem}.color-picker-input-grid label{display:grid;gap:.28rem;min-width:0}.color-picker-input-grid label span{font-size:.64rem;font-weight:800;text-align:center}.color-picker-panel-input.input{min-height:2rem;padding-inline:.45rem;text-align:center;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace);font-size:.72rem;font-variant-numeric:tabular-nums;text-transform:uppercase}.color-picker-presets{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.34rem;margin-top:.75rem}.color-picker-preset{position:relative;aspect-ratio:1;min-width:0;border:0;border-radius:999px;background:var(--color-picker-preset);box-shadow:0 0 0 1px var(--theme-border-subtle);cursor:pointer}.color-picker-preset:after{position:absolute;inset:-3px;border:2px solid transparent;border-radius:inherit;content:""}.color-picker-preset.is-active:after,.color-picker-preset:hover:after{border-color:var(--theme-text-primary)}@media (max-width:420px){.color-picker-panel{width:min(318px,calc(100vw - 1rem))}.color-picker-input-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.color-picker-input-grid label:first-child{grid-column:1/-1}}