/* Codex Pass design tokens. HSL channels support macOS 12's WKWebView. */
:root, .light, [data-mode='light'] {
  color-scheme: light;
  --cp-background: 0.000 0.000% 100.000%;
  --cp-foreground: 220.000 12.329% 14.314%;
  --cp-shell: 0.000 0.000% 96.863%;
  --cp-card: 0.000 0.000% 100.000%;
  --cp-popover: 0.000 0.000% 100.000%;
  --cp-muted: 0.000 0.000% 93.725%;
  --cp-muted-foreground: 225.000 4.500% 35.000%;
  --cp-secondary-muted: 120.000 12.500% 93.725%;
  --cp-secondary-text: 138.947 10.983% 33.922%;
  --cp-accent: 120.000 10.345% 94.314%;
  --cp-primary: 14.876 49.794% 47.647%;
  --cp-primary-edge: 14.876 49.794% 47.647%;
  --cp-primary-hover: 14.336 52.558% 42.157%;
  --cp-primary-muted: 22.500 57.143% 97.255%;
  --cp-primary-text: 14.336 52.558% 42.157%;
  --cp-inverse: 0.000 0.000% 12.549%;
  --cp-inverse-foreground: 0.000 0.000% 100.000%;
  --cp-primary-foreground: 0.000 0.000% 100.000%;
  --cp-border: 0.000 0.000% 88.627%;
  --cp-input: 0.000 0.000% 57.255%;
  --cp-ring: 14.876 49.794% 47.647%;
  --cp-destructive: 0 72% 43%;
  --cp-success: 151 63% 27%;
  --cp-success-muted: 145 45% 95%;
  --cp-warning: 31 90% 30%;
  --cp-warning-muted: 42 90% 95%;
  --cp-info: 214 78% 38%;
  --cp-info-muted: 213 80% 96%;
  --cp-danger-muted: 0 75% 97%;
  --cp-radius: .75rem;
  --cp-radius-button: 9999px;
  --cp-radius-panel: 1rem;
  --cp-radius-glass: 1.25rem;
  --cp-radius-media: .75rem;
  --cp-radius-small: .5rem;
  --cp-control-height: 2.25rem;
  --cp-control-small: 2rem;
  --cp-icon-slot-small: 1.25rem;
  --cp-icon-slot: 1.5rem;
  --cp-icon-slot-large: 2rem;
  --cp-icon-gap: .5rem;
  --cp-icon-gap-large: .75rem;
  --cp-logo-background: 45.000 12.500% 93.725%;
  --cp-logo-foreground: 80.000 3.704% 15.882%;
  --cp-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --cp-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --cp-text-xs: .75rem;
  --cp-text-sm: .875rem;
  --cp-text-base: 1rem;
  --cp-space-1: .25rem;
  --cp-space-2: .5rem;
  --cp-space-3: .75rem;
  --cp-space-4: 1rem;
  --cp-space-6: 1.5rem;
  --cp-space-8: 2rem;
  --cp-surface-lines-opacity: .22;
  --cp-shadow: 0 8px 32px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
  /* Canvas glow, mural and glass groups (see DESIGN.md "形状与层次"). */
  --cp-canvas-glow-top-color: var(--cp-primary-muted);
  --cp-canvas-glow-top-alpha: 1;
  --cp-canvas-wash-alpha: .45;
  --cp-canvas-glow-alpha: .13;
  --cp-mural-opacity: .2;
  --cp-mural-size: 1440px 260px;
  --cp-glass-alpha: .78;
  --cp-glass-bar-color: 0.000 0.000% 100.000%;
  --cp-glass-bar-alpha: .6;
  --cp-glass-rail-alpha: .5;
  --cp-glass-blur: 22px;
  --cp-glass-edge: 0.000 0.000% 88.627%;
  --cp-glass-edge-alpha: .55;
  --cp-swatch-terracotta: 14.876 49.794% 47.647%;
  --cp-swatch-sage: 148.000 16.304% 36.078%;
  --cp-swatch-graphite: 214.286 8.974% 30.588%;
  --cp-swatch-cinnabar: 4.248 51.598% 42.941%;
  --cp-swatch-celadon: 184.762 38.650% 31.961%;
  --cp-swatch-rouge: 340.465 38.393% 43.922%;
  --cp-swatch-golden-leaf: 42.000 64.103% 30.588%;
  --cp-brand-terracotta: 15.738 53.509% 55.294%;
  --cp-brand-sage: 105.000 5.405% 70.980%;
  --cp-brand-sand: 41.538 28.889% 82.353%;
  --cp-duration: 140ms;
  --cp-chart-1: 214 72% 46%;
  --cp-chart-2: 151 58% 34%;
  --cp-chart-3: 31 85% 42%;
  --cp-chart-4: 277 55% 50%;
  --cp-chart-5: 350 66% 47%;
  --cp-chart-6: 194 70% 35%;
  --cp-chart-7: 328 64% 44%;
  --cp-chart-8: 65 70% 30%;
  --cp-chart-9: 250 58% 49%;
  --cp-chart-10: 170 65% 30%;
  --cp-chart-11: 17 75% 43%;
  --cp-chart-12: 300 46% 43%;
  --cp-chart-13: 220 38% 45%;
  --cp-chart-14: 107 52% 33%;
  --cp-chart-15: 45 80% 33%;

  --cp-button-icon: 14.876 49.794% 47.647%;
  --cp-button-icon-foreground: 0.000 0.000% 100.000%;
}
.dark, [data-mode='dark'] {
  --cp-logo-background: 0.000 0.000% 18.824%;
  --cp-logo-foreground: 0.000 0.000% 94.902%;
  color-scheme: dark;
  --cp-background: 0.000 0.000% 9.020%;
  --cp-foreground: 0.000 0.000% 94.902%;
  --cp-shell: 0.000 0.000% 12.157%;
  --cp-card: 0.000 0.000% 14.118%;
  --cp-popover: 0.000 0.000% 16.078%;
  --cp-muted: 0.000 0.000% 18.824%;
  --cp-muted-foreground: 0.000 0.000% 74.000%;
  --cp-canvas-glow-top-color: var(--cp-primary);
  --cp-canvas-glow-top-alpha: .22;
  --cp-canvas-wash-alpha: .05;
  --cp-canvas-glow-alpha: .16;
  --cp-mural-opacity: .14;
  --cp-glass-alpha: .68;
  --cp-glass-bar-color: 0.000 0.000% 14.118%;
  --cp-glass-bar-alpha: .56;
  --cp-glass-rail-alpha: .5;
  --cp-glass-edge: 0.000 0.000% 100.000%;
  --cp-glass-edge-alpha: .1;
  --cp-secondary-muted: 144.000 10.870% 18.039%;
  --cp-secondary-text: 136.000 13.761% 78.627%;
  --cp-accent: 145.714 7.216% 19.020%;
  --cp-primary: 14.876 49.794% 47.647%;
  --cp-primary-edge: 16.822 56.021% 62.549%;
  --cp-primary-hover: 14.336 52.558% 42.157%;
  --cp-primary-muted: 20.000 11.111% 15.882%;
  --cp-primary-text: 17.442 61.429% 72.549%;
  --cp-inverse: 0.000 0.000% 92.941%;
  --cp-inverse-foreground: 0.000 0.000% 12.549%;
  --cp-primary-foreground: 0.000 0.000% 100.000%;
  --cp-border: 0.000 0.000% 23.922%;
  --cp-input: 0.000 0.000% 50.196%;
  --cp-ring: 17.442 61.429% 72.549%;
  --cp-destructive: 0 84% 72%;
  --cp-success: 149 53% 66%;
  --cp-success-muted: 150 27% 15%;
  --cp-warning: 39 88% 68%;
  --cp-warning-muted: 32 34% 16%;
  --cp-info: 211 86% 74%;
  --cp-info-muted: 214 34% 18%;
  --cp-danger-muted: 0 31% 18%;
  --cp-surface-lines-opacity: .28;
  --cp-shadow: 0 8px 32px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
  --cp-chart-1: 214 80% 70%;
  --cp-chart-2: 151 52% 62%;
  --cp-chart-3: 31 85% 68%;
  --cp-chart-4: 277 65% 73%;
  --cp-chart-5: 350 73% 72%;
  --cp-chart-6: 194 70% 63%;
  --cp-chart-7: 328 64% 70%;
  --cp-chart-8: 65 55% 60%;
  --cp-chart-9: 250 78% 73%;
  --cp-chart-10: 170 55% 60%;
  --cp-chart-11: 17 80% 67%;
  --cp-chart-12: 300 52% 70%;
  --cp-chart-13: 220 55% 72%;
  --cp-chart-14: 107 45% 60%;
  --cp-chart-15: 45 75% 65%;

  --cp-button-icon: 14.876 49.794% 47.647%;
  --cp-button-icon-foreground: 0.000 0.000% 100.000%;
}
@media (prefers-reduced-motion: reduce) { :root { --cp-duration: 0ms; } }

