/* =========================================
   TuCuatro Songs – Standalone Tuner App
   Shortcode: [tucuatro_tuner instrument="cuatro"]
   Version: 1.4.8 instrument mockup refresh
   ========================================= */
.tucuatro-tuner-wrap {
	container-type: inline-size;
	margin: clamp(34px, 5vw, 64px) auto clamp(42px, 6vw, 72px);
	max-width: 1240px;
	width: min(1240px, calc(100vw - 48px));
}

.tucuatro-tuner-app {
	--tc-tuner-accent: #ff9f1c;
	--tc-tuner-accent-2: #ffb74a;
	--tc-tuner-card: #070707;
	--tc-tuner-text: #ffffff;
	--tc-tuner-muted: rgba(255, 255, 255, 0.68);
	--tc-tuner-instrument-size: 88% auto;
	--tc-tuner-instrument-position: 45% 48%;
	background:
		radial-gradient(circle at 77% 43%, rgba(255, 159, 28, 0.26), transparent 27%),
		radial-gradient(circle at 60% 54%, rgba(138, 79, 36, 0.24), transparent 31%),
		linear-gradient(90deg, rgba(0, 0, 0, 0.99), rgba(12, 11, 9, 0.98) 56%, rgba(2, 2, 2, 0.99)),
		var(--tc-tuner-card);
	border: 2px solid rgba(255, 255, 255, 0.24);
	border-radius: 24px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(255,255,255,.08);
	box-sizing: border-box;
	color: var(--tc-tuner-text);
	height: clamp(310px, 28.7vw, 360px);
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.tucuatro-tuner-app::before {
	background-image: var(--tc-tuner-instrument-image);
	background-position: var(--tc-tuner-instrument-position);
	background-repeat: no-repeat;
	background-size: var(--tc-tuner-instrument-size);
	content: "";
	filter: drop-shadow(0 24px 32px rgba(0,0,0,.62));
	inset: 0;
	opacity: .96;
	position: absolute;
	z-index: 1;
}

.tucuatro-tuner-app::after {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.20), transparent 32%, rgba(0, 0, 0, 0.46)),
		linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 44%, rgba(0, 0, 0, 0.62));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.tucuatro-tuner-app__copy {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.tucuatro-tuner-string {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	height: clamp(68px, 6.3vw, 86px);
	left: 72%;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: clamp(68px, 6.3vw, 86px);
	z-index: 4;
}

.tucuatro-tuner-string__line {
	display: none;
}

.tucuatro-tuner-string__peg {
	background:
		radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.22), transparent 18%),
		radial-gradient(circle at 48% 46%, rgba(255, 159, 28, 0.20), rgba(25, 25, 24, 0.92) 59%, rgba(3, 3, 3, 0.98));
	border: 2px solid rgba(255, 159, 28, .92);
	border-radius: 999px;
	box-shadow: 0 0 0 8px rgba(255, 159, 28, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 14px 28px rgba(0, 0, 0, 0.52);
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	width: 100%;
}

.tucuatro-tuner-string__peg::before {
	border-color: transparent transparent transparent var(--tc-tuner-accent);
	border-style: solid;
	border-width: clamp(13px, 1.25vw, 17px) 0 clamp(13px, 1.25vw, 17px) clamp(22px, 2.05vw, 29px);
	content: "";
	filter: drop-shadow(0 0 9px rgba(255, 159, 28, .42));
	left: 53%;
	position: absolute;
	top: 50%;
	transform: translate(-36%, -50%);
}

.tucuatro-tuner-string__meta {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	left: 50%;
	min-width: 44px;
	position: absolute;
	top: -38px;
	transform: translateX(-50%);
	white-space: nowrap;
}

.tucuatro-tuner-string__label {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.tucuatro-tuner-string__note {
	color: rgba(255,255,255,.64);
	font-size: clamp(20px, 2.3vw, 30px);
	font-weight: 900;
	letter-spacing: -.03em;
	line-height: 1;
	text-shadow: 0 2px 12px rgba(0,0,0,.74);
	transition: color .15s ease, transform .15s ease;
}

.tucuatro-tuner-string:hover .tucuatro-tuner-string__peg,
.tucuatro-tuner-string:focus-visible .tucuatro-tuner-string__peg,
.tucuatro-tuner-string.is-active .tucuatro-tuner-string__peg {
	background:
		radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.26), transparent 18%),
		radial-gradient(circle at 48% 46%, rgba(255, 159, 28, 0.38), rgba(24, 24, 24, 0.94) 59%, rgba(3, 3, 3, 0.99));
	box-shadow: 0 0 0 11px rgba(255, 159, 28, 0.16), 0 0 34px rgba(255, 159, 28, .34), 0 18px 32px rgba(0, 0, 0, 0.54);
	transform: scale(1.06);
}

