:root { color-scheme: light; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: #1f2933; background: #f4f5f7; }
header { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid #d5d9df; padding: 8px 16px; display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center; }
header h1 { font-size: 16px; margin: 0; }
header label { display: flex; align-items: center; gap: 6px; }
header nav { display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; }
#progress { font-weight: 600; }
#save-state { color: #52606d; font-size: 13px; }
#save-state.failed { color: #b42318; font-weight: 600; }
main { padding: 0 16px 48px; }
main.nodata { max-width: 720px; padding-top: 24px; }
h2 { margin: 28px 0 4px; font-size: 18px; scroll-margin-top: 90px; }
h2 small { font-weight: 400; color: #52606d; }
section.drawing { margin: 14px 0; background: #fff; border: 1px solid #d5d9df; border-radius: 6px; scroll-margin-top: 90px; }
section.drawing > .head { padding: 8px 12px; border-bottom: 1px solid #e4e7eb; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.head .name { color: inherit; text-decoration: none; font-weight: 600; }
.head small { color: #52606d; }
.head input.remark { flex: 1 1 220px; min-width: 140px; font: inherit; padding: 2px 6px; border: 1px solid #c3c9d1; border-radius: 4px; }
.head .status { font-size: 12px; color: #52606d; min-width: 4em; }
.head .status.failed { color: #b42318; font-weight: 600; }
.head .status button { font-size: 12px; }
section.reviewed > .head { background: #e9f6ec; }
section.reviewed .name::before { content: "\2713  "; color: #1b7f3b; }
body.hide-reviewed section.hidden { display: none; }
.row { display: flex; gap: 12px; padding: 12px; overflow-x: auto; align-items: flex-start; }
figure { margin: 0; flex: none; border: 2px solid #e4e7eb; border-radius: 4px; background: #fff; }
figure.ranked { border-color: #1d4ed8; }
figure.ranked figcaption { background: #eef3ff; }
figure.first { border-color: #1b7f3b; }
figure.first figcaption { background: #e9f6ec; }
figcaption { padding: 6px 8px; border-bottom: 1px solid #e4e7eb; background: #f8f9fa; white-space: nowrap; display: flex; gap: 4px 10px; align-items: center; flex-wrap: wrap; }
figcaption small { color: #52606d; }
figcaption .current { color: #1b7f3b; font-weight: 600; }
figcaption .warn { color: #a3470a; }
button { font: inherit; }
button.pick { -webkit-tap-highlight-color: transparent; position: relative; display: block; border: 0; padding: 8px; margin: 0; background: transparent; cursor: pointer; touch-action: manipulation; }
button.pick img { display: block; height: auto; }
.badge { position: absolute; top: 4px; left: 4px; min-width: 26px; height: 26px; padding: 0 4px; box-sizing: border-box; border-radius: 13px; background: #1d4ed8; color: #fff; font-weight: 700; font-size: 15px; line-height: 26px; text-align: center; display: none; }
figure.ranked .badge { display: block; }
figure.first .badge { background: #1b7f3b; }
section.none figure { border-color: #d5d9df; }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; background: #fff; }
th, td { border: 1px solid #d5d9df; padding: 4px 10px; text-align: right; }
th:first-child, td:first-child { text-align: left; }
#report-text { width: 100%; box-sizing: border-box; height: 24em; font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; }
.plain { columns: 3 220px; color: #52606d; }
@media (max-width: 600px) {
  header { padding: 6px 16px; gap: 4px 12px; }
  header h1 { display: none; }
  .row { padding: 8px; }
}