/* Device frames are built in CSS, keeping project screenshots sharp and editable. */
.mw-project-art:has(.dm-scene){padding:0;overflow:hidden;perspective:1200px}.dm-scene{position:relative;width:100%;height:100%;min-height:260px;isolation:isolate;perspective:1000px;container-type:inline-size}.dm-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 20%,#ffffffc0,transparent 65%)}.dm-floor{position:absolute;width:78%;height:15%;left:12%;bottom:12%;background:#22313d30;border-radius:50%;filter:blur(19px);transform:rotate(-5deg)}.dm-device{position:absolute;transform-style:preserve-3d;filter:drop-shadow(12px 24px 14px #16253333);transition:transform .7s cubic-bezier(.2,.8,.2,1)}.dm-screen{position:relative;background:#111719;overflow:hidden;border:1px solid #657078;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff24}.dm-screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff18,transparent 35% 75%,#ffffff08)}.dm-scene .dm-device .dm-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:0;box-shadow:none;animation:none;transform:none;transition:none;scale:1}.dm-laptop{width:70%;left:10%;top:17%;transform:rotateX(9deg) rotateY(-14deg) rotateZ(-5deg)}.dm-laptop .dm-screen{aspect-ratio:1.58;padding:3.2% 2.4% 3%;border-radius:10px;background:linear-gradient(125deg,#303638,#0d1113)}.dm-laptop .dm-screen:before{content:'';position:absolute;top:1.2%;left:50%;width:3px;height:3px;border-radius:50%;background:#718392;z-index:2}.dm-laptop .dm-base{position:absolute;left:-8%;right:-8%;height:7%;top:99%;background:linear-gradient(#dce0e2,#8c959b 65%,#626a70);border-radius:1px 1px 50% 50% / 1px 1px 60% 60%;box-shadow:0 3px 0 #50585e;transform:rotateX(38deg);transform-origin:top}.dm-laptop .dm-base:after{content:'';position:absolute;left:42%;width:16%;height:33%;top:0;background:#879097;border-radius:0 0 10px 10px}.dm-tablet{width:30%;left:3%;top:36%;transform:rotateY(16deg) rotateZ(-10deg)}.dm-tablet .dm-screen{aspect-ratio:.76;border-radius:15px;padding:5%;background:linear-gradient(135deg,#3c4449,#101518)}.dm-tablet .dm-screen img{object-position:50% 0!important}.dm-phone{width:18%;right:8%;top:35%;transform:rotateY(-16deg) rotateZ(8deg)}.dm-phone .dm-screen{aspect-ratio:.49;border-radius:21px;padding:7% 5%;background:linear-gradient(140deg,#59656e,#0d1113 40%,#39454d);box-shadow:inset 0 0 0 1px #afb9bf,2px 1px 0 #56606a}.dm-phone .dm-screen:before{content:'';position:absolute;top:3.8%;left:34%;width:32%;height:4%;border-radius:20px;background:#111;z-index:2}.dm-phone .dm-screen img{object-position:72% 0!important}.dm-label{position:absolute;bottom:6%;left:36%;font-size:7px;letter-spacing:.12em;color:#4b5e6b}.mw-project-art:hover .dm-laptop{transform:rotateX(5deg) rotateY(-8deg) rotateZ(-3deg) translateY(-4px)}.mw-project-art:hover .dm-phone{transform:rotateY(-9deg) rotateZ(5deg) translateY(-5px)}.mw-project-art:hover .dm-tablet{transform:rotateY(10deg) rotateZ(-7deg) translateY(-3px)}.dm-detail{background:#e5ebee;overflow:hidden}.dm-detail .dm-scene{height:clamp(360px,49vw,670px);max-width:1100px;margin:auto}.dm-detail .dm-label{font-size:11px}.dm-detail figcaption{font-size:11px;line-height:1.5;color:#53636c;padding:15px 24px;background:#f5f6f2;border-top:1px solid #1111}.dm-detail .dm-laptop .dm-screen{border-radius:15px}.dm-detail .dm-tablet .dm-screen{border-radius:24px}.dm-detail .dm-phone .dm-screen{border-radius:32px}
@media(max-width:600px){.dm-scene{min-height:260px}.dm-laptop{left:12%;top:18%;width:71%}.dm-tablet{width:30%;top:37%;left:4%}.dm-phone{right:6%;top:39%;width:19%}.dm-tablet .dm-screen{border-radius:10px}.dm-phone .dm-screen{border-radius:14px}.dm-label{font-size:6px;left:35%;bottom:7%}.dm-detail .dm-scene{height:320px;min-height:0}.dm-detail .dm-label{font-size:7px}.dm-detail .dm-phone .dm-screen{border-radius:16px}.dm-detail .dm-tablet .dm-screen{border-radius:12px}}
@media(prefers-reduced-motion:reduce){.dm-device{transition:none!important}.mw-project-art:hover .dm-device{transform:revert-layer}}
.dm-tablet{left:7%;width:28%}@media(max-width:600px){.dm-tablet{left:8%;width:28%}}

.dm-scene .dm-tablet .dm-screen img,.dm-scene .dm-phone .dm-screen img{object-position:center top!important}

/* Reserve a separate grid cell for each device, including the laptop base. */
.dm-scene{
  display:grid;grid-template-columns:minmax(0,1.95fr) minmax(0,.82fr) minmax(0,.51fr);
  align-items:center;gap:clamp(10px,3cqw,30px);padding:clamp(18px,5cqw,64px);
  min-height:0;perspective:none;
}
.dm-scene .dm-device{position:relative;inset:auto;width:100%;min-width:0;transform:none;filter:drop-shadow(0 6px 8px #16253324)}
.dm-scene .dm-laptop{width:88%;justify-self:center}
.dm-scene .dm-laptop .dm-base{left:-6%;right:-6%}
.dm-scene .dm-label{left:0;right:0;bottom:8%;text-align:center;pointer-events:none}
.dm-scene .dm-floor{display:none}
.dm-detail .dm-scene{height:auto;aspect-ratio:2.05;max-width:1220px}
.mw-project-grid .mw-project-art:hover .dm-scene .dm-device{transform:translateY(-3px)}
@media(max-width:600px){
  .dm-detail .dm-scene{aspect-ratio:auto;grid-template-columns:minmax(0,1fr) minmax(0,.64fr);gap:18px;max-width:360px;padding:20px 28px 36px}
  .dm-detail .dm-laptop{grid-column:1/-1;max-width:290px}
  .dm-detail .dm-tablet{max-width:136px;justify-self:end}
  .dm-detail .dm-phone{max-width:84px;justify-self:start}
  .dm-detail .dm-label{bottom:13px}
}
@media(prefers-reduced-motion:reduce){.mw-project-grid .mw-project-art:hover .dm-scene .dm-device{transform:none}}

/* A single, larger desktop preview in the compact portfolio grid. */
.mw-project-grid .dm-scene{grid-template-columns:minmax(0,1fr);padding:0;gap:0}
.mw-project-grid .dm-scene .dm-laptop{width:74%;margin-bottom:3%}