/* One playable console, with navigation inside the device itself. */
.experience{display:grid;justify-items:center}
.console-demo{display:grid;justify-items:center;gap:12px;width:min(100%,390px);margin:0}
.console-demo-device{--console-scale:.85;position:relative;width:min(100%,calc(78svh * 390 / 845));aspect-ratio:390/845;overflow:hidden;border-radius:26px;background:#c7cfb0;box-shadow:0 22px 44px #26312730,0 0 0 1px #98a386}
.console-demo-device iframe{position:absolute;left:0;top:0;width:390px;height:845px;border:0;background:transparent;transform:scale(var(--console-scale));transform-origin:0 0}
.console-demo-device:not([data-state=ready]) iframe{visibility:hidden}
.console-demo-device:not([data-state=ready])::after{content:'';position:absolute;inset:14% 9% 24%;border-radius:10px;background:#d9e3b5;box-shadow:inset 0 0 0 3px #87976b;animation:console-demo-boot 1.1s ease-in-out infinite alternate}
@keyframes console-demo-boot{from{opacity:.55}to{opacity:1}}
.console-demo figcaption{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11px;line-height:1.5;color:var(--muted);text-align:center}
@media(max-width:760px){
  /* Leave room around the console to scroll the page. */
  .console-demo-device{width:min(calc(100% - 32px),calc(70svh * 390 / 845));border-radius:22px}
  .console-demo figcaption{font-size:10px;padding:0 16px}
}
@media(prefers-reduced-motion:reduce){.console-demo-device::after{animation:none}}