.color-field{gap:var(--space-2);grid-template-columns:2.5rem minmax(0,1fr);align-items:center;display:grid}.color-field__swatch{background-color:var(--sheet);background-image:conic-gradient(var(--line-strong) 25%, transparent 0 50%, var(--line-strong) 0 75%, transparent 0);border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;background-size:10px 10px;block-size:2.5rem;inline-size:2.5rem;display:block;position:relative;overflow:hidden}.color-field__swatch:after{content:"";background:var(--swatch,transparent);position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000014}.color-field__swatch:focus-within{outline:2px solid var(--focus);outline-offset:2px}.color-field__swatch input{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;position:absolute;inset:0}.color-field__text{min-inline-size:0}.swatch-chip{background-color:var(--sheet);background-image:conic-gradient(var(--line-strong) 25%, transparent 0 50%, var(--line-strong) 0 75%, transparent 0);background-size:10px 10px;position:relative;overflow:hidden}.swatch-chip:after{content:"";background:var(--swatch,transparent);position:absolute;inset:0}.copy-btn .icon:last-of-type{display:none}.copy-btn.is-copied{color:var(--accent)}.copy-btn.is-copied .icon:first-of-type{display:none}.copy-btn.is-copied .icon:last-of-type{display:inline-block}.code-out{padding:var(--space-3) var(--space-4);border:1px solid var(--sheet-rule);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--font-mono);white-space:pre;tab-size:2;text-align:start;direction:ltr;max-block-size:24rem;margin:0;font-size:.8125rem;line-height:1.6;overflow:auto}.code-out:empty:before{content:attr(data-empty);color:var(--ink-3);font-family:var(--font-sans);white-space:normal}.meter{gap:var(--space-1);display:grid}.meter__track{border-radius:var(--radius-sm);background:var(--sheet-rule);block-size:4px;overflow:hidden}.meter__bar{background:var(--accent);transform-origin:0;block-size:100%;transition:transform var(--duration) var(--ease-out)}.meter.is-over .meter__bar{background:var(--danger)}.meter__text{color:var(--ink-3);font-size:var(--text-sm)}.meter.is-over .meter__text{color:var(--danger);font-weight:600}[dir=rtl] .meter__bar{transform-origin:100%}.notice[hidden],.result[hidden],.preview[hidden],.figures[hidden],.sheet[hidden],.sheet__bar[hidden],.field[hidden],.options[hidden],.segmented[hidden],.code-out[hidden],.meter[hidden],.color-field[hidden]{display:none}.sheet__body>.figures{padding:0}.color-picker__ramp-sheet{grid-column:1/-1}.color-picker__area{border-radius:var(--radius);background:linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--hue,red);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;block-size:15rem;position:relative;box-shadow:inset 0 0 0 1px #00000014}@media (min-width:64rem){.color-picker__area{block-size:18rem}}.color-picker__thumb{background:var(--swatch,transparent);block-size:1.375rem;inline-size:1.375rem;transition:transform var(--duration-fast) var(--ease-out);border:3px solid #fff;border-radius:50%;position:absolute;inset-block-start:calc(var(--y,0) * 100%);inset-inline-start:calc(var(--x,0) * 100%);transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d,0 2px 6px #0000004d}.color-picker__thumb:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.color-picker__area.is-dragging .color-picker__thumb{cursor:grabbing;transform:translate(-50%,-50%)scale(1.15)}.color-picker__sliders{gap:var(--space-4);padding-block:var(--space-1);display:grid}.color-picker__slider{appearance:none;cursor:pointer;border-radius:999px;block-size:.875rem;inline-size:100%;margin:0;box-shadow:inset 0 0 0 1px #0000001a}.color-picker__slider--hue{background:linear-gradient(90deg,red 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.color-picker__slider--alpha{background:linear-gradient(to right, transparent, var(--opaque,#000)), conic-gradient(var(--line-strong) 25%, var(--sheet) 0 50%, var(--line-strong) 0 75%, var(--sheet) 0) 0 0/10px 10px}.color-picker__slider::-webkit-slider-thumb{appearance:none;background:0 0;border:3px solid #fff;border-radius:50%;block-size:1.25rem;inline-size:1.25rem;box-shadow:0 0 0 1px #00000059,0 2px 4px #00000040}.color-picker__slider::-moz-range-thumb{background:0 0;border:3px solid #fff;border-radius:50%;block-size:.875rem;inline-size:.875rem;box-shadow:0 0 0 1px #00000059,0 2px 4px #00000040}.color-picker__slider:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.color-picker__inputs{gap:var(--space-2);flex-wrap:wrap;display:flex}.color-picker__inputs .color-field{flex:14rem}.color-picker__live{font-family:var(--font-mono);font-weight:600}.color-picker__preview{border:1px solid var(--sheet-rule);border-radius:var(--radius);block-size:6rem}.color-picker__ramp{gap:var(--space-1);grid-template-columns:repeat(11,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}@media (min-width:52rem){.color-picker__ramp{gap:var(--space-2)}}.color-picker__swatch{border-radius:var(--radius-sm);cursor:pointer;block-size:4.5rem;inline-size:100%;transition:transform var(--duration-fast) var(--ease-out);border:1px solid #00000014;justify-content:center;align-items:flex-end;padding:0;display:flex}@media (min-width:52rem){.color-picker__swatch{block-size:6rem}}.color-picker__swatch:hover{transform:translateY(-2px)}.color-picker__swatch:active{transform:scale(.97)}.color-picker__swatch[aria-current=true]{outline:2px solid var(--ink);outline-offset:2px}.color-picker__swatch-code{z-index:1;padding:0 var(--space-1);border-radius:var(--radius-sm);background:var(--sheet);color:var(--ink);font-family:var(--font-mono);font-size:var(--text-xs);margin-block-end:var(--space-2);display:none;position:relative}@media (min-width:64rem){.color-picker__swatch-code{display:block}}@media (hover:none){.color-picker__swatch:hover{transform:none}}