/* Hallmark tokens for CoolCode.AI design audition variants. */
:root, .cc-style-option {
  --font-display: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --color-ink: oklch(94% 0.018 160);
  --color-ink-strong: oklch(99% 0.01 160);
  --color-muted: oklch(70% 0.026 164);
  --color-paper: oklch(17% 0.026 160);
  --color-paper-soft: oklch(20% 0.028 160);
  --color-panel: oklch(24% 0.032 160);
  --color-panel-raised: oklch(28% 0.036 160);
  --color-header: oklch(17% 0.026 160 / 94%);
  --color-accent: oklch(67% 0.145 164);
  --color-accent-strong: oklch(59% 0.14 164);
  --color-accent-ink: oklch(16% 0.026 160);
  --color-warm: oklch(74% 0.14 78);
  --color-rule: oklch(37% 0.038 160);
  --color-focus: oklch(82% 0.13 164);
  --color-shadow: oklch(6% 0.018 160);
  --color-favorite: oklch(78% 0.16 82);
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.8rem;
  --text-display-s: 2.4rem;
  --text-display: 3.7rem;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
  --rule-thin: 1px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --shadow-soft: 0 1px 3px oklch(6% 0.018 160 / 35%), 0 10px 30px oklch(6% 0.018 160 / 22%);
  --theme-hero-align: center;
  --theme-section-align: center;
  --theme-header-height: 60px;
  --theme-gap: 1.25rem;
  --theme-card-border-width: 1px;
  --theme-card-border-style: solid;
  --theme-card-top-rule: 0px;
  --theme-card-transform: translateY(-3px);
  --theme-letter-spacing: 0;
  --theme-title-transform: none;
  --theme-grid-min: 300px;
}

[data-theme="light"] {
  --color-ink: oklch(24% 0.027 160);
  --color-ink-strong: oklch(16% 0.03 160);
  --color-muted: oklch(49% 0.03 160);
  --color-paper: oklch(96% 0.018 115);
  --color-paper-soft: oklch(92% 0.018 115);
  --color-panel: oklch(99% 0.01 115);
  --color-panel-raised: oklch(97% 0.014 115);
  --color-header: oklch(96% 0.018 115 / 94%);
  --color-rule: oklch(82% 0.023 125);
  --color-shadow: oklch(22% 0.025 160);
  --shadow-soft: 0 1px 3px oklch(22% 0.025 160 / 7%), 0 12px 34px oklch(22% 0.025 160 / 8%);
}

[data-design="specimen"] {
  --design-id: 'HM-SPECIMEN-01';
  --color-paper: oklch(96% 0.016 78);
  --color-panel: oklch(99% 0.008 78);
  --color-header: oklch(96% 0.016 78 / 94%);
  --color-ink: oklch(21% 0.028 65);
  --color-muted: oklch(50% 0.026 65);
  --color-rule: oklch(82% 0.025 72);
  --color-accent: oklch(55% 0.11 24);
  --color-accent-strong: oklch(46% 0.1 24);
  --color-accent-ink: oklch(99% 0.006 78);
  --color-warm: oklch(70% 0.12 54);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-top-rule: 2px;
}

[data-design="atelier"] {
  --design-id: 'HM-ATELIER-02';
  --color-paper: oklch(94% 0.018 90);
  --color-panel: oklch(98% 0.012 90);
  --color-header: oklch(94% 0.018 90 / 94%);
  --color-ink: oklch(24% 0.03 70);
  --color-muted: oklch(52% 0.028 72);
  --color-rule: oklch(80% 0.03 82);
  --color-accent: oklch(61% 0.12 145);
  --color-accent-strong: oklch(52% 0.12 145);
  --color-accent-ink: oklch(98% 0.01 90);
  --color-warm: oklch(72% 0.12 55);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-gap: 1.75rem;
  --radius-md: 10px;
  --radius-lg: 16px;
}

[data-design="brutal"] {
  --design-id: 'HM-BRUTAL-03';
  --color-paper: oklch(93% 0.01 92);
  --color-panel: oklch(97% 0.006 92);
  --color-header: oklch(93% 0.01 92 / 98%);
  --color-ink: oklch(12% 0.02 250);
  --color-muted: oklch(38% 0.03 250);
  --color-rule: oklch(12% 0.02 250);
  --color-accent: oklch(57% 0.22 28);
  --color-accent-strong: oklch(47% 0.2 28);
  --color-accent-ink: oklch(99% 0.006 90);
  --color-warm: oklch(78% 0.18 82);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-width: 2px;
  --theme-card-top-rule: 0px;
  --theme-card-transform: none;
  --theme-title-transform: uppercase;
  --theme-letter-spacing: .02em;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --shadow-soft: 6px 6px 0 var(--color-rule);
}

[data-design="salon"] {
  --design-id: 'HM-SALON-04';
  --color-paper: oklch(95% 0.02 42);
  --color-panel: oklch(99% 0.01 42);
  --color-header: oklch(95% 0.02 42 / 94%);
  --color-ink: oklch(22% 0.035 28);
  --color-muted: oklch(50% 0.035 32);
  --color-rule: oklch(80% 0.035 42);
  --color-accent: oklch(55% 0.13 358);
  --color-accent-strong: oklch(47% 0.12 358);
  --color-accent-ink: oklch(99% 0.006 42);
  --color-warm: oklch(72% 0.13 48);
  --theme-gap: 1.6rem;
  --radius-md: 12px;
  --radius-lg: 18px;
}

