/* Reserve space around the fixed entrance picker. */
.workspace { padding-bottom:94px; }
.controls { padding-bottom:30px; }
.brand-chip { text-decoration:none; }
.hero[data-loading] > * { visibility:hidden; }
#entrance-controls { margin-bottom:12px; }
#fullscreen-replay {
 position:fixed; z-index:30; top:calc(env(safe-area-inset-top,0px) + 8px); left:50%; transform:translateX(-50%);
 width:44px; height:44px; padding:0; font-size:25px; border:0; background:#ffffff80;
}
.app-preview .proto-picker { display:none; }
@media(max-width:760px) {
 .preview { height:calc(100svh - 160px - env(safe-area-inset-top,0px)); min-height:400px; }
 .controls { margin-bottom:50px; }
}
.connection-hit {
 position:absolute; z-index:3; left:201px; top:165px; width:64px; height:64px; margin:-32px;
 display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:transparent;
 touch-action:manipulation;
}
.connection-hit:active { background:#00000008; filter:none; }
.connection-fallback {
 width:100%; height:100%; border-radius:50%; display:grid; place-items:center;
 background:linear-gradient(135deg,#ffffffb8,#ffffff45); color:#292929; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
 box-shadow:inset 0 1px 2px #fff,inset 0 -2px 3px #0003,inset 2px 0 2px #ffffff99,0 14px 24px -5px #0004;
 border:1px solid #ffffffbc;
}
.connection-fallback svg { filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 1.5px .4px #0004); }
.hero[data-renderer=webgl] .connection-fallback { visibility:hidden; }
@media(hover:hover) and (pointer:fine) { .connection-hit:hover { background:#ffffff12; } }
@media(prefers-reduced-transparency:reduce),(forced-colors:active) {
 .hero[data-renderer=webgl] .connection-fallback { visibility:visible; background:#fff; backdrop-filter:none; }
}

@media(forced-colors:active) { .hero .connection-fallback { background:ButtonFace!important; color:ButtonText; border:1px solid ButtonText; } .connection-fallback svg { filter:none; } }