#app{display:flex;flex-direction:column;gap:var(--sz32);flex-grow:1}.header{display:flex;justify-content:space-between;align-items:center;padding:var(--sz32) var(--sz32) 0;color:var(--primary100)}.header>.header-title{font-size:var(--fs24);letter-spacing:.3em}.header>.header-icon{width:var(--sz32);aspect-ratio:1;cursor:pointer}.main-content{display:flex;flex-direction:column;width:100%;gap:var(--sz32);padding:var(--sz16) var(--sz32) var(--sz32);flex-grow:1}.main-content>.short-inputs{display:flex;width:100%;flex-wrap:wrap;gap:var(--sz24)}.main-content>.editors{display:flex;width:100%;flex-wrap:wrap;gap:var(--sz24);align-items:stretch;flex-grow:1}.main-content>.editors>*{min-width:min(var(--sz384),100%);min-height:var(--sz256)}.actions{position:fixed;bottom:var(--sz24);right:var(--sz24);z-index:1;display:flex;align-items:end;gap:var(--sz12)}.button{display:flex;align-items:center;gap:var(--sz8);padding:var(--sz12) var(--fs20);border-radius:var(--sz4);box-shadow:var(--shadow1);border:none;outline:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color translate box-shadow;transition-duration:.2s}.button>.button_icon{width:var(--fs20);stroke-width:2;aspect-ratio:1}.button>.button_text{font-weight:700;letter-spacing:.05em;font-size:var(--fs18);margin-bottom:-2px}.button:hover:not(:active){translate:0 -2px;box-shadow:var(--shadow2)}.primary-button{background-color:var(--primary600);color:var(--gray100)}.primary-button:hover{background-color:var(--primary500)}.secondary-button{background-color:var(--gray800);color:var(--gray200);outline-width:2px;outline-style:solid;outline-color:var(--gray600);outline-offset:-2px}.secondary-button:hover{color:var(--gray100);outline-color:var(--gray500)}.short-input{display:flex;flex-direction:column;gap:var(--sz4);flex-grow:1;min-width:var(--sz256);position:relative}.short-input>.short-input_name{font-size:var(--fs18);color:var(--gray300);text-transform:capitalize}.short-input>.short-input_input{border:none;outline:none;background-color:var(--gray800);border-radius:var(--sz4);font-size:var(--fs18);padding:var(--sz12);color:var(--gray200);width:100%;font-family:Inter,sans-serif;box-shadow:inset var(--shadow1);outline:2px solid transparent;transition:outline-color .2s}.short-input>.short-input_input::placeholder{color:var(--gray600)}.short-input>.short-input_input:focus{outline-color:var(--primary500)}.code-editor-container{display:flex;flex-direction:column;border-radius:var(--sz4);background:linear-gradient(#0004,#0004),var(--gray800);flex-grow:1;position:relative;transition:background-color .2s}.code-editor-container:has(.code-editor:focus){background-color:var(--primary500)}.code-editor_label{padding:var(--sz8) var(--sz12);font-size:var(--fs14);font-family:CascadiaMono,monospace;color:var(--gray300);text-transform:capitalize}.code-editor{background-color:var(--gray800);border:none;outline:none;border-radius:0 0 var(--sz4) var(--sz4);font-size:var(--fs18);padding:var(--sz12);color:var(--gray200);resize:none;height:100%;font-family:CascadiaMono,monospace;white-space:pre}.code-editor::placeholder{color:var(--gray600)}.code-editor-suggestions{position:absolute;left:var(--sz12);bottom:var(--sz12)}.code-editor-suggestions>.code-editor-suggestions_icon{width:var(--sz32);aspect-ratio:1;background-color:#0004;padding:var(--sz4);border-radius:var(--sz4);cursor:pointer}.code-editor-suggestions>.code-editor-suggestions_lines{position:absolute;bottom:calc(100% + var(--sz8));padding:var(--sz8);background-color:#0004;border-radius:var(--sz4);display:none}.code-editor-suggestions>.code-editor-suggestions_lines>.code-editor-suggestions_line{white-space:pre;font-size:var(--fs12);color:var(--gray300)}.code-editor-suggestions:hover>.code-editor-suggestions_lines{display:block}.toast-list{position:fixed;top:var(--sz32);left:var(--sz32);z-index:2;display:flex;flex-direction:column;width:80%;max-width:var(--sz384)}.toast{display:flex;align-items:center;width:100%;padding:var(--sz8) var(--sz12);border-radius:var(--sz4);border-width:2px;border-style:solid;box-shadow:var(--shadow3);gap:var(--sz12);margin-bottom:var(--sz12);max-height:100px;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none}.toast>.toast-icon{flex-shrink:0;width:var(--sz32);aspect-ratio:1}.toast>.toast-content{display:flex;flex-direction:column;flex-grow:1;gap:var(--sz4)}.toast>.toast-content>.toast-title{font-size:var(--fs16);font-weight:700}.toast>.toast-content>.toast-message{font-size:var(--fs14)}.toast>.toast-close{flex-shrink:0;align-self:start;width:var(--fs20);aspect-ratio:1;cursor:pointer;transition:color .1s}.toast>.toast-progressbar{position:absolute;bottom:0;left:0;width:100%;height:2px;animation:progress var(--duration) linear forwards}.toast:hover>.toast-progressbar{animation-play-state:paused}.toast_default{background-color:var(--accent900);border-color:var(--accent800)}.toast_default>.toast-icon{color:var(--accent500)}.toast_default>.toast-content>.toast-title{color:var(--accent400)}.toast_default>.toast-content>.toast-message{color:var(--accent200)}.toast_default>.toast-close{color:var(--accent400)}.toast_default>.toast-close:hover{color:var(--accent600)}.toast_default>.toast-progressbar{background-color:var(--accent400)}.toast_error{background-color:var(--red900);border-color:var(--red800)}.toast_error>.toast-icon{color:var(--red500)}.toast_error>.toast-content>.toast-title{color:var(--red400)}.toast_error>.toast-content>.toast-message{color:var(--red200)}.toast_error>.toast-close{color:var(--red400)}.toast_error>.toast-close:hover{color:var(--red600)}.toast_error>.toast-progressbar{background-color:var(--red400)}.toast_success{background-color:var(--green900);border-color:var(--green800)}.toast_success>.toast-icon{color:var(--green500)}.toast_success>.toast-content>.toast-title{color:var(--green400)}.toast_success>.toast-content>.toast-message{color:var(--green200)}.toast_success>.toast-close{color:var(--green400)}.toast_success>.toast-close:hover{color:var(--green600)}.toast_success>.toast-progressbar{background-color:var(--green400)}.toast_warning{background-color:var(--yellow900);border-color:var(--yellow800)}.toast_warning>.toast-icon{color:var(--yellow500)}.toast_warning>.toast-content>.toast-title{color:var(--yellow500)}.toast_warning>.toast-content>.toast-message{color:var(--yellow200)}.toast_warning>.toast-close{color:var(--yellow500)}.toast_warning>.toast-close:hover{color:var(--yellow700)}.toast_warning>.toast-progressbar{background-color:var(--yellow500)}.toast_fadeOut{animation:disappear 1s forwards}.toast_fadeIn{opacity:0;animation:appear .4s forwards}@keyframes disappear{0%{translate:0;opacity:1;height:var(--height);border-width:2px;padding:var(--sz8) var(--sz12);margin-bottom:var(--sz12)}20%{translate:10px;opacity:1}50%{opacity:0;translate:-100%;margin-bottom:var(--sz12);height:var(--height);border-width:2px;padding:var(--sz8) var(--sz12)}to{translate:-100%;opacity:0;height:0;padding:0;border-width:0;margin-bottom:0}}@keyframes appear{0%{translate:-100%;opacity:0}50%{translate:10px;opacity:1}to{translate:0;opacity:1}}@keyframes progress{to{width:0}}.side-menu-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff1;z-index:1;padding:var(--sz16);display:flex;justify-content:end}.side-menu-container .side-menu{width:min(var(--sz640),90%);height:100%;background-color:var(--gray900);box-shadow:var(--shadow2);padding:var(--sz16);border-radius:var(--sz4);display:flex;flex-direction:column;gap:var(--sz8)}.side-menu-container .side-menu>.side-menu_top{display:flex;justify-content:flex-end}.side-menu-container .side-menu>.side-menu_top>.side-menu_close{width:var(--sz32);aspect-ratio:1;cursor:pointer;color:var(--primary100)}.side-menu-container .side-menu>.side-menu_content{display:flex;flex-direction:column;flex-grow:1;overflow:auto;padding:0 var(--sz16);gap:var(--sz48)}.side-menu-container .side-menu>.side-menu_content>h3{font-size:var(--fs18);color:var(--primary200);margin-bottom:calc(0px - var(--sz32))}.side-menu-container .side-menu>.side-menu_content>.side-menu_settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--sz256),1fr));gap:var(--sz16) var(--sz24)}.side-menu-container .side-menu>.side-menu_content>.side-menu_snippets{display:flex;flex-direction:column;gap:var(--sz16)}.side-menu-container .side-menu>.side-menu_content>.side-menu_snippets>.side-menu_noSnippets{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--sz16);gap:var(--sz16)}.side-menu-container .side-menu>.side-menu_content>.side-menu_snippets>.side-menu_noSnippets>.side-menu_noSnippets_text{font-size:var(--fs18);color:var(--gray500)}.side-menu_fadeIn{animation:show .3s forwards}.side-menu_fadeIn>.side-menu{animation:fadeIn .3s forwards}.side-menu_fadeOut{animation:hide .3s forwards}.side-menu_fadeOut>.side-menu{animation:fadeOut .3s forwards}@keyframes show{0%{opacity:0}50%{opacity:1}to{opacity:1}}@keyframes hide{0%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes fadeIn{0%{translate:100%}50%{translate:-10px}to{translate:0}}@keyframes fadeOut{0%{translate:0}50%{translate:-10px}to{translate:100%}}.setting{display:flex;width:100%;justify-content:space-between;align-items:center;gap:var(--sz16)}.setting>.setting_label{display:flex;flex-direction:column;min-width:var(--sz64);gap:var(--sz4);height:100%}.setting>.setting_label>.setting_name{font-size:var(--fs16);color:var(--gray100);font-weight:700;text-transform:capitalize}.setting>.setting_label>.setting_description{font-size:var(--fs14);color:var(--gray300)}.setting>.toggle-setting_container{height:var(--sz24);box-sizing:content-box;width:var(--sz48);cursor:pointer;flex-shrink:0;background-color:transparent;border:2px solid var(--gray600);background-color:var(--gray600);gap:2px;border-radius:var(--sz4);position:relative;transition:background-color .2s,border-color .2s}.setting>.toggle-setting_container>.toggle-setting_indicator{all:unset;box-sizing:border-box;padding:0;margin:0;height:100%;aspect-ratio:1;border-radius:2px;background-color:var(--gray200);display:flex;justify-content:center;align-items:center;position:relative;left:0;box-shadow:var(--shadow1);transition:left .2s}.setting>.toggle-setting_container>.toggle-setting_indicator:before{content:"";position:absolute;width:2px;height:var(--sz12);background-color:var(--gray400)}.setting>.toggle-setting_container.active{border-color:var(--primary500);background-color:var(--primary500)}.setting>.toggle-setting_container.active>.toggle-setting_indicator{left:50%}.setting>.number-setting_container{width:var(--sz96);height:var(--sz32);display:flex;align-items:center;border:2px solid var(--primary600);background-color:var(--primary900);border-radius:var(--sz4)}.setting>.number-setting_container>.number-setting_input::-webkit-outer-spin-button,.setting>.number-setting_container>.number-setting_input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.setting>.number-setting_container>.number-setting_input{border:none;outline:none;width:0;height:100%;background-color:transparent;flex-grow:1;color:var(--gray200);font-size:var(--fs18);padding:0 var(--sz4)}.setting>.number-setting_container>.number-setting_unit{display:flex;justify-content:center;align-items:center;height:100%;aspect-ratio:1;background-color:var(--primary600);color:var(--gray100);text-transform:uppercase;font-size:var(--fs14)}.snippet-preview{display:flex;flex-direction:column;border-radius:var(--sz4);background:linear-gradient(#0004,#0004),var(--gray800);width:100%;height:var(--sz256)}.snippet-preview>.snippet-preview_header{display:flex;align-items:center;justify-content:space-between;padding:var(--sz8) var(--sz12)}.snippet-preview>.snippet-preview_header>.snippet-preview_name{font-size:var(--fs14);font-family:CascadiaMono,monospace;color:var(--gray100);-webkit-user-select:none;user-select:none}.snippet-preview>.snippet-preview_header>.snippet-preview_actions{display:flex;gap:var(--sz12)}.snippet-preview>.snippet-preview_header>.snippet-preview_actions>.snippet-preview_action{width:var(--sz24);aspect-ratio:1;cursor:pointer;color:var(--primary200);position:relative}.snippet-preview>.snippet-preview_header>.snippet-preview_actions>.snippet-preview_action:hover{color:var(--primary100)}.snippet-preview>.snippet-preview_header>.snippet-preview_actions>.snippet-preview_action:hover.dangerous-action{color:var(--red300)}.delete-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100dvh;background-color:#0001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;justify-content:center;align-items:center;padding:var(--sz32);z-index:1}.delete-modal{display:flex;flex-direction:column;border-radius:var(--sz4);background-color:var(--gray900);box-shadow:var(--shadow5);padding:var(--sz24);gap:var(--sz24);border:2px solid var(--red500)}.delete-modal>.delete-modal-content{display:flex;gap:var(--sz16)}.delete-modal>.delete-modal-content>.delete-modal-icon{--size: var(--sz48);height:var(--size);width:var(--size);color:var(--red500)}.delete-modal>.delete-modal-content>.delete-modal-info{display:flex;flex-direction:column;gap:var(--sz4)}.delete-modal>.delete-modal-content>.delete-modal-info>.delete-modal-title{font-size:var(--fs18);font-weight:700;color:var(--red400)}.delete-modal>.delete-modal-content>.delete-modal-info>.delete-modal-text{font-size:var(--fs16);color:var(--gray400)}.delete-modal>.delete-modal-actions{display:flex;justify-content:end;gap:var(--sz16)}.delete-modal>.delete-modal-actions>button{border:none;outline:none;border-radius:var(--sz4);padding:var(--sz8) var(--sz16);font-size:var(--fs16);cursor:pointer;transition:background-color .1s,color .1s}.delete-modal>.delete-modal-actions>.cancel-button{background-color:var(--gray700);color:var(--gray200)}.delete-modal>.delete-modal-actions>.cancel-button:hover{background-color:var(--gray600);color:var(--gray900)}.delete-modal>.delete-modal-actions>.delete-button{background-color:var(--red500);color:var(--red100)}.delete-modal>.delete-modal-actions>.delete-button:hover{background-color:var(--red400);color:var(--red700)}.delete-modal_fadeIn{animation:deleteModalShow .3s forwards}.delete-modal_fadeIn>.delete-modal{animation:deleteModalFadeIn .3s forwards}.delete-modal_fadeOut{animation:deleteModalHide .3s forwards}.delete-modal_fadeOut>.delete-modal{animation:deleteModalFadeOut .3s forwards}@keyframes deleteModalShow{0%{opacity:0}50%{opacity:1}to{opacity:1}}@keyframes deleteModalHide{0%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes deleteModalFadeIn{0%{scale:.9}50%{scale:1.1}to{scale:1}}@keyframes deleteModalFadeOut{0%{scale:1}50%{scale:1.1}to{scale:.9}}.drop-modal{position:fixed;top:0;left:0;width:100vw;height:100dvh;background-color:#0001;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 var(--sz32) #fff4;z-index:1;padding:var(--sz16);display:flex;justify-content:center;align-items:center}.drop-modal>.drop-modal_content{pointer-events:none;display:flex;justify-content:center;align-items:center;padding:var(--sz32);border-radius:var(--sz8);border:var(--sz4) dashed;gap:var(--sz16);background-color:#0008}.drop-modal>.drop-modal_content>.drop-modal_icon{width:var(--sz64);aspect-ratio:1}.drop-modal>.drop-modal_content>.drop-modal_text{font-weight:700;font-size:var(--fs24)}