/* Shared appearance. Photographs and app icons keep their original colours;
   page surfaces and interactive previews follow the selected theme. */
:root[data-color-theme="light"] { color-scheme: light; }
:root[data-color-theme="dark"] {
  color-scheme: dark;
  --page: #141414;
  --paper: #141414;
  --paper-2: #202020;
  --paper-deep: #292929;
  --card: #202020;
  --panel: #202020;
  --surface: #202020;
  --white: #202020;
  --ink: #f1f1f1;
  --muted: #b4b4b4;
  --soft: #9b9b9b;
  --faint: #9b9b9b;
  --line: #383838;
  --line-soft: #303030;
  --home-card-border: #333;
  --blue: #78b7ff;
  --accent: #78b7ff;
  --accent-dark: #a2ccff;
  --accent-soft: #1d3046;
  --green: #78b7ff;
  --green-light: #1d3046;
  --color-background: #141414;
  --color-surface: #202020;
  --color-background-secondary: #292929;
  --color-ink: #f1f1f1;
  --color-primary: #e3e3e3;
  --color-secondary: #b4b4b4;
  --color-tertiary: #8c8c8c;
  --color-separator: #383838;
  --color-link: #78b7ff;
  --color-accent: #78b7ff;
  --diagram-background: #202020;
  background: var(--page);
}

/* Appearance reuses the footer language menu's panel and option styles. */
.theme-control { position: relative; flex: 0 0 32px; color: inherit; }
[data-site-footer] .theme-button { justify-content: center; width: 32px; padding: 0; }
[data-site-footer] .theme-button > svg { width: 19px; height: 19px; }
.theme-control .theme-icon-light, .theme-control .theme-icon-dark { display: none; }
:root[data-theme-preference="light"] .theme-icon-light,
:root[data-theme-preference="dark"] .theme-icon-dark { display: initial; }
:root:is([data-theme-preference="light"], [data-theme-preference="dark"]) .theme-icon-system { display: none; }
.download-header-actions { display: flex; align-items: center; gap: 16px; }