[data-design="newsprint"] {
  --design-id: 'HM-NEWSPRINT-05';
  --color-paper: oklch(92% 0.012 82);
  --color-panel: oklch(96% 0.008 82);
  --color-header: oklch(92% 0.012 82 / 98%);
  --color-ink: oklch(18% 0.018 82);
  --color-muted: oklch(44% 0.018 82);
  --color-rule: oklch(63% 0.018 82);
  --color-accent: oklch(45% 0.11 226);
  --color-accent-strong: oklch(36% 0.1 226);
  --color-accent-ink: oklch(98% 0.006 82);
  --color-warm: oklch(66% 0.12 45);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-width: 1.5px;
  --theme-card-transform: none;
  --theme-gap: .85rem;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --shadow-soft: 0 1px 0 var(--color-rule);
}

[data-design="linen"] {
  --design-id: 'HM-LINEN-06';
  --color-paper: oklch(96% 0.018 105);
  --color-panel: oklch(99% 0.01 105);
  --color-header: oklch(96% 0.018 105 / 92%);
  --color-ink: oklch(24% 0.024 115);
  --color-muted: oklch(52% 0.024 115);
  --color-rule: oklch(82% 0.025 105);
  --color-accent: oklch(54% 0.11 165);
  --color-accent-strong: oklch(46% 0.1 165);
  --color-accent-ink: oklch(99% 0.006 105);
  --color-warm: oklch(72% 0.1 68);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-gap: 2rem;
  --theme-card-border-width: 0px;
  --shadow-soft: none;
}

[data-design="studio"] {
  --design-id: 'HM-STUDIO-07';
  --color-accent: oklch(67% 0.145 164);
  --color-accent-strong: oklch(59% 0.14 164);
  --color-warm: oklch(74% 0.14 78);
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
}

[data-design="manifesto"] {
  --design-id: 'HM-MANIFESTO-08';
  --color-paper: oklch(16% 0.03 28);
  --color-panel: oklch(20% 0.035 28);
  --color-header: oklch(16% 0.03 28 / 96%);
  --color-ink: oklch(96% 0.012 35);
  --color-muted: oklch(72% 0.032 35);
  --color-rule: oklch(40% 0.06 28);
  --color-accent: oklch(62% 0.22 24);
  --color-accent-strong: oklch(55% 0.2 24);
  --color-accent-ink: oklch(99% 0.008 35);
  --color-warm: oklch(78% 0.18 78);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-width: 2px;
  --theme-card-top-rule: 4px;
  --theme-title-transform: uppercase;
  --theme-letter-spacing: .035em;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
}

[data-design="terminal"] {
  --design-id: 'HM-TERMINAL-09';
  --font-display: Consolas, 'Courier New', monospace;
  --font-body: Consolas, 'Courier New', monospace;
  --font-ui: Consolas, 'Courier New', monospace;
  --color-paper: oklch(12% 0.03 155);
  --color-panel: oklch(17% 0.035 155);
  --color-header: oklch(12% 0.03 155 / 96%);
  --color-ink: oklch(88% 0.08 145);
  --color-muted: oklch(66% 0.06 145);
  --color-rule: oklch(35% 0.08 145);
  --color-accent: oklch(75% 0.16 142);
  --color-accent-strong: oklch(66% 0.14 142);
  --color-accent-ink: oklch(12% 0.03 155);
  --color-warm: oklch(78% 0.12 82);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-style: dashed;
  --theme-card-transform: none;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --shadow-soft: none;
}

[data-design="midnight"] {
  --design-id: 'HM-MIDNIGHT-10';
  --color-paper: oklch(14% 0.04 260);
  --color-panel: oklch(19% 0.045 260);
  --color-header: oklch(14% 0.04 260 / 94%);
  --color-ink: oklch(94% 0.018 250);
  --color-muted: oklch(70% 0.035 250);
  --color-rule: oklch(35% 0.06 260);
  --color-accent: oklch(62% 0.16 222);
  --color-accent-strong: oklch(54% 0.16 225);
  --color-accent-ink: oklch(99% 0.006 250);
  --color-warm: oklch(74% 0.12 48);
  --theme-card-top-rule: 2px;
  --shadow-soft: 0 18px 50px oklch(4% 0.02 260 / 45%);
}

[data-design="almanac"] {
  --design-id: 'HM-ALMANAC-11';
  --color-paper: oklch(94% 0.02 88);
  --color-panel: oklch(98% 0.012 88);
  --color-header: oklch(94% 0.02 88 / 96%);
  --color-ink: oklch(23% 0.026 80);
  --color-muted: oklch(50% 0.026 80);
  --color-rule: oklch(74% 0.032 82);
  --color-accent: oklch(50% 0.12 135);
  --color-accent-strong: oklch(42% 0.11 135);
  --color-accent-ink: oklch(99% 0.006 88);
  --color-warm: oklch(68% 0.14 58);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-style: dashed;
  --theme-gap: 1rem;
  --radius-md: 5px;
  --radius-lg: 8px;
}

[data-design="garden"] {
  --design-id: 'HM-GARDEN-12';
  --color-paper: oklch(93% 0.035 130);
  --color-panel: oklch(98% 0.018 130);
  --color-header: oklch(93% 0.035 130 / 92%);
  --color-ink: oklch(22% 0.04 145);
  --color-muted: oklch(49% 0.038 145);
  --color-rule: oklch(78% 0.045 130);
  --color-accent: oklch(53% 0.14 150);
  --color-accent-strong: oklch(45% 0.13 150);
  --color-accent-ink: oklch(99% 0.006 130);
  --color-warm: oklch(72% 0.13 75);
  --theme-gap: 1.8rem;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
}

