.device-preview {
  background: #e9edf4;
  border-radius: 18px;
  color: #17233b;
  overflow: hidden;
}
.device-preview-stage {
  position: relative;
  width: 100%;
  background: radial-gradient(ellipse at 38% 22%, #f6f4ef, #d4d6d5);
  aspect-ratio: 5 / 6;
  max-height: 560px;
}
.device-preview-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.device-preview-personal-photo canvas { touch-action: pan-y pinch-zoom; }
.device-preview-status {
  position: absolute;
  bottom: .7rem;
  left: .7rem;
  right: .7rem;
  margin: 0;
  background: #f8f9fcef;
  border-radius: 10px;
  padding: .55rem .7rem;
  font: 500 .875rem/1.4 system-ui, sans-serif;
  pointer-events: none;
}
.device-preview-status[hidden], .device-preview-controls [hidden] { display: none; }
.device-preview > .device-preview-status { position: static; margin: .6rem; }
.device-preview > .device-preview-status + .device-preview-controls { padding-top: 0; }
.device-preview-editor > .device-preview-controls:not(:has(button:not([hidden]))) { display: none; }
.device-preview-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding: .6rem;
}
.device-preview-controls button {
  background: #fff;
  border: 1px solid #9baac3;
  border-radius: .65rem;
  color: #17233b;
  min-height: 42px;
  padding: .4rem .8rem;
  font: 600 .875rem system-ui, sans-serif;
  cursor: pointer;
}
.device-preview-controls button:disabled { opacity: .6; cursor: default; }
.device-avatar-options {
  padding: .15rem .8rem .75rem;
  font: 500 .875rem/1.4 system-ui, sans-serif;
}
.device-avatar-options summary { cursor: pointer; padding: .5rem 0; }
.device-avatar-options label { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .5rem .35rem 0; }
.device-avatar-options .device-avatar-preset { display: grid; justify-items: start; }
.device-avatar-preset select { max-width: 100%; }
.device-avatar-options select, .device-avatar-options button { min-height: 38px; font: inherit; }
.device-avatar-options button { margin-right: .4rem; }
.device-preview-standalone { margin: 0; padding: 0; background: #f8f9fc; }
.device-preview-standalone .device-preview { border-radius: 0; }
.device-preview-standalone .device-preview-stage { aspect-ratio: auto; height: calc(100svh - 100px); min-height: 240px; }
.device-preview-editor .device-preview-stage { aspect-ratio: auto; height: clamp(220px,48dvh,350px); }
.saved-preview { margin-block: 1rem; }
.saved-preview summary { cursor: pointer; }
.saved-preview img { display: block; width: min(100%, 420px); height: auto; margin-block: .75rem; border-radius: 12px; }

.device-preview-stage canvas[hidden] { display: none; }
.device-studio-note { margin: 0 .75rem .7rem; text-align: center; font: 500 .77rem/1.4 system-ui, sans-serif; }