/* Identify It only. Opaque reading surface keeps every quiz state independent of backdrop colours. */
[data-identify-surface] {
  background: #f8f6ed;
  color: #173f35;
  border: 1px solid #cdd8ca;
  border-radius: 20px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 16px 44px rgba(0, 20, 12, .25);
}
[data-identify-surface] header h1,
[data-identify-surface] header h1 span,
[data-identify-surface] header a,
[data-identify-surface] header button { color: #173f35; }
[data-identify-surface] .text-emerald-700 { color: #173f35; }
[data-identify-surface] .text-slate-500,
[data-identify-surface] .text-slate-400 { color: #45554b; }
[data-identify-surface] details { background: #e8ede1; color: #354e44; border-color: #b8c9b6; }
[data-identify-surface] details p,
[data-identify-surface] details b { color: #354e44; }
[data-identify-surface] .bg-emerald-500 { background: #173f35; color: #ffffff; }
[data-identify-surface] button:not(:disabled) { cursor: pointer; }
[data-identify-surface] button:focus-visible,
[data-identify-surface] a:focus-visible,
[data-identify-surface] summary:focus-visible {
  outline: 3px solid #1b6a50;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #f8f6ed;
}
[data-identify-surface] summary { min-height: 44px; align-content: center; }
@media (max-width: 639px) {
  [data-identify-surface] { border-radius: 0; border-inline: 0; }
}