:root {
  color-scheme: light dark;
  --paper: #F3F0E8; --ink: #1A1A17; --faint: #6F6C63; --rule: #D9D4C7; --pond: #2E6B45;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #11140F; --ink: #E8E4D8; --faint: #8E8B80; --rule: #2A2E26; --pond: #8FD19E; }
}
html { background: var(--paper); }
body {
  margin: 0 auto; max-width: 46rem; padding: 2.5rem 1.25rem 3rem;
  color: var(--ink); font: 1.0625rem/1.55 var(--serif);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover, a:focus-visible { color: var(--pond); }

.mast { display: flex; align-items: center; gap: 0.6rem; font: 0.95rem var(--mono); }
.mast > a { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.mast .who { margin-left: auto; color: var(--faint); font-size: 0.85rem; }
.frog { width: 40px; height: 32px; color: var(--pond); }
.frog .lid { transform-box: fill-box; transform-origin: center; animation: blink 7s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(0.1); } }
@media (prefers-reduced-motion: reduce) { .frog .lid { animation: none; } }

h1 {
  font-weight: 400; font-size: clamp(2rem, 6.5vw, 3.25rem); line-height: 1.08;
  letter-spacing: -0.015em; margin: 4.5rem 0 1.25rem; max-width: 18em; text-wrap: balance;
}
.sub { color: var(--faint); max-width: 32em; margin: 0 0 4rem; }

ol.rows { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); counter-reset: row; }
ol.rows > li {
  counter-increment: row; display: grid; grid-template-columns: 3rem 1fr auto;
  column-gap: 1rem; align-items: baseline; padding: 1.4rem 0; border-bottom: 1px solid var(--rule);
}
ol.rows > li::before { content: counter(row, decimal-leading-zero); font: 0.85rem var(--mono); color: var(--faint); }
ol.rows h2 { font-weight: 400; font-size: 1.75rem; margin: 0; line-height: 1.2; }
.what { grid-column: 2; margin: 0.3rem 0 0; color: var(--faint); }
.links { grid-column: 3; grid-row: 1; font: 0.9rem var(--mono); display: flex; gap: 1rem; }

/* The app list: no numbers, since the apps have no order; the icon and name share a line and
   the description and status run the full width beneath. */
ol.apps > li { grid-template-columns: auto 1fr auto; column-gap: 0.9rem; align-items: center; }
ol.apps > li::before { content: none; }
ol.apps .icon { grid-column: 1; grid-row: 1; width: 3.25rem; height: 3.25rem; border-radius: 22.5%; }
ol.apps h2 { grid-column: 2; grid-row: 1; }
ol.apps .what, ol.apps .status { grid-column: 1 / -1; }
ol.apps .what { margin-top: 0.75rem; }
ol.apps .status { margin: 0.5rem 0 0; font: 0.8rem var(--mono); color: var(--pond); }
ol.apps .links { grid-column: 3; grid-row: 1; }

ol.rows ul { grid-column: 2 / -1; margin: 0.6rem 0 0; padding-left: 1.1rem; color: var(--faint); }
ol.rows ul li { margin: 0.35rem 0; }
ol.rows ul li::marker { color: var(--faint); }
.close { margin: 3rem 0 0; max-width: 32em; }
.close p { margin: 0 0 1rem; }

footer { margin-top: 5rem; font: 0.85rem/1.8 var(--mono); color: var(--faint); }
footer p { margin: 0; }

@media (max-width: 34rem) {
  ol.rows > li { grid-template-columns: 2.25rem 1fr; }
  .links { grid-column: 2; grid-row: auto; margin-top: 0.75rem; }
  ol.apps > li { grid-template-columns: auto 1fr; }
  ol.apps .icon { width: 2.75rem; height: 2.75rem; }
  ol.apps .links { grid-column: 1 / -1; grid-row: auto; }
  .links a { padding: 0.6rem 0; }
}