.device-player{width:100%;position:relative}.device-player[data-device=iphone]{color:#161616;background:#f2f2f1}.device-stage{aspect-ratio:16/9;position:relative;overflow:hidden}.device-player[data-device=iphone] .device-stage{aspect-ratio:1}.device-poster,.device-canvas{object-fit:contain;width:100%;height:100%;display:block;position:absolute;inset:0}.device-poster[aria-hidden=true]{visibility:hidden}.device-canvas{opacity:0}.device-canvas.is-ready{opacity:1}.device-controls{align-items:center;gap:16px;padding:6px 16px;font:11px IBM Plex Mono,ui-monospace,monospace;display:flex}.device-controls button{cursor:pointer;min-width:54px;min-height:44px;font:inherit;color:inherit;background:0 0;border:0}.device-controls button:disabled{cursor:default;opacity:.5}.device-controls input{accent-color:currentColor;cursor:pointer;flex:1;min-width:0;height:44px}.device-controls output{text-align:right;font-variant-numeric:tabular-nums;min-width:96px}.device-controls :focus-visible{outline-offset:3px;outline:2px solid}.device-message{margin:0;padding:0 20px 16px;font:12px/1.5 system-ui,sans-serif}@media (width<=500px){.device-controls{gap:8px;padding-inline:8px}}