/* Integration only. The upstream phone.css is copied without changes. */
iframe#screen { border: 0; touch-action: auto; width: 320px; height: 480px; transform-origin: top left; }
.a4os-boot{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000;color:#fff;opacity:1;transition:opacity 200ms ease;overflow:hidden}.a4os-boot>svg{width:22%;height:auto;fill:#f5f5f5}.a4os-boot-error{position:absolute;left:8px;right:8px;bottom:8%;text-align:center;font:12px/1.5 Arial,sans-serif}.a4os-boot-error button{border:1px solid #888;border-radius:5px;background:#333;color:#fff;padding:7px 12px}.a4os-boot[hidden],.a4os-boot-error[hidden]{display:none}.a4os-boot.leaving{opacity:0;pointer-events:none}

/* Touch browsers may retain :active after release; only the pointer controller depresses Home. */
.physical.home[data-controlled]{transition:box-shadow 80ms ease-out}
.physical.home[data-controlled] .home-symbol{transition:transform 80ms ease-out,opacity 80ms ease-out}
.physical.home[data-controlled]:active:not(.pressed){background:radial-gradient(ellipse at 50% 100%,#262a30,#080a0d 73%);box-shadow:inset 0 1px 2px #000,inset 0 -1px 1px #777c7d80,0 0 0 1px #050607}
.physical.home[data-controlled]:active:not(.pressed) .home-symbol{transform:none;opacity:.85}

.experience{min-height:calc(var(--a4os-stage-height,100svh) - 24px)}
.phone{width:min(380px,calc(var(--a4os-stage-width,100vw) - 32px),calc((var(--a4os-stage-height,100svh) - 44px)*380/716))}