.fnbbs-shell,
.fnbbs-shell * {
	box-sizing: border-box;
}

.fnbbs-shell,
.fnbbs-dialog {
	--fnbbs-ink: CanvasText;
	--fnbbs-muted: CanvasText;
	--fnbbs-accent: LinkText;
	--fnbbs-line: ButtonBorder;
	--fnbbs-page: Canvas;
	--fnbbs-surface: Canvas;
	--fnbbs-surface-alt: Canvas;
	--fnbbs-surface-hover: Canvas;
	--fnbbs-heading-bg: Canvas;
	--fnbbs-heading-ink: CanvasText;
	--fnbbs-code-bg: Canvas;
	--fnbbs-code-ink: CanvasText;
	--fnbbs-control-line: ButtonBorder;
	--fnbbs-soft-line: ButtonBorder;
	--fnbbs-link-line: ButtonBorder;
	--fnbbs-link-hover: Canvas;
	--fnbbs-accent-hover: LinkText;
	--fnbbs-open-hover: LinkText;
	--fnbbs-button-bg: ButtonFace;
	--fnbbs-button-ink: ButtonText;
	--fnbbs-close-bg: ButtonFace;
	--fnbbs-close-hover: ButtonFace;
	--fnbbs-close-ink: ButtonText;
	--fnbbs-pre-bg: Canvas;
	--fnbbs-pre-ink: CanvasText;
	--fnbbs-focus: Highlight;
	--fnbbs-action-radius: 0.35rem;
	color-scheme: light dark;
	color: var(--fnbbs-ink);
}

.fnbbs-shell[data-fnbbs-theme="light"],
.fnbbs-dialog[data-fnbbs-theme="light"] {
	color-scheme: light;
}

.fnbbs-shell[data-fnbbs-theme="dark"],
.fnbbs-dialog[data-fnbbs-theme="dark"] {
	color-scheme: dark;
}

.fnbbs-shell {
	background: var(--fnbbs-page);
	min-height: 65vh;
	padding: clamp(1.25rem, 4vw, 3.5rem) 1rem 4rem;
}

.fnbbs-shell .fnbbs-inner {
	max-width: 78rem;
	margin: 0 auto;
}

.fnbbs-shell a,
.fnbbs-dialog a {
	color: var(--fnbbs-accent);
}

.fnbbs-shell :is(a, button, select):focus-visible,
.fnbbs-dialog a:focus-visible {
	outline: 3px solid var(--fnbbs-focus);
	outline-offset: 3px;
}

.fnbbs-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.fnbbs-hero h1 {
	color: var(--fnbbs-heading-ink);
	font-size: clamp(2.1rem, 6vw, 3.8rem);
	line-height: 1.08;
	margin: 0.2rem 0 0.7rem;
}

.fnbbs-shell :is(h2, h3),
.fnbbs-dialog :is(h2, h3) {
	color: var(--fnbbs-heading-ink);
}

.fnbbs-shell p,
.fnbbs-dialog p,
.fnbbs-dialog dd {
	color: var(--fnbbs-ink);
}

.fnbbs-hero p {
	color: var(--fnbbs-muted);
	margin: 0;
	max-width: 42rem;
}

