/* ==========================================================================
   Free tools — "The Kit Room" (shared layer)
   /buttons (cue-light panel) · /colors (gel swatchbook) ·
   /phone-call-button (crew radio) · /utm-valuetrack (timecode slate)

   The tool markup is the stored editor layout, untouched (tools-view.php).
   This sheet repaints it as production equipment: the tool card is an open
   flight case, control panels are foam inserts, toggles are lit keys,
   presets are rental tags and code output is a data-wrangler screen.
   Live previews keep their real colours (no !important repaint here).
   Scope: body.kr-tool #site-top main.kr-page  (main)  ·  per tool: tool-<key>.css
   ========================================================================== */

body.kr-tool {
	--kr-acc: var(--gold);
	--kr-acc-l: var(--gold-l);
	--kr-cta: var(--grad-fire);
	--kr-cta-ink: #1a0d08;
	--kr-case: #15110e;
	--kr-foam: #0d0b0a;
	--kr-metal: linear-gradient(135deg, #6c625a 0%, #3a332e 38%, #554c45 62%, #2b2521 100%);
	--kr-k1: "CASE 01";
	--kr-k2: "RACK 02";
	--kr-k3: "RACK 03";
	background: var(--bg);
	color: var(--text-2);
}

/* ---------- 1. Stage ---------- */
body.kr-tool #site-top main.kr-page {
	/* legacy design tokens re-pointed at the cinema palette */
	--foreground: var(--text);
	--muted-foreground: var(--text-2);
	--public-text-color: var(--text-2);
	--primary: var(--kr-acc);
	--primary-foreground: var(--kr-cta-ink);
	--accent: var(--kr-acc);
	--ring: var(--kr-acc);
	--border: var(--line-2);
	--input: var(--line-2);
	--card: var(--panel);
	--background: var(--bg);
	--shadow-primary: 0 14px 30px -16px color-mix(in oklab, var(--kr-acc) 70%, transparent);
	--shadow-soft: none;
	--shadow-lg: 0 40px 80px -48px rgba(0, 0, 0, .9);
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--header-h) + clamp(28px, 4vw, 64px));
	padding-bottom: clamp(80px, 9vw, 140px);
	color: var(--text-2);
	font-family: var(--font);
	background: transparent;
}
/* pegboard wall + work light, reusing the two decorative layers of the stored layout */
body.kr-tool #site-top main.kr-page > .home-pattern-grid {
	z-index: -2;
	opacity: 1;
	background:
		radial-gradient(circle, rgba(255, 236, 214, .075) 1.5px, transparent 2.1px) 0 0 / 30px 30px;
	-webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 640px, transparent 1180px);
	mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .55) 640px, transparent 1180px);
}
body.kr-tool #site-top main.kr-page > .hero-mesh {
	z-index: -1;
	height: 980px;
	opacity: 1;
	filter: none;
	background:
		radial-gradient(46% 52% at 24% 26%, color-mix(in oklab, var(--kr-acc) 15%, transparent), transparent 72%),
		radial-gradient(34% 40% at 88% 4%, rgba(90, 167, 178, .07), transparent 70%),
		linear-gradient(180deg, transparent 70%, var(--bg));
}
body.kr-tool #site-top main.kr-page > .mx-auto {
	max-width: calc(var(--container) + var(--gutter) * 2);
	padding-inline: var(--gutter);
}
body.kr-tool #site-top main.kr-page > .mx-auto > .grid { gap: clamp(64px, 8vw, 124px); }

/* ---------- 2. Typography ---------- */
body.kr-tool #site-top main.kr-page :is(h1, h2, h3) { color: var(--text); letter-spacing: 0; text-wrap: balance; }
body.kr-tool #site-top main.kr-page :is(h2, h3) { font-weight: 900; }
body.kr-tool #site-top main.kr-page svg.lucide { color: var(--kr-acc); }
body.kr-tool #site-top main.kr-page .text-primary { color: var(--kr-acc-l); }

/* Section heads (stored h2 + lead), framed by a stencil code */
body.kr-tool #site-top main.kr-page .kr-hero ~ section:not([class*="rounded-[2rem]"]) > div:first-child:not([class*="rounded-"]):has(> div > h2) h2 { font-size: clamp(1.7rem, 1.1rem + 1.7vw, 2.75rem); line-height: 1.38; }
body.kr-tool #site-top main.kr-page .kr-hero ~ section:not([class*="rounded-[2rem]"]) > div:first-child:not([class*="rounded-"]):has(> div > h2) h2 + p { margin-top: 12px; max-width: 64ch; color: var(--text-2); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 2; }

