/*
 * ScienceHub site stylesheet.
 * Every value here comes from DESIGN.md at the repository root. Change the
 * design there first, then mirror it here and in workspace.css.
 */

/* Tokens */

:root {
	color-scheme: light;

	--font-sans:
		-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
		'Apple Color Emoji', 'Segoe UI Emoji';
	--font-mono:
		ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;

	--text-display: 600 40px/48px var(--font-sans);
	--text-title-xl: 600 32px/40px var(--font-sans);
	--text-title-lg: 600 24px/32px var(--font-sans);
	--text-title-md: 600 20px/28px var(--font-sans);
	--text-title-sm: 600 16px/24px var(--font-sans);
	--text-title-xs: 600 14px/20px var(--font-sans);
	--text-subtitle: 400 20px/32px var(--font-sans);
	--text-body-lg: 400 16px/24px var(--font-sans);
	--text-body-md: 400 14px/21px var(--font-sans);
	--text-body-sm: 400 12px/18px var(--font-sans);
	--text-label-md: 500 14px/20px var(--font-sans);
	--text-label-sm: 500 12px/18px var(--font-sans);
	--text-code: 400 13px/20px var(--font-mono);
	--text-code-sm: 400 12px/18px var(--font-mono);

	--space-0: 0;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 64px;
	--space-10: 96px;

	--radius-1: 3px;
	--radius-2: 6px;
	--radius-3: 12px;
	--radius-full: 9999px;

	--control-sm: 28px;
	--control-md: 32px;
	--control-lg: 40px;

	--container-lg: 1012px;
	--container-xl: 1280px;
	--sidebar-width: 296px;

	--color-fg-default: #1f2328;
	--color-fg-muted: #59636e;
	--color-fg-disabled: #818b98;
	--color-fg-on-emphasis: #ffffff;
	--color-fg-accent: #0969da;
	--color-fg-success: #1a7f37;
	--color-fg-attention: #9a6700;
	--color-fg-danger: #d1242f;
	--color-fg-done: #8250df;

	--color-canvas-default: #ffffff;
	--color-canvas-muted: #f6f8fa;
	--color-canvas-inset: #f6f8fa;
	--color-canvas-overlay: #ffffff;
	--color-canvas-emphasis: #25292e;
	--color-canvas-disabled: #eff2f5;
	--color-header-bg: #f6f8fa;

	--color-border-default: #d1d9e0;
	--color-border-muted: #dfe4e9;
	--color-border-emphasis: #818b98;

	--color-neutral-emphasis: #59636e;
	--color-neutral-muted: #f0f1f3;
	--color-accent-emphasis: #0969da;
	--color-accent-muted: #ddf4ff;
	--color-accent-border: #bbdfff;
	--color-success-emphasis: #1f883d;
	--color-success-muted: #dafbe1;
	--color-success-border: #b7e7c4;
	--color-attention-emphasis: #9a6700;
	--color-attention-muted: #fff8c5;
	--color-attention-border: #eedcab;
	--color-danger-emphasis: #cf222e;
	--color-danger-muted: #ffebe9;
	--color-danger-border: #ffcdcd;
	--color-done-emphasis: #8250df;
	--color-done-muted: #fbefff;
	--color-done-border: #e7d5ff;

	--color-btn-bg: #f6f8fa;
	--color-btn-hover-bg: #eff2f5;
	--color-btn-active-bg: #e6eaef;
	--color-btn-primary-bg: #1f883d;
	--color-btn-primary-hover-bg: #1c8139;
	--color-btn-primary-active-bg: #197935;
	--color-btn-primary-disabled-bg: #95d8a6;
	--color-btn-primary-border: #1f793a;
	--color-btn-danger-fg: #d1242f;
	--color-btn-danger-hover-bg: #cf222e;

	--color-focus-ring: #0969da;
	--color-underline-nav-active: #fd8c73;
	--color-star: #eac54f;
	--color-orcid: #a6ce39;

	--color-syntax-comment: #59636e;
	--color-syntax-keyword: #cf222e;
	--color-syntax-string: #0a3069;
	--color-syntax-constant: #0550ae;
	--color-syntax-entity: #6639ba;
	--color-syntax-variable: #953800;

	--shadow-resting-small: 0 1px 1px 0 #1f23280a, 0 1px 2px 0 #1f232808;
	--shadow-resting-medium: 0 1px 1px 0 #25292e1a, 0 3px 6px 0 #25292e1f;
	--shadow-floating-small: 0 0 0 1px #d1d9e040, 0 6px 12px -3px #25292e0a, 0 6px 18px 0 #25292e1f;
	--shadow-floating-large: 0 0 0 1px #d1d9e000, 0 40px 80px 0 #25292e3d;
	--shadow-inset: inset 0 1px 0 0 #1f23280a;
}

