.data-container{background:#383838;background:var(--background-gradient)}.data-tile{background:#0a0f1a;border-radius:1rem;color:#fff;font-size:1rem;margin:.9rem 1.1rem;padding:2rem;position:relative;text-shadow:0 0 .3em currentColor;transform:perspective(5000px) rotateY(0deg) rotateX(0deg);transform-style:preserve-3d;transition:transform .25s ease-in}.data-tile>div{-webkit-user-select:none;-moz-user-select:none;user-select:none}.data-tile:after,.data-tile:before{border-radius:inherit;content:"";position:absolute}.data-tile:before{background:#000;filter:blur(15px);inset:.25rem;opacity:.9;transform:translateZ(-49px)}.data-tile:after{background:linear-gradient(-45deg,blue,red);inset:-1rem;transform:translateZ(-50px)}.data-tile:not(.windowed):hover{cursor:all-scroll;transform:perspective(5000px) rotateY(25deg) rotateX(25deg);transition:transform 125ms ease-in}.data-tile .output-text{flex:1;overflow:hidden}.data-tile .data-tile-header{align-items:center;border-bottom:1px solid #2b2b3b;display:flex;height:1.2rem;justify-content:center;left:0;position:absolute;right:0;top:0}.data-tile .data-tile-header .connecting,.data-tile .data-tile-header .ended,.data-tile .data-tile-header .receiving{height:.75rem;margin:0 .25rem;transition:background-color .15s ease-in;width:.75rem}.data-tile .data-tile-header .connecting{background-color:#54522a;border-radius:50%}.data-tile .data-tile-header .receiving{background-color:#2c4e28;border-radius:50%}.data-tile .data-tile-header .ended{background-color:#3b1d1d;border-radius:50%}.data-tile.connect .connecting{background-color:#b7b71c}.data-tile.receive .receiving{background-color:#0f0}.data-tile.end .ended{background-color:#8b0000}.data-tile .allow-pop-out{background-color:rgba(18,43,42,.5);border-radius:inherit;color:#00a8a0;font-size:6rem;inset:0;opacity:0;position:absolute;text-align:center;text-shadow:none;transform:translateZ(10px);transition:opacity .25s ease-in}.data-tile .allow-pop-out:hover{opacity:1}