body {
    font-family: system-ui, sans-serif;
    max-width: 720px;
    margin: 2em auto;
    padding: 0 1em;
    line-height: 1.6;
    background: #0f061a;
    color: #e0d6f0;
}

a {
    color: #b794e0;
}
code {
    background: #2d1b4e;
    padding: 0.1em 0.3em;
    border-radius: 3px;
}

h2 {
    margin-top: 3em;
}

/* ---- interactive code widget ---- */

.roc-example {
    margin: 1.5em 0;
    border: 1px solid #2d1b4e;
}

.roc-example textarea.roc-source {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 0.75em;
    font-family: monospace;
    font-size: 14px;
    tab-size: 4;
    resize: vertical;
    background: #1e1038;
    color: #e0d6f0;
}

.roc-example button.roc-run {
    display: block;
    width: 100%;
    padding: 0.4em;
    border: none;
    border-top: 1px solid #3d2a5e;
    border-bottom: 1px solid #2d1b4e;
    cursor: pointer;
    background: #2d1b4e;
    color: #c0b0d8;
}

.roc-example button.roc-run:hover {
    background: #3d2a5e;
    color: #e0d6f0;
}

.roc-example button.roc-run:disabled {
    opacity: 0.4;
    cursor: default;
}

.roc-example .roc-output {
    padding: 0.75em;
    background: #0a0314;
    color: #b794e0;
    font-family: monospace;
    font-size: 13px;
    white-space: pre-wrap;
    border-top: 1px solid #2d1b4e;
    min-height: 1.2em;
}

.roc-example .roc-output:empty {
    display: none;
}

.roc-example .roc-output pre {
    margin: 0;
    font: inherit;
    white-space: pre-wrap;
}

/* ---- compiler diagnostics (emitted as HTML by js_stderr) ---- */

.report {
    border-left: 3px solid #555;
    padding: 0.3em 0.6em;
    margin: 0.3em 0;
    font-size: 13px;
    background: #1a0f2e;
}

.report.error {
    border-color: #e55;
    background: #1f0f17;
}
.report.warning {
    border-color: #c90;
    background: #1f180f;
}
.report.info {
    border-color: #48f;
    background: #0f1722;
}

.report h1 {
    font-size: 13px;
    margin: 0 0 0.2em;
}

.report pre {
    margin: 0.2em 0;
    font-family: monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

/* ---- tables ---- */

table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

th,
td {
    text-align: left;
    padding: 0.4em 0.8em;
    border: 1px solid #2d1b4e;
}

th {
    background: #1e1038;
}