:root{--grey-shade1: #1c1c1f;--grey-shade2: #424149;--grey-shade3: #625e79;--grey-shade4: #8781a4;--grey-shade5: #b1acc7;--grey-shade6: #dcdae7}:root[data-theme=light]{--grey-shade1: #f4f5f7;--grey-shade2: #fdfdff;--grey-shade3: #dfe3ee;--grey-shade4: #b8c0d6;--grey-shade5: #7f89a8;--grey-shade6: #1c1c1f}body,#header,#logo-img{transition:background-color .15s linear,color .15s linear,border-color .15s linear,opacity .15s linear}@font-face{font-family:Open Sans;src:url(/shader-playground/fonts/OpenSans-VariableFont_wdth,wght.ttf) format("truetype"),url(/shader-playground/fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf) format("truetype");font-weight:400;font-style:normal}html,body,#app{height:100%;width:100%;margin:0;padding:0}body{font-family:Open Sans,"sans-serif";background-color:var(--grey-shade1);display:flex;flex-direction:column}#header{height:5%;box-sizing:border-box;background-color:var(--grey-shade2);display:flex;align-items:center;justify-content:center;border-bottom:solid 2px;border-color:var(--grey-shade4);font-family:Open Sans,"sans-serif";font-size:35px;color:var(--grey-shade6);position:relative;font-weight:600;letter-spacing:.04em;background:linear-gradient(100deg,var(--grey-shade2),var(--grey-shade3))}#header-icons{position:absolute;left:10px;height:90%;display:flex;align-items:center;gap:8px;opacity:.6}.header-icon{height:80%;width:auto;opacity:.4;transition:opacity .25s ease,filter .15s linear}#logo-link,#theme-toggle{display:flex;align-items:center;height:100%}#theme-toggle{padding:0;border:0;background:transparent;cursor:pointer}#logo-link:hover .header-icon,#theme-toggle:hover .header-icon{opacity:1}:root[data-theme=light] .header-icon{filter:invert(1)}#scenes{height:95%;display:flex;flex-direction:row}.half{height:100%;width:50%;margin:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;position:relative}#left-half{padding:20px 10px 20px 20px}#right-half{padding:20px 20px 20px 10px}@media(max-aspect-ratio:1/1){#scenes{flex-direction:column}.half{width:100%;height:50%}#left-half{padding:20px 20px 10px}#right-half{padding:10px 20px 20px}}#left-canvas,#right-canvas{box-sizing:border-box;height:100%;width:100%;display:flex;align-items:center;justify-content:center}#icon-container{position:absolute;width:100%;height:100%;pointer-events:none;z-index:1}#upload-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:100%;opacity:0;transition:opacity .5s;filter:drop-shadow(0 0 20px white)}