.resources-section {
    --resources-sidebar-bg: transparent;
    --resources-sidebar-fg: var(--theme-text);
    --resources-sidebar-width: 280px;
    --resources-sidebar-toggle-width: 19px;
    --resources-sidebar-resource-font-size: calc(var(--nav-font-size) * 0.92);
    --resources-sidebar-session-index-font-size: calc(var(--nav-font-size) * 0.864);
    --resources-sidebar-index-font-size: calc(var(--nav-font-size) * 0.72);
}

form.resources-resource-admin-form > .resources-resource-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--type-space-content);
}

.resources-resource-editor-step,
.resources-resource-editor-optional {
    border-top: 1px solid var(--theme-divider-standard);
    padding-top: var(--type-space-content);
}

.resources-resource-editor-step h3 {
    margin: 0;
    font-size: var(--type-size-section-title);
    line-height: var(--type-leading-heading);
}

.resources-resource-editor-step > p,
.resources-resource-editor-optional > p {
    margin: 4px 0 8px;
    color: var(--theme-text-secondary);
    line-height: var(--type-leading-ui);
}

.resources-resource-admin-form .resources-resource-form-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--type-space-compact);
}

.resources-resource-admin-form .resources-resource-form-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.32fr) minmax(0, 1fr);
    gap: 4px 12px;
    align-items: start;
    margin: 0;
    padding: 5px 0;
}

.resources-resource-admin-form .resources-resource-form-row > label {
    padding-top: 5px;
}

.resources-resource-form-control {
    min-width: 0;
}

.resources-resource-form-control :is(input, select, textarea) {
    max-width: 100%;
}

.resources-resource-form-control .helptext,
.resources-resource-form-control .errorlist {
    display: block;
    margin-inline: 0;
}

.resources-resource-form-row[data-resources-resource-field="source_kind"] .resources-resource-form-control > div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--type-space-tight) var(--type-space-compact);
}

.resources-resource-form-row[data-resources-resource-field="source_kind"] label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border: 1px solid var(--theme-input-border);
    border-radius: 4px;
    line-height: var(--type-leading-ui);
}

.resources-resource-source-guidance {
    min-height: calc(1em * var(--type-leading-ui));
    color: var(--theme-text-secondary);
    line-height: var(--type-leading-ui);
}

.resources-resource-source-guidance:not(:has([data-resources-source-guidance]:not(:empty))) {
    display: none;
}

.resources-resource-form-row[hidden] {
    display: none;
}

.resources-resource-editor-optional {
    margin: 0;
}

.resources-resource-editor-optional > summary {
    cursor: pointer;
    color: var(--theme-text-strong);
    font-weight: 700;
    line-height: var(--type-leading-ui);
}

.resources-resource-editor-optional[open] > summary {
    margin-bottom: 8px;
}

.resources-resource-editor-optional .resources-resource-attachments {
    margin-top: var(--type-space-compact);
}

.resources-bulk-set-list {
    display: grid;
    gap: var(--type-space-content);
}

.resources-bulk-set {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: var(--type-space-content);
    border: 1px solid var(--theme-divider-standard);
    border-radius: 6px;
}

.resources-bulk-set > legend {
    padding-inline: 4px;
    color: var(--theme-text-strong);
    font-weight: 700;
}

.resources-bulk-remove-set {
    position: absolute;
    top: 6px;
    right: var(--type-space-content);
}

.resources-bulk-set-group + .resources-bulk-set-group {
    margin-top: var(--type-space-content);
    padding-top: var(--type-space-compact);
    border-top: 1px solid var(--theme-divider-soft);
}

.resources-bulk-set-group.resources-bulk-set-group-emphasis {
    padding: var(--type-space-compact);
    border: 1px solid var(--theme-focus-ring);
    border-radius: 4px;
    background: var(--theme-accent-surface-strong);
    box-shadow: inset 3px 0 0 var(--theme-focus-ring);
}

.resources-bulk-set-group > h4 {
    margin: 0;
    font-size: var(--type-size-body);
    line-height: var(--type-leading-heading);
}

.resources-bulk-set-group > p {
    margin: 4px 0;
    color: var(--theme-text-secondary);
    line-height: var(--type-leading-ui);
}

.resources-bulk-add-set {
    margin-top: var(--type-space-content);
}

@media (max-width: 650px) {
    .resources-resource-admin-form .resources-resource-form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * A document preview is also embedded in Board and Playground, outside the
 * Resources page shell. Keep every typography and inset token on the shared
 * preview root so the same markup has the same computed layout everywhere.
 */
.resources-section,
.resources-file-preview {
    --resources-content-font-size: var(--nav-font-size);
    --resources-content-title-font-size: var(--type-size-content-title);
    --resources-content-code-font-size: calc(var(--nav-font-size) * 0.92);
    --resources-content-small-font-size: var(--type-size-small);
    --resources-code-display-font-size: var(--code-display-font-size);
    --resources-content-line-height: 1.4;
    --resources-preview-inline-padding: var(--type-space-content);
    --resources-code-font-family: var(--code-font);
    --resources-rendered-markdown-font-family: var(--body-font);
    --resources-rendered-markdown-font-size: var(--resources-content-font-size);
    --resources-rendered-markdown-heading-font-size: var(--resources-content-title-font-size);
    --resources-rendered-markdown-code-font-family: var(--resources-code-font-family);
    --resources-rendered-markdown-code-font-size: var(--resources-code-display-font-size);
    --resources-rendered-markdown-small-font-size: var(--resources-content-small-font-size);
    --resources-rendered-markdown-line-height: var(--type-leading-reading);
}

.resources-section {
    margin-top: 0;
    margin-bottom: calc(-1 * var(--main-padding-bottom));
    min-width: 0;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.resources-layout {
    display: grid;
    grid-template-columns: var(--resources-sidebar-width) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    position: relative;
    min-width: 0;
    transition: grid-template-columns 180ms ease;
    flex: 1 0 auto;
}

.resources-layout.is-sidebar-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
}

.resources-layout.is-sidebar-collapsed .resources-sidebar {
    display: none;
}

@media (min-width: 901px) {
    .resources-layout::before {
        content: "";
        position: absolute;
        top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
        bottom: 0;
        left: calc(var(--resources-sidebar-width) + 5px);
        width: 1px;
        background: var(--theme-divider-strong);
        pointer-events: none;
        transition: left 180ms ease;
    }

    .resources-layout.is-sidebar-collapsed::before {
        left: 5px;
    }
}

.resources-sidebar-toggle {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
    left: calc(var(--resources-sidebar-width) + 5px - var(--resources-sidebar-toggle-width));
    width: var(--resources-sidebar-toggle-width);
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--type-control-padding-tight);
    border: 0;
    border-radius: 0 0 4px 4px;
    background: var(--theme-sidebar-toggle-bg);
    color: var(--theme-text);
    cursor: pointer;
    font-family: var(--body-font);
    line-height: 1;
    transition: left 180ms ease, background-color 120ms ease;
}

.resources-layout.is-sidebar-collapsed .resources-sidebar-toggle {
    left: calc(5px - var(--resources-sidebar-toggle-width));
    height: 76px;
}

.resources-sidebar-toggle:hover,
.resources-sidebar-toggle:focus-visible {
    background: var(--theme-sidebar-toggle-hover);
}

.resources-sidebar-toggle-label {
    display: block;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    font-size: 10.8px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
}

.resources-sidebar {
    grid-column: 1;
    box-sizing: border-box;
    align-self: stretch;
    margin-top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
    margin-left: calc(-1 * var(--main-padding-left));
    min-height: 100%;
    padding-block: var(--type-sidebar-shell-padding-block);
    padding-inline: var(--type-sidebar-shell-padding-inline);
    background: var(--resources-sidebar-bg);
    color: var(--resources-sidebar-fg);
}

.resources-category-block + .resources-category-block {
    margin-top: 0;
}

.resources-category-btn {
    width: 100%;
    display: block;
    text-align: left;
    border: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    background: transparent;
    color: var(--resources-sidebar-fg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--nav-font-size);
    font-weight: 400;
    line-height: 1.4;
}

.resources-category-btn:hover {
    color: var(--resources-sidebar-fg);
}

.resources-category-btn.is-open {
    font-weight: 700;
}

.resources-category-code {
    display: inline-block;
    vertical-align: top;
    margin-right: 0;
    white-space: nowrap;
    font-size: var(--nav-font-size);
}

.resources-category-name {
    margin-inline-start: 0.25em;
}

.resources-session-list {
    display: none;
    margin-left: 2px;
    padding-top: 2px;
}

.resources-session-list.is-open {
    display: block;
}

.resources-session-tree {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 1px dotted var(--theme-divider-dotted);
}

.resources-session-item {
    margin: 0;
    padding: 0;
}

.resources-session-btn {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(25.92px, max-content) minmax(0, 1fr);
    column-gap: 0.25em;
    align-items: start;
    text-align: left;
    border: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    background: transparent;
    color: var(--resources-sidebar-fg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--nav-font-size);
    line-height: 1.4;
}

.resources-session-btn.is-active {
    font-weight: 700;
}

.resources-session-code {
    display: block;
    align-self: start;
    white-space: nowrap;
    font-size: var(--resources-sidebar-session-index-font-size);
}

.resources-session-title {
    min-width: 0;
    overflow-wrap: break-word;
    font-size: var(--nav-font-size);
}

.resources-resource-tree {
    display: none;
    list-style: none;
    margin: 3px 0 2px 14px;
    padding: 0 0 0 12px;
    border-left: 1px dotted var(--theme-divider-dotted);
}

.resources-resource-tree.is-open {
    display: block;
}

.resources-resource-item {
    margin: 0;
    padding: 0;
}

.resources-resource-btn {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(25.92px, max-content) minmax(0, 1fr);
    column-gap: 0.25em;
    align-items: start;
    border: 0;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    background: transparent;
    color: var(--resources-sidebar-fg);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--resources-sidebar-resource-font-size);
    line-height: 1.4;
    text-align: left;
}

.resources-resource-btn.is-active {
    font-weight: 700;
}

.resources-resource-index {
    display: block;
    align-self: start;
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: var(--resources-sidebar-index-font-size);
    white-space: nowrap;
}

.resources-resource-title {
    min-width: 0;
    overflow-wrap: break-word;
}

.resources-no-session {
    margin: 0;
    padding: 2px 0 2px 16px;
    font-size: var(--nav-font-size);
    line-height: 1.4;
}

.resources-detail-column {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    max-width: none;
    min-height: 320px;
    margin-top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
    margin-left: -5px;
    padding: var(--type-space-content);
}

.resources-home-panel,
.resources-panel {
    display: none;
    min-width: 0;
    max-width: 100%;
}

.resources-panel {
    padding-bottom: calc(var(--main-font-size) * 1.5);
}

.resources-home-panel.is-active,
.resources-panel.is-active {
    display: block;
}

