/*
 * Flora Fauna Fun turtle tank calculator. Everything is scoped under .ttc.ttc-root: the doubled class (0,2,0) plus one more
 * beats ruki's `.the-post .entry-content p` (0,2,1) and its bare button / input / ul / fieldset / figure / table rules.
 * Only link colours use !important. Variables --ttc-*. No url() anywhere (Autoptimize rewrites it). Animation touches
 * transform and opacity only. No ad markup lives inside the tool.
 */

.ttc.ttc-root {
	--ttc-ink: #0d2f3a;
	--ttc-soft: #476570;
	--ttc-line: #cde0e3;
	--ttc-paper: #f1f8f8;
	--ttc-card: #ffffff;
	--ttc-teal: #0a7c86;
	--ttc-teal-d: #075962;
	--ttc-teal-l: #dff3f4;
	--ttc-aqua: #22b9c8;
	--ttc-deep: #0a3342;
	--ttc-good: #1d7a4d;
	--ttc-good-l: #e4f5ec;
	--ttc-warn: #8a5300;
	--ttc-warn-l: #fff3d6;
	--ttc-title: 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
	--ttc-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	box-sizing: border-box;
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 0 30px;
	padding: 16px;
	font-family: var(--ttc-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ttc-ink);
	background: linear-gradient(180deg, #e6f4f5 0%, #f4faf9 55%, #f8f3e4 100%);
	border: 1px solid var(--ttc-line);
	border-radius: 24px;
	scroll-margin-top: 76px;
	overflow-x: clip;
	container-type: inline-size;
	container-name: ttc;
}
.ttc.ttc-root *,
.ttc.ttc-root *::before,
.ttc.ttc-root *::after {
	box-sizing: border-box;
}
.ttc.ttc-root [hidden] {
	display: none !important;
}

/* plain blocks: undo the theme's margins, list and form styling */
.ttc.ttc-root ul,
.ttc.ttc-root li,
.ttc.ttc-root fieldset,
.ttc.ttc-root legend,
.ttc.ttc-root figure,
.ttc.ttc-root figcaption,
.ttc.ttc-root output,
.ttc.ttc-root label {
	margin: 0;
	padding: 0;
	font-family: var(--ttc-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ttc-ink);
	list-style: none;
	border: 0;
	background: none;
	float: none;
	min-width: 0;
}
.ttc.ttc-root img,
.ttc.ttc-root svg {
	max-width: 100%;
}
.ttc.ttc-root .ttc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* the radios and the checkbox are real inputs, hidden but focusable; the theme floats and pads inputs */
.ttc.ttc-root .ttc-ri {
	position: absolute;
	float: none;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

/* top */
.ttc.ttc-root .ttc-kicker {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ttc-teal-d);
}
.ttc.ttc-root .ttc-title {
	margin: 2px 0 14px;
	font-family: var(--ttc-title);
	font-size: 26px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ttc-deep);
	text-transform: none;
	letter-spacing: 0;
}

