.cr-cvd{max-width:1440px;margin:0 auto;padding:44px 28px 84px;color:var(--cr-ink)}
.cr-cvd-kicker{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--cr-ink-muted)}
.cr-cvd-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:28px}
.cr-cvd-intro h1{margin:8px 0 12px;max-width:920px;font-size:clamp(2.8rem,6vw,5.6rem);line-height:.94;letter-spacing:-.065em}
.cr-cvd-intro p{margin:0;max-width:850px;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.65;color:var(--cr-ink-muted)}
.cr-cvd-intro__note{padding:18px 20px;border-left:3px solid var(--cr-border-strong);background:var(--cr-surface);border-radius:0 16px 16px 0;font-size:.9rem!important;line-height:1.6!important}
.cr-cvd-controls,.cr-cvd-panel,.cr-cvd-content article{border:1px solid var(--cr-border);background:var(--cr-surface);border-radius:22px;box-shadow:var(--cr-shadow-1)}
.cr-cvd-controls{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr);gap:24px;align-items:center;padding:22px;margin-bottom:14px}
.cr-cvd-control-copy h2,.cr-cvd-panel-head h2,.cr-cvd-content h2{margin:5px 0 8px;letter-spacing:-.03em}.cr-cvd-control-copy h2{font-size:1.55rem}.cr-cvd-control-copy p,.cr-cvd-panel-head p{margin:0;color:var(--cr-ink-muted);line-height:1.55;font-size:.9rem}
.cr-cvd-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cr-cvd-type{display:flex;flex-direction:column;gap:4px;min-height:76px;padding:14px 15px;border:1px solid var(--cr-border);border-radius:14px;background:var(--cr-canvas);color:var(--cr-ink);text-align:left;cursor:pointer;transition:border-color var(--cr-motion-fast),transform var(--cr-motion-fast),background var(--cr-motion-fast)}
.cr-cvd-type strong{font-size:.9rem}.cr-cvd-type span{font-size:.72rem;line-height:1.4;color:var(--cr-ink-muted)}.cr-cvd-type:hover{border-color:var(--cr-border-strong);transform:translateY(-1px)}.cr-cvd-type.is-active{border-color:var(--cr-ink);background:var(--cr-surface)}
.cr-cvd-type:focus-visible,.cr-cvd-tab:focus-visible,.cr-cvd-native-color:focus-visible,.cr-cvd-palette-picker:focus-visible,.cr-cvd-dropzone:focus-visible,.cr-cvd-palette-swatch:focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px}
.cr-cvd-mode-tabs{display:flex;gap:6px;width:max-content;max-width:100%;padding:5px;margin:0 auto 14px;border:1px solid var(--cr-border);border-radius:14px;background:var(--cr-surface);overflow:auto}
.cr-cvd-tab{min-height:42px;padding:9px 16px;border:0;border-radius:10px;background:transparent;color:var(--cr-ink-muted);font-weight:800;white-space:nowrap;cursor:pointer}.cr-cvd-tab.is-active{background:var(--cr-ink);color:var(--cr-canvas)}
.cr-cvd-panel{padding:clamp(18px,3vw,28px);min-height:320px}.cr-cvd-panel[hidden]{display:none!important}
.cr-cvd-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:20px}.cr-cvd-panel-head h2{font-size:clamp(1.6rem,3vw,2.25rem)}.cr-cvd-panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.cr-cvd-color-editor{display:grid;grid-template-columns:82px minmax(0,420px);gap:14px;align-items:start;margin-bottom:20px}.cr-cvd-native-color{appearance:none;width:82px;height:82px;padding:0;border:1px solid var(--cr-border-strong);border-radius:18px;background:transparent;cursor:pointer;overflow:hidden}.cr-cvd-native-color::-webkit-color-swatch-wrapper,.cr-cvd-palette-picker::-webkit-color-swatch-wrapper{padding:0}.cr-cvd-native-color::-webkit-color-swatch,.cr-cvd-palette-picker::-webkit-color-swatch{border:0}.cr-cvd-native-color::-webkit-color-swatch{border-radius:17px}.cr-cvd-native-color::-moz-color-swatch{border:0;border-radius:17px}
.cr-cvd-field-stack{display:flex;flex-direction:column;gap:6px}.cr-cvd-field-stack label{font-size:.82rem;font-weight:800}.cr-cvd-field-stack .cr-field{font:700 .95rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase}.cr-cvd-error,.cr-cvd-image-error{min-height:18px;margin:0;font-size:.78rem;line-height:1.45;color:var(--cr-danger)}
.cr-cvd-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cr-cvd-compare-card{display:flex;flex-direction:column;gap:9px;min-width:0;padding:12px;border:1px solid var(--cr-border);border-radius:18px;background:var(--cr-canvas)}.cr-cvd-card-label{font-size:.73rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--cr-ink-muted)}.cr-cvd-color-surface{min-height:290px;border:1px solid color-mix(in srgb,var(--cr-ink) 12%,transparent);border-radius:14px}.cr-cvd-compare-card strong{font:800 .9rem/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cr-cvd-palette-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}.cr-cvd-palette-edit{display:grid;grid-template-columns:48px minmax(0,1fr) 42px;gap:8px;align-items:center}.cr-cvd-palette-picker{appearance:none;width:48px;height:44px;padding:0;border:1px solid var(--cr-border);border-radius:10px;background:transparent;overflow:hidden;cursor:pointer}.cr-cvd-palette-picker::-webkit-color-swatch{border-radius:9px}.cr-cvd-palette-picker::-moz-color-swatch{border:0;border-radius:9px}.cr-cvd-palette-hex{min-width:0;text-transform:uppercase;font:700 .84rem/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.cr-cvd-remove{font-size:1.35rem;line-height:1}.cr-cvd-remove:disabled{opacity:.35;cursor:not-allowed}
.cr-cvd-bulk-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin:18px 0 22px}.cr-cvd-bulk-row .cr-btn{min-height:44px;margin-bottom:24px}
.cr-cvd-palette-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.cr-cvd-palette-results>div{display:flex;flex-direction:column;gap:8px;min-width:0}.cr-cvd-palette-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(90px,1fr);min-height:260px;border:1px solid var(--cr-border);border-radius:16px;overflow:auto;background:var(--cr-canvas)}.cr-cvd-palette-swatch{display:flex;flex-direction:column;justify-content:space-between;gap:16px;min-width:90px;padding:12px;background:var(--cvd-swatch);color:#111;text-shadow:0 1px 1px rgba(255,255,255,.35)}.cr-cvd-palette-swatch span{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:rgba(255,255,255,.72);font-size:.7rem;font-weight:900}.cr-cvd-palette-swatch strong{padding:5px 6px;border-radius:7px;background:rgba(255,255,255,.78);font:800 .68rem/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;width:max-content;max-width:100%}.cr-cvd-palette-note{margin:12px 0 0;color:var(--cr-ink-muted);font-size:.8rem}
.cr-cvd-dropzone{display:flex;min-height:210px;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:24px;border:1.5px dashed var(--cr-border-strong);border-radius:18px;background:var(--cr-canvas);text-align:center;cursor:pointer;transition:border-color var(--cr-motion-fast),background var(--cr-motion-fast),transform var(--cr-motion-fast)}.cr-cvd-dropzone:hover,.cr-cvd-dropzone.is-dragging{border-color:var(--cr-ink);background:var(--cr-surface);transform:translateY(-1px)}.cr-cvd-dropzone strong{font-size:1rem}.cr-cvd-dropzone span{color:var(--cr-ink-muted);font-size:.88rem}.cr-cvd-dropzone small{max-width:620px;color:var(--cr-ink-muted);font-size:.74rem;line-height:1.5}.cr-cvd-upload-icon{width:34px;height:34px;margin-bottom:4px}.cr-cvd-image-error{margin-top:10px}.cr-cvd-privacy{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:var(--cr-canvas);color:var(--cr-ink-muted);font-size:.78rem;line-height:1.55}.cr-cvd-privacy a{color:var(--cr-ink);font-weight:700}.cr-cvd-image-meta{margin:14px 0 8px;color:var(--cr-ink-muted);font-size:.78rem}.cr-cvd-image-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}.cr-cvd-image-compare figure{margin:0;min-width:0;padding:10px;border:1px solid var(--cr-border);border-radius:16px;background:var(--cr-canvas)}.cr-cvd-image-compare figcaption{margin:0 0 8px;font-size:.78rem;font-weight:900;color:var(--cr-ink-muted)}.cr-cvd-image-compare canvas{display:block;width:100%;height:auto;max-height:650px;object-fit:contain;border-radius:10px;background-image:linear-gradient(45deg,var(--cr-border) 25%,transparent 25%),linear-gradient(-45deg,var(--cr-border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--cr-border) 75%),linear-gradient(-45deg,transparent 75%,var(--cr-border) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}
.cr-cvd-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}.cr-cvd-content article{padding:clamp(22px,3vw,34px);box-shadow:none}.cr-cvd-content h2{font-size:clamp(1.35rem,2.2vw,1.85rem)}.cr-cvd-content p,.cr-cvd-content li{font-size:.96rem;line-height:1.72;color:var(--cr-ink-muted)}.cr-cvd-content p{margin:0 0 12px}.cr-cvd-content p:last-child{margin-bottom:0}.cr-cvd-content ul{margin:0;padding-left:20px}.cr-cvd-content li+li{margin-top:8px}.cr-cvd-related-card{grid-column:1/-1}.cr-cvd-related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.cr-cvd-related a{display:flex;flex-direction:column;gap:5px;padding:16px;border:1px solid var(--cr-border);border-radius:14px;background:var(--cr-canvas);color:var(--cr-ink);text-decoration:none;transition:border-color var(--cr-motion-fast),transform var(--cr-motion-fast)}.cr-cvd-related a:hover{border-color:var(--cr-border-strong);transform:translateY(-1px)}.cr-cvd-related a:focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px}.cr-cvd-related span{font-size:.8rem;line-height:1.5;color:var(--cr-ink-muted)}
@media(max-width:1050px){.cr-cvd-intro{grid-template-columns:1fr}.cr-cvd-controls{grid-template-columns:1fr}.cr-cvd-palette-strip{min-height:220px}.cr-cvd-related{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cr-cvd{padding:28px 16px 64px}.cr-cvd-intro h1{font-size:clamp(2.4rem,12vw,4rem)}.cr-cvd-type-grid{grid-template-columns:1fr}.cr-cvd-mode-tabs{width:100%;justify-content:stretch}.cr-cvd-tab{flex:1}.cr-cvd-panel-head{flex-direction:column}.cr-cvd-color-editor{grid-template-columns:68px minmax(0,1fr)}.cr-cvd-native-color{width:68px;height:68px;border-radius:15px}.cr-cvd-compare-grid,.cr-cvd-palette-results,.cr-cvd-image-compare,.cr-cvd-content{grid-template-columns:1fr}.cr-cvd-color-surface{min-height:210px}.cr-cvd-palette-editor{grid-template-columns:1fr}.cr-cvd-bulk-row{grid-template-columns:1fr}.cr-cvd-bulk-row .cr-btn{margin-bottom:0;justify-self:start}.cr-cvd-related-card{grid-column:auto}.cr-cvd-related{grid-template-columns:1fr}}
@media(max-width:480px){.cr-cvd{padding-left:12px;padding-right:12px}.cr-cvd-controls,.cr-cvd-panel{padding:16px;border-radius:18px}.cr-cvd-mode-tabs{overflow-x:auto}.cr-cvd-tab{padding:9px 12px}.cr-cvd-palette-edit{grid-template-columns:44px minmax(0,1fr) 40px}.cr-cvd-palette-picker{width:44px}.cr-cvd-palette-strip{grid-auto-columns:minmax(82px,1fr);min-height:190px}.cr-cvd-dropzone{min-height:180px;padding:18px}}
@media(prefers-reduced-motion:reduce){.cr-cvd *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}