/* ---------- 3. Hero (the first stored section) ---------- */
body.kr-tool #site-top main.kr-page .kr-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "rack vis" "head vis" "body vis";
	column-gap: clamp(36px, 5.5vw, 96px);
	row-gap: 0;
	align-items: start;
	min-height: min(660px, calc(100svh - var(--header-h) - 60px));
	margin: 0;
	padding: clamp(36px, 4vw, 56px) 0 clamp(36px, 4vw, 56px);
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page .kr-hero > .viewfinder {
	top: 0;
	bottom: 0;
	left: calc(-1 * min(var(--gutter), 28px));
	right: calc(-1 * min(var(--gutter), 28px));
	z-index: -1;
}
body.kr-tool #site-top main.kr-page .kr-hero > .viewfinder .viewfinder__top { top: 12px; }
body.kr-tool #site-top main.kr-page .kr-hero > .viewfinder .viewfinder__bottom { bottom: 12px; }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(2) { grid-area: head; min-width: 0; padding-top: 4px; }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) {
	grid-area: body;
	display: grid;
	gap: 14px;
	min-width: 0;
	max-width: 62ch;
	margin-top: 26px;
	color: var(--text-2);
	font-size: clamp(1rem, .96rem + .2vw, 1.1rem);
	font-weight: 400;
	line-height: 2.05;
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > p { color: var(--text-2); font-size: inherit; line-height: inherit; }

/* chip → stencil plate */
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(2) > p:first-child {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	padding: 7px 15px 7px 13px;
	border: 1px solid color-mix(in oklab, var(--kr-acc) 40%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--kr-acc) 8%, transparent);
	color: var(--kr-acc-l);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(2) > p:first-child svg { width: 15px; height: 15px; color: var(--kr-acc); }
body.kr-tool #site-top main.kr-page .kr-hero h1 {
	margin: 0;
	color: var(--text);
	font-size: clamp(2.2rem, 1.15rem + 3vw, 4.15rem);
	font-weight: 900;
	line-height: 1.26;
}
body.kr-tool #site-top main.kr-page .kr-hero h1::after {
	content: "";
	display: block;
	width: 132px;
	height: 4px;
	margin-top: 26px;
	border-radius: 4px;
	background: linear-gradient(270deg, var(--kr-acc), color-mix(in oklab, var(--kr-acc) 20%, transparent));
	box-shadow: 0 0 22px color-mix(in oklab, var(--kr-acc) 45%, transparent);
	transform-origin: right;
}

/* the three stored hero chips → label-maker tapes */
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 14px;
	margin-top: 10px;
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 0;
	margin: 0;
	padding: 9px 16px 9px 14px;
	overflow: visible;
	border: 0;
	border-radius: 3px;
	background: linear-gradient(180deg, #24201d 0%, #171412 55%, #110f0e 100%);
	color: #f4ece2;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.45;
	text-align: start;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 236, 214, .05), 0 10px 18px -12px #000;
	transform: rotate(var(--kr-tilt, -.8deg));
	transition: transform .5s var(--ease-out);
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span:nth-child(2) { --kr-tilt: .7deg; }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span:nth-child(3) { --kr-tilt: -.3deg; }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span:hover { transform: rotate(0deg) translateY(-2px); }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span::before {
	content: "";
	position: static;
	inset: auto;
	display: block;
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0;
	border-radius: 50%;
	background: var(--kr-acc);
	box-shadow: 0 0 8px var(--kr-acc), 0 0 0 3px color-mix(in oklab, var(--kr-acc) 16%, transparent);
	transform: none;
	font-size: 0;
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span::after {
	content: "";
	position: absolute;
	inset: 3px 6px auto;
	height: 1px;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 3px, transparent 3px 7px);
	border-radius: 0;
	box-shadow: none;
}
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span > span { display: block; color: inherit; font-size: inherit; line-height: 1.5; }
body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) > div > span > span + span { color: rgba(244, 236, 226, .62); font-size: 12px; font-weight: 600; }

