/* Original app artwork, arranged like a pair of prints on warm paper. */
.tone-sky { --screen-wash:#e6edf0; --screen-glow:#c4dbe7; }
.tone-sage { --screen-wash:#e8ece3; --screen-glow:#c9d7c1; }
.tone-sand { --screen-wash:#eee6d9; --screen-glow:#dec9ae; }
.tone-rose { --screen-wash:#f0e5e2; --screen-glow:#e5c9ca; }
.tone-lilac { --screen-wash:#eae7ee; --screen-glow:#d5cce2; }
.screen-stage { position:relative; min-width:0; padding:48px 30px; background:radial-gradient(ellipse at 72% 22%,#fff9,transparent 58%),linear-gradient(145deg,var(--screen-wash),var(--screen-glow)); border:1px solid #bda98b24; }
.screen-stage::before { content:""; position:absolute; inset:14px; border:1px solid #fff7; pointer-events:none; }
.screen-pair { position:relative; display:flex; align-items:center; justify-content:center; gap:22px; min-width:0; }
.screen-image { position:relative; display:block; min-width:0; max-width:calc(50% - 11px); box-shadow:0 12px 28px -12px #4038295c; border-radius:5px; }
.screen-image:nth-child(1) { transform:translateY(-12px); }
.screen-image:nth-child(2) { transform:translateY(12px); }
.screen-image img { display:block; width:auto; max-width:100%; height:auto; max-height:500px; object-fit:contain; border-radius:5px; }
.screen-enlarge { position:absolute; inset:auto 8px 8px auto; display:grid; place-items:center; width:30px; height:30px; border:1px solid #d1c3ad; background:#fcf8f1f2; color:#443c33; font:18px/1 Georgia,serif; box-shadow:0 2px 10px #45382020; }
.screen-stage-wide .screen-pair { flex-direction:column; gap:20px; }
.screen-stage-wide .screen-image { max-width:100%; transform:none; }
.screen-stage-wide .screen-image img { width:100%; max-height:320px; }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 a.screen-image { transition:transform .25s ease,box-shadow .25s ease; }
 a.screen-image:hover { transform:translateY(-16px); box-shadow:0 18px 36px -12px #40382970; }
 a.screen-image:nth-child(2):hover { transform:translateY(8px); }
 .screen-stage-wide a.screen-image:hover { transform:translateY(-4px); }
}
@media(max-width:540px) {
 .screen-stage { padding:30px 18px; }
 .screen-stage::before { inset:8px; }
 .screen-pair { gap:16px; justify-content:flex-start; overflow-x:auto; padding-block:2px 10px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#b5a891 transparent; }
 .screen-image { flex:0 0 78%; max-width:78%; scroll-snap-align:center; }
 .screen-image:nth-child(1), .screen-image:nth-child(2) { transform:none; }
 .screen-image img { width:100%; max-height:none; }
 .screen-stage-wide .screen-pair { overflow:visible; }
 .screen-stage-wide .screen-image { max-width:100%; flex:auto; }
 .screen-enlarge { width:26px; height:26px; inset:auto 5px 5px auto; }
}