.resources-home-panel.is-active {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

.resources-home-panel.is-active::after {
    content: "";
    display: block;
    flex: 0 0 1px;
    width: 100%;
    margin-top: auto;
    background: var(--theme-divider-strong);
}

.resources-home-panel h5,
.resources-empty h5 {
    margin: 0 0 var(--type-space-content);
    font-size: var(--type-size-content-title);
    font-weight: 700;
    line-height: var(--type-leading-heading);
}

.resources-home-panel p,
.resources-empty p {
    margin: 0;
    font-size: var(--type-size-content-description);
    line-height: var(--type-leading-reading);
}

.resources-home-table-wrap {
    box-sizing: border-box;
    min-width: 0;
    margin-top: var(--type-space-content);
    margin-bottom: var(--type-space-content);
    width: 100%;
    margin-right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.resources-home-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--nav-font-size);
    line-height: 1.4;
}

.resources-home-table th,
.resources-home-table td {
    border-top: 1px solid var(--theme-divider-strong);
    padding: 4px 8px 4px 0;
    text-align: left;
    vertical-align: top;
    font-size: var(--nav-font-size);
}

.resources-home-table > tbody > tr + tr > td {
    border-top: 1px dotted var(--theme-divider-dotted);
}

/* Keep the table edge distinct from the home panel's later solid closing line. */
.resources-home-table > tbody > tr:last-child > td {
    border-bottom: 1px dotted var(--theme-divider-dotted);
}

.resources-home-table .resources-home-category-cell {
    width: 24%;
    padding-right: 12px;
}

.resources-home-table .resources-home-session-cell {
    width: 26%;
    padding-right: 12px;
}

.resources-home-table th {
    font-weight: 700;
}

.resources-home-category-line,
.resources-home-session-btn,
.resources-home-resource-btn {
    width: 100%;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 6px;
    align-items: start;
    line-height: 1.4;
}

.resources-home-session-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--nav-font-size);
}

.resources-home-resource-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.resources-home-resource-btn {
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: var(--theme-text);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--resources-sidebar-resource-font-size);
}

.resources-home-session-btn:hover,
.resources-home-resource-btn:hover,
.resources-home-session-btn:focus-visible,
.resources-home-resource-btn:focus-visible {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resources-home-category-code,
.resources-home-session-code,
.resources-home-resource-index {
    align-self: start;
    white-space: nowrap;
    font-size: var(--nav-font-size);
}

.resources-home-resource-index {
    display: block;
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: var(--resources-sidebar-index-font-size);
}

.resources-home-session-code {
    display: block;
    font-size: var(--resources-sidebar-session-index-font-size);
}

.resources-home-category-title,
.resources-home-session-title,
.resources-home-resource-title {
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    font-size: var(--nav-font-size);
}

.resources-home-resource-title {
    font-size: var(--resources-sidebar-resource-font-size);
}

.resources-home-empty {
    color: var(--theme-text-secondary);
    font-size: var(--resources-content-small-font-size);
    font-style: italic;
    line-height: var(--resources-content-line-height);
}

.resources-session-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: end;
    margin: 0 0 var(--type-space-content) 0;
    padding: 0 0 var(--type-space-compact) 0;
    border-bottom: 1px solid var(--theme-divider-strong);
}

.resources-session-heading h5 {
    margin: 0;
    font-size: var(--type-size-section-title);
    font-weight: 700;
    line-height: 1.4;
}

.resources-session-count {
    margin: 0 0 3px 0;
    color: var(--theme-text-muted);
    font-size: calc(var(--nav-font-size) * 0.85);
    line-height: 1.4;
    white-space: nowrap;
}

.resources-session-empty {
    box-sizing: border-box;
    margin: 0;
    padding: var(--type-space-content);
    border: 1px dashed var(--theme-text-subtle);
    color: var(--theme-text-muted);
    font-size: var(--nav-font-size);
    line-height: 1.5;
}

