/* Kids EDA Coloring — works with any theme; colors can be overridden with these variables. */
.ke-studio, .ke-grid, .ke-video, .ke-contact {
	--ke-ink: #1B2240;
	--ke-soft: #4B5675;
	--ke-line: #CFE3F6;
	--ke-ice: #EAF5FE;
	--ke-blue: #1590E6;
	--ke-blue-deep: #0B5FB0;
	--ke-yellow: #FFC21A;
	--ke-yellow-deep: #C99300;
	--ke-radius: 18px;
}

/* ---------- studio ---------- */
.ke-studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px;
	gap: 20px;
	align-items: start;
	margin: 0 0 2em;
	color: var(--ke-ink);
}
.ke-studio.ke-has-pick { grid-template-columns: 170px minmax(0, 1fr) 220px; }
.ke-studio button { font-family: inherit; }

.ke-pick { display: grid; gap: 8px; align-content: start; max-height: 640px; overflow-y: auto; padding: 2px; }
.ke-pick-btn {
	display: flex; align-items: center; gap: 10px;
	background: #fff; color: var(--ke-ink);
	border: 2px solid var(--ke-line); border-radius: 14px;
	padding: 5px 10px 5px 5px; cursor: pointer;
	font-weight: 800; font-size: 14px; line-height: 1.2; text-align: left;
}
.ke-pick-btn img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: #fff; flex: none; }
.ke-pick-btn[aria-pressed="true"] { border-color: var(--ke-blue); background: var(--ke-ice); }

