/* Generated by tools/gen-palettes.py from themes/*.css. Do not edit. */
.pal {
  display: grid;
  gap: var(--pf-space-4);
  align-content: start;
  padding: var(--pf-space-5);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-lg);
  background: var(--pf-bg);
  color: var(--pf-text);
}
.pal > * { min-inline-size: 0; }
.pal__head { display: grid; gap: var(--pf-space-1); }
.pal__title { font-family: var(--pf-font-display); font-size: var(--pf-text-2xl); }

html[data-pf-theme="dark"] [data-palette="default"] {
  --pf-bg: #181818;
  --pf-bg-deep: #111111;
  --pf-surface: rgba(255, 255, 255, 0.045);
  --pf-surface-raised: rgba(255, 255, 255, 0.08);
  --pf-text: #f2f3f5;
  --pf-text-muted: #d3e2ec;
  --pf-accent: #32b6af;
  --pf-accent-2: #b396e8;
  --pf-border: rgba(232, 240, 246, 0.55);
  --pf-border-strong: var(--pf-hue-1);
  --pf-focus: var(--pf-hue-1);
  --pf-ink: #0d0f11;
  --pf-hue-1-wash: rgba(50, 182, 175, 0.12);
  --pf-hue-2-wash: rgba(179, 150, 232, 0.12);
  --pf-font-display: "Bricolage Grotesque", "Bricolage Fallback", "Trebuchet MS", system-ui, sans-serif;
  --pf-radius: 12px;
  --pf-radius-lg: 22px;
  --pf-radius-sm: 6px;
  --pf-cut: 18px;
  --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 1 71 61H1Z' fill='none' stroke='%2332b6af' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E");
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}
@media (prefers-color-scheme: dark) {
  html:not([data-pf-theme]) [data-palette="default"] {
    --pf-bg: #181818;
    --pf-bg-deep: #111111;
    --pf-surface: rgba(255, 255, 255, 0.045);
    --pf-surface-raised: rgba(255, 255, 255, 0.08);
    --pf-text: #f2f3f5;
    --pf-text-muted: #d3e2ec;
    --pf-accent: #32b6af;
    --pf-accent-2: #b396e8;
    --pf-border: rgba(232, 240, 246, 0.55);
    --pf-border-strong: var(--pf-hue-1);
    --pf-focus: var(--pf-hue-1);
    --pf-ink: #0d0f11;
    --pf-hue-1-wash: rgba(50, 182, 175, 0.12);
    --pf-hue-2-wash: rgba(179, 150, 232, 0.12);
    --pf-font-display: "Bricolage Grotesque", "Bricolage Fallback", "Trebuchet MS", system-ui, sans-serif;
    --pf-radius: 12px;
    --pf-radius-lg: 22px;
    --pf-radius-sm: 6px;
    --pf-cut: 18px;
    --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 1 71 61H1Z' fill='none' stroke='%2332b6af' stroke-opacity='.16' stroke-width='1.4'/%3E%3C/svg%3E");
    --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
    --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
    --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
    --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
    --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
    --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
    --pf-ring: 0 0 0 3px var(--pf-accent-line);
  }
}
html[data-pf-theme="light"] [data-palette="default"] {
  --pf-surface: rgba(13, 36, 54, 0.045);
  --pf-surface-raised: rgba(13, 36, 54, 0.085);
  --pf-border: rgba(13, 36, 54, 0.16);
  --pf-border-strong: color-mix(in srgb, var(--pf-accent) 45%, transparent);
  --pf-hue-1-wash: rgba(15, 93, 88, 0.10);
  --pf-hue-2-wash: rgba(85, 48, 156, 0.10);
  --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 1 71 61H1Z' fill='none' stroke='%2332b6af' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  html:not([data-pf-theme]) [data-palette="default"] {
    --pf-surface: rgba(13, 36, 54, 0.045);
    --pf-surface-raised: rgba(13, 36, 54, 0.085);
    --pf-border: rgba(13, 36, 54, 0.16);
    --pf-border-strong: color-mix(in srgb, var(--pf-accent) 45%, transparent);
    --pf-hue-1-wash: rgba(15, 93, 88, 0.10);
    --pf-hue-2-wash: rgba(85, 48, 156, 0.10);
    --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 1 71 61H1Z' fill='none' stroke='%2332b6af' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E");
  }
}

