:root {
  color-scheme: light;
  --tw-bg-app-top: #f4efe3;
  --tw-bg-app-bottom: #e8e0cd;
  --tw-bg-topbar: #2a2620;
  --tw-topbar-text: #e8e0cd;
  --tw-topbar-link: #c5b996;
  --tw-topbar-link-hover: #ffffff;
  --tw-text-primary: #2a2620;
  /* Contrast: #5c5547 is 6.43:1 on #f4efe3 and 5.61:1 on #e8e0cd, so it
     passes WCAG AA (4.5:1) for body-size text on both paper tones. */
  --tw-text-secondary: #5c5547;
  /* Contrast: #8a7a5a is only 3.65:1 on #f4efe3 and 3.19:1 on #e8e0cd, below
     AA for text. Use it for decorative rules and borders only, never for text. */
  --tw-text-muted: #8a7a5a;
  --tw-border: #d1c8b0;
  --tw-border-strong: #8a7a5a;
  --tw-accent: #256E64;
  --tw-surface: rgba(255,253,246,.5);
  --tw-btn-bg: #2a2620;
  --tw-btn-fg: #f4efe3;
  --tw-btn-hover: #4a3f34;
  --tw-font-serif: Georgia,'Times New Roman',serif;
  --tw-font-sans: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--tw-bg-app-bottom);
  background-image: linear-gradient(to bottom, var(--tw-bg-app-top), var(--tw-bg-app-bottom));
  color: var(--tw-text-primary);
  font: 100%/1.55 var(--tw-font-sans);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* Type: Georgia at regular weight, the way a printed book sets its heads. */
h1, h2, h3 {
  font-family: var(--tw-font-serif);
  font-weight: normal;
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

a { color: var(--tw-accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--tw-accent); outline-offset: 2px; border-radius: 2px; }

/* --- Beta banner: one block; delete this group and the <a> to remove it. */
.beta-banner {
  display: block;
  padding: .5rem 16px;
  background: var(--tw-bg-topbar);
  color: var(--tw-topbar-text);
  border-bottom: 1px solid var(--tw-border-strong);
  font-size: .875rem;
  text-align: center;
  text-decoration: none;
}
.beta-banner span { color: var(--tw-topbar-link-hover); }
.beta-banner:hover span { text-decoration: underline; text-underline-offset: .18em; }
.beta-banner:focus-visible { outline-color: var(--tw-topbar-link-hover); outline-offset: -4px; }
/* --- end beta banner */

/* --- Ink top bar */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding-block: .6rem;
  padding-inline: max(16px, calc((100% - 1068px) / 2));
  background: var(--tw-bg-topbar);
  color: var(--tw-topbar-text);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
  color: var(--tw-topbar-text);
  font-family: var(--tw-font-serif);
  font-size: 1.25rem;
  text-decoration: none;
}
/* The mono mark is drawn in ink, so it sits on a small paper tile on the dark bar. */
.brand img {
  width: 30px;
  height: 30px;
  padding: 3px;
  border-radius: 5px;
  background: var(--tw-bg-app-top);
}
.site-header nav { display: flex; align-items: center; gap: 1.5rem; font-size: 15px; }
.site-header nav a { color: var(--tw-topbar-link); text-decoration: none; }
.site-header nav a:hover { color: var(--tw-topbar-link-hover); }
.site-header nav .signin {
  padding: .3rem .8rem;
  border: 1px solid var(--tw-topbar-link);
  border-radius: 4px;
  color: var(--tw-topbar-text);
}
.site-header nav .signin:hover { border-color: var(--tw-topbar-link-hover); }
.site-header :focus-visible { outline-color: var(--tw-topbar-link-hover); }

/* --- One content column, 16px gutters at every width */
main > section,
main > aside,
.site-footer,
main.notfound {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}
main > section { padding-block: 4rem; }

/* --- Hero */
main > .hero { text-align: center; padding-top: 4.5rem; }
.hero h1 { max-width: 16em; margin-inline: auto; margin-bottom: .45em; }
.hero > p:first-of-type {
  max-width: 36em;
  margin-inline: auto;
  font-size: 1.15rem;
  color: var(--tw-text-secondary);
}
.hero .actions { justify-content: center; margin-top: 2rem; }
.platforms { font-size: .875rem; color: var(--tw-text-secondary); margin-top: .75rem; }
.hero img {
  margin-top: 3rem;
  width: 100%;
  border: 1px solid var(--tw-border);
  border-radius: 6px;
  background: var(--tw-bg-app-top);
}

