/* The public demo writer's page. Builds on styles.css. */

.demo-note {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}
.demo-name { font-size: 2.2rem; margin: 1.5rem 0 0.25rem; }
.demo-about { margin-top: 0; }


.reader { scroll-margin-top: 4.5rem; }
.reader-nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; }

.months { margin-top: 2rem; display: grid; gap: 1.25rem; }
.month h3 { margin: 0; }
.month .hint { margin: 0.15rem 0 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-width: 2.2rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  background: var(--heat-1);
  border-color: transparent;
}
.chip[data-l="2"] { background: var(--heat-2); }
.chip[data-l="3"] { background: var(--heat-3); color: var(--bg); }
.chip[data-l="4"] { background: var(--heat-4); color: var(--bg); }
.chip.sel { outline: 2px solid var(--ink); outline-offset: 1px; }

.demo-cta { margin-top: 2.5rem; text-align: center; }