[data-design="quiet"] {
  --design-id: 'HM-QUIET-13';
  --color-paper: oklch(98% 0.004 250);
  --color-panel: oklch(100% 0 0);
  --color-header: oklch(98% 0.004 250 / 92%);
  --color-ink: oklch(20% 0.018 250);
  --color-muted: oklch(52% 0.018 250);
  --color-rule: oklch(86% 0.012 250);
  --color-accent: oklch(49% 0.12 245);
  --color-accent-strong: oklch(42% 0.11 245);
  --color-accent-ink: oklch(100% 0 0);
  --color-warm: oklch(70% 0.08 85);
  --theme-card-border-width: 1px;
  --theme-card-transform: translateY(-1px);
  --theme-gap: 1rem;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --shadow-soft: none;
}

[data-design="riso"] {
  --design-id: 'HM-RISO-14';
  --color-paper: oklch(91% 0.045 28);
  --color-panel: oklch(96% 0.03 28);
  --color-header: oklch(91% 0.045 28 / 96%);
  --color-ink: oklch(20% 0.04 290);
  --color-muted: oklch(45% 0.05 290);
  --color-rule: oklch(52% 0.09 290);
  --color-accent: oklch(62% 0.2 330);
  --color-accent-strong: oklch(54% 0.18 330);
  --color-accent-ink: oklch(99% 0.006 28);
  --color-warm: oklch(76% 0.18 75);
  --theme-card-border-width: 2px;
  --theme-card-border-style: dashed;
  --theme-title-transform: lowercase;
  --theme-gap: 1.4rem;
  --radius-md: 3px;
  --radius-lg: 6px;
  --shadow-soft: 4px 4px 0 color-mix(in srgb,var(--color-accent) 55%,var(--color-rule));
}

[data-design="sport"] {
  --design-id: 'HM-SPORT-15';
  --color-paper: oklch(17% 0.03 240);
  --color-panel: oklch(22% 0.035 240);
  --color-header: oklch(17% 0.03 240 / 96%);
  --color-ink: oklch(96% 0.01 240);
  --color-muted: oklch(72% 0.03 240);
  --color-rule: oklch(42% 0.08 240);
  --color-accent: oklch(72% 0.19 92);
  --color-accent-strong: oklch(63% 0.18 92);
  --color-accent-ink: oklch(15% 0.03 240);
  --color-warm: oklch(63% 0.2 28);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-title-transform: uppercase;
  --theme-letter-spacing: .04em;
  --theme-card-top-rule: 5px;
  --radius-md: 2px;
  --radius-lg: 4px;
}

[data-design="bloom"] {
  --design-id: 'HM-BLOOM-16';
  --color-paper: oklch(16% 0.045 300);
  --color-panel: oklch(21% 0.052 300);
  --color-header: oklch(16% 0.045 300 / 93%);
  --color-ink: oklch(96% 0.018 315);
  --color-muted: oklch(72% 0.04 315);
  --color-rule: oklch(39% 0.08 300);
  --color-accent: oklch(70% 0.16 330);
  --color-accent-strong: oklch(61% 0.15 330);
  --color-accent-ink: oklch(16% 0.045 300);
  --color-warm: oklch(75% 0.15 48);
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 34px;
  --shadow-soft: 0 18px 50px color-mix(in srgb,var(--color-accent) 20%,transparent);
}

[data-design="coral"] {
  --design-id: 'HM-CORAL-17';
  --color-paper: oklch(95% 0.026 36);
  --color-panel: oklch(99% 0.014 36);
  --color-header: oklch(95% 0.026 36 / 93%);
  --color-ink: oklch(22% 0.035 24);
  --color-muted: oklch(50% 0.034 24);
  --color-rule: oklch(80% 0.045 36);
  --color-accent: oklch(64% 0.16 24);
  --color-accent-strong: oklch(56% 0.15 24);
  --color-accent-ink: oklch(99% 0.006 36);
  --color-warm: oklch(74% 0.14 70);
  --radius-md: 12px;
  --radius-lg: 18px;
}

[data-design="violet"] {
  --design-id: 'HM-VIOLET-18';
  --color-paper: oklch(18% 0.045 285);
  --color-panel: oklch(23% 0.052 285);
  --color-header: oklch(18% 0.045 285 / 94%);
  --color-ink: oklch(96% 0.018 292);
  --color-muted: oklch(72% 0.04 292);
  --color-rule: oklch(40% 0.08 285);
  --color-accent: oklch(66% 0.17 292);
  --color-accent-strong: oklch(58% 0.16 292);
  --color-accent-ink: oklch(99% 0.006 292);
  --color-warm: oklch(73% 0.14 62);
  --theme-card-top-rule: 2px;
}

[data-design="aurora"] {
  --design-id: 'HM-AURORA-19';
  --color-paper: oklch(15% 0.04 210);
  --color-panel: oklch(20% 0.045 210);
  --color-header: oklch(15% 0.04 210 / 92%);
  --color-ink: oklch(96% 0.015 190);
  --color-muted: oklch(72% 0.035 190);
  --color-rule: oklch(38% 0.07 210);
  --color-accent: oklch(73% 0.16 178);
  --color-accent-strong: oklch(64% 0.15 178);
  --color-accent-ink: oklch(14% 0.04 210);
  --color-warm: oklch(76% 0.15 315);
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-soft: 0 18px 52px color-mix(in srgb,var(--color-accent) 17%,transparent);
}

[data-design="halo"] {
  --design-id: 'HM-HALO-20';
  --color-paper: oklch(97% 0.014 92);
  --color-panel: oklch(100% 0 0);
  --color-header: oklch(97% 0.014 92 / 92%);
  --color-ink: oklch(22% 0.024 88);
  --color-muted: oklch(52% 0.024 88);
  --color-rule: oklch(84% 0.026 92);
  --color-accent: oklch(73% 0.18 72);
  --color-accent-strong: oklch(64% 0.17 70);
  --color-accent-ink: oklch(20% 0.025 88);
  --color-warm: oklch(70% 0.13 160);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --theme-card-border-width: 0px;
}

