body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.buttons {
    padding: 10px 0;
}

button {
    padding: 10px;
}

.textarea-wrapper {
    display: inline-block;
    overflow: hidden;
    border: 1px solid darkgray;
    border-radius: 10px;
    padding: 6px;
}

.textarea-wrapper:focus-within {
    border: 1px solid black;
}

.textarea-wrapper>textarea {
    border: none;
    outline: none;
}

.rendered-markdown a::before {
    content: "🔗 ";
}

pre {
    display: inline-block;
    border-radius: 10px;
    overflow-x: auto;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgb(128, 128, 128);
    border-radius: 10px;
    overflow: hidden;
}

thead {
    background-color: rgb(128, 128, 128, 0.25);
}

th,
td {
    padding: 8px;
}

tbody>tr:nth-child(even) {
    background-color: rgb(128, 128, 128, 0.25);
}

tbody>tr:nth-child(odd) {
    background-color: transparent;
}

*[data-active] {
    background-color: lightblue;
}