.resources-card {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.resources-card-heading {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 7px;
    color: var(--theme-text);
}

.resources-card-print-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.resources-card-title {
    min-width: 0;
    font-size: var(--type-size-content-title);
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.resources-card-title-group {
    display: flex;
    min-width: 0;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
}

.resources-card-uploaded-at {
    flex: 0 0 auto;
    color: var(--theme-text-secondary);
    font-size: var(--resources-content-small-font-size);
    font-weight: 400;
    line-height: var(--resources-content-line-height);
    white-space: nowrap;
}

.resources-card-index {
    align-self: flex-start;
    flex: 0 0 auto;
    min-width: 3ch;
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: calc(var(--main-font-size) * 0.95);
    font-weight: 600;
    line-height: 1.55;
}

.resources-description {
    margin: var(--type-space-content) 0 0;
    padding-bottom: 0;
    font-size: var(--type-size-content-description);
    line-height: var(--type-leading-reading);
}

.resources-description-empty {
    color: var(--theme-text-muted);
    font-style: italic;
}

.resources-description-divider {
    height: 0;
    margin: var(--type-space-content) 0;
    border: 0;
    border-top: 1px solid var(--theme-divider-standard);
}

/* Keep a compact gap between the divider and notebook file-loading block. */
.resources-description-divider:has(+ .resources-notebook-preview) {
    margin-bottom: var(--type-space-compact);
}

/* Local file controls share the transparent notebook-control surface. */
.resources-notebook-preview .resources-notebook-local-files {
    background: transparent;
}

.resources-actions {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    row-gap: 6px;
    align-items: center;
}

.resources-action-entry {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    min-width: 0;
    max-width: 100%;
}

.resources-action-label {
    flex: 0 0 auto;
    color: var(--theme-text-secondary);
    font-size: var(--resources-code-display-font-size);
    font-weight: 400;
    line-height: 1.4;
}

.resources-action-entry .resources-action-link {
    font-size: var(--resources-code-display-font-size);
}

.resources-attachment-group {
    flex: 1 0 100%;
    min-width: 0;
}

.resources-attachment-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 18px;
    row-gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.resources-attachment-item {
    min-width: 0;
    max-width: 100%;
}

.resources-attachment-link {
    overflow-wrap: anywhere;
}

.resources-action-link {
    display: inline-block;
    padding: 0;
    color: var(--theme-text);
    background: transparent;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-size: var(--nav-font-size);
    font-weight: 700;
    line-height: 1.4;
}

.resources-action-link:hover,
.resources-action-link:focus-visible {
    text-decoration-thickness: 2px;
}

.resources-inline-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    vertical-align: -0.12em;
}

.resources-download-unavailable {
    color: var(--theme-text-muted);
    font-size: var(--nav-font-size);
    font-style: italic;
    line-height: 1.4;
}

.resources-file-preview,
.resources-notebook-preview {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dotted var(--theme-divider-dotted);
    font-family: var(--body-font);
    font-size: var(--resources-content-font-size);
    line-height: var(--type-leading-reading);
}

.resources-gif-gallery {
    display: grid;
    gap: 10px;
    margin: 0 0 10px;
}

.resources-gif-preview {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px;
}

.resources-gif-gallery .resources-gif-preview {
    margin-bottom: 0;
}

.resources-gif-preview img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    border: 1px solid var(--theme-border-soft, #c7c7c7);
    border-radius: 6px;
    background: var(--theme-surface-muted, #f6f8fa);
    object-fit: contain;
}

.resources-gif-preview figcaption {
    margin-top: 4px;
    color: var(--theme-text-muted, #59636e);
    font-family: var(--body-font);
    font-size: var(--resources-code-display-font-size);
    overflow-wrap: anywhere;
}

.resources-file-preview .resources-markdown-body,
.resources-notebook-preview .resources-notebook-embed {
    margin-top: 0;
}

.resources-preview-refresh-warning {
    margin: 8px 12px 0;
    color: var(--theme-text-muted);
    font-size: var(--resources-content-small-font-size);
    line-height: var(--type-leading-reading);
}

.resources-notebook-embed {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    margin-top: var(--type-space-content);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--theme-surface);
}

/* The shared disclosure and its collapsed notebook area use the page surface. */
.resources-file-preview .resources-notebook-embed {
    background: transparent;
}

.resources-notebook-control-disclosure {
    --resources-notebook-summary-text-offset: var(--type-space-compact);
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.resources-notebook-control-disclosure[open] {
    border-bottom: 0;
}

.resources-notebook-control-summary {
    padding-inline: var(--resources-preview-inline-padding);
    background: var(--theme-surface-muted);
}

/* Every shared document preview keeps the disclosure shape without a fill. */
.resources-file-preview .resources-notebook-control-summary {
    background: transparent;
}

/* Match the state text to the rightmost action while preserving the title baseline. */
.resources-notebook-control-summary > .instruction-disclosure__state {
    margin-inline-end: var(--resources-preview-inline-padding);
}

.resources-notebook-control-summary:focus-visible {
    outline-offset: -2px;
}

.resources-notebook-control-disclosure-body {
    min-width: 0;
}

/*
 * The bands already own a 12px inset. Add only the remaining 8px needed to
 * meet the title after its 12px chevron. Notebook cells retain their own inset.
 */
.resources-notebook-control-disclosure-body > .playground-notebook-file-bar
    > .playground-notebook-file-status,
.resources-notebook-control-disclosure-body > .resources-notebook-local-files
    .resources-notebook-local-file-status,
.resources-notebook-control-disclosure-body > .resources-notebook-local-files
    .resources-notebook-local-file-list,
.resources-notebook-control-disclosure-body > .resources-notebook-toolbar
    > .resources-notebook-runtime-info {
    margin-inline-start: var(--resources-notebook-summary-text-offset);
}

.resources-notebook-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    min-width: 0;
    padding: 8px var(--resources-preview-inline-padding);
    border-bottom: 1px solid var(--theme-divider-soft);
    background: var(--theme-surface-muted);
    color: var(--theme-text-strong);
    font-size: var(--resources-content-code-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-notebook-toolbar strong {
    font-family: var(--body-font);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
}

.resources-notebook-runtime-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

/* Runtime state is retained for the notebook controller, not shown in the toolbar. */
.resources-notebook-runtime-status[hidden] {
    display: none;
}

.resources-colab-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    min-width: 0;
    padding: var(--type-space-compact) var(--resources-preview-inline-padding);
    border-bottom: 1px solid var(--theme-divider-soft);
    background: var(--theme-surface-muted);
    color: var(--theme-text-strong);
    font-size: var(--resources-content-code-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-colab-runtime-info {
    display: flex;
    flex: 1 1 420px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.resources-colab-runtime-info strong {
    font-family: var(--body-font);
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
}

.resources-colab-runtime-info span {
    color: var(--theme-text-secondary);
}

.resources-colab-open-link {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-text-strong);
    border-radius: 5px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
    text-decoration: none;
    white-space: nowrap;
}

.resources-colab-open-link:hover,
.resources-colab-open-link:focus-visible {
    background: var(--theme-surface-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resources-colab-open-link[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
}

.resources-colab-open-link[aria-disabled="true"]:hover {
    background: var(--theme-control-bg);
    text-decoration: none;
}

@media (max-width: 560px) {
    .resources-colab-open-link {
        width: 100%;
    }
}

.resources-notebook-package-details {
    min-width: 0;
    margin: 0;
}

.resources-notebook-package-summary {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--theme-text-strong);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    list-style-position: inside;
    text-decoration: none;
    text-underline-offset: 2px;
}

.resources-notebook-package-summary::before {
    width: 0;
    height: 0;
    margin-right: 6px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid currentColor;
    content: "";
    transition: transform 120ms ease;
}

.resources-notebook-package-details[open] > .resources-notebook-package-summary::before {
    transform: rotate(90deg);
}

.resources-notebook-package-summary[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.resources-notebook-package-summary::-webkit-details-marker {
    display: none;
}

.resources-notebook-package-summary:hover,
.resources-notebook-package-summary:focus-visible {
    background: transparent;
    text-decoration: underline;
}

/* Resources and Playground share one compact reference-toggle button contract. */
.resources-file-preview .notebook-reference-toggle {
    appearance: none;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: var(--type-control-padding-inline);
    min-height: var(--type-notebook-control-height);
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-control-border);
    border-radius: 4px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    font-size: var(--resources-content-small-font-size);
    font-weight: 400;
    line-height: var(--type-leading-ui);
    text-align: center;
    text-decoration: none;
}

.resources-file-preview .notebook-reference-toggle::before {
    flex: 0 0 auto;
    margin-inline-end: 0;
}

.resources-file-preview .notebook-reference-toggle:hover,
.resources-file-preview .notebook-reference-toggle:focus-visible {
    border-color: var(--theme-text-secondary);
    background: var(--theme-surface-hover);
    font-weight: 400;
    text-decoration: none;
}

.resources-file-preview .notebook-reference-toggle:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.resources-notebook-package-details[open] > .notebook-reference-toggle,
.resources-file-preview .notebook-reference-toggle[aria-expanded="true"] {
    border-color: var(--theme-text-secondary);
    background: var(--theme-control-active);
}

.resources-notebook-package-catalog {
    box-sizing: border-box;
    width: 322px;
    margin-top: 6px;
    padding: var(--type-space-content);
    border: 1px solid var(--theme-border-soft);
    border-radius: 5px;
    background: var(--theme-surface);
    color: var(--theme-text-strong);
    font-size: var(--resources-code-display-font-size);
    line-height: var(--resources-content-line-height);
}

/* Override the site's element-level li/strong/code sizes inside the catalog. */
.resources-notebook-package-catalog,
.resources-notebook-package-catalog * {
    font-size: var(--resources-code-display-font-size);
}

.resources-notebook-package-note,
.resources-notebook-package-catalog-status {
    margin: 0 0 8px;
    color: var(--theme-text-secondary);
}

.resources-notebook-package-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.resources-notebook-package-search {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 7px;
    border: 1px solid var(--theme-input-border);
    border-radius: 4px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    font-family: var(--body-font);
    font-size: inherit;
    line-height: inherit;
}

.resources-notebook-package-count {
    flex: 0 0 auto;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.resources-notebook-package-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
    max-height: 320px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.resources-notebook-package-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 4px 0;
    border-bottom: 1px dotted var(--theme-divider-dotted);
}

.resources-notebook-package-identity {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 6px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.resources-notebook-runtime-label-narrow {
    display: none;
}

.resources-notebook-package-identity strong {
    font-family: var(--body-font);
    font-size: inherit;
}

.resources-notebook-package-identity span,
.resources-notebook-package-imports,
.resources-notebook-package-empty {
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: inherit;
}

.resources-notebook-package-imports {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-wrap: anywhere;
    text-align: right;
}

.resources-notebook-package-empty {
    grid-column: 1 / -1;
    padding: 6px 0;
}

@media (max-width: 650px) {
    .resources-notebook-package-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

.resources-notebook-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

.resources-notebook-toolbar-button {
    min-width: 62px;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-control-border);
    border-radius: 5px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-toolbar-button:not(:disabled):hover,
.resources-notebook-toolbar-button:not(:disabled):focus-visible {
    background: var(--theme-surface-hover);
}

.resources-notebook-toolbar-button:disabled {
    border-color: var(--theme-border-subtle);
    background: var(--theme-control-muted-bg);
    color: var(--theme-text-disabled);
    cursor: default;
    opacity: 0.5;
}

.resources-notebook-local-files {
    box-sizing: border-box;
    padding: 8px var(--resources-preview-inline-padding);
    border-top: 1px solid var(--theme-divider-soft);
    border-bottom: 1px solid var(--theme-divider-soft);
    background: var(--theme-control-bg);
    font-size: var(--resources-content-code-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-notebook-local-file-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
}

.resources-notebook-local-file-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.resources-notebook-local-file-button,
.resources-notebook-remove-local-file {
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-control-border);
    border-radius: 5px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-local-file-button:not(:disabled):hover,
.resources-notebook-local-file-button:not(:disabled):focus-visible,
.resources-notebook-remove-local-file:not(:disabled):hover,
.resources-notebook-remove-local-file:not(:disabled):focus-visible {
    background: var(--theme-surface-hover);
}

.resources-notebook-local-file-button:disabled,
.resources-notebook-remove-local-file:disabled {
    border-color: var(--theme-border-subtle);
    background: var(--theme-control-muted-bg);
    color: var(--theme-text-disabled);
    cursor: default;
    opacity: 0.5;
}

.resources-notebook-local-file-status {
    min-width: 0;
    color: var(--theme-text-secondary);
    overflow-wrap: anywhere;
}

.resources-notebook-local-file-status.is-error {
    color: var(--theme-error-text);
}

.resources-notebook-local-file-help {
    margin: 6px 0 0;
    color: var(--theme-text-secondary);
}

.resources-notebook-local-file-help code {
    font-family: var(--resources-code-font-family);
    font-size: inherit;
}

.resources-notebook-local-file-name {
    font-family: var(--body-font);
    font-size: inherit;
}

.resources-notebook-local-file-help code {
    padding: 0.1em 0.3em;
    border-radius: 4px;
    background: var(--theme-inline-code-bg);
}

.resources-notebook-local-file-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 7px 0 0;
    padding: 0;
    list-style: none;
}

.resources-notebook-local-file-list:empty {
    display: none;
}

.resources-notebook-local-file-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    line-height: var(--type-leading-reading);
}

.resources-notebook-local-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resources-notebook-local-file-size {
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.resources-notebook-body {
    min-width: 0;
    max-width: 100%;
    padding-top: 10px;
}

.resources-notebook-status {
    margin: 0;
    padding: 12px 0;
    color: var(--theme-text-secondary);
    font-size: var(--resources-content-font-size);
    font-style: italic;
    line-height: var(--type-leading-reading);
}

.resources-markdown-body {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-height: 480px;
    margin-top: var(--type-space-content);
    padding: var(--type-space-content) var(--resources-preview-inline-padding);
    overflow: auto;
    border: 0;
    background: var(--theme-surface);
    color: var(--theme-text-strong);
    font-family: var(--resources-rendered-markdown-font-family);
    font-size: var(--resources-rendered-markdown-font-size);
    line-height: var(--resources-rendered-markdown-line-height);
    overflow-wrap: break-word;
}

.resources-markdown-body > :first-child {
    margin-top: 0;
}

.resources-markdown-body > :last-child {
    margin-bottom: 0;
}

.resources-markdown-body h1,
.resources-markdown-body h2,
.resources-markdown-body h3,
.resources-markdown-body h4,
.resources-markdown-body h5,
.resources-markdown-body h6 {
    margin-top: calc(var(--main-font-size) * 1.2);
    margin-bottom: calc(var(--main-font-size) * 0.65);
    font-weight: 600;
    line-height: var(--resources-rendered-markdown-line-height);
}

.resources-markdown-body h1 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--theme-divider-soft);
    font-size: var(--resources-rendered-markdown-heading-font-size);
}

.resources-markdown-body h2 {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--theme-divider-soft);
    font-size: var(--resources-rendered-markdown-font-size);
}

.resources-markdown-body h3 {
    font-size: var(--resources-rendered-markdown-font-size);
}

.resources-markdown-body h4 {
    font-size: var(--resources-rendered-markdown-font-size);
}

.resources-markdown-body h5 {
    font-size: var(--resources-rendered-markdown-font-size);
}

.resources-markdown-body h6 {
    color: var(--theme-text-secondary);
    font-size: var(--resources-rendered-markdown-font-size);
}

.resources-markdown-body p,
.resources-markdown-body ul,
.resources-markdown-body ol,
.resources-markdown-body blockquote,
.resources-markdown-body pre,
.resources-markdown-body table {
    margin-top: 0;
    margin-bottom: calc(var(--main-font-size) * 0.65);
}

.resources-markdown-body p,
.resources-markdown-body ul,
.resources-markdown-body ol,
.resources-markdown-body li,
.resources-markdown-body a,
.resources-markdown-body blockquote,
.resources-markdown-body table,
.resources-markdown-body th,
.resources-markdown-body td,
.resources-markdown-body strong,
.resources-markdown-body em,
.resources-markdown-body b,
.resources-markdown-body i,
.resources-markdown-body mark,
.resources-markdown-body del,
.resources-markdown-body ins,
.resources-markdown-body u,
.resources-markdown-body var,
.resources-markdown-body q {
    font-size: inherit;
    line-height: inherit;
}

.resources-markdown-body small {
    font-size: 0.8em;
    line-height: inherit;
}

.resources-markdown-body sub,
.resources-markdown-body sup {
    font-size: 0.75em;
    line-height: 0;
}

.resources-markdown-body ul,
.resources-markdown-body ol {
    padding-left: 18px;
}

.resources-markdown-body li + li {
    margin-top: 0.2em;
}

.resources-markdown-body a {
    color: var(--theme-link);
    text-decoration: none;
}

.resources-markdown-body a:visited {
    color: var(--theme-link-visited);
}

.resources-markdown-body a:hover,
.resources-markdown-body a:focus-visible {
    color: var(--theme-link-hover);
    text-decoration: underline;
}

.resources-markdown-body del {
    color: var(--theme-error-text);
    text-decoration-color: currentColor;
}

.resources-markdown-body ins {
    color: var(--theme-success);
    text-decoration-color: currentColor;
}

.resources-markdown-body pre {
    overflow-x: auto;
}

.resources-markdown-body .katex-display {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: var(--type-space-tight);
}

.resources-markdown-body code {
    font-family: var(--resources-rendered-markdown-code-font-family);
    font-size: var(--resources-rendered-markdown-code-font-size);
    line-height: var(--resources-rendered-markdown-line-height);
}

.resources-markdown-body :not(pre) > code {
    display: inline;
    padding: 0.2em 0.4em;
    border-radius: 6px;
    background: var(--theme-inline-code-bg);
    color: var(--theme-inline-code-text);
}

.resources-code-block {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    --resources-syntax-comment: var(--theme-code-syntax-comment);
    --resources-syntax-control-keyword: var(--theme-code-syntax-control-keyword);
    --resources-syntax-keyword: var(--theme-code-syntax-keyword);
    --resources-syntax-type: var(--theme-code-syntax-type);
    --resources-syntax-function: var(--theme-code-syntax-function);
    --resources-syntax-attribute: var(--theme-code-syntax-attribute);
    --resources-syntax-variable: var(--theme-code-syntax-variable);
    --resources-syntax-constant: var(--theme-code-syntax-constant);
    --resources-syntax-label: var(--theme-code-syntax-label);
    --resources-syntax-tag: var(--theme-code-syntax-tag);
    --resources-syntax-number: var(--theme-code-syntax-number);
    --resources-syntax-string: var(--theme-code-syntax-string);
    --resources-syntax-escape: var(--theme-code-syntax-escape);
    --resources-syntax-interpolation: var(--theme-code-syntax-interpolation);
    --resources-syntax-regex: var(--theme-code-syntax-regex);
    --resources-syntax-operator: var(--theme-code-syntax-operator);
    --resources-syntax-word-operator: var(--theme-code-syntax-word-operator);
    --resources-syntax-error: var(--theme-code-syntax-error);
    --resources-syntax-deleted: var(--theme-code-syntax-deleted);
    --resources-syntax-inserted: var(--theme-code-syntax-inserted);
    --resources-syntax-heading: var(--theme-code-syntax-heading);
    --resources-syntax-emphasis: var(--theme-code-syntax-emphasis);
    --resources-syntax-strong: var(--theme-code-syntax-strong);
    --resources-syntax-muted: var(--theme-code-syntax-muted);
    margin: 0 0 calc(var(--main-font-size) * 0.65);
    overflow: hidden;
    border: 1px solid var(--theme-code-border);
    border-radius: 6px;
    background: var(--theme-code-bg);
    color: var(--theme-code-text);
}

.resources-code-header {
    display: flex;
    min-height: 28px;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 4px var(--resources-preview-inline-padding);
    border-bottom: 1px solid var(--theme-divider-soft);
    background: var(--theme-code-header-bg);
}

.resources-code-language {
    color: var(--theme-text-muted);
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-code-copy-button {
    order: 1;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--theme-code-text);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 400;
    line-height: var(--resources-content-line-height);
}

.resources-code-copy-button:hover,
.resources-code-copy-button:focus-visible {
    outline: 0;
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.resources-code-copy-button.is-copied {
    color: var(--theme-success);
}

.resources-code-copy-button.is-copy-error {
    color: var(--theme-error-text);
}

.resources-code-pre {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 12px var(--resources-preview-inline-padding);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    border: 0;
    border-radius: 0;
    background: var(--theme-code-bg);
    color: var(--theme-code-text);
    font-family: var(--resources-code-font-family);
    font-size: var(--resources-code-display-font-size);
    line-height: var(--resources-content-line-height);
    white-space: pre;
    tab-size: 4;
    -webkit-overflow-scrolling: touch;
}

.resources-code-pre code {
    display: block;
    min-width: max-content;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
}

/* Central semantic syntax token rules shared by Markdown and notebook code cells. */
.resources-code-pre .syntax-c,
.resources-code-pre .syntax-ch,
.resources-code-pre .syntax-cm,
.resources-code-pre .syntax-cp,
.resources-code-pre .syntax-cpf,
.resources-code-pre .syntax-c1,
.resources-code-pre .syntax-cs {
    color: var(--resources-syntax-comment);
    font-style: italic;
}

.resources-code-pre .syntax-k,
.resources-code-pre .syntax-kp,
.resources-code-pre .syntax-kr {
    color: var(--resources-syntax-control-keyword);
}

.resources-code-pre .syntax-kc,
.resources-code-pre .syntax-kd,
.resources-code-pre .syntax-kn,
.resources-code-pre .syntax-kt,
.resources-code-pre .syntax-bp {
    color: var(--resources-syntax-keyword);
}

.resources-code-pre .syntax-nc,
.resources-code-pre .syntax-ne,
.resources-code-pre .syntax-nn {
    color: var(--resources-syntax-type);
}

.resources-code-pre .syntax-nb,
.resources-code-pre .syntax-nd,
.resources-code-pre .syntax-nf,
.resources-code-pre .syntax-fm {
    color: var(--resources-syntax-function);
}

.resources-code-pre .syntax-na {
    color: var(--resources-syntax-attribute);
}

.resources-code-pre .syntax-nv,
.resources-code-pre .syntax-vc,
.resources-code-pre .syntax-vg,
.resources-code-pre .syntax-vi,
.resources-code-pre .syntax-vm,
.resources-code-pre .syntax-py {
    color: var(--resources-syntax-variable);
}

.resources-code-pre .syntax-no,
.resources-code-pre .syntax-ss {
    color: var(--resources-syntax-constant);
}

.resources-code-pre .syntax-nl {
    color: var(--resources-syntax-label);
}

.resources-code-pre .syntax-nt {
    color: var(--resources-syntax-tag);
}

.resources-code-pre .syntax-m,
.resources-code-pre .syntax-mb,
.resources-code-pre .syntax-mf,
.resources-code-pre .syntax-mh,
.resources-code-pre .syntax-mi,
.resources-code-pre .syntax-mo,
.resources-code-pre .syntax-il {
    color: var(--resources-syntax-number);
}

.resources-code-pre .syntax-s,
.resources-code-pre .syntax-sa,
.resources-code-pre .syntax-sb,
.resources-code-pre .syntax-sc,
.resources-code-pre .syntax-dl,
.resources-code-pre .syntax-sd,
.resources-code-pre .syntax-s2,
.resources-code-pre .syntax-sh,
.resources-code-pre .syntax-sx,
.resources-code-pre .syntax-s1 {
    color: var(--resources-syntax-string);
}

.resources-code-pre .syntax-se {
    color: var(--resources-syntax-escape);
}

.resources-code-pre .syntax-si {
    color: var(--resources-syntax-interpolation);
}

.resources-code-pre .syntax-sr {
    color: var(--resources-syntax-regex);
}

.resources-code-pre .syntax-o,
.resources-code-pre .syntax-p {
    color: var(--resources-syntax-operator);
}

.resources-code-pre .syntax-ow {
    color: var(--resources-syntax-word-operator);
}

.resources-code-pre .syntax-err,
.resources-code-pre .syntax-gr,
.resources-code-pre .syntax-gt {
    color: var(--resources-syntax-error);
}

.resources-code-pre .syntax-gd {
    color: var(--resources-syntax-deleted);
}

.resources-code-pre .syntax-gi {
    color: var(--resources-syntax-inserted);
}

.resources-code-pre .syntax-gh,
.resources-code-pre .syntax-gu {
    color: var(--resources-syntax-heading);
    font-weight: 700;
}

.resources-code-pre .syntax-ge {
    color: var(--resources-syntax-emphasis);
    font-style: italic;
}

.resources-code-pre .syntax-gs {
    color: var(--resources-syntax-strong);
    font-weight: 700;
}

.resources-code-pre .syntax-go,
.resources-code-pre .syntax-gp,
.resources-code-pre .syntax-w {
    color: var(--resources-syntax-muted);
}

.resources-markdown-body blockquote {
    margin-left: 0;
    padding: 0 1em;
    border-left: 0.25em solid var(--theme-border-soft);
    color: var(--theme-text-secondary);
}

.resources-markdown-body blockquote > :first-child {
    margin-top: 0;
}

.resources-markdown-body blockquote > :last-child {
    margin-bottom: 0;
}

.resources-markdown-body strong {
    font-weight: 600;
}

.resources-markdown-body table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow: auto;
    border-spacing: 0;
    border-collapse: collapse;
}

.resources-markdown-body tr {
    border-top: 1px solid var(--theme-divider-soft);
    background-color: var(--theme-surface);
}

.resources-markdown-body tr:nth-child(2n) {
    background-color: var(--theme-surface-muted);
}

.resources-markdown-body th,
.resources-markdown-body td {
    padding: var(--type-space-tight) var(--type-space-compact);
    border: 1px solid var(--theme-divider-soft);
    text-align: left;
    vertical-align: top;
}

/* Every rendered Markdown table line uses the shared soft-divider role. */
.resources-markdown-body tr,
.resources-markdown-body th,
.resources-markdown-body td {
    border-color: var(--theme-divider-soft);
}

.resources-markdown-body th[align="center"],
.resources-markdown-body td[align="center"] {
    text-align: center;
}

.resources-markdown-body th[align="right"],
.resources-markdown-body td[align="right"] {
    text-align: right;
}

.resources-markdown-body hr {
    height: 1px;
    margin: calc(var(--main-font-size) * 1.2) 0;
    padding: 0;
    border: 0;
    background-color: var(--theme-divider-standard);
}

.resources-markdown-body .task-list-item {
    list-style-type: none;
}

.resources-markdown-body .task-list-item-checkbox {
    margin: 0 0.2em 0.25em -1.4em;
    vertical-align: middle;
}

.resources-markdown-body .footnotes {
    color: var(--theme-text-secondary);
    font-size: var(--resources-rendered-markdown-small-font-size);
    line-height: var(--resources-rendered-markdown-line-height);
    border-top: 1px solid var(--theme-divider-soft);
}

.resources-markdown-body .footnotes ol {
    padding-left: 2em;
}

/* Shared vertical rhythm for heterogeneous rendered Markdown blocks. */
.resources-markdown-body :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, pre, table, hr) {
    margin-block: 0;
}

.resources-markdown-body > * + * {
    margin-top: var(--type-space-content);
}

.resources-markdown-body > :is(p + p, blockquote + blockquote, ul + ul, ol + ol) {
    margin-top: var(--type-space-compact);
}

.resources-markdown-body li + li {
    margin-top: var(--type-space-tight);
}

.resources-notebook-document {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    max-width: 100%;
    font-size: var(--resources-content-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-notebook-cell {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--theme-border-soft);
    border-radius: 6px;
    background: var(--theme-surface);
}

.resources-notebook-cell-heading {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 var(--resources-preview-inline-padding);
    border-bottom: 1px solid var(--theme-divider-soft);
    background: var(--theme-surface-muted);
}

.resources-notebook-cell-label {
    padding: 5px 0;
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-run-cell,
.resources-notebook-clear-cell,
.resources-notebook-stop-cell {
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 42px;
    height: var(--type-notebook-control-height);
    min-height: var(--type-notebook-control-height);
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-control-border);
    border-radius: 5px;
    background: var(--theme-control-bg);
    color: var(--theme-text-strong);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-run-cell:not(:disabled):hover,
.resources-notebook-run-cell:not(:disabled):focus-visible,
.resources-notebook-clear-cell:not(:disabled):hover,
.resources-notebook-clear-cell:not(:disabled):focus-visible,
.resources-notebook-stop-cell:not(:disabled):hover,
.resources-notebook-stop-cell:not(:disabled):focus-visible {
    background: var(--theme-surface-hover);
}

.resources-notebook-run-cell:disabled,
.resources-notebook-clear-cell:disabled,
.resources-notebook-stop-cell:disabled {
    border-color: var(--theme-border-subtle);
    background: var(--theme-control-muted-bg);
    color: var(--theme-text-disabled);
    cursor: default;
    opacity: 0.5;
}

.resources-notebook-stop-cell:not(:disabled) {
    color: var(--theme-error-text);
}

.resources-notebook-cell-body {
    min-width: 0;
}

.resources-notebook-markdown-cell .resources-notebook-cell-heading {
    justify-content: flex-end;
}

.resources-notebook-markdown-cell .resources-notebook-cell-body,
.resources-notebook-raw-cell .resources-notebook-cell-body {
    max-height: none;
    margin: 0;
    padding: 12px var(--resources-preview-inline-padding);
    overflow: visible;
}

.resources-notebook-cell-body > :last-child,
.resources-notebook-markdown-output > :last-child {
    margin-bottom: 0;
}

.resources-notebook-code-cell .resources-code-block {
    margin: 0;
    border: 0;
    border-radius: 0;
}

.resources-notebook-code-editor-surface {
    --jspcv-code-assist-reserve: 0px;
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: var(--jspcv-code-assist-reserve);
    background: var(--theme-code-bg);
}

.resources-notebook-code-editor-surface:focus-within {
    box-shadow: inset 0 0 0 2px var(--theme-focus-ring);
}

.resources-code-assist-popup,
.resources-code-assist-hint {
    position: fixed;
    z-index: 2147483001;
    box-sizing: border-box;
    max-width: min(620px, calc(100% - 16px));
    overflow: hidden;
    border: 1px solid var(--theme-code-popup-border);
    border-radius: 7px;
    background: var(--theme-code-popup-bg);
    color: var(--theme-code-text);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-code-popup-border) 18%, transparent),
        0 12px 32px var(--theme-shadow);
    font-family: var(--resources-code-font-family);
    font-size: var(--resources-code-display-font-size);
    font-weight: 400;
    line-height: var(--resources-content-line-height);
}

.resources-code-assist-popup {
    width: min(460px, calc(100% - 16px));
    contain: layout paint;
    isolation: isolate;
}

.resources-code-assist-header {
    display: flex;
    min-height: 29px;
    align-items: center;
    gap: 7px;
    padding: 0 8px;
    border-bottom: 1px solid var(--theme-code-popup-border);
    background: var(--theme-code-header-bg);
    color: var(--theme-code-syntax-muted);
    white-space: nowrap;
}

.resources-code-assist-heading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-code-text);
    font-weight: 600;
}

.resources-code-assist-heading::before {
    width: 16px;
    height: 16px;
    content: "";
    background: url("../../app_design/images/terminal.svg") center / 16px 16px no-repeat;
}

html[data-theme="dark"] .resources-code-assist-heading::before {
    filter: invert(1);
}

.resources-code-assist-count {
    min-width: 2ch;
    padding: 0 5px;
    border: 1px solid var(--theme-code-popup-border);
    border-radius: 999px;
    background: var(--theme-code-bg);
    color: var(--theme-code-syntax-muted);
    text-align: center;
}

.resources-code-assist-keys {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    color: var(--theme-text-muted);
}

.resources-code-assist-keys kbd {
    width: fit-content;
    min-width: 0;
    padding-block: var(--type-key-hint-padding-block);
    padding-inline: var(--type-key-hint-padding-inline);
    border: 1px solid var(--theme-code-popup-border);
    border-bottom-color: var(--theme-code-syntax-muted);
    border-radius: 3px;
    background: var(--theme-code-header-bg);
    color: var(--theme-code-syntax-muted);
    font-family: var(--body-font) !important;
    font-size: inherit;
    line-height: 1;
    text-align: center;
}

.resources-code-assist-viewport {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--theme-code-popup-border) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.resources-code-assist-viewport::-webkit-scrollbar {
    width: 8px;
}

.resources-code-assist-viewport::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--theme-code-popup-border);
    background-clip: padding-box;
}