[data-design="plume"] {
  --design-id: 'HM-PLUME-21';
  --color-paper: oklch(95% 0.018 300);
  --color-panel: oklch(99% 0.01 300);
  --color-header: oklch(95% 0.018 300 / 94%);
  --color-ink: oklch(23% 0.035 290);
  --color-muted: oklch(52% 0.034 290);
  --color-rule: oklch(80% 0.035 300);
  --color-accent: oklch(60% 0.18 296);
  --color-accent-strong: oklch(52% 0.17 296);
  --color-accent-ink: oklch(99% 0.006 300);
  --color-warm: oklch(73% 0.13 160);
  --radius-sm: 16px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --theme-gap: 1.55rem;
}

[data-design="editorial"] {
  --design-id: 'HM-EDITORIAL-22';
  --color-paper: oklch(97% 0.009 72);
  --color-panel: oklch(100% 0 0);
  --color-header: oklch(97% 0.009 72 / 96%);
  --color-ink: oklch(18% 0.018 72);
  --color-muted: oklch(44% 0.02 72);
  --color-rule: oklch(76% 0.02 72);
  --color-accent: oklch(49% 0.12 18);
  --color-accent-strong: oklch(41% 0.11 18);
  --color-accent-ink: oklch(99% 0.006 72);
  --color-warm: oklch(68% 0.12 58);
  --theme-hero-align: left;
  --theme-section-align: left;
  --theme-card-border-width: 1px;
  --theme-card-transform: none;
  --theme-gap: 1rem;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
}

[data-theme="light"][data-design="manifesto"] {
  --color-paper: oklch(95% 0.018 38);
  --color-paper-soft: oklch(90% 0.024 38);
  --color-panel: oklch(99% 0.01 38);
  --color-panel-raised: oklch(96% 0.016 38);
  --color-header: oklch(95% 0.018 38 / 96%);
  --color-ink: oklch(18% 0.035 24);
  --color-ink-strong: oklch(12% 0.04 24);
  --color-muted: oklch(43% 0.04 24);
  --color-rule: oklch(66% 0.07 28);
  --color-accent: oklch(56% 0.22 24);
  --color-accent-strong: oklch(47% 0.2 24);
  --color-accent-ink: oklch(99% 0.008 38);
  --color-shadow: oklch(28% 0.05 24);
  --shadow-soft: 8px 8px 0 var(--color-rule);
}

[data-theme="light"][data-design="terminal"] {
  --color-paper: oklch(96% 0.014 145);
  --color-paper-soft: oklch(91% 0.02 145);
  --color-panel: oklch(99% 0.008 145);
  --color-panel-raised: oklch(94% 0.018 145);
  --color-header: oklch(96% 0.014 145 / 96%);
  --color-ink: oklch(20% 0.055 155);
  --color-ink-strong: oklch(12% 0.06 155);
  --color-muted: oklch(42% 0.05 155);
  --color-rule: oklch(66% 0.06 150);
  --color-accent: oklch(45% 0.16 145);
  --color-accent-strong: oklch(36% 0.14 145);
  --color-accent-ink: oklch(98% 0.01 145);
  --color-shadow: oklch(26% 0.05 155);
  --shadow-soft: none;
}

[data-theme="light"][data-design="sport"] {
  --color-paper: oklch(96% 0.012 245);
  --color-paper-soft: oklch(91% 0.02 245);
  --color-panel: oklch(99% 0.008 245);
  --color-panel-raised: oklch(95% 0.014 245);
  --color-header: oklch(96% 0.012 245 / 96%);
  --color-ink: oklch(18% 0.035 240);
  --color-ink-strong: oklch(12% 0.04 240);
  --color-muted: oklch(43% 0.035 240);
  --color-rule: oklch(70% 0.06 240);
  --color-accent: oklch(60% 0.2 92);
  --color-accent-strong: oklch(51% 0.18 92);
  --color-accent-ink: oklch(14% 0.035 240);
  --color-warm: oklch(59% 0.2 28);
  --color-shadow: oklch(26% 0.04 240);
  --shadow-soft: 0 1px 0 var(--color-rule), 0 18px 38px oklch(26% 0.04 240 / 12%);
}

/* Visitor presets. Keep colors, material and geometry together in either mode.
   The published design is deliberately outside this scope. */