/* Tool rack (cross-links) */
body.kr-tool #site-top main.kr-page .kr-rack { grid-area: rack; margin: 0 0 30px; }
body.kr-tool #site-top main.kr-page .kr-rack ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.kr-tool #site-top main.kr-page .kr-rack a {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 8px 13px 9px;
	border: 1px solid var(--line-2);
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(255, 236, 214, .045), rgba(255, 236, 214, .015));
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	transition: color .3s, border-color .3s, background .3s, transform .4s var(--ease-out);
}
body.kr-tool #site-top main.kr-page .kr-rack a:hover { color: var(--text); border-color: rgba(255, 236, 214, .28); transform: translateY(-2px); }
body.kr-tool #site-top main.kr-page .kr-rack__code { font: 600 10px/1 var(--mono); letter-spacing: .14em; direction: ltr; unicode-bidi: isolate; color: var(--muted); opacity: .8; white-space: nowrap; }
body.kr-tool #site-top main.kr-page .kr-rack a[aria-current] {
	padding-inline-start: 26px;
	border-color: color-mix(in oklab, var(--kr-acc) 55%, transparent);
	background: color-mix(in oklab, var(--kr-acc) 10%, transparent);
	color: var(--text);
}
body.kr-tool #site-top main.kr-page .kr-rack a[aria-current] .kr-rack__code { color: var(--kr-acc-l); opacity: 1; }
body.kr-tool #site-top main.kr-page .kr-rack a[aria-current]::before {
	content: "";
	position: absolute;
	inset-inline-start: 11px;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--kr-acc);
	box-shadow: 0 0 10px var(--kr-acc);
	animation: krLed 2.4s ease-in-out infinite;
}

/* A tool without drawn equipment yet: single-column hero */
body.kr-tool #site-top main.kr-page .kr-hero:has(> .kr-visual:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "rack" "head" "body"; grid-template-rows: auto; min-height: 0; }
body.kr-tool #site-top main.kr-page .kr-visual:empty { display: none; }

/* Hero equipment slot (drawn in tool-<key>.css) */
body.kr-tool #site-top main.kr-page .kr-visual {
	grid-area: vis;
	position: relative;
	align-self: center;
	justify-self: center;
	width: min(100%, 560px);
	aspect-ratio: 1 / 1;
	pointer-events: none;
	user-select: none;
}
.kr-visual * { box-sizing: border-box; }
.kr-visual .krv-glow {
	position: absolute;
	inset: 6%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in oklab, var(--kr-acc) 22%, transparent), transparent 72%);
	filter: blur(10px);
}
.kr-visual .krv-floor {
	position: absolute;
	left: 8%;
	right: 8%;
	bottom: 6%;
	height: 12%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent);
}
.kr-visual .krv-tape {
	position: absolute;
	padding: 6px 12px;
	border-radius: 2px;
	background: linear-gradient(180deg, #e9dcc6, #d9c9ae);
	color: #2a211b;
	font: 700 10.5px/1 var(--mono);
	letter-spacing: .16em;
	direction: ltr;
	white-space: nowrap;
	box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .9);
	opacity: .92;
}

/* Hero entrance (JS gate, same rhythm as the cinema heroes) */
.js body.kr-tool #site-top main.kr-page .kr-hero > :is(:nth-child(1), :nth-child(2), :nth-child(3)) { opacity: 0; transform: translateY(16px); }
.is-ready body.kr-tool #site-top main.kr-page .kr-hero > :is(:nth-child(1), :nth-child(2), :nth-child(3)) { opacity: 1; transform: none; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.is-ready body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(2) { transition-delay: .12s; }
.is-ready body.kr-tool #site-top main.kr-page .kr-hero > :nth-child(3) { transition-delay: .26s; }
.js body.kr-tool #site-top main.kr-page .kr-hero h1::after { transform: scaleX(0); }
.is-ready body.kr-tool #site-top main.kr-page .kr-hero h1::after { transform: none; transition: transform 1.2s var(--ease-cine) .6s; }
.js body.kr-tool #site-top main.kr-page .kr-visual { opacity: 0; transform: translateY(22px) scale(.97); }
.is-ready body.kr-tool #site-top main.kr-page .kr-visual { opacity: 1; transform: none; transition: opacity 1.1s var(--ease-out) .3s, transform 1.4s var(--ease-out) .3s; }