[data-palette="dusk"] {
  --pf-bg: #171310;
  --pf-bg-deep: #100c09;
  --pf-surface: rgba(245, 181, 68, .06);
  --pf-surface-raised: rgba(245, 181, 68, .12);
  --pf-text: #fbf4ec;
  --pf-text-muted: #bda993;
  --pf-accent: #f5b544;
  --pf-accent-2: #f07e79;
  --pf-border: rgba(189, 169, 147, .22);
  --pf-border-strong: rgba(245, 181, 68, .45);
  --pf-focus: #f5b544;
  --pf-base-950: #1a1208;
  --pf-font-display: Georgia, "Times New Roman", serif;
  --pf-radius-lg: 3px;
  --pf-radius: 3px;
  --pf-cut: 0px;
  --pf-mesh: none;
  --pf-ink: var(--pf-base-950);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="electric"] {
  --pf-bg: #07070f;
  --pf-bg-deep: #000005;
  --pf-surface: rgba(204, 255, 0, .06);
  --pf-surface-raised: rgba(204, 255, 0, .12);
  --pf-text: #f2f5ff;
  --pf-text-muted: #9aa0b5;
  --pf-accent: #ccff00;
  --pf-accent-2: #34d3ff;
  --pf-border: rgba(154, 160, 181, .26);
  --pf-border-strong: rgba(204, 255, 0, .5);
  --pf-focus: #ccff00;
  --pf-base-950: #0a0d00;
  --pf-radius-lg: 2px;
  --pf-radius: 2px;
  --pf-cut: 30px;
  --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='62' viewBox='0 0 72 62'%3E%3Cpath d='M36 1 71 61H1Z' fill='none' stroke='%23ccff00' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E");
  --pf-ink: var(--pf-base-950);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="cream"] {
  color-scheme: light;
  --pf-bg: #f7f1e6;
  --pf-bg-deep: #efe6d6;
  --pf-surface: rgba(58, 45, 32, .05);
  --pf-surface-raised: rgba(58, 45, 32, .09);
  --pf-text: #241b12;
  --pf-text-muted: #6b5a48;
  --pf-accent: #46580e;
  --pf-accent-2: #8e3509;
  --pf-border: rgba(36, 27, 18, .16);
  --pf-border-strong: rgba(70, 88, 14, .45);
  --pf-focus: #46580e;
  --pf-base-950: #f7f1e6;
  --pf-font-display: Georgia, "Times New Roman", serif;
  --pf-radius-lg: 2px;
  --pf-radius: 2px;
  --pf-cut: 0px;
  --pf-mesh: none;
  --pf-ink: var(--pf-base-950);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}
[data-palette="cream"] .pf-input,
[data-palette="cream"] .pf-select,
[data-palette="cream"] .pf-textarea {
  background: #fffdf8;
}
[data-palette="cream"] .pf-table thead th {
  background: #3a3327;
  color: #f7f1e6;
}
[data-palette="cream"] .pf-hero__title,
[data-palette="cream"] .pf-pagehead__title {
  letter-spacing: -.01em;
}

[data-palette="slate"] {
  --pf-bg: #0d1117;
  --pf-bg-deep: #010409;
  --pf-surface: rgba(255, 255, 255, .04);
  --pf-surface-raised: rgba(255, 255, 255, .08);
  --pf-text: #e6edf3;
  --pf-text-muted: #8b949e;
  --pf-accent: #7dd3fc;
  --pf-accent-2: #c4b5fd;
  --pf-border: rgba(139, 148, 158, .28);
  --pf-border-strong: rgba(125, 211, 252, .4);
  --pf-focus: #7dd3fc;
  --pf-base-950: #04121f;
  --pf-font-display: "IBM Plex Mono", ui-monospace, monospace;
  --pf-radius-lg: 6px;
  --pf-radius: 4px;
  --pf-cut: 0px;
  --pf-mesh: none;
  --pf-ink: var(--pf-base-950);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}
[data-palette="slate"] .pf-hero__title,
[data-palette="slate"] .pf-pagehead__title {
  letter-spacing: -.04em;
}

