:root {
  --coral: #b9553f;
  --coral-dark: #853c30;
  --coral-soft: #f4ddd0;
  --teal: #3f2923;
  --teal-mid: #765d54;
  --teal-soft: #e8eadc;
  --paper: #fffaf3;
  --white: #fffdf8;
  --muted: #765d54;
  --line: #dfcabb;
  --green: #65704a;
  --shadow: 0 18px 44px rgba(92, 54, 39, 0.13);

  --coral-100: #b9553f;
  --coral-70: #d38b72;
  --coral-30: #edc9b8;
  --coral-20: #f4ddd0;
  --teal-100: #3f2923;
  --teal-80: #765d54;
  --teal-60: #9b8074;
  --teal-20: #dfcabb;
  --ink: #3f2923;
  --ink-2: #765d54;
  --accent: #b9553f;
  --accent-dark: #853c30;
  --focus: #853c30;
}

body {
  color: var(--ink, var(--teal));
  background:
    radial-gradient(circle at 8% 10%, rgba(194, 138, 54, 0.07), transparent 27rem),
    radial-gradient(circle at 92% 86%, rgba(185, 85, 63, 0.06), transparent 31rem),
    var(--paper);
}

h1,
h2,
.question,
.welcome h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

header,
.dialog-head,
.dialog-actions,
.presentation-nav {
  background: rgba(255, 250, 242, 0.96);
}

.mark {
  border-radius: 15px;
  background: var(--coral-dark);
  box-shadow: 0 0 0 4px rgba(194, 138, 54, 0.24);
}

.mark::after,
.mark:after {
  background: #c28a36;
}

.card,
.choice,
.response,
.response-item,
.time,
.notice,
.feedback,
.debrief,
.prompt,
.explain,
.local-idea,
.sent,
.offline,
.facilitator-note {
  border-radius: 14px;
}

.card,
.choice,
.response,
.response-item,
.debrief,
.qr-shell,
.qr-large,
.dialog-head,
.dialog-actions {
  background-color: var(--white);
}

button,
.button,
textarea,
input,
select,
.code {
  border-radius: 10px;
}

button,
.button,
.choice[aria-pressed="true"],
.choice.selected,
.code {
  border-color: var(--coral-dark);
  background-color: var(--coral-dark);
}

button:hover,
.button:hover {
  background-color: var(--coral);
}

button.secondary,
.button.secondary {
  color: var(--coral-dark);
  background: var(--white);
  border-color: var(--line);
}

button.secondary:hover,
.button.secondary:hover {
  border-color: var(--coral-dark);
  background: var(--coral-soft);
}

.eyebrow,
.back,
.go,
.vp-accent {
  color: var(--coral-dark);
}

.notice,
.open-prompt,
.local-idea {
  border-color: var(--green);
  background: var(--teal-soft);
}

.time,
.feedback,
.presentation-warning,
.facilitator-note,
.offline,
.prompt {
  border-color: var(--coral);
  background: var(--coral-soft);
}

.urgent {
  background: #fff1e9;
}

.protocol-note {
  background: #fffdf9;
}

.protocol-card {
  background: #f7f2e9;
}

.route:nth-child(1) {
  background: #fff3ec;
}

.route:nth-child(2) {
  background: #f6f3ed;
}

.route:nth-child(3) {
  background: #fff0e9;
}

.tree-intro {
  background: #f2e9e1;
}

.privacy {
  background: linear-gradient(145deg, var(--white), var(--teal-soft));
}

.bar,
.progress-track {
  background: var(--teal-soft);
}

.bar span,
.progress-bar {
  background: var(--coral);
}

:focus-visible {
  outline-color: var(--coral-dark);
}

dialog::backdrop {
  background: rgba(63, 41, 35, 0.68);
}

@media print {
  body { background: #fff; }
}