.iso { width: 100%; max-width: var(--fig-media); height: auto; display: block;
       margin-inline: auto; color: var(--ink); }
.on-ink .iso, .dark-region .iso { color: var(--paper); }

.iso .layer   { transition: transform var(--t-draw, 600ms) var(--ease-draw, cubic-bezier(.25,.1,0,1)),
                            opacity 250ms ease; }
.iso .planes  { transition: transform 420ms cubic-bezier(.2,.8,.2,1);
                transform-box: fill-box; transform-origin: center; }
.iso .anno    { transition: opacity var(--t-draw, 600ms) ease 550ms; }
.iso .lbl     { opacity: .55; transition: opacity 200ms ease; }
.iso .leader  { opacity: .38; transition: opacity 200ms ease; }
.iso .face    { vector-effect: non-scaling-stroke; }

.iso .layer:hover .planes,
.iso .layer:focus-visible .planes { transform: translateY(-9px) scale(1.05); }
.iso .layer:hover .lbl,
.iso .layer:focus-visible .lbl    { opacity: 1; }
.iso .layer:hover .leader,
.iso .layer:focus-visible .leader { opacity: .8; }
.iso:hover        .layer:not(:hover)        { opacity: .28; }
.iso:focus-within .layer:not(:focus-within) { opacity: .28; }
.iso .layer:focus { outline: none; }
.iso .layer:focus-visible .face { stroke-width: 2.4; }

.rd-armed .iso:not(.rd-in) .L1 { transform: translateY(-198px); }
.rd-armed .iso:not(.rd-in) .L2 { transform: translateY(-66px); }
.rd-armed .iso:not(.rd-in) .L3 { transform: translateY(66px); }
.rd-armed .iso:not(.rd-in) .L4 { transform: translateY(198px); }
.rd-armed .iso:not(.rd-in) .anno,
.rd-armed .iso:not(.rd-in) .thread { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .iso .layer, .iso .planes, .iso .anno, .iso .lbl, .iso .leader { transition: none; }
  .iso .layer:hover .planes, .iso .layer:focus-visible .planes   { transform: none; }
}

.lyr-fig { display: block; width: 100%; height: auto; }

.lyr-fig .lyr .face { fill: none; stroke: var(--rev-rule); stroke-width: 1.2;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.lyr-fig .lyr.hi .face { stroke: var(--rev-fg); stroke-width: 1.4; }

.lyr-fig .d0 .top  { fill: color-mix(in srgb, var(--rev-tint) 8%, var(--rev-ground)); }

.lyr-fig .d0 .side { fill: color-mix(in srgb, var(--rev-tint) 4%, var(--rev-ground)); }

.lyr-fig .d1 .top  { fill: color-mix(in srgb, var(--rev-tint) 12%, var(--rev-ground)); }

.lyr-fig .d1 .side { fill: color-mix(in srgb, var(--rev-tint) 6%, var(--rev-ground)); }

.lyr-fig .seam, .lyr-fig .qd .face { fill: none; stroke: var(--rev-hair);
  stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.lyr-fig .qd .top  { fill: color-mix(in srgb, var(--sky) 9%, var(--rev-ground)); }

.lyr-fig .qd .side { fill: color-mix(in srgb, var(--sky) 4%, var(--rev-ground)); }

.lyr-fig .silo path { fill: none; stroke: var(--sky); stroke-width: 1.4;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.lyr-fig .tie path { fill: none; stroke: var(--rev-fg-3); stroke-width: 1.3;
  stroke-linecap: round; stroke-dasharray: 0.1 7; vector-effect: non-scaling-stroke; }

.lyr-fig .qd { transition: transform 420ms var(--ease-enter), opacity 220ms ease; }

.lyr-fig .silo { transition: opacity 260ms ease; }

.lyr-fig .sh { opacity: 0; transition: opacity 300ms ease; }

.lyr-fig:has(.qd:hover) .silo { opacity: 0; }

.lyr-fig:has(.qd:hover) .qd .face { stroke-opacity: .5; }

.lyr-fig .quads .qd:hover { transform: translateY(-52px); }

.lyr-fig .quads .qd:hover .face { stroke: var(--sky); stroke-opacity: 1;
  stroke-width: 1.4; }

.lyr-fig:has(.qd:hover) .qd:not(:hover) { opacity: .55; }

.lyr-fig:has(.qd-n:hover) .sh-n, .lyr-fig:has(.qd-w:hover) .sh-w,
.lyr-fig:has(.qd-e:hover) .sh-e, .lyr-fig:has(.qd-s:hover) .sh-s { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lyr-fig .qd, .lyr-fig .silo, .lyr-fig .sh { transition: none; }
}