/* The examples share one quiet stage; Before retains its intentional problems. */
.problem-case-visual{
  width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;isolation:isolate;
  border:1px solid var(--preview-border);border-radius:var(--preview-stage-radius);
  background:var(--preview-bg);color:var(--preview-text)
}
.problem-case-visual.full{max-height:420px}
.problem-case-svg{
  display:block;width:100%;height:100%;overflow:hidden;
  font-family:var(--font-body);line-height:1;stroke-width:1;
  shape-rendering:geometricPrecision;text-rendering:optimizeLegibility
}
.problem-case-svg text{letter-spacing:0}
.problem-case-svg :is(rect,circle,ellipse,line,path,polygon,polyline){vector-effect:non-scaling-stroke}
.problem-case-svg .pc-panel,.problem-case-svg .pc-input{
  fill:var(--preview-panel);stroke:var(--preview-border)
}
.problem-case-svg .pc-panel{
  filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--preview-text) 5%,transparent))
}
.problem-case-svg .pc-button{fill:var(--preview-panel);stroke:var(--preview-border)}
.problem-case-svg .pc-package{fill:var(--preview-panel);stroke:var(--preview-border);stroke-width:1}
.problem-case-svg .pc-device{fill:var(--preview-line);stroke:var(--preview-border);stroke-width:1}
.problem-case-svg .pc-ink{fill:var(--preview-text)}
.problem-case-svg .pc-secondary{fill:var(--preview-muted)}
.problem-case-svg .pc-accent,.problem-case-svg .pc-accent-text{fill:var(--color-accent)}
.problem-case-svg .pc-soft{fill:var(--preview-soft)}
.problem-case-svg .pc-on-accent{fill:var(--color-on-accent)}
.problem-case-svg .pc-white{fill:#fff}
.problem-case-svg .pc-line{stroke:var(--preview-border);fill:none}
.problem-case-svg .pc-guide,.problem-case-svg .pc-accent-line{stroke:var(--color-accent);fill:none}
.problem-case-svg .pc-guide{opacity:.55}
.problem-case-svg .pc-on-accent-line{stroke:var(--color-on-accent);fill:none}
.problem-case-svg .pc-success-line{stroke:var(--color-success);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.problem-case-svg .pc-success{fill:var(--color-success)}
.problem-case-svg .pc-error{fill:var(--color-error)}
.problem-case-svg .pc-track{fill:var(--preview-border)}
/* Deliberately weak specimen contrast is limited to the Before drawing. */
.problem-case-svg .pc-low-contrast{fill:var(--color-demo-muted);opacity:.62}
.problem-case-svg .pc-conflict-blue-text{fill:#3559d8}
.problem-case-svg .pc-conflict-purple-text{fill:#7038c9}
.problem-case-svg .pc-conflict-orange-text{fill:#a85400}
.problem-case-svg .pc-conflict-green-text{fill:#16734b}
.problem-case-svg .pc-conflict-pink-text{fill:#b93876}
.problem-case-svg .pc-conflict-purple{fill:#7038c9}
.problem-case-svg .pc-conflict-orange{fill:#bf5d18}
.problem-case-svg .pc-conflict-green{fill:#16734b}
:root[data-theme=dark] .problem-case-svg .pc-conflict-blue-text{fill:#93adff}
:root[data-theme=dark] .problem-case-svg .pc-conflict-purple-text{fill:#c5a2ff}
:root[data-theme=dark] .problem-case-svg .pc-conflict-orange-text{fill:#ffc083}
:root[data-theme=dark] .problem-case-svg .pc-conflict-green-text{fill:#83dbb3}
:root[data-theme=dark] .problem-case-svg .pc-conflict-pink-text{fill:#ff9fc9}
@media(max-width:720px){.problem-case-visual.full{max-height:none}}