#brand-colors{width:min(1080px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:28px;border:1px solid #666;border-radius:0;box-shadow:none;background:#fff;color:#171717;overflow:auto}
#brand-colors::backdrop{background:#0009}
#brand-colors .colors-head{display:flex;justify-content:space-between;align-items:start;gap:24px;margin-bottom:22px}
#brand-colors h2{font-size:40px;letter-spacing:-.04em;margin:8px 0}
#brand-colors .colors-mono{font:13px/1.5 'Courier New',monospace;letter-spacing:.04em}
#brand-colors .colors-close{border:1px solid #bbb;background:white;padding:10px 16px;color:#111}
#brand-colors .colors-rules{font-size:14px;max-width:75ch;margin:0 0 20px;color:#555}
#brand-colors .colors-strength{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;border-block:1px solid #ddd;padding:14px 0;margin-bottom:24px}
#brand-colors input{accent-color:#222;width:min(260px,100%)}
#brand-colors .colors-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px}
#brand-colors h3{font-size:16px;line-height:1.3;font-weight:500;letter-spacing:0;margin:0 0 10px}
#brand-colors .brand-color-swatch{height:88px}
#brand-colors code{display:block;font:13px/1.5 'Courier New',monospace;margin:8px 0}
#brand-colors .brand-color-base{display:flex;align-items:center;gap:8px;font:11px/1.5 'Courier New',monospace;color:#555}
#brand-colors .brand-color-base i{display:inline-block;flex:none;width:16px;height:16px}
.review-links #colors-toggle{font:inherit;color:inherit}
@media(max-width:700px){#brand-colors{padding:20px;max-height:calc(100dvh - 20px)}#brand-colors .colors-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}#brand-colors h2{font-size:32px}.reviewbar{flex-wrap:wrap}.review-links{flex-wrap:wrap;gap:16px}#brand-colors .brand-color-base{flex-wrap:wrap}}

.map-header #colors-toggle{border:0;background:transparent;color:inherit;font:inherit;padding:0;cursor:pointer}