/* The system palette also works before JavaScript or when scripts are unavailable. */
:root {
  --button-ink: #fff;
  --button-hover: #24563b;
  --project-copy: #43594b;
  --portrait-stage: #dcebd5;
  --portrait-label-ink: #f2f8ef;
  --portrait-label-bg: #2e6b4c;
  --portrait-label-dot: #bddbaa;
  --portrait-label-shadow: #1731221f;
  --signal: #64896b;
  --signal-back: #bfd1b6;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #131b17;
  --ink: #e9f1e6;
  --muted: #b0c0b1;
  --accent: #a0d88f;
  --accent-light: #293a2d;
  --line: #344638;
  --surface: #1c2a21;
  --project-copy: #becdbd;
  --button-ink: #162116;
  --button-hover: #b4e4a3;
  --portrait-stage: #293d2d;
  --portrait-label-ink: #2b4c30;
  --portrait-label-bg: #d3e7c9;
  --portrait-label-dot: #547e46;
  --portrait-label-shadow: #00000030;
  --prominado-logo-filter: invert(1);
  --signal: #80a276;
  --signal-back: #476642;
  --robot-surface: #1e2d22;
  --robot-ink: #d8ebd0;
  --robot-indicator: #2a3d2c;
  --robot-muted: #b3cdaa;
  --robot-idle: #89ac7c;
  --robot-accent: #a0d88f;
  --robot-wire: #5f7e55;
  --robot-signal: #acd598;
  --robot-packet-soft: #90ba7e;
  --robot-packet-faint: #70915f;
  --robot-border: #527249;
  --robot-node: #273b2c;
  --robot-node-ink: #e0efda;
  --robot-check: #3d6236;
  --robot-check-ink: #d4efc7;
  --robot-complete-border: #84aa74;
  --robot-active-bg: #304b32;
  --robot-active-border: #99c186;
  --robot-scan: #9ac384;
  --robot-tool: #263a2a;
  --robot-orbit: #57774f;
  --robot-rotor: #91b882;
  --robot-rotor-soft: #789e6a;
  --robot-agent: #2d6546;
  --robot-satellite: #accb97;
  --robot-track: #80aa6c;
  --robot-shadow: #00000030;
  --robot-agent-ink: #fff;
  --robot-pixel: #c2e4ad;
  --robot-pixel-light: #f1f9e9;
  --robot-agent-working: #336f4b;
  --robot-seal: #3a6333;
  --robot-pixel-done: #e2f4d5;
  --robot-progress: #3e5836;
  --robot-complete: #7eab6c;
  --robot-status: #d0e6c3;
  --robot-controls: #c3e2b3;
  --robot-hover: #344e2f;
  --robot-agent-muted: #deefd8;
  --robot-arrow: #8db87d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #131b17;
    --ink: #e9f1e6;
    --muted: #b0c0b1;
    --accent: #a0d88f;
    --accent-light: #293a2d;
    --line: #344638;
    --surface: #1c2a21;
    --project-copy: #becdbd;
    --button-ink: #162116;
    --button-hover: #b4e4a3;
    --portrait-stage: #293d2d;
    --portrait-label-ink: #2b4c30;
    --portrait-label-bg: #d3e7c9;
    --portrait-label-dot: #547e46;
    --portrait-label-shadow: #00000030;
    --prominado-logo-filter: invert(1);
    --signal: #80a276;
    --signal-back: #476642;
    --robot-surface: #1e2d22;
    --robot-ink: #d8ebd0;
    --robot-indicator: #2a3d2c;
    --robot-muted: #b3cdaa;
    --robot-idle: #89ac7c;
    --robot-accent: #a0d88f;
    --robot-wire: #5f7e55;
    --robot-signal: #acd598;
    --robot-packet-soft: #90ba7e;
    --robot-packet-faint: #70915f;
    --robot-border: #527249;
    --robot-node: #273b2c;
    --robot-node-ink: #e0efda;
    --robot-check: #3d6236;
    --robot-check-ink: #d4efc7;
    --robot-complete-border: #84aa74;
    --robot-active-bg: #304b32;
    --robot-active-border: #99c186;
    --robot-scan: #9ac384;
    --robot-tool: #263a2a;
    --robot-orbit: #57774f;
    --robot-rotor: #91b882;
    --robot-rotor-soft: #789e6a;
    --robot-agent: #2d6546;
    --robot-satellite: #accb97;
    --robot-track: #80aa6c;
    --robot-shadow: #00000030;
    --robot-agent-ink: #fff;
    --robot-pixel: #c2e4ad;
    --robot-pixel-light: #f1f9e9;
    --robot-agent-working: #336f4b;
    --robot-seal: #3a6333;
    --robot-pixel-done: #e2f4d5;
    --robot-progress: #3e5836;
    --robot-complete: #7eab6c;
    --robot-status: #d0e6c3;
    --robot-controls: #c3e2b3;
    --robot-hover: #344e2f;
    --robot-agent-muted: #deefd8;
    --robot-arrow: #8db87d;
  }
}
:root[data-theme='light'] {
  color-scheme: light;
}
:root {
  scrollbar-color: var(--line) var(--paper);
}
body {
  padding-bottom: 72px;
}
::selection {
  background: var(--accent);
  color: var(--button-ink);
}
.skip-link,
.button--primary {
  color: var(--button-ink);
  background: var(--accent);
}
.button--primary:hover {
  background: var(--button-hover);
}
.project-description {
  color: var(--project-copy);
}
.portrait-stage {
  background: var(--portrait-stage);
}
.portrait-label-float {
  color: var(--portrait-label-ink);
  background: var(--portrait-label-bg, var(--paper));
  box-shadow: 0 10px 28px var(--portrait-label-shadow, #17312212);
}
.portrait-signal {
  color: var(--signal);
}
.signal-path--back {
  stroke: var(--signal-back);
}
.portrait-label-float > i {
  background: var(--portrait-label-dot, var(--accent));
}
.concert-media {
  background: var(--surface);
}
.media-pages button span {
  background: var(--line);
}
.media-pages button[aria-pressed='true'] span {
  background: var(--accent);
}
.theme-switcher {
  position: fixed;
  z-index: 30;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 24px;
  width: 46px;
  height: 46px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.theme-switcher:hover {
  color: var(--accent);
  background: var(--surface);
}
.theme-switcher:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.theme-switcher > span {
  display: flex;
}
@media (max-width: 767px) {
  .theme-switcher {
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}