/* inputs */
.ttc.ttc-root .ttc-in {
	display: grid;
	gap: 18px;
	padding: 14px;
	background: var(--ttc-card);
	border: 1px solid var(--ttc-line);
	border-radius: 20px;
}
.ttc.ttc-root .ttc-lg {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--ttc-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ttc-deep);
	float: none;
	width: 100%;
}
.ttc.ttc-root .ttc-num {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--ttc-teal);
	border-radius: 50%;
}
.ttc.ttc-root .ttc-help {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.ttc.ttc-root .ttc-cards-more {
	margin-top: 8px;
}
.ttc.ttc-root .ttc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--ttc-paper);
	border: 2px solid var(--ttc-line);
	border-radius: 14px;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.ttc.ttc-root .ttc-card:hover {
	transform: translateY(-2px);
	border-color: #8fc3cb;
}
.ttc.ttc-root .ttc-card.ttc-on {
	border-color: var(--ttc-teal);
	box-shadow: 0 0 0 3px rgba(10, 124, 134, 0.22);
	background: var(--ttc-teal-l);
}
.ttc.ttc-root .ttc-card::after {
	content: '';
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ttc-teal);
	opacity: 0;
	transform: scale(0.4);
	transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ttc.ttc-root .ttc-card::before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 12px;
	right: 13px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	opacity: 0;
	transform: rotate(45deg) scale(0.4);
	transition: opacity 0.18s ease, transform 0.22s ease;
}
.ttc.ttc-root .ttc-card.ttc-on::after {
	opacity: 1;
	transform: scale(1);
}
.ttc.ttc-root .ttc-card.ttc-on::before {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}
.ttc.ttc-root .ttc-art-box {
	display: block;
	width: 100%;
	aspect-ratio: 120 / 84;
	overflow: hidden;
	background: #cfe9ec;
}
.ttc.ttc-root .ttc-art-box svg,
.ttc.ttc-root .ttc-art-box img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
}
.ttc.ttc-root .ttc-card-n {
	display: block;
	min-height: 2.5em;
	padding: 6px 6px 7px;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ttc-ink);
	text-align: center;
	overflow-wrap: anywhere;
}
.ttc.ttc-root .ttc-ri:focus-visible + .ttc-art-box {
	outline: 3px solid #ff9f1c;
	outline-offset: -3px;
}
.ttc.ttc-root .ttc-cards-more:not([hidden]) .ttc-card {
	animation: ttc-in 0.35s ease both;
}
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(2) { animation-delay: 0.03s; }
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(3) { animation-delay: 0.06s; }
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(4) { animation-delay: 0.09s; }
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(5) { animation-delay: 0.12s; }
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(6) { animation-delay: 0.15s; }
.ttc.ttc-root .ttc-cards-more .ttc-card:nth-child(n + 7) { animation-delay: 0.18s; }
@keyframes ttc-in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

.ttc.ttc-root .ttc-link {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 4px;
	padding: 0 4px;
	font-family: var(--ttc-body);
	font-size: 15px;
	font-weight: 800;
	color: var(--ttc-teal-d);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ttc.ttc-root .ttc-link:hover {
	color: var(--ttc-ink);
}

.ttc.ttc-root .ttc-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 22px;
}
.ttc.ttc-root .ttc-fs-sex {
	flex: 1 1 240px;
}
.ttc.ttc-root .ttc-fs-shell {
	flex: 2 1 280px;
}
.ttc.ttc-root .ttc-fs-n {
	flex: 0 0 auto;
}
.ttc.ttc-root .ttc-seg {
	display: flex;
	gap: 2px;
	padding: 4px;
	background: #e3f0f1;
	border-radius: 14px;
}
.ttc.ttc-root .ttc-seg label {
	flex: 1 1 0;
	min-width: 0;
	cursor: pointer;
}
.ttc.ttc-root .ttc-seg span {
	display: block;
	padding: 11px 6px;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	color: var(--ttc-soft);
	border-radius: 10px;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ttc.ttc-root .ttc-seg .ttc-ri:checked + span {
	color: var(--ttc-teal-d);
	background: #fff;
	box-shadow: 0 1px 4px rgba(10, 51, 66, 0.2);
}
.ttc.ttc-root .ttc-seg .ttc-ri:focus-visible + span {
	outline: 3px solid #ff9f1c;
	outline-offset: 1px;
}

.ttc.ttc-root .ttc-fs-shell .ttc-shellout {
	display: inline-block;
	margin-left: 12px;
	font-size: 15px;
	font-weight: 800;
	color: var(--ttc-teal-d);
}
.ttc.ttc-root .ttc-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}
.ttc.ttc-root .ttc-sw {
	position: relative;
	flex: none;
	width: 46px;
	height: 26px;
	background: #b9cfd3;
	border-radius: 99px;
	transition: background 0.2s ease;
}
.ttc.ttc-root .ttc-sw::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
	transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ttc.ttc-root .ttc-ri:checked + .ttc-sw {
	background: var(--ttc-teal);
}
.ttc.ttc-root .ttc-ri:checked + .ttc-sw::after {
	transform: translateX(20px);
}
.ttc.ttc-root .ttc-ri:focus-visible + .ttc-sw {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}

