:root{--chart-ink:#20232a;--chart-line:#d7dbe3;--chart-paper:#fff;--chart-soft:#f4f6f9;--chart-blue:#3d6be0}
.color-chart-page{margin:0;background:#f4f6f9;color:var(--chart-ink)}
.color-chart-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:30px 0 72px}
.color-chart-crumb{display:flex;gap:8px;margin-bottom:22px;color:#6a707b;font-size:13px}.color-chart-crumb a{color:var(--chart-blue);font-weight:800;text-decoration:none}
.color-chart-hero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(380px,1.14fr);align-items:center;gap:34px;padding:34px;background:var(--chart-paper);border:2px solid var(--chart-ink);border-radius:8px;box-shadow:5px 5px 0 var(--chart-ink)}
.color-chart-hero h1{max-width:720px;margin:8px 0 14px;font-size:clamp(32px,4vw,54px);line-height:1.04;letter-spacing:0}.color-chart-hero p{max-width:680px;margin:0;color:#545b67;font-size:16px;line-height:1.7}.color-chart-kicker{color:var(--chart-blue);font-size:12px;font-weight:900;text-transform:uppercase}.color-chart-hero img{display:block;width:100%;height:430px;object-fit:cover;object-position:top;border:1.5px solid var(--chart-line);border-radius:6px}
.color-chart-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.color-chart-actions a{padding:11px 15px;border:2px solid var(--chart-ink);border-radius:7px;background:#fff;color:var(--chart-ink);font-weight:900;text-decoration:none}.color-chart-actions .primary{background:var(--chart-blue);color:#fff}
.color-chart-note{display:grid;grid-template-columns:210px 1fr;gap:20px;margin:26px 0;padding:18px 20px;background:#fff7df;border-left:5px solid #ffb020}.color-chart-note strong{font-size:15px}.color-chart-note p{margin:0;color:#565b64;line-height:1.6}
.color-chart-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:42px 0 15px}.color-chart-section-head span{color:var(--chart-blue);font-size:12px;font-weight:900;text-transform:uppercase}.color-chart-section-head h2{margin:5px 0 0;font-size:28px;letter-spacing:0}.color-chart-section-head p{max-width:390px;margin:0;color:#68707b;font-size:13px;line-height:1.5}
.color-table-scroll{overflow:auto;background:#fff;border:1.5px solid var(--chart-line);border-radius:7px}.color-table-scroll table{width:100%;border-collapse:collapse;font-size:14px}.color-table-scroll th,.color-table-scroll td{padding:9px 12px;border-bottom:1px solid #e2e5ea;text-align:left;white-space:nowrap}.color-table-scroll thead th{position:sticky;top:0;z-index:1;background:var(--chart-ink);color:#fff;font-size:12px;text-transform:uppercase}.color-table-scroll tbody tr:hover{background:#f2f5fb}.swatch{display:block;width:42px;height:28px;background:var(--swatch);border:1.5px solid #272a30;border-radius:5px}.color-table-scroll code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800}
.color-chart-method{margin-top:42px}.color-chart-method h2{font-size:28px}.color-chart-method>div{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.color-chart-method article{padding:20px;background:#fff;border-top:4px solid var(--chart-blue)}.color-chart-method h3{margin:0 0 8px;font-size:17px}.color-chart-method p{margin:0;color:#5b626e;line-height:1.65}
.color-chart-brands{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:34px;padding:18px 20px;background:#e9edf7}.color-chart-brands a{color:#244fae;font-weight:800}
@media(max-width:820px){.color-chart-wrap{width:min(100% - 24px,700px);padding-top:18px}.color-chart-hero{grid-template-columns:1fr;padding:22px;gap:22px}.color-chart-hero img{height:320px}.color-chart-section-head{display:block}.color-chart-section-head p{margin-top:8px}.color-chart-note{grid-template-columns:1fr;gap:6px}.color-chart-method>div{grid-template-columns:1fr}.color-table-scroll th,.color-table-scroll td{padding:8px 10px}.color-chart-actions a{flex:1 1 190px;text-align:center}}