/* HakolPrompter site: the app's graphite and amber (see DESIGN.md in the app). */
:root {
  --desk: #111214;
  --panel: #1a1b1e;
  --seam: #2c2d32;
  --ink: #ece8e0;
  --ink-2: #b0aba2;
  --ink-3: #8a857d;
  --amber: #f5a623;
  --amber-ink: #ffcf73;
  --on-amber: #1c1406;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --desk: #f6f4f0;
    --panel: #ffffff;
    --seam: #e2ddd5;
    --ink: #1c1b19;
    --ink-2: #4a4741;
    --ink-3: #6f6a62;
    --amber-ink: #8a5a00;
    color-scheme: light;
  }
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font: 17px/1.6 'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 16px 64px;
}
header.top {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
header.top img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
}
h1 {
  font: 600 34px/1.15 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.01em;
  margin: 0;
}
.by {
  color: var(--ink-3);
  font-size: 15px;
}
h2 {
  font: 600 22px/1.3 'Barlow Condensed', 'Barlow', sans-serif;
  letter-spacing: 0.02em;
  margin: 36px 0 8px;
  color: var(--amber-ink);
}
p,
li {
  color: var(--ink-2);
}
strong {
  color: var(--ink);
}
a {
  color: var(--amber-ink);
}
ul {
  padding-left: 22px;
}
.btn {
  display: inline-block;
  margin: 8px 12px 0 0;
  padding: 10px 18px;
  border-radius: 6px;
  background: var(--amber);
  color: var(--on-amber);
  font-weight: 600;
  text-decoration: none;
}
.btn.quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--seam);
}
.card {
  background: var(--panel);
  border: 1px solid var(--seam);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 16px 0;
}
footer {
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--seam);
  color: var(--ink-3);
  font-size: 14px;
}
footer a {
  color: var(--ink-2);
  margin-right: 16px;
}