.ttc.ttc-root .ttc-rangebox {
	transition: opacity 0.2s ease;
}
.ttc.ttc-root .ttc-off .ttc-rangebox {
	opacity: 0.45;
}
.ttc.ttc-root .ttc-range {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 32px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
}
.ttc.ttc-root .ttc-range:disabled {
	cursor: default;
}
.ttc.ttc-root .ttc-range::-webkit-slider-runnable-track {
	height: 8px;
	background: linear-gradient(90deg, var(--ttc-teal) var(--ttc-p, 0%), #cfe4e7 var(--ttc-p, 0%));
	border-radius: 99px;
}
.ttc.ttc-root .ttc-range::-moz-range-track {
	height: 8px;
	background: linear-gradient(90deg, var(--ttc-teal) var(--ttc-p, 0%), #cfe4e7 var(--ttc-p, 0%));
	border-radius: 99px;
}
.ttc.ttc-root .ttc-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	margin-top: -9px;
	background: #fff;
	border: 4px solid var(--ttc-teal);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(10, 51, 66, 0.35);
}
.ttc.ttc-root .ttc-range::-moz-range-thumb {
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	background: #fff;
	border: 4px solid var(--ttc-teal);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(10, 51, 66, 0.35);
}
.ttc.ttc-root .ttc-range:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
	border: 0;
	box-shadow: none;
}
.ttc.ttc-root .ttc-ruler {
	position: relative;
	height: 30px;
	margin-top: -2px;
}
.ttc.ttc-root .ttc-tk {
	position: absolute;
	top: 0;
	width: 1px;
	height: 6px;
	background: #8fb0b6;
}
.ttc.ttc-root .ttc-tk-l {
	height: 10px;
	background: var(--ttc-soft);
}
.ttc.ttc-root .ttc-tk i {
	position: absolute;
	top: 12px;
	left: 50%;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	color: var(--ttc-soft);
	transform: translateX(-50%);
}

.ttc.ttc-root .ttc-step {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	background: #e3f0f1;
	border-radius: 16px;
}
.ttc.ttc-root .ttc-sb {
	all: unset;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	font-family: var(--ttc-title);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	color: var(--ttc-teal-d);
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(10, 51, 66, 0.2);
	cursor: pointer;
	transition: transform 0.12s ease, opacity 0.2s ease;
}
.ttc.ttc-root .ttc-sb:active {
	transform: scale(0.94);
}
.ttc.ttc-root .ttc-sb:disabled {
	opacity: 0.35;
	cursor: default;
}
.ttc.ttc-root .ttc-sb:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
.ttc.ttc-root .ttc-nout {
	display: block;
	min-width: 42px;
	font-family: var(--ttc-title);
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: var(--ttc-deep);
}

