/* Shared product-window presentation. Mobile products and source evidence retain their own dimensions. */
:root {
  --pd-screen-width:1440; --pd-screen-height:960; --pd-screen-ratio:3/2;
  --pd-screen-radius:12px; --pd-screen-border:1px;
  --pd-screen-light-surface:#F5F7F9; --pd-screen-dark-surface:#171D25;
  --pd-screen-light-edge:#D7DEE3; --pd-screen-dark-edge:#465260;
  --pd-screen-shadow:0 4px 16px rgb(32 38 44 / .05);
}
/* Use these hooks for future desktop designs. Never select every portfolio image. */
[data-design-frame="desktop"], [data-design-frame="static"],
#judi-project-preview :is(.jmd-stage,.jns-frame,.pj-ai-native),
#lucid-case-preview .p01-product-viewport,
.product-presentation .product-frame, .static-exploration,
.screen[data-screen] img, .app-viewport {
  box-sizing:border-box;
  border:var(--pd-screen-border) solid var(--pd-screen-light-edge)!important;
  border-radius:var(--pd-screen-radius)!important;
  box-shadow:var(--pd-screen-shadow);
}
[data-design-frame="desktop"],
#judi-project-preview :is(.jmd-stage:not(.jmd-natural-stage),.jns-frame),
#lucid-case-preview :is(.p01-product-viewport,.p01-demo-stage),
.product-presentation .product-frame, .app-viewport {
  aspect-ratio:var(--pd-screen-ratio)!important;
}
/* Static full documents keep their natural height; no cropping or inner scrolling. */
[data-design-frame="static"], .screen[data-screen] img {
  display:block; width:100%; height:auto; object-fit:contain;
}
.dark .app-viewport, .screen[data-appearance="dark"] img,
#judi-project-preview [data-motion-theme="dark"] .jmd-stage,
#judi-project-preview [data-product-theme="dark"] :is(.jns-frame,.pj-ai-native),
#lucid-case-preview [data-product-theme="dark"] .p01-product-viewport,
.product-presentation[data-appearance="dark"] .product-frame {
  border-color:var(--pd-screen-dark-edge)!important;
}

/* Reconstructed desktop stills share the exact outer window ratio. */
.screen[data-screen] img{aspect-ratio:var(--pd-screen-ratio)}