.design-tool .result-panel{background:#fff;padding:0}
.design-tool>*{min-width:0}
.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.25rem}
.design-options .field{min-width:0}
.design-options .wide{grid-column:1/-1}
.design-options input[type=color]{padding:.2rem;max-width:10rem;height:3rem;cursor:pointer}
.design-tool h1{max-width:17ch}
.design-tool textarea{min-height:6rem;overflow-wrap:anywhere}
.design-tool .color-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem;margin-block:1.5rem}
.design-tool .color-swatch{height:5rem;margin-bottom:1rem;outline:1px solid #767676;outline-offset:-1px}
.design-tool .color-values{margin:0}
.design-tool .color-values dt{font-weight:700}
.design-tool .color-values dd{margin:0 0 .75rem;overflow-wrap:anywhere}
.design-tool .value-copy{margin-left:.5rem;padding:.25rem .5rem;font-size:.9rem;min-height:2.75rem}
.design-tool .effect-preview{height:14rem;margin-block:1.5rem;display:grid;place-items:center;overflow:hidden}
.design-tool .sample-object{width:10rem;height:7rem;background:#111;color:#fff;display:grid;place-items:center}
.design-tool .shadow-stage{background:#f5f5f5;min-height:20rem}
.design-tool .shadow-stage .sample-object{background:white;color:#111}
.design-tool .contrast-sample{padding:1.5rem;margin-block:1.5rem;overflow-wrap:anywhere}
.design-tool .contrast-sample p{margin:0;font-size:1rem}
.design-tool .contrast-sample strong{font-size:2rem}
.design-tool .contrast-checks{padding-left:1.2rem}
.design-tool .contrast-checks li{margin-bottom:.5rem}
.design-tool .ratio-sample{max-width:100%;max-height:12rem;background:#111;margin:1.5rem auto}
.design-tool .result-panel:not([hidden]){animation:design-appear 160ms ease}
@keyframes design-appear{from{opacity:0;transform:translateY(.2rem)}to{opacity:1;transform:none}}
@media(max-width:44rem){.design-options{grid-template-columns:1fr}.design-tool .color-results{grid-template-columns:1fr}.design-tool h1{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.design-tool .result-panel:not([hidden]){animation:none}}