.rubicello-preview-3d {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 10 / 7;
  min-height: 250px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background:
    radial-gradient(ellipse at 50% 34%, #efebe5 0%, #dfd7ce 54%, #c9beb1 100%);
  box-shadow: inset 0 0 0 1px rgba(70,54,42,.16), 0 12px 36px rgba(51,39,27,.14);
}
.rubicello-preview-3d__canvas { display:block; width:100%; height:100%; outline:none; cursor:grab; touch-action:pan-y; }
.rubicello-preview-3d__canvas.is-dragging { cursor:grabbing; }
.rubicello-preview-3d[data-preview-error="webgl-unavailable"]::after {
  content:"Podgląd 3D jest niedostępny w tej przeglądarce.";
  position:absolute; inset:auto 1rem 1rem; padding:.65rem .8rem; border-radius:8px;
  background:rgba(255,255,255,.94); color:#5b5147; font:500 .86rem/1.35 system-ui,sans-serif;
  box-shadow:0 4px 18px rgba(34,27,21,.12);
}
@media (max-width:680px) {
  .rubicello-preview-3d { aspect-ratio: 1 / .9; min-height:230px; border-radius:11px; }
}
@media (prefers-reduced-motion:reduce) {
  .rubicello-preview-3d *, .rubicello-preview-3d::after { animation:none!important; transition:none!important; }
}