/* ==========================================================================
   /utm-valuetrack — Kit 04: the timecode slate
   Every take labelled for the edit room. Accent: slate red LED.
   ========================================================================== */

body.kr-tool--utm {
	--kr-acc: #ff6b5e;
	--kr-acc-l: #ff9a8f;
	--kr-k1: "KIT 04 · TIMECODE SLATE";
	--kr-k2: "RACK 02 · GOOGLE ADS PRESETS";
}

/* ---------- Hero equipment: timecode slate ---------- */
.kr-visual--utm { container-type: inline-size; direction: ltr; }
.kr-visual--utm .krv-glow { inset: 12% 6% 6%; background: radial-gradient(closest-side, rgba(255, 107, 94, .16), transparent 72%); }
.kr-visual--utm .kru-slate { position: absolute; left: 9cqw; right: 7cqw; top: 22cqw; transform: rotate(-3deg); filter: drop-shadow(0 4cqw 5cqw rgba(0, 0, 0, .75)); }
.kr-visual--utm .kru-sticks { position: relative; height: 11cqw; margin-bottom: .8cqw; }
.kr-visual--utm .kru-stick {
	position: absolute;
	left: 0;
	right: 0;
	height: 5.4cqw;
	border-radius: 1cqw;
	background:
		linear-gradient(90deg, transparent 0 4%, rgba(0, 0, 0, 0) 4%),
		repeating-linear-gradient(-62deg, #f4efe7 0 4.6cqw, #141110 4.6cqw 9.2cqw);
	border: .5cqw solid #141110;
}
.kr-visual--utm .kru-stick--base { bottom: 0; background: repeating-linear-gradient(-62deg, #141110 0 4.6cqw, #f4efe7 4.6cqw 9.2cqw); }
.kr-visual--utm .kru-stick--top {
	top: 0;
	background:
		linear-gradient(90deg, #f3c27a 0 12%, #e07a5c 12% 24%, #5aa7b2 24% 36%, #3f9a4e 36% 48%, transparent 48%),
		repeating-linear-gradient(-62deg, #f4efe7 0 4.6cqw, #141110 4.6cqw 9.2cqw);
	background-size: 100% 34%, auto;
	background-repeat: no-repeat, repeat;
	background-position: 0 100%, 0 0;
	transform-origin: 2cqw 100%;
	transform: rotate(-16deg);
	animation: kruClap 5.5s var(--ease-out) infinite;
}
.kr-visual--utm .kru-stick--top i { position: absolute; left: .8cqw; top: 50%; width: 2.6cqw; height: 2.6cqw; margin-top: -1.3cqw; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8cfc4, #5d544d); }
.kr-visual--utm .kru-board {
	position: relative;
	display: grid;
	gap: 3cqw;
	padding: 3.6cqw;
	overflow: hidden;
	border-radius: 1.4cqw 1.4cqw 3cqw 3cqw;
	background: linear-gradient(180deg, #161312, #0d0b0a);
	box-shadow: inset 0 0 0 .5cqw #221d1a, inset 0 0 0 .7cqw rgba(255, 236, 214, .06), inset 0 0 8cqw rgba(0, 0, 0, .6);
}
.kr-visual--utm .kru-display {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 15cqw;
	border-radius: 1.6cqw;
	background: radial-gradient(120% 140% at 50% 40%, #1d0606, #080303 70%);
	box-shadow: inset 0 0 0 .5cqw #050202, inset 0 .6cqw 2cqw rgba(0, 0, 0, .9);
}
.kr-visual--utm .kru-tc {
	display: inline-flex;
	align-items: center;
	color: #ff4d4f;
	font: 800 9cqw/1 var(--mono);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 1.6cqw rgba(255, 77, 79, .85), 0 0 4.5cqw rgba(255, 77, 79, .45);
}
.kr-visual--utm .kru-tc b { font-weight: inherit; animation: kruSec 5.5s steps(1) infinite; }
.kr-visual--utm .kru-ff { display: inline-block; width: 1.25em; height: 1em; overflow: hidden; vertical-align: top; }
.kr-visual--utm .kru-ff span { display: block; width: 1.25em; line-height: 1; word-spacing: 9em; white-space: normal; animation: kruFrames 1s steps(8) infinite; }
.kr-visual--utm .kru-sync { position: absolute; right: 2cqw; top: 1.6cqw; color: rgba(255, 120, 110, .7); font: 700 1.4cqw/1 var(--mono); letter-spacing: .24em; animation: kruSync 5.5s steps(1) infinite; }
.kr-visual--utm .kru-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border-top: 1px solid rgba(244, 239, 231, .16); }
.kr-visual--utm .kru-fields > div { display: grid; gap: .9cqw; padding: 2.2cqw 2cqw 1.6cqw; border-bottom: 1px solid rgba(244, 239, 231, .12); }
.kr-visual--utm .kru-fields > div:not(:nth-child(3n)) { border-right: 1px solid rgba(244, 239, 231, .12); }
.kr-visual--utm .kru-fields dt { color: #8f8174; font: 700 1.35cqw/1 var(--mono); letter-spacing: .22em; }
.kr-visual--utm .kru-fields dd { margin: 0; overflow: hidden; color: #f4efe7; font: 700 2.25cqw/1.2 var(--mono); white-space: nowrap; text-overflow: ellipsis; }
.kr-visual--utm .kru-fields > div:nth-child(3) dd,
.kr-visual--utm .kru-fields > div:nth-child(4) dd { color: var(--kr-acc-l); }
.kr-visual--utm .kru-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .5), transparent 60%); opacity: 0; animation: kruFlash 5.5s var(--ease-out) infinite; pointer-events: none; }
.kr-visual--utm .kru-url {
	position: absolute;
	left: 6cqw;
	right: 4cqw;
	bottom: 9cqw;
	overflow: hidden;
	padding: 1.6cqw 2.2cqw;
	border: 1px solid rgba(255, 236, 214, .12);
	border-radius: 1.4cqw;
	background: rgba(10, 8, 7, .82);
	color: #b8ab9e;
	font: 600 1.7cqw/1.3 var(--mono);
	white-space: nowrap;
	transform: rotate(-3deg);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 82%, transparent);
}
.kr-visual--utm .kru-url span { display: inline-block; animation: kruUrl 14s linear infinite; }
.kr-visual--utm .kru-tape { top: 10cqw; right: 8cqw; font-size: 1.85cqw; transform: rotate(3deg); }

@keyframes kruClap { 0%, 54% { transform: rotate(-16deg); } 60% { transform: rotate(0deg); } 63% { transform: rotate(-3deg); } 66%, 90% { transform: rotate(0deg); } 100% { transform: rotate(-16deg); } }
@keyframes kruFlash { 0%, 59% { opacity: 0; } 61% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes kruSync { 0%, 59% { opacity: .35; } 60%, 88% { opacity: 1; color: #fff; text-shadow: 0 0 1cqw #ff4d4f; } 89%, 100% { opacity: .35; } }
@keyframes kruSec { 0%, 59% { opacity: 1; } 60% { opacity: .2; } 62%, 100% { opacity: 1; } }
@keyframes kruFrames { to { transform: translateY(-8em); } }
@keyframes kruUrl { 0%, 10% { transform: translateX(0); } 70%, 100% { transform: translateX(-38%); } }

@media (prefers-reduced-motion: reduce) {
	.kr-visual--utm .kru-stick--top { transform: rotate(-10deg); }
}

/* ValueTrack token chips (aside) */
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] > div:last-child { gap: 8px; margin-top: 18px; }
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] button {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-height: 0;
	padding: 9px 12px;
	border: 1px solid rgba(255, 236, 214, .1);
	border-radius: 10px;
	background: linear-gradient(180deg, #1f1915, #151110);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .06), 0 2px 0 #060404;
	transition: border-color .25s, transform .3s var(--ease-out);
}
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] button:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--kr-acc) 55%, transparent); }
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] button > span:first-child { color: var(--text); font-size: 12px; font-weight: 700; }
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] button > span[dir="ltr"] { color: var(--kr-acc-l); font: 600 11px/1.2 var(--mono); }
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] p span[dir="ltr"] { padding: 2px 8px; border-radius: 6px; background: color-mix(in oklab, var(--kr-acc) 14%, transparent); color: var(--kr-acc-l); font-family: var(--mono); }