.cr-mix{max-width:1240px;margin:0 auto;padding:clamp(28px,5vw,72px) 24px 80px;color:var(--cr-ink)}
.cr-mix *{box-sizing:border-box}
.cr-mix-intro{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:28px;align-items:end;margin-bottom:28px}
.cr-mix-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cr-muted)}
.cr-mix h1{margin:8px 0 12px;font-size:clamp(2.4rem,6vw,5.4rem);line-height:.96;letter-spacing:-.055em}
.cr-mix-intro p{max-width:760px;margin:0;color:var(--cr-muted);font-size:clamp(1rem,1.8vw,1.16rem);line-height:1.65}
.cr-mix-intro-note{padding:18px 20px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-lg);background:var(--cr-surface);box-shadow:var(--cr-shadow-xs)}
.cr-mix-intro-note strong,.cr-mix-intro-note span{display:block}.cr-mix-intro-note span{margin-top:6px;color:var(--cr-muted);font-size:.92rem;line-height:1.5}
.cr-mix-workspace{display:grid;grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);gap:22px;align-items:start}
.cr-mix-controls,.cr-mix-results,.cr-mix-compare,.cr-mix-content article{border:1px solid var(--cr-border);background:var(--cr-surface);border-radius:var(--cr-radius-xl);box-shadow:var(--cr-shadow-xs)}
.cr-mix-controls{padding:22px;position:sticky;top:94px}
.cr-mix-panel-head,.cr-mix-results-head,.cr-mix-percentage-head,.cr-mix-result-meta,.cr-mix-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cr-mix-panel-head h2,.cr-mix-results-head h2,.cr-mix-content h2{margin:5px 0 0;letter-spacing:-.025em}
.cr-mix-color-pair{display:grid;gap:14px;margin-top:20px}
.cr-mix-color-card{display:grid;grid-template-columns:58px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-lg);background:var(--cr-canvas)}
.cr-mix-native-color{width:58px;height:58px;border:0;padding:0;background:transparent;cursor:pointer;border-radius:14px;overflow:hidden}
.cr-mix-native-color::-webkit-color-swatch-wrapper{padding:0}.cr-mix-native-color::-webkit-color-swatch{border:1px solid var(--cr-border);border-radius:14px}.cr-mix-native-color::-moz-color-swatch{border:1px solid var(--cr-border);border-radius:14px}
.cr-mix-field-wrap label{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px;font-size:.88rem}.cr-mix-field-wrap label span{color:var(--cr-muted);font-size:.78rem}
.cr-mix-field-wrap .cr-field{width:100%;font:inherit;font-weight:750;letter-spacing:.03em}
.cr-mix-error{min-height:18px;margin:5px 0 0;color:var(--cr-danger);font-size:.78rem}
.cr-mix-swap{width:100%;margin-top:12px}
.cr-mix-method{margin-top:18px;padding-top:18px;border-top:1px solid var(--cr-border)}
.cr-mix-method-label{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:10px}.cr-mix-method-label span{color:var(--cr-muted);font-size:.78rem}
.cr-mix-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cr-mix-mode{min-height:44px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-md);background:var(--cr-canvas);color:var(--cr-ink);font:inherit;font-weight:800;cursor:pointer;transition:border-color var(--cr-motion-fast) var(--cr-ease-standard),transform var(--cr-motion-fast) var(--cr-ease-standard),background var(--cr-motion-fast) var(--cr-ease-standard)}
.cr-mix-mode:hover{transform:translateY(-1px);border-color:var(--cr-border-strong)}.cr-mix-mode[aria-pressed="true"]{border-color:var(--cr-ink);background:var(--cr-ink);color:var(--cr-canvas)}
.cr-mix-mode:focus-visible,.cr-mix-path-swatch:focus-visible,.cr-mix-compare-card:focus-visible,.cr-mix-native-color:focus-visible{outline:3px solid var(--cr-focus);outline-offset:3px}
.cr-mix-method-description{margin:10px 0 0;color:var(--cr-muted);font-size:.87rem;line-height:1.5}
.cr-mix-percentage{margin-top:18px;padding-top:18px;border-top:1px solid var(--cr-border)}
.cr-mix-percentage-head label{display:grid;gap:4px}.cr-mix-percentage-head label span{color:var(--cr-muted);font-size:.78rem}
.cr-mix-number{display:flex;align-items:center;gap:5px;padding:5px 9px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-md);background:var(--cr-canvas)}.cr-mix-number input{width:54px;border:0;background:transparent;color:var(--cr-ink);font:inherit;font-weight:800;text-align:right;outline:none}.cr-mix-number span{color:var(--cr-muted);font-size:.82rem}
.cr-mix-range{width:100%;margin:14px 0 7px;accent-color:var(--cr-ink)}
.cr-mix-weight-row{display:flex;justify-content:space-between;color:var(--cr-muted);font-size:.78rem;font-weight:700}
.cr-mix-results{padding:22px;overflow:hidden}
.cr-mix-results-head{align-items:flex-start}.cr-mix-results-head p{margin:5px 0 0;color:var(--cr-muted);font-size:.9rem}.cr-mix-actions{justify-content:flex-end;flex-wrap:wrap}
.cr-mix-result-preview{--mix-result:#926D8B;--mix-result-ink:#fff;min-height:300px;margin-top:18px;padding:clamp(22px,4vw,38px);display:flex;flex-direction:column;justify-content:space-between;border-radius:calc(var(--cr-radius-xl) - 5px);background:var(--mix-result);color:var(--mix-result-ink);transition:background var(--cr-motion-medium) var(--cr-ease-standard),color var(--cr-motion-medium) var(--cr-ease-standard)}
.cr-mix-result-meta span,.cr-mix-result-detail span{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.78}
.cr-mix-result-main strong{display:block;font-size:clamp(2.3rem,7vw,5.7rem);line-height:.95;letter-spacing:-.055em}.cr-mix-result-main p{margin:10px 0 0;font-size:1rem;font-weight:700}
.cr-mix-result-detail{display:grid;gap:5px;max-width:100%;margin-top:24px}.cr-mix-result-detail code{font:700 .84rem/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.cr-mix-gamut-note{margin:12px 0 0;padding:12px 14px;border:1px solid var(--cr-warning);border-radius:var(--cr-radius-md);background:color-mix(in srgb,var(--cr-warning) 9%,var(--cr-surface));font-size:.84rem;line-height:1.5}
.cr-mix-path{margin-top:22px}.cr-mix-path-head{display:flex;justify-content:space-between;gap:15px;align-items:end;margin-bottom:10px}.cr-mix-path-head p{margin:0;color:var(--cr-muted);font-size:.83rem}.cr-mix-path-grid{display:grid;grid-template-columns:repeat(5,1fr);min-height:132px;border:1px solid var(--cr-border);border-radius:var(--cr-radius-lg);overflow:hidden}
.cr-mix-path-swatch{--mix-path-color:#fff;--mix-path-ink:#111;border:0;border-right:1px solid color-mix(in srgb,currentColor 15%,transparent);background:var(--mix-path-color);color:var(--mix-path-ink);padding:13px 10px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:3px;cursor:pointer;text-align:left;min-width:0}.cr-mix-path-swatch:last-child{border-right:0}.cr-mix-path-swatch span{font-size:.68rem;font-weight:800;opacity:.72}.cr-mix-path-swatch strong{font-size:.78rem;letter-spacing:.02em;white-space:nowrap}
.cr-mix-compare{margin-top:22px;padding:22px}.cr-mix-compare-head h2{margin:5px 0 8px}.cr-mix-compare-head p{margin:0;color:var(--cr-muted);line-height:1.55}.cr-mix-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.cr-mix-compare-card{--mix-compare:#fff;--mix-compare-ink:#111;min-height:150px;border:0;border-radius:var(--cr-radius-lg);padding:16px;background:var(--mix-compare);color:var(--mix-compare-ink);text-align:left;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}.cr-mix-compare-card span{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.76}.cr-mix-compare-card strong{font-size:1.25rem}.cr-mix-compare-card small{opacity:.76}
.cr-mix-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:24px}.cr-mix-content article{padding:24px}.cr-mix-content p{margin:10px 0 0;color:var(--cr-muted);line-height:1.67}.cr-mix-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}.cr-mix-related{display:grid;gap:8px;margin-top:14px}.cr-mix-related a{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid var(--cr-border);color:var(--cr-ink);text-decoration:none}.cr-mix-related a span{max-width:60%;text-align:right;color:var(--cr-muted);font-size:.83rem;line-height:1.4}.cr-mix-related a:hover strong{text-decoration:underline}
body.dark .cr-mix-mode[aria-pressed="true"]{background:var(--cr-ink);color:var(--cr-canvas)}
@media(max-width:960px){.cr-mix-intro{grid-template-columns:1fr}.cr-mix-workspace{grid-template-columns:1fr}.cr-mix-controls{position:static}.cr-mix-result-preview{min-height:260px}}
@media(max-width:700px){.cr-mix{padding-inline:16px}.cr-mix-panel-head,.cr-mix-results-head{align-items:flex-start}.cr-mix-results-head{flex-direction:column}.cr-mix-actions{width:100%;justify-content:flex-start}.cr-mix-content{grid-template-columns:1fr}.cr-mix-path-grid{grid-template-columns:1fr;min-height:0}.cr-mix-path-swatch{min-height:74px;border-right:0;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent)}.cr-mix-path-swatch:last-child{border-bottom:0}.cr-mix-compare-grid{grid-template-columns:1fr}}
@media(max-width:520px){.cr-mix-color-card{grid-template-columns:50px minmax(0,1fr)}.cr-mix-native-color{width:50px;height:50px}.cr-mix-mode-grid{grid-template-columns:1fr}.cr-mix-percentage-head{align-items:flex-end}.cr-mix-result-preview{min-height:235px}.cr-mix-result-meta{align-items:flex-start;flex-direction:column}.cr-mix-actions .cr-btn{flex:1 1 auto}.cr-mix-related a{display:block}.cr-mix-related a span{display:block;max-width:none;text-align:left;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.cr-mix-mode,.cr-mix-result-preview{transition:none!important}.cr-mix-mode:hover{transform:none}}