.doc-header {
    display: block;
    gap: 10px;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    font-size: 20px;
}

.doc-content {
    max-width: 400px;
    margin: 10px 0;
}

.layout-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.layout-row > * {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.layout-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.genstudio-container {
    background-color: white;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;

    table, tr {
        text-align: left;
    }
    th {
        text-align: center;
    }
    table {
        td, th {
            padding: 6px;
        }
    }
    .prose {
        max-width: none;
        font-size: inherit;
        p, ul, ol {
            max-width: 70em;
        }
        code {
            font-family: Menlo, Monaco, 'Courier New', monospace;
            background-color: rgba(0,0,0,0.1);
            border-radius: 3px;
            padding: 2px 5px;
            font-size: inherit;
            font-weight: normal;

        }
        code::before, code::after {
            content: ''

        }
    }
}

.genstudio-container, pre code {
    color: #333333;
}

.bylight-link {
    color: inherit;
    background-color: color-mix(in srgb, var(--bylight-color) 25%, transparent);
    padding: 0 3px;

    &.bylight-hover {
        background-color: color-mix(in srgb, var(--bylight-color) 40%, transparent);
        color: inherit;
    }
}

.bylight-code {
    color: color-mix(in srgb, var(--bylight-color) 80%, black);
    font-weight: bold;
    background-color: color-mix(in srgb, var(--bylight-color) 20%, transparent);

    &.bylight-hover {
        background-color: color-mix(in srgb, var(--bylight-color) 35%, transparent);
        color: color-mix(in srgb, var(--bylight-color) 70%, currentColor);
    }
}

.bylight-link,
.bylight-code {
    cursor: default;
}
