:root{--pageBackgroundDark: #14264C;--pageBackgroundLight: #2ADDA1;--backgroundSectionDark: #2ADDA1;--backgroundSectionLight: #14264C;--backgroundArea: #FFFFFF;--colorH1Dark: #FFFFFF;--colorH1Light: #14264C;--colorArea: #14264C;--shadowMain: #14264C80;--shadowDarkArea: #5ef5f873;--shadowLightArea: #14264C73;font-family:Avenir,Helvetica,Arial,sans-serif;line-height:1.2;font-weight:400;color-scheme:light dark;background-color:light-dark(var(--pageBackgroundLight),var(--pageBackgroundDark));font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-weight:400;font-size:32px;color:light-dark(var(--colorH1Light),var(--colorH1Dark));text-align:center;margin:0 0 20px}body{max-width:1380px;width:100%;box-sizing:border-box;padding:20px;margin:0 auto;display:grid;grid-template-rows:auto minmax(0,1fr);max-height:100dvh;min-height:100dvh}.colorSwitcherButton{--borderSize: 3px;width:25px;aspect-ratio:1;display:grid;grid-template-columns:var(--borderSize) 1fr var(--borderSize);grid-template-rows:var(--borderSize) 1fr var(--borderSize)}.colorSwitcherButton .spinner,.colorSwitcherButton .innerContent{border-radius:50%;place-self:center;height:100%;aspect-ratio:1}.colorSwitcherButton .spinner{grid-column:1/-1;grid-row:1/-1;background-image:repeating-conic-gradient(#000);animation:rotate 6s cubic-bezier(.35,-1.3,.65,2.3) infinite}.colorSwitcherButton .innerContent{z-index:1;grid-column:2/3;grid-row:2/3}.colorSwitcherButton.active .spinner{background-image:repeating-conic-gradient(#2adda1,#2adda1 8%,#14264c 15%,#2adda1 33%)}.colorSwitcher{display:flex;justify-content:end;gap:5px}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#root main{background-color:light-dark(var(--backgroundSectionLight),var(--backgroundSectionDark));border-radius:20px;box-shadow:0 0 10px 0 var(--shadowMain);display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:20px;padding:20px;height:100%;box-sizing:border-box}#root .areaContainer{background-color:var(--backgroundArea);border-radius:15px;box-shadow:0 0 10px 0 var(--shadowMain);color:var(--colorArea);overflow:hidden;padding:8px}#root .inputContainer{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto 1fr;gap:8px}#root .inputContainer .svgWrapper{display:block;z-index:1;cursor:pointer;grid-row:1/2;align-self:center}#root .inputContainer .svgWrapper svg{width:100%;height:auto}#root .inputContainer textarea{width:100%;height:100%;border:none;outline:none;resize:none;padding:0;margin:0;box-sizing:border-box;background-color:transparent;color:inherit;grid-column:1/-1;grid-row:1/-1;font-size:13px}#root .svgWrapper svg{width:100%;height:auto}#root .svgWrapper.copy{height:25px;grid-column:-1/-2}#root .svgWrapper.copy svg{transition:fill .2s ease-in-out;height:100%;width:auto}#root .svgWrapper.active svg{fill:#2adda1}#root .svgWrapper.load{height:22px;grid-column:-2/-3}#root .svgWrapper.load svg{height:100%;width:auto}#root .svgWrapper.preview{height:100%;overflow-y:scroll;margin-top:-25px;padding-top:25px;padding-bottom:25px;box-sizing:border-box}.previewPlaceholder{text-align:center;margin-top:40px}.previewPlaceholder svg{width:150px;height:auto}.previewPlaceholder p{font-size:19px;margin-top:0}