/* Shared navigation and footer. */
:root[data-color-theme="dark"] :is([data-site-header], [data-site-footer]) {
  --ink: #f1f1f1;
  --muted: #b4b4b4;
  --blue: #78b7ff;
  --line: #383838;
  --footer-surface: #141414;
  --footer-heading: #aaa;
  --footer-control: #252525;
  --footer-control-text: #d5d5d5;
  --footer-camera-hint: #b7bcc4;
  --footer-hover: #333;
  --footer-discord-bg: #eee;
  --footer-discord-text: #141414;
  color-scheme: dark;
}
:root[data-color-theme="dark"] body:not([data-site-page="3gs"]) { color: var(--ink); background: var(--page); }
:root[data-color-theme="dark"] body:not([data-site-page="3gs"]) [data-site-header],
:root[data-color-theme="dark"] body:not([data-site-page="3gs"]) [data-site-header]::before { color: var(--ink); background: var(--page); }
:root[data-color-theme="dark"] :is([data-site-header] .brand img, .download-page .brand img) { filter: invert(1); }
:root[data-color-theme="dark"] [data-site-header] .nav-download { background: #eee; color: #141414; }
:root[data-color-theme="dark"] [data-site-header] .nav-download-menu { background: var(--card); border-color: var(--line); color: var(--ink); }
:root[data-color-theme="dark"] [data-site-header] .nav-download-menu a { color: var(--ink); }
:root[data-color-theme="dark"] [data-site-header] .nav-download-menu a:is(:hover, :focus-visible) { background: #333; color: var(--ink); }
:root[data-color-theme="dark"] body[data-site-page="3gs"] [data-site-footer] { --footer-surface: #000; }
:root[data-color-theme="dark"] ::selection { color: #fff; background: #285682; }

/* Home: content cards and interactive previews. */
:root[data-color-theme="dark"] :is(.build-bar, .faq-item, .review-checklist, .workflow, .team-card, .pocket-card, .feature-card, .project-metric, .more-agent, .sales-stat, .sales-daily-card, .sales-tooltip, .feature-app-sheet) { background: var(--card); border-color: var(--line); }
:root[data-color-theme="dark"] :is(body[data-site-page="home"] .eyebrow, .add-button, .team-mode-switch, .team-roster-summary, .team-roster-list li, .team-message-bubble, .project-chat-window, .project-chat-bubble, .feature-sales-panel) { background: var(--paper-deep); color: var(--ink); border-color: var(--line); }
:root[data-color-theme="dark"] :is(.submit-button, .showcase-download-button, .activity-replay) { background: #eee; color: #141414; }
:root[data-color-theme="dark"] .showcase-download-button:hover { background: #d4d4d4; }
:root[data-color-theme="dark"] .faq-item summary:hover { background: #292929; }
:root[data-color-theme="dark"] .activity-card { background: #252525; }
:root[data-color-theme="dark"] .activity-surface { background: #303030; }
:root[data-color-theme="dark"] .team-mode.is-active { color: var(--ink); background: #414141; }
:root[data-color-theme="dark"] .team-mode-avatar-stack img { background: var(--card); border-color: var(--card); }
:root[data-color-theme="dark"] :is(.team-roster-list strong, .team-message-meta strong, .project-chat-bubble > p, .pocket-copy h3, .pocket-copy p, .feature-app-fields dt, .feature-field-icon) { color: var(--ink); }
:root[data-color-theme="dark"] :is(.hero-waitlist-note, .activity-label, .activity-toolbar, .team-card-kicker, .team-mode, .team-roster-summary small, .team-roster-list small, .team-card-footnote, .team-message-meta, .project-chat-time, .project-metric small, .more-agent-copy > p:last-child, .pocket-requirements, .feature-card-copy p, .sales-stat-label, .sales-stat-value span, .sales-tooltip span, .feature-feedback p:last-child, .feature-app-identity small, .feature-app-fields dd) { color: var(--muted); }
:root[data-color-theme="dark"] .feature-kicker { color: #7b7b7b; }
:root[data-color-theme="dark"] .project-metric em { color: #6dd596; }
:root[data-color-theme="dark"] .sales-chart { --sales-grid: #383838; --sales-axis: #aaa; }
:root[data-color-theme="dark"] .feature-rank-1 { color: #f1f1f1; }
:root[data-color-theme="dark"] .feature-rank-7 { color: #d2d2d2; }
:root[data-color-theme="dark"] .feature-rank-12 { color: #b9b9b9; }
:root[data-color-theme="dark"] .feature-rank-32 { color: #a3a3a3; }
:root[data-color-theme="dark"] .feature-rank-39 { color: #909090; }
:root[data-color-theme="dark"] .feature-rank-166 { color: #7b7b7b; }
:root[data-color-theme="dark"] .feature-ready { --feature-ready-surface: #202020; }
:root[data-color-theme="dark"] .feature-app-sheet { box-shadow: -8px -6px 24px rgb(0 0 0 / 24%); }
:root[data-color-theme="dark"] :is(.feature-nav-button, .gallery-controls button) { background: #303030; color: #ccc; }
:root[data-color-theme="dark"] :is(.feature-nav-button, .gallery-controls button):hover:not(:disabled) { background: #414141; color: #fff; }
:root[data-color-theme="dark"] :is(.feature-nav-button, .gallery-controls button):disabled { background: #242424; color: #707070; }
/* The miniature browser follows the page theme without inverting its photograph. */
:root[data-color-theme="dark"] .app-window { color-scheme: light; color: #0b0b0b; --ink: #0b0b0b; --muted: #616161; --line: #e8e8e8; }
:root[data-color-theme="dark"] .feature-landing-window {
  color-scheme: dark;
  color: var(--ink);
  background: #090909;
  border-color: #2b2b2b;
  box-shadow: 0 8px 18px rgb(0 0 0 / 18%), 0 33px 33px rgb(0 0 0 / 16%), 0 74px 44px rgb(0 0 0 / 8%);
}
:root[data-color-theme="dark"] .feature-landing-toolbar { background: linear-gradient(#202020, #141414); }
:root[data-color-theme="dark"] .feature-landing-toolbar::before { box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); filter: none; }
:root[data-color-theme="dark"] :is(.feature-browser-address, .feature-browser-actions) {
  color: #dedee2;
  background: linear-gradient(325deg, #2a2a2a, #202020);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 3px 8px rgb(0 0 0 / 20%);
}
:root[data-color-theme="dark"] .feature-browser-actions svg { stroke: #bfc1c8; }
:root[data-color-theme="dark"] .feature-browser-refresh { color: #bfc1c8; }
:root[data-color-theme="dark"] .feature-browser-refresh:hover { color: #fff; background: rgb(255 255 255 / 8%); }
:root[data-color-theme="dark"] .feature-browser-refresh:active { background: rgb(255 255 255 / 14%); }
:root[data-color-theme="dark"] .feature-landing-copy p { color: #b4b4ba; }
:root[data-color-theme="dark"] :is(.feature-landing-copy h4 span, .feature-landing-download) { color: #191a1c; background: #efeff1; }
:root[data-color-theme="dark"] .feature-landing-caption { color: #b4b4ba; background: #181818; }
:root[data-color-theme="dark"] .feature-landing-caption strong { color: #eeeef1; }

:root[data-color-theme="dark"] airbuild-mockup-window {
  --mockup-symbol-filter: invert(1);
  --mockup-phone-icon-filter: brightness(0) invert(1);
  --mockup-phone-icon-opacity: 1;
}

/* Homepage accents stay soft against the dark canvas. */
:root[data-color-theme="dark"] .hero h1 { color: #f5f5f5; }
:root[data-color-theme="dark"] .brand-brush-path { stroke: #fff; opacity: .05; }
:root[data-color-theme="dark"] .auto-highlight path { stroke: #d8d8dc; opacity: .3; }
:root[data-color-theme="dark"] :is(.toolbar-circle, .toolbar-pill) {
  background: linear-gradient(325deg, #373b41, #292d32);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), inset 0 -1px 0 rgb(0 0 0 / 18%), 0 3px 8px rgb(0 0 0 / 12%);
}
:root[data-color-theme="dark"] .toolbar-icon { color: #babec5; filter: none; }
:root[data-color-theme="dark"] .sales-vline { border-left-color: rgb(255 255 255 / 18%); }
:root[data-color-theme="dark"] .sales-grid-row.is-base { border-top-color: rgb(255 255 255 / 20%); }

/* Pricing, download, and forms. */
:root[data-color-theme="dark"] .pricing-main { --plan-muted: #b4b4b4; --plan-line: #383838; }
:root[data-color-theme="dark"] :is(.plan-card, .enterprise-card, .platform-card) { color: var(--ink); background: var(--card); border-color: var(--line); }
:root[data-color-theme="dark"] :is(.plan-button, .download-page .beta) { color: var(--ink); background: #303030; border-color: var(--line); }
:root[data-color-theme="dark"] .plan-button:hover { background: #414141; border-color: #666; }
:root[data-color-theme="dark"] :is(.plan-button-primary, .download-button, .waitlist-navigation button, .waitlist-home, .invitation-page .actions button, .invitation-page .actions .button) { background: #eee; border-color: #eee; color: #141414; }
:root[data-color-theme="dark"] :is(.plan-button-primary, .download-button, .waitlist-navigation button, .waitlist-home, .invitation-page .actions button):hover { background: #d4d4d4; color: #141414; }
:root[data-color-theme="dark"] :is(.platform-label, .install-help summary, .waitlist-number, .waitlist-hint, .waitlist-key-hint, .waitlist-status) { color: var(--muted); }
:root[data-color-theme="dark"] :is(.waitlist-step input, .waitlist-step textarea) { color: var(--ink); border-color: var(--line); }
:root[data-color-theme="dark"] :is(.waitlist-step input, .waitlist-step textarea):focus { border-color: #78b7ff; box-shadow: 0 1px #78b7ff; }
:root[data-color-theme="dark"] :is(.waitlist-error, .invitation-page #error) { color: #ff9e90; }
:root[data-color-theme="dark"] :is(.waitlist-navigation .waitlist-previous, .invitation-page .actions .secondary) { color: var(--ink); border-color: var(--line); background: transparent; }
:root[data-color-theme="dark"] :is(.waitlist-navigation .waitlist-previous, .invitation-page .actions .secondary):hover { background: #333; color: var(--ink); }
:root[data-color-theme="dark"] .waitlist-success-mark { border-color: var(--line); }
:root[data-color-theme="dark"] .download-page :is(.back-link:hover, .page-footer a:hover) { color: var(--ink); }
:root[data-color-theme="dark"] .download-page .skip-link { background: #eee; color: #141414; }

/* Login shares the same saved choice even if it differs from the OS setting. */
:root[data-color-theme="light"] .login-page { --canvas: #faf9f6; --surface: #fff; --text: #252521; --secondary: #77766f; --border: #e3e2dc; --hover: #f3f2ed; --error: #b43e31; }
:root[data-color-theme="dark"] .login-page { --canvas: #141414; --surface: #202020; --text: #f1f1f1; --secondary: #b4b4b4; --border: #383838; --hover: #303030; --error: #ff9e90; }
:root[data-color-theme="light"] .login-page .github-mark { filter: none; }
:root[data-color-theme="dark"] .login-page .github-mark { filter: invert(1); }

/* Reading surfaces, tables, search, and legal documents. */
:root[data-color-theme="dark"] body:is(:has(.blog-index), :has(.tutorial-layout)) { --paper: #141414; }
:root[data-color-theme="dark"] .journal-title img { filter: invert(1); }
:root[data-color-theme="dark"] .developer-detail {
  --ink: #f1f1f1; --muted: #b4b4b4; --faint: #9b9b9b; --line: #383838; --line-soft: #303030;
  --paper-deep: #292929; --accent: #78b7ff; --accent-soft: #1d3046; --green: #78b7ff; --green-light: #1d3046;
}
:root[data-color-theme="dark"] .asc-guide { --asc-accent: #78b7ff; --asc-accent-soft: #1d3046; --asc-green: #81d3a4; --asc-green-soft: #20362a; --asc-amber: #f5ce79; --asc-amber-soft: #3a3020; }
:root[data-color-theme="dark"] :is(body:has(.blog-index) #site-page, body:has(.tutorial-layout) #main-content) { background: var(--paper); }
:root[data-color-theme="dark"] :is(.summary, .legal-summary, .contact-alt, .article-template.asc-guide .summary, .tutorial-layout .article-body blockquote, .article-language-control, .article-language-trigger, .article-language select, .ceo-contact .ceo-note, .article-download, .closing-gallery-track .gallery-condition) { background: var(--paper-deep); border-color: var(--line); color: var(--muted); }
:root[data-color-theme="dark"] :is(.article-language-menu, .developer-detail .step, .developer-detail .fee-visual, .developer-detail .article-language select) { color: var(--ink); background: var(--card); border-color: var(--line); }
:root[data-color-theme="dark"] .article-language-menu button { color: var(--ink); }
:root[data-color-theme="dark"] .article-language-menu button:is(:hover, :focus-visible, [aria-checked="true"]) { background: #353535; color: #a2ccff; }
:root[data-color-theme="dark"] .article-language-control select { color: var(--ink); border-color: var(--line); }
:root[data-color-theme="dark"] :is(.article-template .article-hero .dek, .article-template .article-deck, .article-body > p, .screenshot-detail .prose .lead, .asc-guide .dek, .asc-guide .section-card p, .asc-guide .metric-card p, .asc-guide .faq details p, .dek, .hero-copy, .topic-dek, .article-body .download-tagline, .article-body .gallery-condition p) { color: var(--muted); }
:root[data-color-theme="dark"] :is(.developer-detail .step::before, .developer-detail .fee-amount) { color: var(--blue); }
:root[data-color-theme="dark"] .developer-detail .step::before { background: var(--accent-soft); }
:root[data-color-theme="dark"] .developer-detail .check-mark,
:root[data-color-theme="dark"] .screenshot-detail .check-list li::before { color: #141414; }
:root[data-color-theme="dark"] .screenshot-detail :is(.prompt-card, th, .note, .fit-grid > div:last-child) { background: var(--paper-deep); border-color: var(--line); color: var(--ink); }
:root[data-color-theme="dark"] .screenshot-detail code:not(pre code) { background: #303030; color: #c6deff; }
:root[data-color-theme="dark"] .asc-guide .metric-card code { color: var(--asc-green); }
:root[data-color-theme="dark"] .asc-guide .steps > li::before { color: #141414; }
:root[data-color-theme="dark"] :is(.callout, .sticker-feature) { background: #26303c; }
:root[data-color-theme="dark"] .summary code { background: #333; }
:root[data-color-theme="dark"] :is(.skip-link, .pricing-skip) { color: #141414; background: #eee; }
:root[data-color-theme="dark"] :is(.search-control, .filter-row label) { border-color: var(--line); }

/* Sketch diagrams retain their paper texture without a light backing. */
:root[data-color-theme="dark"] .sk-paper { --color-tertiary: #626262; }
:root[data-color-theme="dark"] :is(.sk-steps > li, .sk-card, .sk-src, .sk-file) { border-color: #505050; }
:root[data-color-theme="dark"] .sk .sk-goal { border-color: var(--color-accent); }

/* Crop the photograph's white studio margin, keeping the device colours intact. */
:root[data-color-theme="dark"] .closing-gallery-track .gallery-condition img {
  justify-self: center;
  width: 100%;
  max-width: calc(310px * 575 / 960);
  height: auto;
  max-height: none;
  aspect-ratio: 575 / 960;
  background: transparent;
  clip-path: inset(2.6% 4% 4% 3.8% round 11% / 6%);
}
@media (max-width: 600px) {
  :root[data-color-theme="dark"] .closing-gallery-track .gallery-condition img { max-width: calc(230px * 575 / 960); }
}

/* Illustrated community pages. Artwork is left untouched. */
:root[data-color-theme="dark"] :is(.discord-details, .discord-join--waitlist) { color: var(--ink); }
:root[data-color-theme="dark"] .discord-details .discord-disclaimer { color: var(--muted); }
:root[data-color-theme="dark"] .discord-sticker-restore::before { background: rgb(255 255 255 / 15%); }
:root[data-color-theme="dark"] body[data-site-page="imessage"] { --imessage-ink: #f1f1f1; --imessage-muted: #b4b4b4; --imessage-blue: #78b7ff; --imessage-line: #383838; }
:root[data-color-theme="dark"] .imessage-details { background: #202a38; }
:root[data-color-theme="dark"] .imessage-motion { color: #ddd; background: #303030; border-color: #444; }
:root[data-color-theme="dark"] .imessage-button { background: #196bbf; color: #fff; }
:root[data-color-theme="dark"] .imessage-button:hover { background: #217ed7; }