:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background: #f4f6f8;
  font-synthesis: none;
  line-height: 1.5;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }

.site-header,
main {
  width: min(100%, 1088px);
  margin: 0 auto;
  padding-inline: 24px;
}

.site-header { padding-block: 24px; }
.site-header a {
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.site-header a:hover { text-decoration: underline; }
main { padding-block: 20px 48px; }
h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.25; letter-spacing: -0.025em; }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
p { margin: 0; }
.intro, .empty-state, .capture-status { color: #667085; }
.intro { font-size: 15px; }
.capture-form { margin-top: 28px; }
.controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.field { flex: 0 1 160px; min-width: 0; }
.url-field { flex: 1 1 280px; }
label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
input, select, button { font: inherit; font-size: 14px; border: 1px solid #d0d5dd; border-radius: 8px; }
input, select { width: 100%; min-width: 0; height: 40px; padding: 8px 10px; color: inherit; background: #fff; }
input::placeholder { color: #667085; opacity: 1; }
button { min-height: 40px; padding: 8px 14px; background: #fff; color: #111827; cursor: pointer; }
.primary-button { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 500; }
.primary-button:hover { background: #1d4ed8; border-color: #1d4ed8; }
button:disabled { color: #667085; background: #f9fafb; border-color: #e4e7ec; cursor: not-allowed; }
a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.capture-status { margin-top: 10px; font-size: 13px; }
.capture-status:empty { display: none; }
.capture-status[data-error="true"] { color: #b42318; }
.preview-section { margin-top: 32px; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.preview-area { min-height: 320px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; overflow: hidden; }
.empty-state { display: grid; place-items: center; min-height: 318px; padding: 24px; font-size: 14px; text-align: center; }
.preview-area img { display: block; width: 100%; height: auto; }

@media (max-width: 600px) {
  .site-header, main { padding-inline: 16px; }
  .site-header { padding-block: 20px; }
  main { padding-top: 12px; }
  .controls { flex-direction: column; align-items: stretch; }
  .field { flex: auto; width: 100%; }
  .preview-area { min-height: 240px; }
  .empty-state { min-height: 238px; }
}