:root.dark {
	color-scheme: dark;

	--color-fg-default: #f0f6fc;
	--color-fg-muted: #9198a1;
	--color-fg-disabled: #656c76;
	--color-fg-on-emphasis: #ffffff;
	--color-fg-accent: #4493f8;
	--color-fg-success: #3fb950;
	--color-fg-attention: #d29922;
	--color-fg-danger: #f85149;
	--color-fg-done: #ab7df8;

	--color-canvas-default: #0d1117;
	--color-canvas-muted: #151b23;
	--color-canvas-inset: #010409;
	--color-canvas-overlay: #010409;
	--color-canvas-emphasis: #3d444d;
	--color-canvas-disabled: #212830;
	--color-header-bg: #010409;

	--color-border-default: #3d444d;
	--color-border-muted: #2f353d;
	--color-border-emphasis: #656c76;

	--color-neutral-emphasis: #656c76;
	--color-neutral-muted: #1f232a;
	--color-accent-emphasis: #1f6feb;
	--color-accent-muted: #111d2e;
	--color-accent-border: #1e4273;
	--color-success-emphasis: #238636;
	--color-success-muted: #12261e;
	--color-success-border: #1a4a29;
	--color-attention-emphasis: #9e6a03;
	--color-attention-muted: #272215;
	--color-attention-border: #533d11;
	--color-danger-emphasis: #da3633;
	--color-danger-muted: #24171c;
	--color-danger-border: #6b2b2b;
	--color-done-emphasis: #8957e5;
	--color-done-muted: #252139;
	--color-done-border: #4c3c71;

	--color-btn-bg: #212830;
	--color-btn-hover-bg: #262c36;
	--color-btn-active-bg: #2a313c;
	--color-btn-primary-bg: #238636;
	--color-btn-primary-hover-bg: #29903b;
	--color-btn-primary-active-bg: #2e9a40;
	--color-btn-primary-disabled-bg: #105823;
	--color-btn-primary-border: #449854;
	--color-btn-danger-fg: #fa5e55;
	--color-btn-danger-hover-bg: #b62324;

	--color-focus-ring: #1f6feb;
	--color-underline-nav-active: #f78166;
	--color-star: #e3b341;
	--color-orcid: #a6ce39;

	--color-syntax-comment: #9198a1;
	--color-syntax-keyword: #ff7b72;
	--color-syntax-string: #a5d6ff;
	--color-syntax-constant: #79c0ff;
	--color-syntax-entity: #d2a8ff;
	--color-syntax-variable: #ffa657;

	--shadow-resting-small: 0 1px 1px 0 #01040999, 0 1px 3px 0 #01040999;
	--shadow-resting-medium: 0 1px 1px 0 #01040966, 0 3px 6px 0 #010409cc;
	--shadow-floating-small: 0 0 0 1px #3d444d, 0 6px 12px -3px #01040966, 0 6px 18px 0 #01040966;
	--shadow-floating-large: 0 0 0 1px #3d444d, 0 24px 48px 0 #010409;
	--shadow-inset: inset 0 1px 0 0 #0104093d;
}

/* Base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	font: var(--text-body-md);
	color: var(--color-fg-default);
	background: var(--color-canvas-default);
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
figure,
blockquote,
fieldset,
pre {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: var(--font-weight-semibold);
}

ul,
ol {
	margin: 0;
	padding-left: 2em;
}

fieldset {
	min-width: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
}

a {
	color: var(--color-fg-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

b,
strong {
	font-weight: var(--font-weight-semibold);
}

small {
	font-size: 12px;
}

img,
svg,
iframe {
	vertical-align: middle;
}

img {
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	margin: 0;
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

code,
kbd,
samp,
pre {
	font-family: var(--font-mono);
	font-size: 12px;
}

hr {
	height: 0;
	margin: var(--space-4) 0;
	border: 0;
	border-top: 1px solid var(--color-border-muted);
}

summary {
	cursor: pointer;
}

[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* Icons */

.icon {
	display: inline-block;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	overflow: visible;
	vertical-align: text-bottom;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon-fill {
	fill: currentColor;
}

.icon-24 {
	width: 24px;
	height: 24px;
}

.logo-mark {
	display: inline-block;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

/* Page shell */

.AppHeader {
	position: relative;
	z-index: 30;
	background: var(--color-header-bg);
	border-bottom: 1px solid var(--color-border-default);
}

.AppHeader-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	max-width: var(--container-xl);
	min-height: 56px;
	margin: 0 auto;
	padding: var(--space-3) var(--space-4);
}

.AppHeader-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font: var(--text-title-sm);
	color: var(--color-fg-default);
	border-radius: var(--radius-2);
}

.AppHeader-logo:hover {
	text-decoration: none;
}

.AppHeader-search {
	position: relative;
	order: 3;
	flex: 1 0 100%;
}

.AppHeader-search .icon {
	position: absolute;
	top: 8px;
	left: 10px;
	color: var(--color-fg-muted);
	pointer-events: none;
}

.AppHeader-search .form-control {
	padding-left: 32px;
}

.AppHeader-nav {
	display: none;
	align-items: center;
	gap: var(--space-1);
}

.AppHeader-link {
	padding: 6px var(--space-2);
	font: var(--text-label-md);
	color: var(--color-fg-default);
	border-radius: var(--radius-2);
}

.AppHeader-link:hover,
.AppHeader-link[aria-current='page'] {
	text-decoration: none;
	background: var(--color-neutral-muted);
}

.AppHeader-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-left: auto;
}

.AppHeader-avatar {
	display: flex;
	align-items: center;
	border-radius: var(--radius-full);
	list-style: none;
}

.AppHeader-avatar::-webkit-details-marker {
	display: none;
}

@media (min-width: 768px) {
	.AppHeader-inner {
		flex-wrap: nowrap;
		padding-inline: var(--space-5);
	}

	.AppHeader-search {
		order: 0;
		flex: 0 1 272px;
	}

	.AppHeader-nav {
		display: flex;
	}
}

.application-main {
	flex: 1 0 auto;
	width: 100%;
}

.AppFooter {
	margin-top: var(--space-7);
	border-top: 1px solid var(--color-border-muted);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.AppFooter-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	max-width: var(--container-xl);
	margin: 0 auto;
	padding: var(--space-5) var(--space-4) var(--space-6);
}

.AppFooter-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-fg-muted);
}

.AppFooter-brand .logo-mark {
	width: 24px;
	height: 24px;
}

.AppFooter-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.AppFooter-links a {
	color: var(--color-fg-muted);
}

.AppFooter-links a:hover {
	color: var(--color-fg-accent);
}

@media (min-width: 768px) {
	.AppFooter-inner {
		padding-inline: var(--space-5);
	}
}

/* Containers and layout */

.container-lg,
.container-xl {
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.container-lg {
	max-width: var(--container-lg);
}

.container-xl {
	max-width: var(--container-xl);
}

.Layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-5);
}

.Layout-main,
.Layout-sidebar {
	min-width: 0;
}

@media (min-width: 768px) {
	.container-lg,
	.container-xl {
		padding-inline: var(--space-5);
	}

	.Layout {
		grid-template-columns: minmax(0, 1fr) 256px;
	}

	.Layout--sidebar-start {
		grid-template-columns: 256px minmax(0, 1fr);
	}

	.Layout--sidebar-start .Layout-sidebar {
		order: -1;
	}
}

@media (min-width: 1012px) {
	.Layout {
		grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
		gap: var(--space-6);
	}

	.Layout--sidebar-start {
		grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	}
}

/* Box */

.Box {
	background: var(--color-canvas-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.Box-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--color-canvas-muted);
	border-bottom: 1px solid var(--color-border-default);
	border-radius: 5px 5px 0 0;
}

.Box-title {
	font: var(--text-title-xs);
}

.Box-body {
	padding: var(--space-4);
}

.Box-row {
	display: block;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	list-style: none;
	border-top: 1px solid var(--color-border-muted);
}

.Box-row:first-child {
	border-top: 0;
	border-radius: 5px 5px 0 0;
}

.Box-row:last-child {
	border-radius: 0 0 5px 5px;
}

.Box-header + .Box-row,
.Box-header + ul > .Box-row:first-child {
	border-top: 0;
	border-radius: 0;
}

.Box-row > .icon {
	color: var(--color-fg-muted);
}

.Box-row--hover:hover {
	background: var(--color-canvas-muted);
}

.Box-footer {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border-muted);
}

.Box > ul {
	margin: 0;
	padding: 0;
}

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: var(--control-md);
	padding: 0 var(--space-3);
	font: var(--text-label-md);
	color: var(--color-fg-default);
	white-space: nowrap;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	background: var(--color-btn-bg);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
	appearance: none;
	transition: background-color 80ms ease-out;
}

.btn:hover {
	text-decoration: none;
	background: var(--color-btn-hover-bg);
}

.btn:active,
.btn[aria-pressed='true'].btn-toggle {
	background: var(--color-btn-active-bg);
}

.btn .icon {
	color: var(--color-fg-muted);
}

.btn:disabled,
.btn[aria-disabled='true'] {
	color: var(--color-fg-disabled);
	cursor: not-allowed;
	background: var(--color-canvas-disabled);
	border-color: var(--color-border-muted);
}

.btn:disabled .icon,
.btn[aria-disabled='true'] .icon {
	color: inherit;
}

.btn-primary {
	color: var(--color-fg-on-emphasis);
	background: var(--color-btn-primary-bg);
	border-color: var(--color-btn-primary-border);
}

.btn-primary:hover {
	background: var(--color-btn-primary-hover-bg);
}

.btn-primary:active {
	background: var(--color-btn-primary-active-bg);
}

.btn-primary .icon {
	color: inherit;
}

.btn-primary:disabled,
.btn-primary[aria-disabled='true'] {
	color: #ffffffcc;
	background: var(--color-btn-primary-disabled-bg);
	border-color: var(--color-btn-primary-disabled-bg);
}

.btn-danger,
.btn-danger .icon {
	color: var(--color-btn-danger-fg);
}

.btn-danger:hover,
.btn-danger:active {
	color: var(--color-fg-on-emphasis);
	background: var(--color-btn-danger-hover-bg);
	border-color: var(--color-btn-danger-hover-bg);
}

.btn-danger:hover .icon,
.btn-danger:active .icon {
	color: inherit;
}

.btn-invisible {
	background: transparent;
	border-color: transparent;
}

.btn-invisible:hover {
	background: var(--color-neutral-muted);
}

.btn-invisible:active {
	background: var(--color-btn-active-bg);
}

.btn-invisible:disabled,
.btn-invisible[aria-disabled='true'] {
	background: transparent;
	border-color: transparent;
}

.btn-sm {
	gap: var(--space-1);
	height: var(--control-sm);
	padding: 0 var(--space-2);
	font: var(--text-label-sm);
}

