:root {
  color-scheme: light;
  --still-canvas: #f9f9f5;
  --still-surface: #fff;
  --still-surface-muted: #f1f4f0;
  --still-ink: #27342b;
  --still-forest: #304c3b;
  --still-sage: #8bad92;
  --still-muted: #556758;
  --still-border: #c1cbbd;
  --still-danger: #a44343;
  --still-radius-sm: 8px;
  --still-radius-md: 12px;
  --still-radius-lg: 16px;
  --still-content-max: 720px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  line-height: 1.6;
  color: var(--still-ink);
  background: var(--still-canvas);
  scrollbar-gutter: stable;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-block-size: 100svh; }
button, input, textarea, select { font: inherit; }
a { color: var(--still-forest); text-underline-offset: .2em; overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--still-forest); outline-offset: 4px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem clamp(1rem, 5vw, 4rem); }
.brand { font: 700 2.2rem Georgia, serif; letter-spacing: -.08em; text-decoration: none; }
.brand span { color: var(--still-muted); }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-inline-start: auto; }
nav a { display: inline-flex; align-items: center; min-block-size: 44px; }
main { inline-size: min(var(--still-content-max), calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2rem, 6vw, 5rem); }
h1 { font: 400 clamp(2rem, 5vw, 2.75rem)/1.2 Georgia, serif; letter-spacing: -.035em; margin-block: 0 1rem; overflow-wrap: anywhere; }
h2 { font: 400 1.6rem/1.3 Georgia, serif; }
p { margin-block: 0 1rem; }
.lede, .muted, footer { color: var(--still-muted); }
.lede { margin-block-end: 2rem; }
.panel, .composer { padding: clamp(1rem, 4vw, 1.5rem); border: 1px solid var(--still-border); border-radius: var(--still-radius-lg); background: var(--still-surface); }
.stack { display: grid; gap: .75rem; }
label { display: block; color: var(--still-muted); }
input:not([type=hidden]), textarea, select { inline-size: 100%; min-block-size: 44px; padding: .65rem; border: 1px solid var(--still-border); border-radius: var(--still-radius-sm); background: var(--still-surface); color: var(--still-ink); }
textarea { resize: vertical; field-sizing: content; min-block-size: 9rem; max-block-size: 60svh; margin-block: .75rem; }
button, .button { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-block-size: 44px; padding: .6rem 1rem; border: 1px solid var(--still-forest); border-radius: var(--still-radius-sm); background: var(--still-forest); color: white; cursor: pointer; text-decoration: none; }
button:active, .button:active { filter: brightness(.9); }
.quiet { background: transparent; color: var(--still-forest); border-color: var(--still-border); }
.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-block-start: 1rem; }
.error { color: var(--still-danger); border-inline-start: 3px solid currentColor; padding-inline-start: 1rem; }
.receipt { background: var(--still-surface-muted); padding: 1rem; border-radius: var(--still-radius-md); }
footer { text-align: center; padding: 2rem 1rem; font-size: .875rem; }
.skip { position: absolute; inset-block-start: -10rem; padding: 1rem; background: white; }
.skip:focus { inset-block-start: 0; }
.source-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.source-list li { padding: 1.25rem; border: 1px solid var(--still-border); border-radius: var(--still-radius-md); background: white; }
.source-list h2 { font: 600 1.1rem/1.5 ui-sans-serif, system-ui, sans-serif; margin-block: 0 .5rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.prose { overflow-wrap: anywhere; }
.prose img { max-inline-size: 100%; block-size: auto; }
.prose pre { font-family: ui-monospace, monospace; }
.prose > :first-child { margin-block-start: 0; }
dd { margin-inline: 0; overflow-wrap: anywhere; margin-block-end: 1rem; }
dt { font-weight: 600; }
summary { cursor: pointer; padding-block: .75rem; }
small { font-size: .875rem; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } button:hover, .button:hover { filter: brightness(.95); } }