/* 沿用宣传图的纯黑背景，静态方点为动态背景提供回退。 */
:root { color-scheme: dark; }
.pixel-background { position: relative; isolation: isolate; background: #000; }
.pixel-background::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/backgrounds/pixel-dust.svg") center / cover no-repeat;
}
.pixel-background__flow {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
}
.pixel-background--flowing::before { opacity: 0; }
.pixel-background--flowing > .pixel-background__flow { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .pixel-background--flowing::before { opacity: 1; }
  .pixel-background--flowing > .pixel-background__flow { opacity: 0; }
}
/* 外框在上，截图在下；PNG 的透明屏幕区域显示截图。 */
.device-mockup { position: relative; width: min(100%, 360px); aspect-ratio: var(--frame-width) / var(--frame-height); }
.device-mockup__screen { position: absolute; left: var(--screen-left); top: var(--screen-top); width: var(--screen-width); height: var(--screen-height); border-radius: var(--screen-radius); overflow: hidden; background: #000; }
.device-mockup__screen > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.device-mockup__bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.device-mockup--duo-inner-landscape {
  --frame-width: 3093; --frame-height: 2247;
  --screen-left: 3.87972842%; --screen-top: 5.34045394%;
  --screen-width: 92.24054316%; --screen-height: 89.31909212%;
  --screen-radius: 5.74833509% 5.74833509% 5.60813179% 5.74833509% / 8.17140010% 8.17140010% 7.97209766% 8.17140010%;
}

.device-mockup--duo-inner-portrait {
  --frame-width: 2247; --frame-height: 3093;
  --screen-left: 5.34045394%; --screen-top: 3.87972842%;
  --screen-width: 89.31909212%; --screen-height: 92.24054316%;
  --screen-radius: 8.17140010% 7.97209766% 8.17140010% 8.17140010% / 5.74833509% 5.60813179% 5.74833509% 5.74833509%;
}

.device-mockup--duo-outer-landscape {
  --frame-width: 2194; --frame-height: 1574;
  --screen-left: 3.64630811%; --screen-top: 5.59085133%;
  --screen-width: 92.70738377%; --screen-height: 88.81829733%;
  --screen-radius: 8.75122911% 8.75122911% 1.17994100% 1.17994100% / 12.73247496% 12.73247496% 1.71673820% 1.71673820%;
}

.device-mockup--duo-outer-portrait {
  --frame-width: 1574; --frame-height: 2194;
  --screen-left: 5.59085133%; --screen-top: 3.64630811%;
  --screen-width: 88.81829733%; --screen-height: 92.70738377%;
  --screen-radius: 1.71673820% 12.73247496% 12.73247496% 1.71673820% / 1.17994100% 8.75122911% 8.75122911% 1.17994100%;
}

.device-mockup--ipad-portrait {
  --frame-width: 2300; --frame-height: 3000;
  --screen-left: 5.13043478%; --screen-top: 4.13333333%;
  --screen-width: 89.73913043%; --screen-height: 91.73333333%;
  --screen-radius: 2.95542636% 2.95542636% 2.95542636% 2.95542636% / 2.21656977% 2.21656977% 2.21656977% 2.21656977%;
}

.device-mockup--iphone-portrait {
  --frame-width: 1470; --frame-height: 3000;
  --screen-left: 5.10204082%; --screen-top: 2.20000000%;
  --screen-width: 89.79591837%; --screen-height: 95.60000000%;
  --screen-radius: 14.46969697% 14.46969697% 14.24242424% 14.46969697% / 6.65969317% 6.65969317% 6.55509066% 6.65969317%;
}

.device-mockup--mac {
  --frame-width: 3540; --frame-height: 2300;
  --screen-left: 9.29378531%; --screen-top: 9.47826087%;
  --screen-width: 81.35593220%; --screen-height: 81.04347826%;
  --screen-radius: 1.18055556% 1.18055556% 0.00000000% 0.00000000% / 1.82403433% 1.82403433% 0.00000000% 0.00000000%;
}

.device-mockup--tv {
  --frame-width: 4300; --frame-height: 2780;
  --screen-left: 2.39534884%; --screen-top: 4.28057554%;
  --screen-width: 89.30232558%; --screen-height: 77.69784173%;
  --screen-radius: 0.07812500% 0.07812500% 0.07812500% 0.07812500% / 0.13888889% 0.13888889% 0.13888889% 0.13888889%;
}

.device-mockup--watch {
  --frame-width: 600; --frame-height: 960;
  --screen-left: 14.83333333%; --screen-top: 23.22916667%;
  --screen-width: 70.33333333%; --screen-height: 53.54166667%;
  --screen-radius: 27.48815166% 27.48815166% 27.48815166% 27.48815166% / 22.56809339% 22.56809339% 22.56809339% 22.56809339%;
}