/* User Provided Stylesheet */
/* Hide the "Made with MyST" attribution in the page footer.
Targets the theme's stable component class. */
.myst-made-with-myst {
display: none !important;
}
/* Hide the in-page "start a kernel" power button and its binder connection-status
tray. In-page execution can't work against our JupyterHub (it speaks the
BinderHub protocol, which JupyterHub doesn't implement). The native
"Launch external computing interface" button (myst-fm-launch-*) is unaffected. */
.myst-jp-nb-toolbar-power,
.myst-jp-connect-status-tray {
display: none !important;
}
/* "Launch on JupyterHub" call-to-action, styled as a button. */
a.launch-button {
display: inline-block;
margin: 0.5rem 0;
padding: 0.55rem 1.1rem;
background: #1f6feb;
color: #fff !important;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
}
a.launch-button:hover {
background: #1a5fd0;
}
/* ===================================================================
Sidebar redesign — scoped to the left nav only.
See docs/superpowers/specs/2026-06-14-sidebar-redesign-design.md
=================================================================== */
/* Density + typography: tighter rows, slightly smaller text. */
.myst-primary-sidebar-nav a {
font-size: 12.5px !important;
line-height: 1.4 !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
}
/* Hover affordance. */
.myst-primary-sidebar-nav a:hover {
background: #f4f5f7;
border-radius: 6px;
}
/* Active page: tinted background + weight (no edge bar). */
.myst-primary-sidebar-nav a[aria-current="page"] {
background: #eef2ff !important;
color: #1e3a8a !important;
border-radius: 6px;
}
/* Shared "section-header" wordmark look: uppercase, bold, letter-spaced. */
.myst-primary-sidebar-nav div[title],
.myst-primary-sidebar-nav a[href="/autoscaling"],
.myst-primary-sidebar-nav a[href="/"] {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700 !important;
}
/* Gray (light) / near-white (dark) for the sidebar title and the section
headers. The sitewide header logo is intentionally left untouched. */
.myst-primary-sidebar-nav div[title],
.myst-primary-sidebar-nav a[href="/"] {
color: #64748b !important;
}
.dark .myst-primary-sidebar-nav div[title],
.dark .myst-primary-sidebar-nav a[href="/"] {
color: #f1f5f9 !important;
}
/* Top-level "Autoscaling" entry keeps the brighter indigo accent. */
.myst-primary-sidebar-nav a[href="/autoscaling"] {
color: #6366f1 !important;
}
/* Generic section headers (any TOC group title) — plain uppercase labels. */
.myst-primary-sidebar-nav div[title] {
margin: 8px 0 2px;
padding: 0;
font-size: 10px;
}
/* Top-level "Autoscaling" entry, dressed as a section header. */
.myst-primary-sidebar-nav a[href="/autoscaling"] {
font-size: 10px !important;
}
/* Contribution badges. The forked theme (TableOfContentsItems.tsx) renders a
real … inside the nav
link for /lit-, /exp-, /idea- pages and adds `toc-has-badge` to the link. The
link becomes a flex row so a wrapped label aligns as its own column beside the
badge. Colours stay here so all site styling lives in one place. */
.myst-primary-sidebar-nav a.toc-has-badge {
display: flex;
align-items: baseline;
}
.toc-badge {
flex: 0 0 auto;
box-sizing: border-box;
min-width: 36px;
margin-right: 6px;
padding: 1px 4px;
border-radius: 4px;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.04em;
text-align: center;
color: #fff;
}
.toc-badge-lit { background: #2563eb; }
.toc-badge-exp { background: #dc2626; }
.toc-badge-idea { background: #15803d; }
/* Dark-mode variants (theme toggles .dark on ). */
.dark .myst-primary-sidebar-nav a:hover {
background: rgba(255, 255, 255, 0.06);
}
.dark .myst-primary-sidebar-nav a[aria-current="page"] {
background: rgba(59, 130, 246, 0.16) !important;
color: #bfdbfe !important;
}
.dark .myst-primary-sidebar-nav a[href="/autoscaling"] {
color: #a5b4fc !important;
}
/* ===================================================================
Sticky-frame for the wide papers comparison table.
Scoped via the `expandable` wrapper: the table is wrapped in
`:::{div} :class: expandable` in comparison.md, which the forked theme
renders as `.cmp-expandable` containing the `.overflow-auto` table
wrapper, so this touches no other table.
NOTE: MyST emits the header row as | inside | (there is no
), so sticky rules target `tr:first-child th` for the header
and `tr > :first-child` for the pinned paper-name column.
See docs/superpowers/specs/2026-06-15-comparison-table-sticky-frame-design.md
=================================================================== */
/* Height cap: the table scrolls inside a fixed box instead of making the
whole page enormous, which also keeps the horizontal scrollbar in view. */
.cmp-expandable > .overflow-auto {
max-height: min(72vh, 640px);
}
/* Drop the table's top margin so the sticky header sits flush against the top
of the scroll box (otherwise that margin shows as a scrollable gap above it). */
.cmp-expandable > .overflow-auto > table {
margin-top: 0;
}
/* Sticky header row. */
.cmp-expandable > .overflow-auto table tr:first-child th {
position: sticky;
top: 0;
z-index: 2;
background: #eef2ff;
color: #1e3a8a;
}
/* Sticky first column (paper name); right-edge line reads as "pinned". */
.cmp-expandable > .overflow-auto table tr > :first-child {
position: sticky;
left: 0;
z-index: 1;
background: #ffffff;
box-shadow: 1px 0 0 #d0d7de;
}
/* Corner cell (header ∩ first column) stays above both axes. */
.cmp-expandable > .overflow-auto table tr:first-child > :first-child {
z-index: 3;
background: #eef2ff;
}
/* Dark-mode variants for the sticky cell backgrounds. */
.dark .cmp-expandable > .overflow-auto table tr:first-child th,
.dark .cmp-expandable > .overflow-auto table tr:first-child > :first-child {
background: #1e293b;
color: #bfdbfe;
}
.dark .cmp-expandable > .overflow-auto table tr > :first-child {
background: #0f172a;
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.12);
}
/* Dark-theme scrollbars for the in-page scroll box (the default OS scrollbar
stays light otherwise). Firefox uses scrollbar-color; WebKit/Chromium use the
::-webkit-scrollbar pseudo-elements. */
.dark .cmp-expandable > .overflow-auto {
scrollbar-color: #475569 #1e293b;
}
.dark .cmp-expandable > .overflow-auto::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.dark .cmp-expandable > .overflow-auto::-webkit-scrollbar-track {
background: #1e293b;
}
.dark .cmp-expandable > .overflow-auto::-webkit-scrollbar-thumb {
background: #475569;
border-radius: 6px;
border: 2px solid #1e293b;
}
.dark .cmp-expandable > .overflow-auto::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
.dark .cmp-expandable > .overflow-auto::-webkit-scrollbar-corner {
background: #1e293b;
}
/* -------------------------------------------------------------------
"Expand" button + modal for the comparison table. The forked theme
(ExpandableContainer in myst-to-react) renders the button and a native