.btn-large {
	height: var(--control-lg);
	padding: 0 var(--space-4);
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn-icon {
	width: var(--control-md);
	padding: 0;
}

.btn-icon.btn-sm {
	width: var(--control-sm);
}

.BtnGroup {
	display: inline-flex;
	vertical-align: middle;
}

.BtnGroup-item {
	position: relative;
	border-radius: 0;
}

.BtnGroup-item + .BtnGroup-item {
	margin-left: -1px;
}

.BtnGroup-item:first-child {
	border-radius: var(--radius-2) 0 0 var(--radius-2);
}

.BtnGroup-item:last-child {
	border-radius: 0 var(--radius-2) var(--radius-2) 0;
}

.BtnGroup-item:focus-visible {
	z-index: 1;
}

.btn.is-starred .icon {
	color: var(--color-star);
}

.dropdown-caret {
	display: inline-block;
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: currentColor;
	border-bottom-width: 0;
	opacity: 0.7;
}

.copy-idle,
.copy-done {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.copy-done,
[data-copied] .copy-idle {
	display: none;
}

[data-copied] .copy-done {
	display: inline-flex;
}

.btn .copy-done .icon {
	color: var(--color-fg-success);
}

.theme-toggle .icon-sun,
:root.dark .theme-toggle .icon-moon {
	display: none;
}

:root.dark .theme-toggle .icon-sun {
	display: inline-block;
}

/* Dropdown menu (works without JavaScript through <details>) */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown > summary {
	list-style: none;
}

.dropdown > summary::-webkit-details-marker {
	display: none;
}

/* A page-wide click target under the open menu closes it without JavaScript. */
.dropdown[open] > summary::before {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: block;
	cursor: default;
	content: '';
}

.dropdown-menu {
	position: absolute;
	top: calc(100% + var(--space-1));
	right: 0;
	z-index: 100;
	width: 224px;
	margin: 0;
	padding: var(--space-2);
	list-style: none;
	background: var(--color-canvas-overlay);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-floating-small);
}

.dropdown-menu--start {
	right: auto;
	left: 0;
}

.dropdown-header {
	padding: var(--space-1) var(--space-2) var(--space-2);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.dropdown-header strong {
	display: block;
	font: var(--text-title-xs);
	color: var(--color-fg-default);
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: 100%;
	min-height: var(--control-md);
	padding: 6px var(--space-2);
	font: var(--text-body-md);
	color: var(--color-fg-default);
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: var(--radius-2);
}

.dropdown-item:hover {
	text-decoration: none;
	background: var(--color-neutral-muted);
}

.dropdown-item .icon {
	color: var(--color-fg-muted);
}

.dropdown-divider {
	height: 1px;
	margin: var(--space-2) calc(var(--space-2) * -1);
	background: var(--color-border-muted);
}

/* Forms */

.form-group {
	margin-bottom: var(--space-4);
}

.form-label {
	display: block;
	margin-bottom: var(--space-1);
	font: var(--text-title-xs);
}

.form-label .form-label-optional {
	font-weight: var(--font-weight-normal);
	color: var(--color-fg-muted);
}

.form-control {
	display: block;
	width: 100%;
	height: var(--control-md);
	padding: 5px var(--space-3);
	/* 16px keeps iOS Safari from zooming the page when a field gets focus. */
	font: 400 16px/20px var(--font-sans);
	color: var(--color-fg-default);
	background: var(--color-canvas-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-inset);
	appearance: none;
}

@media (min-width: 768px) {
	.form-control {
		font-size: 14px;
	}
}

.form-control::placeholder {
	color: var(--color-fg-muted);
	opacity: 1;
}

.form-control:focus-visible {
	border-color: var(--color-focus-ring);
	outline-offset: -1px;
}

.form-control:disabled {
	color: var(--color-fg-disabled);
	cursor: not-allowed;
	background: var(--color-canvas-disabled);
	border-color: var(--color-border-muted);
}

.form-control[aria-invalid='true'] {
	border-color: var(--color-danger-emphasis);
}

.form-control-sm {
	height: var(--control-sm);
	padding-block: 3px;
}

.form-control-lg {
	height: var(--control-lg);
	padding-block: 9px;
}

.form-control.text-mono {
	font-family: var(--font-mono);
}

textarea.form-control {
	height: auto;
	min-height: 96px;
	padding-block: var(--space-2);
	line-height: 1.5;
	resize: vertical;
}

.form-select {
	padding-right: var(--space-6);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2359636e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
}

:root.dark .form-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%239198a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'/%3E%3C/svg%3E");
}

.form-hint {
	display: block;
	margin-top: var(--space-1);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.form-error {
	display: block;
	margin-top: var(--space-1);
	font: var(--text-label-sm);
	color: var(--color-fg-danger);
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
}

.form-check input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--color-accent-emphasis);
}

.form-check-label {
	font: var(--text-title-xs);
}

.radio-group {
	display: grid;
	gap: var(--space-3);
}

.radio-group legend {
	margin-bottom: var(--space-2);
	font: var(--text-title-xs);
}

.radio-option {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	cursor: pointer;
}

.radio-option input {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--color-accent-emphasis);
}

.radio-option > .icon {
	margin-top: 2px;
	color: var(--color-fg-muted);
}

.radio-option-title {
	display: block;
	font: var(--text-title-xs);
}

.radio-option .form-hint {
	margin-top: 0;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-muted);
}

.input-group {
	display: flex;
	align-items: flex-end;
	gap: var(--space-2);
}

.input-group-sep {
	padding-bottom: 2px;
	font: var(--text-subtitle);
	line-height: 28px;
	color: var(--color-fg-muted);
}

/* Labels, states, tags, counters */

.Label {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	font: var(--text-label-sm);
	color: var(--color-fg-default);
	white-space: nowrap;
	vertical-align: middle;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.Label--secondary {
	color: var(--color-fg-muted);
}

.Label--success {
	color: var(--color-fg-success);
	border-color: var(--color-success-emphasis);
}

.Label--attention {
	color: var(--color-fg-attention);
	border-color: var(--color-attention-emphasis);
}

.Label--danger {
	color: var(--color-fg-danger);
	border-color: var(--color-danger-emphasis);
}

.Label--accent {
	color: var(--color-fg-accent);
	border-color: var(--color-accent-emphasis);
}

.State {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	height: var(--control-md);
	padding: 0 var(--space-3);
	font: var(--text-label-md);
	color: var(--color-fg-on-emphasis);
	white-space: nowrap;
	vertical-align: middle;
	background: var(--color-neutral-emphasis);
	border-radius: var(--radius-full);
}

.State .icon {
	color: inherit;
}

.State--runnable {
	background: var(--color-success-emphasis);
}

.State--static {
	background: var(--color-neutral-emphasis);
}

.State--small {
	height: 24px;
	padding: 0 var(--space-2);
	font: var(--text-label-sm);
}

.topic-tag {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 10px;
	font: var(--text-label-sm);
	color: var(--color-fg-accent);
	white-space: nowrap;
	background: var(--color-accent-muted);
	border-radius: var(--radius-full);
}

.topic-tag:hover {
	color: var(--color-fg-on-emphasis);
	text-decoration: none;
	background: var(--color-accent-emphasis);
}

.topic-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.Counter {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	font: var(--text-label-sm);
	color: var(--color-fg-default);
	text-align: center;
	font-variant-numeric: tabular-nums;
	background: var(--color-neutral-muted);
	border-radius: var(--radius-full);
}

.Counter--primary {
	color: var(--color-fg-on-emphasis);
	background: var(--color-neutral-emphasis);
}

.btn .Counter {
	background: var(--color-btn-active-bg);
}

.kernel-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
	white-space: nowrap;
}

.kernel-status::before {
	width: 8px;
	height: 8px;
	content: '';
	background: var(--color-border-emphasis);
	border-radius: var(--radius-full);
}

.kernel-status--idle::before {
	background: var(--color-fg-success);
}

.kernel-status--busy::before {
	background: var(--color-fg-attention);
}

.kernel-status--stopped::before {
	background: var(--color-fg-danger);
}