/* Optional palettes. Apply data-palette on the same root as .light/.dark. */
[data-palette='sage'] {
  --cp-primary: 148.000 16.304% 36.078%;
  --cp-primary-hover: 146.667 17.881% 29.608%;
  --cp-primary-text: 146.667 17.881% 29.608%;
  --cp-primary-muted: 135.000 15.385% 94.902%;
  --cp-primary-edge: 148.000 16.304% 36.078%;
  --cp-ring: 148.000 16.304% 36.078%;
  --cp-accent: 135.000 15.385% 94.902%;
  --cp-secondary-muted: 120.000 12.500% 93.725%;
  --cp-secondary-text: 138.947 10.983% 33.922%;
  --cp-button-icon: 148.000 16.304% 36.078%;
}
.dark[data-palette='sage'], [data-mode='dark'][data-palette='sage'] {
  --cp-primary: 148.000 16.304% 36.078%;
  --cp-primary-hover: 146.667 17.881% 29.608%;
  --cp-primary-text: 138.000 17.857% 78.039%;
  --cp-primary-muted: 144.000 12.195% 16.078%;
  --cp-primary-edge: 140.000 13.393% 56.078%;
  --cp-ring: 138.000 17.857% 78.039%;
  --cp-accent: 144.000 10.870% 18.039%;
  --cp-secondary-muted: 144.000 10.870% 18.039%;
  --cp-secondary-text: 136.000 13.761% 78.627%;
  --cp-button-icon: 148.000 16.304% 36.078%;
}
[data-palette='graphite'] {
  --cp-primary: 214.286 8.974% 30.588%;
  --cp-primary-hover: 212.308 10.744% 23.725%;
  --cp-primary-text: 212.308 10.744% 23.725%;
  --cp-primary-muted: 210.000 7.692% 94.902%;
  --cp-primary-edge: 214.286 8.974% 30.588%;
  --cp-ring: 214.286 8.974% 30.588%;
  --cp-accent: 210.000 7.692% 94.902%;
  --cp-secondary-muted: 210.000 7.692% 94.902%;
  --cp-secondary-text: 213.750 8.602% 36.471%;
  --cp-button-icon: 214.286 8.974% 30.588%;
}
.dark[data-palette='graphite'], [data-mode='dark'][data-palette='graphite'] {
  --cp-primary: 214.286 8.974% 30.588%;
  --cp-primary-hover: 212.308 10.744% 23.725%;
  --cp-primary-text: 216.000 12.195% 83.922%;
  --cp-primary-muted: 214.286 7.527% 18.235%;
  --cp-primary-edge: 214.737 9.645% 61.373%;
  --cp-ring: 216.000 12.195% 83.922%;
  --cp-accent: 214.286 7.527% 18.235%;
  --cp-secondary-muted: 214.286 7.527% 18.235%;
  --cp-secondary-text: 212.727 11.111% 80.588%;
  --cp-button-icon: 214.286 8.974% 30.588%;
}