/* ---------- 4. The flight case (tool card) ---------- */
body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"]) {
	position: relative;
	isolation: isolate;
	padding: clamp(18px, 2.4vw, 34px);
	border: 1px solid rgba(255, 236, 214, .13);
	border-radius: 28px;
	background:
		linear-gradient(180deg, rgba(255, 236, 214, .05), rgba(255, 236, 214, .012) 34%, transparent 60%),
		var(--kr-case);
	box-shadow:
		inset 0 1px 0 rgba(255, 236, 214, .1),
		inset 0 0 0 7px #110d0b,
		inset 0 0 0 8px rgba(255, 236, 214, .055),
		0 50px 90px -60px #000,
		0 0 0 1px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	--tw-ring-shadow: 0 0 #0000;
}
/* metal corner caps with rivets */
body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"])::before {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 2;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(circle at 15px 15px, #1d1815 0 2.2px, #a59a90 2.6px 3.4px, transparent 3.9px) top left / 36px 36px no-repeat,
		radial-gradient(circle at 21px 15px, #1d1815 0 2.2px, #a59a90 2.6px 3.4px, transparent 3.9px) top right / 36px 36px no-repeat,
		radial-gradient(circle at 15px 21px, #1d1815 0 2.2px, #a59a90 2.6px 3.4px, transparent 3.9px) bottom left / 36px 36px no-repeat,
		radial-gradient(circle at 21px 21px, #1d1815 0 2.2px, #a59a90 2.6px 3.4px, transparent 3.9px) bottom right / 36px 36px no-repeat,
		var(--kr-metal);
	-webkit-mask:
		linear-gradient(#000 0 0) top left / 36px 36px no-repeat,
		linear-gradient(#000 0 0) top right / 36px 36px no-repeat,
		linear-gradient(#000 0 0) bottom left / 36px 36px no-repeat,
		linear-gradient(#000 0 0) bottom right / 36px 36px no-repeat;
	mask:
		linear-gradient(#000 0 0) top left / 36px 36px no-repeat,
		linear-gradient(#000 0 0) top right / 36px 36px no-repeat,
		linear-gradient(#000 0 0) bottom left / 36px 36px no-repeat,
		linear-gradient(#000 0 0) bottom right / 36px 36px no-repeat;
	opacity: .9;
}
/* stencil case label on the lid edge */
body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"])::after {
	content: var(--kr-k1);
	content: var(--kr-k1) / "";
	position: absolute;
	top: -11px;
	left: 54px;
	z-index: 3;
	padding: 5px 10px;
	border-radius: 3px;
	background: linear-gradient(180deg, #e9dcc6, #d6c5a8);
	color: #2a211b;
	font: 700 10px/1 var(--mono);
	letter-spacing: .18em;
	direction: ltr;
	white-space: nowrap;
	box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .9);
	transform: rotate(-1.2deg);
}

/* Tool header inside the case (chip / h2 / lead + action) */
body.kr-tool #site-top main.kr-page [class*="rounded-[2rem]"] > div[class*="mb-"]:first-child p:first-child:has(> svg) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
	padding: 5px 12px;
	border: 1px solid color-mix(in oklab, var(--kr-acc) 34%, transparent);
	border-radius: 999px;
	background: color-mix(in oklab, var(--kr-acc) 7%, transparent);
	color: var(--kr-acc-l);
	font-size: 12.5px;
	font-weight: 700;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page [class*="rounded-[2rem]"] > div[class*="mb-"]:first-child p:first-child:has(> svg) svg { width: 14px; height: 14px; }
body.kr-tool #site-top main.kr-page [class*="rounded-[2rem]"] > div[class*="mb-"]:first-child h2 { font-size: clamp(1.45rem, 1.05rem + 1.2vw, 2.25rem); line-height: 1.45; }
body.kr-tool #site-top main.kr-page [class*="rounded-[2rem]"] > div[class*="mb-"]:first-child h2 + p { margin-top: 10px; color: var(--text-2); font-size: 14.5px; line-height: 2; }

/* ---------- 5. Foam inserts (control + output panels) ---------- */
body.kr-tool #site-top main.kr-page [class*="rounded-[1.35rem]"][class*="border-[rgba("] {
	position: relative;
	border: 1px solid rgba(255, 236, 214, .07);
	border-radius: 18px;
	background:
		radial-gradient(rgba(255, 236, 214, .045) 1px, transparent 1.4px) 0 0 / 9px 9px,
		linear-gradient(180deg, #110e0c, var(--kr-foam));
	box-shadow: inset 0 3px 14px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(0, 0, 0, .4);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Labels, group titles, form fields */
body.kr-tool #site-top main.kr-page label { color: var(--text-2); font-weight: 700; }
body.kr-tool #site-top main.kr-page [class*="rounded-[1.35rem]"][class*="border-[rgba("] :is(label, .grid > span.font-medium) { font-size: 13px; }
body.kr-tool #site-top main.kr-page [class*="rounded-[1.35rem]"][class*="border-[rgba("] .grid.gap-2 > span.font-medium:first-child { color: var(--text-2); }
body.kr-tool #site-top main.kr-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]) {
	height: 48px;
	padding-inline: 14px;
	border: 1px solid rgba(255, 236, 214, .12);
	border-radius: 12px;
	background: #090706;
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
	transition: border-color .25s, box-shadow .25s;
}
body.kr-tool #site-top main.kr-page input[dir="ltr"]:not([type="checkbox"]):not([type="color"]) { font-family: var(--mono); font-size: 13px; letter-spacing: .01em; }
body.kr-tool #site-top main.kr-page input:not([type="checkbox"]):not([type="color"]):hover { border-color: rgba(255, 236, 214, .22); }
body.kr-tool #site-top main.kr-page input:not([type="checkbox"]):not([type="color"]):focus {
	border-color: color-mix(in oklab, var(--kr-acc) 75%, transparent);
	outline: 0;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6), 0 0 0 3px color-mix(in oklab, var(--kr-acc) 20%, transparent);
}
body.kr-tool #site-top main.kr-page input::placeholder { color: var(--muted); opacity: 1; }
body.kr-tool #site-top main.kr-page input[type="checkbox"] {
	width: 20px;
	height: 20px;
	accent-color: var(--kr-acc);
	border-radius: 5px;
	cursor: pointer;
}
/* "open in new tab" / "show number" rows → toggle strips */
body.kr-tool #site-top main.kr-page label:has(> input[type="checkbox"]) {
	padding: 12px 14px;
	border: 1px solid rgba(255, 236, 214, .09);
	border-radius: 12px;
	background: linear-gradient(180deg, #1a1512, #130f0d);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .05);
	color: var(--text);
	cursor: pointer;
}

/* ---------- 6. Keys (toggles, tabs, filters) ---------- */
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion) {
	position: relative;
	border: 1px solid rgba(255, 236, 214, .1);
	background: linear-gradient(180deg, #211a16, #171310);
	color: var(--text-2);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .07), 0 2px 0 #060404, 0 8px 14px -10px rgba(0, 0, 0, .9);
	transition: color .25s, border-color .25s, background .25s, box-shadow .25s, transform .2s;
}
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion):hover {
	color: var(--text);
	border-color: rgba(255, 236, 214, .22);
	background: linear-gradient(180deg, #271f1a, #1b1612);
}
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion):active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .05), 0 1px 0 #060404; }
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion):is([aria-pressed="true"], .bg-primary) {
	border-color: color-mix(in oklab, var(--kr-acc) 72%, transparent);
	background: linear-gradient(180deg, color-mix(in oklab, var(--kr-acc) 30%, #211a16), color-mix(in oklab, var(--kr-acc) 13%, #171310));
	color: #fffaf3;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .14),
		0 0 0 1px color-mix(in oklab, var(--kr-acc) 22%, transparent),
		0 10px 24px -12px color-mix(in oklab, var(--kr-acc) 75%, transparent);
}
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion):is([aria-pressed="true"], .bg-primary) > span { color: inherit; }
/* count badges inside filter keys */
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion) > span.rounded-full {
	background: rgba(255, 236, 214, .07);
	color: var(--muted);
	font-family: var(--mono);
	font-weight: 700;
}
body.kr-tool #site-top main.kr-page button[class*="transition-colors"][class*="border"]:not(.brand-button-motion):is([aria-pressed="true"], .bg-primary) > span.rounded-full {
	background: color-mix(in oklab, var(--kr-acc) 30%, transparent);
	color: #fffaf3;
}

/* ---------- 7. Action buttons ---------- */
body.kr-tool #site-top main.kr-page .brand-button-motion--primary {
	border: 0;
	border-radius: 999px;
	background: var(--kr-cta);
	color: var(--kr-cta-ink);
	font-weight: 800;
	box-shadow: 0 12px 28px -14px color-mix(in oklab, var(--kr-acc) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
	transition: transform .35s var(--ease-out), box-shadow .35s, filter .3s;
}
body.kr-tool #site-top main.kr-page .brand-button-motion--primary :is(svg, span) { color: inherit; }
body.kr-tool #site-top main.kr-page .brand-button-motion--primary:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); box-shadow: 0 18px 36px -14px color-mix(in oklab, var(--kr-acc) 95%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25); }
body.kr-tool #site-top main.kr-page :is(.brand-button-motion--outline, .brand-button-motion--soft) {
	border: 1px solid rgba(255, 236, 214, .14);
	border-radius: 12px;
	background: linear-gradient(180deg, #211a16, #171310);
	color: var(--text);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .07), 0 2px 0 #060404;
	transition: color .25s, border-color .25s, transform .35s var(--ease-out);
}
body.kr-tool #site-top main.kr-page .brand-button-motion--soft { border-color: color-mix(in oklab, var(--kr-acc) 34%, transparent); background: color-mix(in oklab, var(--kr-acc) 9%, #171310); color: var(--kr-acc-l); }
body.kr-tool #site-top main.kr-page :is(.brand-button-motion--outline, .brand-button-motion--soft):hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--kr-acc) 60%, transparent); color: var(--kr-acc-l); }
body.kr-tool #site-top main.kr-page :is(.brand-button-motion--outline, .brand-button-motion--soft) svg { color: currentColor; }
body.kr-tool #site-top main.kr-page .brand-button-motion[data-copy-state="copied"] { box-shadow: 0 0 0 2px rgba(63, 154, 78, .7), 0 12px 26px -14px rgba(63, 154, 78, .9); }