[data-palette="paper"] {
  color-scheme: light;
  --pf-bg: #fbf7f0;
  --pf-bg-deep: #f3ece0;
  --pf-surface: rgba(43, 38, 32, 0.035);
  --pf-surface-raised: rgba(43, 38, 32, 0.07);
  --pf-text: #2b2620;
  --pf-text-muted: #5f574c;
  --pf-accent: #7a2e1e;
  --pf-accent-2: #2f5d50;
  --pf-border: rgba(43, 38, 32, 0.16);
  --pf-border-strong: rgba(122, 46, 30, 0.45);
  --pf-focus: #7a2e1e;
  --pf-ink: #fbf7f0;
  --pf-hue-1-wash: rgba(122, 46, 30, 0.07);
  --pf-hue-2-wash: rgba(47, 93, 80, 0.08);
  --pf-font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --pf-radius: 3px;
  --pf-radius-lg: 4px;
  --pf-radius-sm: 2px;
  --pf-cut: 0px;
  --pf-mesh: none;
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="mono"] {
  color-scheme: dark;
  --pf-bg: #0b0b0c;
  --pf-bg-deep: #050506;
  --pf-surface: rgba(232, 232, 230, 0.045);
  --pf-surface-raised: rgba(232, 232, 230, 0.09);
  --pf-text: #e8e8e6;
  --pf-text-muted: #9a9a94;
  --pf-accent: #c8f751;
  --pf-accent-2: #7fd4ff;
  --pf-border: rgba(232, 232, 230, 0.14);
  --pf-border-strong: rgba(200, 247, 81, 0.5);
  --pf-focus: #c8f751;
  --pf-ink: #0b0b0c;
  --pf-hue-1-wash: rgba(200, 247, 81, 0.1);
  --pf-hue-2-wash: rgba(127, 212, 255, 0.1);
  --pf-font-display: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pf-radius: 0px;
  --pf-radius-lg: 0px;
  --pf-radius-sm: 0px;
  --pf-cut: 0px;
  --pf-mesh: none;
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="ocean"] {
  color-scheme: dark;
  --pf-bg: #0e1a1f;
  --pf-bg-deep: #081116;
  --pf-surface: rgba(233, 241, 243, 0.045);
  --pf-surface-raised: rgba(233, 241, 243, 0.09);
  --pf-text: #e9f1f3;
  --pf-text-muted: #9ca5a9;
  --pf-accent: #1fb6b6;
  --pf-accent-2: #92a0eb;
  --pf-border: rgba(233, 241, 243, 0.16);
  --pf-border-strong: rgba(31, 182, 182, 0.5);
  --pf-focus: #1fb6b6;
  --pf-ink: #0b1418;
  --pf-hue-1-wash: rgba(31, 182, 182, 0.1);
  --pf-hue-2-wash: rgba(146, 160, 235, 0.1);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="ember"] {
  color-scheme: dark;
  --pf-bg: #1a1512;
  --pf-bg-deep: #120e0c;
  --pf-surface: rgba(245, 239, 233, 0.045);
  --pf-surface-raised: rgba(245, 239, 233, 0.09);
  --pf-text: #f5efe9;
  --pf-text-muted: #9aa4a7;
  --pf-accent: #d8953d;
  --pf-accent-2: #e8868f;
  --pf-border: rgba(245, 239, 233, 0.16);
  --pf-border-strong: rgba(216, 149, 61, 0.5);
  --pf-focus: #d8953d;
  --pf-ink: #161009;
  --pf-hue-1-wash: rgba(216, 149, 61, 0.1);
  --pf-hue-2-wash: rgba(232, 134, 143, 0.1);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="orchid"] {
  color-scheme: dark;
  --pf-bg: #16141c;
  --pf-bg-deep: #100e15;
  --pf-surface: rgba(241, 238, 247, 0.045);
  --pf-surface-raised: rgba(241, 238, 247, 0.09);
  --pf-text: #f1eef7;
  --pf-text-muted: #99a3a6;
  --pf-accent: #b093e5;
  --pf-accent-2: #2eb3ac;
  --pf-border: rgba(241, 238, 247, 0.16);
  --pf-border-strong: rgba(176, 147, 229, 0.5);
  --pf-focus: #b093e5;
  --pf-ink: #120f18;
  --pf-hue-1-wash: rgba(176, 147, 229, 0.1);
  --pf-hue-2-wash: rgba(46, 179, 172, 0.1);
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}

[data-palette="sudo"] {
  color-scheme: dark;
  --pf-bg: #000;
  --pf-bg-deep: #050505;
  --pf-surface: #0a0a0a;
  --pf-surface-raised: #141414;
  --pf-text: #ededed;
  --pf-text-muted: #a1a1a1;
  --pf-accent: #32b6af;
  --pf-accent-2: #b396e8;
  --pf-border: #1f1f1f;
  --pf-border-strong: #2e2e2e;
  --pf-focus: #32b6af;
  --pf-ink: #06110f;
  --pf-hue-1-wash: rgba(50, 182, 175, 0.14);
  --pf-hue-2-wash: rgba(179, 150, 232, 0.12);
  --pf-font-display: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pf-radius-lg: 16px;
  --pf-cut: 0px;
  --pf-mesh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M0 0h48v48' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
  --pf-accent-hover: color-mix(in oklab, var(--pf-accent) 82%, var(--pf-text));
  --pf-accent-wash: color-mix(in srgb, var(--pf-accent) 12%, transparent);
  --pf-accent-line: color-mix(in srgb, var(--pf-accent) 35%, transparent);
  --pf-accent-2-hover: color-mix(in oklab, var(--pf-accent-2) 82%, var(--pf-text));
  --pf-accent-2-wash: color-mix(in srgb, var(--pf-accent-2) 12%, transparent);
  --pf-accent-2-line: color-mix(in srgb, var(--pf-accent-2) 35%, transparent);
  --pf-ring: 0 0 0 3px var(--pf-accent-line);
}