/* The site's default palette. Artwork and video keep their own colors. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f7f9;
  --elevated: #eef1f5;
  --text: #202328;
  --muted: #59616d;
  --dim: #69717e;
  --line: #dde2e9;
  --blue: #285fc0;
}
body { background: var(--bg); color: var(--text); }
::selection { background: #d7e6ff; color: #163968; }
.header { background: #fffffff2; border-color: var(--line); }
.brand img, .footer img { filter: brightness(0); }
.hero-grid {
  background-image: radial-gradient(ellipse at 50% 5%, #6399ed12, transparent 63%), linear-gradient(#26456b07 1px, transparent 1px), linear-gradient(90deg, #26456b07 1px, transparent 1px);
}
.hero-badge { background: #f2f5fa; border-color: #dce3ed; color: #536071; }
.hero h1 em, .tool-hero-copy h1 em { color: var(--dim); }
.hero-description, .hero-benefits, .tool-tags { color: var(--muted); }
.hero-benefits span:first-letter { color: var(--blue); }
.primary { background: #24282e; color: #fff; box-shadow: 0 4px 12px #18233314; }
.primary:hover, .tool-page .primary:hover { background: #3c4654; color: #fff; box-shadow: 0 7px 20px #18233321; }
.secondary { background: #fff; color: #343c48; border-color: #cdd4df; }
.secondary:hover { background: #edf2f8; }
.hero-media, .tool-hero-art { background: #fff; border-color: #d7dee8; box-shadow: 0 20px 65px #213e6414; }
.media-bar, .media-bottom { background: #fafbfd; border-color: var(--line); color: #626c7a; }
.media-bar i { background: #c4cbd5; }
.media-bottom b { color: var(--blue); }
.video-caption, .video-toggle, .film-label { color: #fff; }
.tinted { background: var(--surface); border-color: #e9edf2; }
.carousel-shell { background: linear-gradient(145deg, #eef4fc, #f8f9fb 65%); border-color: #dbe2ec; }
.carousel-card { border-color: #cdd7e4; }
.carousel-card:hover, .carousel-card.is-active { border-color: var(--blue); }
.carousel-hint { color: var(--muted); }
.carousel-dots button::after { background: #8795a8; }
.format-card { background: #fff; border-color: var(--line); }
.format-card.selected { background: linear-gradient(145deg, #eef5ff, #fff 75%); border-color: #a6bedf; }
.format-title>span { color: #596e8b; }
.format-card dl, .principles article, .steps article { border-color: var(--line); }
.format-card dt { color: var(--muted); }
.format-card dd { color: #354153; }
.filter-tabs button { border-color: #d3dae5; color: #515e70; background: #fff; }
.filter-tabs button.active { background: #25364d; color: #fff; border-color: #25364d; }
.example-card, .related-card { background: #fff; border-color: var(--line); }
.example-body .eyebrow, .example-open, .text-link { color: var(--blue); }
.check-list { color: #4d596b; }
.chat-demo { background: radial-gradient(ellipse at 80% 100%, #dceaff80, transparent 70%), #f7f9fc; border-color: #d5dfec; }
.chat-label, .agent-bubble p { color: #52647c; }
.chat-label span { color: #486994; }
.user-bubble { background: #eaf0f9; border-color: #d4dfee; color: #384b65; }
.related-icon { color: #3964a4; background: #edf3fd; border-color: #cfddf2; }
.tutorial-strip { background: #f4f7fc; border-color: #dce4ef; }
.comparison { background: #fff; border-color: var(--line); }
thead { background: #f0f3f7; }
th, td { border-color: var(--line); }
thead th { color: #3e4b5c; }
tbody th { background: #f8f9fb; color: #4f5b6b; }
td:nth-child(2) { color: #606c7c; }
th:last-child, td:last-child { background: #edf4fd; color: #294d7e; }
.tips article, .faq-list details, .faq-list details:first-child, .final-cta { border-color: var(--line); }
.tips article>span { color: var(--blue); }
.faq-list summary::after { color: #66758a; }
.final-cta { background: #fafbfd; }
.footer, .site-footer { background: #f6f7f9; border-color: var(--line); }
.site-footer nav a { color: #546072; }
.site-footer nav a:hover, .site-footer nav a[aria-current] { color: #202a38; }
.image-dialog, .tutorial-dialog { background: #fff; color: var(--text); border-color: #d2dbe7; box-shadow: 0 24px 100px #14273f33; }
.dialog-close { background: #f2f5f9f2; color: #26354a; border-color: #ccd6e3; }
.image-dialog::backdrop, .tutorial-dialog::backdrop { background: #172b456e; }
.tool-hero .hero-grid {
  background-image: radial-gradient(ellipse at 50% 15%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 63%), linear-gradient(#26456b06 1px, transparent 1px), linear-gradient(90deg, #26456b06 1px, transparent 1px);
}
.breadcrumbs, .tool-hero-art figcaption, .page-index { color: #616b79; }
.breadcrumbs a:hover, .breadcrumbs>span:last-child { color: #343e4d; }
.page-index { border-color: var(--line); }
.prompt-card { background: #fff; border-color: #dce0e8; }
.prompt-card p { color: #505d6e; }
.copy-prompt { border-color: var(--line); }
.copy-prompt:hover { color: #202a38; }
.process-film { background: #f7f8fa; border-color: var(--line); }
.media-credit a { border-color: #a5afbc; }
.advice-list article { border-color: var(--line); }
.tool-related { background: #fff; border-color: var(--line); }
.tool-related:hover { border-color: #acb9cb; }
.sample-note, .demo-note, .media-credit, .service-note { color: #606c7d !important; }
@media (hover:hover) and (pointer:fine) {
  .example-card:hover, .related-card:hover, .prompt-card:hover { border-color: #aabbd2; box-shadow: 0 14px 36px #244c7810; }
}