.resources-code-assist-canvas {
    position: relative;
    min-width: 0;
}

.resources-code-assist-option {
    position: absolute;
    inset-inline: 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 7px;
    padding: 0 9px 0 7px;
    overflow: hidden;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    transition: background-color 80ms ease, border-color 80ms ease;
}

.resources-code-assist-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid var(--theme-code-popup-border);
    border-radius: 4px;
    background: var(--theme-code-header-bg);
    color: var(--theme-code-syntax-muted);
    font-weight: 600;
    line-height: 1;
}

.resources-code-assist-option[data-code-assist-kind="function"] .resources-code-assist-icon {
    border-color: var(--theme-code-syntax-function);
    color: var(--theme-code-syntax-function);
}

.resources-code-assist-option[data-code-assist-kind="module"] .resources-code-assist-icon {
    border-color: var(--theme-code-syntax-control-keyword);
    color: var(--theme-code-syntax-control-keyword);
}

.resources-code-assist-option[data-code-assist-kind="class"] .resources-code-assist-icon {
    border-color: var(--theme-code-syntax-type);
    color: var(--theme-code-syntax-type);
}

.resources-code-assist-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.resources-code-assist-match {
    color: var(--theme-code-syntax-keyword);
    font-weight: 600;
}

.resources-code-assist-option:is(:hover, :focus-visible, .is-selected) {
    outline: 0;
    border-left-color: var(--theme-code-syntax-keyword);
    background: var(--theme-code-popup-hover);
    color: var(--theme-code-text);
}

