.cv{--cv-solid:#2f7bff;--cv-hue:#05f}.cv .checker{background-color:#fff;background-image:linear-gradient(45deg,#d6d9e4 25%,#0000 25% 75%,#d6d9e4 75%),linear-gradient(45deg,#d6d9e4 25%,#0000 25% 75%,#d6d9e4 75%);background-position:0 0,6px 6px;background-size:12px 12px}.cv-card{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);min-width:0;box-shadow:var(--edge);align-content:start;gap:12px;padding:16px;display:grid}.cv-top{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;display:grid}.cv-h{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.15rem;font-weight:650}.cv-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;display:flex}.cv-head .chip-btn,.cv-pick-btns .chip-btn,.cv-suggest .chip-btn,.cv-swap{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.cv-muted{color:var(--muted)}.cv-sub{margin:-6px 0 0;font-size:.9rem}.cv-sv{aspect-ratio:4/3;border-radius:var(--radius-sm);background-color:var(--cv-hue);touch-action:none;cursor:crosshair;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#fff0);position:relative;box-shadow:inset 0 0 0 1px #00000026}.cv-sv:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.cv-sv-thumb{background:var(--cv-solid);pointer-events:none;width:22px;height:22px;transition:transform var(--fast) var(--ease);border:3px solid #fff;border-radius:50%;margin:-11px 0 0 -11px;position:absolute;box-shadow:0 0 0 1px #00000059,0 4px 12px #00000059}.cv-sv.dragging .cv-sv-thumb{transform:scale(1.18)}.cv-range{grid-template-columns:4.6rem 1fr 3.2rem;align-items:center;gap:10px;font-size:.92rem;font-weight:600;display:grid}.cv-range output{font-family:var(--font-mono);color:var(--ink-2);text-align:right;font-size:.8rem}.cv-range input{-webkit-appearance:none;appearance:none;border-radius:var(--radius-pill);cursor:pointer;background:0 0;width:100%;height:18px;margin:0}.cv-range .cv-hue{background-image:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);box-shadow:inset 0 0 0 1px #00000026}.cv-range .cv-alpha{background-color:#fff;background-image:linear-gradient(to right, transparent, var(--cv-solid)), linear-gradient(45deg, #d6d9e4 25%, transparent 25%, transparent 75%, #d6d9e4 75%), linear-gradient(45deg, #d6d9e4 25%, transparent 25%, transparent 75%, #d6d9e4 75%);background-position:0 0,0 0,5px 5px;background-size:100% 100%,10px 10px,10px 10px;box-shadow:inset 0 0 0 1px #00000026}.cv-range input::-webkit-slider-runnable-track{background:0 0;height:18px}.cv-range input::-moz-range-track{background:0 0;height:18px}.cv-range input::-webkit-slider-thumb{-webkit-appearance:none;background:0 0;border:3px solid #fff;border-radius:50%;width:22px;height:22px;margin-top:-2px;box-shadow:0 0 0 1px #00000059,0 3px 8px #0000004d}.cv-range input::-moz-range-thumb{background:0 0;border:3px solid #fff;border-radius:50%;width:16px;height:16px;box-shadow:0 0 0 1px #00000059,0 3px 8px #0000004d}.cv-range input:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.cv-pick-row{align-items:center;gap:12px;display:flex}.cv-swatch{border-radius:var(--radius-sm);width:64px;height:64px;box-shadow:inset 0 0 0 1px var(--line-strong);flex:none;overflow:hidden}.cv-swatch>span,.cv-mini>span{width:100%;height:100%;display:block}.cv-pick-btns{flex-wrap:wrap;gap:8px;display:flex}.cv-native{position:relative}.cv-native input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.cv-native:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}.cv-hint{color:var(--ink-2);margin:0;font-size:.9rem}.cv-row{grid-template-columns:4.2rem minmax(0,1fr) auto;align-items:center;gap:8px;display:grid}.cv-row label{font-family:var(--font-mono);letter-spacing:.06em;color:var(--muted);font-size:.78rem}.cv-row input,.cv-bg-in input[type=text]{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);width:100%;min-width:0;height:44px;color:var(--ink);font-family:var(--font-mono);padding:0 12px;font-size:.95rem}.cv-row input:focus-visible,.cv-bg-in input[type=text]:focus-visible{border-color:var(--sky);outline:none;box-shadow:0 0 0 4px #7cc4ff2e}.cv input[aria-invalid=true]{border-color:var(--danger)}.cv-copy{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);width:44px;height:44px;color:var(--ink-2);cursor:pointer;place-items:center;display:grid}.cv-copy:hover{border-color:var(--sky);color:var(--ink)}.cv-err{color:var(--danger);margin:0;font-size:.9rem}.cv-err:empty{display:none}.cv-note{color:var(--muted);margin:0;font-size:.82rem}.cv-name{border-top:1px solid var(--line);align-items:center;gap:10px;margin:0;padding-top:10px;font-size:.95rem;display:flex}.cv-name>span:nth-child(2){flex:1;min-width:0}.cv-name .cv-copy{width:38px;height:38px}.cv-mini{width:28px;height:28px;box-shadow:inset 0 0 0 1px var(--line-strong);vertical-align:middle;border-radius:8px;flex:none;display:inline-block;overflow:hidden}@media (width<=860px){.cv-top{grid-template-columns:minmax(0,1fr)}}@media (width<=480px){.cv-row{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}.cv-row label{grid-column:1/-1}.cv-row input{padding:0 10px;font-size:.8rem}}.cv-scale{grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;display:grid}.cv-sw{border-radius:var(--radius-sm);background-color:#fff;background-image:linear-gradient(var(--sw), var(--sw)), linear-gradient(45deg, #d6d9e4 25%, transparent 25%, transparent 75%, #d6d9e4 75%), linear-gradient(45deg, #d6d9e4 25%, transparent 25%, transparent 75%, #d6d9e4 75%);min-width:0;transition:transform var(--fast) var(--spring);background-position:0 0,0 0,6px 6px;background-size:100% 100%,12px 12px,12px 12px;position:relative;box-shadow:inset 0 0 0 1px #0000001f}.cv-sw:hover{transform:translateY(-2px)}.cv-sw.is-base{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--sky)}.cv-sw-copy{border-radius:inherit;width:100%;min-height:84px;color:var(--sw-ink);text-align:left;cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:flex-end;gap:2px;padding:8px;display:flex}.cv-sw-hex{font-family:var(--font-mono);overflow-wrap:anywhere;font-size:.74rem;font-weight:500}.cv-sw-label{opacity:.8;font-size:.68rem;line-height:1.2}.cv-sw-use{color:#0b1030;cursor:pointer;opacity:0;width:28px;height:28px;transition:opacity var(--fast) var(--ease);background:#ffffffd9;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:6px;right:6px}.cv-sw:hover .cv-sw-use,.cv-sw-use:focus-visible{opacity:1}@media (hover:none){.cv-sw-use{opacity:1}}.cv-sw-copy:focus-visible,.cv-sw-use:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.cv-harm{gap:14px;display:grid}.cv-harm-row{grid-template-columns:minmax(0,16rem) minmax(0,1fr);align-items:center;gap:8px 16px;display:grid}.cv-harm-head{gap:2px;font-size:.88rem;display:grid}.cv-harm-head strong{font-size:.95rem}.cv-harm-sw{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.cv-harm-sw .cv-sw-copy{min-height:64px}.cv-pair{flex-wrap:wrap;align-items:flex-end;gap:12px 16px;display:flex}.cv-field{gap:6px;display:grid}.cv-label{font-size:.92rem;font-weight:650}.cv-fixed{height:44px;font-family:var(--font-mono);align-items:center;gap:10px;display:inline-flex}.cv-swap{min-height:44px}.cv-bg-in{align-items:center;gap:8px;display:flex}.cv-bg-in input[type=text]{width:11rem}.cv-bg-in input[type=color]{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;width:44px;height:44px;padding:3px}.cv-preview{border-radius:var(--radius-sm);background:var(--pv-bg,#fff);color:var(--pv-fg,#000);box-shadow:inset 0 0 0 1px var(--line-strong);justify-items:start;gap:8px;padding:20px;display:grid}.cv-preview p{margin:0}.cv-pv-big{font-size:24px;font-weight:600;line-height:1.2}.cv-pv-body{max-width:60ch;font-size:16px}.cv-pv-ui{border-radius:var(--radius-pill);border:2px solid var(--pv-fg,#000);padding:6px 14px;font-size:14px;font-weight:600}.cv-result{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 24px;display:grid}.cv-ratio{gap:2px;margin:0;display:grid}.cv-ratio [data-ratio]{font-family:var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);font-weight:700;line-height:1}.cv-ratio .cv-muted{font-size:.9rem}.cv-checks{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.cv-checks li{border-radius:var(--radius-sm);background:var(--danger-soft);align-items:center;gap:8px;padding:6px 10px;font-size:.88rem;display:flex}.cv-checks li.pass{background:var(--success-soft)}.cv-badge{border-radius:var(--radius-pill);min-width:3.2em;font-family:var(--font-mono);text-align:center;text-transform:uppercase;color:var(--danger);border:1px solid;padding:2px 6px;font-size:.7rem}.cv-checks li.pass .cv-badge{color:var(--success)}.cv-check-label{flex:1}.cv-need{font-family:var(--font-mono);color:var(--muted);font-size:.76rem}.cv-suggest{border-top:1px solid var(--line);gap:10px;padding-top:12px;display:grid}.cv-suggest .seg{justify-self:start}.cv-sug-line{margin:0;font-size:.95rem}.cv-sug-line:before{content:"";vertical-align:-3px;background:var(--sug,transparent);width:18px;height:18px;box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:5px;margin-right:8px;display:inline-block}.cv-sug-line:not(.has-sug):before{display:none}.cv-sug-btns{flex-wrap:wrap;gap:8px;display:flex}.cv-sug-btns[hidden]{display:none}.cv-use{min-height:38px;padding:0 18px;font-size:.92rem}@media (width<=860px){.cv-scale{grid-template-columns:repeat(6,minmax(0,1fr))}.cv-harm-row,.cv-result{grid-template-columns:minmax(0,1fr)}}@media (width<=480px){.cv-scale{grid-template-columns:repeat(4,minmax(0,1fr))}.cv-bg-in input[type=text],.cv-bg-in{width:100%}.cv-pair .cv-field:last-child{flex:1}}.cv-ip-actions{flex-wrap:wrap;gap:8px;display:flex}.cv-ip-actions .chip-btn{cursor:pointer;align-items:center;gap:6px;display:inline-flex}.cv-ip-open{position:relative}.cv-ip-open input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.cv-ip-open:focus-within{outline:3px solid var(--focus);outline-offset:2px}.cv-ip-drop{border:1.5px dashed var(--line-strong);border-radius:var(--radius-sm);background:var(--bg-soft);min-height:120px;transition:border-color var(--fast) var(--ease);place-items:center;display:grid}.cv-ip-drop.is-over{border-color:var(--sky)}.cv-ip-drop.has-img{border-style:solid;border-color:var(--line);padding:8px}.cv-ip-empty{color:var(--muted);text-align:center;align-items:center;gap:8px;margin:0;padding:20px;display:inline-flex}.cv-ip-empty[hidden],.cv-ip-stage[hidden],.cv-ip-bar[hidden],.cv-ip-recent[hidden]{display:none}.cv-ip-stage{place-items:center;width:100%;display:grid;position:relative}.cv-ip-canvas{cursor:crosshair;touch-action:none;border-radius:8px;width:auto;max-width:100%;height:auto;max-height:460px;display:block}.cv-ip-canvas:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.cv-ip-loupe{pointer-events:none;width:132px;height:132px;image-rendering:pixelated;border:3px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #0006,0 10px 30px #00000073}.cv-ip-loupe[hidden]{display:none}.cv-ip-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;display:flex}.cv-ip-live{font-family:var(--font-mono);align-items:center;gap:8px;display:inline-flex}.cv-ip-size{align-items:center;gap:8px;font-size:.92rem;display:inline-flex}.cv-ip-recent{flex-wrap:wrap;align-items:center;gap:10px;font-size:.88rem;display:flex}.cv-ip-chips{flex-wrap:wrap;gap:6px;display:flex}.cv-ip-chip{border:2px solid var(--line-strong);background:var(--sw,#888);cursor:pointer;border-radius:50%;width:34px;height:34px}.cv-ip-chip:hover,.cv-ip-chip:focus-visible{border-color:var(--sky)}@media (width<=640px){.cv-ip-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.cv-ip-actions .chip-btn{white-space:nowrap;justify-content:center;min-height:44px;padding:0 8px}.cv-ip-actions:has(>[hidden]){grid-template-columns:minmax(0,1fr)}.cv-ip-chip{width:44px;height:44px}.cv-ip-size select{min-height:44px}.cv-ip-canvas{max-height:360px}}.cv-exp{flex-wrap:wrap;align-items:end;gap:10px 14px;display:flex}.cv-exp-f{gap:4px;font-size:.88rem;display:grid}.cv-exp-f input{width:14ch}.cv-exp-btns{gap:8px;display:flex}.cv-exp-btns .chip-btn{align-items:center;gap:6px;display:inline-flex}.cv-exp-code{border-radius:var(--radius-sm);background:var(--bg-soft);border:1px solid var(--line);max-height:260px;font-family:var(--font-mono);color:var(--ink-2);white-space:pre;margin:0;padding:12px 14px;font-size:.82rem;line-height:1.5;overflow:auto}@media (width<=640px){.cv-exp{grid-template-columns:minmax(0,1fr);display:grid}.cv-exp-f input,.cv-exp-f select{width:100%;min-height:44px}.cv-exp-btns{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.cv-exp-btns .chip-btn{justify-content:center;min-height:44px}}.cv-sel select,.cv-sel input{min-height:40px}