.color-mixer{color:#1a1a1a;background:#f4f1ea;min-height:100vh;font-family:system-ui,sans-serif;display:flex}.content{width:100%;max-width:1400px;margin:0 auto;padding:1.5rem 2.5rem 3rem}.topbar{justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;display:flex}.brand h1{color:#1a1a1a;margin:0;font-size:2rem;font-weight:700}.tagline{color:#777;margin:0;font-size:.9rem}.corner-tagline{letter-spacing:.15em;color:#999;text-align:right;font-size:.65rem;line-height:1.6}.panels{grid-template-columns:1fr 1fr;align-items:stretch;gap:1.5rem;display:grid}.card{background:#fff;border-radius:20px;padding:1.75rem;box-shadow:0 2px 12px #0000000d}.step-header{align-items:baseline;gap:.75rem;margin-bottom:1rem;display:flex}.step-header-spaced{margin-top:1.75rem}.step-number{color:#aaa;font-size:.85rem;font-weight:600}.step-header h2{margin:0;font-size:1.1rem;font-weight:700}.step-total{color:#777;margin-left:auto;font-size:.85rem}.chip-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.chip{cursor:pointer;background:#f7f5f0;border:2px solid #0000;border-radius:12px;flex-direction:column;align-items:center;gap:.4rem;padding:.75rem .5rem;font-family:inherit;display:flex}.chip-active{background:#fff;border-color:#1a1a1a}.chip-swatch{border-radius:10px;width:40px;height:40px}.chip-name{text-align:center;font-size:.8rem;font-weight:600}.chip-temp{color:#999;text-transform:capitalize;font-size:.7rem}.empty-hint{color:#999;margin:.5rem 0;font-size:.9rem}.mix-row{grid-template-columns:20px 130px 1fr 50px 14px 24px;align-items:center;gap:.6rem;margin:.6rem 0;display:grid}.mix-dot{border-radius:50%;width:20px;height:20px}.mix-dot-outline{box-shadow:inset 0 0 0 1px #ddd}.mix-name{font-size:.9rem;font-weight:600}.mix-slider{appearance:none;background:0 0;width:100%;height:20px;margin:0}.mix-slider::-webkit-slider-runnable-track{background:#ddd;border-radius:2px;height:4px}.mix-slider::-webkit-slider-thumb{appearance:none;background:var(--slider-color,#1a1a1a);border:2px solid #fff;border-radius:50%;width:18px;height:18px;margin-top:-7px;box-shadow:0 1px 3px #0000004d}.mix-slider::-moz-range-track{background:#ddd;border-radius:2px;height:4px}.mix-slider::-moz-range-thumb{background:var(--slider-color,#1a1a1a);border:2px solid #fff;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 3px #0000004d}.mix-number{text-align:right;border:1px solid #ddd;border-radius:6px;width:50px;padding:.25rem .4rem;font-size:.85rem}.mix-percent{color:#777;font-size:.85rem}.mix-remove{color:#999;cursor:pointer;background:0 0;border:none;font-size:1.1rem;line-height:1}.add-pigment{color:#444;cursor:pointer;background:#f2f0eb;border:none;border-radius:10px;width:100%;margin-top:.75rem;padding:.6rem;font-size:.9rem}.add-pigment:disabled{opacity:.5;cursor:default}.action-row{gap:.75rem;margin-top:1.5rem;display:flex}.btn-secondary,.btn-primary{cursor:pointer;border:none;border-radius:10px;flex:1;padding:.7rem 1rem;font-size:.9rem}.btn-secondary{color:#333;background:#f2f0eb}.btn-primary{color:#fff;background:#1a1a1a}.result-card{text-align:left;flex-direction:column;height:100%;display:flex}.result-label{color:#888;margin:0;font-size:.9rem}.result-name{margin:.1rem 0 .25rem;font-size:2rem;font-weight:700}.result-description{color:#666;margin:0 0 1.25rem}.result-swatch{border-radius:20px;flex:1;width:100%;min-height:160px;margin-bottom:1.25rem;box-shadow:0 8px 24px #00000026}.value-card{background:#faf9f6;border-radius:16px;flex-shrink:0;padding:1.25rem}.format-tabs{align-items:center;gap:.4rem;margin-bottom:.75rem;display:flex}.format-tab{color:#888;cursor:pointer;background:0 0;border:none;border-radius:999px;padding:.3rem .7rem;font-size:.75rem}.format-tab-active{color:#fff;background:#1a1a1a}.copy-btn{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;margin-left:auto;padding:.3rem .6rem}.value-display{margin:0 0 1rem;font-size:1.5rem;font-weight:700}.stat-row{gap:1.5rem;margin-bottom:1rem;display:flex}.stat{flex-direction:column;display:flex}.stat-label{color:#888;font-size:.75rem}.stat-value{font-size:1.1rem;font-weight:700}.why-box{border-top:1px solid #e8e5de;padding-top:.9rem}.why-title{margin:0 0 .35rem;font-size:.9rem;font-weight:700}.why-text{color:#555;margin:0;font-size:.85rem;line-height:1.5}.saved-mixes{margin-top:1.5rem}.saved-mixes h3{margin:0 0 .75rem;font-size:1rem}.saved-grid{flex-wrap:wrap;gap:.75rem;display:flex}.saved-item{flex-direction:column;align-items:center;gap:.3rem;display:flex;position:relative}.saved-swatch{cursor:pointer;border:none;border-radius:12px;width:56px;height:56px;box-shadow:0 2px 6px #00000026}.saved-name{color:#666;text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:60px;font-size:.7rem;overflow:hidden}.saved-delete{color:#fff;cursor:pointer;background:#1a1a1a;border:none;border-radius:50%;width:18px;height:18px;font-size:.7rem;line-height:1;position:absolute;top:-6px;right:-6px}@media (width<=900px){.panels{grid-template-columns:1fr}.topbar{flex-direction:column;gap:1rem}.corner-tagline{align-self:flex-end}}@media (width<=520px){.content{padding:1.25rem 1rem 2rem}.card{padding:1.25rem}.chip-grid{grid-template-columns:repeat(2,1fr)}.mix-row{grid-template-columns:20px minmax(0,1fr) 44px 20px;grid-template-areas:"dot name name name""dot slider number remove";gap:.3rem .5rem}.mix-dot{grid-area:dot}.mix-name{grid-area:name}.mix-slider{grid-area:slider}.mix-number{grid-area:number;width:100%}.mix-percent{display:none}.mix-remove{grid-area:remove}}