.jasper-materials-hub .stack-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(340px, .66fr);
  gap: 54px;
  align-items: center;
}

.jasper-materials-hub .stack-experience{ min-width: 0; }

.jasper-materials-hub .material-stack-3d{
  position: relative;
  min-height: 530px;
  overflow: hidden;
  touch-action: none;
  isolation: isolate;
}

.jasper-materials-hub .material-stack-3d canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  outline-offset: -4px;
}

.jasper-materials-hub .material-stack-3d canvas.is-hovering{ cursor: pointer; }
.jasper-materials-hub .material-stack-3d canvas.is-dragging{ cursor: grabbing; }

.jasper-materials-hub .stack-stage-meta{
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 0;
  display: grid;
  gap: 2px;
  pointer-events: none;
}

.jasper-materials-hub .stack-stage-meta span{
  color: var(--blue-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.jasper-materials-hub .stack-stage-meta strong{
  max-width: 290px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.jasper-materials-hub .stack-stage-help{
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 22px;
  margin: 0;
  padding-left: 13px;
  border-left: 2px solid var(--yellow);
  color: var(--muted);
  font-size: 11px;
  pointer-events: none;
}

.jasper-materials-hub .stack-controls{
  min-height: 42px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.jasper-materials-hub .stack-control{
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #aebfc8;
  border-radius: 50%;
  color: #405363;
  background: transparent;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.jasper-materials-hub .stack-control::after{
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--layer-color);
}

.jasper-materials-hub .stack-control:hover{
  transform: translateY(-2px);
  border-color: var(--blue-dark);
  color: var(--ink);
}

.jasper-materials-hub .stack-control.is-active{
  border-color: var(--yellow);
  color: var(--teal-deep);
  background: var(--yellow);
}

.jasper-materials-hub .stack-control.is-active::after{ background: var(--teal-deep); }

.jasper-materials-hub .stack-detail{
  min-height: 390px;
  padding: 26px 0 26px 34px;
  border-left: 1px solid var(--line);
}

@media (max-width: 1000px){
  .jasper-materials-hub .stack-layout{ grid-template-columns: 1fr; gap: 30px; }
  .jasper-materials-hub .material-stack-3d{ min-height: 490px; }
  .jasper-materials-hub .stack-detail{
    min-height: 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 700px){
  .jasper-materials-hub .material-stack-3d{ min-height: 390px; margin: 0 -8px; }
  .jasper-materials-hub .stack-stage-meta{ top: 8px; left: 8px; }
  .jasper-materials-hub .stack-stage-meta strong{ max-width: 240px; font-size: 12px; }
  .jasper-materials-hub .stack-stage-help{ right: 8px; bottom: 8px; max-width: 150px; font-size: 9px; }
  .jasper-materials-hub .stack-controls{ margin-top: 8px; gap: 7px; }
  .jasper-materials-hub .stack-control{ width: 34px; height: 34px; }
  .jasper-materials-hub .stack-detail h3{ font-size: 25px; }
}

@media (max-width: 390px){
  .jasper-materials-hub .material-stack-3d{ min-height: 360px; }
  .jasper-materials-hub .stack-controls{ gap: 5px; }
  .jasper-materials-hub .stack-control{ width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce){
  .jasper-materials-hub .stack-control{ transition: none; }
}