:is(html,.cc-style-option)[data-design] {
  color-scheme: light;
  --design-hue: 160;
  --design-accent-hue: var(--design-hue);
  --design-dark-lightness: 18%;
  --design-dark-chroma: .018;
  --design-material: none;
  --design-material-size: auto;
  --design-card-radius: var(--radius-lg);
  --design-heading-weight: 700;
  --design-heading-spacing: -.035em;
  --design-brand-ink: #102c45;
  --design-brand-accent: #00636b;
  --design-brand-filter: url(#brand-option3-light);
  --design-link: oklch(43% .12 var(--design-accent-hue));
  --color-ink-strong: var(--color-ink);
  --color-paper-soft: color-mix(in srgb, var(--color-paper) 92%, var(--color-ink));
  --color-panel-raised: color-mix(in srgb, var(--color-panel) 95%, var(--color-ink));
  --color-focus: var(--design-link);
  --design-texture-ink: color-mix(in srgb, var(--color-ink) 6%, transparent);
}

/* Each dark counterpart retains its own hue, surface depth and accent. */
:is(html,.cc-style-option)[data-design][data-theme="dark"] {
  --color-paper: oklch(var(--design-dark-lightness) var(--design-dark-chroma) var(--design-hue));
  --color-panel: oklch(calc(var(--design-dark-lightness) + 6%) var(--design-dark-chroma) var(--design-hue));
  --color-header: oklch(var(--design-dark-lightness) var(--design-dark-chroma) var(--design-hue) / 97%);
  --color-ink: oklch(95% .012 var(--design-hue));
  --color-muted: oklch(77% .025 var(--design-hue));
  --color-rule: oklch(40% .035 var(--design-hue));
}

/* These nocturnal presets have dark surfaces even with the Light preference.
   Their foreground, artwork filter and native controls must follow the surface. */
:is(html,.cc-style-option)[data-design][data-theme="dark"],
:is(html,.cc-style-option):is([data-design="midnight"], [data-design="bloom"], [data-design="violet"], [data-design="aurora"], [data-design="obsidian"]) {
  color-scheme: dark;
  --design-brand-ink: #f4f7fb;
  --design-brand-accent: #00d9df;
  --design-brand-filter: url(#brand-option3-dark);
  --design-link: oklch(82% .10 var(--design-accent-hue));
  --color-accent: oklch(76% .12 var(--design-accent-hue));
  --color-accent-strong: oklch(84% .09 var(--design-accent-hue));
  --color-accent-ink: oklch(14% .018 var(--design-hue));
}

/* Editorial and tactile families. Fonts use installed fallbacks; no new font requests. */
:is(html,.cc-style-option)[data-design="specimen"] {
  --design-hue: 65; --design-accent-hue: 24;
  --font-display: Georgia, 'Times New Roman', serif;
  --design-heading-weight: 400;
  --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px;
  --shadow-soft: none;
}
:is(html,.cc-style-option)[data-design="atelier"] {
  --design-hue: 82; --design-accent-hue: 145; --design-dark-lightness: 22%;
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --design-heading-weight: 400;
  --design-card-radius: 28px 4px 28px 4px;
  --design-material: repeating-linear-gradient(0deg, var(--design-texture-ink) 0 1px, transparent 1px 5px);
}
:is(html,.cc-style-option)[data-theme="light"]:is([data-design="atelier"], [data-design="coral"], [data-design="plume"], [data-design="riso"]) {
  --color-accent: oklch(49% .13 var(--design-accent-hue));
  --color-accent-strong: oklch(41% .11 var(--design-accent-hue));
  --color-accent-ink: #fff;
}
:is(html,.cc-style-option)[data-design="brutal"] {
  --design-hue: 250; --design-accent-hue: 28; --design-dark-chroma: .008;
  --font-display: 'Arial Black', Arial, sans-serif;
  --design-heading-spacing: -.05em;
  --shadow-soft: 6px 6px 0 var(--color-rule);
}
:is(html,.cc-style-option)[data-design="salon"] {
  --design-hue: 28; --design-accent-hue: 358; --design-dark-lightness: 22%;
  --font-display: Georgia, 'Times New Roman', serif;
  --design-heading-weight: 400;
  --radius-md: 18px; --radius-lg: 32px; --radius-xl: 40px;
  --design-material: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 65%);
  --design-material-size: 100% 1000px;
}
:is(html,.cc-style-option)[data-design="newsprint"] {
  --design-hue: 82; --design-accent-hue: 226; --design-dark-chroma: .008;
  --font-display: 'Times New Roman', Times, serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --theme-card-border-style: double; --theme-card-border-width: 3px;
  --design-material: radial-gradient(var(--design-texture-ink) .7px, transparent .7px);
  --design-material-size: 4px 4px;
}
:is(html,.cc-style-option)[data-design="linen"] {
  --design-hue: 105; --design-accent-hue: 165; --design-dark-lightness: 24%;
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --design-heading-weight: 400;
  --radius-md: 3px; --radius-lg: 3px;
  --design-material: repeating-linear-gradient(0deg, var(--design-texture-ink) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, var(--design-texture-ink) 0 1px, transparent 1px 4px);
}
:is(html,.cc-style-option)[data-design="studio"] {
  --design-hue: 160; --design-accent-hue: 164;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius-md: 8px; --radius-lg: 16px;
}
:is(html,.cc-style-option)[data-design="manifesto"] {
  --design-hue: 28; --design-accent-hue: 24; --design-dark-chroma: .035;
  --font-display: Impact, 'Arial Narrow', sans-serif;
  --design-heading-weight: 400; --design-heading-spacing: .015em;
  --shadow-soft: 8px 8px 0 var(--color-rule);
}
:is(html,.cc-style-option)[data-design="terminal"] {
  --design-hue: 155; --design-accent-hue: 145; --design-dark-lightness: 12%; --design-dark-chroma: .03;
  --design-material: repeating-linear-gradient(0deg, var(--design-texture-ink) 0 1px, transparent 1px 6px);
  --design-heading-spacing: -.045em;
}
:is(html,.cc-style-option)[data-design="midnight"] {
  --design-hue: 260; --design-accent-hue: 222; --design-dark-lightness: 14%; --design-dark-chroma: .04;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px;
  --theme-card-top-rule: 3px;
  --shadow-soft: 0 20px 48px #0005;
}
:is(html,.cc-style-option)[data-design="almanac"] {
  --design-hue: 88; --design-accent-hue: 135; --design-dark-lightness: 21%;
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --font-ui: Consolas, 'Courier New', monospace;
  --design-heading-weight: 400;
  --design-material: linear-gradient(var(--design-texture-ink) 1px, transparent 1px);
  --design-material-size: 100% 32px;
}
:is(html,.cc-style-option)[data-design="garden"] {
  --design-hue: 145; --design-accent-hue: 150; --design-dark-chroma: .04;
  --font-display: 'Trebuchet MS', sans-serif;
  --design-card-radius: 30px 8px 30px 8px;
  --design-material: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 60%);
  --design-material-size: 100% 900px;
}
:is(html,.cc-style-option)[data-design="quiet"] {
  --design-hue: 250; --design-accent-hue: 245; --design-dark-lightness: 20%; --design-dark-chroma: .005;
  --font-display: system-ui, sans-serif;
  --design-heading-weight: 400; --design-heading-spacing: -.05em;
  --theme-card-border-width: 0px; --theme-card-top-rule: 1px;
  --radius-md: 2px; --radius-lg: 0; --radius-xl: 0;
}
:is(html,.cc-style-option)[data-design="riso"] {
  --design-hue: 290; --design-accent-hue: 330; --design-dark-chroma: .035;
  --font-display: 'Courier New', monospace;
  --design-material: radial-gradient(var(--design-texture-ink) 1px, transparent 1px);
  --design-material-size: 5px 5px;
}
:is(html,.cc-style-option)[data-design="sport"] {
  --design-hue: 240; --design-accent-hue: 92; --design-dark-lightness: 17%; --design-dark-chroma: .03;
  --font-display: Impact, 'Arial Narrow', sans-serif;
  --design-heading-weight: 400; --design-heading-spacing: .025em;
  --design-card-radius: 2px 20px 2px 2px;
}
:is(html,.cc-style-option)[data-design="bloom"] {
  --design-hue: 300; --design-accent-hue: 330; --design-dark-lightness: 16%; --design-dark-chroma: .045;
  --font-display: Georgia, 'Times New Roman', serif;
  --design-heading-weight: 400;
  --radius-md: 18px; --radius-lg: 32px; --radius-xl: 44px;
  --design-material: radial-gradient(ellipse at 10% 20%, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 55%), radial-gradient(ellipse at 90% 80%, color-mix(in srgb, var(--color-warm) 8%, transparent), transparent 55%);
  --design-material-size: 100% 1100px;
}
:is(html,.cc-style-option)[data-design="coral"] {
  --design-hue: 36; --design-accent-hue: 24; --design-dark-lightness: 23%; --design-dark-chroma: .04;
  --font-display: 'Trebuchet MS', sans-serif;
  --design-card-radius: 20px 20px 4px 20px;
}
:is(html,.cc-style-option)[data-design="violet"] {
  --design-hue: 285; --design-accent-hue: 292; --design-dark-lightness: 18%; --design-dark-chroma: .045;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --theme-title-transform: uppercase; --design-heading-spacing: .015em;
  --radius-sm: 0; --radius-md: 2px; --radius-lg: 2px; --radius-xl: 2px;
  --design-material: repeating-linear-gradient(135deg, var(--design-texture-ink) 0 1px, transparent 1px 14px);
  --shadow-soft: 5px 5px 0 color-mix(in srgb, var(--color-accent) 25%, transparent);
}
:is(html,.cc-style-option)[data-design="aurora"] {
  --design-hue: 210; --design-accent-hue: 178; --design-dark-lightness: 15%; --design-dark-chroma: .04;
  --font-display: 'Trebuchet MS', sans-serif;
  --radius-md: 14px; --radius-lg: 24px; --radius-xl: 32px;
  --design-material: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 60%), radial-gradient(ellipse at 100% 50%, color-mix(in srgb, var(--color-warm) 12%, transparent), transparent 60%);
  --design-material-size: 100% 1100px;
}
:is(html,.cc-style-option)[data-design="halo"] {
  --design-hue: 72; --design-accent-hue: 72; --design-dark-lightness: 23%;
  --font-display: 'Trebuchet MS', sans-serif;
  --radius-md: 16px; --radius-lg: 28px;
  --design-material: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 55%);
  --design-material-size: 100% 900px;
}
:is(html,.cc-style-option)[data-design="plume"] {
  --design-hue: 300; --design-accent-hue: 296; --design-dark-lightness: 24%;
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --design-heading-weight: 400;
  --design-card-radius: 36px 36px 6px 6px;
}
:is(html,.cc-style-option)[data-design="editorial"] {
  --design-hue: 72; --design-accent-hue: 18; --design-dark-lightness: 16%; --design-dark-chroma: .006;
  --font-display: Georgia, 'Times New Roman', serif;
  --design-heading-weight: 400;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --theme-card-top-rule: 3px; --shadow-soft: none;
}

