.device-preview-gallery{--device-ink:#242522;--device-muted:#72756d;background:#efefeb;color:var(--device-ink);padding:68px 5vw 76px;isolation:isolate}
.device-preview-gallery__inner{max-width:1440px;margin:0 auto}
.device-preview-gallery__heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:48px}
.device-preview-gallery__heading p{font:10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.09em;color:var(--device-muted);margin:0 0 13px}
.device-preview-gallery__heading h2{font-size:clamp(30px,3.2vw,47px);font-weight:500;letter-spacing:-.045em;line-height:1.1;margin:0}
.device-preview-gallery__heading>span{font-size:13px;line-height:1.7;color:var(--device-muted);max-width:300px}
.device-preview-gallery__devices{display:grid;grid-template-columns:minmax(0,2.7fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
.device-preview{margin:0;min-width:0}
.device-preview figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:29px 0 0;font-size:13px;line-height:1.5}
.device-preview figcaption>span+span{font-size:11px;color:var(--device-muted)}
.device-preview__machine{position:relative;width:100%;padding-bottom:16px;filter:drop-shadow(0 20px 17px #11130d18)}
.device-preview__lid{position:relative;width:94%;margin:0 auto;padding:clamp(9px,1.2vw,17px) clamp(8px,.95vw,14px) clamp(8px,.95vw,14px);background:#151615;border:2px solid #878981;border-radius:clamp(13px,1.5vw,22px) clamp(13px,1.5vw,22px) 7px 7px;box-shadow:0 0 0 1px #e1e2da,0 2px 0 #474943,inset 0 0 0 1px #242724}
.device-preview__camera{position:absolute;top:clamp(3px,.34vw,5px);left:50%;transform:translateX(-50%);width:4px;height:4px;background:radial-gradient(circle at 40% 40%,#283c4b,#080a0a 70%);border-radius:50%}
.device-preview__viewport{position:relative;overflow:hidden;background:#fafafa;--device-scale:1;isolation:isolate}
.device-preview--desktop .device-preview__viewport{aspect-ratio:1440/900;border-radius:4px 4px 1px 1px}
.device-preview__viewport iframe{display:block;margin:0;max-width:none;border:0;background:#fafafa;transform:scale(var(--device-scale));transform-origin:0 0;position:absolute;inset:0 auto auto 0;touch-action:auto}
.device-preview__viewport:focus-within{outline:2px solid #4d6359;outline-offset:3px}
.device-preview__base{position:absolute;left:0;right:0;bottom:0;height:18px;border-radius:2px 2px 50% 50%/2px 2px 10px 10px;background:linear-gradient(180deg,#d8dad3 0%,#b2b5ab 42%,#898d82 56%,#b3b7ab 66%,#e0e2d9 100%);border-top:1px solid #eff0ea;box-shadow:0 2px 1px #4c514746}
.device-preview__base>span{position:absolute;top:-1px;left:43%;width:14%;height:6px;background:linear-gradient(180deg,#a0a599,#c6c9be);border-radius:0 0 9px 9px;box-shadow:inset 0 -1px 1px #ecefe3}
.device-preview--phone{width:100%;max-width:285px;margin:0 auto}
.device-preview__phone{position:relative;padding:7px;background:#151715;border:2px solid #999d91;border-radius:43px;box-shadow:inset 0 0 0 1px #383c34,0 2px 0 #d5d8ca,0 19px 28px #11130d17}
.device-preview--phone .device-preview__viewport{aspect-ratio:390/844;border-radius:34px;clip-path:inset(0 round 34px)}
.device-preview--phone .device-preview__viewport iframe{top:calc(52px * var(--device-scale))}
.device-preview__status-bar{position:absolute;inset:0 0 auto;height:calc(52px * var(--device-scale));background:#f6f7f3;color:#111310;pointer-events:none;z-index:2;font:600 calc(14px * var(--device-scale))/1 Arial,sans-serif}
.device-preview__status-bar>span{position:absolute;top:calc(23px * var(--device-scale));left:calc(25px * var(--device-scale))}
.device-preview__status-bar>span+span{left:auto;right:calc(23px * var(--device-scale));font-size:calc(11px * var(--device-scale));font-weight:500}
.device-preview__island{position:absolute;z-index:3;pointer-events:none;top:calc(13px * var(--device-scale));left:50%;transform:translateX(-50%);width:calc(120px * var(--device-scale));height:calc(35px * var(--device-scale));background:#060706;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff05}
.device-preview__island i{position:absolute;right:calc(11px * var(--device-scale));top:50%;transform:translateY(-50%);width:calc(10px * var(--device-scale));height:calc(10px * var(--device-scale));border-radius:50%;background:radial-gradient(circle at 40% 45%,#172632,#090c0c 55%,#0d1110 80%);box-shadow:0 0 0 1px #111412}
.device-preview__home-indicator{position:absolute;z-index:2;pointer-events:none;bottom:calc(8px * var(--device-scale));left:50%;transform:translateX(-50%);width:calc(125px * var(--device-scale));height:calc(5px * var(--device-scale));background:#171917;border-radius:99px;box-shadow:0 0 0 1px #ffffff50}
.device-preview__side-key{position:absolute;width:3px;background:linear-gradient(90deg,#676c61,#b7bdab);border-radius:3px;pointer-events:none}
.device-preview__side-key--left{left:-4px;top:23%;height:28px;box-shadow:0 37px 0 #9da491}
.device-preview__side-key--right{right:-4px;top:30%;height:48px}
@media(max-width:1000px){.device-preview-gallery__devices{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px}.device-preview__phone{border-radius:35px}.device-preview--phone .device-preview__viewport{border-radius:27px;clip-path:inset(0 round 27px)}}
@media(max-width:760px){.device-preview-gallery{padding:46px 22px 55px}.device-preview-gallery__heading{display:block;margin-bottom:36px}.device-preview-gallery__heading>span{display:block;max-width:none;margin-top:15px;font-size:12px}.device-preview-gallery__devices{grid-template-columns:1fr;gap:42px}.device-preview--phone{max-width:270px}.device-preview__phone{border-radius:41px}.device-preview--phone .device-preview__viewport{border-radius:32px;clip-path:inset(0 round 32px)}.device-preview figcaption{margin-top:22px}.device-preview__machine{padding-bottom:11px}.device-preview__base{height:13px}.device-preview__base>span{height:4px}.device-preview__lid{padding:9px 7px 7px}}
@media(prefers-reduced-motion:reduce){.device-preview-gallery *{scroll-behavior:auto!important;transition:none!important}}

#device-preview-heading{scroll-margin-top:100px}
.device-preview-jump{display:inline-block;margin-left:16px;font-size:12px;text-decoration:underline;text-underline-offset:4px;color:inherit}
.device-preview-jump:hover{opacity:.65}
.device-preview-jump:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:760px){#device-preview-heading{scroll-margin-top:145px}.device-preview-jump{margin-left:8px}}