:root {
  --color-text-primary: #010101;
  --color-text-secondary: #707070;
  --color-surface-card: #fff;
  --color-background-page: #f5f5f5;
  --color-border-divider: #e5e7eb;
  --color-brand-primary: #62c5fe;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text-primary);
  background: var(--color-background-page);
  line-height: 1.6;
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p, figure { margin: 0; }
a { color: inherit; text-decoration: underline; text-underline-offset: 3px; touch-action: manipulation; }
a:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 4px; }
.preview-directory { max-width: 640px; margin: auto; padding: 32px 20px; display: grid; gap: 24px; }
h1 { font-size: 22px; line-height: 1.4; }
h2 { font-size: 18px; line-height: 1.5; }
.previews { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.preview-card { min-width: 0; padding: 20px; background: var(--color-surface-card); border: 1px solid var(--color-border-divider); overflow-wrap: anywhere; }
.preview-card p { margin-top: 8px; font-size: 14px; color: var(--color-text-secondary); }
.preview-card .updated { font-size: 12px; }
.open-preview { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 22px; margin-top: 20px; border-radius: 22px; background: var(--color-text-primary); color: var(--color-surface-card); font-size: 13px; font-weight: 600; text-decoration: none; }
.qr-links { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 4px; font-size: 14px; }
.qr-links a { display: inline-flex; align-items: center; min-height: 44px; }
.qr-code { min-width: 0; display: grid; justify-items: center; gap: 16px; text-align: center; }
.qr-code img { display: block; width: min(100%, 280px); height: auto; image-rendering: pixelated; background: var(--color-surface-card); }
figcaption { max-width: 100%; overflow-wrap: anywhere; font-size: 14px; }

/* Keep the button's original size while its alternate label is shown. */
.open-preview { position: relative; }
.opening-label { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; white-space: nowrap; }
.open-preview[data-opening] .preview-label { visibility: hidden; }
.open-preview[data-opening] .opening-label { display: flex; }
.open-preview[data-opening] { cursor: wait; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }