{{define "common-style"}}
  <style>
    :root { --focus-color: #111; font-family: system-ui, sans-serif; line-height: 1.5; color-scheme: light dark; }
    body { margin: 0; background: #fff; color: #111; }
    main { width: min(100% - 32px, 560px); margin: 64px auto; }
    .brand { margin: 0 0 16px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
    h1 { margin: 0 0 40px; font-size: 1.5rem; font-weight: 600; }
    h2 { margin: 0 0 24px; font-size: 1.125rem; }
    .section { border-top: 1px solid currentColor; padding-top: 24px; }
    .section + .section { margin-top: 48px; }
    .action { box-sizing: border-box; display: block; width: 100%; min-height: 44px; margin-top: 24px; padding: 10px 12px; border: 1px solid currentColor; border-radius: 0; background: #111; color: #fff; font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
    .action.secondary { background: transparent; color: inherit; }
    [hidden] { display: none !important; }
    :where(a, button, input, textarea):focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; }
    .action:disabled { cursor: not-allowed; opacity: 0.55; }
    .status { min-height: 1.5em; margin: 16px 0 0; font-size: 0.875rem; line-height: 1.5; }
    @media (hover: hover) { .action:hover { background: #333; } .action.secondary:hover { background: #eee; } }
    @media (max-width: 480px) { main { margin-block: 32px; } }
    @media (prefers-color-scheme: dark) { :root { --focus-color: #eee; } body { background: #111; color: #eee; } .action { background: #eee; color: #111; } .action.secondary { background: transparent; color: inherit; } }
    @media (prefers-color-scheme: dark) and (hover: hover) { .action:hover { background: #ccc; } .action.secondary:hover { background: #2a2a2a; } }
  </style>
{{end}}