[data-palette='cinnabar'] {
  --cp-primary: 4.248 51.598% 42.941%;
  --cp-primary-hover: 3.030 53.514% 36.275%;
  --cp-primary-text: 3.030 53.514% 36.275%;
  --cp-primary-muted: 9.231 56.522% 95.490%;
  --cp-primary-edge: 4.248 51.598% 42.941%;
  --cp-ring: 4.248 51.598% 42.941%;
  --cp-accent: 9.231 56.522% 95.490%;
  --cp-secondary-muted: 9.231 56.522% 95.490%;
  --cp-secondary-text: 3.030 53.514% 36.275%;
  --cp-button-icon: 4.248 51.598% 42.941%;
}

.dark[data-palette='cinnabar'], [data-mode='dark'][data-palette='cinnabar'] {
  --cp-primary: 4.248 51.598% 42.941%;
  --cp-primary-hover: 3.030 53.514% 36.275%;
  --cp-primary-text: 10.141 70.297% 80.196%;
  --cp-primary-muted: 11.250 20.000% 15.686%;
  --cp-primary-edge: 11.776 56.614% 62.941%;
  --cp-ring: 10.141 70.297% 80.196%;
  --cp-accent: 11.250 20.000% 15.686%;
  --cp-secondary-muted: 11.250 20.000% 15.686%;
  --cp-secondary-text: 10.141 70.297% 80.196%;
  --cp-button-icon: 4.248 51.598% 42.941%;
}

[data-palette='celadon'] {
  --cp-primary: 184.762 38.650% 31.961%;
  --cp-primary-hover: 185.556 40.909% 25.882%;
  --cp-primary-text: 185.556 40.909% 25.882%;
  --cp-primary-muted: 172.500 28.571% 94.510%;
  --cp-primary-edge: 184.762 38.650% 31.961%;
  --cp-ring: 184.762 38.650% 31.961%;
  --cp-accent: 172.500 28.571% 94.510%;
  --cp-secondary-muted: 172.500 28.571% 94.510%;
  --cp-secondary-text: 185.556 40.909% 25.882%;
  --cp-button-icon: 184.762 38.650% 31.961%;
}

.dark[data-palette='celadon'], [data-mode='dark'][data-palette='celadon'] {
  --cp-primary: 184.762 38.650% 31.961%;
  --cp-primary-hover: 185.556 40.909% 25.882%;
  --cp-primary-text: 176.471 27.419% 75.686%;
  --cp-primary-muted: 180.000 16.883% 15.098%;
  --cp-primary-edge: 176.538 23.423% 56.471%;
  --cp-ring: 176.471 27.419% 75.686%;
  --cp-accent: 180.000 16.883% 15.098%;
  --cp-secondary-muted: 180.000 16.883% 15.098%;
  --cp-secondary-text: 176.471 27.419% 75.686%;
  --cp-button-icon: 184.762 38.650% 31.961%;
}



[data-palette='rouge'] {
  --cp-primary: 340.465 38.393% 43.922%;
  --cp-primary-hover: 340.274 39.891% 35.882%;
  --cp-primary-text: 340.274 39.891% 35.882%;
  --cp-primary-muted: 336.000 41.667% 95.294%;
  --cp-primary-edge: 340.465 38.393% 43.922%;
  --cp-ring: 340.465 38.393% 43.922%;
  --cp-accent: 336.000 41.667% 95.294%;
  --cp-secondary-muted: 336.000 41.667% 95.294%;
  --cp-secondary-text: 340.274 39.891% 35.882%;
  --cp-button-icon: 340.465 38.393% 43.922%;
}

.dark[data-palette='rouge'], [data-mode='dark'][data-palette='rouge'] {
  --cp-primary: 340.465 38.393% 43.922%;
  --cp-primary-hover: 340.274 39.891% 35.882%;
  --cp-primary-text: 338.491 55.789% 81.373%;
  --cp-primary-muted: 325.714 17.073% 16.078%;
  --cp-primary-edge: 338.462 44.828% 65.882%;
  --cp-ring: 338.491 55.789% 81.373%;
  --cp-accent: 325.714 17.073% 16.078%;
  --cp-secondary-muted: 325.714 17.073% 16.078%;
  --cp-secondary-text: 338.491 55.789% 81.373%;
  --cp-button-icon: 340.465 38.393% 43.922%;
}

