input[type=file]{opacity:0;width:1px}.file{display:inline-block}.file:focus-within{outline:5px auto #00f}button,.file{color:#000;border:1px solid var(--gray-50);background-color:var(--gray-50);cursor:pointer;text-align:center;border-radius:4px;padding:8px 16px;transition:all .2s ease-in-out}button:disabled{cursor:not-allowed;filter:opacity(.5)}button:hover,.file:hover{background-color:var(--gray-200);border-color:var(--gray-200)}button.secondary{color:#fff;border-color:var(--gray-800);background-color:var(--gray-800)}button.secondary:hover{border-color:var(--gray-700);background-color:var(--gray-700)}button.danger{border-color:var(--red-500);background-color:var(--red-500);color:#fff}button.danger:hover{border-color:var(--red-700);background-color:var(--red-700)}label{display:flex;color:var(--gray-200);flex-direction:column;gap:4px}input[type=text]{border:1px solid var(--gray-800);outline:none;color:var(--gray-300);background-color:#0000;border-radius:4px;padding:8px 16px;transition:all .2s ease-in-out}input:disabled{cursor:not-allowed;filter:opacity(.5)}input[type=text]:hover{border-color:var(--gray-600);background-color:var(--gray-800)}input[type=text]:focus{border-color:var(--gray-300)}menu[is=c-root-group]{display:flex;list-style:none;overflow-y:auto;flex-direction:column;gap:.5rem;width:100%;padding:0 1rem 0 0}.bookmark{display:flex;border:1px solid var(--gray-900);outline:0;color:#fff;background-color:#0000;border-radius:4px;flex-direction:row;align-items: center;gap:1rem;width:100%;padding:8px;transition:all .2s ease-in-out}.bookmark:hover{background-color:var(--gray-900);border-color:var(--gray-800)}.bookmark[data-active=true]{background-color:var(--gray-900);border-color:var(--gray-700)}.bookmark:focus{border-color:#87cefa}.bookmark img{border:1px solid var(--gray-800);border-radius:99rem;transition:border-color .2s ease-in-out}.bookmark:hover img{border-color:var(--gray-700)}.bookmark div{display:flex;flex-direction:column;min-width:0}.bookmark span{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bookmark span[slot=url]{color:var(--gray-400)}.group{border:1px solid var(--gray-800);border-radius:4px;padding-left:8px}.group>*{margin-top:1rem}.group>:first-child,.group>:nth-child(2){margin-top:0}.group summary{cursor:pointer;flex-direction:row;justify-content:space-between;padding:8px 1rem;transition:all .2s ease-in-out}.group summary:hover{border-color:var(--gray-600);background-color:var(--gray-800)}main{display:flex;flex-direction:row;width:100%;height:100%;min-height:0}.input,.preview,.output{display:flex;flex-direction:column;gap:1rem;height:100%}.preview{width:50%;padding:1rem}.input,.output{width:25%;padding:1rem 0 1rem 1rem}.input>label,.output>div{margin-right:1rem}.input,.preview{border-right:1px dashed var(--gray-800)}header{border-bottom:1px dashed var(--gray-800);display:flex;flex-direction:row;justify-content:start;align-items: center;gap:2rem;padding:8px 16px}header button{color:#fff;background-color:#0000;border-color:#0000;padding:4px 12px}header button:hover{border-color:var(--gray-800);background-color:var(--gray-800)}header span{margin-top:-2px}header nav{padding-left:0}.preview form{display:flex;flex-direction:column;gap:8px}.preview form div{display:flex;flex-direction:row;justify-content:space-between;gap:1rem}iframe{border:0;border-radius:4px;flex-grow:1;width:100%}.output>div{display:flex;flex-direction:column;gap:12px}.output label{cursor:pointer;border:1px solid var(--gray-800);border-radius:4px;flex-direction:row;justify-content:space-between;padding:8px 1rem;transition:all .2s ease-in-out}.output label:hover{border-color:var(--gray-600);background-color:var(--gray-800)}:root{--gray-950:#0a0a0a;--gray-900:#171717;--gray-800:#262626;--gray-700:#404040;--gray-600:#525252;--gray-500:#737373;--gray-400:#a3a3a3;--gray-300:#d4d4d4;--gray-200:#e6e6e6;--gray-100:#f5f5f5;--gray-50:#fafafa;--red-700:#ba1c1c;--red-500:#ef4343}*{box-sizing:border-box;margin:0}html,body{width:100%;height:100%}body{color:#fff;background-color:var(--gray-950);display:flex;flex-direction:column;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Oxygen,Open Sans,sans-serif}label{font-size:12px}input,button,.file{font-family:inherit;font-size:12px}