.tucuatro-tuner-string:hover .tucuatro-tuner-string__note,
.tucuatro-tuner-string:focus-visible .tucuatro-tuner-string__note,
.tucuatro-tuner-string.is-active .tucuatro-tuner-string__note {
	color: var(--tc-tuner-accent);
	transform: translateY(-2px);
}

.tucuatro-tuner-string:focus-visible {
	outline: none;
}

.tucuatro-tuner-string:focus-visible .tucuatro-tuner-string__peg {
	outline: 3px solid rgba(255,159,28,.42);
	outline-offset: 5px;
}

/* Cuatro and ukulele use the four-peg instrument image supplied in the mockup. */
.tucuatro-tuner-app[data-instrument="cuatro"],
.tucuatro-tuner-app[data-instrument="ukulele"] {
	--tc-tuner-instrument-size: 86% auto;
	--tc-tuner-instrument-position: 43% 48%;
}

.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--first,
.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--first { left: 76%; top: 35%; }
.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--second,
.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--second { left: 87%; top: 35%; }
.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--third,
.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--third { left: 76%; top: 63%; }
.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--fourth,
.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--fourth { left: 87%; top: 63%; }

/* Guitar: six play buttons sit over the three upper and three lower tuners. */
.tucuatro-tuner-app[data-instrument="guitar"] {
	--tc-tuner-instrument-size: 91% auto;
	--tc-tuner-instrument-position: 40% 48%;
}

.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--first { left: 65%; top: 35%; }
.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--second { left: 75%; top: 35%; }
.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--third { left: 85%; top: 35%; }
.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--fourth { left: 65%; top: 65%; }
.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--fifth { left: 75%; top: 65%; }
.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--sixth { left: 85%; top: 65%; }

.tucuatro-tuner-help {
	bottom: 20px;
	color: rgba(255,255,255,.64);
	font-size: clamp(17px, 2vw, 24px);
	font-weight: 800;
	left: 22px;
	letter-spacing: .02em;
	margin: 0;
	position: absolute;
	right: 22px;
	text-align: center;
	text-shadow: 0 2px 10px rgba(0,0,0,.72);
	z-index: 5;
}

.tucuatro-tuner-help span {
	background: transparent;
	border-radius: 999px;
	display: inline-block;
	padding: 9px 16px;
}

.tucuatro-tuner-help strong {
	color: var(--tc-tuner-accent);
	font-weight: 950;
}

@container (max-width: 760px) {
	.tucuatro-tuner-wrap {
		margin: 30px auto 44px;
		width: min(94vw, 460px);
	}

	.tucuatro-tuner-app {
		--tc-tuner-instrument-size: 168% auto;
		--tc-tuner-instrument-position: 61% 45%;
		border-radius: 18px;
		height: 330px;
	}

	.tucuatro-tuner-app[data-instrument="guitar"] {
		--tc-tuner-instrument-size: 178% auto;
		--tc-tuner-instrument-position: 61% 45%;
	}

	.tucuatro-tuner-string {
		height: 52px;
		width: 52px;
	}

	.tucuatro-tuner-string__meta {
		top: -26px;
	}

	.tucuatro-tuner-string__note {
		font-size: 15px;
	}

	.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--first,
	.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--first { left: 48%; top: 37%; }
	.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--second,
	.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--second { left: 72%; top: 37%; }
	.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--third,
	.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--third { left: 48%; top: 61%; }
	.tucuatro-tuner-app[data-instrument="cuatro"] .tucuatro-tuner-string--fourth,
	.tucuatro-tuner-app[data-instrument="ukulele"] .tucuatro-tuner-string--fourth { left: 72%; top: 61%; }

	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--first { left: 39%; top: 38%; }
	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--second { left: 58%; top: 38%; }
	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--third { left: 77%; top: 38%; }
	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--fourth { left: 39%; top: 62%; }
	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--fifth { left: 58%; top: 62%; }
	.tucuatro-tuner-app[data-instrument="guitar"] .tucuatro-tuner-string--sixth { left: 77%; top: 62%; }

	.tucuatro-tuner-help {
		bottom: 12px;
		font-size: 13px;
		line-height: 1.25;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tucuatro-tuner-app * {
		transition: none !important;
	}
}