.structure-model { min-width: 0; color: rgb(var(--ink)); }
.structure-model .journey-image-plane { aspect-ratio: 4/3; background: rgb(var(--surface-raised)); }
.structure-model .journey-image-plane > img { width: 100%; height: 100%; object-fit: contain; }
.structure-canvas { position: absolute; inset: 0; visibility: hidden; }
.structure-canvas canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.structure-model[data-model-state="ready"] .structure-canvas { visibility: visible; }
.structure-model[data-model-state="ready"] .journey-image-plane > :is(img,svg) { visibility: hidden; }
.structure-canvas canvas:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: -3px; }
.structure-toolbar, .structure-commands { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.structure-toolbar { justify-content: space-between; border-block: 1px solid rgb(var(--rule)); padding-block: 8px; margin-top: 8px; }
.structure-toolbar :is(button,a) { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; color: rgb(var(--ink)); background: transparent; border: 0; border-radius: 0; cursor: pointer; }
.structure-toolbar :is(button,a):hover, .structure-toolbar button[aria-pressed="true"] { background: rgb(var(--ink)/.09); }
.structure-toolbar :is(button,a):focus-visible, .structure-layers input:focus-visible { outline: 2px solid rgb(var(--ink)); outline-offset: 2px; }
.structure-toolbar [data-tip]::after { content: attr(data-tip); pointer-events: none; position: absolute; z-index: 4; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 7px 9px; background: rgb(var(--ink)); color: rgb(var(--surface-raised)); white-space: nowrap; font: 12px/1.4 'DM Sans',sans-serif; opacity: 0; visibility: hidden; }
.structure-toolbar [data-tip]:is(:hover,:focus-visible)::after { opacity: 1; visibility: visible; }
.structure-toolbar [data-model-action="interact"]::after { left: 0; transform: none; }
.structure-toolbar a[data-tip]::after { left: auto; right: 0; transform: none; }
.structure-layers { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 6px; }
.structure-layers label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 13px/1.4 'DM Sans',sans-serif; cursor: pointer; }
.structure-layers input { accent-color: rgb(var(--ink)); width: 17px; height: 17px; }
.structure-model [hidden] { display: none !important; }
.structure-error { margin: 0; color: rgb(var(--secondary)); font: 12px/1.5 'DM Sans',sans-serif; }
.structure-error:empty { display: none; }
.structure-model:fullscreen { display: flex; flex-direction: column; padding: 20px; background: rgb(var(--surface-raised)); width: 100%; height: 100%; overflow: auto; }
.structure-model:fullscreen .journey-image-plane { flex: 1; min-height: 0; aspect-ratio: auto; }
.structure-model:fullscreen .structure-toolbar { justify-content: center; }
.structure-model:fullscreen .structure-layers { justify-content: center; }
@media (min-width: 761px) and (min-height: 800px) and (prefers-reduced-motion: no-preference) {
  [data-journey-sequence="structure"]:has(.structure-model) .journey-stages > li:last-child { min-height: max(230px, calc(var(--structure-figure-height, 740px) - 42svh + 132px)); }
}
@media (max-width: 760px) {
  .structure-toolbar { gap: 0; }
  .structure-commands { flex: 1; gap: 0; }
  .structure-model .journey-image-plane { aspect-ratio: 1/1; }
  .structure-layers { gap: 8px 20px; }
}