/* result */
.ttc.ttc-root .ttc-out {
	display: grid;
	gap: 14px;
	margin-top: 16px;
}
.ttc.ttc-root .ttc-res {
	min-width: 0;
	display: grid;
	gap: 10px;
	align-content: start;
}
.ttc.ttc-root .ttc-head {
	min-height: 2.25em;
	font-family: var(--ttc-title);
	font-size: 31px;
	font-weight: 600;
	line-height: 1.12;
	color: var(--ttc-deep);
	font-variant-numeric: tabular-nums;
}
.ttc.ttc-root .ttc-bn {
	color: var(--ttc-teal);
}
.ttc.ttc-root .ttc-sub {
	font-size: 17px;
	line-height: 1.45;
	color: var(--ttc-ink);
}
.ttc.ttc-root .ttc-note {
	display: grid;
	gap: 4px;
}
.ttc.ttc-root .ttc-note-l {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-opts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.ttc.ttc-root .ttc-opts.ttc-one {
	grid-template-columns: 1fr;
}
.ttc.ttc-root .ttc-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	padding: 10px 12px;
	cursor: pointer;
	background: #fff;
	border: 2px solid var(--ttc-line);
	border-radius: 14px;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.ttc.ttc-root .ttc-opt:hover {
	border-color: #8fc3cb;
}
.ttc.ttc-root .ttc-opt.ttc-on {
	background: var(--ttc-teal-l);
	border-color: var(--ttc-teal);
	box-shadow: 0 0 0 3px rgba(10, 124, 134, 0.18);
}
.ttc.ttc-root .ttc-opt-off {
	cursor: default;
	background: transparent;
	border-style: dashed;
}
.ttc.ttc-root .ttc-opt-off:hover {
	border-color: var(--ttc-line);
}
.ttc.ttc-root .ttc-opt-k {
	font-size: 13px;
	font-weight: 800;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-opt-n {
	font-family: var(--ttc-title);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ttc-deep);
}
.ttc.ttc-root .ttc-opt-d {
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-opt:has(.ttc-ri:focus-visible) {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}

.ttc.ttc-root .ttc-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}
.ttc.ttc-root .ttc-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--ttc-line);
	border-radius: 14px;
}
.ttc.ttc-root .ttc-stat-k {
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-stat-v {
	font-family: var(--ttc-title);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ttc-deep);
}
.ttc.ttc-root .ttc-stat-d {
	display: none;
	font-size: 12px;
	line-height: 1.3;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-pop .ttc-stat {
	animation: ttc-pop 0.45s ease both;
}
.ttc.ttc-root .ttc-pop .ttc-stat:nth-child(2) { animation-delay: 0.06s; }
.ttc.ttc-root .ttc-pop .ttc-stat:nth-child(3) { animation-delay: 0.12s; }
@keyframes ttc-pop {
	0% { opacity: 0.4; transform: translateY(6px) scale(0.97); }
	100% { opacity: 1; transform: none; }
}

/* scene */
.ttc.ttc-root .ttc-scene {
	min-width: 0;
	overflow: hidden;
	background: #e6f4f5;
	border: 1px solid var(--ttc-line);
	border-radius: 20px;
}
.ttc.ttc-root .ttc-svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	aspect-ratio: 640 / 380;
	overflow: hidden;
}
.ttc.ttc-root .ttc-cap {
	padding: 6px 14px 10px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--ttc-soft);
	text-align: center;
	background: #f4faf9;
}
.ttc.ttc-root .ttc-wlv {
	transition: transform 0.9s cubic-bezier(0.34, 1.45, 0.5, 1);
}
.ttc.ttc-root .ttc-wv1 { animation: ttc-wv 5.5s linear infinite; }
.ttc.ttc-root .ttc-wv2 { animation: ttc-wv 3.8s linear infinite reverse; }
@keyframes ttc-wv {
	from { transform: translateX(0); }
	to { transform: translateX(calc(var(--wp) * -1)); }
}
.ttc.ttc-root .ttc-ray { animation: ttc-ray 6s ease-in-out infinite alternate; }
.ttc.ttc-root .ttc-ray2 { animation-delay: -2s; animation-duration: 7.5s; }
.ttc.ttc-root .ttc-ray3 { animation-delay: -4s; animation-duration: 5s; }
@keyframes ttc-ray {
	from { opacity: 0.25; }
	to { opacity: 0.85; }
}
.ttc.ttc-root .ttc-bub {
	fill: #fff;
	fill-opacity: 0.75;
	animation: ttc-bub 5s ease-in infinite;
}
@keyframes ttc-bub {
	0% { transform: translateY(0); opacity: 0; }
	12% { opacity: 0.9; }
	100% { transform: translateY(calc(var(--rise) * -1)); opacity: 0; }
}
.ttc.ttc-root .ttc-cone {
	opacity: 0.4;
	transition: opacity 0.9s ease;
}
.ttc.ttc-root .ttc-basking .ttc-cone {
	opacity: 0.95;
}
.ttc.ttc-root .ttc-lg-ph { display: none; }
.ttc.ttc-root .ttc-scene .ttc-lg {
	animation: ttc-pad 1.15s ease-in-out infinite alternate;
	transform-origin: 0 0;
}
.ttc.ttc-root .ttc-scene .ttc-walk .ttc-lg {
	animation-name: ttc-step;
	animation-duration: 0.8s;
}
@keyframes ttc-pad {
	from { transform: rotate(-26deg); }
	to { transform: rotate(30deg); }
}
@keyframes ttc-step {
	from { transform: rotate(-14deg); }
	to { transform: rotate(16deg); }
}
.ttc.ttc-root .ttc-scene .ttc-hd {
	animation: ttc-bob 3.4s ease-in-out infinite;
}
@keyframes ttc-bob {
	0%, 100% { transform: translateY(-1.2px); }
	50% { transform: translateY(1.6px); }
}
.ttc.ttc-root .ttc-basking .ttc-tl:first-child .ttc-lg {
	animation-play-state: paused;
}
.ttc.ttc-root .ttc-tl,
.ttc.ttc-root .ttc-tf {
	will-change: transform;
}
.ttc.ttc-root .ttc-tf {
	transition: none;
}
.ttc.ttc-root .ttc-leaf {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: ttc-sway 4.2s ease-in-out infinite alternate;
}
@keyframes ttc-sway {
	from { transform: rotate(-5deg); }
	to { transform: rotate(6deg); }
}
.ttc.ttc-root .ttc-gh {
	transition: opacity 0.4s ease;
}
.ttc.ttc-root .ttc-paused * {
	animation-play-state: paused !important;
}