/* --- Buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .7rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.btn-primary { background: var(--tw-btn-bg); color: var(--tw-btn-fg); }
.btn-primary:hover { background: var(--tw-btn-hover); }
.btn-secondary {
  background: transparent;
  border-color: var(--tw-border-strong);
  color: var(--tw-text-primary);
}
.btn-secondary:hover { background: var(--tw-surface); }
.btn:focus-visible { outline-offset: 3px; }

/* --- Features */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.features h2 { grid-column: 1 / -1; margin-bottom: .25rem; }
.features article {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 0;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 6px;
  overflow: hidden;
}
.features article p { color: var(--tw-text-secondary); }
.features article img {
  margin: auto -1.5rem 0;
  width: calc(100% + 3rem);
  max-width: none;
  border-top: 1px solid var(--tw-border);
}

/* --- Steps: a real sequence, so the numbers carry meaning */
.steps ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding-top: 1rem;
  border-top: 1px solid var(--tw-border-strong);
  color: var(--tw-text-secondary);
}
.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: .4rem;
  font-family: var(--tw-font-serif);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--tw-accent);
}
.steps strong { display: block; color: var(--tw-text-primary); font-weight: 600; }

/* --- Server */
.server {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 3rem;
  align-items: start;
}
.server h2, .server > p:first-of-type { grid-column: 1; }
.server > p:first-of-type { max-width: 36em; }
.server dl {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 6px;
}
.server dt { font-family: var(--tw-font-serif); font-size: 1.1rem; }
.server dd { margin: .2rem 0 1rem; color: var(--tw-text-secondary); }
.server dd:last-child { margin-bottom: 0; }
.server .actions { grid-column: 1; margin: .5rem 0 0; }

/* --- TomeReader: a separate product, set apart on its own sheet */
main > section.tomereader {
  width: min(1068px, calc(100% - 32px));
  margin-block: 4rem;
  padding: 2.25rem clamp(16px, 4vw, 2.75rem);
  background: var(--tw-bg-app-top);
  border: 1px solid var(--tw-border);
  border-radius: 6px;
}
.tomereader h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.tomereader p { max-width: 42em; margin: 0; color: var(--tw-text-secondary); }
.pill {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--tw-accent);
  color: #fff;
  font-family: var(--tw-font-sans);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.4;
}

/* --- Footer */
.site-footer {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--tw-border);
  font-size: .875rem;
  color: var(--tw-text-secondary);
}
main + .site-footer { margin-top: 2rem; }
.site-footer p { margin: 0 0 .4rem; }
.site-footer a { color: var(--tw-accent); }

/* --- Beta page: one narrow column, a letter rather than a page */
main.beta {
  max-width: 600px;
  margin-inline: auto;
  padding: 4rem 16px 2rem;
}
main.beta h2 { margin-top: 2.25rem; font-size: 1.4rem; }
main.beta ul { padding-left: 1.2rem; margin: 0 0 1rem; }
main.beta li { margin-bottom: .35rem; }
main.beta li::marker { color: var(--tw-border-strong); }
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin: 2.5rem 0 .75rem;
}
.addr {
  padding: .55rem .9rem;
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95rem;
  overflow-wrap: anywhere;
  user-select: all;
}
.fine { font-size: .875rem; color: var(--tw-text-secondary); }

/* --- 404 */
main.notfound { padding-block: 6rem 4rem; }

/* --- Narrow screens */
@media (max-width: 900px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .features article p { max-width: 40em; }
}

@media (max-width: 720px) {
  main > section { padding-block: 3rem; }
  main > .hero { padding-top: 3rem; }
  .hero img { margin-top: 2.25rem; }
  .site-header nav a:not(.signin) { display: none; }
  .steps ol,
  .server { grid-template-columns: minmax(0, 1fr); }
  .steps ol { gap: 1.5rem; }
  .server dl { grid-column: 1; grid-row: auto; margin-top: .5rem; }
  .server .actions { margin-top: 1.5rem; }
  main > section.tomereader { margin-block: 3rem; }
  main.beta { padding-top: 2.75rem; }
}

@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; }
  .hero > p:first-of-type { font-size: 1.05rem; }
  .cta { flex-direction: column; align-items: stretch; }
  .addr { text-align: center; }
}