[hidden]{display:none!important}.color-card-title{margin:0;font-size:1.02rem;font-weight:700}.color-convert{grid-template-columns:minmax(150px,.8fr) minmax(0,2fr);align-items:stretch;gap:1rem;display:grid}.color-preview{border:1px solid var(--border);background:#22c55e;border-radius:12px;place-items:center;min-height:158px;transition:background-color .12s;display:grid}.color-preview span{letter-spacing:.02em;font-variant-numeric:tabular-nums;background:#ffffff47;border-radius:999px;padding:.3rem .7rem;font-size:1.02rem;font-weight:700}.color-controls{flex-direction:column;gap:.55rem;min-width:0;display:flex}.color-hex-row{align-items:center;gap:.6rem;display:flex}.color-label{font-size:.86rem;font-weight:700}.color-hex-input{border:1px solid var(--border);background:var(--bg);min-width:0;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:.03em;border-radius:8px;flex:auto;padding:.45rem .7rem;font-size:.98rem;transition:border-color .15s}.color-hex-input:focus{border-color:var(--accent);outline:none}.color-hex-input[aria-invalid=true]{border-color:var(--danger-text,#9b1c1c)}.color-native{border:1px solid var(--border);background:var(--surface);cursor:pointer;border-radius:8px;flex-shrink:0;width:2.9rem;height:2.4rem;padding:.15rem}.color-native::-webkit-color-swatch-wrapper{padding:0}.color-native::-webkit-color-swatch{border:none;border-radius:5px}.color-error{min-height:1.15em;color:var(--danger-text,#9b1c1c);margin:0;font-size:.8rem}.color-sliders{gap:.3rem;display:grid}.color-slider-row{grid-template-columns:1.4rem minmax(0,1fr) 2.8rem;align-items:center;gap:.65rem;display:grid}.color-slider-row label{color:var(--muted);font-size:.82rem;font-weight:700}.color-slider-row input[type=range]{width:100%;accent-color:var(--accent);margin:0}.color-slider-row output{text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600}.color-picker{border-top:1px solid var(--border);gap:.6rem;padding-top:.9rem;display:grid}.color-sv{border:1px solid var(--border);background-color:var(--sv-hue,red);cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000 0%,#000 100%),linear-gradient(90deg,#fff 0%,#fff0 100%);border-radius:10px;height:150px;position:relative}.color-sv:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.color-sv-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000073,inset 0 0 0 1px #0000004d}.color-hue-row{grid-template-columns:auto minmax(0,1fr) 2.8rem;align-items:center;gap:.65rem;display:grid}.color-hue-row label{color:var(--muted);white-space:nowrap;font-size:.82rem;font-weight:700}.color-hue-row output{text-align:right;font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600}.color-hue{appearance:none;border:1px solid var(--border);cursor:pointer;background:linear-gradient(90deg,red 0%,#ff0 16.67%,#0f0 33.33%,#0ff 50%,#00f 66.67%,#f0f 83.33%,red 100%);border-radius:999px;width:100%;height:14px;margin:0}.color-hue::-webkit-slider-thumb{-webkit-appearance:none;background:var(--hue-thumb,#22c55e);border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 1px #00000059}.color-hue::-moz-range-thumb{background:var(--hue-thumb,#22c55e);border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 0 0 1px #00000059}.color-hue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.color-values{border-top:1px solid var(--border);gap:.4rem;padding-top:.85rem;display:grid}.color-value-row{grid-template-columns:3.8rem minmax(0,1fr) auto;align-items:center;gap:.65rem;display:grid}.color-value-label{color:var(--muted);font-size:.78rem;font-weight:700}.color-value-code{background:color-mix(in srgb, var(--border) 45%, transparent);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;border-radius:7px;padding:.3rem .6rem;font-size:.88rem}.color-copy-btn{padding:.28rem .65rem;font-size:.8rem}.color-stage{gap:.75rem;display:grid}.color-canvas{border:1px solid var(--border);cursor:crosshair;touch-action:pan-y;background:#fff;border-radius:10px;width:100%;height:auto;display:block}.color-pick-info{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.color-picked{align-items:center;gap:.65rem;min-width:0;display:flex}.color-picked-swatch{border:1px solid var(--border);background-color:#0000;background-image:linear-gradient(45deg, color-mix(in srgb, var(--border) 55%, transparent) 25%, transparent 25%), linear-gradient(-45deg, color-mix(in srgb, var(--border) 55%, transparent) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--border) 55%, transparent) 75%), linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--border) 55%, transparent) 75%);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border-radius:9px;flex-shrink:0;width:2.4rem;height:2.4rem}.color-picked-label{color:var(--muted);font-size:.78rem;display:block}.color-picked code{font-variant-numeric:tabular-nums;background:0 0;padding:0;font-size:.92rem;font-weight:700;display:block}.color-pick-actions{flex-wrap:wrap;gap:.5rem;display:flex}.color-pick-actions .btn{padding:.35rem .8rem;font-size:.85rem}.color-palette-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.75rem;display:flex}.color-scheme-control{min-width:10rem}.color-palette{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.55rem;display:grid}.color-swatch{border:1px solid var(--border);min-height:5.2rem;font:inherit;cursor:pointer;text-align:left;border-radius:10px;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:.5rem .6rem;transition:transform .12s,box-shadow .12s;display:flex}.color-swatch:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000029}.color-swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.color-swatch-hex{font-variant-numeric:tabular-nums;font-size:.78rem;font-weight:700}.color-status{z-index:60;border:1px solid var(--border);background:var(--surface);max-width:calc(100vw - 2rem);min-height:0;box-shadow:var(--shadow);text-align:center;pointer-events:none;border-radius:12px;padding:.55rem 1.05rem;font-size:.88rem;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%)}.color-status:empty{display:none}.color-status.it-status--error{border-color:color-mix(in srgb, var(--danger-text,#9b1c1c) 40%, var(--border))}@media (width<=640px){.color-convert{grid-template-columns:1fr}.color-preview{min-height:96px}.color-sv{height:130px}.color-value-row{grid-template-columns:3.4rem minmax(0,1fr) auto;gap:.5rem}}