.orcid-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 var(--space-2) 0 6px;
	font: var(--text-code-sm);
	color: var(--color-fg-default);
	white-space: nowrap;
	vertical-align: middle;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-full);
}

.orcid-badge::before {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	content: '';
	background: var(--color-orcid);
	border-radius: var(--radius-full);
}

.orcid-badge:hover {
	text-decoration: none;
	border-color: var(--color-border-emphasis);
}

/* Avatars */

.avatar {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	overflow: hidden;
	font: var(--text-label-sm);
	color: var(--color-fg-muted);
	vertical-align: middle;
	object-fit: cover;
	background: var(--color-canvas-muted);
	border-radius: var(--radius-full);
	box-shadow: 0 0 0 1px var(--color-border-muted);
}

.avatar-org {
	border-radius: var(--radius-2);
}

.avatar-20 {
	width: 20px;
	height: 20px;
	font-size: 9px;
}

.avatar-24 {
	width: 24px;
	height: 24px;
	font-size: 10px;
}

.avatar-20.avatar-org,
.avatar-24.avatar-org {
	border-radius: var(--radius-1);
}

.avatar-32 {
	width: 32px;
	height: 32px;
}

.avatar-48 {
	width: 48px;
	height: 48px;
	font-size: 16px;
}

.avatar-64 {
	width: 64px;
	height: 64px;
	font-size: 20px;
}

.avatar-96 {
	width: 96px;
	height: 96px;
	font-size: 32px;
}

.avatar-260 {
	width: 100%;
	max-width: 260px;
	height: auto;
	aspect-ratio: 1;
	font-size: 80px;
	font-weight: var(--font-weight-normal);
}

.avatar-260.avatar-org {
	border-radius: var(--radius-3);
}

.avatar-stack {
	display: inline-flex;
}

.avatar-stack .avatar + .avatar {
	margin-left: -8px;
	box-shadow: 0 0 0 2px var(--color-canvas-default);
}

/* Navigation */

.UnderlineNav {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	box-shadow: inset 0 -1px 0 var(--color-border-default);
	scrollbar-width: none;
}

.UnderlineNav::-webkit-scrollbar {
	display: none;
}

.UnderlineNav-item {
	position: relative;
	z-index: 0;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--space-2);
	height: 48px;
	padding: 0 var(--space-2);
	font: var(--text-body-md);
	color: var(--color-fg-default);
	white-space: nowrap;
}

.UnderlineNav-item::before {
	position: absolute;
	inset: var(--space-2) 0;
	z-index: -1;
	content: '';
	border-radius: var(--radius-2);
}

.UnderlineNav-item:hover {
	text-decoration: none;
}

.UnderlineNav-item:hover::before {
	background: var(--color-neutral-muted);
}

.UnderlineNav-item:focus-visible {
	outline-offset: -2px;
}

.UnderlineNav-item .icon {
	color: var(--color-fg-muted);
}

.UnderlineNav-item[aria-current='page'],
.UnderlineNav-item.selected {
	font-weight: var(--font-weight-semibold);
}

.UnderlineNav-item[aria-current='page']::after,
.UnderlineNav-item.selected::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	content: '';
	background: var(--color-underline-nav-active);
	border-radius: var(--radius-1);
}

.SideNav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.SideNav-heading {
	padding: 6px var(--space-2);
	font: 600 12px/18px var(--font-sans);
	color: var(--color-fg-muted);
}

.SideNav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--control-md);
	padding: 6px var(--space-2);
	color: var(--color-fg-default);
	border-radius: var(--radius-2);
}

.SideNav-item:hover {
	text-decoration: none;
	background: var(--color-neutral-muted);
}

.SideNav-item .icon {
	color: var(--color-fg-muted);
}

.SideNav-item .Counter {
	margin-left: auto;
}

.SideNav-item[aria-current='page'] {
	font-weight: var(--font-weight-semibold);
	background: var(--color-neutral-muted);
}

.SideNav-item[aria-current='page']::before {
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: -8px;
	width: 4px;
	content: '';
	background: var(--color-accent-emphasis);
	border-radius: var(--radius-2);
}

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
	margin: var(--space-5) 0;
}

.pagination > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--control-md);
	height: var(--control-md);
	padding: 0 var(--space-2);
	font: var(--text-body-md);
	font-style: normal;
	color: var(--color-fg-default);
	font-variant-numeric: tabular-nums;
	border: 1px solid transparent;
	border-radius: var(--radius-2);
}

.pagination > a:hover {
	text-decoration: none;
	border-color: var(--color-border-default);
}

.pagination > [aria-current='page'] {
	color: var(--color-fg-on-emphasis);
	background: var(--color-accent-emphasis);
}

.pagination > [aria-disabled='true'],
.pagination > .gap {
	color: var(--color-fg-disabled);
}

.pagination > .pagination-prev,
.pagination > .pagination-next {
	gap: var(--space-1);
	padding-inline: var(--space-3);
	color: var(--color-fg-accent);
}

.pagination > .pagination-prev[aria-disabled='true'],
.pagination > .pagination-next[aria-disabled='true'] {
	color: var(--color-fg-disabled);
}

/* Page headings */

.Subhead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 1px solid var(--color-border-muted);
}

.Subhead-heading {
	flex: 1 1 auto;
	font: var(--text-title-lg);
	font-weight: var(--font-weight-normal);
}

.Subhead-description {
	flex: 1 0 100%;
	color: var(--color-fg-muted);
}

.Subhead-actions {
	display: flex;
	gap: var(--space-2);
}

.project-header {
	padding-top: var(--space-4);
	background: var(--color-canvas-muted);
}

.project-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.project-header-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.project-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	min-width: 0;
	font: var(--text-subtitle);
	line-height: 28px;
}

.project-title > .icon,
.project-title-sep {
	color: var(--color-fg-muted);
}

.project-title-name {
	font-weight: var(--font-weight-semibold);
}