[data-palette='golden-leaf'] {
  --cp-primary: 42.000 64.103% 30.588%;
  --cp-primary-hover: 41.707 65.079% 24.706%;
  --cp-primary-text: 41.707 65.079% 24.706%;
  --cp-primary-muted: 45.000 50.000% 93.725%;
  --cp-primary-edge: 42.000 64.103% 30.588%;
  --cp-ring: 42.000 64.103% 30.588%;
  --cp-accent: 45.000 50.000% 93.725%;
  --cp-secondary-muted: 45.000 50.000% 93.725%;
  --cp-secondary-text: 41.707 65.079% 24.706%;
  --cp-button-icon: 42.000 64.103% 30.588%;
}

.dark[data-palette='golden-leaf'], [data-mode='dark'][data-palette='golden-leaf'] {
  --cp-primary: 42.000 64.103% 30.588%;
  --cp-primary-hover: 41.707 65.079% 24.706%;
  --cp-primary-text: 44.819 56.463% 71.176%;
  --cp-primary-muted: 40.000 20.000% 14.706%;
  --cp-primary-edge: 41.714 43.568% 52.745%;
  --cp-ring: 44.819 56.463% 71.176%;
  --cp-accent: 40.000 20.000% 14.706%;
  --cp-secondary-muted: 40.000 20.000% 14.706%;
  --cp-secondary-text: 44.819 56.463% 71.176%;
  --cp-button-icon: 42.000 64.103% 30.588%;
}