/* Four new compositions: technical grid, art gallery, warm paper, dark metal. */
:is(html,.cc-style-option):is([data-design="blueprint"], [data-design="gallery"], [data-design="parchment"]) {
  --color-paper: oklch(97% .015 var(--design-hue));
  --color-panel: oklch(99% .008 var(--design-hue));
  --color-header: oklch(97% .015 var(--design-hue) / 97%);
  --color-ink: oklch(24% .025 var(--design-hue));
  --color-muted: oklch(45% .025 var(--design-hue));
  --color-rule: oklch(77% .03 var(--design-hue));
  --color-accent: oklch(47% .12 var(--design-accent-hue));
  --color-accent-strong: oklch(39% .10 var(--design-accent-hue));
  --color-accent-ink: #fff;
}
:is(html,.cc-style-option)[data-design="blueprint"] {
  --design-hue: 250; --design-accent-hue: 245; --design-dark-lightness: 22%; --design-dark-chroma: .05;
  --font-display: Consolas, 'Courier New', monospace;
  --font-ui: Consolas, 'Courier New', monospace;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --theme-card-border-style: dashed; --theme-hero-align: left; --theme-section-align: left;
  --design-material: linear-gradient(var(--design-texture-ink) 1px, transparent 1px), linear-gradient(90deg, var(--design-texture-ink) 1px, transparent 1px);
  --design-material-size: 32px 32px;
  --shadow-soft: 5px 5px 0 color-mix(in srgb, var(--color-accent) 18%, transparent);
}
:is(html,.cc-style-option)[data-design="gallery"] {
  --design-hue: 65; --design-accent-hue: 48; --design-dark-lightness: 14%; --design-dark-chroma: .004;
  --font-display: 'Times New Roman', Times, serif;
  --font-body: system-ui, sans-serif;
  --design-heading-weight: 400; --design-heading-spacing: -.045em;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --theme-card-border-width: 0px; --theme-card-top-rule: 1px;
  --theme-gap: 2rem; --shadow-soft: none;
}
:is(html,.cc-style-option)[data-design="parchment"] {
  --design-hue: 80; --design-accent-hue: 40; --design-dark-lightness: 25%; --design-dark-chroma: .03;
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: Georgia, 'Times New Roman', serif;
  --design-heading-weight: 400;
  --radius-sm: 2px; --radius-md: 3px; --radius-lg: 3px; --radius-xl: 3px;
  --theme-card-border-style: double; --theme-card-border-width: 3px;
  --theme-hero-align: left; --theme-section-align: left;
  --design-material: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887755' opacity='.12' filter='url(%23paper)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  --design-material-size: 180px 180px;
  --shadow-soft: 0 3px 0 var(--color-paper), 0 4px 0 var(--color-rule), 0 12px 24px #0001;
}
:is(html,.cc-style-option)[data-design="obsidian"] {
  --design-hue: 70; --design-accent-hue: 82; --design-dark-lightness: 13%; --design-dark-chroma: .008;
  --color-paper: oklch(13% .008 70); --color-panel: oklch(19% .008 70);
  --color-header: oklch(13% .008 70 / 97%); --color-ink: oklch(95% .012 70);
  --color-muted: oklch(77% .025 70); --color-rule: oklch(40% .035 70);
  --font-display: 'Palatino Linotype', Palatino, Georgia, serif;
  --design-heading-weight: 400; --design-heading-spacing: .01em;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-xl: 0;
  --theme-card-border-style: double; --theme-card-border-width: 3px;
  --theme-gap: 1.75rem; --shadow-soft: 0 16px 40px #0004;
}