.resources-code-assist-kind {
    flex: none;
    color: var(--theme-text-muted);
    font-size: inherit;
    text-transform: lowercase;
}

.resources-code-assist-option:is(:hover, :focus-visible, .is-selected) .resources-code-assist-kind {
    color: var(--theme-code-syntax-muted);
}

.resources-code-assist-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    color: var(--theme-code-syntax-muted);
}

.resources-code-assist-status::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-code-syntax-keyword);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-code-syntax-keyword) 35%, transparent);
    content: "";
    animation: resources-code-assist-pulse 1.15s ease-out infinite;
}

.resources-code-assist-hint {
    display: block;
    width: min(560px, calc(100% - 16px));
    contain: layout paint;
    isolation: isolate;
}

.resources-code-assist-hint,
.resources-code-assist-hint * {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.resources-code-assist-hint-header {
    min-width: 0;
}

.resources-code-assist-hint-badge {
    min-width: 0;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resources-code-assist-hint-body {
    max-height: min(280px, 50vh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--theme-code-popup-border) transparent;
    scrollbar-width: thin;
}

.resources-code-assist-hint-body::-webkit-scrollbar {
    width: 8px;
}

.resources-code-assist-hint-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--theme-code-popup-border);
    background-clip: padding-box;
}

.resources-code-assist-hint strong,
.resources-code-assist-hint span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.resources-code-assist-hint span {
    color: var(--theme-code-syntax-muted);
}

.resources-code-assist-signature-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 7px;
    padding: 7px 9px 7px 7px;
    border-bottom: 1px solid var(--theme-code-popup-border);
    background: var(--theme-accent-surface);
}

.resources-code-assist-signature-icon {
    border-color: var(--theme-code-syntax-function);
    color: var(--theme-code-syntax-function);
}

.resources-code-assist-signature {
    color: var(--theme-code-text);
    font-weight: 600;
}

.resources-code-assist-summary {
    display: block;
    padding: 0 10px 9px;
    color: var(--theme-code-syntax-muted) !important;
}

.resources-code-assist-parameter {
    display: grid;
    gap: 3px;
    margin: 8px 9px;
    padding: 7px 8px;
    border: 1px solid var(--theme-code-popup-border);
    border-left: 2px solid var(--theme-code-syntax-keyword);
    border-radius: 4px;
    background: var(--theme-code-bg);
}

.resources-code-assist-parameter::before {
    color: var(--theme-text-muted);
    content: "Current parameter";
    font: inherit;
    font-weight: 400;
}

.resources-code-assist-parameter-label {
    color: var(--theme-code-syntax-keyword);
    font-weight: 600;
}

.resources-code-assist-parameter-description {
    color: var(--theme-code-syntax-muted) !important;
}

@keyframes resources-code-assist-pulse {
    70%, 100% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--theme-code-syntax-keyword) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .resources-code-assist-option {
        transition: none;
    }

    .resources-code-assist-status::before {
        animation: none;
    }
}

@media (max-width: 520px) {
    .resources-code-assist-popup,
    .resources-code-assist-hint {
        width: calc(100% - 12px);
        max-width: none;
    }

    .resources-code-assist-keys {
        display: none;
    }
}

.resources-code-assist-popup[hidden],
.resources-code-assist-hint[hidden] {
    display: none;
}

:is(.resources-code-assist-popup, .resources-code-assist-hint):is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) {
    border-radius: 5px;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

:is(.resources-code-assist-popup, .resources-code-assist-hint):is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-header {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

:is(.resources-code-assist-popup, .resources-code-assist-hint):is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) :is(.resources-code-assist-viewport, .resources-code-assist-hint-body) {
    overscroll-behavior-y: auto;
    touch-action: pan-y pinch-zoom;
}

.resources-code-assist-popup:is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-option {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 5px;
    padding-inline: 5px 7px;
}

:is(.resources-code-assist-popup, .resources-code-assist-hint):is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-icon {
    width: 16px;
    height: 16px;
}

.resources-code-assist-hint:is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-signature-row {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
    padding: 5px 7px;
}

.resources-code-assist-hint:is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-parameter {
    gap: 2px;
    margin: 5px 7px;
    padding: 5px 6px;
}

.resources-code-assist-hint:is(
    [data-code-assist-placement="mobile-caret-above"],
    [data-code-assist-placement="mobile-caret-below"]
) .resources-code-assist-summary {
    padding: 0 7px 6px;
}

/* This remains a small companion to the phone keyboard, not a replacement. */
.jspcv-mobile-code-input-bar {
    position: fixed;
    z-index: 120;
    inset-inline: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--jspcv-mobile-code-input-keyboard-inset, 0px));
    box-sizing: border-box;
    display: grid;
    align-items: center;
    grid-template-columns: max-content max-content minmax(0, 1fr) max-content max-content;
    column-gap: 2px;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding-block: 4px;
    padding-inline-start: max(3px, env(safe-area-inset-left, 0px));
    padding-inline-end: max(3px, env(safe-area-inset-right, 0px));
    overflow: hidden;
    border: 1px solid var(--theme-divider-soft);
    border-radius: 0;
    background: var(--theme-surface);
    box-shadow: 0 2px 8px var(--theme-shadow);
    color: var(--theme-text-strong);
    font-family: var(--code-font);
    font-size: 10px;
    line-height: var(--type-leading-ui);
}

.jspcv-mobile-code-input-bar[hidden] {
    display: none;
}

.jspcv-mobile-code-input-button {
    box-sizing: border-box;
    flex: 0 0 auto;
    inline-size: 34px;
    block-size: 34px;
    min-width: 34px;
    min-height: 34px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--theme-secondary-button-border);
    border-radius: 3px;
    background: var(--theme-secondary-button-bg);
    color: var(--theme-text-strong);
    font: inherit;
    font-weight: 400;
    line-height: var(--type-leading-ui);
    white-space: nowrap;
    touch-action: manipulation;
}

