/* Rounded, quiet examples. Specimens that teach colour keep their colour. */
.code-diagram:not([data-color-study="true"]),
.interactive-demo .demo-stage .diagram,
.problem-case-visual{
  --color-accent:var(--preview-strong);
  --color-on-accent:var(--preview-reverse);
  --color-accent-soft:var(--preview-soft);
  --color-text:var(--preview-text);
  --color-secondary:var(--preview-muted);
  --color-muted:var(--preview-muted);
}
.code-diagram:not([data-color-study="true"]) .term-visual-svg .v-accent{fill:var(--preview-strong)}
.code-diagram:not([data-color-study="true"]) .term-visual-svg .v-soft{fill:var(--preview-soft)}
.code-diagram:not([data-color-study="true"]) .term-visual-svg .v-line{stroke:var(--preview-strong)}
/* Path guides communicate the key geometry with a restrained theme accent. */
.code-diagram:is([data-visual-id="vector-path"],[data-visual-id="vector-anchor-point"],[data-visual-id="bezier-handle"]) .term-visual-svg .v-line{stroke:var(--preview-highlight)}
.code-diagram .motion-visual :is(.mv-outline,.mv-accent-line,.mv-wave-line){stroke-linecap:round;stroke-linejoin:round}
.interactive-demo .demo-stage .diagram :is(.demo-button,.secondary-demo,.fake-input){border-radius:8px}
.interactive-demo .demo-stage .diagram :is(.example-copy,.example-form,.contrast-copy,.alignment-example){border-radius:var(--preview-radius)}
.problem-case-visual,.problem-example .problem-case-visual,.case-card>.problem-case-visual,
.interactive-demo,.code-diagram.full,.term-card .code-diagram{border-radius:var(--preview-stage-radius)}
.style-visual,.style-visual-full{border-radius:var(--preview-stage-radius)}

/* Theme colour communicates actions and focus; decorative masses stay neutral. */
.code-diagram[data-visual-id] .term-visual-svg .v-important,
.code-diagram:is([data-preview-subject="design-components"],[data-preview-subject="design-interaction"],[data-preview-subject="theory-visual"],[data-preview-subject="theory-cognition"]) .term-visual-svg .v-accent{
  fill:var(--preview-highlight)
}
.code-diagram[data-visual-id] .term-visual-svg .v-important-line,
.code-diagram:is([data-preview-subject="design-components"],[data-preview-subject="design-interaction"]) .term-visual-svg .v-line,
.code-diagram[data-visual-id] .motion-visual :is(.mv-outline,.mv-accent-line,.mv-wave-line){
  stroke:var(--preview-highlight)
}
.interactive-demo .demo-stage .diagram .demo-button{background:var(--preview-highlight)}
.interactive-demo .demo-stage .diagram .example-copy.before .demo-button{background:var(--color-demo-muted)}
.problem-case-svg :is(.pc-accent,.pc-accent-text){fill:var(--preview-highlight)}
.problem-case-svg .pc-accent-line{stroke:var(--preview-highlight)}
.code-diagram .motion-visual .mv-on-accent{fill:var(--preview-reverse)}
.style-visual-svg .sv-theme-accent{fill:var(--preview-highlight)}
.style-visual-svg .sv-theme-line{stroke:var(--preview-highlight)}
/* Semantic focus must also win over renderer-local inline annotation colours. */
.code-diagram[data-visual-id] .term-visual-svg .v-important{fill:var(--preview-highlight)!important}
.code-diagram[data-visual-id] .term-visual-svg .v-important-line{stroke:var(--preview-highlight)!important}