/* Served as a file, not inline, so the Content-Security-Policy can allow
   styles from this origin only. */
:root {
  color-scheme: light dark;
  --fg: #1f2328; --muted: #59636e; --bg: #ffffff; --accent: #1f6feb; --code: #f6f8fa;
}
@media (prefers-color-scheme: dark) {
  :root { --fg: #e6edf3; --muted: #9198a1; --bg: #0d1117; --accent: #4493f8; --code: #151b23; }
}
body { margin: 0; font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
main { max-width: 40rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 3rem; }
h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 1rem; overflow-wrap: anywhere; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.5rem; }
pre { background: var(--code); padding: 0.75rem 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.85rem; margin: 0; }
[hidden] { display: none !important; }
/* The box, not the pre, reserves the button's column: a pre's own right
   padding scrolls away with a long line, which then runs under the button. */
.copyable { position: relative; background: var(--code); border-radius: 6px; padding-right: 4.5rem; }
.copyable pre { background: none; border-radius: 0; }
.copyable button { position: absolute; top: 0.6rem; right: 0.8rem; font-size: 0.85rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
button.button { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.button.secondary { background: var(--code); color: var(--fg); }
.button.danger { background: #cf222e; }
a { color: var(--accent); }
code { background: var(--code); padding: 0.1em 0.3em; border-radius: 4px; font-size: 0.9em; }
footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--code); font-size: 0.9rem; }
.brand { font-weight: 700; color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.button { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 600; text-decoration: none; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }