/* Shared preview background for every Stoffi generator. */
.preview-stage {
  background-color: #eaf0f5;
  background-image: radial-gradient(#b4c0cc 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 0 0;
  background-repeat: repeat;
}

/* One mobile preview behavior shared by all four 3D tools. */
.mobile-preview-slot,.mobile-preview-panel{min-width:0}
.mobile-preview-handle{display:none}
@media(max-width:760px){
 html{scroll-padding-top:var(--mobile-preview-offset,12px)}
 .workspace{display:flex;flex-direction:column}
 .workspace .controls{max-height:none;overflow:visible}
 .workspace .studio{order:-1}
 .mobile-preview-slot{overflow-anchor:none}
 .mobile-preview-panel.is-pinned{position:fixed;top:0;z-index:30;box-sizing:border-box;padding:0 8px 8px;background:#f5f8fb;border:1px solid #d5e2eb;border-top:0;border-radius:0 0 16px 16px;box-shadow:0 8px 24px #17344820}
 .is-pinned .mobile-preview-handle{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding-top:env(safe-area-inset-top,0px);font:650 12px/1.3 system-ui;color:#496574}
 .mobile-preview-handle button{border:0;background:transparent;color:#075d77;font:650 12px/1.3 system-ui;min-height:44px;padding:8px 10px;cursor:pointer}
 .mobile-preview-handle button:focus-visible{outline:2px solid #00a3c7;outline-offset:-3px;border-radius:8px}
 .is-pinned .studio-top,.is-pinned .sky-view-tabs{margin:0 0 6px;gap:3px}
 .is-pinned .view-tabs button,.is-pinned .sky-view-tabs button{min-height:36px;font-size:11px;padding:8px 4px}
 .is-pinned .preview-stage{height:clamp(130px,27svh,220px);min-height:0;border-radius:10px}
 .is-pinned .stage-label,.is-pinned .sky-stage-help{display:none}
 .is-pinned .dimension,.is-pinned .sky-dimensions{bottom:7px;right:8px;font-size:10px;padding:4px 7px;max-width:calc(100% - 16px)}
 .is-pinned .color-selection{bottom:34px;left:7px;right:7px;padding:6px;gap:4px 8px;font-size:11px}
 .is-pinned .color-selection button{font-size:11px;min-height:30px;padding:5px 7px}
 .is-pinned #selected-swatch{width:17px;height:17px}
 .is-pinned .selection-message{gap:5px}
 .is-pinned.is-collapsed .studio-top,.is-pinned.is-collapsed .sky-view-tabs{display:none}
 .is-pinned.is-collapsed .preview-stage{height:1px;visibility:hidden;border:0}
 .mobile-preview-panel.is-collapsed{padding-bottom:0}
}
@media(max-width:760px) and (max-height:480px){.is-pinned .preview-stage{height:90px}.is-pinned .color-selection{bottom:6px}.is-pinned .dimension,.is-pinned .sky-dimensions{display:none}}