@font-face { font-family: "DM Sans"; font-weight: 500; src: url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; src: url(/fonts/dm-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-style: italic; src: url(/fonts/playfair-display-latin-500-italic.woff2) format("woff2"); }
:root { color-scheme: light; --bg: #f8f4ed; --ink: #171615; --soft: #827d76; --panel: #fffdf8; --line: rgba(23, 22, 21, .16); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --bg: #171615; --ink: #f8f4ed; --soft: #948e86; --panel: #1f1e1c; --line: rgba(248, 244, 237, .14); }
}
:root[data-theme="dark"] { color-scheme: dark; --bg: #171615; --ink: #f8f4ed; --soft: #948e86; --panel: #1f1e1c; --line: rgba(248, 244, 237, .14); }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink); font: 15px/1.5 "DM Sans", -apple-system, sans-serif; padding: 24px 16px; box-sizing: border-box; }
main { max-width: 420px; width: 100%; text-align: center; display: grid; justify-items: center; gap: 14px; }
main img { border-radius: 14px; }
h1 { margin: 6px 0 0; font-weight: 500; font-size: 40px; letter-spacing: -.065em; line-height: 1; }
h1 em { font-family: "Playfair Display", Georgia, serif; font-style: italic; }
p { margin: 0 0 8px; color: var(--soft); }
pre { width: 100%; box-sizing: border-box; text-align: left; background: var(--panel); border: 1px solid var(--line); padding: 16px; font: 12.5px/1.5 "DM Mono", ui-monospace, monospace; overflow-x: auto; box-shadow: 8px 8px 0 rgba(239, 143, 123, .16); }
#out-btn { border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--ink); font: 11px "DM Mono", monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 0 0 3px; }
#err { color: #c2462f; min-height: 1em; }