.jspcv-mobile-code-input-icon {
    display: block;
    inline-size: 18px;
    block-size: 18px;
    margin: auto;
    pointer-events: none;
}

.jspcv-mobile-code-input-icon--success,
.jspcv-mobile-code-input-icon--error {
    background: var(--theme-success);
    mask: var(--jspcv-mobile-code-input-icon-image) center / contain no-repeat;
    -webkit-mask: var(--jspcv-mobile-code-input-icon-image) center / contain no-repeat;
}

.jspcv-mobile-code-input-icon--error {
    background: var(--theme-error-text);
}

.jspcv-mobile-code-input-icon-label {
    display: block;
    margin-top: -2px;
    color: inherit;
    font-size: 8px;
    line-height: 1;
    pointer-events: none;
}

[data-jspcv-mobile-code-input-action="ai"] .jspcv-mobile-code-input-icon {
    inline-size: 14px;
    block-size: 14px;
    margin-block: 1px 0;
}

[data-jspcv-mobile-code-input-action="right"] .jspcv-mobile-code-input-icon {
    transform: scaleX(-1);
}

.jspcv-mobile-code-input-group {
    display: flex;
    align-items: center;
    gap: 1px;
    min-width: 0;
    white-space: nowrap;
}

.jspcv-mobile-code-input-divider {
    display: grid;
    inline-size: 8px;
    block-size: 34px;
    place-items: center;
}

.jspcv-mobile-code-input-divider img {
    display: block;
    inline-size: 8px;
    block-size: 18px;
}

.jspcv-mobile-code-input-group--start {
    justify-self: start;
}

.jspcv-mobile-code-input-group--center {
    justify-self: stretch;
    overflow-x: scroll;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
    scrollbar-width: thin;
    touch-action: pan-x pan-y pinch-zoom;
}

.jspcv-mobile-code-input-group--center::-webkit-scrollbar {
    height: 6px;
}

.jspcv-mobile-code-input-group--center::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track);
}

.jspcv-mobile-code-input-group--center::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb);
}

.jspcv-mobile-code-input-group--center .jspcv-mobile-code-input-button {
    scroll-snap-align: start;
}

.jspcv-mobile-code-input-group--end {
    justify-self: end;
}

.jspcv-mobile-code-input-button:hover:not(:disabled) {
    border-color: var(--theme-secondary-button-border-hover);
    background: var(--theme-button-hover);
}

.jspcv-mobile-code-input-button:active:not(:disabled) {
    border-color: var(--theme-secondary-button-border-hover);
    background: var(--theme-surface-active);
}

.jspcv-mobile-code-input-button:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: -2px;
}

.jspcv-mobile-code-input-button:disabled {
    border-color: var(--theme-divider-soft);
    background: var(--theme-surface-muted);
    color: var(--theme-text-disabled);
    cursor: not-allowed;
}

@media (min-width: 901px), print {
    .jspcv-mobile-code-input-bar {
        display: none !important;
    }
}

.resources-notebook-code-highlight {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.resources-notebook-code-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: calc((var(--resources-code-display-font-size) * var(--resources-content-line-height) * 3) + 24px);
    max-height: 60vh;
    margin: 0;
    padding: 12px var(--resources-preview-inline-padding);
    overflow: auto;
    resize: vertical;
    border: 0;
    border-radius: 0;
    outline: 0;
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--theme-code-text);
    font-family: var(--resources-code-font-family);
    font-size: var(--resources-code-display-font-size);
    font-weight: 400;
    line-height: var(--resources-content-line-height);
    white-space: pre;
    tab-size: 4;
}

.resources-notebook-code-input:focus-visible {
    box-shadow: none;
}

.resources-notebook-code-input::selection {
    background: var(--theme-code-selection-bg);
}

.resources-notebook-code-input[readonly] {
    cursor: wait;
}

/* Avoid laying out a second, full-size syntax tree for unusually large cells. */
.resources-notebook-code-editor-surface.is-large-source .resources-notebook-code-highlight {
    display: none;
}

.resources-notebook-code-editor-surface.is-large-source .resources-notebook-code-input {
    color: var(--theme-code-text);
    -webkit-text-fill-color: var(--theme-code-text);
}

.resources-notebook-variable-inspector {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    border-top: 1px solid var(--theme-divider-soft);
    background: var(--theme-surface);
    color: var(--theme-text-strong);
}

.resources-notebook-variable-inspector[hidden] {
    display: none;
}

.resources-notebook-variable-summary {
    box-sizing: border-box;
    min-height: 30px;
    padding: 5px var(--resources-preview-inline-padding);
    background: var(--theme-surface-muted);
    color: var(--theme-text-strong);
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 400;
    line-height: var(--resources-content-line-height);
    text-underline-offset: 2px;
}

.resources-notebook-variable-summary::marker {
    color: var(--theme-text-secondary);
}

.resources-notebook-variable-summary:hover .resources-notebook-variable-label,
.resources-notebook-variable-summary:focus-visible .resources-notebook-variable-label {
    text-decoration: underline;
}

.resources-notebook-variable-summary:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: -2px;
}

.resources-notebook-variable-count {
    margin-inline-start: 6px;
    color: var(--theme-text-secondary);
    font-variant-numeric: tabular-nums;
}

.resources-notebook-variable-body {
    min-width: 0;
    padding: 12px var(--resources-preview-inline-padding);
    border-top: 1px dotted var(--theme-divider-soft);
}

.resources-notebook-variable-group + .resources-notebook-variable-group {
    margin-top: 12px;
}

.resources-notebook-variable-group-title {
    margin: 0 0 4px;
    color: var(--theme-text-strong);
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-variable-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}

.resources-notebook-variable-table {
    width: 100%;
    min-width: 440px;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--theme-text-strong);
    font-size: var(--resources-content-small-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-notebook-variable-table th,
.resources-notebook-variable-table td {
    padding: 4px 8px;
    border-bottom: 1px dotted var(--theme-divider-soft);
    text-align: left;
    vertical-align: top;
}

.resources-notebook-variable-table th {
    background: var(--theme-surface-muted);
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-weight: 600;
}

.resources-notebook-variable-table th:nth-child(1) {
    width: 22%;
}

.resources-notebook-variable-table th:nth-child(2) {
    width: 28%;
}

.resources-notebook-variable-table td {
    font-family: var(--resources-code-font-family);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.resources-notebook-variable-table tbody tr:last-child td {
    border-bottom: 0;
}

.resources-notebook-variable-empty,
.resources-notebook-variable-note {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: var(--resources-content-small-font-size);
    line-height: var(--resources-content-line-height);
}

.resources-notebook-variable-note {
    margin-top: 8px;
    font-style: italic;
}

.resources-notebook-outputs {
    padding: 0;
    border-top: 1px solid var(--theme-divider-soft);
    background: var(--theme-surface);
}

.resources-notebook-markdown-output {
    max-height: none;
    margin: 0;
    overflow: visible;
}

.resources-notebook-outputs[hidden],
.resources-notebook-code-source[hidden] {
    display: none;
}

.resources-notebook-text-output {
    margin: 0;
    padding: 12px var(--resources-preview-inline-padding);
    overflow: auto;
    border: 0;
    border-radius: 6px;
    background: var(--theme-surface-muted);
    color: var(--theme-text-strong);
    font-family: var(--resources-code-font-family);
    font-size: var(--resources-code-display-font-size);
    line-height: var(--resources-content-line-height);
    white-space: pre-wrap;
}

.resources-notebook-text-output + .resources-notebook-text-output,
.resources-notebook-output-image + .resources-notebook-text-output {
    margin-top: var(--type-space-compact);
}

.resources-notebook-text-output.is-error {
    color: var(--theme-error-text);
    background: var(--theme-error-surface);
}

.resources-notebook-output-image {
    display: block;
    max-width: calc(100% - (2 * var(--resources-preview-inline-padding)));
    height: auto;
    margin: 12px var(--resources-preview-inline-padding);
}

.resources-notebook-live-frame {
    max-height: min(420px, 60vh);
    object-fit: contain;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.resources-notebook-live-frame:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 3px;
}

.resources-notebook-output-note {
    margin: 0;
    padding: 12px var(--resources-preview-inline-padding);
    color: var(--theme-text-secondary);
    font-size: var(--resources-content-small-font-size);
    font-style: italic;
    line-height: var(--resources-content-line-height);
}

.resources-notebook-generated-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px var(--resources-preview-inline-padding);
    border-top: 1px solid var(--theme-divider-soft);
}

.resources-notebook-generated-file {
    display: inline-grid;
    grid-template-columns: 16px minmax(0, auto) auto auto;
    align-items: center;
    gap: 7px;
    min-width: 0;
    min-height: 30px;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
    border: 1px solid var(--theme-input-border);
    border-radius: 5px;
    background: var(--theme-media-stage-bg);
    color: var(--theme-text-strong);
    font-family: var(--body-font);
    font-size: var(--resources-code-display-font-size);
    line-height: var(--resources-content-line-height);
    text-align: left;
    cursor: pointer;
}

.resources-notebook-generated-file:hover:not(:disabled),
.resources-notebook-generated-file:focus-visible {
    border-color: var(--theme-focus-ring);
    background: var(--theme-accent-hover);
}

.resources-notebook-generated-file:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.resources-notebook-generated-file[aria-busy="true"] {
    cursor: wait;
}

.resources-notebook-generated-file:disabled {
    opacity: 0.55;
    cursor: default;
}

.resources-notebook-generated-file-icon {
    position: relative;
    box-sizing: border-box;
    width: 12px;
    height: 15px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.resources-notebook-generated-file-icon::before {
    content: "";
    position: absolute;
    top: -1.5px;
    right: -1.5px;
    width: 4px;
    height: 4px;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
    background: inherit;
}

.resources-notebook-generated-file-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.resources-notebook-generated-file-size {
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.resources-notebook-generated-file-action {
    color: var(--theme-link);
    font-weight: 600;
    white-space: nowrap;
}

.resources-markdown-body img {
    max-width: 100%;
    height: auto;
}

.resources-markdown-status,
.resources-markdown-empty {
    color: var(--theme-text-muted);
    font-style: italic;
}

.resources-empty {
    margin-top: calc(var(--nav-box-height) + var(--nav-border-bottom-thk) - var(--main-padding-top));
}

@media (max-width: 900px) {
    .resources-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 14px;
    }

    .resources-layout.is-sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        gap: 14px;
    }

    .resources-sidebar-toggle {
        position: relative;
        top: auto;
        left: auto;
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        justify-self: end;
        width: 66px;
        height: 19px;
        margin-right: calc(-1 * var(--main-padding-right));
        margin-bottom: 1px;
        border-radius: 4px 4px 0 0;
    }

    .resources-layout.is-sidebar-collapsed .resources-sidebar-toggle {
        left: auto;
        width: 76px;
        height: 19px;
    }

    .resources-sidebar-toggle-label {
        display: inline;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        letter-spacing: normal;
    }

    .resources-sidebar {
        grid-column: 1;
        grid-row: 1;
        margin-right: calc(-1 * var(--main-padding-right));
        padding-block: var(--type-sidebar-shell-padding-block);
        padding-inline: var(--type-sidebar-shell-padding-inline);
        min-height: auto;
        align-self: auto;
        background: transparent;
        color: var(--theme-text);
        border-bottom: 0;
    }

    .resources-detail-column {
        grid-column: 1;
        grid-row: 2;
        width: auto;
        margin-top: 0;
        margin-left: calc(-1 * var(--main-padding-left));
        margin-right: calc(-1 * var(--main-padding-right));
        padding: var(--type-space-content);
        min-height: 0;
    }

    .resources-session-btn {
        grid-template-columns: minmax(25.92px, max-content) minmax(0, 1fr);
    }

    .resources-resource-btn {
        grid-template-columns: minmax(25.92px, max-content) minmax(0, 1fr);
    }

}

@media (max-width: 600px) {
    .resources-notebook-local-file-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .resources-notebook-local-file-actions {
        grid-row: 1;
        justify-self: end;
    }

    .resources-notebook-local-file-status {
        grid-row: 2;
    }

    .resources-home-table {
        min-width: 620px;
    }
}

/* Keep every Resources navigation level visually equal. */
.resources-category-btn,
.resources-category-code,
.resources-category-name,
.resources-session-btn,
.resources-session-code,
.resources-session-title,
.resources-resource-btn,
.resources-resource-index,
.resources-resource-title,
.resources-home-category-line,
.resources-home-category-code,
.resources-home-category-title,
.resources-home-session-btn,
.resources-home-session-code,
.resources-home-session-title,
.resources-home-resource-btn,
.resources-home-resource-index,
.resources-home-resource-title {
    color: var(--theme-text);
    font-size: var(--nav-font-size);
}

/* Scale the panel control from the same text system as the page. */
.resources-sidebar-toggle-label {
    font-size: calc(var(--nav-font-size) * 0.8);
}

@media (min-width: 901px) {
    .resources-sidebar-toggle {
        height: 72px;
    }

    .resources-layout.is-sidebar-collapsed .resources-sidebar-toggle {
        height: 82px;
    }
}

@media (max-width: 900px) {
    .resources-sidebar-toggle {
        width: 72px;
    }

    .resources-layout.is-sidebar-collapsed .resources-sidebar-toggle {
        width: 82px;
    }
}

/* Align the lower file controls with the notebook toolbar buttons above. */
.resources-notebook-local-file-button {
    min-width: 62px;
}

/* Long stored filenames remain readable without widening the content panel. */
.resources-download-link,
.resources-attachment-link {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    font-size: var(--resources-code-display-font-size);
}

.resources-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resources-file-name + .resources-inline-icon {
    flex: 0 0 auto;
}

/* Keep the notebook actions compact while preserving their shared size. */
.resources-notebook-toolbar-button,
.resources-notebook-local-file-button {
    box-sizing: border-box;
    width: 76px;
    min-width: 76px;
    height: var(--type-notebook-control-height);
    min-height: var(--type-notebook-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--type-control-padding-block);
    padding-inline: var(--type-control-padding-inline);
}

/* Each browser-local file shows the exact Python path used in notebook code. */
.resources-notebook-local-file-info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 6px;
    min-width: 0;
}

