.collapsible-input__collapsible{background-color:var(--fg-lighter);padding:.25rem;display:flex}.collapsible-input__collapsible summary{display:inline-flex;flex-direction:row;gap:1rem}.collapsible-input__collapsible summary:before{display:flex;align-items:center;content:">";cursor:pointer;color:var(--text-color-dark)}.collapsible-input__collapsible[open] summary:before{transform:rotate(90deg)}.collapsible-input__add{width:10%}.collapsible-input__main{border:2px solid var(--fg-light)}.collapsible-input__list{list-style:none;display:flex;flex-direction:column;gap:.2rem;padding:.5rem 0 .5rem 1.5rem}.collapsible-input__list-element{display:flex;flex-direction:row;gap:.3rem}.collapsible-input__list-element input{background-color:var(--fg);color:var(--text-color-lighter)}.collapsible-input__list-element button{padding:0;margin:0}multi-select{position:relative}.multi-select__display{display:flex;flex-wrap:wrap;gap:.3rem;min-height:2.5rem;cursor:pointer;background-color:var(--fg-lighter);border-radius:var(--border-radius);color:var(--text-color-dark);padding:.25rem;align-items:center}.multi-select__display:empty:before{content:attr(data-placeholder);font-style:italic}.multi-select__selected-item{border-radius:4px;cursor:pointer;background-color:var(--fg-dark);padding:.25rem;color:var(--text-color-light)}.multi-select__options{display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;z-index:10;background-color:var(--bg-dark);max-height:10rem;overflow-y:auto}.multi-select__option{padding:.25rem .5rem;cursor:pointer}tab-group{display:flex;flex-direction:column;padding:.5rem;background-color:var(--fg-light)}.tab-group__tabs{display:block;padding:.25rem;background-color:var(--highlight-lighter)}.tab-group__content{display:flex;flex-direction:column;gap:1rem;padding:.5rem 0 0}.tab{display:inline-flex;align-items:center}.tab:not(:last-child):after{content:"|";color:var(--text-color-light)}.tab__button{display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem;background-color:var(--highlight-lighter);color:var(--text-color-dark);padding:.15rem .35rem;white-space:nowrap;align-items:center;font-weight:700}.tab__button:hover{background-color:var(--highlight-light)}.tab__button.active{background-color:var(--highlight)}:root{--bg: hsl(238, 16%, 50%);--bg-light: hsl(from var(--bg) h s calc(l + 30) );--bg-ligher: hsl(from var(--bg) h s calc(l + 40) );--bg-dark: hsl(from var(--bg) h s calc(l - 30) );--bg-darker: hsl(from var(--bg) h s calc(l - 40) );--fg: hsl(225, 21%, 50%);--fg-light: hsl(from var(--fg) h s calc(l + 20) );--fg-lighter: hsl(from var(--fg) h s calc(l + 40) );--fg-dark: hsl(from var(--fg) h s calc(l - 20) );--fg-darker: hsl(from var(--fg) h s calc(l - 40) );--highlight: hsl(35, 50%, 50%);--highlight-light: hsl(from var(--highlight) h s calc(l + 20) );--highlight-lighter: hsl(from var(--highlight) h s calc(l + 30) );--highlight-dark: hsl(from var(--highlight) h s calc(l - 20) );--highlight-darker: hsl(from var(--highlight) h s calc(l - 30) );--text-color: hsl(270, 40%, 70%);--text-color-light: hsl(from var(--text-color) h calc(s - 20) calc(l + 5) );--text-color-lighter: hsl(from var(--text-color) h s calc(l + 50) );--text-color-dark: hsl(from var(--text-color) h s calc(l - 40) );--text-color-darker: hsl(from var(--text-color) h s calc(l - 50) );--border-radius: .25em;font-family:Roboto,sans-serif;font-size:large;line-height:1.5;font-optical-sizing:auto;font-weight:600;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;padding:0;margin:0}body{background-color:var(--bg-dark);color:var(--text-color-dark);margin:0;display:flex;flex-direction:column;min-width:320px;height:100vh}button{background-color:var(--highlight);padding:.25rem .5rem;color:var(--text-color-dark);font-weight:600;border:0px solid transparent;cursor:pointer}button:hover{background-color:var(--highlight-light)}input,select{background-color:var(--fg-lighter);color:var(--text-color-darker);font-weight:500;border:none}.collapsible{width:100%;border-radius:var(--border-radius, 4px)}.collapsible summary{cursor:pointer;font-weight:600;list-style:none;outline:none;color:var(--text-color-darker);padding:.1rem .3rem;background-color:var(--fg-lighter);border-radius:var(--border-radius);-webkit-user-select:none;user-select:none}.collapsible[open] summary{border-radius:var(--border-radius) var(--border-radius) 0 0}.collapsible summary:hover{background-color:var(--fg-lighter)}.collapsible summary:before{content:">"}.collapsible[open]{background-color:var(--fg-dark)}.collapsible[open] summary:before{transform:rotateX(90deg)}.collapsible-content-container{padding:1rem}.alert{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;width:fit-content;opacity:0;width:100%;height:100%}.alert__text{font-weight:bolder;font-size:xx-large;text-align:center}.alert__image{width:512px;height:512px}.border-radius{border-radius:var(--border-radius)}.config-grid{display:grid;grid-template-columns:1fr 3fr;gap:.5rem 1rem;align-items:center}.config-grid>label{text-align:right}.config-grid input,select{width:100%;padding:.1rem .3rem;font-size:large}label{color:var(--text-color-lighter)}main{display:flex;flex-direction:row;gap:1rem;height:100%}section{flex:1;height:100%;display:flex;flex-direction:column;gap:2rem;padding:.5rem}section>fieldset{padding:.25rem;background-color:var(--fg);display:flex;flex-direction:column}section>fieldset>legend{font-weight:800;font-size:x-large;color:var(--text-color-light);text-shadow:2px 2px 1px var(--text-color-darker)}#config-section{display:flex;flex-direction:column;height:100%;gap:2rem;border-right:2px solid var(--bg-light);overflow-y:auto;scrollbar-width:thin}#preview-section{display:flex;flex-direction:column;height:100%;gap:2rem}.alert{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;opacity:1}.alert__image{width:clamp(128px,50%,512px);height:auto;object-fit:contain}.alert__text{font-size:clamp(1rem,3vw,3rem)}#alert-preview{display:flex;flex-direction:row;gap:.5rem;padding:.3rem;background-color:var(--fg);border-radius:var(--border-radius);align-items:center;justify-content:center}#alert-preview__select{border-radius:var(--border-radius)}#alert-preview__play,#alert-preview__stop{display:flex;align-items:center;justify-content:center}.collapsible-input{border-radius:var(--border-radius)}.url-parser{position:sticky;bottom:0;left:0;display:flex;flex-direction:row;gap:.5rem;padding:.3rem;background-color:var(--fg);max-height:2rem}.url-parser__input{width:100%;padding:0 .25rem}.url-parser__button{display:flex;align-items:center;justify-content:center;height:100%}.url-parser__button img{height:100%}