:root {
  --paper: #F7F6F3; --ink: #1B1D21; --soft: #4A4F57;
  --muted: #6E757E; --rule: #DCD9D2; --accent: #0F6B63;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161A; --ink: #E8E7E3; --soft: #B6BAC0;
    --muted: #878D96; --rule: #2C3037; --accent: #4FB3A6;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 "Charter", Cambria, Georgia, serif;
  display: grid; place-items: center; min-height: 100vh; padding: 2rem;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 34rem; }
.eyebrow {
  font: 600 .7rem/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 1.5rem;
}
h1 {
  font: 700 clamp(2.4rem, 7vw, 3.6rem)/1.02 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.025em; margin: 0 0 1rem;
}
.sub { color: var(--soft); margin: 0 0 .75rem; }
dl {
  margin: 2.5rem 0 0; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  font: .85rem/1.5 "Segoe UI", system-ui, sans-serif;
}
dl div { display: flex; flex-direction: column; gap: .2rem; }
dt {
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted);
}
dd { margin: 0; font-weight: 600; font-family: "Cascadia Mono", Consolas, monospace; }

.phases {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: phase;
  font-family: "Segoe UI", system-ui, sans-serif;
}
.phases li {
  counter-increment: phase;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .9rem;
  padding: .55rem 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  color: var(--muted);
}
.phases li::before {
  content: counter(phase, decimal-leading-zero);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: .78rem;
  color: var(--rule);
}
.phases span { font-weight: 600; font-size: .95rem; display: block; }
.phases em {
  font-style: normal;
  font-size: .82rem;
  color: var(--muted);
  display: block;
  margin-top: .1rem;
}
.phases .done { color: var(--soft); }
.phases .done::before { content: "\2713"; color: var(--accent); }
.phases .done span { color: var(--soft); }
.phases .now::before { color: var(--accent); }
.phases .now span { color: var(--ink); }
.phases .now em { color: var(--accent); }