.app-container{display:flex;flex-direction:column;height:100vh}.top-section{display:flex}.logo-image{left:var(--railW);top:calc(var(--railH) + 8px)}.left-box{bottom:0;position:absolute;top:0;width:var(--railW)}html[dir=rtl] .left-box{left:0;right:auto}.left-box:before{top:calc(var(--railH) - 2px);transform:rotate(-145deg);transform-origin:left bottom}.left-box:after,.left-box:before{background-color:var(--color-primary);content:"";height:.3px;left:var(--railW);position:absolute;width:114px}.left-box:after{bottom:calc(var(--railH) - 2px);transform:rotate(145deg);transform-origin:left top}.right-box{bottom:0;position:absolute;right:0;top:0;width:var(--railW)}.right-box:before{top:calc(var(--railH) - 2px);transform:rotate(145deg);transform-origin:right bottom}.right-box:after,.right-box:before{background-color:var(--color-primary);content:"";height:.3px;position:absolute;right:var(--railW);width:114px}.right-box:after{bottom:calc(var(--railH) - 2px);transform:rotate(-145deg);transform-origin:right top}.center-box{height:100%;overflow:hidden;perspective:380px;perspective-origin:50% 50%;position:relative;width:100%}.center-box .top-part{height:var(--railH);top:0;transform:rotateX(-90deg);transform-origin:bottom center}.center-box .center-part,.center-box .top-part{left:0;overflow:hidden;position:absolute;right:0;z-index:1}.center-box .center-part{border:.3px solid var(--color-primary);bottom:var(--railH);top:var(--railH);transform:translate(var(--railW));width:calc(100% - var(--railW)*2)}html[dir=rtl] .center-box .center-part{left:0;right:auto}.center-box .bottom-part{bottom:0;height:var(--railH);left:0;overflow:hidden;position:absolute;right:0;transform:rotateX(90deg);transform-origin:top center;z-index:1}.sync-content{width:100%;will-change:transform}.preview-image{opacity:0;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out;z-index:2}.preview-image[src]{opacity:1}