.resources-notebook-local-file-reference {
    min-width: 0;
    font-family: var(--body-font);
    font-size: inherit;
    overflow-wrap: anywhere;
    white-space: normal;
}

.resources-notebook-local-file-name,
.resources-notebook-local-file-reference {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.resources-notebook-local-file-separator {
    flex: 0 0 auto;
    color: var(--theme-text-secondary);
}

/* Keep the toolbar band on the shared content inset. */
.resources-notebook-toolbar {
    padding-left: var(--resources-preview-inline-padding);
}

.resources-notebook-runtime-info {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Keep the local-file actions on their compact 158px / 76px / 76px columns. */
.resources-notebook-toolbar-actions,
.resources-notebook-local-file-actions {
    display: grid;
    align-items: center;
    justify-content: end;
    gap: 6px;
}

/*
 * The runtime actions always use the full toolbar row: the three execution
 * buttons stay fixed at the right edge, while an open package catalog can use
 * every available column below them.
 */
.resources-notebook-toolbar-actions {
    flex: 1 0 100%;
    grid-template-columns: minmax(0, 1fr) repeat(3, 76px);
    align-items: start;
    width: 100%;
    min-width: 0;
    margin-left: 0;
}

.resources-notebook-local-file-actions {
    justify-self: end;
    grid-template-columns: 158px repeat(2, 76px);
    width: 322px;
}

.resources-notebook-load-attachments {
    grid-column: 1;
    width: 158px;
    min-width: 158px;
}

.resources-notebook-add-files {
    grid-column: 2;
}

.resources-notebook-clear-files {
    grid-column: 3;
}

.resources-notebook-package-details {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
}

.resources-notebook-package-details > .resources-notebook-package-summary {
    width: 158px;
    min-width: 158px;
    height: var(--type-notebook-control-height);
    margin-inline-start: calc(100% - 322px);
}

.resources-notebook-package-details > .resources-notebook-package-catalog {
    width: 100%;
}

.resources-notebook-reference-controls {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, 84px);
    justify-content: start;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.resources-notebook-reference-controls > .resources-notebook-package-summary {
    width: 84px;
    min-width: 84px;
    height: var(--type-notebook-control-height);
    margin: 0;
}

.resources-notebook-reference-panel {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    min-width: 0;
}

/* Match Playground: each shortcut row gives its key and explanation equal space. */
.resources-notebook-reference-panel .resources-notebook-package-item > :is(
    .resources-notebook-package-identity,
    .resources-notebook-package-imports
) {
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
}

.resources-notebook-add-cell {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
}

.resources-notebook-run-all {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    z-index: 1;
}

.resources-notebook-reset-all {
    grid-column: 4;
    grid-row: 1;
    position: relative;
    z-index: 1;
}

/* Keep the runtime row independent from the package reference row. */
.resources-file-preview .resources-notebook-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 76px);
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
}

.resources-file-preview .resources-notebook-runtime-info {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: normal;
}

.resources-file-preview .resources-notebook-toolbar-actions {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr) repeat(3, 76px);
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    width: 100%;
    min-width: 0;
}

.resources-file-preview .resources-notebook-package-details {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
}

.resources-file-preview .resources-notebook-package-details > .resources-notebook-package-summary {
    width: 158px;
    min-width: 158px;
    margin-inline-start: 0;
}

@media (max-width: 650px) {
    .resources-notebook-runtime-label-wide {
        display: none;
    }

    .resources-notebook-runtime-label-narrow {
        display: inline;
    }

    .resources-notebook-package-details {
        grid-row: 2;
    }

    .resources-notebook-package-details > .resources-notebook-package-summary {
        width: 100%;
        min-width: 0;
        margin-inline-start: 0;
    }

    .resources-notebook-reference-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .resources-notebook-reference-controls > .resources-notebook-package-summary {
        width: 100%;
        min-width: 0;
        margin-inline-start: 0;
    }
}

/* Preserve one stable execution row at the narrowest supported viewport. */
@media (max-width: 360px) {
    .resources-notebook-toolbar-actions,
    .resources-file-preview .resources-notebook-toolbar,
    .resources-file-preview .resources-notebook-toolbar-actions {
        grid-template-columns: minmax(0, 1fr) repeat(3, 66px);
        column-gap: 4px;
    }

    .resources-notebook-add-cell,
    .resources-notebook-run-all,
    .resources-notebook-reset-all {
        width: 66px;
        min-width: 66px;
        padding-inline: 4px;
    }
}

@media (max-width: 420px) {
    .resources-notebook-local-file-actions {
        grid-template-columns: repeat(2, 76px);
        width: 158px;
    }

    .resources-notebook-load-attachments {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .resources-notebook-add-files {
        grid-column: 1;
        grid-row: 2;
    }

    .resources-notebook-clear-files {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Enabled browser-local file controls must not resemble disabled controls. */
.resources-notebook-add-files:not(:disabled),
.resources-notebook-clear-files:not(:disabled) {
    border-color: var(--theme-input-border);
    color: var(--theme-text);
}

/* Loaded-file metadata follows the compact code and package typography. */
.resources-notebook-local-file-list {
    color: var(--theme-text-secondary);
    font-family: var(--body-font);
    font-size: var(--resources-code-display-font-size);
    line-height: var(--type-leading-reading);
    letter-spacing: normal;
}

.resources-notebook-local-file-size,
.resources-notebook-remove-local-file {
    color: var(--theme-text-secondary);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.resources-notebook-local-file-reference {
    color: var(--theme-text);
    font-size: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

/* Keep every shared local-file and runtime-control surface transparent. */
.resources-file-preview .resources-notebook-toolbar,
.resources-file-preview .resources-notebook-local-files,
.resources-file-preview .notebook-reference-toggle,
.resources-file-preview .resources-notebook-local-file-button,
.resources-file-preview .resources-notebook-local-file-button:disabled,
.resources-file-preview .resources-notebook-package-details[open] > .notebook-reference-toggle,
.resources-file-preview .notebook-reference-toggle[aria-expanded="true"] {
    background: transparent;
}

.resources-file-preview .notebook-reference-toggle:is(:hover, :focus-visible),
.resources-file-preview .resources-notebook-local-file-button:not(:disabled):is(:hover, :focus-visible) {
    background: transparent;
}

/* Board-authored Resource Posts retain the Board document grammar without its detail-page inset. */
.resources-section .resources-post-content.board-markdown {
    margin: var(--type-space-content) 0 0;
    padding: 0;
}

.resources-section .resources-post-content + .board-attachment-list {
    margin-inline-start: 0;
}

.resources-post-divider {
    height: 0;
    margin: var(--type-space-content) 0 0;
    border: 0;
    border-top: 1px solid var(--theme-divider-strong);
}

.resources-post-print-meta {
    display: none;
}

.resources-post-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--type-space-content);
}

.resources-post-admin-panel {
    box-sizing: border-box;
    min-width: 0;
    margin: 0 var(--type-space-content);
    padding: var(--type-space-content) 0;
    border-top: 1px solid var(--theme-admin-menu-border);
}

.resources-post-form {
    min-width: 0;
}

.resources-post-form :is(
    .board-editor-field > textarea[data-board-editor-source],
    .board-rich-editor
) {
    min-height: 520px;
}

/* Resources Post shares the Board editor but has a taller authoring area.
   Keep its own vertical scroller visible instead of expanding the page and
   carrying the toolbar out of view. */
.resources-post-form .board-rich-editor {
    box-sizing: border-box;
    height: clamp(520px, calc(100dvh - 220px), 620px);
    max-height: 620px;
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
    scrollbar-color: var(--theme-scrollbar-thumb) var(--theme-scrollbar-track);
    scrollbar-width: thin;
}

/* The Board stylesheet follows this app stylesheet on Resources pages. Keep
   the Resources authoring scrollbar visibly reserved in that final cascade. */
.resources-post-form .board-rich-editor::-webkit-scrollbar {
    display: block;
    width: 10px;
}

.resources-post-form .board-rich-editor::-webkit-scrollbar-track {
    background: var(--theme-scrollbar-track);
}

.resources-post-form .board-rich-editor::-webkit-scrollbar-thumb {
    min-height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--theme-scrollbar-thumb);
    background-clip: padding-box;
}

/* Resources Post loads the shared Board toolbar inside a later app stylesheet.
   Keep the editor's explicit inline size spans authoritative here as well. */
.resources-post-form .board-rich-editor :is(
    [data-board-text-size="small"],
    .board-text-small
) {
    font-size: 13px !important;
}

.resources-post-form .board-rich-editor :is(
    [data-board-text-size="large"],
    .board-text-large
) {
    font-size: 17px !important;
}

.resources-post-form .board-attachment-picker > .board-attachment-choose {
    box-sizing: border-box;
    justify-content: center;
    width: 128px;
    height: 26px;
    min-height: 26px;
    margin: 0;
    white-space: nowrap;
}

.resources-post-form-actions {
    margin-top: var(--type-space-content);
}

.resources-reply-trigger,
.resources-reply-trigger:visited {
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    height: 24px;
    min-width: 0;
    padding: 2px var(--type-control-padding-inline);
    border: 0;
    border-radius: 4px;
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--type-leading-ui);
    text-decoration: none;
    white-space: nowrap;
}

.resources-reply-trigger:is(:hover, :focus-visible) {
    border: 0;
    background: var(--theme-primary-action-hover);
    color: var(--theme-primary-action-text);
    text-decoration: none;
}

.resources-reply-trigger:focus-visible,
.resources-reply-submit:focus-visible,
.resources-reply-cancel:focus-visible,
.resources-reply-retry:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.resources-discussion {
    min-width: 0;
}

.resources-discussion[aria-busy="true"] {
    cursor: progress;
}

.resources-replies {
    --resources-reply-branch-point: 1.55rem;
    min-width: 0;
    margin-top: var(--type-space-content);
    padding: 0;
    border: 0;
    background: transparent;
}

.resources-reply-list {
    display: grid;
    gap: var(--type-space-compact);
    margin-top: var(--type-space-content);
}

.resources-reply-list.has-replies {
    position: relative;
    margin-inline-start: var(--type-space-content);
    padding-inline-start: var(--type-space-content);
}

.resources-reply-list:not(.has-replies) {
    padding-bottom: var(--type-space-content);
}

.resources-reply {
    position: relative;
    min-width: 0;
    padding-block: var(--type-control-padding-block);
    background: transparent;
}

.resources-reply-meta {
    display: flex;
    min-width: 0;
    min-height: 24px;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--type-space-tight) var(--type-space-compact);
    color: var(--theme-text-muted);
    font-size: var(--resources-content-small-font-size);
    line-height: 1.25;
}