/* Real light/dark pairs. These semantic surfaces override historical palettes. */
:is(html,.cc-style-option)[data-cc-appearance][data-design] {
 --color-paper:oklch(97% .012 var(--design-hue));
 --color-panel:oklch(99.5% .004 var(--design-hue));
 --color-header:oklch(97% .012 var(--design-hue) / 98%);
 --color-ink:oklch(23% .025 var(--design-hue));
 --color-ink-strong:var(--color-ink);
 --color-muted:oklch(44% .025 var(--design-hue));
 --color-rule:oklch(78% .025 var(--design-hue));
 --color-accent:oklch(46% .12 var(--design-accent-hue));
 --color-accent-strong:oklch(39% .11 var(--design-accent-hue));
 --color-accent-ink:#fff;
 --design-link:oklch(42% .11 var(--design-accent-hue));
 --design-brand-ink:#102c45;--design-brand-accent:#00636b;
 --design-brand-filter:url(#brand-option3-light);
 --color-focus:var(--design-link);--color-shadow:oklch(20% .02 var(--design-hue) / 12%);
 color-scheme:light;
}
:is(html,.cc-style-option)[data-cc-appearance][data-design][data-theme=dark] {
 --color-paper:oklch(var(--design-dark-lightness) var(--design-dark-chroma) var(--design-hue));
 --color-panel:oklch(calc(var(--design-dark-lightness) + 6%) var(--design-dark-chroma) var(--design-hue));
 --color-header:oklch(var(--design-dark-lightness) var(--design-dark-chroma) var(--design-hue) / 98%);
 --color-ink:oklch(95% .012 var(--design-hue));--color-muted:oklch(78% .025 var(--design-hue));
 --color-rule:oklch(43% .035 var(--design-hue));
 --color-accent:oklch(78% .11 var(--design-accent-hue));
 --color-accent-strong:oklch(85% .08 var(--design-accent-hue));
 --color-accent-ink:oklch(14% .018 var(--design-hue));
 --design-link:oklch(83% .09 var(--design-accent-hue));
 --design-brand-ink:#f4f7fb;--design-brand-accent:#00d9df;
 --design-brand-filter:url(#brand-option3-dark);--color-shadow:oklch(5% .02 var(--design-hue) / 28%);
 color-scheme:dark;
}
:is(html,.cc-style-option)[data-cc-appearance] {
 --cc-background:var(--color-paper);--cc-surface:var(--color-panel);--cc-text:var(--color-ink);--cc-muted:var(--color-muted);
 --cc-border:var(--color-rule);--cc-accent:var(--color-accent);--cc-on-accent:var(--color-accent-ink);
 --color-paper-raised:var(--color-panel);--color-paper-soft:color-mix(in srgb,var(--color-panel) 93%,var(--color-ink));
 --color-paper-active:color-mix(in srgb,var(--color-panel) 88%,var(--color-accent));
 --color-ink-soft:var(--color-ink);--color-rule-strong:color-mix(in srgb,var(--color-rule) 70%,var(--color-ink));
 --color-accent-soft:color-mix(in srgb,var(--color-panel) 88%,var(--color-accent));--color-empty-value:var(--color-muted);
 --color-panel-raised:var(--color-paper-soft);
}
html[data-cc-appearance] body {background-color:var(--cc-background);background-image:var(--design-material);background-size:var(--design-material-size);color:var(--cc-text);font-family:var(--font-body)}
html[data-cc-appearance] :is(h1,h2,h3){font-family:var(--font-display)}
.cc-appearance{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto;font-family:var(--font-ui)}
html[data-cc-appearance] .cc-style-select{font-family:var(--font-ui);font-size:.78rem;line-height:1.3;width:126px;min-width:110px;max-width:140px;height:34px;padding:5px 7px;background:var(--cc-surface);color:var(--cc-text);border:1px solid var(--cc-border);border-radius:var(--radius-md);cursor:pointer}
html[data-cc-appearance] .cc-mode-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;padding:0;border:1px solid var(--cc-border);border-radius:var(--radius-md);background:var(--cc-surface);color:var(--cc-text);font:20px/1 system-ui;cursor:pointer}
.cc-appearance :is(select,button):focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
.cc-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:600px){html[data-cc-appearance] .cc-style-select{width:110px}.cc-appearance{gap:.25rem}}
@media(prefers-reduced-motion:reduce){.cc-appearance *{transition:none!important}}

