.colour-zones{max-width:var(--content-width,1600px);margin:48px auto 0;padding-top:36px;border-top:1px solid #cfd5cb;scroll-margin-top:110px;min-width:0}
.colour-zones-heading{max-width:840px;margin-bottom:28px}
.hl-studio .colour-zones h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.8rem,3vw,2.65rem);line-height:1.2;margin:0 0 18px;letter-spacing:-.02em}
.hl-studio .colour-zones p{font-size:.9375rem;line-height:1.75}
.colour-zones-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
.colour-zone-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.colour-zone-buttons button{min-width:0;min-height:48px;padding:10px 8px;border:1px solid #cfd5cb;background:#f0f2e9;color:#26332b;line-height:1.55;font:inherit;font-size:.875rem;text-align:left;border-radius:3px;cursor:pointer;white-space:normal}
.colour-zone-buttons button>span{display:block;font-size:.6875rem;line-height:1.4;margin-bottom:4px}
.colour-zone-buttons button[aria-pressed=true]{background:#26332b;color:#fff;border-color:#26332b}
.colour-zone-buttons button:disabled{opacity:.45;cursor:default}
.colour-zone-figure{padding:16px;margin:0;background:#faf9f6;border:1px solid #cfd5cb;border-radius:3px}
.colour-zone-figure svg{display:block;width:100%;height:auto;max-width:440px;margin:auto;overflow:visible}
.colour-zone-figure .colour-zone-top{fill:var(--zone-top)}.colour-zone-figure .colour-zone-base{fill:var(--zone-base)}.colour-zone-figure .colour-zone-accent{fill:var(--zone-accent)}
.colour-zone-figure g>rect{stroke:#929c8b;stroke-width:1;vector-effect:non-scaling-stroke}
.colour-zone-figure g.is-selected>rect{stroke:#26332b;stroke-width:3;stroke-dasharray:5 3}
.colour-zone-figure circle{fill:#faf9f6;stroke:#26332b;stroke-width:1.5}.colour-zone-figure text{font-family:Arial,sans-serif;font-size:15px;fill:#26332b;font-weight:600}
.hl-studio .colour-zone-figure figcaption{display:block;margin-top:14px;color:#626b61;font-size:.8125rem;line-height:1.6}
.colour-zone-figure figcaption strong{display:block;color:#26332b;font-size:1rem;margin-bottom:6px}
.colour-zone-description h4{font-family:Georgia,serif;font-weight:400;font-size:1.5rem;line-height:1.3;margin:0 0 16px}
.colour-zone-description dl{margin:22px 0 26px;border-top:1px solid #cfd5cb}
.colour-zone-description dl>div{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:11px 0;border-bottom:1px solid #cfd5cb;font-size:.875rem;line-height:1.65}
.colour-zone-description dd{display:flex;align-items:center;gap:10px;margin:0}.colour-zone-description dd i{width:25px;height:25px;border:1px solid #cfd5cb;display:inline-block;border-radius:2px}
.colour-zone-light,.colour-zone-sample{margin-top:26px;padding-top:22px;border-top:1px solid #cfd5cb}
.colour-zones .underlink{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:.875rem;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
.colour-zones :focus-visible{outline:3px solid #566e58;outline-offset:4px}
@media(max-width:760px){.colour-zones-layout{grid-template-columns:minmax(0,1fr);gap:24px}.colour-zones{margin-top:38px;padding-top:30px}.colour-zone-buttons button{font-size:.8125rem}.colour-zone-figure{padding:10px}}
@media print{.colour-zone-buttons{display:none}.colour-zone-figure svg{print-color-adjust:exact}}