:root:has(.color-reference){--sl-content-width:78rem}body:has(.color-reference) .content-panel:first-child{padding-bottom:0}body:has(.color-reference) .content-panel+.content-panel{border-top:0;padding-top:.6rem}body:has(.color-reference) #_top{letter-spacing:-.055em;font-size:clamp(2.5rem,4.2vw,3.5rem);line-height:1.1}body:has(.color-reference) .sl-container{margin-inline:auto}body:has(.color-reference) .sl-markdown-content>:not(.color-reference){max-width:52rem;margin-inline:auto}body:has(.color-reference) .sl-markdown-content>h2{margin-top:3.5rem}.sl-markdown-content .color-reference{--cr-surface:var(--reshiki-surface);--cr-border:var(--sl-color-hairline);--cr-muted:var(--sl-color-gray-2);--cr-accent:var(--sl-color-text-accent);margin-top:0}.sl-markdown-content .color-reference :where(*){box-sizing:border-box;margin:0}.color-reference button,.color-reference input{font:inherit;color:inherit}.color-reference button{cursor:pointer}.color-reference svg{flex:none;width:1.15rem;height:1.15rem}.color-reference a{color:inherit}.color-reference :focus-visible{outline:2px solid var(--cr-accent);outline-offset:3px}.color-reference .cr-intro{justify-content:space-between;align-items:center;gap:2rem;margin-bottom:1.8rem;display:flex}.color-reference .cr-intro p{font-size:1rem;line-height:1.65}.color-reference .cr-intro p>span{color:var(--cr-muted)}.color-reference .cr-download-menu{z-index:4;flex:none;position:relative}.color-reference .cr-download-menu summary{border:1px solid var(--cr-border);background:var(--cr-surface);cursor:pointer;border-radius:.65rem;align-items:center;gap:.7rem;padding:.8rem 1rem;font-size:.875rem;list-style:none;display:flex}.color-reference .cr-download-menu summary::-webkit-details-marker{display:none}.color-reference .cr-download-menu[open] summary{border-color:var(--cr-accent)}.color-reference .cr-chevron{width:.85rem}.color-reference .cr-download-list{background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:.8rem;width:17rem;padding:.5rem;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 12px 35px #0002}.color-reference .cr-download-list>span{color:var(--cr-muted);padding:.5rem .7rem;font-size:.7rem;display:block}.color-reference .cr-download-list a{border-radius:.4rem;justify-content:space-between;align-items:center;padding:.7rem;font-size:.875rem;text-decoration:none;display:flex}.color-reference .cr-download-list a:hover{background:var(--sl-color-accent-low)}.color-reference .cr-download-list small{color:var(--cr-muted);font-size:.7rem}.color-reference .cr-download-list a:last-child{border-top:1px solid var(--cr-border);margin-top:.3rem}.color-reference .cr-themes{grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.6rem;display:grid}.color-reference .cr-theme{border:1px solid var(--cr-border);background:var(--cr-surface);text-align:left;border-radius:.75rem;grid-template-columns:1fr auto;gap:.25rem 1rem;padding:1rem 1.2rem;transition:border-color .12s;display:grid}.color-reference .cr-theme:hover{border-color:var(--cr-muted)}.color-reference .cr-theme[aria-pressed=true]{border-color:var(--cr-accent);box-shadow:inset 0 0 0 1px var(--cr-accent)}.color-reference .cr-theme-name{letter-spacing:-.015em;font-size:1rem;font-weight:600}.color-reference .cr-selected-mark{color:var(--cr-accent);visibility:hidden;padding-left:.6rem;font-size:.9rem}.color-reference .cr-theme[aria-pressed=true] .cr-selected-mark{visibility:visible}.color-reference .cr-theme-description{color:var(--cr-muted);grid-column:1;font-size:.75rem}.color-reference .cr-theme-strip{grid-area:1/2/3;align-self:center;gap:3px;display:flex}.color-reference .cr-theme-strip>span{border-radius:3px;width:.6rem;height:2rem}.color-reference .cr-workspace{grid-template-columns:minmax(0,1fr) 19rem;align-items:start;gap:1.5rem;display:grid}.color-reference .cr-palette{--cr-surface:#fff;--cr-border:#dedede;--cr-muted:#606060;--cr-accent:#b5472b;--cr-text:#202623;--cr-control-surface:#f5f5f2;--cr-control-active:#fff;color-scheme:light;color:var(--cr-text);border:1px solid var(--cr-border);background:var(--cr-surface);border-radius:1rem;min-width:0;padding:1.4rem;scroll-margin-top:5.5rem}.color-reference[data-canvas-mode=dark] .cr-palette{--cr-surface:#000;--cr-border:#333;--cr-muted:#aaa;--cr-accent:#f1ad90;--cr-text:#f0f0f0;--cr-control-surface:#141414;--cr-control-active:#282828;color-scheme:dark}.color-reference .cr-toolbar{justify-content:space-between;align-items:center;gap:1rem;padding-bottom:1.5rem;display:flex}.color-reference .cr-search{min-width:8rem;max-width:12rem;color:var(--cr-muted);align-items:center;gap:.5rem;display:flex}.color-reference .cr-search input{background:0 0;border:0;width:100%;min-width:0;padding:.6rem 0;font-size:.8rem}.color-reference .cr-search input::placeholder{color:var(--cr-muted);opacity:1}.color-reference .cr-table-caption{justify-content:space-between;align-items:center;gap:1rem;display:flex}.color-reference .cr-toolbar h2,.color-reference .cr-table-caption h3{letter-spacing:-.015em;font-size:.9rem;font-weight:600}.color-reference .cr-caption{color:var(--cr-muted);font-size:.75rem;line-height:1.5}.color-reference #cr-description{margin:0}.color-reference .cr-grid{grid-template-rows:repeat(7,3.5rem) .4rem repeat(2,3.5rem);grid-template-columns:repeat(18,minmax(0,1fr));gap:4px;margin-top:1.2rem;display:grid}.color-reference .cr-tile{background:var(--cr-surface);border:1px solid var(--cr-border);border-radius:.35rem;flex-direction:column;justify-content:space-between;align-items:center;min-width:0;padding:.25rem;transition:opacity .1s,border-color .1s;display:flex}.color-reference .cr-tile:not(:disabled):hover{border-color:var(--cr-accent);transform:translateY(-1px)}.color-reference .cr-tile[aria-pressed=true]{border-color:var(--cr-accent);box-shadow:0 0 0 1px var(--cr-accent)}.color-reference .cr-number{color:var(--cr-muted);font-variant-numeric:tabular-nums;align-self:flex-start;font-size:.5rem;line-height:1}.color-reference .cr-symbol{font-size:.9rem;font-weight:500;line-height:1.15}.color-reference .cr-tile:disabled{opacity:.18;cursor:default}.color-reference .cr-table-footer{color:var(--cr-muted);justify-content:space-between;gap:1rem;padding-top:1rem;font-size:.7rem;display:flex}.color-reference .cr-supporting{border-top:1px solid var(--cr-border);margin-top:1.4rem;padding-top:1.2rem}.color-reference .cr-support-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:.65rem;margin-top:.9rem;display:grid}.color-reference .cr-support-tile{background:0 0;border:0;border-radius:.3rem;padding:.2rem;font-size:.7rem}.color-reference .cr-support-tile[aria-pressed=true]{outline:2px solid var(--cr-accent);outline-offset:2px}.color-reference .cr-support-tile>span:last-child{margin-top:.35rem;display:block}.color-reference .cr-support-tile .cr-color-swatch{height:1.35rem}.color-reference .cr-inspector{border:1px solid var(--cr-border);background:var(--cr-surface);border-radius:1rem;padding:1.2rem;scroll-margin-top:5.5rem;position:sticky;top:5.5rem}.color-reference .cr-inspector-title{grid-template-columns:1fr auto;align-items:center;gap:.1rem;margin-bottom:1rem;display:grid}.color-reference .cr-eyebrow{color:var(--cr-muted);font-size:.7rem}.color-reference .cr-inspector-title h2{text-transform:capitalize;grid-area:1/2/3;font-size:2.1rem;font-weight:500;line-height:1.2}.color-reference .cr-inspector-title p{color:var(--cr-muted);font-size:.7rem;line-height:1.4}.color-reference .cr-mode-card{border:1px solid var(--cr-border);border-radius:.6rem;overflow:hidden}.color-reference .cr-preview{color:#000;background:#fff;place-items:center;height:11rem;display:grid;position:relative}.color-reference .cr-preview[data-mode=dark]{color:#fff;background:#000}.color-reference .cr-preview-caption{opacity:.65;font-size:.65rem;position:absolute;top:.65rem;left:.75rem}.color-reference .cr-preview-symbol{margin-top:.5rem;font-size:3.5rem;font-weight:500;line-height:1}.color-reference .cr-preview-swatch{height:.3rem;position:absolute;inset:auto 0 0}.color-reference .cr-code-list{padding:.35rem .65rem}.color-reference .cr-code-list button{text-align:left;background:0 0;border:0;border-radius:.25rem;grid-template-columns:2.8rem minmax(0,1fr) .8rem;align-items:center;gap:.3rem;width:100%;min-height:2.25rem;padding:.35rem 0;display:grid}.color-reference .cr-code-list button+button{border-top:1px solid var(--cr-border)}.color-reference .cr-code-list button:hover{background:var(--sl-color-bg)}.color-reference .cr-code-list button>span{letter-spacing:.02em;color:var(--cr-muted);font-size:.6rem;font-weight:550}.color-reference .cr-code-list code{overflow-wrap:anywhere;user-select:text;color:inherit;background:0 0;border:0;padding:0;font:.7rem/1.5 ui-monospace,SFMono-Regular,monospace}.color-reference .cr-code-list svg{width:.8rem;height:.8rem;color:var(--cr-muted)}.color-reference .cr-code-list p{padding-block:.5rem;font-size:.8rem;line-height:1.6}.color-reference .cr-inspector-hint{text-align:center;color:var(--cr-muted);margin-top:.9rem;font-size:.7rem}.color-reference .cr-back{display:none}.color-reference .cr-footnote{color:var(--cr-muted);justify-content:space-between;gap:1rem;padding-block:1.2rem;font-size:.75rem;display:flex}.color-reference .cr-footnote a{text-decoration:none}.color-reference .cr-footnote a:hover{text-decoration:underline}.color-reference .cr-copy-status:empty{display:none}.color-reference .cr-copy-status:not(:empty){background:var(--cr-surface);border:1px solid var(--cr-border);width:max-content;max-width:calc(100% - 2rem);color:var(--sl-color-text);z-index:20;overflow-wrap:anywhere;border-radius:.6rem;padding:.65rem 1rem;font-size:.85rem;position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0003}@media (width<=1200px){.color-reference .cr-theme{grid-template-columns:1fr}.color-reference .cr-theme-strip{grid-area:auto/1;margin-top:.5rem}.color-reference .cr-theme-strip>span{width:1.25rem;height:.5rem}.color-reference .cr-workspace{grid-template-columns:minmax(0,1fr) 17rem;gap:1rem}.color-reference .cr-palette{padding:1rem}}@media (width<=1050px){.color-reference .cr-inspector{position:static}.color-reference .cr-workspace{grid-template-columns:1fr}.color-reference .cr-inspector-title{margin-bottom:1rem}.color-reference .cr-back{color:var(--cr-accent);margin-bottom:.8rem;font-size:.75rem;text-decoration:none;display:inline-block}.color-reference .cr-preview{height:8rem}}@media (width<=700px){.color-reference .cr-intro{display:block}.color-reference .cr-intro p{font-size:.9rem}.color-reference .cr-download-menu{margin-top:1rem;display:inline-block}.color-reference .cr-download-list{left:0;right:auto}.color-reference .cr-themes{gap:.5rem;margin-bottom:1rem}.color-reference .cr-theme{padding:.75rem .65rem}.color-reference .cr-theme-name{font-size:.8rem}.color-reference .cr-theme-description,.color-reference .cr-selected-mark{display:none}.color-reference .cr-theme-strip{gap:2px}.color-reference .cr-theme-strip>span{width:.7rem}.color-reference .cr-toolbar{flex-wrap:wrap;gap:.7rem;padding-bottom:1rem}.color-reference .cr-search{flex:1;min-width:9rem;max-width:none}.color-reference .cr-grid{grid-template-rows:none;grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:3.5rem}.color-reference .cr-tile{grid-area:auto!important}.color-reference .cr-table-footer>span:last-child{text-align:right;max-width:11rem}.color-reference .cr-supporting .cr-caption{display:none}.color-reference .cr-support-grid{gap:.4rem}.color-reference .cr-footnote{flex-direction:column;gap:.5rem}.color-reference .cr-inspector{padding:.9rem}}@media (width<=420px){.color-reference .cr-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.color-reference .cr-themes{gap:.4rem}.color-reference .cr-theme{padding:.7rem .5rem}.color-reference .cr-theme-name{font-size:.75rem}.color-reference .cr-palette{padding:.8rem}}@media (prefers-reduced-motion:reduce){.color-reference .cr-theme,.color-reference .cr-tile{transition:none}}.color-reference .cr-ring-preview{width:4rem;height:4rem;margin-top:.9rem}.color-reference .cr-mode-toggle{border:1px solid var(--cr-border);background:var(--cr-control-surface);border-radius:.55rem;flex:none;gap:2px;padding:3px;display:flex}.color-reference .cr-mode-toggle button{color:var(--cr-muted);background:0 0;border:1px solid #0000;border-radius:.35rem;align-items:center;gap:.35rem;padding:.4rem .55rem;font-size:.75rem;display:flex}.color-reference .cr-mode-toggle svg{width:.9rem;height:.9rem}.color-reference .cr-mode-toggle button[aria-pressed=true]{background:var(--cr-control-active);border-color:var(--cr-accent);color:var(--cr-text);box-shadow:0 1px 3px #0001}.color-reference .cr-color-swatch{border:1px solid #8884;border-radius:2px;width:100%;height:.7rem;display:block}.color-reference .cr-tile .cr-symbol{color:var(--element-color)}