/* Static documentation uses the same tokens and control geometry as the React UI. */
* { box-sizing: border-box; }
body { margin: 0; background: hsl(var(--cp-background)); color: hsl(var(--cp-foreground)); font: 15px/1.7 var(--cp-font-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 4px; }
a:hover { color: hsl(var(--cp-muted-foreground)); }
a:focus-visible, button:focus-visible { outline: 2px solid hsl(var(--cp-ring)); outline-offset: 4px; }
.docs-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px max(24px, calc((100vw - 1120px) / 2)); border-bottom: 1px solid hsl(var(--cp-border)); background: hsl(var(--cp-background)); }
.docs-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; font-weight: 600; white-space: nowrap; }
.docs-brand img, .docs-brand svg { width: 28px; height: 28px; }
.docs-links { display: flex; align-items: center; gap: 20px; font-size: 13px; }
.docs-links a { text-decoration: none; }
.docs-theme { display: inline-flex; align-items: center; gap: 8px; min-height: var(--cp-control-height); padding: 6px 12px; border: 1px solid hsl(var(--cp-border)); border-radius: var(--cp-radius-button); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.docs-theme:hover { background: hsl(var(--cp-muted)); }
main { max-width: 1000px; margin: 0 auto; padding: 64px 32px 80px; }
.docs-eyebrow { color: hsl(var(--cp-muted-foreground)); font-size: 13px; font-weight: 500; margin: 0 0 12px; }
h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.15; letter-spacing: -.04em; font-weight: 600; margin: 0 0 20px; }
h2 { font-size: 20px; line-height: 1.4; font-weight: 600; letter-spacing: -.02em; margin: 48px 0 16px; }
p { max-width: 76ch; }
.muted { color: hsl(var(--cp-muted-foreground)); }
code, pre { font-family: var(--cp-font-mono); font-size: .85em; }
code { overflow-wrap: anywhere; }
pre { background: hsl(var(--cp-muted)); padding: 16px; overflow-x: auto; border-radius: var(--cp-radius); }
.docs-table { overflow-x: auto; border: 1px solid hsl(var(--cp-border)); border-radius: var(--cp-radius-panel); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 16px 20px; vertical-align: top; border-bottom: 1px solid hsl(var(--cp-border)); }
th { background: hsl(var(--cp-shell)); color: hsl(var(--cp-muted-foreground)); font-size: 12px; font-weight: 500; }
tr:last-child td { border-bottom: 0; }
td:first-child { width: 38%; }
tr:hover td { background: hsl(var(--cp-muted) / .45); }
.docs-footer { border-top: 1px solid hsl(var(--cp-border)); padding: 24px; text-align: center; font-size: 12px; color: hsl(var(--cp-muted-foreground)); }
.skip-link { position: absolute; top: -80px; left: 20px; background: hsl(var(--cp-background)); padding: 12px; z-index: 1; }
.skip-link:focus { top: 8px; }
@media (max-width: 640px) { .docs-nav { padding: 16px; gap: 16px; flex-wrap: wrap; } .docs-links { gap: 16px; } main { padding: 40px 20px 56px; } th, td { padding: 12px; } }
/* Direction A: developer reference with progressive, factual metadata. */
main { max-width: 1120px; padding-top: 72px; }
h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
.docs-intro { max-width: 64ch; font-size: 17px; line-height: 1.7; margin: 20px 0 28px; }
.docs-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; font-size: 14px; }
.docs-action { display: inline-flex; gap: 14px; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--cp-radius-button); border: 1px solid hsl(var(--cp-primary-edge)); color: hsl(var(--cp-primary-foreground)); background: hsl(var(--cp-primary)); text-decoration: none; font-weight: 500; }
.docs-action:hover { color: hsl(var(--cp-primary-foreground)); opacity: .85; }
.docs-overview { margin: 40px 0; padding: 24px; border: 1px solid hsl(var(--cp-border)); border-radius: var(--cp-radius-panel); }
.docs-overview h2 { font-size: 14px; margin: 0 0 20px; }
.docs-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; }
.docs-facts dt { color: hsl(var(--cp-muted-foreground)); font-size: 12px; margin-bottom: 5px; }
.docs-facts dd { margin: 0; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.docs-facts [data-state='success'] { color: hsl(var(--cp-success)); }
.docs-facts [data-state='warning'] { color: hsl(var(--cp-warning)); }
.docs-caption { font-size: 12px; margin: 24px 0 0; max-width: none; }
.docs-quickstart { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 32px 0; }
.docs-quickstart h2 { margin-top: 0; font-size: 24px; }
.docs-quickstart pre { white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--cp-radius-media); line-height: 1.8; padding: 24px; }
.docs-quickstart .docs-eyebrow { font-size: 11px; letter-spacing: .06em; }
.docs-section-nav { display: flex; flex-wrap: wrap; gap: 16px 28px; border-block: 1px solid hsl(var(--cp-border)); padding: 16px 0; font-size: 13px; margin-top: 24px; }
.docs-table th { padding-block: 12px; }
.docs-table code { font-size: 12px; }
@media (max-width: 640px) {
 main { padding-top: 40px; }
 .docs-intro { font-size: 16px; }
 .docs-overview { padding: 20px; }
 .docs-facts { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
 .docs-quickstart { grid-template-columns: 1fr; gap: 0; padding-top: 12px; }
 .docs-table table, .docs-table tbody, .docs-table tr, .docs-table td { display: block; }
 .docs-table tr:has(th) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .docs-table td:first-child { width: auto; padding-bottom: 4px; border-bottom: 0; font-weight: 500; }
 .docs-table td:last-child { padding-top: 4px; padding-bottom: 20px; color: hsl(var(--cp-muted-foreground)); }
 .docs-table tr:last-child td { border-bottom: 0; }
}

/* Reading surfaces stay calm; action text uses its own accessible color. */
.docs-nav { background: hsl(var(--cp-card)); }
.docs-overview { background: hsl(var(--cp-card)); }
.docs-table { background: hsl(var(--cp-card)); }
.docs-links a:hover, .docs-section-nav a, .docs-table td a { color: hsl(var(--cp-primary-text)); }
.docs-action:hover { background: hsl(var(--cp-primary-hover)); opacity: 1; }
.docs-quickstart pre { background: hsl(var(--cp-shell)); border: 1px solid hsl(var(--cp-border)); }

.docs-action > span[aria-hidden='true'] { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex-shrink: 0; color: inherit; }

.docs-brand .cp-brand-mark-tile { fill: hsl(var(--cp-logo-background)); }
.docs-brand .cp-brand-mark-symbol { fill: hsl(var(--cp-logo-foreground)); }