:root{--tp-blade-border-radius: 2px;--tp-base-background-color: hsla(0, 0%, 10%, 1);--tp-base-shadow-color: transparent;--tp-button-background-color: hsla(0, 0%, 80%, 1);--tp-button-background-color-active: hsla(0, 0%, 100%, 1);--tp-button-background-color-focus: hsla(0, 0%, 95%, 1);--tp-button-background-color-hover: hsla(0, 0%, 85%, 1);--tp-button-foreground-color: hsla(0, 0%, 0%, .8);--tp-container-background-color: hsla(0, 0%, 0%, .3);--tp-container-background-color-active: hsla(0, 0%, 0%, .6);--tp-container-background-color-focus: hsla(0, 0%, 0%, .5);--tp-container-background-color-hover: hsla(0, 0%, 0%, .4);--tp-container-foreground-color: hsla(0, 0%, 100%, .5);--tp-groove-foreground-color: hsla(0, 0%, 0%, .2);--tp-input-background-color: hsla(0, 0%, 0%, .3);--tp-input-background-color-active: hsla(0, 0%, 0%, .6);--tp-input-background-color-focus: hsla(0, 0%, 0%, .5);--tp-input-background-color-hover: hsla(0, 0%, 0%, .4);--tp-input-foreground-color: hsla(0, 0%, 100%, .5);--tp-label-foreground-color: hsla(0, 0%, 100%, .5);--tp-monitor-background-color: hsla(0, 0%, 0%, .3);--tp-monitor-foreground-color: hsla(0, 0%, 100%, .3);--tp-container-unit-size: 32px;--tp-base-border-radius: 2px}*,*:after,*:before{box-sizing:border-box}*{font:inherit;margin:0;padding:0;border:0}ol,ul,menu{list-style:none}blockquote,q{quotes:none}mark{background-color:transparent;color:inherit}button,input,textarea,select,.reset{border:0;background-color:transparent;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{resize:vertical;overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%;display:block}b,strong{font-weight:700}.cda__body{display:grid;min-height:100dvh;font-family:sans-serif}@media (min-width: 1200px){.cda__body{grid-template-columns:576px 1fr}}aside{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:50px;background-color:var(--tp-base-background-color);color:var(--tp-button-background-color-active);padding-top:1.5rem;padding-bottom:1.5rem}aside *{font-size:16px!important}@media not all and (min-width: 1200px){aside{order:2;height:auto}aside *{font-size:14px!important}}.group__actions{margin-top:auto;display:flex;flex-flow:wrap;gap:12px}main{display:grid;justify-content:center;align-content:center;align-items:center;padding:1.5rem;background-color:var(--tp-container-foreground-color)}.p5Canvas{max-width:100%;max-height:fit-content;object-fit:cover}.group__actions{padding-left:1.5rem;padding-right:1.5rem;button {cursor: pointer; padding: .875rem 1.5rem; border: 1px solid var(--tp-button-background-color-active); border-radius: 9999px; &#exportMedia {background-color: var(--tp-button-background-color-active); color: var(--tp-base-background-color);} &#recordMedia {background-color: var(--tp-button-background-color-active); color: var(--tp-base-background-color); transition: .2s; &.recording {background-color: #cc0000; border-color: #cc0000; color: var(--tp-button-background-color-active);}}} .main__group {display: flex; gap: 12px; margin-left: auto;}}#mediaLibrary{display:flex;flex-flow:wrap;gap:8px;max-height:218px;overflow:auto;flex:none;padding-left:1.5rem;padding-right:1.5rem;img,video {vertical-align: middle; object-fit: cover; height: 100%; width: 100%; pointer-events: none;} &::-webkit-scrollbar {width: 10px;} &::-webkit-scrollbar-track {background: var(--tp-button-foreground-color);} &::-webkit-scrollbar-thumb {background: var(--tp-button-background-color);}}@media (min-width: 768px){#mediaLibrary{gap:16px;max-height:254px}}#mediaLibrary>div{border-radius:var(--tp-blade-border-radius);cursor:pointer;height:105px;width:105px;border:2px solid transparent;overflow:hidden}@media (min-width: 768px){#mediaLibrary>div{height:117px;width:117px}}#mediaLibrary>div.active{border-color:#a7bafa}.upload__holder{border-radius:var(--tp-blade-border-radius);cursor:pointer;border:1px dashed var(--tp-container-foreground-color);color:var(--tp-container-foreground-color);padding:1rem;text-align:center;display:grid;align-items:center;justify-content:center;height:108px;width:108px}@media (min-width: 768px){.upload__holder{height:117px;width:117px}}#panelEditor{overflow:auto;padding-left:1.5rem;padding-right:1.5rem}#panelEditor::-webkit-scrollbar{width:10px}#panelEditor::-webkit-scrollbar-track{background:var(--tp-button-foreground-color)}#panelEditor::-webkit-scrollbar-thumb{background:var(--tp-button-background-color)}