/* Picture strips (spec §7.2): real photos, one big or several side by side; plus the tone line. */
.pic { display: flex; gap: 6px; width: 100%; container-type: inline-size; }
.pic.one { max-width: min(100%, calc(44vh * 4 / 3)); margin-inline: auto; }
.panel {
  position: relative; flex: 1 1 0; min-width: 0; aspect-ratio: 1; border-radius: 16px; overflow: hidden;
  background: var(--surface-2); container-type: inline-size;
}
.pic.one .panel { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.pic.small .panel { border-radius: 12px; }
.panel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panel.is-digit { display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
.digit { font-weight: 900; font-size: 58cqi; line-height: 1; color: var(--blue); font-variant-numeric: tabular-nums; }
.pic.one .digit { font-size: 46cqi; }
.panel.no img, .panel.no .digit { filter: grayscale(.7) brightness(.85); }
.no-mark {
  position: absolute; inset: 0; margin: auto; width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: max(5px, 7cqi) solid var(--bad); box-shadow: 0 0 0 2px rgb(255 255 255 / .7), inset 0 0 0 2px rgb(255 255 255 / .7);
}
.pic.one .no-mark { width: 62%; border-width: max(6px, 5cqi); }
.no-mark::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 118%; height: max(5px, 7cqi); background: var(--bad);
  transform: translate(-50%, -50%) rotate(-45deg); border-radius: 99px;
}
.pic.one .no-mark::after { height: max(6px, 5cqi); }
.badge {
  position: absolute; top: 6px; width: clamp(26px, 30cqi, 60px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: clamp(16px, 19cqi, 38px); line-height: 1;
  box-shadow: 0 2px 8px rgb(0 0 0 / .35), 0 0 0 2px #fff;
}
.count-badge { left: 6px; background: var(--accent); }
.q-badge { right: 6px; background: var(--blue); }
.pic.one .badge { width: clamp(30px, 17cqi, 64px); font-size: clamp(18px, 11cqi, 40px); top: 10px; }
.pic.one .count-badge { left: 10px; }
.pic.one .q-badge { right: 10px; }

/* tone line */
.tone-wrap { display: flex; justify-content: center; min-height: 44px; }
.tone-wrap .tone-line { height: 64px; width: auto; }
.tone-line .tone-path { stroke-dasharray: 100; stroke-dashoffset: 0; }
.tone-line.drawing .tone-path { animation: draw .8s linear both; }
.tone-line.drawing .tone-dot { animation: pop .3s ease both; }
@keyframes draw { from { stroke-dashoffset: 100; } }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.tone-line .tone-dot { transform-box: fill-box; transform-origin: center; }