: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, .5rem);--pqc-_radius-sm: var(--pqc-radius-sm, .375rem);--pqc-_gap: var(--pqc-gap, .625rem);--pqc-_font-size: var(--pqc-font-size, .75rem);--pqc-_sv-height: var(--pqc-sv-height, 120px);--pqc-_hue-height: var(--pqc-hue-height, .75rem);--pqc-_track-height: var(--pqc-track-height, .5rem);--pqc-_thumb-size: var(--pqc-thumb-size, .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 *:before,.pqc-root *:after{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-sv:focus-visible,.pqc-hue:focus-visible,.pqc-alpha:focus-visible,.pqc-slider: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 #00000059;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(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.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 #00000059;background:var(--pqc-_hue);pointer-events:none}.pqc-alpha{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-swatch-checker,.pqc-hex-swatch-checker{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;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-alpha{position:relative;width:100%;height:var(--pqc-_hue-height);border-radius:9999px;cursor:pointer;touch-action:none}.pqc-alpha-fill{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to right,rgb(var(--pqc-_rgb) / 0),rgb(var(--pqc-_rgb)))}.pqc-alpha-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 #00000059;pointer-events:none}.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:hover{color:var(--pqc-_text)}.pqc-tab--active{background:var(--pqc-_surface);color:var(--pqc-_text);box-shadow:0 1px 2px #0000000f}.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;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:var(--pqc-_fill)}.pqc-hex-opacity{font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);color:var(--pqc-_muted);flex-shrink:0;min-width:2.5rem;text-align:right}.pqc-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:1.75rem;height:1.75rem;padding:0;border:1px solid var(--pqc-_border);border-radius:var(--pqc-_radius-sm);background:var(--pqc-_bg);color:var(--pqc-_muted);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{font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);color:var(--pqc-_muted)}.pqc-hex-input{flex:1 1 0%;min-width:0;background:transparent;border:none;outline:none;font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);color:var(--pqc-_text)}.pqc-channel-row{display:flex;align-items:center;gap:.5rem}.pqc-channel-label{width:1rem;text-align:center;font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);font-weight:700;-webkit-user-select:none;user-select:none}.pqc-channel-input{width:2.25rem;text-align:right;background:transparent;border:none;outline:none;font-family:var(--pqc-_font-mono);font-size:var(--pqc-_font-size);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 #0000004d;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;top:0;right:0;bottom:0;left: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}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.demo{--demo-bg: #f4f5f7;--demo-surface: #ffffff;--demo-text: #1a1d21;--demo-muted: #6b7280;--demo-border: #e4e6ea;min-height:100vh;background:var(--demo-bg);color:var(--demo-text);transition:background .2s ease,color .2s ease}.demo--dark{--demo-bg: #15171a;--demo-surface: #22262b;--demo-text: #e6e8eb;--demo-muted: #9aa0a6;--demo-border: #31353b}.demo-inner{max-width:640px;margin:0 auto;padding:48px 24px}.demo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.demo-head h1{margin:0;font-size:1.25rem;font-weight:650;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.demo-actions{display:flex;gap:8px}.demo-toggle{padding:6px 12px;font-size:.8125rem;font-weight:600;color:var(--demo-text);background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:8px;cursor:pointer}.demo-toggle:hover{border-color:var(--demo-muted)}.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}@media(max-width:560px){.demo-grid{grid-template-columns:1fr}}.demo-card{padding:16px;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:14px;box-shadow:0 4px 24px #0000000f}.demo-preview{display:flex;flex-direction:column;gap:16px}.demo-chip{height:96px;border-radius:14px;border:1px solid var(--demo-border)}.demo-readout{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem}.demo-readout dt{color:var(--demo-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.6875rem;align-self:center}.demo-readout dd{margin:0}.demo-hint{margin:0;font-size:.75rem;line-height:1.5;color:var(--demo-muted)}