:where(.pqc-root){--pqc-_surface:var(--pqc-surface,#ffffff);--pqc-_bg:var(--pqc-bg,#f1f2f4);--pqc-_text:var(--pqc-text,#1a1d21);--pqc-_muted:var(--pqc-muted,#6b7280);--pqc-_border:var(--pqc-border,#d4d7dd);--pqc-_accent:var(--pqc-accent,#f97316);--pqc-_thumb-ring:var(--pqc-thumb-ring,#ffffff);--pqc-_font-mono:var(--pqc-font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace);--pqc-_radius:var(--pqc-radius,0.5rem);--pqc-_radius-sm:var(--pqc-radius-sm,0.375rem);--pqc-_gap:var(--pqc-gap,0.625rem);--pqc-_font-size:var(--pqc-font-size,0.75rem);--pqc-_sv-height:var(--pqc-sv-height,120px);--pqc-_hue-height:var(--pqc-hue-height,0.75rem);--pqc-_track-height:var(--pqc-track-height,0.5rem);--pqc-_thumb-size:var(--pqc-thumb-size,0.875rem);--pqc-_swatch-size:var(--pqc-swatch-size,1.25rem);--pqc-_focus-width:var(--pqc-focus-width,2px);--pqc-_checker:var(--pqc-checker,#c9ccd1);display:flex;flex-direction:column;gap:var(--pqc-_gap);user-select:none;-webkit-user-select:none}.pqc-root *,.pqc-root :after,.pqc-root :before{box-sizing:border-box}.pqc-sv{position:relative;width:100%;height:var(--pqc-_sv-height);border-radius:var(--pqc-_radius-sm);overflow:hidden;cursor:crosshair;touch-action:none;background:linear-gradient(to bottom,transparent,#000),linear-gradient(to right,#fff,var(--pqc-_hue))}.pqc-alpha:focus-visible,.pqc-hue:focus-visible,.pqc-slider:focus-visible,.pqc-sv:focus-visible{outline:var(--pqc-_focus-width) solid var(--pqc-_accent);outline-offset:2px}.pqc-tab:focus-visible{outline:var(--pqc-_focus-width) solid var(--pqc-_accent);outline-offset:-2px}.pqc-sv-thumb{position:absolute;left:var(--pqc-_x);top:var(--pqc-_y);width:var(--pqc-_thumb-size);height:var(--pqc-_thumb-size);transform:translate(-50%,-50%);border-radius:9999px;border:2px solid var(--pqc-_thumb-ring);box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}.pqc-hue{position:relative;width:100%;height:var(--pqc-_hue-height);border-radius:9999px;cursor:pointer;touch-action:none;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}.pqc-hue-thumb{position:absolute;left:var(--pqc-_x);top:50%;width:calc(var(--pqc-_thumb-size) + .125rem);height:calc(var(--pqc-_thumb-size) + .125rem);transform:translate(-50%,-50%);border-radius:9999px;border:2px solid var(--pqc-_thumb-ring);box-shadow:0 0 0 1px rgba(0,0,0,.35);background:var(--pqc-_hue);pointer-events:none}.pqc-alpha,.pqc-hex-swatch-checker,.pqc-swatch-checker{background-color:var(--pqc-_surface);background-image:linear-gradient(45deg,var(--pqc-_checker) 25%,transparent 25%,transparent 75%,var(--pqc-_checker) 75%),linear-gradient(45deg,var(--pqc-_checker) 25%,transparent 25%,transparent 75%,var(--pqc-_checker) 75%);background-size:8px 8px;background-position:0 0,4px 4px}.pqc-hex-swatch-checker,.pqc-swatch-checker{position:absolute;inset:0;width:100%;height:100%}.pqc-alpha{position:relative;width:100%;height:var(--pqc-_hue-height);border-radius:9999px;cursor:pointer;touch-action:none}.pqc-alpha-fill{inset:0;border-radius:inherit;background:linear-gradient(to right,rgb(var(--pqc-_rgb)/0),rgb(var(--pqc-_rgb)))}.pqc-alpha-fill,.pqc-alpha-thumb{position:absolute;pointer-events:none}.pqc-alpha-thumb{left:var(--pqc-_x);top:50%;width:calc(var(--pqc-_thumb-size) + .125rem);height:calc(var(--pqc-_thumb-size) + .125rem);transform:translate(-50%,-50%);border-radius:9999px;border:2px solid var(--pqc-_thumb-ring);box-shadow:0 0 0 1px rgba(0,0,0,.35)}.pqc-tabs{display:flex;gap:.125rem;padding:.125rem;background:var(--pqc-_bg);border:1px solid var(--pqc-_border);border-radius:var(--pqc-_radius)}.pqc-tab{flex:1 1 0%;padding:.25rem 0;border:none;background:transparent;border-radius:var(--pqc-_radius-sm);color:var(--pqc-_muted);font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;cursor:pointer;transition:color .12s ease,background-color .12s ease}.pqc-tab--active,.pqc-tab:hover{color:var(--pqc-_text)}.pqc-tab--active{background:var(--pqc-_surface);box-shadow:0 1px 2px rgba(0,0,0,.06)}.pqc-mode{display:flex;flex-direction:column;gap:.5rem}.pqc-hex-row{display:flex;align-items:center;gap:.5rem}.pqc-hex-swatch{position:relative;width:1.75rem;height:1.75rem;flex-shrink:0;border-radius:var(--pqc-_radius-sm);border:2px solid var(--pqc-_border);overflow:hidden}.pqc-hex-swatch-fill{position:absolute;inset:0;width:100%;height:100%;background:var(--pqc-_fill)}.pqc-hex-opacity{font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);min-width:2.5rem;text-align:right}.pqc-hex-opacity,.pqc-icon-btn{color:var(--pqc-_muted);flex-shrink:0}.pqc-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--pqc-_border);border-radius:var(--pqc-_radius-sm);background:var(--pqc-_bg);cursor:pointer;transition:color .12s ease}.pqc-icon-btn:hover{color:var(--pqc-_text)}.pqc-icon-btn:focus-visible{outline:var(--pqc-_focus-width) solid var(--pqc-_accent);outline-offset:1px}.pqc-hex-field{display:flex;align-items:center;flex:1 1 0%;min-width:0;gap:.25rem;padding:.375rem .625rem;background:var(--pqc-_bg);border:1px solid var(--pqc-_border);border-radius:var(--pqc-_radius)}.pqc-hex-hash{color:var(--pqc-_muted)}.pqc-hex-hash,.pqc-hex-input{font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size)}.pqc-hex-input{flex:1 1 0%;min-width:0;background:transparent;border:none;outline:none;color:var(--pqc-_text)}.pqc-channel-row{display:flex;align-items:center;gap:.5rem}.pqc-channel-label{width:1rem;text-align:center;font-weight:700;user-select:none}.pqc-channel-input,.pqc-channel-label{font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size)}.pqc-channel-input{width:2.25rem;text-align:right;background:transparent;border:none;outline:none;color:var(--pqc-_text)}.pqc-slider{position:relative;flex:1 1 0%;height:var(--pqc-_track-height);border-radius:9999px;cursor:pointer;touch-action:none;background:var(--pqc-_grad)}.pqc-slider-thumb{position:absolute;left:var(--pqc-_x);top:50%;width:var(--pqc-_thumb-size);height:var(--pqc-_thumb-size);transform:translate(-50%,-50%);border-radius:9999px;border:2px solid var(--pqc-_thumb-ring);box-shadow:0 0 0 1px rgba(0,0,0,.3);pointer-events:none}.pqc-swatches{display:flex;flex-direction:column;gap:.375rem}.pqc-swatches-label{font-family:var(--pqc-_font-mono);font-size:.6875rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--pqc-_muted)}.pqc-swatch-grid{display:flex;flex-wrap:wrap;gap:.25rem}.pqc-swatch{position:relative;width:var(--pqc-_swatch-size);height:var(--pqc-_swatch-size);padding:0;flex-shrink:0;border-radius:var(--pqc-_radius-sm);border:2px solid var(--pqc-_border);overflow:hidden;cursor:pointer;transition:transform .1s ease}.pqc-swatch-fill{position:absolute;inset:0;width:100%;height:100%;background:var(--pqc-_fill)}.pqc-swatch:hover{transform:scale(1.12)}.pqc-swatch:focus-visible{outline:var(--pqc-_focus-width) solid var(--pqc-_accent);outline-offset:1px}.pqc-swatch--selected{box-shadow:0 0 0 1px var(--pqc-_surface),0 0 0 3px var(--pqc-_accent)}.pqc-dark{--pqc-surface:#2a2d31;--pqc-bg:#1a1d21;--pqc-text:#e6e8eb;--pqc-muted:#9aa0a6;--pqc-border:#3a3d42;--pqc-thumb-ring:#e6e8eb;--pqc-checker:#3f434a}