:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0e1114;
  --paper-2: #151a1e;
  --paper-deep: #090c0e;
  --ink: #f0e8df;
  --ink-soft: #c3b9af;
  --ink-mute: #918a83;
  --hair: #30363b;
  --hair-2: #242a2f;
  --soft: #c3b9af;
  --mute: #918a83;
  --line: #343a3f;
  --clay: #c96e5d;
  --clay-deep: #e69a87;
  --pine: #82b7a7;
  --pine-soft: #142622;
  --warn: #e1a663;
}

.theme-picker {
  display: inline-flex;
  align-items: center;
  position: relative;
}

.theme-picker::before {
  content: "◐";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-52%);
  color: var(--ink-mute, var(--mute));
  font-size: 11px;
  pointer-events: none;
}

.theme-picker select {
  width: auto;
  min-height: 30px;
  padding: 5px 24px 5px 25px;
  border: 1px solid var(--hair, var(--line));
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 88%, var(--ink) 12%);
  color: var(--ink);
  font: 500 11px/1.2 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  outline: none;
}

.theme-picker select:focus-visible {
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--clay) 22%, transparent);
}

html[data-theme="dark"] body {
  background-color: var(--paper);
}

html[data-theme="dark"] .ambient {
  background:
    radial-gradient(58rem 38rem at 88% 6%, rgb(133 50 55 / 18%), transparent 62%),
    radial-gradient(48rem 34rem at 2% 96%, rgb(26 93 79 / 13%), transparent 70%),
    radial-gradient(30rem 24rem at 48% 45%, rgb(128 77 55 / 6%), transparent 72%);
}

html[data-theme="dark"] .live,
html[data-theme="dark"] .waitlist-form,
html[data-theme="dark"] .field-notes,
html[data-theme="dark"] .promise-card,
html[data-theme="dark"] .work-card:not(.proactive) {
  background: color-mix(in oklab, var(--paper-2) 91%, var(--ink) 9%);
  box-shadow: none;
}

html[data-theme="dark"] .waitlist-btn,
html[data-theme="dark"] .closing-link {
  background: #ece2d8;
  color: #17191b;
}

html[data-theme="dark"] .waitlist-btn:hover,
html[data-theme="dark"] .closing-link:hover {
  background: var(--clay-deep);
  color: #17191b;
}

html[data-theme="dark"] .field-note {
  border-color: var(--hair);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] input,
html[data-theme="dark"] select:not([data-theme-select]),
html[data-theme="dark"] .choice,
html[data-theme="dark"] .persona-option label,
html[data-theme="dark"] .promise,
html[data-theme="dark"] .app-card,
html[data-theme="dark"] .starter,
html[data-theme="dark"] .saved div {
  background: #151a1e;
}

html[data-theme="dark"] .panel {
  box-shadow: 0 24px 70px rgb(0 0 0 / 24%);
}

html[data-theme="dark"] .button.secondary:hover {
  background: #1a2024;
}

html[data-theme="dark"] .persona-option input:checked + label {
  background: #2a1b1b;
}

html[data-theme="dark"] .app-start,
html[data-theme="dark"] .review-note,
html[data-theme="dark"] .success {
  border-color: #315d51;
  background: var(--pine-soft);
  color: #a8cfc2;
}

html[data-theme="dark"] .app-start p,
html[data-theme="dark"] .review-note {
  color: #a8cfc2;
}

html[data-theme="dark"] .notice {
  border-color: #705231;
  background: #2a2015;
  color: #e6bd87;
}

html[data-theme="dark"] .error {
  border-color: #743f39;
  background: #2b1918;
  color: #efaaa1;
}

html[data-theme="dark"] .callout {
  background: var(--paper-2);
}

.mast-actions,
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 600px) {
  .theme-picker select {
    max-width: 98px;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }
}