:root{color:#202124;font:16px/1.5 system-ui,sans-serif;background:#f5f7fb}body{margin:0}main{box-sizing:border-box;display:grid;gap:1rem;max-width:46rem;margin:3rem auto;padding:2rem;background:#fff;border:1px solid #dfe3eb;border-radius:.75rem}button{width:fit-content;padding:.6rem 1rem;cursor:pointer}button:disabled{cursor:default}#backend-selector{display:flex;align-items:center;gap:.5rem;line-height:1.5}#backend-selector button{padding:0;line-height:inherit;color:#202124;background:none;border:0;border-bottom:1px solid transparent;border-radius:0}#backend-selector button.selected{border-bottom-color:currentColor}#backend-selector button:disabled{color:#9ca3af}.result-header{display:flex;justify-content:flex-end;margin-bottom:-1rem}#copy-result{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;color:#202124;background:#fff;border:1px solid #dfe3eb;border-radius:.35rem}#copy-result:disabled{color:#9ca3af;background:#f3f4f6;border-color:#e5e7eb}#copy-result:not(:disabled):hover{background:#f5f7fb}#copy-result .check-icon,#copy-result.copied .copy-icon{display:none}#copy-result.copied .check-icon{display:block}pre{min-height:5rem;padding:1rem;overflow:auto;white-space:pre-wrap;background:#f5f7fb;border-radius:.5rem}