/* ---------- 8. Data-wrangler screen (code output) ---------- */
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) {
	overflow: hidden;
	border: 1px solid rgba(255, 236, 214, .1);
	border-radius: 14px;
	background: #070605;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .6), 0 22px 44px -30px #000;
}
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) > div:first-child {
	min-height: 40px;
	padding-inline: 14px;
	border-bottom: 1px solid rgba(255, 236, 214, .07);
	background: linear-gradient(180deg, #16120f, #100d0b);
}
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) > div:first-child > span:first-child {
	padding: 4px 9px;
	border: 1px solid color-mix(in oklab, var(--kr-acc) 40%, transparent);
	border-radius: 5px;
	background: color-mix(in oklab, var(--kr-acc) 10%, transparent);
	color: var(--kr-acc-l);
	font: 700 10.5px/1 var(--mono);
	letter-spacing: .16em;
	box-shadow: none;
}
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) > div:first-child > span:last-child > span { opacity: .85; box-shadow: 0 0 6px currentColor; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) pre {
	margin: 0;
	background:
		repeating-linear-gradient(180deg, rgba(255, 236, 214, .018) 0 1px, transparent 1px 3px),
		transparent;
	color: #e9dfd4;
	font-family: var(--mono);
	font-size: 12.5px;
	line-height: 1.8;
	scrollbar-color: #3a2e26 transparent;
	scrollbar-width: thin;
}
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) pre code { color: inherit; background: none; padding: 0; font: inherit; }
/* token palette for a dark screen (classes are assigned by the tool scripts) */
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#8A7C6C\] { color: #8f8174; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#0F766E\] { color: #86d6c6; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#B42318\] { color: #ff8f7e; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#2563EB\] { color: #8fb6ff; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#7C3AED\] { color: #c9a8ff; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#A15C07\] { color: var(--gold-l); }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#0E7490\] { color: #7bd8ea; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#BE185D\] { color: #ff96c4; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#1D4ED8\] { color: #a2c2ff; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#6B5E52\] { color: #a99b8d; }
body.kr-tool #site-top main.kr-page div[dir="ltr"][class*="rounded-2xl"]:has(> pre) .text-\[\#283044\] { color: #ece3d8; }

