/* Tools Blocks - clean editorial style, not e-commerce.
   Color layer reads Blocksy's theme variables first (border, text, heading,
   button, palette) and keeps the original values only as fallbacks, so the
   same file adapts to the site's dark/light palette automatically.
   Layout uses CSS logical properties (inline-start/end, block-start/end)
   instead of left/right everywhere, so this exact file is correct in RTL
   and LTR - no [dir="rtl"] overrides are needed anywhere. */

:root {
	--tb-radius: 12px;
	--tb-border: var(--theme-border-color, #e5e5e5);
	--tb-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--tb-text: var(--theme-text-color, #1a1a1a);
	--tb-text-muted: color-mix(in srgb, var(--theme-text-color, #1a1a1a) 72%, transparent);
	--tb-primary: var(--theme-button-background-initial-color, var(--theme-palette-color-1, #1a1a1a));
	--tb-primary-hover: var(--theme-button-background-hover-color, var(--theme-palette-color-2, #444444));
	--tb-primary-contrast: var(--theme-button-text-initial-color, #fff);
	--tb-surface: var(--theme-palette-color-8, #fff);
	--tb-columns: 3;
	--tb-visible: 3;
}

.tb-card {
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: start;
	height: 100%;
}
.tb-card__image img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.tb-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tb-card__category { font-size: .8rem; color: var(--tb-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.tb-card__title { font-size: 1.05rem; margin: 0; line-height: 1.4; color: var(--theme-headings-color, inherit); }
.tb-card__title a { color: inherit; text-decoration: none; }
.tb-card__desc { font-size: .9rem; color: var(--tb-text-muted); line-height: 1.6; }
.tb-card__actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: .5rem; flex-wrap: wrap; }

.tb-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 8px;
	font-size: .85rem;
	text-decoration: none;
	border: 1px solid var(--tb-border);
}
.tb-btn--primary { background: var(--tb-primary); color: var(--tb-primary-contrast); border-color: var(--tb-primary); }
.tb-btn--primary:hover { background: var(--tb-primary-hover); color: var(--tb-primary-contrast); border-color: var(--tb-primary-hover); }
.tb-btn--secondary { background: transparent; color: var(--tb-text); }

.tb-badges { list-style: none; display: flex; gap: .4rem; padding-inline-start: 0; margin: 0; }
.tb-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	color: var(--tb-text);
	font-size: .85rem;
	position: relative;
	cursor: default;
}
.tb-badge::after {
	content: attr(data-tooltip);
	position: absolute;
	inset-block-end: 130%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: var(--theme-text-color, #1a1a1a);
	color: var(--theme-palette-color-8, #fff);
	border: 1px solid var(--tb-border);
	font-size: .7rem;
	white-space: nowrap;
	padding: .25rem .5rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
}
.tb-badge:hover::after,
.tb-badge:focus::after { opacity: 1; }

.tb-grid {
	display: grid;
	grid-template-columns: repeat(var(--tb-columns), 1fr);
	gap: 1.25rem;
}
@media (max-width: 782px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }

.tb-carousel { position: relative; }
.tb-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tb-carousel__track { scroll-behavior: smooth; }
	.tb-badge::after { transition: opacity .15s ease; }
}
.tb-carousel__slide {
	flex: 0 0 calc((100% - (var(--tb-visible) - 1) * 1.25rem) / var(--tb-visible));
	scroll-snap-align: start;
}
@media (max-width: 782px) { .tb-carousel__slide { flex-basis: 80%; } }

@media (prefers-reduced-motion: reduce) {
	.tb-carousel__track { scroll-behavior: auto; scroll-snap-type: none; }
}

.tb-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-surface);
	color: var(--tb-text);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}
.tb-carousel__arrow--prev { inset-inline-start: -18px; }
.tb-carousel__arrow--next { inset-inline-end: -18px; }

.tb-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-block-start: .75rem; }
.tb-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--tb-border); padding: 0; cursor: pointer; }
.tb-carousel__dots button.is-active { background: var(--tb-primary); }

.tb-compare__table { width: 100%; border-collapse: collapse; text-align: start; }
.tb-compare__table th, .tb-compare__table td { border: 1px solid var(--tb-border); padding: .75rem; vertical-align: top; }
.tb-compare__table thead th { background: color-mix(in srgb, var(--tb-border, #e5e5e5) 45%, transparent); }

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

/* tools filter chips (v1.0.2): count pill + child chips */
.tb-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:0 .45em;border-radius:999px;font-size:11px;line-height:1.6;margin-inline-start:.45em;background:color-mix(in srgb,currentColor 10%,transparent);opacity:.85}
/* Tools Blocks - clean editorial style, not e-commerce.
   Color layer reads Blocksy's theme variables first (border, text, heading,
   button, palette) and keeps the original values only as fallbacks, so the
   same file adapts to the site's dark/light palette automatically.
   Layout uses CSS logical properties (inline-start/end, block-start/end)
   instead of left/right everywhere, so this exact file is correct in RTL
   and LTR - no [dir="rtl"] overrides are needed anywhere. */

:root {
	--tb-radius: 12px;
	--tb-border: var(--theme-border-color, #e5e5e5);
	--tb-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--tb-text: var(--theme-text-color, #1a1a1a);
	--tb-text-muted: color-mix(in srgb, var(--theme-text-color, #1a1a1a) 72%, transparent);
	--tb-primary: var(--theme-button-background-initial-color, var(--theme-palette-color-1, #1a1a1a));
	--tb-primary-hover: var(--theme-button-background-hover-color, var(--theme-palette-color-2, #444444));
	--tb-primary-contrast: var(--theme-button-text-initial-color, #fff);
	--tb-surface: var(--theme-palette-color-8, #fff);
	--tb-columns: 3;
	--tb-visible: 3;
}

.tb-card {
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: start;
	height: 100%;
}
.tb-card__image img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.tb-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tb-card__category { font-size: .8rem; color: var(--tb-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.tb-card__title { font-size: 1.05rem; margin: 0; line-height: 1.4; color: var(--theme-headings-color, inherit); }
.tb-card__title a { color: inherit; text-decoration: none; }
.tb-card__desc { font-size: .9rem; color: var(--tb-text-muted); line-height: 1.6; }
.tb-card__actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: .5rem; flex-wrap: wrap; }

.tb-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 8px;
	font-size: .85rem;
	text-decoration: none;
	border: 1px solid var(--tb-border);
}
.tb-btn--primary { background: var(--tb-primary); color: var(--tb-primary-contrast); border-color: var(--tb-primary); }
.tb-btn--primary:hover { background: var(--tb-primary-hover); color: var(--tb-primary-contrast); border-color: var(--tb-primary-hover); }
.tb-btn--secondary { background: transparent; color: var(--tb-text); }

.tb-badges { list-style: none; display: flex; gap: .4rem; padding-inline-start: 0; margin: 0; }
.tb-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	color: var(--tb-text);
	font-size: .85rem;
	position: relative;
	cursor: default;
}
.tb-badge::after {
	content: attr(data-tooltip);
	position: absolute;
	inset-block-end: 130%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: var(--theme-text-color, #1a1a1a);
	color: var(--theme-palette-color-8, #fff);
	border: 1px solid var(--tb-border);
	font-size: .7rem;
	white-space: nowrap;
	padding: .25rem .5rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
}
.tb-badge:hover::after,
.tb-badge:focus::after { opacity: 1; }

.tb-grid {
	display: grid;
	grid-template-columns: repeat(var(--tb-columns), 1fr);
	gap: 1.25rem;
}
@media (max-width: 782px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }

.tb-carousel { position: relative; }
.tb-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tb-carousel__track { scroll-behavior: smooth; }
	.tb-badge::after { transition: opacity .15s ease; }
}
.tb-carousel__slide {
	flex: 0 0 calc((100% - (var(--tb-visible) - 1) * 1.25rem) / var(--tb-visible));
	scroll-snap-align: start;
}
@media (max-width: 782px) { .tb-carousel__slide { flex-basis: 80%; } }

@media (prefers-reduced-motion: reduce) {
	.tb-carousel__track { scroll-behavior: auto; scroll-snap-type: none; }
}

.tb-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-surface);
	color: var(--tb-text);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}
.tb-carousel__arrow--prev { inset-inline-start: -18px; }
.tb-carousel__arrow--next { inset-inline-end: -18px; }

.tb-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-block-start: .75rem; }
.tb-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--tb-border); padding: 0; cursor: pointer; }
.tb-carousel__dots button.is-active { background: var(--tb-primary); }

.tb-compare__table { width: 100%; border-collapse: collapse; text-align: start; }
.tb-compare__table th, .tb-compare__table td { border: 1px solid var(--tb-border); padding: .75rem; vertical-align: top; }
.tb-compare__table thead th { background: color-mix(in srgb, var(--tb-border, #e5e5e5) 45%, transparent); }

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

/* tools filter chips (v1.0.2): count pill + child chips */
.tb-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:0 .45em;border-radius:999px;font-size:11px;line-height:1.6;margin-inline-start:.45em;background:color-mix(in srgb,currentColor 10%,transparent);opacity:.85}

/* theme chips row (v1.0.3) */
.tb-filter-themes{margin-block-start:-8px}
.tb-filter-themes a{opacity:.75;font-size:.95em}
.tb-filter-themes a.active{opacity:1}
/* Tools Blocks - clean editorial style, not e-commerce.
   Color layer reads Blocksy's theme variables first (border, text, heading,
   button, palette) and keeps the original values only as fallbacks, so the
   same file adapts to the site's dark/light palette automatically.
   Layout uses CSS logical properties (inline-start/end, block-start/end)
   instead of left/right everywhere, so this exact file is correct in RTL
   and LTR - no [dir="rtl"] overrides are needed anywhere. */

:root {
	--tb-radius: 12px;
	--tb-border: var(--theme-border-color, #e5e5e5);
	--tb-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--tb-text: var(--theme-text-color, #1a1a1a);
	--tb-text-muted: color-mix(in srgb, var(--theme-text-color, #1a1a1a) 72%, transparent);
	--tb-primary: var(--theme-button-background-initial-color, var(--theme-palette-color-1, #1a1a1a));
	--tb-primary-hover: var(--theme-button-background-hover-color, var(--theme-palette-color-2, #444444));
	--tb-primary-contrast: var(--theme-button-text-initial-color, #fff);
	--tb-surface: var(--theme-palette-color-8, #fff);
	--tb-columns: 3;
	--tb-visible: 3;
}

.tb-card {
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: start;
	height: 100%;
}
.tb-card__image img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.tb-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tb-card__category { font-size: .8rem; color: var(--tb-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.tb-card__title { font-size: 1.05rem; margin: 0; line-height: 1.4; color: var(--theme-headings-color, inherit); }
.tb-card__title a { color: inherit; text-decoration: none; }
.tb-card__desc { font-size: .9rem; color: var(--tb-text-muted); line-height: 1.6; }
.tb-card__actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: .5rem; flex-wrap: wrap; }

.tb-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 8px;
	font-size: .85rem;
	text-decoration: none;
	border: 1px solid var(--tb-border);
}
.tb-btn--primary { background: var(--tb-primary); color: var(--tb-primary-contrast); border-color: var(--tb-primary); }
.tb-btn--primary:hover { background: var(--tb-primary-hover); color: var(--tb-primary-contrast); border-color: var(--tb-primary-hover); }
.tb-btn--secondary { background: transparent; color: var(--tb-text); }

.tb-badges { list-style: none; display: flex; gap: .4rem; padding-inline-start: 0; margin: 0; }
.tb-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	color: var(--tb-text);
	font-size: .85rem;
	position: relative;
	cursor: default;
}
.tb-badge::after {
	content: attr(data-tooltip);
	position: absolute;
	inset-block-end: 130%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: var(--theme-text-color, #1a1a1a);
	color: var(--theme-palette-color-8, #fff);
	border: 1px solid var(--tb-border);
	font-size: .7rem;
	white-space: nowrap;
	padding: .25rem .5rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
}
.tb-badge:hover::after,
.tb-badge:focus::after { opacity: 1; }

.tb-grid {
	display: grid;
	grid-template-columns: repeat(var(--tb-columns), 1fr);
	gap: 1.25rem;
}
@media (max-width: 782px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }

.tb-carousel { position: relative; }
.tb-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tb-carousel__track { scroll-behavior: smooth; }
	.tb-badge::after { transition: opacity .15s ease; }
}
.tb-carousel__slide {
	flex: 0 0 calc((100% - (var(--tb-visible) - 1) * 1.25rem) / var(--tb-visible));
	scroll-snap-align: start;
}
@media (max-width: 782px) { .tb-carousel__slide { flex-basis: 80%; } }

@media (prefers-reduced-motion: reduce) {
	.tb-carousel__track { scroll-behavior: auto; scroll-snap-type: none; }
}

.tb-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-surface);
	color: var(--tb-text);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}
.tb-carousel__arrow--prev { inset-inline-start: -18px; }
.tb-carousel__arrow--next { inset-inline-end: -18px; }

.tb-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-block-start: .75rem; }
.tb-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--tb-border); padding: 0; cursor: pointer; }
.tb-carousel__dots button.is-active { background: var(--tb-primary); }

.tb-compare__table { width: 100%; border-collapse: collapse; text-align: start; }
.tb-compare__table th, .tb-compare__table td { border: 1px solid var(--tb-border); padding: .75rem; vertical-align: top; }
.tb-compare__table thead th { background: color-mix(in srgb, var(--tb-border, #e5e5e5) 45%, transparent); }

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

/* tools filter chips (v1.0.2): count pill + child chips */
.tb-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:0 .45em;border-radius:999px;font-size:11px;line-height:1.6;margin-inline-start:.45em;background:color-mix(in srgb,currentColor 10%,transparent);opacity:.85}
/* Tools Blocks - clean editorial style, not e-commerce.
   Color layer reads Blocksy's theme variables first (border, text, heading,
   button, palette) and keeps the original values only as fallbacks, so the
   same file adapts to the site's dark/light palette automatically.
   Layout uses CSS logical properties (inline-start/end, block-start/end)
   instead of left/right everywhere, so this exact file is correct in RTL
   and LTR - no [dir="rtl"] overrides are needed anywhere. */

:root {
	--tb-radius: 12px;
	--tb-border: var(--theme-border-color, #e5e5e5);
	--tb-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
	--tb-text: var(--theme-text-color, #1a1a1a);
	--tb-text-muted: color-mix(in srgb, var(--theme-text-color, #1a1a1a) 72%, transparent);
	--tb-primary: var(--theme-button-background-initial-color, var(--theme-palette-color-1, #1a1a1a));
	--tb-primary-hover: var(--theme-button-background-hover-color, var(--theme-palette-color-2, #444444));
	--tb-primary-contrast: var(--theme-button-text-initial-color, #fff);
	--tb-surface: var(--theme-palette-color-8, #fff);
	--tb-columns: 3;
	--tb-visible: 3;
}

.tb-card {
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	border-radius: var(--tb-radius);
	box-shadow: var(--tb-shadow);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-align: start;
	height: 100%;
}
.tb-card__image img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; }
.tb-card__body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tb-card__category { font-size: .8rem; color: var(--tb-text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.tb-card__title { font-size: 1.05rem; margin: 0; line-height: 1.4; color: var(--theme-headings-color, inherit); }
.tb-card__title a { color: inherit; text-decoration: none; }
.tb-card__desc { font-size: .9rem; color: var(--tb-text-muted); line-height: 1.6; }
.tb-card__actions { display: flex; gap: .5rem; margin-block-start: auto; padding-block-start: .5rem; flex-wrap: wrap; }

.tb-btn {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: 8px;
	font-size: .85rem;
	text-decoration: none;
	border: 1px solid var(--tb-border);
}
.tb-btn--primary { background: var(--tb-primary); color: var(--tb-primary-contrast); border-color: var(--tb-primary); }
.tb-btn--primary:hover { background: var(--tb-primary-hover); color: var(--tb-primary-contrast); border-color: var(--tb-primary-hover); }
.tb-btn--secondary { background: transparent; color: var(--tb-text); }

.tb-badges { list-style: none; display: flex; gap: .4rem; padding-inline-start: 0; margin: 0; }
.tb-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tb-surface);
	border: 1px solid var(--tb-border);
	color: var(--tb-text);
	font-size: .85rem;
	position: relative;
	cursor: default;
}
.tb-badge::after {
	content: attr(data-tooltip);
	position: absolute;
	inset-block-end: 130%;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: var(--theme-text-color, #1a1a1a);
	color: var(--theme-palette-color-8, #fff);
	border: 1px solid var(--tb-border);
	font-size: .7rem;
	white-space: nowrap;
	padding: .25rem .5rem;
	border-radius: 6px;
	opacity: 0;
	pointer-events: none;
}
.tb-badge:hover::after,
.tb-badge:focus::after { opacity: 1; }

.tb-grid {
	display: grid;
	grid-template-columns: repeat(var(--tb-columns), 1fr);
	gap: 1.25rem;
}
@media (max-width: 782px) { .tb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tb-grid { grid-template-columns: 1fr; } }

.tb-carousel { position: relative; }
.tb-carousel__track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-block: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
	.tb-carousel__track { scroll-behavior: smooth; }
	.tb-badge::after { transition: opacity .15s ease; }
}
.tb-carousel__slide {
	flex: 0 0 calc((100% - (var(--tb-visible) - 1) * 1.25rem) / var(--tb-visible));
	scroll-snap-align: start;
}
@media (max-width: 782px) { .tb-carousel__slide { flex-basis: 80%; } }

@media (prefers-reduced-motion: reduce) {
	.tb-carousel__track { scroll-behavior: auto; scroll-snap-type: none; }
}

.tb-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--tb-border);
	background: var(--tb-surface);
	color: var(--tb-text);
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
}
.tb-carousel__arrow--prev { inset-inline-start: -18px; }
.tb-carousel__arrow--next { inset-inline-end: -18px; }

.tb-carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-block-start: .75rem; }
.tb-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--tb-border); padding: 0; cursor: pointer; }
.tb-carousel__dots button.is-active { background: var(--tb-primary); }

.tb-compare__table { width: 100%; border-collapse: collapse; text-align: start; }
.tb-compare__table th, .tb-compare__table td { border: 1px solid var(--tb-border); padding: .75rem; vertical-align: top; }
.tb-compare__table thead th { background: color-mix(in srgb, var(--tb-border, #e5e5e5) 45%, transparent); }

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

/* tools filter chips (v1.0.2): count pill + child chips */
.tb-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5em;padding:0 .45em;border-radius:999px;font-size:11px;line-height:1.6;margin-inline-start:.45em;background:color-mix(in srgb,currentColor 10%,transparent);opacity:.85}

/* theme chips row (v1.0.3) */
.tb-filter-themes{margin-block-start:-8px}
.tb-filter-themes a{opacity:.75;font-size:.95em}
.tb-filter-themes a.active{opacity:1}

/* tier list table (v1.0.4) - pastel cycle on the native table block (class: tb-tier-table) */
.tb-tier-table{margin:26px 0}
.tb-tier-table table{border-radius:12px;overflow:hidden;border:1px solid var(--theme-border-color,rgba(128,128,128,.25))}
.tb-tier-table tbody td{vertical-align:middle;font-size:15px}
.tb-tier-table tbody td:first-child{width:1%;white-space:nowrap;min-width:4.5rem;text-align:center;font-weight:800;font-size:18px;letter-spacing:.02em;color:#3a3f44}
.tb-tier-table tbody tr:nth-child(7n+1) td:first-child{background:#ffd0dc}
.tb-tier-table tbody tr:nth-child(7n+2) td:first-child{background:#ffe3c2}
.tb-tier-table tbody tr:nth-child(7n+3) td:first-child{background:#fff2a8}
.tb-tier-table tbody tr:nth-child(7n+4) td:first-child{background:#d5f2dd}
.tb-tier-table tbody tr:nth-child(7n+5) td:first-child{background:#cfe6ff}
.tb-tier-table tbody tr:nth-child(7n+6) td:first-child{background:#e7dcff}
.tb-tier-table tbody tr:nth-child(7n+7) td:first-child{background:#e2e5e8}