.ttc.ttc-root .ttc-today {
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.4;
	background: var(--ttc-good-l);
	border-left: 4px solid var(--ttc-good);
	border-radius: 12px;
}
.ttc.ttc-root .ttc-today-k {
	font-weight: 800;
	color: var(--ttc-good);
}
.ttc.ttc-root .ttc-warns {
	display: grid;
	gap: 6px;
}
.ttc.ttc-root .ttc-warn {
	padding: 8px 12px;
	font-size: 14.5px;
	line-height: 1.4;
	color: #5c3900;
	background: var(--ttc-warn-l);
	border-left: 4px solid var(--ttc-warn);
	border-radius: 10px;
}

/* product rows */
.ttc.ttc-root.ttc-has-prod .ttc-prod {
	min-height: 330px;
}
.ttc.ttc-root .ttc-sec {
	font-family: var(--ttc-title);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ttc-deep);
}
.ttc.ttc-root .ttc-sec-s {
	margin: 2px 0 8px;
	font-size: 14px;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-prodlist {
	display: grid;
	gap: 8px;
}
.ttc.ttc-root .ttc-pr {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 8px 12px;
	align-items: center;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--ttc-line);
	border-radius: 14px;
	animation: ttc-in 0.35s ease both;
}
.ttc.ttc-root .ttc-pr-img {
	display: block;
	width: 64px;
	height: 64px;
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
}
.ttc.ttc-root .ttc-pr-img img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
}
.ttc.ttc-root .ttc-pr-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ttc.ttc-root .ttc-pr-name {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--ttc-ink);
}
.ttc.ttc-root .ttc-pr-meta {
	font-size: 13px;
	line-height: 1.3;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-pr-meta i {
	margin-left: 8px;
	padding: 1px 8px;
	font-size: 12px;
	font-style: normal;
	font-weight: 800;
	color: var(--ttc-teal-d);
	background: var(--ttc-teal-l);
	border-radius: 99px;
}
.ttc.ttc-root .ttc-pr-a {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	font-size: 15px;
	font-weight: 800;
	color: #fff !important;
	text-decoration: none !important;
	background: var(--ttc-teal-d);
	border-radius: 999px;
}
.ttc.ttc-root .ttc-pr-a:hover {
	background: var(--ttc-ink);
}
.ttc.ttc-root .ttc-pr-a:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
.ttc.ttc-root .ttc-prodnote {
	margin-top: 8px;
	font-size: 14px;
	color: var(--ttc-warn);
}

/* actions */
.ttc.ttc-root .ttc-acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.ttc.ttc-root .ttc-btn {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	font-family: var(--ttc-body);
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	text-align: center;
	color: var(--ttc-teal-d);
	background: #fff;
	border: 2px solid var(--ttc-teal);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.ttc.ttc-root .ttc-btn:hover {
	background: var(--ttc-teal-l);
}
.ttc.ttc-root .ttc-btn:active {
	transform: scale(0.97);
}
.ttc.ttc-root .ttc-btn-main {
	color: #fff;
	background: var(--ttc-teal);
}
.ttc.ttc-root .ttc-btn-main:hover {
	color: #fff;
	background: var(--ttc-teal-d);
}
.ttc.ttc-root .ttc-btn:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
.ttc.ttc-root .ttc-sharemsg {
	font-size: 14px;
	font-weight: 800;
	color: var(--ttc-good);
}
.ttc.ttc-root .ttc-credits {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ttc-soft);
}
.ttc.ttc-root .ttc-credits summary {
	display: list-item;
	min-height: 32px;
	padding: 6px 0;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.4;
	color: var(--ttc-soft);
	cursor: pointer;
}
.ttc.ttc-root .ttc-credits summary:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
.ttc.ttc-root .ttc-credits-l {
	padding: 2px 0 4px;
	font-size: 11.5px;
	line-height: 1.45;
}
.ttc.ttc-root .ttc-credits a {
	color: var(--ttc-soft) !important;
	text-decoration: underline !important;
}
.ttc.ttc-root .ttc-res {
	scroll-margin-top: 84px;
}

/* wide: inputs across, result beside the scene */
@container ttc (min-width: 700px) {
	.ttc.ttc-root { padding: 22px; }
	.ttc.ttc-root .ttc-title { font-size: 32px; }
	.ttc.ttc-root .ttc-in { padding: 18px 20px; }
	.ttc.ttc-root .ttc-cards { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.ttc.ttc-root .ttc-cards-more { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.ttc.ttc-root .ttc-out { grid-template-columns: minmax(250px, 0.78fr) minmax(0, 1.5fr); align-items: start; gap: 18px; }
	.ttc.ttc-root .ttc-out > * { grid-column: 1 / -1; }
	.ttc.ttc-root .ttc-out > .ttc-res { grid-column: 1; grid-row: 1 / span 2; }
	.ttc.ttc-root .ttc-out > .ttc-scene { grid-column: 2; grid-row: 1; }
	.ttc.ttc-root .ttc-out > .ttc-statw { grid-column: 2; grid-row: 2; }
	.ttc.ttc-root .ttc-head { font-size: 34px; min-height: 0; }
	.ttc.ttc-root .ttc-opts { grid-template-columns: 1fr; }
	.ttc.ttc-root .ttc-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
	.ttc.ttc-root .ttc-opt-d { grid-column: 1 / -1; }
	.ttc.ttc-root .ttc-stat-d { display: block; }
	.ttc.ttc-root .ttc-stat-v { font-size: 20px; }
	.ttc.ttc-root .ttc-prodlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ttc.ttc-root .ttc-pr { grid-template-columns: 56px minmax(0, 1fr); }
	.ttc.ttc-root.ttc-has-prod .ttc-prod { min-height: 210px; }
}
@container ttc (min-width: 980px) {
	.ttc.ttc-root .ttc-out { grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.6fr); }
}
/* phones and other narrow spots: the common species are one swipeable row, with the next card cut off as the hint */
@container ttc (max-width: 560px) {
	.ttc.ttc-root .ttc-cards:not(.ttc-cards-more) {
		display: flex;
		gap: 8px;
		margin: -4px -4px 0;
		padding: 4px 4px 8px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 4px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
	.ttc.ttc-root .ttc-cards:not(.ttc-cards-more) .ttc-card {
		flex: 0 0 36%;
		scroll-snap-align: start;
	}
}
@container ttc (max-width: 460px) {
	.ttc.ttc-root { padding: 12px; border-radius: 20px; }
	.ttc.ttc-root .ttc-in { padding: 12px; }
	.ttc.ttc-root .ttc-head { font-size: 28px; }
	.ttc.ttc-root .ttc-stat-v { font-size: 16px; }
	.ttc.ttc-root .ttc-opt-n { font-size: 19px; }
}

/* the size table (outside the tool) */
.entry-content .ttc-tblwrap {
	max-width: 100%;
	margin: 0 0 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #cde0e3;
	border-radius: 14px;
}
.entry-content .ttc-tblwrap:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
.entry-content .ttc-tblwrap .ttc-tbl {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.35;
}
.entry-content .ttc-tblwrap .ttc-tbl caption {
	padding: 10px 12px;
	font-weight: 800;
	text-align: left;
	color: #0a3342;
}
.entry-content .ttc-tblwrap .ttc-tbl th,
.entry-content .ttc-tblwrap .ttc-tbl td {
	padding: 9px 12px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-top: 1px solid #cde0e3;
}
.entry-content .ttc-tblwrap .ttc-tbl thead th {
	font-size: 13px;
	color: #fff;
	background: #075962;
}
.entry-content .ttc-tblwrap .ttc-tbl tbody th {
	font-weight: 800;
	color: #0d2f3a;
}
.entry-content .ttc-tblwrap .ttc-tbl tbody tr:nth-child(even) th,
.entry-content .ttc-tblwrap .ttc-tbl tbody tr:nth-child(even) td {
	background: #f1f8f8;
}
.entry-content .ttc-tbl-note {
	font-size: 14px;
	color: #476570;
}

@media (prefers-reduced-motion: reduce) {
	.ttc.ttc-root *,
	.ttc.ttc-root *::before,
	.ttc.ttc-root *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* phones: the theme leaves about 45px a side; take back 22 so the species cards have room (checked for overflow in the browser gate) */
@media (max-width: 600px) {
	.ttc.ttc-root {
		width: calc(100% + 44px);
		max-width: none;
		margin-left: -22px;
		margin-right: -22px;
	}
}

/* the phone result bar: a child of <body>, so it carries its own colours and doubled class */
.ttc-bar.ttc-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 56px;
	max-height: 56px;
	margin: 0;
	padding: 0 14px;
	color: #fff;
	background: #0a3342;
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.28);
	transform: translateY(100%);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.ttc-bar.ttc-bar[hidden] {
	display: none !important;
}
.ttc-bar.ttc-bar.ttc-bar-on {
	transform: none;
	opacity: 1;
}
.ttc-bar.ttc-bar .ttc-bar-t {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	font-family: 'Fredoka', 'Nunito Sans', system-ui, sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: #fff;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ttc-bar.ttc-bar .ttc-bar-b {
	all: unset;
	box-sizing: border-box;
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 18px;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #075962;
	background: #fff;
	border-radius: 999px;
	cursor: pointer;
}
.ttc-bar.ttc-bar .ttc-bar-b:focus-visible {
	outline: 3px solid #ff9f1c;
	outline-offset: 2px;
}
@media (min-width: 601px) {
	.ttc-bar.ttc-bar { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.ttc-bar.ttc-bar { transition: none; }
}