/* ---------- 9. Rental tags (presets / palettes) ---------- */
body.kr-tool #site-top main.kr-page :is(button, article)[class*="rounded-[1.45rem]"] {
	position: relative;
	overflow: visible;
	border: 1px solid rgba(255, 236, 214, .09);
	border-radius: 18px;
	background:
		linear-gradient(180deg, rgba(255, 236, 214, .045), rgba(255, 236, 214, .01) 50%),
		#130f0d;
	color: var(--text-2);
	box-shadow: 0 20px 40px -32px #000, inset 0 1px 0 rgba(255, 236, 214, .06);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: transform .5s var(--ease-out), border-color .3s, box-shadow .5s var(--ease-out);
	--tw-ring-shadow: 0 0 #0000;
}
body.kr-tool #site-top main.kr-page :is(button, article)[class*="rounded-[1.45rem]"]:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--kr-acc) 34%, transparent); box-shadow: 0 30px 50px -34px #000, 0 0 0 1px color-mix(in oklab, var(--kr-acc) 14%, transparent); }
body.kr-tool #site-top main.kr-page :is(button, article)[class*="rounded-[1.45rem]"]:is(.ring-2, [aria-pressed="true"]) {
	border-color: color-mix(in oklab, var(--kr-acc) 80%, transparent);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--kr-acc) 45%, transparent), 0 26px 50px -28px color-mix(in oklab, var(--kr-acc) 55%, transparent);
}
body.kr-tool #site-top main.kr-page :is(button, article)[class*="rounded-[1.45rem]"]:is(.ring-2, [aria-pressed="true"])::after {
	content: "IN USE";
	content: "IN USE" / "";
	position: absolute;
	top: -9px;
	inset-inline-end: 16px;
	z-index: 2;
	padding: 4px 7px;
	border-radius: 4px;
	background: var(--kr-acc);
	color: #1a0d08;
	font: 800 9.5px/1 var(--mono);
	letter-spacing: .16em;
	direction: ltr;
	box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--kr-acc) 80%, transparent);
}
/* category chips on tags */
body.kr-tool #site-top main.kr-page :is(button, article)[class*="rounded-[1.45rem]"] span.rounded-full[class*="border-border"] {
	border: 1px solid rgba(255, 236, 214, .1);
	background: rgba(255, 236, 214, .04);
	color: var(--muted);
	box-shadow: none;
}

