:root {
  --bg: #f5f6f8; --card: #fff; --text: #1c1f24; --muted: #667085; --line: #d9dde3;
  --accent: #3b5bdb; --accent-text: #fff; --error-bg: #fdecec; --error: #b42318; --ok-bg: #e8f3ec; --ok: #166534;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121417; --card: #1c1f24; --text: #e6e8eb; --muted: #98a2b3; --line: #2e333a;
          --accent: #748ffc; --accent-text: #0b0d10; --error-bg: #3a1d1d; --error: #fca5a5; --ok-bg: #16281d; --ok: #86efac; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.brand { font-weight: 600; margin-right: auto; }
.langs { display: flex; gap: 4px; }
main { max-width: 720px; margin: 32px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.card.narrow { max-width: 380px; margin: 0 auto; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
label { display: block; margin: 14px 0 4px; font-weight: 500; }
input, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; color: inherit;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
input[type=file] { padding: 8px; }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: transparent; color: inherit; border-radius: 8px; padding: 6px 10px; }
button.active { border-color: var(--accent); color: var(--accent); }
button.primary { margin-top: 18px; width: 100%; padding: 12px; background: var(--accent); color: var(--accent-text); border: 0; font-weight: 600; }
button.link { border: 0; color: var(--muted); }
.hint { color: var(--muted); font-size: .9rem; margin: 6px 0 0; word-break: break-word; }
.msg { padding: 10px 12px; border-radius: 8px; }
.msg.error { background: var(--error-bg); color: var(--error); }
.msg.notice { background: var(--ok-bg); color: var(--ok); }
.card + .card { margin-top: 20px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
a { color: var(--accent); }
.center { text-align: center; }
button:disabled { opacity: .5; cursor: not-allowed; }
.tasks { list-style: none; margin: 0; padding: 0; }
.tasks li { padding: 10px 0; border-top: 1px solid var(--line); }
.tasks li:first-child { border-top: 0; }
.prompt { color: var(--muted); font-size: .9rem; word-break: break-word; }
.badge { font-size: .8rem; margin-left: 8px; color: var(--muted); }
.badge.done { color: var(--ok); }
.badge.error { color: var(--error); }
video.result { display: block; width: 100%; border-radius: 8px; background: #000; margin: 12px 0; }
a.button { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; text-decoration: none; }
.spinner { display: inline-block; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 1s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
:root { --ex-bg: #fff4e0; --ex: #8a4b00; }
@media (prefers-color-scheme: dark) { :root { --ex-bg: #33260f; --ex: #fbbf6a; } }
.msg.example { background: var(--ex-bg); color: var(--ex); }
.badge.example { color: var(--ex); }
a.nav { color: var(--muted); text-decoration: none; }
main > h1 { margin-bottom: 16px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; }
.stats div { background: var(--bg); border-radius: 8px; padding: 10px 12px; }
.stats dt { color: var(--muted); font-size: .85rem; }
.stats dd { margin: 2px 0 0; font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 8px 6px; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 500; border-top: 0; }
tr.off td { color: var(--muted); }
td.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
details summary { cursor: pointer; color: var(--accent); padding: 6px 0; }
form.inline { display: flex; gap: 6px; margin-top: 6px; }
form.inline input { margin: 0; padding: 6px 8px; min-width: 140px; }
h2.sub { margin-top: 24px; }
form.grid label { margin-top: 10px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; }
label.check input { width: auto; margin: 0; }
code { font-size: .85em; }