.resources-reply-meta strong {
    min-width: 0;
    max-width: 18rem;
    overflow: hidden;
    color: var(--theme-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resources-reply-meta form {
    margin: 0;
}

.resources-reply-edit,
.resources-reply-delete,
.resources-reply-reply {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--theme-text-muted);
    font: inherit;
    text-decoration: none;
}

.resources-reply-delete {
    color: var(--theme-error-text);
}

.resources-reply-reply {
    box-sizing: border-box;
    display: inline-flex;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: var(--type-control-padding-block) var(--type-control-padding-inline);
    border: 0;
    border-radius: 4px;
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
    font-weight: 600;
    line-height: var(--type-leading-ui);
}

.resources-reply-edit:is(:hover, :focus-visible),
.resources-reply-delete:is(:hover, :focus-visible),
.resources-reply-reply:is(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.resources-reply-reply:is(:hover, :focus-visible) {
    background: var(--theme-primary-action-hover);
    color: var(--theme-primary-action-text);
    text-decoration: none;
}

.resources-reply-reply:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.resources-section .resources-reply-content.board-markdown {
    margin: var(--type-space-tight) 0 0;
    padding: 0;
}

.resources-reply-list.has-replies > .resources-reply::before,
.resources-reply-children > .resources-reply::before {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: calc(-1 * var(--type-space-content) - 1px);
    width: var(--type-space-content);
    height: var(--resources-reply-branch-point);
    border-inline-start: 1px solid var(--theme-divider-standard);
    border-block-end: 1px solid var(--theme-divider-standard);
    content: "";
    pointer-events: none;
}

.resources-reply-list.has-replies > .resources-reply:not(:last-child)::after,
.resources-reply-children > .resources-reply:not(:last-child)::after {
    position: absolute;
    inset-block-start: var(--resources-reply-branch-point);
    inset-block-end: calc(-1 * var(--type-space-compact));
    inset-inline-start: calc(-1 * var(--type-space-content) - 1px);
    border-inline-start: 1px solid var(--theme-divider-standard);
    content: "";
    pointer-events: none;
}

.resources-reply-children {
    position: relative;
    min-width: 0;
    margin-block-start: var(--type-space-tight);
    margin-inline-start: var(--type-space-content);
    padding-inline-start: var(--type-space-content);
}

.resources-reply-composer,
.resources-child-reply-composer,
.resources-reply-edit-form {
    min-width: 0;
    margin-top: var(--type-space-tight);
}

.resources-reply-composer[hidden],
.resources-child-reply-composer[hidden] {
    display: none;
}

.resources-reply-editor-actions {
    display: flex;
    width: fit-content;
    justify-content: flex-end;
    gap: var(--type-space-compact);
    margin-block-start: var(--type-space-tight);
    margin-inline-start: auto;
}

.resources-reply-editor-actions :is(.resources-reply-cancel, .resources-reply-submit),
.resources-reply-retry {
    box-sizing: border-box;
    display: inline-flex;
    width: 96px;
    height: 26px;
    align-items: center;
    justify-content: center;
    padding: var(--type-control-padding-block) var(--type-control-padding-inline);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--body-font);
    font-size: var(--resources-content-small-font-size);
    font-weight: 600;
    line-height: var(--type-leading-ui);
}

.resources-reply-cancel,
.resources-reply-retry {
    background: var(--theme-surface-hover);
    color: var(--theme-text);
}

.resources-reply-submit {
    background: var(--theme-primary-action);
    color: var(--theme-primary-action-text);
}

.resources-reply-submit:is(:hover, :focus-visible) {
    background: var(--theme-primary-action-hover);
}

.resources-reply-cancel:is(:hover, :focus-visible),
.resources-reply-retry:is(:hover, :focus-visible) {
    background: var(--theme-surface-muted);
}

.resources-reply-editor-actions button:disabled {
    cursor: wait;
    opacity: 0.65;
}

.resources-replies textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--type-space-content);
    border: 0;
    border-radius: 0;
    background: var(--theme-surface);
    color: var(--theme-text);
    font-family: var(--body-font);
    font-size: var(--resources-content-font-size);
    line-height: var(--type-leading-reading);
    resize: vertical;
}

.resources-replies textarea:focus-visible {
    outline: 2px solid var(--theme-focus-ring);
    outline-offset: 2px;
}

.resources-reply-editor-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--type-space-tight) var(--type-space-content);
    margin-top: var(--type-space-tight);
}

.resources-reply-editor-meta p,
.resources-reply-empty,
.resources-reply-load-error,
.resources-reply-error,
.resources-reply-errors {
    margin: 0;
    color: var(--theme-text-muted);
    font-size: var(--resources-content-small-font-size);
    line-height: var(--type-leading-reading);
}

.resources-reply-error,
.resources-reply-errors,
.resources-reply-load-error {
    color: var(--theme-error-text);
}

.resources-reply-retry {
    margin-top: var(--type-space-tight);
}

.resources-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 560px) {
    .resources-reply-list.has-replies,
    .resources-reply-children {
        margin-inline-start: var(--type-space-compact);
        padding-inline-start: var(--type-space-compact);
    }

    .resources-reply-list.has-replies > .resources-reply::before,
    .resources-reply-children > .resources-reply::before {
        inset-inline-start: calc(-1 * var(--type-space-compact) - 1px);
        width: var(--type-space-compact);
    }

    .resources-reply-list.has-replies > .resources-reply:not(:last-child)::after,
    .resources-reply-children > .resources-reply:not(:last-child)::after {
        inset-inline-start: calc(-1 * var(--type-space-compact) - 1px);
    }
}

@media print {
    html[data-site-printing="true"] .resources-layout,
    html[data-site-printing="true"] #resources-print-content {
        display: block !important;
    }

    html[data-site-printing="true"] #resources-print-content {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content :is(
        .resources-home-panel > h5,
        .resources-home-panel > p,
        .resources-session-heading,
        .resources-description,
        .resources-description-divider
    ) {
        display: none !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-home-table-wrap {
        margin-top: 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-home-table thead th {
        border-top: 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-cell {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html[data-site-printing="true"] #resources-print-content :is(
        .staff-inline-edit-panel,
        .resources-notebook-control-summary,
        .resources-notebook-toolbar,
        .resources-notebook-local-file-controls,
        .resources-notebook-attachment-manifest,
        .resources-notebook-remove-local-file,
        .resources-code-header,
        .resources-notebook-variable-inspector,
        .resources-discussion,
        .resources-reply-trigger
    ) {
        display: none !important;
    }

    html[data-site-printing="true"] #resources-print-content :is(
        .resources-card-index,
        .resources-card-uploaded-at
    ) {
        display: none !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-card-heading {
        margin: 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-card-title {
        font-size: 14pt !important;
        line-height: 1.3 !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-post-print-meta {
        display: flex !important;
        flex-wrap: wrap;
        gap: 3mm;
        margin: 2mm 0 4mm !important;
        color: var(--theme-print-text-muted) !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-control-disclosure,
    html[data-site-printing="true"] #resources-print-content .resources-notebook-control-disclosure-body {
        display: block !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-local-files {
        display: block !important;
        margin: 0 0 4mm !important;
        padding: 0 0 3mm !important;
        border: 0 !important;
        border-bottom: 1px solid var(--theme-divider-standard) !important;
        background: transparent !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-local-files:has(
        .resources-notebook-local-file-list:empty
    ) {
        display: none !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-local-file-list {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-local-file-list::before {
        display: block;
        margin-bottom: 1.5mm;
        font-weight: 700;
        content: "Loaded files";
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-local-file-item {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 3mm;
        padding: 0.5mm 0 !important;
    }

    html[data-site-printing="true"] #resources-print-content :is(
        .resources-home-table-wrap,
        .resources-card,
        .resources-file-preview,
        .resources-notebook-preview,
        .resources-notebook-embed,
        .resources-notebook-body,
        .resources-notebook-document,
        .resources-notebook-cell,
        .resources-notebook-cell-body,
        .resources-code-block,
        .resources-notebook-code-editor,
        .resources-notebook-outputs,
        .resources-rendered-markdown
    ) {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    html[data-site-printing="true"] #resources-print-content .resources-notebook-code-highlight {
        display: none !important;
    }
}