[data-interactive="view-projection"] { min-width: 0; }
[data-interactive="view-projection"] .vp-controls { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; padding: 1rem; border: 1px solid var(--rule); background: var(--surface); }
[data-interactive="view-projection"] .vp-controls[hidden],
[data-interactive="view-projection"] .vp-live[hidden] { display: none; }
[data-interactive="view-projection"] label { display: flex; gap: .35rem; flex-direction: column; max-width: 100%; }
[data-interactive="view-projection"] label:has(input) { flex-direction: row; align-items: center; }
[data-interactive="view-projection"] select { max-width: 100%; color: var(--ink); background: var(--surface); padding: .5rem; border: 1px solid var(--rule); border-radius: .25rem; font: inherit; }
[data-interactive="view-projection"] button { font: inherit; padding: .6rem .8rem; color: var(--ink); background: var(--surface); border: 2px solid var(--accent, var(--ink)); border-radius: .3rem; cursor: pointer; }
[data-interactive="view-projection"] :is(select,button,input):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
[data-interactive="view-projection"] .vp-live { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1rem; align-items: center; }
[data-interactive="view-projection"] svg { display: block; width: 100%; height: auto; color: var(--ink); }
[data-interactive="view-projection"] .vp-views svg text { fill: currentColor; }
[data-interactive="view-projection"] .vp-guide { opacity: .45; }
[data-interactive="view-projection"] .vp-feedback { grid-column: 1 / -1; padding: .7rem; border-left: 4px solid var(--flag); }
[data-interactive="view-projection"][data-vp-ready] .vp-static { display: none; }
@media (max-width: 650px) {
  [data-interactive="view-projection"] .vp-live { grid-template-columns: minmax(0, 1fr); }
  [data-interactive="view-projection"] .vp-pictorial { max-width: 340px; margin: auto; width: 100%; }
}
@media print {
  [data-interactive="view-projection"] .vp-controls,
  [data-interactive="view-projection"] .vp-live { display: none !important; }
  [data-interactive="view-projection"] .vp-static { display: block !important; }
}