/* ---------- 10. Section heads (stencil code) ---------- */
body.kr-tool #site-top main.kr-page .kr-hero ~ section:not([class*="rounded-[2rem]"]) > div:first-child:not([class*="rounded-"]):has(> div > h2) { position: relative; margin-top: 34px; }
body.kr-tool #site-top main.kr-page .kr-hero ~ section:not([class*="rounded-[2rem]"]) > div:first-child:not([class*="rounded-"]):has(> div > h2)::before {
	content: var(--kr-k2);
	content: var(--kr-k2) / "";
	position: absolute;
	bottom: calc(100% + 12px);
	right: 0;
	padding: 4px 9px;
	border: 1px solid color-mix(in oklab, var(--kr-acc) 40%, transparent);
	border-radius: 6px;
	background: color-mix(in oklab, var(--kr-acc) 7%, transparent);
	color: var(--kr-acc-l);
	font: 600 11px/1 var(--mono);
	letter-spacing: .14em;
	direction: ltr;
}


/* ---------- 10b. Leftover light paint from the stored layout ---------- */
/* chips, badges and soft panels: dark film, previews excluded */
body.kr-tool #site-top main.kr-page :is([class*="bg-white/"], [class*="bg-[rgba(255,252,248"], [class*="bg-[linear-gradient(135deg,rgba(255,252,248"]):not(:where(.kr-hero, [data-color-preview], [data-color-preview] *, [class*="min-h-[21rem]"], [class*="min-h-[21rem]"] *, [data-button-preview] > div, [data-button-preview] > div *, .brand-button-motion)) {
	border-color: rgba(255, 236, 214, .1);
	background: rgba(255, 236, 214, .04);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* monitors: the live-preview cards (buttons, phone) */