/* Text size changes rem typography without zooming the page or disabling browser zoom. */
html[data-cc-appearance][data-cc-text-size]{--cc-text-scale:1;font-size:calc(var(--cc-root-font-size,16px) * var(--cc-text-scale));}
html[data-cc-appearance][data-cc-text-size=small]{--cc-text-scale:.9;}
html[data-cc-appearance][data-cc-text-size=large]{--cc-text-scale:1.15;}
html[data-cc-appearance] .cc-text-size-select{font: .78rem/1.3 var(--font-ui);width:94px;min-height:34px;padding:5px 6px;background:var(--cc-surface);color:var(--cc-text);border:1px solid var(--cc-border);border-radius:var(--radius-md);cursor:pointer;}
html[data-cc-appearance] :is(.cc-style-select,.cc-mode-toggle){height:auto;min-height:34px;}
@media(max-width:600px){html[data-cc-appearance] .cc-text-size-select{width:82px;} .cc-appearance{max-width:100%;flex-wrap:wrap;}}

/* Five text scales; controls stay compact, while options preview their actual size. */
html[data-cc-appearance][data-cc-text-size=xlarge]{--cc-text-scale:1.3;}
html[data-cc-appearance][data-cc-text-size=huge]{--cc-text-scale:1.5;}
html[data-cc-appearance] .cc-appearance :is(.cc-style-select,.cc-text-size-select){font-size:13px;min-width:0;}
html[data-cc-appearance] .cc-text-size-select{width:110px;}
.cc-text-size-select option{font-family:var(--font-ui);font-size:16px;}
.cc-text-size-select option[value=small]{font-size:14.4px;}
.cc-text-size-select option[value=large]{font-size:18.4px;}
.cc-text-size-select option[value=xlarge]{font-size:20.8px;}
.cc-text-size-select option[value=huge]{font-size:24px;}
.cc-style-select .cc-style-option{font-family:var(--font-display);font-size:18px;font-weight:var(--design-heading-weight,600);background:var(--color-panel);background-image:var(--design-material);background-size:var(--design-material-size);color:var(--color-ink);border-color:var(--color-rule);}
html[data-cc-appearance] .cc-appearance select{white-space:nowrap;}

/* A shared HTML listbox gives desktop and touch browsers the same previews. */
html[data-cc-appearance] .cc-native-select,.cc-picker-list[hidden]{display:none!important;}
html[data-cc-appearance] .cc-appearance .cc-picker-trigger{appearance:none;display:inline-flex;align-items:center;justify-content:space-between;gap:6px;box-sizing:border-box;width:126px;min-width:0;max-width:100%;min-height:34px;margin:0;padding:6px 8px;border:1px solid var(--cc-border);border-radius:var(--radius-md);background:var(--cc-surface);color:var(--cc-text);font:400 13px/1.3 var(--font-ui);text-align:left;text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;}
html[data-cc-appearance] .cc-appearance .cc-picker-trigger[data-cc-picker=text-size]{width:110px;}
.cc-picker-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cc-picker-arrow{flex:0 0 auto;}
.cc-picker-list{position:fixed;z-index:2147483000;box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;padding:5px;margin:0;border:1px solid var(--cc-border);border-radius:var(--radius-md);background:var(--cc-surface);color:var(--cc-text);box-shadow:0 8px 30px #0004;font:400 16px/1.4 var(--font-ui);text-align:left;}
.cc-picker-list .cc-picker-option{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:44px;margin:2px 0;padding:8px 10px;border:1px solid transparent;border-radius:4px;cursor:pointer;white-space:normal;overflow-wrap:anywhere;}
.cc-picker-list .cc-style-option{font-family:var(--font-display);font-size:18px;font-weight:var(--design-heading-weight,600);background:var(--color-panel);background-image:var(--design-material);background-size:var(--design-material-size);color:var(--color-ink);border-radius:var(--radius-md);}
.cc-picker-list .cc-picker-option.is-active{outline:2px solid var(--color-accent);outline-offset:-3px;}
@media(hover:hover){.cc-picker-list .cc-picker-option:hover{outline:2px solid var(--color-accent);outline-offset:-3px;}}
.cc-picker-list .cc-picker-option[aria-selected=true]{border-color:var(--color-accent);}
.cc-picker-check{flex:0 0 16px;visibility:hidden;font:16px/1 system-ui;}
.cc-picker-option[aria-selected=true] .cc-picker-check{visibility:visible;}
.cc-picker-option[data-size=small]{font-size:14.4px;}
.cc-picker-option[data-size=normal]{font-size:16px;}
.cc-picker-option[data-size=large]{font-size:18.4px;}
.cc-picker-option[data-size=xlarge]{font-size:20.8px;}
.cc-picker-option[data-size=huge]{font-size:24px;}
@media(max-width:600px){html[data-cc-appearance] .cc-appearance .cc-picker-trigger[data-cc-picker=style]{width:110px;}}
@media(pointer:coarse){html[data-cc-appearance] .cc-appearance :is(.cc-picker-trigger,.cc-mode-toggle){min-height:44px;}.cc-picker-list .cc-picker-option{min-height:48px;}}
@media(forced-colors:active){.cc-picker-list .cc-picker-option{forced-color-adjust:auto;}.cc-picker-list .cc-picker-option.is-active{outline-color:Highlight;}}