.hair-color-instructions{margin:.7rem 0 1rem;padding-left:1.5rem}
.hair-color-instructions li+li{margin-top:.35rem}
.hair-color-simulator{width:min(42rem,100%);margin:1rem auto}
.hair-color-result-tools{display:flex;align-items:stretch;justify-content:center;gap:.55rem;margin:0 auto 1rem;scroll-margin-block:5rem}
.hair-color-result-tools[hidden],.hair-color-saved[hidden]{display:none}
.hair-color-result{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(4rem,7rem);align-items:center;min-height:5rem;padding:.55rem;border:3px solid #2e78aa;border-radius:.8rem;background:#eef6fc;color:#0d3b61}
.hair-color-result-swatch{display:block;width:100%;aspect-ratio:1.75/1;border:2px solid rgba(15,23,42,.45);border-radius:.35rem;background:var(--hair-color)}
.hair-color-result-number{display:grid;place-items:center;min-width:0;font-size:2.1rem;font-weight:1000;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.hair-color-save{align-self:center;padding:.7rem .9rem;border:0;border-radius:.55rem;background:#17689e;color:#fff;font:inherit;font-weight:900;cursor:pointer}
.hair-color-save:disabled{cursor:not-allowed;opacity:.45}
.hair-color-saved{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;width:min(24rem,100%);margin:0 auto 1rem}
.hair-color-saved-item{display:grid;grid-template-rows:auto 1.5rem;gap:.2rem;min-width:0;padding:.3rem;border:1px solid #9db4c8;border-radius:.55rem;background:#f7fafc;color:#17344d;font:inherit;font-weight:900;cursor:pointer}
.hair-color-saved-swatch{display:block;width:100%;aspect-ratio:1.55/1;border:1px solid rgba(15,23,42,.45);border-radius:.35rem;background:var(--hair-color)}
.hair-color-saved-number{display:grid;place-items:center;font-variant-numeric:tabular-nums}
.hair-color-family{display:grid;gap:.35rem;margin-bottom:1rem;color:#164f78;font-weight:900}
.hair-color-family select{width:100%;padding:.7rem .8rem;border:1px solid #829db4;border-radius:.55rem;background:#fff;color:#17344d;font:inherit}
.hair-color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5rem),1fr));gap:.8rem}
.hair-color-sample{display:grid;grid-template-rows:auto minmax(2.15rem,auto);gap:.25rem;min-width:0;padding:0;border:0;background:transparent;color:#17344d;font:inherit;cursor:pointer}
.hair-color-swatch{display:block;width:100%;aspect-ratio:1.55/1;border:2px solid rgba(15,23,42,.45);border-radius:.35rem;background:var(--hair-color)}
.hair-color-name{display:grid;place-items:start center;min-width:0;overflow-wrap:break-word;font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.4}
.hair-color-name--long{font-size:.9rem}
.hair-color-sample:hover{transform:translateY(-1px)}
.hair-color-sample:hover .hair-color-swatch{border-color:#315f86}
.hair-color-sample:focus-visible,.hair-color-saved-item:focus-visible,.hair-color-save:focus-visible{outline:4px solid #f4ba34;outline-offset:2px}
.hair-color-sample[aria-pressed="true"] .hair-color-swatch{border-color:#fff;outline:4px solid #17689e;outline-offset:2px}
.hair-color-delete-dialog{width:min(22rem,calc(100% - 2rem));padding:0;border:1px solid #60758a;border-radius:.35rem;background:#fff;color:#17344d}
.hair-color-delete-dialog::backdrop{background:rgba(15,23,42,.55)}
.hair-color-delete-dialog form{padding:1.2rem}
.hair-color-delete-dialog p{margin:0 0 1rem;text-align:center;font-size:1.1rem;font-weight:900}
.hair-color-delete-actions{display:flex;justify-content:center;gap:.7rem}
.hair-color-delete-actions button{min-width:7rem;padding:.65rem .9rem;border:1px solid #829db4;border-radius:.55rem;background:#f4f7fa;color:#17344d;font:inherit;font-weight:900;cursor:pointer}
.hair-color-delete-actions .hair-color-delete-confirm{border-color:#a51d1d;background:#a51d1d;color:#fff}
.hair-color-source{text-align:right;color:#52657a;font-size:.78rem}
.hair-color-source a{font-weight:800}
@media(max-width:520px){
 .hair-color-grid{gap:.45rem}
 .hair-color-swatch{border-radius:.45rem}
 .hair-color-name{font-size:.9rem}
 .hair-color-name--long{font-size:.9rem}
 .hair-color-result-tools{gap:.4rem}
 .hair-color-result{grid-template-columns:minmax(5.5rem,1fr) minmax(3.6rem,5rem);min-height:4rem}
 .hair-color-result-number{font-size:1.8rem}
 .hair-color-save{padding:.55rem .7rem}
 .hair-color-saved{gap:.4rem}
}