:root{color-scheme:light dark;--layout-color: light-dark(#e7e7e7, #181818);--body-color: light-dark(#dbdbdb, #242424);--layout-color-secondary: light-dark(#c3c3c3, #3c3c3c);--body-color-secondary: light-dark(#ababab, #545454);--text-color-dimmed: light-dark(#5f5f5f, #a0a0a0);--text-color: light-dark(#191919, #e6e6e6)}*{margin:0;padding:0}.resource form{display:grid;grid-template-areas:"navbar output" "content output";grid-template-rows:75px 1fr;grid-template-columns:minmax(0,3fr) minmax(0,2fr);height:100vh}.navbar{grid-area:navbar;display:flex;flex-direction:column;border-bottom:2px solid var(--layout-color-secondary);background-color:var(--layout-color)}.navbar>*{flex:1;display:flex;flex-direction:row;align-items:center;gap:10px;padding:0 20px}.navbar h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content{grid-area:content;overflow-y:auto}.content>div{display:flex;flex-direction:column;gap:20px;padding:20px}@media(min-width:1500px){.content>div{flex-direction:row}}.content fieldset{flex:1;border:2px solid var(--body-color-secondary)}.output{grid-area:output;display:grid;grid-template-rows:auto 1fr;background-color:var(--layout-color);border-left:2px solid var(--layout-color-secondary)}.option{display:grid;grid-template-columns:1fr 1fr;row-gap:5px;margin:15px 10px}.option button,.option select,.option input{align-self:start;border:2px solid var(--body-color-secondary)}.option .label{display:flex;gap:5px}.option .info-toggle,.option .info-toggle:hover{padding:0;border:none;cursor:pointer;background-color:var(--body-color)}.option .inputs{display:flex;gap:5px}.option .inputs *{flex:1}.option .inputs:has(input:invalid):after{content:"⚠"}.option .invalid-description{display:block;grid-column:1 / 3;color:red}.option .inputs:has(input:valid)+.invalid-description{display:none}.option .description{color:var(--text-color-dimmed);font-style:italic}.option .description,.option .info{grid-column:1 / 3}.output-section{display:flex;flex-direction:column;overflow-y:auto}.output-section>*{margin:10px}.output-options{display:flex;flex-direction:row}.output-options>*{flex:1}output{height:100%;overflow-y:auto}output>div{height:100%}.sidebar{display:grid;grid-template-rows:auto 1fr;border-right:2px solid var(--layout-color-secondary);background-color:var(--layout-color)}.sidebar-header{font-weight:700}.sidebar-general{margin:5px 0;display:grid;grid-template-columns:auto 1fr;align-content:start}.sidebar-general>*{margin:5px 10px}.sidebar-general button,.sidebar-general select{border:2px solid var(--layout-color-secondary)}.sidebar-general button[type=submit]{grid-column:1 / 3}.sidebar-header{display:grid;align-items:center;padding-left:10px;height:25px;background-color:var(--layout-color-secondary)}.sidebar-list{display:grid;align-content:start;overflow-y:auto}.sidebar-list button{text-align:left;padding-left:10px;height:25px;border:none;outline-offset:-3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#app{display:grid;grid-template-columns:300px 1fr;font-size:15px;font-family:Arial,Helvetica,sans-serif;color:var(--text-color);background-color:var(--body-color);height:100vh}h1,h2{font-size:15px}a{color:inherit;text-decoration:inherit}button,select,input{padding:1px 4px;color:var(--text-color);background-color:var(--body-color);border:2px solid var(--layout-color-secondary);font-size:15px;font-family:Arial,Helvetica,sans-serif}button:hover,select:hover{background-color:var(--layout-color-secondary)}
