:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;--text: #fbe4eb;--background: #120208;--primary: #f07e9b;--secondary: #e4e2e2;--accent: #0daaf7;background-color:var(--background);color:var(--text);font-size:16px;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}main{width:100vw;height:200vh;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:calc(100vh - 2rem) auto;gap:1rem;padding:1rem}#example{grid-column:span 2 / span 2}main>*{background-color:#242424;padding:1rem;border-radius:1rem;overflow-y:scroll}#config,#preview{height:100%;display:flex;flex-direction:column;gap:10px}#config-form{display:flex;gap:10px;flex-direction:column}a{color:var(--primary)}.input-group{display:flex;flex-direction:column}input[type=file]{display:none}input,label:has(input[type=file]){background-color:transparent;border-color:var(--text);border-width:2px;border-radius:10px;border-style:solid;padding:10px 15px;font-size:1rem}.image{background-color:var(--secondary);border-radius:10px}.image:not([src]){min-height:100px;aspect-ratio:1.78}button{background-color:var(--primary);border-radius:10px;border-style:none;padding:10px;cursor:pointer;transition:.2s}button:hover{transition:.2s;opacity:.9}.example{width:100%;aspect-ratio:1;border-radius:10px}#examples{display:flex;gap:1rem}footer{display:flex;justify-content:center;align-items:end;height:100%}footer ul{list-style:none;text-align:center}@media(max-width:40rem){main{grid-template-columns:1fr;grid-template-rows:repeat(2,100vh) auto}#example{grid-column:span 1;height:fit-content}#examples{flex-direction:column}}