.project-header-description {
	max-width: 720px;
	margin-bottom: var(--space-2);
	color: var(--color-fg-muted);
}

/* Messages */

.flash {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	color: var(--color-fg-default);
	background: var(--color-accent-muted);
	border: 1px solid var(--color-accent-border);
	border-radius: var(--radius-2);
}

.flash > .icon {
	margin-top: 3px;
	color: var(--color-fg-accent);
}

.flash-success {
	background: var(--color-success-muted);
	border-color: var(--color-success-border);
}

.flash-success > .icon {
	color: var(--color-fg-success);
}

.flash-warn {
	background: var(--color-attention-muted);
	border-color: var(--color-attention-border);
}

.flash-warn > .icon {
	color: var(--color-fg-attention);
}

.flash-error {
	background: var(--color-danger-muted);
	border-color: var(--color-danger-border);
}

.flash-error > .icon {
	color: var(--color-fg-danger);
}

.flash-body {
	flex: 1 1 auto;
	min-width: 0;
}

.flash-action {
	flex-shrink: 0;
	margin: -4px -4px -4px 0;
}

.blankslate {
	padding: var(--space-6) var(--space-4);
	text-align: center;
}

.blankslate-icon {
	margin-bottom: var(--space-2);
	color: var(--color-fg-muted);
}

.blankslate-heading {
	margin-bottom: var(--space-1);
	font: var(--text-title-md);
}

.blankslate-text {
	max-width: 440px;
	margin-inline: auto;
	color: var(--color-fg-muted);
}

.blankslate-action {
	margin-top: var(--space-4);
}

/* Prose */

.markdown-body {
	font: var(--text-body-lg);
}

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

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
	margin-top: var(--space-5);
	line-height: 1.25;
}

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

.markdown-body h1 {
	padding-bottom: 0.3em;
	font-size: 32px;
	border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h2 {
	padding-bottom: 0.3em;
	font-size: 24px;
	border-bottom: 1px solid var(--color-border-muted);
}

.markdown-body h3 {
	font-size: 20px;
}

.markdown-body h4 {
	font-size: 16px;
}

.markdown-body a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

.markdown-body code {
	padding: 0.2em 0.4em;
	font-size: 85%;
	background: var(--color-neutral-muted);
	border-radius: var(--radius-2);
}

.markdown-body pre {
	padding: var(--space-4);
	overflow-x: auto;
	font: var(--text-code);
	background: var(--color-canvas-muted);
	border-radius: var(--radius-2);
}

.markdown-body pre code {
	padding: 0;
	font-size: inherit;
	background: transparent;
}

.markdown-body blockquote {
	padding: 0 var(--space-4);
	color: var(--color-fg-muted);
	border-left: 4px solid var(--color-border-default);
}

.markdown-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	font-size: 14px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.markdown-body th,
.markdown-body td {
	padding: 6px 13px;
	text-align: left;
	border: 1px solid var(--color-border-default);
}

.markdown-body th {
	font-weight: var(--font-weight-semibold);
	background: var(--color-canvas-muted);
}

.markdown-body hr {
	height: 2px;
	margin: var(--space-5) 0;
	background: var(--color-border-default);
	border: 0;
}

/* Syntax colours for static code samples */

.syntax-comment {
	color: var(--color-syntax-comment);
}

.syntax-keyword {
	color: var(--color-syntax-keyword);
}

.syntax-string {
	color: var(--color-syntax-string);
}

.syntax-constant {
	color: var(--color-syntax-constant);
}

.syntax-entity {
	color: var(--color-syntax-entity);
}

.syntax-variable {
	color: var(--color-syntax-variable);
}

/* Project list */

.project-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.project-list-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border-muted);
}

.project-list-item:first-child {
	padding-top: var(--space-2);
}

.project-list-body {
	flex: 1 1 auto;
	min-width: 0;
}

.project-list-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	font: var(--text-title-md);
}

.project-list-name a {
	min-width: 0;
}

.project-list-description {
	max-width: 640px;
	margin-top: var(--space-1);
	color: var(--color-fg-muted);
}

.project-list-item .topic-list {
	margin-top: var(--space-2);
}

.project-list-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: var(--space-2) 0 0;
	padding: 0;
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
	list-style: none;
	font-variant-numeric: tabular-nums;
}

.project-list-meta > * {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.project-list-meta a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	color: inherit;
}

.project-list-meta a:hover {
	color: var(--color-fg-accent);
	text-decoration: none;
}

.project-list-actions {
	flex-shrink: 0;
}

/* Profile */

.profile-head {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.profile-head .avatar-260 {
	flex: 0 0 72px;
	width: 72px;
	font-size: 24px;
}

.profile-names {
	min-width: 0;
}

.profile-name {
	display: block;
	font: var(--text-title-lg);
	line-height: 1.25;
}

.profile-handle {
	display: block;
	font: var(--text-subtitle);
	line-height: 24px;
	color: var(--color-fg-muted);
}

.profile-bio {
	margin-top: var(--space-4);
	font: var(--text-body-lg);
}

.profile-actions {
	margin-top: var(--space-4);
}

.profile-counts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-4);
	color: var(--color-fg-muted);
}

.profile-counts a {
	color: var(--color-fg-muted);
}

.profile-counts a:hover {
	color: var(--color-fg-accent);
	text-decoration: none;
}

.profile-counts strong {
	color: var(--color-fg-default);
}

.profile-meta {
	display: grid;
	gap: var(--space-1);
	margin: var(--space-4) 0 0;
	padding: 0;
	list-style: none;
}

.profile-meta li {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
	min-height: 24px;
}

.profile-meta .icon {
	margin-top: 3px;
	color: var(--color-fg-muted);
}

.profile-meta a:not(.orcid-badge) {
	color: var(--color-fg-default);
}

.profile-meta a:not(.orcid-badge):hover {
	color: var(--color-fg-accent);
}

.profile-section {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border-muted);
}

.profile-section-heading {
	margin-bottom: var(--space-2);
	font: var(--text-title-sm);
}

