:root {
  color-scheme: light dark;
  --accent: #1f6feb;
  --muted: #6e7781;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
body { margin: 0; line-height: 1.6; }
main { max-width: 760px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: 0.4em 0; }
.lead { margin: 0.4em 0; }
.privacy { color: var(--muted); font-size: 0.9rem; margin: 0.2em 0 1em; }
.picker {
  display: block; text-align: center; padding: 18px; border: 2px dashed var(--accent);
  border-radius: 12px; cursor: pointer; font-weight: 600; color: var(--accent);
}
.picker input { display: block; margin: 8px auto 0; max-width: 100%; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 0.9rem; }
dt { color: var(--muted); }
dd { margin: 0; word-break: break-all; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
figure { margin: 0; }
canvas { width: 100%; height: auto; max-height: 50vh; object-fit: contain; background: #000; border-radius: 6px; display: block; }
figcaption { text-align: center; font-size: 0.85rem; color: var(--muted); }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.row input { flex: 1; }
.hint { color: var(--muted); font-size: 0.8rem; margin: 0 0 8px; }
.options { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0; }
select { font-size: 1rem; padding: 4px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
button, .button {
  font-size: 1rem; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; text-decoration: none; display: inline-block;
}
button:disabled { opacity: 0.4; cursor: default; }
button.secondary { background: var(--muted); }
progress { width: 100%; height: 12px; }
.status { min-height: 1.6em; }
.warn { background: #fff8c5; color: #3b2e00; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; }
.error { background: #ffebe9; color: #82071e; padding: 8px 12px; border-radius: 8px; }
footer { margin-top: 32px; font-size: 0.8rem; color: var(--muted); }
footer a { color: inherit; }