:root {
  --bg: #ffffff; --fg: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --accent: #0a66c2;
  --on: #0a66c2; --on-fg: #ffffff; --err-bg: #fde8e8; --err-fg: #9b1c1c; --box: #ff2d55;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161618; --fg: #f2f2f7; --muted: #a1a1a6; --line: #3a3a3c; --accent: #4ea1ff;
    --on: #4ea1ff; --on-fg: #0b0b0c; --err-bg: #3b1515; --err-fg: #ffb4b4;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1400px; margin: 0 auto; padding: 16px; }
#landing, #done { max-width: 760px; }
h1 { font-size: 1.6rem; margin: 8px 0 12px; }
h2 { font-size: 1.2rem; } h3 { font-size: 1rem; margin-bottom: 4px; }
.muted { color: var(--muted); } .small { font-size: 0.85rem; } .red { color: var(--box); }
.rubric { border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px; margin: 16px 0; }
kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 0.8em; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
button:disabled { opacity: 0.45; cursor: default; }
button.on { background: var(--on); color: var(--on-fg); border-color: var(--on); }
#start, #next, #again { background: var(--accent); color: var(--on-fg); border-color: var(--accent); }
.ghost { background: transparent; }
form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form label { width: 100%; font-weight: 600; }
input, textarea { font: inherit; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
#name { flex: 1 1 240px; } textarea { width: 100%; }
.error { position: sticky; top: 0; z-index: 10; margin: 0; padding: 10px 16px; background: var(--err-bg); color: var(--err-fg); }
.bar { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.bar #progress { font-weight: 700; }
.bar #toggle { margin-left: auto; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 16px; align-items: start; }
.shot { position: relative; line-height: 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--line); }
.box { position: absolute; border: 2px solid var(--box); box-shadow: 0 0 0 1px #fff; pointer-events: none; }
.shot.hide-box .box { display: none; }
.panel canvas { width: 100%; height: auto; border: 1px solid var(--line); background: #000; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; padding: 6px 10px 10px; }
legend { font-weight: 700; padding: 0 4px; }
.instr { margin: 0 0 8px; }
fieldset button { margin: 2px 4px 2px 0; }
.nav { display: flex; justify-content: space-between; margin-top: 8px; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
}