@media (min-width: 768px) {
	.profile-head {
		display: block;
	}

	.profile-head .avatar-260 {
		width: 100%;
		font-size: 80px;
	}

	.profile-names {
		padding-top: var(--space-4);
	}
}

/* Activity feed */

.activity-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.activity-item {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-muted);
}

.activity-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

.activity-item-title {
	min-height: 32px;
	padding-top: 5px;
}

.activity-item-title a {
	font-weight: var(--font-weight-semibold);
	color: var(--color-fg-default);
}

.activity-item-title a:hover {
	color: var(--color-fg-accent);
}

.activity-item-time {
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
	white-space: nowrap;
}

.activity-item-card {
	margin-top: var(--space-2);
	padding: var(--space-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.activity-item-card .project-list-name {
	font: var(--text-title-sm);
}

/* Signed-out home */

.hero {
	padding: var(--space-6) 0;
	border-bottom: 1px solid var(--color-border-muted);
}

.hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-6);
	align-items: center;
}

.hero-heading {
	max-width: 560px;
	font: var(--text-title-xl);
}

.hero-lead {
	max-width: 520px;
	margin-top: var(--space-3);
	font: var(--text-body-lg);
	color: var(--color-fg-muted);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

.hero-note {
	margin-top: var(--space-3);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.hero-visual {
	min-width: 0;
}

@media (min-width: 768px) {
	.hero {
		padding: var(--space-8) 0;
	}

	.hero-heading {
		font: var(--text-display);
	}

	.hero-lead {
		font: var(--text-subtitle);
	}
}

@media (min-width: 1012px) {
	.hero {
		padding: var(--space-9) 0;
	}

	.hero-inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--space-8);
	}
}

.notebook-card {
	overflow: hidden;
	background: var(--color-canvas-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
	box-shadow: var(--shadow-resting-medium);
}

.notebook-card-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	background: var(--color-canvas-muted);
	border-bottom: 1px solid var(--color-border-default);
}

.notebook-card-title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	font: var(--text-code-sm);
	color: var(--color-fg-default);
}

.notebook-card-title .icon {
	color: var(--color-fg-muted);
}

.notebook-card-header .kernel-status {
	margin-left: auto;
}

.notebook-card-cell {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	border-top: 1px solid var(--color-border-muted);
}

.notebook-card-cell:first-of-type {
	border-top: 0;
}

.notebook-card-gutter {
	padding: var(--space-3) 0;
	font: var(--text-code-sm);
	line-height: 20px;
	color: var(--color-fg-disabled);
	text-align: center;
	user-select: none;
}

.notebook-card-code {
	margin: 0;
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
	overflow-x: auto;
	font: var(--text-code);
	white-space: pre;
}

.notebook-card-output {
	grid-column: 2;
	padding: 0 var(--space-3) var(--space-3) 0;
}

.notebook-card-control {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.notebook-card-control output {
	font: var(--text-code-sm);
	color: var(--color-fg-default);
}

.notebook-card-slider {
	position: relative;
	flex: 1 1 auto;
	max-width: 200px;
	height: 4px;
	background: var(--color-border-default);
	border-radius: var(--radius-full);
}

.notebook-card-slider::before {
	position: absolute;
	inset: 0 38% 0 0;
	content: '';
	background: var(--color-accent-emphasis);
	border-radius: var(--radius-full);
}

.notebook-card-slider::after {
	position: absolute;
	top: -5px;
	left: calc(62% - 7px);
	width: 14px;
	height: 14px;
	content: '';
	background: var(--color-canvas-default);
	border: 2px solid var(--color-accent-emphasis);
	border-radius: var(--radius-full);
}

.notebook-card-plot {
	display: flex;
	align-items: flex-end;
	gap: var(--space-1);
	height: 96px;
	margin-top: var(--space-3);
	padding: var(--space-2) var(--space-2) 0;
	border-bottom: 1px solid var(--color-border-default);
	border-left: 1px solid var(--color-border-default);
}

.notebook-card-plot span {
	flex: 1 1 0;
	height: 20%;
	background: var(--color-accent-emphasis);
	border-radius: 2px 2px 0 0;
}

.notebook-card-plot span:nth-child(2) {
	height: 32%;
}

.notebook-card-plot span:nth-child(3) {
	height: 47%;
}

.notebook-card-plot span:nth-child(4) {
	height: 66%;
}

.notebook-card-plot span:nth-child(5) {
	height: 88%;
}

.notebook-card-plot span:nth-child(6) {
	height: 100%;
}

.notebook-card-plot span:nth-child(7) {
	height: 84%;
}

.notebook-card-plot span:nth-child(8) {
	height: 61%;
}

.notebook-card-plot span:nth-child(9) {
	height: 43%;
}

.notebook-card-plot span:nth-child(10) {
	height: 30%;
}

.notebook-card-plot span:nth-child(11) {
	height: 19%;
}

.notebook-card-plot span:nth-child(12) {
	height: 11%;
}

.notebook-card-caption {
	margin-top: var(--space-2);
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

.feature-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-card {
	padding: var(--space-4);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.feature-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-md);
	height: var(--control-md);
	margin-bottom: var(--space-3);
	color: var(--color-fg-muted);
	background: var(--color-canvas-muted);
	border: 1px solid var(--color-border-muted);
	border-radius: var(--radius-2);
}

.feature-card-heading {
	font: var(--text-title-sm);
}

.feature-card-text {
	margin-top: var(--space-1);
	color: var(--color-fg-muted);
}

@media (min-width: 544px) {
	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1012px) {
	.feature-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.feature-card {
		padding: var(--space-5);
	}
}

.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.stats-item {
	display: flex;
	flex-direction: column-reverse;
	padding: var(--space-4);
	box-shadow:
		1px 0 0 var(--color-border-muted),
		0 1px 0 var(--color-border-muted);
}

.stats-value {
	font: var(--text-title-lg);
	font-variant-numeric: tabular-nums;
}

.stats-label {
	font: var(--text-body-sm);
	color: var(--color-fg-muted);
}

@media (min-width: 768px) {
	.stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Notebook page */

.notebook-frame {
	overflow: hidden;
	background: var(--color-canvas-default);
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.notebook-frame-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	min-height: 48px;
	padding: var(--space-2) var(--space-3);
	background: var(--color-canvas-muted);
	border-bottom: 1px solid var(--color-border-default);
}

.notebook-frame-title {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-width: 0;
	font: var(--text-code);
	font-weight: var(--font-weight-semibold);
}

.notebook-frame-title .icon {
	color: var(--color-fg-muted);
}

.notebook-frame-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-left: auto;
}

.notebook-frame iframe,
.notebook-frame-body {
	display: block;
	width: 100%;
	height: 70vh;
	min-height: 320px;
	border: 0;
}

.notebook-frame-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px;
	min-height: 0;
	padding: var(--space-4);
	color: var(--color-fg-muted);
	text-align: center;
	background: var(--color-canvas-inset);
}

