/* 3Dimge lenticular explainer 1.0.2 — styles only the [3dimge_explainer] component. Colours from the Blocksy palette.
   1.0.2: stays inside the content column (no alignwide); layout switches on the component's own width (container query);
   stage sized by aspect ratio and kept below Blocksy's sticky header; tighter step spacing. */
.dx{--dx-teal:var(--theme-palette-color-1,#176B68);--dx-ink:var(--theme-palette-color-3,#293532);--dx-mint:var(--theme-palette-color-6,#E8F4F0);--dx-line:var(--theme-palette-color-5,#E0E5DF);--dx-white:var(--theme-palette-color-8,#fff);--dx-top:calc(var(--admin-bar,0px) + var(--header-sticky-height,0px));container-type:inline-size;container-name:dx;margin-block:8px 32px}
.dx-scrolly{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
.dx-stage{position:sticky;top:calc(var(--dx-top) + 24px);aspect-ratio:4/3;max-height:calc(100vh - var(--dx-top) - 48px);width:100%;background:var(--dx-mint);border:1px solid var(--dx-line);border-radius:16px;overflow:hidden;align-self:start}
.dx-stage canvas{display:block;width:100%;height:100%}
.dx-bar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:14px}
.dx-segs{display:flex;gap:4px;flex:1;min-width:0}
.dx-segs button{flex:1;height:6px;min-height:0;border:0;padding:0;margin:0;border-radius:3px;background:rgba(23,107,104,.18);cursor:pointer;box-shadow:none}
.dx-segs button.on{background:var(--dx-teal)}
.dx-segs button:focus-visible{outline:2px solid var(--dx-teal);outline-offset:3px}
.dx-label{font-size:13px;font-weight:600;color:var(--dx-teal);white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1}
.dx-steps{padding-block:24px 22vh}
.dx-step{min-height:46vh;display:flex;align-items:flex-start;padding-top:8vh}
.dx-step:first-child{padding-top:0}
.dx-step-in{max-width:44ch}
.dx-num{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--dx-teal)}
.dx-step h3{margin:6px 0 12px;text-wrap:balance}
.dx-step p{margin:0 0 12px}
.dx-fact{display:inline-block;font-size:15px;line-height:1.45;background:var(--dx-white);border:1px solid var(--dx-line);border-radius:8px;padding:7px 11px;color:var(--dx-ink)}
@container dx (max-width:700px){
  .dx-scrolly{grid-template-columns:minmax(0,1fr);gap:0}
  .dx-stage{top:var(--dx-top);aspect-ratio:auto;max-height:none;height:calc(56vh - var(--header-sticky-height,0px));min-height:280px;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);border-radius:0;border-width:0 0 1px;z-index:2}
  .dx-steps{position:relative;z-index:1;padding-block:0 30vh}
  .dx-step{min-height:60vh;padding-top:5vh}
  .dx-step:first-child{padding-top:5vh}
}