.jin-color-picker,.jin-color-picker *{box-sizing:border-box}.jin-color-picker{--picker-accent:#155e75;--picker-accent-dark:#164e63;--picker-border:#cbd5e1;--picker-muted:#f8fafc;--picker-text:#172033;width:min(100%,75rem);margin:.6rem auto;overflow:hidden;font-size:.875rem;line-height:1.5;color:var(--picker-text);background:#fff;border:1px solid var(--picker-border);border-radius:.65rem;box-shadow:0 .4rem 1.2rem rgb(15 23 42/8%)}.jin-color-picker .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.jin-color-picker__header{display:grid;grid-template-columns:minmax(4.75rem,7.5rem) 1fr;min-height:4.5rem;border-bottom:1px solid var(--picker-border)}.jin-color-picker__logo,.jin-color-picker__title{display:flex;align-items:center;justify-content:center;margin:0;padding:.55rem .75rem}.jin-color-picker__logo{background:var(--picker-muted);border-right:1px solid var(--picker-border)}.jin-color-picker__logo-image{display:block;width:auto;max-width:100%;height:auto;max-height:3.15rem;object-fit:contain}.jin-color-picker__logo-mark{display:inline-grid;place-items:center;width:2.7rem;height:2.7rem;font-size:1rem;font-weight:800;color:#fff;background:linear-gradient(135deg,#dc2626,#eab308 35%,#16a34a 55%,#2563eb 78%,#7c3aed);border-radius:50%}.jin-color-picker__title{font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.3;text-align:center}.jin-color-picker__account{display:flex;flex-wrap:wrap;gap:.2rem .45rem;align-items:center;justify-content:center;padding:.42rem .75rem;font-size:.75rem;font-weight:650;border-bottom:1px solid var(--picker-border)}.jin-color-picker__badge{padding:.1rem .4rem;border-radius:999px}.jin-color-picker__badge--free{background:#e5e7eb}.jin-color-picker__badge--pro{color:#713f12;background:#fde68a}.jin-color-picker__badge--beta{color:#fff;background:#6d28d9}.jin-color-picker__privacy{display:flex;gap:.4rem;align-items:flex-start;padding:.5rem clamp(.7rem,2.5vw,1rem);font-size:.75rem;color:#4d3b00;background:#fff9df;border-bottom:1px solid #e5cf80}.jin-color-picker__privacy p,.jin-color-picker__intro p,.jin-color-picker__cmyk-note p{margin:0}.jin-color-picker__intro{padding:.55rem clamp(.7rem,2.5vw,1rem);background:var(--picker-muted);border-bottom:1px solid var(--picker-border)}.jin-color-picker__intro h2,.jin-color-picker__main h2{margin:0 0 .4rem;font-size:.95rem;line-height:1.35}.jin-color-picker__intro p{font-size:.8rem}.jin-color-picker__main{padding:clamp(.7rem,2.5vw,1.2rem)}.jin-color-picker__workspace{width:min(100%,68rem);margin:0 auto}.jin-color-picker__all-colors{margin-bottom:.9rem;padding:.75rem;background:#fff;border:1px solid var(--picker-border);border-radius:.5rem}.jin-color-picker__all-colors p{margin:-.1rem 0 .6rem;font-size:.76rem;color:#475569}.jin-color-picker__swatch-grid{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:.15rem}.jin-color-picker__swatch{min-width:0;min-height:1.75rem;padding:0;cursor:pointer;border:1px solid rgb(15 23 42/35%);border-radius:.18rem}.jin-color-picker__swatch:hover{border-color:#0f172a;box-shadow:0 0 0 1px #fff,0 0 0 3px #475569}.jin-color-picker__swatch.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #0f172a}.jin-color-picker__editor{display:grid;grid-template-columns:minmax(17rem,1.15fr) minmax(16rem,.85fr);gap:.9rem}.jin-color-picker__controls,.jin-color-picker__preview-panel,.jin-color-picker__format-card{padding:.75rem;background:#fff;border:1px solid var(--picker-border);border-radius:.5rem}.jin-color-picker__palette{position:relative;width:100%;min-height:14rem;cursor:crosshair;touch-action:none;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue-color,red);border:1px solid #64748b;border-radius:.35rem}.jin-color-picker__palette-handle{position:absolute;top:0;left:0;width:1rem;height:1rem;background:0 0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0f172a;transform:translate(-50%,-50%);pointer-events:none}.jin-color-picker__range{display:grid;gap:.25rem;margin-top:.65rem;font-weight:700}.jin-color-picker__range-heading,.jin-color-picker__range-ends{display:flex;align-items:center;justify-content:space-between}.jin-color-picker__range-heading output{min-width:3.4rem;padding:.08rem .4rem;font-size:.75rem;font-variant-numeric:tabular-nums;text-align:center;background:var(--picker-muted);border:1px solid var(--picker-border);border-radius:999px}.jin-color-picker__range-ends{margin-top:-.15rem;font-size:.68rem;font-weight:600;color:#475569}.jin-color-picker__range input[type=range]{--picker-range-background:linear-gradient(to right,#64748b,#64748b);width:100%;height:2rem;padding:0;margin:0;appearance:none;cursor:pointer;background:0 0}.jin-color-picker__range input[type=range]::-webkit-slider-runnable-track{width:100%;height:.72rem;background-color:#fff;background-image:var(--picker-range-background);background-position:0 0,0 0,0 .38rem,.38rem -.38rem,-.38rem 0;background-size:auto,.76rem .76rem,.76rem .76rem,.76rem .76rem,.76rem .76rem;border:1px solid #475569;border-radius:999px}.jin-color-picker__range input[type=range]::-moz-range-track{width:100%;height:.72rem;background-color:#fff;background-image:var(--picker-range-background);background-position:0 0,0 0,0 .38rem,.38rem -.38rem,-.38rem 0;background-size:auto,.76rem .76rem,.76rem .76rem,.76rem .76rem,.76rem .76rem;border:1px solid #475569;border-radius:999px}.jin-color-picker__range input[type=range]::-webkit-slider-thumb{width:1.35rem;height:1.35rem;margin-top:-.315rem;appearance:none;background:var(--picker-range-thumb-color,var(--picker-accent));border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #0f172a,0 2px 4px rgb(15 23 42/30%)}.jin-color-picker__range input[type=range]::-moz-range-thumb{width:1.35rem;height:1.35rem;background:var(--picker-range-thumb-color,var(--picker-accent));border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #0f172a,0 2px 4px rgb(15 23 42/30%)}.jin-color-picker__range input[data-color-hue]{--picker-range-background:linear-gradient(to right,red 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red 100%);--picker-range-thumb-color:var(--picker-hue-color,red)}.jin-color-picker__range input[data-color-alpha]{--picker-range-background:linear-gradient(to right,var(--picker-alpha-start,rgb(51 102 153/0)),var(--picker-alpha-color,#369)),linear-gradient(45deg,#cbd5e1 25%,transparent 25%),linear-gradient(-45deg,#cbd5e1 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#cbd5e1 75%),linear-gradient(-45deg,transparent 75%,#cbd5e1 75%);--picker-range-thumb-color:var(--picker-alpha-color,#369)}.jin-color-picker__preview-comparison{display:grid;grid-template-columns:1.4fr .6fr;gap:.65rem}.jin-color-picker__preview-comparison>div>span{display:block;margin-bottom:.25rem;font-size:.75rem;font-weight:700}.jin-color-picker__checker{padding:0;background-color:#fff;background-image:linear-gradient(45deg,#d9dee6 25%,transparent 25%),linear-gradient(-45deg,#d9dee6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d9dee6 75%),linear-gradient(-45deg,transparent 75%,#d9dee6 75%);background-position:0 0,0 .5rem,.5rem -.5rem,-.5rem 0;background-size:1rem 1rem;border-radius:.35rem}.jin-color-picker__preview,.jin-color-picker__opaque-preview{min-height:11rem;border:1px solid #64748b;border-radius:.35rem}.jin-color-picker__preview{display:flex;flex-direction:column;gap:.55rem;align-items:center;justify-content:center;padding:.6rem}.jin-color-picker__sample{padding:.25rem .4rem;font-size:.78rem;font-weight:750;border:2px solid transparent;border-radius:.25rem}.jin-color-picker__sample--white{color:#fff}.jin-color-picker__sample--black{color:#000}.jin-color-picker__sample.is-recommended{border-color:currentcolor}.jin-color-picker__recommendation{margin:.65rem 0 0;padding:.55rem .65rem;font-weight:800;color:#0c4a6e;background:#e0f2fe;border-left:.3rem solid #0284c7;border-radius:.25rem}.jin-color-picker__status{min-height:1.5rem;margin:.7rem 0;font-size:.78rem;font-weight:650}.jin-color-picker__formats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.jin-color-picker__format-card h3{margin:0 0 .5rem;font-size:.88rem}.jin-color-picker__fields{display:flex;flex-wrap:wrap;gap:.4rem}.jin-color-picker__fields label{display:grid;grid-template-columns:1.25rem minmax(3.4rem,1fr);gap:.25rem;align-items:center;min-width:5.4rem;font-size:.72rem;font-weight:700}.jin-color-picker__fields .jin-color-picker__text-field{grid-template-columns:1.75rem 1fr;width:100%}.jin-color-picker__fields input{width:100%;min-height:2rem;padding:.25rem .4rem;font:inherit;font-variant-numeric:tabular-nums;color:inherit;background:#fff;border:1px solid #64748b;border-radius:.3rem}.jin-color-picker__fields input.is-invalid{color:#991b1b;background:#fff1f2;border-color:#b91c1c}.jin-color-picker__output{display:block;min-height:2rem;margin:.55rem 0;padding:.4rem .5rem;overflow-wrap:anywhere;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;background:var(--picker-muted);border-radius:.3rem}.jin-color-picker__copy{width:100%;min-height:2.25rem;padding:.4rem .65rem;font:inherit;font-weight:750;color:#fff;cursor:pointer;background:var(--picker-accent);border:0;border-radius:.35rem}.jin-color-picker__copy:hover{background:var(--picker-accent-dark)}.jin-color-picker__copy:disabled{cursor:not-allowed;opacity:.55}.jin-color-picker__cmyk-note{margin-top:.75rem;padding:.65rem;font-size:.76rem;background:#fefce8;border:1px solid #fde047;border-radius:.4rem}.jin-color-picker :focus-visible{outline:3px solid #f59e0b;outline-offset:2px}@media (max-width:44rem){.jin-color-picker__editor,.jin-color-picker__formats{grid-template-columns:1fr}.jin-color-picker__swatch-grid{grid-template-columns:repeat(18,minmax(0,1fr))}.jin-color-picker__palette{min-height:12rem}}@media (max-width:25rem){.jin-color-picker{margin-block:.3rem;border-radius:.35rem}.jin-color-picker__header{grid-template-columns:4.25rem 1fr;min-height:3.9rem}.jin-color-picker__logo,.jin-color-picker__title{padding:.4rem}.jin-color-picker__swatch-grid{grid-template-columns:repeat(12,minmax(0,1fr))}.jin-color-picker__swatch{min-height:1.55rem}.jin-color-picker__preview-comparison{grid-template-columns:1fr}.jin-color-picker__opaque-preview{min-height:4.5rem}}@media (prefers-reduced-motion:reduce){.jin-color-picker *,.jin-color-picker *:before,.jin-color-picker *:after{scroll-behavior:auto !important;transition-duration:.01ms !important}}