.color-panel{border:0;width:100%;min-width:0;margin:1rem 0;padding:0}.color-panel legend{margin-bottom:.65rem;font-weight:650}.color-presets{scroll-snap-type:x proximity;gap:.6rem;max-width:100%;padding:4px 3px 12px;display:flex;overflow-x:auto}.color-preset{background:var(--surface-soft);scroll-snap-align:start;color:var(--ink);cursor:pointer;border:2px solid #0000;border-radius:12px;flex:0 0 112px;padding:3px}.color-preset[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft)}.color-preset img,.color-thumb-placeholder{object-fit:cover;background:var(--line);border-radius:8px;width:102px;height:72px;display:block}.color-preset>span:last-child{white-space:nowrap;padding:6px 2px;font-size:.8rem;display:block}.color-auto{flex-wrap:wrap;align-items:center;gap:.6rem;margin:.9rem 0 .2rem;display:flex}.color-auto-button{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-dark);cursor:pointer;border-radius:10px;padding:.55rem 1rem;font-size:.85rem;font-weight:600}.color-auto-button:disabled{opacity:.55;cursor:default}.color-auto-more{border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;border-radius:10px;padding:.55rem .9rem;font-size:.8rem}.color-auto-more:disabled{opacity:.55;cursor:default}.color-auto-note{color:var(--muted);flex:200px;font-size:.8rem;line-height:1.4}.color-range{margin:.8rem 0;display:block}.color-range>span{justify-content:space-between;gap:1rem;font-size:.9rem;display:flex}.color-range input{width:100%;accent-color:var(--accent);min-height:32px}.color-panel details{border:1px solid var(--line);background:var(--surface);border-radius:10px;margin-top:1rem}.color-panel details[open]{padding-bottom:.4rem}.color-panel summary{cursor:pointer;min-height:46px;color:var(--ink);border-radius:10px;justify-content:space-between;align-items:center;gap:.6rem;padding:0 .9rem;font-size:.9rem;font-weight:650;list-style:none;display:flex}.color-panel summary::-webkit-details-marker{display:none}.color-panel summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);flex:none;width:9px;height:9px;margin-inline-end:3px;transition:transform .15s;transform:rotate(45deg)translate(-2px,-2px)}.color-panel details[open] summary:after{transform:rotate(225deg)translate(-2px,-2px)}.color-panel details>:not(summary){margin-inline:.9rem}@media (prefers-reduced-motion:reduce){.color-panel summary:after{transition:none}}.color-import{overflow-wrap:anywhere;gap:.6rem;margin:1rem 0;display:grid}.color-import input{max-width:100%;font-size:.85rem}.color-hint{color:var(--muted);font-size:.8rem;line-height:1.5}.color-compare{flex-wrap:wrap;align-items:center;gap:.5rem;margin:.7rem 0;display:flex}.color-compare button,.color-panel details button{border:1px solid var(--line);background:var(--surface);color:var(--ink);touch-action:none;border-radius:10px;padding:.55rem .7rem;font-size:.8rem}.color-compare button[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.color-compare label{flex:180px;align-items:center;gap:.6rem;font-size:.8rem;display:flex}.color-compare input{width:100%;min-width:60px;accent-color:var(--accent)}.color-preview{z-index:6;background:var(--surface,#fff);align-self:start;max-width:100%;line-height:0;position:sticky;top:8px}@media (width<=640px){.color-preview{top:6px}}.color-preview canvas{object-fit:contain;border-radius:12px;width:100%;max-height:58vh;display:block}.color-preview.is-ziehbar{cursor:ew-resize;touch-action:pan-y}.color-preview.is-ziehbar canvas{touch-action:none}.color-divider{background:var(--surface);pointer-events:none;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 3px #1c212d8c}.color-divider-griff{border:2px solid var(--surface);background:#1c212d73;border-radius:50%;width:34px;height:34px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 1px 6px #1c212d59}.color-divider-griff:before,.color-divider-griff:after{content:"";border-block:5px solid #0000;width:0;height:0;position:absolute;top:50%}.color-divider-griff:before{border-right:6px solid var(--surface);left:7px;transform:translateY(-50%)}.color-divider-griff:after{border-left:6px solid var(--surface);right:7px;transform:translateY(-50%)}@media (width<=640px){.color-divider-griff{width:40px;height:40px}}.color-panel :focus-visible,.color-compare :focus-visible{outline:3px solid var(--accent);outline-offset:3px}.color-panel:disabled{opacity:.6}@media (width<=560px){.color-compare label{flex:100%}}