/* Device frame (skin). The only file to edit per project. */
.sp-device-frame {
  --sp-device-frame-window-bg: #f4f0e8;
  --sp-device-frame-close: #ff5f57;
  --sp-device-frame-min: #febc2e;
  --sp-device-frame-max: #28c840;
  --sp-device-frame-edge: 0 0 0 1px rgba(58, 48, 34, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* contact + negative-spread ambient + long soft lift */
  --sp-device-frame-shadow: 0 1px 2px rgba(58, 48, 34, 0.12), 0 22px 50px -14px rgba(58, 48, 34, 0.28), 0 50px 110px -40px rgba(58, 48, 34, 0.30);
  --sp-device-frame-shadow-lifted: 0 1px 2px rgba(58, 48, 34, 0.10), 0 34px 70px -18px rgba(58, 48, 34, 0.30), 0 80px 150px -50px rgba(58, 48, 34, 0.34);
  --sp-device-frame-titanium: linear-gradient(145deg, #d9d6d0, #a9a59e 45%, #cfccc5 70%, #8f8b84);
  --sp-device-frame-phone-edge: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.18);
  --sp-device-frame-screen-bg: #f4f0e8;
}
html.dark .sp-device-frame,
[data-theme="dark"] .sp-device-frame,
[data-theme="brass"] .sp-device-frame {
  --sp-device-frame-window-bg: #211f1b;
  --sp-device-frame-edge: 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --sp-device-frame-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -14px rgba(0, 0, 0, 0.6), 0 60px 120px -40px rgba(0, 0, 0, 0.6);
  --sp-device-frame-shadow-lifted: 0 1px 2px rgba(0, 0, 0, 0.5), 0 36px 80px -18px rgba(0, 0, 0, 0.65), 0 90px 160px -50px rgba(0, 0, 0, 0.65);
  --sp-device-frame-titanium: linear-gradient(145deg, #5b5853, #3a3834 45%, #55524c 70%, #2c2a27);
  --sp-device-frame-screen-bg: #171613;
}