.fnbbs-eyebrow {
	color: var(--fnbbs-accent) !important;
	font-size: 0.76rem;
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fnbbs-guide-link {
	border: 1px solid var(--fnbbs-link-line);
	border-radius: 999px;
	font-size: 0.94rem;
	font-weight: 700;
	padding: 0.75rem 1.05rem;
	text-decoration: none;
	white-space: nowrap;
}

.fnbbs-guide-link:hover {
	background: var(--fnbbs-link-hover);
}

.fnbbs-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fnbbs-filters {
	align-items: end;
	background: var(--fnbbs-surface);
	border: 1px solid var(--fnbbs-line);
	border-radius: 1.15rem;
	box-shadow: 0 10px 32px rgb(0 0 0 / 8%);
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	padding: 1rem;
}

.fnbbs-filter-field {
	flex: 1 1 14rem;
}

.fnbbs-filter-field label {
	color: var(--fnbbs-muted);
	display: block;
	font-size: 0.82rem;
	font-weight: 700;
	margin-bottom: 0.4rem;
}

.fnbbs-filter-field select {
	appearance: none;
	background: var(--fnbbs-surface) !important;
	border: 1px solid var(--fnbbs-control-line) !important;
	border-radius: 0.65rem;
	color: var(--fnbbs-ink) !important;
	font: inherit;
	min-height: 2.8rem;
	padding: 0.5rem 2rem 0.5rem 0.8rem;
	width: 100%;
}

.fnbbs-filter-field select option {
	background: var(--fnbbs-surface);
	color: var(--fnbbs-ink);
}

.fnbbs-filter-button {
	background: var(--fnbbs-button-bg);
	border: 1px solid var(--fnbbs-button-bg);
	border-radius: 0.65rem;
	color: var(--fnbbs-button-ink);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 2.8rem;
	padding: 0.5rem 1rem;
}

.fnbbs-filter-button:hover {
	background: var(--fnbbs-accent-hover);
}

.fnbbs-clear {
	align-self: center;
	font-weight: 650;
	padding: 0.5rem;
}

.fnbbs-count {
	color: var(--fnbbs-muted);
	font-size: 0.94rem;
	font-weight: 650;
	margin: 1.5rem 0 0.8rem;
}

.fnbbs-table-wrap {
	background: var(--fnbbs-surface);
	border: 1px solid var(--fnbbs-line);
	border-radius: 1rem;
	box-shadow: 0 8px 24px rgb(0 0 0 / 7%);
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.fnbbs-table {
	border-collapse: separate;
	border-spacing: 0;
	color: var(--fnbbs-ink);
	font-size: 0.96rem;
	margin: 0;
	min-width: 58rem;
	width: 100%;
}

.fnbbs-table caption {
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.fnbbs-table th,
.fnbbs-table td {
	border: 0;
	border-bottom: 1px solid var(--fnbbs-line);
	color: var(--fnbbs-ink);
	line-height: 1.4;
	padding: 0.95rem 1rem;
	text-align: left;
	vertical-align: top;
}

.fnbbs-table thead th {
	background: var(--fnbbs-heading-bg);
	color: var(--fnbbs-heading-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.fnbbs-table th:first-child {
	left: 0;
	min-width: 12rem;
	position: sticky;
	z-index: 1;
}

.fnbbs-table thead th:first-child {
	z-index: 2;
}

.fnbbs-table tbody th {
	background: var(--fnbbs-surface);
	font-weight: 700;
}

.fnbbs-table tbody tr:nth-child(even) > * {
	background: var(--fnbbs-surface-alt);
}

.fnbbs-table tbody tr:hover > * {
	background: var(--fnbbs-surface-hover);
}

.fnbbs-table tbody tr:last-child > * {
	border-bottom: 0;
}

.fnbbs-table td {
	overflow-wrap: anywhere;
}

.fnbbs-table tbody td:nth-child(2) {
	overflow-wrap: normal;
	white-space: nowrap;
}

.fnbbs-table td code {
	background: var(--fnbbs-code-bg);
	border-radius: 0.3rem;
	color: var(--fnbbs-code-ink);
	font-size: 0.92em;
	padding: 0.12rem 0.3rem;
}

.fnbbs-scroll-hint {
	display: none;
}

.fnbbs-open {
	background: transparent;
	border: 0;
	border-radius: var(--fnbbs-action-radius);
	box-shadow: none;
	color: var(--fnbbs-accent);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 750;
	height: auto;
	line-height: 1.4;
	padding: 0.15rem 0.35rem;
	text-align: left;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fnbbs-shell .fnbbs-open:is(:hover, :focus, :focus-visible) {
	background: var(--fnbbs-link-hover);
	color: var(--fnbbs-open-hover);
}

.fnbbs-facts {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}

.fnbbs-facts div {
	min-width: 0;
}

.fnbbs-facts dt {
	color: var(--fnbbs-muted);
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	margin-bottom: 0.1rem;
	text-transform: uppercase;
}

.fnbbs-facts dd {
	font-size: 0.96rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.fnbbs-facts code {
	background: var(--fnbbs-code-bg);
	border-radius: 0.3rem;
	color: var(--fnbbs-code-ink);
	font-size: 0.92em;
	padding: 0.12rem 0.3rem;
}

.fnbbs-empty {
	background: var(--fnbbs-surface);
	border: 1px dashed var(--fnbbs-soft-line);
	border-radius: 1rem;
	color: var(--fnbbs-muted);
	padding: 2rem;
}

.fnbbs-dialog {
	background: var(--fnbbs-surface);
	border: 0;
	border-radius: 1.1rem;
	box-shadow: 0 25px 75px rgb(0 0 0 / 30%);
	color: var(--fnbbs-ink);
	max-height: min(85vh, 50rem);
	max-width: min(39rem, calc(100vw - 1.5rem));
	padding: 0;
	width: 100%;
}

.fnbbs-dialog:not([open]) {
	display: none !important;
}

.fnbbs-dialog[open] {
	display: block;
	position: fixed;
	z-index: 1000000;
}

.fnbbs-dialog.fnbbs-fallback[open] {
	bottom: auto;
	left: 50%;
	margin: 0;
	right: auto;
	top: 50%;
	transform: translate(-50%, -50%);
}

.fnbbs-dialog::backdrop {
	background: rgb(0 0 0 / 70%);
}

.fnbbs-dialog-scrim {
	background: rgb(0 0 0 / 70%);
	inset: 0;
	position: fixed;
	z-index: 999999;
}

body.fnbbs-fallback-open {
	overflow: hidden;
}

.fnbbs-dialog-body {
	max-height: inherit;
	overflow-y: auto;
	padding: clamp(1.25rem, 4vw, 2rem);
}

.fnbbs-dialog h2 {
	color: var(--fnbbs-heading-ink);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	font-weight: 800;
	line-height: 1.2;
	margin: 0.3rem 2rem 1.25rem 0;
}

.fnbbs-close {
	background: var(--fnbbs-close-bg);
	border: 0;
	border-radius: var(--fnbbs-action-radius);
	box-shadow: none;
	color: var(--fnbbs-close-ink);
	cursor: pointer;
	display: grid;
	float: right;
	font-size: 1.5rem;
	height: 2.3rem;
	line-height: 1;
	padding: 0;
	place-items: center;
	text-align: center;
	width: 2.3rem;
}

.fnbbs-dialog .fnbbs-close:hover,
.fnbbs-dialog .fnbbs-close:focus,
.fnbbs-dialog .fnbbs-close:focus-visible {
	background: var(--fnbbs-close-hover);
	box-shadow: none;
	color: var(--fnbbs-close-ink);
	outline: none;
}

.fnbbs-dialog .fnbbs-facts {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fnbbs-detail-section {
	border-top: 1px solid var(--fnbbs-line);
	margin-top: 1.4rem;
	padding-top: 1.1rem;
}

.fnbbs-detail-section h3 {
	font-size: 1rem;
	margin: 0 0 0.4rem;
}

.fnbbs-detail-section p {
	margin: 0;
	white-space: normal;
}

.fnbbs-detail-section a {
	overflow-wrap: anywhere;
}

.fnbbs-guide-content {
	display: grid;
	gap: 1rem;
	max-width: 52rem;
}

.fnbbs-guide-content section {
	background: var(--fnbbs-surface);
	border: 1px solid var(--fnbbs-line);
	border-radius: 1rem;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.fnbbs-guide-content h2 {
	font-size: 1.35rem;
	margin: 0 0 0.7rem;
}

.fnbbs-guide-content p {
	margin: 0.7rem 0;
}

.fnbbs-endpoints {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.fnbbs-endpoints li + li {
	margin-top: 0.5rem;
}

.fnbbs-endpoints code,
.fnbbs-guide-content pre {
	overflow-wrap: anywhere;
}

.fnbbs-guide-content pre {
	background: var(--fnbbs-pre-bg);
	border-radius: 0.7rem;
	color: var(--fnbbs-pre-ink);
	overflow-x: auto;
	padding: 1rem;
	white-space: pre-wrap;
}

.fnbbs-request-content {
	background: var(--fnbbs-surface);
	border: 1px solid var(--fnbbs-line);
	border-radius: 1rem;
	max-width: 52rem;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.fnbbs-request-content > p {
	margin: 0;
}

@media (max-width: 640px) {
	.fnbbs-hero {
		align-items: flex-start;
		flex-direction: column;
	}

	.fnbbs-guide-link,
	.fnbbs-hero-actions,
	.fnbbs-filter-field,
	.fnbbs-filter-button {
		width: 100%;
	}

	.fnbbs-guide-link {
		text-align: center;
	}

	.fnbbs-hero-actions {
		flex-direction: column;
	}

	.fnbbs-filter-field {
		flex-basis: 100%;
	}

	.fnbbs-scroll-hint {
		color: var(--fnbbs-muted);
		display: block;
		font-size: 0.85rem;
		margin: 0 0 0.6rem;
	}

	.fnbbs-dialog .fnbbs-facts {
		grid-template-columns: 1fr;
	}
}