body.kr-tool #site-top main.kr-page div[class*="rounded-[1.45rem]"] {
	position: relative;
	padding: 18px;
	border: 1px solid rgba(255, 236, 214, .1);
	border-radius: 20px;
	background: linear-gradient(180deg, #1b1612, #120f0d);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .08), 0 24px 48px -34px #000;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page div[class*="rounded-[1.45rem]"] p { color: var(--text); font-weight: 800; }
body.kr-tool #site-top main.kr-page div[class*="rounded-[1.45rem]"] p[dir="ltr"] { color: var(--kr-acc-l); font-family: var(--mono); font-size: 11.5px; font-weight: 700; }

/* side rack panel (UTM tokens) */
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] {
	padding: 22px;
	border: 1px solid rgba(255, 236, 214, .1);
	border-radius: 22px;
	background:
		radial-gradient(rgba(255, 236, 214, .04) 1px, transparent 1.4px) 0 0 / 9px 9px,
		linear-gradient(180deg, #1a1511, #110e0c);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .08), 0 30px 60px -40px #000;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page aside[class*="rounded-[1.45rem]"] h2 { margin-top: 6px; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); line-height: 1.6; }
body.kr-tool #site-top main.kr-page [class*="rounded-[1.35rem]"] h2 { font-size: 16px; line-height: 1.7; font-weight: 800; }

/* spec strip (closing feature list) */
body.kr-tool #site-top main.kr-page .kr-hero ~ section[class*="rounded-[1.75rem]"] {
	border: 1px solid rgba(255, 236, 214, .1);
	border-radius: 22px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 236, 214, .02) 0 1px, transparent 1px 64px),
		linear-gradient(180deg, #17120f, #110e0c);
	box-shadow: inset 0 1px 0 rgba(255, 236, 214, .07);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
body.kr-tool #site-top main.kr-page .kr-hero ~ section[class*="rounded-[1.75rem]"] h3 { font-size: 15px; }
body.kr-tool #site-top main.kr-page .kr-hero ~ section[class*="rounded-[1.75rem]"] > div > span:first-child {
	border: 1px solid color-mix(in oklab, var(--kr-acc) 35%, transparent);
	background: color-mix(in oklab, var(--kr-acc) 10%, transparent);
	color: var(--kr-acc-l);
}

/* ---------- 11. Motion ---------- */
@keyframes krLed { 50% { opacity: .45; box-shadow: 0 0 3px var(--kr-acc); } }

/* ---------- 12. Responsive ---------- */
@media (max-width: 1100px) {
	body.kr-tool #site-top main.kr-page .kr-hero {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "rack" "head" "body" "vis";
		min-height: 0;
	}
	body.kr-tool #site-top main.kr-page .kr-hero .kr-visual { width: min(100%, 520px); margin-top: clamp(36px, 6vw, 56px); }
}
@media (max-width: 640px) {
	body.kr-tool #site-top main.kr-page { padding-top: calc(var(--header-h) + 18px); }
	body.kr-tool #site-top main.kr-page > .mx-auto { padding-inline: 16px; }
	body.kr-tool #site-top main.kr-page .kr-hero { padding-top: 36px; }
	body.kr-tool #site-top main.kr-page .kr-hero > .viewfinder { left: -6px; right: -6px; }
	body.kr-tool #site-top main.kr-page .kr-hero h1 { font-size: clamp(1.95rem, 1.2rem + 3.6vw, 2.5rem); }
	body.kr-tool #site-top main.kr-page .kr-rack { margin-bottom: 22px; }
	body.kr-tool #site-top main.kr-page .kr-rack ol { display: grid; grid-template-columns: 1fr 1fr; }
	body.kr-tool #site-top main.kr-page .kr-rack a { justify-content: space-between; padding: 8px 10px; }
	body.kr-tool #site-top main.kr-page .kr-rack a[aria-current] { padding-inline-start: 24px; }
	body.kr-tool #site-top main.kr-page .kr-rack__code { font-size: 9px; letter-spacing: .1em; }
	body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"]) { border-radius: 22px; padding: 16px 14px 18px; }
	body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"])::before {
		-webkit-mask-size: 26px 26px;
		mask-size: 26px 26px;
	}
	body.kr-tool #site-top main.kr-page :is(.kr-hero ~ section > [class*="rounded-[2rem]"]:not(aside), .kr-hero ~ section[class*="rounded-[2rem]"])::after { left: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	body.kr-tool #site-top main.kr-page *, body.kr-tool #site-top main.kr-page *::before, body.kr-tool #site-top main.kr-page *::after { animation: none !important; }
	.js body.kr-tool #site-top main.kr-page .kr-hero > *, .js body.kr-tool #site-top main.kr-page .kr-visual, .js body.kr-tool #site-top main.kr-page .kr-hero h1::after { opacity: 1; transform: none; transition: none; }
}