/* One device system for the Web gallery, portfolio and project cases. */
.web-device-scene{position:relative;isolation:isolate;aspect-ratio:3/2;width:100%;min-width:0;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 35% 15%,#fafaf6 0%,#eeeee7 55%,#dfdfd7 100%);pointer-events:none}
.web-device-laptop{position:absolute;width:79%;left:7%;top:15%;z-index:1}
.web-device-lid{position:relative;padding:2.1% 1.7% 2.2%;border:1px solid #6d7476;border-radius:clamp(5px,1vw,12px);background:linear-gradient(135deg,#586064,#1b2023 30%,#31373b);box-shadow:0 14px 25px #22282d25}
.web-device-lid:before{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#879197;top:.7%;left:50%}
.web-device-viewport{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff;border-radius:2px;width:100%}
.web-device-viewport iframe{position:absolute;left:0;top:0;width:1440px;height:900px;max-width:none;border:0;transform-origin:0 0;pointer-events:none}
.web-device-base{position:relative;left:-6%;width:112%;height:clamp(5px,.9vw,12px);border-radius:1px 1px 50% 50%;background:linear-gradient(#e3e7e8,#8e999f);box-shadow:0 10px 14px #242b3025}
.web-device-base:after{content:'';position:absolute;top:0;left:43%;width:14%;height:30%;border-radius:0 0 5px 5px;background:#879399}
.web-device-phone{position:absolute;right:6%;top:30%;width:21%;height:59%;padding:1%;border:1px solid #718086;border-radius:clamp(8px,1.5vw,20px);background:#20272b;box-shadow:4px 10px 18px #20272b35;z-index:2}
.web-device-phone:after{content:'';position:absolute;left:35%;top:1.5%;width:30%;height:2.7%;border-radius:0 0 5px 5px;background:#20272b}
.web-device-phone .web-device-viewport{height:100%;aspect-ratio:auto;border-radius:clamp(5px,1vw,13px)}
.web-device-phone iframe{width:390px;height:780px}
.web-device-capture img{width:100%;height:100%;display:block;object-fit:cover;object-position:top}
.web-original-art{position:absolute;inset:10% 7%;display:grid;place-items:center}
.web-original-art img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 14px #252c2925)}
.web-device-image .web-device-laptop{width:82%;left:9%;top:15%}
.web-case-view{margin:0;min-width:0}
.web-case-toolbar{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.web-case-toolbar>span{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.web-case-toolbar>a{font-size:13px;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:4px}
.web-view-modes{display:flex;gap:4px;padding:4px;border:1px solid #d8d8ce;background:#eeeee7;border-radius:8px}
.web-view-modes[hidden]{display:none}
.web-view-modes button{font:inherit;font-size:13px;line-height:1.2;padding:12px 17px;min-height:44px;border:0;border-radius:5px;background:transparent;color:#45453d;cursor:pointer}
.web-view-modes button[aria-pressed=true]{background:#232321;color:#fff}
.web-view-modes button:focus-visible{outline:3px solid #fc176b;outline-offset:3px}
.web-case-view>figcaption{font-size:13px;line-height:1.6;color:#5b5b53;margin-top:16px}
.web-case-view .web-device-scene{max-width:1120px;margin-inline:auto}
.web-case-view [data-web-mode=desktop] .web-device-phone{display:none}
.web-case-view [data-web-mode=desktop] .web-device-laptop{width:86%;left:7%;top:7%}
.web-case-view .web-device-scene[data-web-mode=mobile]{aspect-ratio:490/900;max-width:490px}
.web-case-view [data-web-mode=mobile] .web-device-laptop{display:none}
.web-case-view [data-web-mode=mobile] .web-device-phone{width:72%;height:88%;top:6%;right:14%;padding:1.8%;border-radius:28px}
.web-case-view [data-web-mode=mobile] .web-device-viewport{border-radius:19px}
.project-card>.web-device-scene{border-radius:8px}
@media(max-width:700px){.web-case-toolbar{gap:12px}.web-case-toolbar>span{flex:1}.web-view-modes{order:3;width:100%}.web-view-modes button{flex:1;padding:11px 8px;font-size:12px}.web-case-view .web-device-scene[data-web-mode=mobile]{max-width:360px}.web-case-view [data-web-mode=mobile] .web-device-phone{border-radius:22px}.web-case-view [data-web-mode=mobile] .web-device-viewport{border-radius:14px}.web-device-scene{border-radius:8px}}

.catalog-preview .web-device-scene{border-radius:0}