:root {
  --ink: #111214;
  --muted: #6d6f73;
  --cream: #17181a;
  --paper: #f6f6f4;
  --sage: #8b8d91;
  --green: #17181a;
  --line: #d4d4d1;
}

body {
  background:
    radial-gradient(circle at 15% 5%, #34363a 0, transparent 28%),
    radial-gradient(circle at 90% 100%, #292a2d 0, transparent 25%),
    #151618;
}

.card {
  background: #f7f7f5;
  border-color: #3c3d40;
  box-shadow: 0 28px 90px #00000066;
}

.date {
  color: #17181a;
  border-color: #343538;
}

.eyebrow { color: #4b4d50; }
.subtitle, .intro p, .privacy p, .success > p:not(.eyebrow), .success small { color: #6d6f73; }
.rule { color: #585a5e; }
.rule::before, .rule::after { background: #c6c6c3; }
.privacy { border-color: #d4d4d1; }

.picker {
  border-color: #77797d;
  background: #eeeeeb;
}

.picker:active { background: #e1e1de; }
.camera, .camera::before { border-color: #17181a; }
.progress span { background: #17181a; }
.privacy i { color: #4d4f53; }

.send, .success button {
  background: #111214;
  color: #ffffff;
}

.send:active, .success button:active { background: #34363a; }

.change {
  border-color: #292a2d;
  color: #17181a;
  background: #f7f7f5;
}

.preview-grid { background: #d8d8d5; }
.preview-item { background: #c7c7c4; }
.check { border-color: #393a3d; color: #17181a; }

@media (max-width: 600px) {
  main { background: #f7f7f5; }
  .card { border-color: transparent; }
}