:root {
  color-scheme: light;
  --ink: #f2f3eb;
  --surface: #e4e9dc;
  --ivory: #354034;
  --muted: #5e6957;
  --lime: #567442;
  --line: #cdd4c4;
  --button-text: #f8f8f0;
  --button-hover: #496537;
  --camera-frame: #dde3d5;
  --shadow: #35403416;
  --moment-fill: #c4d1b6;
  --privacy-glow: #dce6cf;
  --photo-text: #f1f2e9;
  --photo-badge: #2b302de8;
  --photo-scrim: #101411bb;
  --record-dot: #f39b86;
  --photo-pause: #b4c995;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #2b302d;
    --surface: #353c36;
    --ivory: #e0e3d8;
    --muted: #b7bfb0;
    --lime: #b4c995;
    --line: #4a5449;
    --button-text: #2b302d;
    --button-hover: #c2d4a8;
    --camera-frame: #3a433b;
    --shadow: #171d1726;
    --moment-fill: #56684b;
    --privacy-glow: #3c4b35;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #2b302d;
  --surface: #353c36;
  --ivory: #e0e3d8;
  --muted: #b7bfb0;
  --lime: #b4c995;
  --line: #4a5449;
  --button-text: #2b302d;
  --button-hover: #c2d4a8;
  --camera-frame: #3a433b;
  --shadow: #171d1726;
  --moment-fill: #56684b;
  --privacy-glow: #3c4b35;
}

.theme-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ivory);
  background: transparent;
}
.theme-control[hidden] {
  display: none;
}
.theme-control:hover {
  background: var(--surface);
}
.theme-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.theme-control:focus-within {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.theme-control svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.theme-control .theme-sun,
.theme-control .theme-moon {
  display: none;
}
:root[data-theme="light"] .theme-sun,
:root[data-theme="dark"] .theme-moon {
  display: block;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .header-actions {
    gap: 10px;
  }
  .site-header {
    flex-wrap: wrap;
    row-gap: 12px;
    padding-block: 16px;
  }
  .site-header .brand {
    font-size: 20px;
  }
  .site-header .brand img {
    width: 28px;
    height: 28px;
  }
  .site-header .header-actions {
    margin-left: auto;
  }
  .site-header .header-download {
    padding-inline: 12px;
  }
}
@media (max-width: 360px) {
  .site-header .header-actions {
    width: 100%;
    justify-content: space-between;
  }
}