/* Shared by article Islands and every exported notebook. */
html[data-site-notebook] {
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
        "Source Han Sans SC", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    --font-stack--headings: "Newsreader", Georgia, "Times New Roman",
        "Noto Serif SC", "Songti SC", STSong, "Source Han Serif SC",
        "Noto Serif CJK SC", SimSun, serif;
    --color-background-primary: #fff;
    --color-foreground-primary: #1b1f24;
    --color-foreground-secondary: #5a5c63;
    --color-brand-content: #216b96;
    font-family: var(--font-stack);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-foreground-primary);
}

html[data-site-notebook][data-site-theme="dark"] {
    --color-background-primary: #131416;
    --color-foreground-primary: #d0d0d0;
    --color-foreground-secondary: #a0a0a0;
    --color-brand-content: #7dc3eb;
}

.marimo-inline-demo,
html[data-site-notebook] {
    --marimo-text-font: var(--font-stack);
    --marimo-heading-font: var(--font-stack--headings);
    --island-accent: var(--color-brand-content);
    --island-on-accent: #fff;
    --island-control-surface: #eff3f6;
    --island-control-hover: #e2edf4;
    --island-control-border: #819ba9;
    --island-rule: color-mix(in srgb, var(--color-brand-content) 18%, transparent);
    --island-muted: var(--color-foreground-secondary);
    --island-field-height: 1.75em;
}

.marimo-inline-demo.dark,
html[data-site-notebook][data-site-theme="dark"] {
    --island-on-accent: #112b3b;
    --island-control-surface: color-mix(in srgb, var(--color-background-primary) 92%, #7dc3eb);
    --island-control-hover: color-mix(in srgb, var(--color-background-primary) 84%, #7dc3eb);
    --island-control-border: #658597;
    --island-rule: color-mix(in srgb, #7dc3eb 23%, transparent);
}

/* Keep document prose separate from the editor and its monospace source. */
html[data-site-notebook] body {
    --marimo-text-font: var(--font-stack);
    --marimo-heading-font: var(--font-stack--headings);
    --background: var(--color-background-primary);
    --foreground: var(--color-foreground-primary);
    --textColor: var(--color-foreground-primary);
    font-family: var(--font-stack);
}

html[data-site-notebook] .output-area {
    font-family: var(--article-font-family, var(--font-stack));
    font-size: var(--article-font-size, 1rem);
    line-height: var(--article-line-height, 1.6);
    letter-spacing: var(--article-letter-spacing, normal);
    color: var(--color-foreground-primary);
}

html[data-site-notebook] .output-area .prose,
html[data-site-notebook] .output-area .paragraph {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

html[data-site-notebook] .output-area .prose :is(h1, h2) {
    font-family: var(--font-stack--headings);
    font-weight: 400;
}

html[data-site-notebook] .output-area .prose :is(h3, h4, h5, h6) {
    font-family: var(--font-stack);
    font-weight: 600;
}

html[data-site-notebook] .output-area a:not([download]) {
    color: var(--color-brand-content);
}

/* The same compact sentence controls work in a full notebook too. */
html[data-site-notebook] .article-inline-control {
    display: inline-block;
    width: 4.5em;
    max-width: 100%;
    margin: 0 0.15em;
    vertical-align: baseline;
}

html[data-site-notebook] .article-inline-control-wide {
    width: 6em;
}