.ke-stage { position: relative; min-width: 0; }
.ke-paper {
	position: relative;
	aspect-ratio: 1 / 1;
	max-width: 100%;
	background: #fff;
	border: 3px solid var(--ke-ink);
	border-radius: 24px;
	box-shadow: 0 8px 0 var(--ke-ink);
	overflow: hidden;
}
.ke-fill, .ke-lines {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block;
}
.ke-fill { cursor: pointer; touch-action: manipulation; background: #fff; }
.ke-lines { mix-blend-mode: multiply; pointer-events: none; max-width: none; object-fit: fill; }
.ke-status {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	margin: 0; padding: 10px 16px; max-width: 80%;
	background: var(--ke-ink); color: #fff; border-radius: 12px;
	font-weight: 700; font-size: 15px; text-align: center;
}
.ke-status[hidden] { display: none; }

.ke-tools { display: grid; gap: 14px; }
.ke-now { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.ke-now-dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ke-ink); display: inline-block; }
.ke-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ke-sw {
	aspect-ratio: 1; max-width: 100%; min-height: 36px;
	border-radius: 50%; padding: 0; cursor: pointer;
	border: 3px solid rgba(27, 34, 64, .18);
}
.ke-sw[aria-pressed="true"] { border-color: var(--ke-ink); box-shadow: inset 0 0 0 3px #fff; }
.ke-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ke-btn {
	font-weight: 800; font-size: 14px; line-height: 1.2;
	border-radius: 12px; border: 2px solid var(--ke-line);
	background: #fff; color: var(--ke-ink);
	padding: 10px 8px; cursor: pointer;
}
.ke-btn:hover { border-color: var(--ke-blue); }
.ke-wide { grid-column: 1 / -1; }
.ke-fun { background: var(--ke-yellow); border-color: var(--ke-yellow); box-shadow: 0 3px 0 var(--ke-yellow-deep); }
.ke-save { background: var(--ke-blue); border-color: var(--ke-blue); color: #fff; box-shadow: 0 3px 0 var(--ke-blue-deep); }
.ke-out { padding-top: 12px; border-top: 2px dashed var(--ke-line); }
.ke-studio :focus-visible { outline: 3px solid var(--ke-yellow); outline-offset: 2px; }
.ke-empty { padding: 16px; border: 2px dashed var(--ke-line); border-radius: 12px; }

/* ---------- cards ---------- */
.ke-grid {
	display: grid;
	grid-template-columns: repeat(var(--ke-cols, 4), minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 2em;
}
.ke-card {
	display: grid; gap: 6px; align-content: start;
	background: #fff; color: var(--ke-ink);
	border: 2px solid var(--ke-line); border-radius: var(--ke-radius);
	padding: 12px;
}
.ke-card-link { display: grid; gap: 8px; text-decoration: none; color: inherit; }
.ke-card-img { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--ke-line); overflow: hidden; background: #fff; }
.ke-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ke-badge {
	position: absolute; left: 8px; top: 8px;
	background: #E8322B; color: #fff; border-radius: 999px;
	font-size: 12px; font-weight: 800; padding: 3px 10px;
}
.ke-card-title { font-weight: 800; font-size: 17px; line-height: 1.2; }
.ke-card-meta { font-size: 13px; font-weight: 700; color: var(--ke-soft); }
.ke-card-cta {
	justify-self: start; margin-top: 4px;
	background: var(--ke-blue); color: #fff; text-decoration: none;
	font-weight: 800; font-size: 13px; border-radius: 999px; padding: 7px 14px;
}
.ke-card-cta:hover { background: var(--ke-blue-deep); color: #fff; }

/* ---------- video ---------- */
.ke-video {
	position: relative; aspect-ratio: 16 / 9; max-width: 100%;
	background: var(--ke-ink); border-radius: var(--ke-radius); overflow: hidden;
	display: grid; place-items: center; margin: 0 0 2em;
}
.ke-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ke-video-play {
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	background: none; border: 0; color: #fff; cursor: pointer;
	font-weight: 800; font-size: 18px; padding: 20px;
}
.ke-play-icon { width: 76px; height: 76px; border-radius: 50%; background: #E8322B; position: relative; box-shadow: 0 5px 0 #A3201B; }
.ke-play-icon::after {
	content: ""; position: absolute; left: 31px; top: 23px;
	border-left: 24px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent;
}
.ke-video-note { position: absolute; bottom: 10px; left: 0; right: 0; margin: 0; text-align: center; color: #AEB8D6; font-size: 12px; }
.ke-h { margin: 1.4em 0 .6em; }

/* ---------- contact form ---------- */
.ke-contact { max-width: 680px; color: var(--ke-ink); margin: 0 0 2em; }
.ke-form {
	display: grid; gap: 14px;
	background: #fff; border: 3px solid var(--ke-ink); border-radius: 24px;
	padding: 24px; box-shadow: 0 8px 0 var(--ke-ink);
}
.ke-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ke-field { display: grid; gap: 6px; margin: 0; }
.ke-field label { font-weight: 800; font-size: 15px; }
.ke-form input[type="text"], .ke-form input[type="email"], .ke-form select, .ke-form textarea {
	width: 100%; max-width: 100%; font: inherit; font-weight: 600; font-size: 16px; color: var(--ke-ink);
	background: #fff; border: 2px solid var(--ke-line); border-radius: 12px; padding: 12px 14px;
}
.ke-form textarea { resize: vertical; min-height: 140px; }
.ke-form input:focus, .ke-form select:focus, .ke-form textarea:focus { outline: none; border-color: var(--ke-blue); box-shadow: 0 0 0 3px rgba(21, 144, 230, .2); }
.ke-form [aria-invalid="true"] { border-color: #B3261E; }
.ke-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; }
.ke-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--ke-blue); }
.ke-field-error { color: #B3261E; font-weight: 700; font-size: 14px; }
.ke-privacy { margin: 0; font-size: 14px; color: var(--ke-soft); }
.ke-submit {
	justify-self: start; font: inherit; font-weight: 800; font-size: 17px;
	background: var(--ke-yellow); color: var(--ke-ink); border: 0; border-radius: 999px;
	padding: 13px 26px; cursor: pointer; box-shadow: 0 4px 0 var(--ke-yellow-deep);
}
.ke-submit:hover { transform: translateY(-2px); }
.ke-notice { border-radius: 14px; padding: 14px 18px; margin: 0 0 16px; font-weight: 600; }
.ke-notice--ok { background: #E3F8E1; border: 2px solid #3CC13B; }
.ke-notice--error { background: #FDE7E5; border: 2px solid #B3261E; }
.ke-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ke-contact :focus-visible { outline: 3px solid var(--ke-yellow); outline-offset: 2px; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
	.ke-studio, .ke-studio.ke-has-pick { grid-template-columns: minmax(0, 1fr); }
	.ke-pick { grid-auto-flow: column; grid-auto-columns: 92px; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: 6px; }
	.ke-pick-btn { flex-direction: column; text-align: center; padding: 6px; font-size: 12px; }
	.ke-swatches { grid-template-columns: repeat(8, 1fr); }
	.ke-btns { grid-template-columns: 1fr 1fr 1fr; }
	.ke-wide { grid-column: auto; }
	.ke-grid { grid-template-columns: repeat(min(var(--ke-cols, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.ke-row { grid-template-columns: minmax(0, 1fr); }
	.ke-form { padding: 18px; }
}
@media (max-width: 420px) {
	.ke-swatches { gap: 5px; }
	.ke-sw { min-height: 30px; }
	.ke-btns { grid-template-columns: 1fr 1fr; }
	.ke-fun, .ke-save { grid-column: 1 / -1; }
	.ke-grid { gap: 10px; }
}
@media print {
	.ke-tools, .ke-pick { display: none; }
}