.hd{gap:18px;min-width:0;display:grid}.hd-stage{padding-block-start:17%;padding-inline-end:9%;position:relative}.hd-photo-wrap{width:42%;position:absolute;inset-block-start:0;inset-inline-end:0}.hd-photo{aspect-ratio:4/5;object-fit:cover;object-position:50% 8%;border-radius:var(--site-radius-media);background:var(--site-surface-warm);width:100%;height:auto;box-shadow:var(--site-shadow-soft);display:block}.hd-device-wrap{position:relative}.hd-device{transform-origin:30% 60%;position:relative;transform:perspective(2200px)rotateY(8deg)rotateX(3deg)}.hd-device:before{content:"";box-shadow:var(--site-shadow-device);pointer-events:none;border-radius:4.4%/6.4%;position:absolute;inset:2.2% 2.6% 6.8%}.hd-screens{width:100%;height:100%;position:relative}.hd-shot{opacity:0;transition:opacity 1.1s var(--site-ease-out);position:absolute;inset:0;overflow:hidden}.hd-shot.is-active{opacity:1}.hd-shot-img{object-fit:cover;object-position:top left;transform-origin:0 0;width:100%;height:100%;display:block}.hd-controls{align-items:center;gap:16px;padding-inline-end:8%;display:flex}.hd-tabs{flex:1;gap:6px;min-width:0;display:flex}.hd-tab{border-radius:var(--site-radius-control);cursor:pointer;min-width:0;min-height:44px;color:var(--app-content-muted);text-align:start;white-space:nowrap;transition:color var(--app-duration-fast) var(--site-ease-out);background:0 0;border:0;flex:1 1 0;align-content:center;gap:8px;padding:6px 2px 0;font-size:14px;font-weight:400;line-height:1.2;display:grid}.hd-tab:hover{color:var(--app-content)}.hd-tab[aria-pressed=true]{color:var(--app-content);font-weight:500}.hd-tab-label{text-overflow:ellipsis;overflow:hidden}.hd-tab-track{background:var(--app-border);border-radius:1px;height:2px;display:block;overflow:hidden}.hd-tab-fill{background:var(--app-content);transform-origin:0;height:100%;display:block}.hd-pause{flex:none}@media (prefers-reduced-motion:no-preference){.hd-device{animation:hd-enter 1.3s var(--site-ease-out) .12s both}.hd-photo{animation:hd-photo-in 1.5s var(--site-ease-out) .38s both}.hd-shot.is-active .hd-shot-img{animation:hd-pan calc(var(--reel-ms) + 1.6s) cubic-bezier(.3, 0, .45, 1) both}[data-rotating=false] .hd-shot-img{animation-play-state:paused}[data-rotating=true] .hd-tab-fill{animation:hd-fill var(--reel-ms) linear both}}@media (prefers-reduced-motion:reduce){.hd-shot{transition-duration:.15s}}@keyframes hd-enter{0%{opacity:0;transform:perspective(2200px)translateY(48px)rotateY(20deg)rotateX(10deg)scale(.96)}}@keyframes hd-photo-in{0%{opacity:0;transform:translateY(20px)scale(1.04)}}@keyframes hd-pan{0%{transform:scale(1.02)}to{transform:scale(1.1)translate(-3%,-2.5%)}}@keyframes hd-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (max-width:767px){.hd{gap:12px}.hd-stage{padding-block-start:18%;padding-inline-end:0}.hd-photo-wrap{width:40%}.hd-device{transform:none}.hd-controls{gap:8px;padding-inline-end:0}.hd-tabs{gap:4px}.hd-tab{font-size:13px}@media (prefers-reduced-motion:no-preference){.hd-device{animation-name:hd-enter-flat}}}@keyframes hd-enter-flat{0%{opacity:0;transform:translateY(32px)}}
