.cp,.cp-main{gap:16px;display:grid}@media (min-width:900px){.cp-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:24px}}.cp-area{aspect-ratio:4/3;border-radius:var(--radius);touch-action:none;cursor:crosshair;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);position:relative}.cp-thumb{border:3px solid #fff;border-radius:50%;outline:1px solid #0000008c;width:22px;height:22px;margin:-11px 0 0 -11px;position:absolute}.cp-thumb:focus-visible{outline:3px solid var(--tape)}.cp-hue{appearance:none;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:11px;width:100%;height:22px;margin:14px 0 0;display:block}.cp-hue::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:3px solid #fff;border-radius:50%;outline:1px solid #0000008c;width:22px;height:22px}.cp-hue::-moz-range-thumb{background:0 0;border:3px solid #fff;border-radius:50%;outline:1px solid #0000008c;width:16px;height:16px}.cp-hue:focus-visible{outline:2px solid var(--tape);outline-offset:3px}.cp-picker-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.cp-swatch{border:1px solid var(--rule);border-radius:var(--radius);flex-direction:column;justify-content:flex-end;gap:2px;min-height:120px;padding:16px;display:flex}.cp-swatch strong{letter-spacing:-.01em;font-size:28px}.cp-swatch span{font-size:14px}.cp-formats{flex-direction:column;margin-top:8px;display:flex}.cp-format{border-bottom:1px solid var(--rule);padding:12px 0}.cp-format:last-child{border-bottom:0;padding-bottom:0}.cp-format .field-label{margin-bottom:6px;display:block}.cp-format-row{align-items:center;gap:8px;display:flex}.cp-format-row .input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px}.cp-format-row .btn{flex-shrink:0}.cp-format .field-error,.cp-format .hint{margin:6px 0 0}.cp-h{margin:0 0 12px;font-size:18px}.cp-best{margin:0 0 16px}.cp-contrast-pair{gap:24px;display:grid}@media (min-width:700px){.cp-contrast-pair{grid-template-columns:1fr 1fr}}.cp-contrast-samples{border:1px solid var(--rule);border-radius:var(--radius);grid-template-columns:1fr 1fr;display:grid;overflow:hidden}.cp-contrast-samples p{margin:0;padding:14px 12px;font-size:15px;font-weight:600;line-height:1.3}.cp-ratio{justify-content:space-between;align-items:baseline;margin:12px 0 4px;display:flex}.cp-ratio strong{font-variant-numeric:tabular-nums;font-size:24px}.cp-levels{margin:0;padding:0;font-size:14px;list-style:none}.cp-levels li{border-top:1px solid var(--rule);color:var(--ink-2);justify-content:space-between;gap:12px;padding:7px 0;display:flex}.cp-levels strong{color:var(--over)}.cp-levels li[data-ok] strong{color:var(--fit)}.cp-scale{border:1px solid var(--rule);border-radius:var(--radius);grid-template-columns:repeat(9,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;overflow:hidden}.cp-scale button{width:100%;min-height:64px;font:inherit;cursor:pointer;border:0;justify-content:center;align-items:flex-end;padding:6px 2px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;display:flex;overflow:hidden}.cp-scale button[aria-current]{box-shadow:inset 0 -4px 0 var(--tape)}.cp-scale button:focus-visible{outline:3px solid var(--tape);outline-offset:-3px}@media (max-width:640px){.cp-scale{grid-template-columns:repeat(3,minmax(0,1fr))}}.cp-image{flex-direction:column;gap:12px;display:flex}.cp-image .hint,.cp-image .field-error{margin:0}.cp-image-bar{flex-wrap:wrap;align-items:center;gap:8px 12px;display:flex}.cp-image-bar .segmented{width:min(100%,420px)}.cp-stage{border:1px solid var(--rule);border-radius:var(--radius);background:var(--checker);place-items:center;padding:8px;display:grid;position:relative}.cp-view{touch-action:none;cursor:crosshair;width:auto;max-width:100%;height:auto;max-height:70vh;display:block}.cp-view:focus-visible{outline:3px solid var(--tape);outline-offset:2px}.cp-zoom{border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--surface);pointer-events:none;flex-direction:column;padding:4px;display:flex;position:absolute;top:12px;right:12px}.cp-zoom[data-side=left]{left:12px;right:auto}.cp-zoom canvas{width:110px;height:110px;image-rendering:pixelated;border-radius:4px;display:block}.cp-zoom span{align-items:center;gap:6px;padding:4px 2px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;display:flex}.cp-zoom i,.cp-picked i{border:1px solid var(--rule-strong);border-radius:3px;width:14px;height:14px;display:inline-block}.cp-picked{border-top:1px solid var(--rule);margin-top:16px;padding-top:12px}.cp-picked ul{flex-wrap:wrap;gap:6px;margin:8px 0 12px;padding:0;list-style:none;display:flex}.cp-picked button{border:1px solid var(--rule-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;align-items:center;gap:6px;padding:5px 9px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;display:inline-flex}.cp-conv{gap:16px;display:grid}.cp-conv>*,.cp>*,.cp-main>*{min-width:0}@media (min-width:900px){.cp-conv{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;gap:24px}}.cp-conv-input{min-height:220px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}.cp-conv-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.cp-conv-table td{padding:6px 10px}.cp-conv-table code{font-size:13px}.cp-conv-err{color:var(--over);font-size:13px;white-space:normal!important}.cp-dot{vertical-align:middle;border:1px solid var(--rule-strong);border-radius:4px;width:20px;height:20px;display:inline-block}.cp-conv-replaced{border-top:1px solid var(--rule);margin-top:16px;padding-top:12px}.cp-conv-replaced summary{cursor:pointer;margin-bottom:8px;font-weight:600}.cp-conv-replaced .btn{margin-top:8px}