.cite-box {
	overflow: hidden;
	border: 1px solid var(--color-border-default);
	border-radius: var(--radius-2);
}

.cite-box-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: 6px var(--space-2) 6px var(--space-3);
	font: var(--text-title-xs);
	background: var(--color-canvas-muted);
	border-bottom: 1px solid var(--color-border-default);
}

.cite-box-body {
	margin: 0;
	padding: var(--space-3);
	overflow-x: auto;
	font: var(--text-code-sm);
	white-space: pre;
	background: var(--color-canvas-default);
}

/* Utilities: keep this set small. Add a component before adding a utility. */

.f1 {
	font-size: 32px;
	line-height: 40px;
}

.f2 {
	font-size: 24px;
	line-height: 32px;
}

.f3 {
	font-size: 20px;
	line-height: 28px;
}

.f4 {
	font-size: 16px;
	line-height: 24px;
}

.f5 {
	font-size: 14px;
	line-height: 21px;
}

.f6,
.text-small {
	font-size: 12px;
	line-height: 18px;
}

.text-normal {
	font-weight: var(--font-weight-normal);
}

.text-semibold {
	font-weight: var(--font-weight-semibold);
}

.text-mono {
	font-family: var(--font-mono);
}

.text-center {
	text-align: center;
}

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.no-wrap {
	white-space: nowrap;
}

.tabular-nums {
	font-variant-numeric: tabular-nums;
}

.color-fg-default {
	color: var(--color-fg-default);
}

.color-fg-muted {
	color: var(--color-fg-muted);
}

.color-fg-accent {
	color: var(--color-fg-accent);
}

.color-fg-success {
	color: var(--color-fg-success);
}

.color-fg-attention {
	color: var(--color-fg-attention);
}

.color-fg-danger {
	color: var(--color-fg-danger);
}

.color-bg-muted {
	background: var(--color-canvas-muted);
}

.Link--primary {
	color: var(--color-fg-default);
}

.Link--muted {
	color: var(--color-fg-muted);
}

.Link--primary:hover,
.Link--muted:hover {
	color: var(--color-fg-accent);
}

.d-none {
	display: none;
}

.d-block {
	display: block;
}

.d-flex {
	display: flex;
}

.d-inline-flex {
	display: inline-flex;
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-items-start {
	align-items: flex-start;
}

.flex-items-center {
	align-items: center;
}

.flex-justify-between {
	justify-content: space-between;
}

.flex-justify-end {
	justify-content: flex-end;
}

.flex-1 {
	flex: 1 1 0;
	min-width: 0;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.gap-1 {
	gap: var(--space-1);
}

.gap-2 {
	gap: var(--space-2);
}

.gap-3 {
	gap: var(--space-3);
}

.gap-4 {
	gap: var(--space-4);
}

.gap-5 {
	gap: var(--space-5);
}

.mt-0 {
	margin-top: 0;
}

.mt-1 {
	margin-top: var(--space-1);
}

.mt-2 {
	margin-top: var(--space-2);
}

.mt-3 {
	margin-top: var(--space-3);
}

.mt-4 {
	margin-top: var(--space-4);
}

.mt-5 {
	margin-top: var(--space-5);
}

.mt-6 {
	margin-top: var(--space-6);
}

.mt-8 {
	margin-top: var(--space-8);
}

.mb-0 {
	margin-bottom: 0;
}

.mb-1 {
	margin-bottom: var(--space-1);
}

.mb-2 {
	margin-bottom: var(--space-2);
}

.mb-3 {
	margin-bottom: var(--space-3);
}

.mb-4 {
	margin-bottom: var(--space-4);
}

.mb-5 {
	margin-bottom: var(--space-5);
}

.mb-6 {
	margin-bottom: var(--space-6);
}

.ml-auto {
	margin-left: auto;
}

.mx-auto {
	margin-inline: auto;
}

.py-5 {
	padding-block: var(--space-5);
}

.width-full {
	width: 100%;
}

.list-style-none {
	padding-left: 0;
	list-style: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
}

@media (max-width: 767px) {
	.hide-sm {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.d-md-none {
		display: none !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-flex {
		display: flex !important;
	}
}

/* Single-column pages: sign-in, and forms that read better at a short measure. */

.auth-page {
	max-width: 340px;
	margin-top: var(--space-7);
}

.auth-page .logo-mark {
	width: 48px;
	height: 48px;
}

.narrow-page {
	max-width: 720px;
}

/* Search, sort, and the create button above a list. */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border-muted);
}

.filter-bar .form-control {
	width: auto;
}

.filter-bar input[type='search'] {
	flex: 1 1 200px;
}

/* Source shown in place of a rendering. */

.source-view {
	margin: 0;
	padding: var(--space-4);
	overflow-x: auto;
	font: var(--text-code);
	tab-size: 4;
	background: var(--color-canvas-default);
}

.UnderlineNav + .project-list,
.filter-bar + .project-list {
	padding-top: var(--space-2);
}