.collection-view .page-heading nav{display:flex;align-items:center;gap:22px}.guide-shell{width:min(1120px,calc(100% - 80px));margin-inline:auto}.guide-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:38px 0 54px}.guide-brand{font-size:30px;letter-spacing:-.04em;font-weight:700;line-height:1.1}.guide-header nav{display:flex;gap:26px;font-size:13px}.guide-header a:hover,.guide-footer a:hover{color:var(--purple)}.guide-hub h1{font-size:64px;letter-spacing:-.04em;line-height:1.2;margin:14px 0 24px}.guide-lead{font-size:18px;line-height:1.9;color:#4c4c4c;margin:0 0 36px;word-break:keep-all;max-width:65ch}.guide-index{margin-top:58px;border-top:1px solid var(--ink)}.guide-index article{display:grid;grid-template-columns:1.05fr 1fr auto;gap:36px;align-items:start;padding:32px 0;border-bottom:1px solid var(--line)}.guide-index h2{font-size:24px;line-height:1.5;letter-spacing:-.035em;margin:0;word-break:keep-all}.guide-index h2 a:hover{text-decoration:underline;text-underline-offset:6px}.guide-index p{font-size:14px;line-height:1.9;color:#595959;margin:3px 0 0;word-break:keep-all}.guide-read{font-size:12px;display:inline-flex;gap:12px;white-space:nowrap;align-items:center;margin-top:8px;min-height:32px}.guide-read:hover{color:var(--purple)}.guide-origin{margin-top:70px;max-width:740px}.guide-origin h2{font-size:25px;letter-spacing:-.035em;margin:0 0 20px}.guide-origin p{font-size:15px;line-height:1.95;color:#4b4b4b;word-break:keep-all}.guide-origin a,.guide-article p a,.guide-article li a{color:var(--purple);text-decoration:underline;text-underline-offset:4px}.guide-breadcrumb{font-size:12px;line-height:1.8;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;margin:3px 0 40px}.guide-breadcrumb a{text-decoration:underline;text-underline-offset:4px}.reading-layout{display:grid;grid-template-columns:180px minmax(0,740px);gap:64px;justify-content:space-between;align-items:start}.guide-toc{position:sticky;top:30px}.guide-toc p{font-size:12px;font-weight:600;margin:0 0 15px}.guide-toc a{display:block;color:#595959;font-size:12px;line-height:1.9;margin-bottom:11px}.guide-toc a:hover{color:var(--purple);text-decoration:underline;text-underline-offset:4px}.guide-article{min-width:0}.guide-article h1{font-size:44px;line-height:1.4;letter-spacing:-.04em;word-break:keep-all;margin:0 0 24px}.guide-article>.guide-lead{margin-bottom:52px}.guide-article section{scroll-margin-top:30px;margin:0 0 58px}.guide-article section h2,.guide-related h2{font-size:25px;line-height:1.5;letter-spacing:-.035em;margin:0 0 18px;word-break:keep-all}.guide-article h3{font-size:18px;line-height:1.6;letter-spacing:-.025em;margin:30px 0 12px}.guide-article p,.guide-article li{font-size:16px;line-height:1.95;color:#3b3b3b;word-break:keep-all}.guide-article p{margin:0 0 18px}.guide-article ul,.guide-article ol{padding-left:22px;margin:0 0 24px}.guide-article li{padding-left:4px;margin-bottom:13px}.guide-article em{font-style:normal;font-weight:700}.guide-article table{border-collapse:collapse;table-layout:fixed;width:100%;margin:24px 0;font-size:14px;line-height:1.9}.guide-article th,.guide-article td{padding:15px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);overflow-wrap:anywhere;word-break:keep-all}.guide-article th{border-top:1px solid var(--ink);font-weight:600}.guide-article th:first-child,.guide-article td:first-child{width:20%;padding-left:0}.guide-article pre{background:#f4f3f6;border-radius:8px;padding:23px;font:13px/1.9 Consolas,'Courier New',monospace;white-space:pre-wrap;overflow-wrap:anywhere;margin:24px 0;color:#29232e}.guide-article code{font-family:Consolas,'Courier New',monospace}.guide-palette{margin:26px 0 24px}.guide-swatches{display:grid;grid-template-columns:6fr 3fr 1fr;height:116px;border-radius:12px;overflow:hidden}.guide-swatches>div{min-width:0;display:flex;align-items:start;padding:17px}.guide-swatches span{font-size:13px;font-weight:600}.guide-swatches>div:last-child{padding-inline:6px;justify-content:center}.guide-palette figcaption{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:14px;font-size:14px;line-height:1.8}.guide-palette figcaption a{text-decoration:underline;text-underline-offset:4px;font-weight:600}.guide-palette figcaption span{font-size:12px;color:var(--muted)}.guide-article .guide-codes{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;margin:13px 0 20px}.guide-article .guide-codes li{padding:0;margin:0;font-size:12px;color:var(--muted);white-space:nowrap}.guide-codes b{font-weight:400;margin-right:5px}.guide-codes code{color:var(--ink)}.guide-related{border-top:1px solid var(--ink);padding-top:25px;margin-top:68px}.guide-related>a{display:block;font-size:15px;line-height:1.8;text-decoration:underline;text-underline-offset:5px;margin-bottom:15px}.guide-related>a:hover{color:var(--purple)}.guide-related a.guide-tool-link{display:inline-block;border:1px solid var(--ink);border-radius:5px;padding:12px 18px;font-size:13px;text-decoration:none;margin-top:14px}.guide-footer{display:flex;gap:30px;border-top:1px solid var(--line);margin-top:80px;padding:24px 0 42px;font-size:12px;flex-wrap:wrap}
@media(max-width:900px){.guide-shell{width:calc(100% - 56px)}.reading-layout{grid-template-columns:1fr;gap:30px}.guide-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:22px}.guide-toc nav{display:flex;flex-wrap:wrap;gap:10px 20px}.guide-toc p{width:100%;margin-bottom:0}.guide-toc a{margin:0;font-size:12px}.guide-article h1{font-size:40px}.guide-index article{grid-template-columns:1fr 1fr;gap:18px 30px}.guide-read{grid-column:2;margin-top:0}.guide-hub h1{font-size:54px}}
@media(max-width:520px){.guide-shell{width:calc(100% - 36px)}.guide-header{padding:27px 0 38px;gap:20px}.guide-brand{font-size:26px}.guide-header nav{gap:18px;font-size:12px}.guide-breadcrumb{font-size:11px;margin:0 0 28px;gap:8px}.guide-hub h1{font-size:42px;margin:12px 0 20px}.guide-lead{font-size:16px;line-height:1.9}.guide-index{margin-top:40px}.guide-index article{grid-template-columns:1fr;gap:12px;padding:25px 0}.guide-index h2{font-size:23px}.guide-index p{font-size:14px}.guide-read{grid-column:auto;min-height:36px}.guide-origin{margin-top:50px}.guide-origin h2{font-size:23px}.guide-origin p{font-size:15px}.guide-article h1{font-size:32px;line-height:1.45}.guide-article>.guide-lead{margin-bottom:40px}.guide-article section{margin-bottom:44px}.guide-article section h2,.guide-related h2{font-size:23px}.guide-article p,.guide-article li{font-size:15px;line-height:1.95}.guide-article h3{font-size:18px}.guide-article table{font-size:12px;line-height:1.85}.guide-article th,.guide-article td{padding:12px 7px}.guide-article pre{padding:17px;font-size:12px}.guide-swatches{height:103px}.guide-swatches>div{padding:15px 12px}.guide-swatches>div:last-child{padding-inline:2px}.guide-swatches span{font-size:11px}.guide-palette figcaption{flex-direction:column;align-items:start;gap:5px;font-size:14px}.guide-palette figcaption span{font-size:12px}.guide-article .guide-codes{gap:7px 16px}.guide-article .guide-codes li{font-size:11px}.guide-footer{margin-top:55px;gap:16px 22px;font-size:12px}.collection-view .page-heading nav{gap:15px}}
/* Allow the longer English heading and navigation to wrap on small screens. */
@media(max-width:520px){.collection-view .page-heading{flex-wrap:wrap;row-gap:16px}.collection-view .page-heading nav{margin-left:auto}}
/* Keep HEX labels anchored at the bottom after removing the ratio numerals. */
.collection-view .card-color{justify-content:flex-end}