cognikit 0.1.2 → 1.0.0

package/public/app.js

@@ -2891,31 +2891,140 @@ function isAssetType(v) {
 }
 
 // src/shared/config.ts
-var defaultCognikitThemeVariables = {
-  "--edu-bg": "247 249 252",
-  "--edu-card": "255 255 255",
-  "--edu-ink": "31 41 55",
-  "--edu-second-ink": "71 85 105",
-  "--edu-third-ink": "100 116 139",
-  "--edu-inverted-ink": "248 250 252",
-  "--edu-success": "22 163 74",
-  "--edu-error": "220 38 38",
-  "--edu-warning": "255 222 33",
-  "--edu-neutral": "14 165 233",
-  "--edu-first-accent": "49 120 198",
-  "--edu-second-accent": "245 158 11",
-  "--edu-third-accent": "236 72 153",
-  "--edu-border": "229 231 235",
-  "--edu-muted": "243 244 246",
-  "--edu-radius": "0.375rem",
-  "--edu-shadow-color": "0 0 0",
-  "--edu-pad": "1rem",
-  "--edu-mar": "0"
+var cognikitThemePresets = {
+  "default-light": {
+    "--edu-bg": "247 249 252",
+    "--edu-card": "255 255 255",
+    "--edu-ink": "31 41 55",
+    "--edu-second-ink": "71 85 105",
+    "--edu-third-ink": "100 116 139",
+    "--edu-inverted-ink": "248 250 252",
+    "--edu-success": "22 163 74",
+    "--edu-error": "220 38 38",
+    "--edu-warning": "255 222 33",
+    "--edu-neutral": "14 165 233",
+    "--edu-first-accent": "49 120 198",
+    "--edu-second-accent": "245 158 11",
+    "--edu-third-accent": "236 72 153",
+    "--edu-border": "229 231 235",
+    "--edu-muted": "243 244 246",
+    "--edu-radius": "0.375rem",
+    "--edu-shadow-color": "0 0 0",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  },
+  "default-dark": {
+    "--edu-bg": "15 23 42",
+    "--edu-card": "30 41 59",
+    "--edu-ink": "241 245 249",
+    "--edu-second-ink": "203 213 225",
+    "--edu-third-ink": "148 163 184",
+    "--edu-inverted-ink": "15 23 42",
+    "--edu-success": "74 222 128",
+    "--edu-error": "248 113 113",
+    "--edu-warning": "250 204 21",
+    "--edu-neutral": "56 189 248",
+    "--edu-first-accent": "96 165 250",
+    "--edu-second-accent": "251 191 36",
+    "--edu-third-accent": "244 114 182",
+    "--edu-border": "71 85 105",
+    "--edu-muted": "51 65 85",
+    "--edu-radius": "0.375rem",
+    "--edu-shadow-color": "2 6 23",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  },
+  "ocean-light": {
+    "--edu-bg": "239 246 255",
+    "--edu-card": "255 255 255",
+    "--edu-ink": "8 47 73",
+    "--edu-second-ink": "14 116 144",
+    "--edu-third-ink": "8 145 178",
+    "--edu-inverted-ink": "239 246 255",
+    "--edu-success": "5 150 105",
+    "--edu-error": "225 29 72",
+    "--edu-warning": "245 158 11",
+    "--edu-neutral": "2 132 199",
+    "--edu-first-accent": "6 182 212",
+    "--edu-second-accent": "59 130 246",
+    "--edu-third-accent": "14 165 233",
+    "--edu-border": "186 230 253",
+    "--edu-muted": "224 242 254",
+    "--edu-radius": "0.5rem",
+    "--edu-shadow-color": "8 47 73",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  },
+  "ocean-dark": {
+    "--edu-bg": "8 47 73",
+    "--edu-card": "12 74 110",
+    "--edu-ink": "236 254 255",
+    "--edu-second-ink": "165 243 252",
+    "--edu-third-ink": "103 232 249",
+    "--edu-inverted-ink": "8 47 73",
+    "--edu-success": "52 211 153",
+    "--edu-error": "251 113 133",
+    "--edu-warning": "251 191 36",
+    "--edu-neutral": "34 211 238",
+    "--edu-first-accent": "103 232 249",
+    "--edu-second-accent": "56 189 248",
+    "--edu-third-accent": "45 212 191",
+    "--edu-border": "14 116 144",
+    "--edu-muted": "14 116 144",
+    "--edu-radius": "0.5rem",
+    "--edu-shadow-color": "8 47 73",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  },
+  "forest-light": {
+    "--edu-bg": "240 253 244",
+    "--edu-card": "255 255 255",
+    "--edu-ink": "20 83 45",
+    "--edu-second-ink": "22 101 52",
+    "--edu-third-ink": "74 124 89",
+    "--edu-inverted-ink": "240 253 244",
+    "--edu-success": "22 163 74",
+    "--edu-error": "220 38 38",
+    "--edu-warning": "234 179 8",
+    "--edu-neutral": "34 197 94",
+    "--edu-first-accent": "34 197 94",
+    "--edu-second-accent": "132 204 22",
+    "--edu-third-accent": "16 185 129",
+    "--edu-border": "187 247 208",
+    "--edu-muted": "220 252 231",
+    "--edu-radius": "0.5rem",
+    "--edu-shadow-color": "20 83 45",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  },
+  "forest-dark": {
+    "--edu-bg": "20 83 45",
+    "--edu-card": "22 101 52",
+    "--edu-ink": "240 253 244",
+    "--edu-second-ink": "187 247 208",
+    "--edu-third-ink": "134 239 172",
+    "--edu-inverted-ink": "20 83 45",
+    "--edu-success": "74 222 128",
+    "--edu-error": "248 113 113",
+    "--edu-warning": "250 204 21",
+    "--edu-neutral": "74 222 128",
+    "--edu-first-accent": "134 239 172",
+    "--edu-second-accent": "190 242 100",
+    "--edu-third-accent": "52 211 153",
+    "--edu-border": "34 197 94",
+    "--edu-muted": "21 128 61",
+    "--edu-radius": "0.5rem",
+    "--edu-shadow-color": "20 83 45",
+    "--edu-pad": "1rem",
+    "--edu-mar": "0"
+  }
 };
+var defaultCognikitThemeVariables = cognikitThemePresets["default-light"];
 var cognikitConfig = {
   audioBaseUrl: null,
   soundFiles: {},
   injectThemeVariables: true,
+  theme: null,
   themeVariables: {}
 };
 var THEME_STYLE_ID = "cognikit-theme-variables";
@@ -2932,6 +3041,12 @@ function configureCognikit(config) {
   if (config.injectThemeVariables !== void 0) {
     cognikitConfig.injectThemeVariables = config.injectThemeVariables;
   }
+  if (config.theme !== void 0) {
+    cognikitConfig.theme = config.theme;
+  }
+  if (config.themeVariables === null) {
+    cognikitConfig.themeVariables = {};
+  }
   if (config.themeVariables) {
     cognikitConfig.themeVariables = {
       ...cognikitConfig.themeVariables,
@@ -2943,28 +3058,54 @@ function configureCognikit(config) {
 function getCognikitConfig() {
   return cognikitConfig;
 }
+function getCognikitThemePresets() {
+  return cognikitThemePresets;
+}
+function resolveCognikitTheme(theme = cognikitConfig.theme, themeVariables = cognikitConfig.themeVariables) {
+  const baseTheme = theme ? cognikitThemePresets[theme] : defaultCognikitThemeVariables;
+  return {
+    ...baseTheme,
+    ...themeVariables
+  };
+}
+function setCognikitTheme(theme, themeVariables) {
+  cognikitConfig.theme = theme;
+  if (themeVariables !== void 0) {
+    cognikitConfig.themeVariables = { ...themeVariables };
+  }
+  ensureCognikitTheme();
+}
+function resetCognikitTheme() {
+  cognikitConfig.theme = null;
+  cognikitConfig.themeVariables = {};
+  ensureCognikitTheme();
+}
 function ensureCognikitTheme() {
-  if (typeof document === "undefined" || !cognikitConfig.injectThemeVariables) {
+  if (typeof document === "undefined") {
     return;
   }
-  const root = document.documentElement;
-  const computed = window.getComputedStyle(root);
-  const nextTheme = {
-    ...defaultCognikitThemeVariables,
-    ...cognikitConfig.themeVariables
-  };
   let style = document.getElementById(THEME_STYLE_ID);
   if (!style) {
     style = document.createElement("style");
     style.id = THEME_STYLE_ID;
     document.head.appendChild(style);
   }
-  const missingEntries = Object.entries(nextTheme).filter(([name]) => {
+  if (!cognikitConfig.injectThemeVariables) {
+    style.textContent = "";
+    return;
+  }
+  const root = document.documentElement;
+  const computed = window.getComputedStyle(root);
+  const nextTheme = resolveCognikitTheme();
+  const shouldApplyExplicitTheme = cognikitConfig.theme !== null || Object.keys(cognikitConfig.themeVariables).length > 0;
+  if (shouldApplyExplicitTheme) {
+    style.textContent = renderThemeCss(nextTheme);
+    return;
+  }
+  const missingEntries = Object.entries(defaultCognikitThemeVariables).filter(([name]) => {
     return computed.getPropertyValue(name).trim() === "";
   });
-  style.textContent = missingEntries.length === 0 ? "" : `:root {
-${missingEntries.map(([name, value]) => `  ${name}: ${value};`).join("\n")}
-}`;
+  style.textContent = missingEntries.length === 0 ? "" : renderThemeCss(Object.fromEntries(missingEntries));
 }
 function resolveConfiguredSoundUrl(soundName, defaultFilename) {
   const configured = cognikitConfig.soundFiles[soundName];
@@ -2994,6 +3135,11 @@ function resolveBaseUrl(baseUrl) {
 function isAbsoluteUrl(url) {
   return /^https?:\/\//.test(url);
 }
+function renderThemeCss(themeVariables) {
+  return `:root {
+${Object.entries(themeVariables).map(([name, value]) => `  ${name}: ${value};`).join("\n")}
+}`;
+}
 
 // src/interactions/registry.ts
 var interactionsRegistry = /* @__PURE__ */ new Map();
@@ -3683,6 +3829,7 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 
 :host {
 	display: inline-block;
+	container-type: size;
 	--chip-color: rgb(var(--edu-first-accent));
 	--chip-colored-color: #d1d1d1;
 }
@@ -3690,20 +3837,36 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 :host([colored]) {
 	& .chip-container { position: relative; }
 
+	& .content-zone {
+		border-color: color-mix(in srgb, var(--chip-colored-color) 55%, rgb(var(--edu-border)));
+		background:
+			linear-gradient(
+				180deg,
+				color-mix(in srgb, var(--chip-colored-color) 18%, rgb(var(--edu-card))) 0%,
+				rgb(var(--edu-card)) 44%
+			);
+		box-shadow:
+			inset 0 4px 0 color-mix(in srgb, var(--chip-colored-color) 85%, white 15%),
+			0 0 0 1px color-mix(in srgb, var(--chip-colored-color) 22%, transparent);
+	}
+
 	& .chip-container::after {
 		content: '';
 		position: absolute;
-		top: -2px;
-		left: -2px;
-		right: -2px;
-		bottom: -2px;
+		top: 0.25rem;
+		left: 0.25rem;
+		right: 0.25rem;
+		height: 0.4rem;
 		border-radius: 10px;
-		background: var(--chip-colored-color);
-		opacity: 0.18;
-		mix-blend-mode: multiply;
+		background: color-mix(in srgb, var(--chip-colored-color) 90%, white 10%);
+		opacity: 0.95;
 		z-index: 2;
 		pointer-events: none;
 	}
+
+	& .prefix {
+		color: color-mix(in srgb, var(--chip-colored-color) 82%, rgb(var(--edu-ink)));
+	}
 }
 
 :host([aria-disabled]) {
@@ -3716,7 +3879,8 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	flex-direction: column;
 	align-items: center;
 	position: relative;
-	width: 100%;height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 ::slotted(img.chip-image) {
@@ -3750,8 +3914,9 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	border: 1px solid rgb(var(--edu-border));
 	padding: 0.5rem 1rem;
 	cursor: pointer;
-	font-size: 1rem;
+	font-size: clamp(0.95rem, min(12cqi, 24cqb), 2.35rem);
 	font-weight: 500;
+	line-height: 1.2;
 	text-align: center;
 	transition: all 0.2s ease;
 	user-select: none;
@@ -3789,6 +3954,7 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	align-items: center;
 	justify-content: center;
 	min-width: 0;
+	overflow-wrap: anywhere;
 }
 
 /* ==================== MODALITY ACTION BUTTON ==================== */
@@ -3976,38 +4142,45 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 /* ==================== VARIANT: PLAYFUL ==================== */
 
 :host([variant="playful"]) .content-zone {
-	background: var(--chip-color); 
-	color: rgb(var(--edu-inverted-ink));
-	border-radius: 12px;
-	border: none;
-	box-shadow: 0 4px 12px rgb(var(--chip-color) / 0.3);
+	background:
+		linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.9));
+	color: rgb(var(--edu-ink));
+	border-radius: 14px;
+	border: 2px solid rgb(var(--edu-border));
+	box-shadow: 0 6px 14px rgb(var(--edu-shadow-color) / 0.12);
 	font-weight: 600;
 }
 
 :host([variant="playful"]) .content-zone:hover:not([aria-disabled="true"]) {
-	box-shadow: 0 6px 16px rgba(var(--chip-color), 0.4);
+	transform: translateY(-2px) rotate(-1deg);
+	border-color: rgb(var(--edu-first-accent) / 0.5);
+	box-shadow: 0 10px 22px rgb(var(--edu-shadow-color) / 0.18);
 }
 
 :host([variant="playful"]) .content-zone:active:not([aria-disabled="true"]) {
+	transform: translateY(0) rotate(0deg);
 }
 
 :host([variant="playful"]) .prefix {
-	color: rgb(var(--edu-inverted-ink));
-	opacity: 0.9;
+	color: var(--chip-color);
+	opacity: 1;
 }
 
 :host([variant="playful"]) .modality-action {
-	background: rgb(var(--edu-card));
-	color: var(--chip-color);
+	background: var(--chip-color);
+	color: rgb(var(--edu-inverted-ink));
 }
 
 :host([variant="playful"][selected]) .content-zone {
-	box-shadow: 0 0 0 3px rgb(var(--edu-first-accent) / 0.4), 0 6px 16px rgb(var(--edu-first-accent) / 0.4);
+	background:
+		linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted)));
+	border-color: var(--chip-color);
+	box-shadow: 0 0 0 3px rgb(var(--chip-color) / 0.22), 0 10px 22px rgb(var(--edu-shadow-color) / 0.16);
 }
 
 :host([variant="playful"]) ::slotted(img.chip-image) {
-	border: 4px solid rgb(var(--edu-border) / 0.6);
-	border-radius: 4px;
+	border: 3px solid rgb(var(--edu-border) / 0.6);
+	border-radius: 8px;
 }
 
 
@@ -4072,7 +4245,6 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	border-radius: 2px;
 	background: rgb(var(--edu-card));
 	color: rgb(var(--edu-ink));
-	font-size: 0.95rem;
 	letter-spacing: 0.5px;
 }
 
@@ -4100,82 +4272,88 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 /* ==================== VARIANT: MINIMAL ==================== */
 
 :host([variant="minimal"]) .content-zone {
-	background: rgb(var(--edu-card));
+	background: transparent;
 	border: 1px solid rgb(var(--edu-border));
-	border-radius: 6px;
-	color: rgb(var(--edu-ink));
-	padding: 0.4rem 0.75rem;
-	font-size: 0.9rem;
+	border-radius: 10px;
+	color: rgb(var(--edu-second-ink));
+	padding: 0.45rem 0.85rem;
 }
 
 :host([variant="minimal"]) .content-zone:hover:not([aria-disabled="true"]) {
-	border-color: rgba(var(--chip-color), 0.5);
-	box-shadow: 0 1px 4px rgba(var(--edu-shadow-color), 0.1);
+	background: rgb(var(--edu-card) / 0.8);
+	color: rgb(var(--edu-ink));
+	border-color: rgb(var(--edu-first-accent) / 0.35);
+	box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.08);
 }
 
 :host([variant="minimal"][selected]) .content-zone {
 	border-color: var(--chip-color);
 	background: rgba(var(--chip-color), 0.08);
+	color: rgb(var(--edu-ink));
 }
 
 /* ==================== VARIANT: GLASS ==================== */
 
 :host([variant="glass"]) .content-zone {
-	background: rgb(var(--edu-card));
-	border: 2px solid rgb(var(--edu-border));
-	border-radius: 0;
+	background: rgb(var(--edu-card) / 0.65);
+	backdrop-filter: blur(10px);
+	border: 1px solid rgb(var(--edu-border) / 0.6);
+	border-radius: 14px;
 	color: rgb(var(--edu-ink));
-	padding: 0.5rem 1.2rem;
-	font-weight: 700;
-	letter-spacing: 1.5px;
-	font-size: 0.9rem;
+	padding: 0.5rem 1rem;
+	font-weight: 600;
+	letter-spacing: 0.03em;
+	box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.8), 0 8px 20px rgb(var(--edu-shadow-color) / 0.12);
 }
 
 :host([variant="glass"]) .content-zone:hover:not([aria-disabled="true"]) {
-	background: var(--chip-color);
-	color: rgb(var(--edu-inverted-ink));
-	border-color: var(--chip-color);
+	background: rgb(var(--edu-card) / 0.78);
+	border-color: rgb(var(--edu-first-accent) / 0.45);
+	box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.9), 0 12px 24px rgb(var(--edu-shadow-color) / 0.16);
 }
 
 :host([variant="glass"]) .content-zone:active:not([aria-disabled="true"]) {
-	background: rgba(var(--chip-color), 0.9);
+	background: rgb(var(--edu-card) / 0.88);
 }
 
 :host([variant="glass"]) .prefix {
-	font-weight: 800;
+	font-weight: 700;
+	color: rgb(var(--edu-first-accent));
 }
 
 :host([variant="glass"][selected]) .content-zone {
 	background: rgba(var(--chip-color), 0.15);
 	border-color: var(--chip-color);
-	box-shadow: 0 0 0 2px rgba(var(--chip-color), 0.3);
+	box-shadow: 0 0 0 2px rgba(var(--chip-color), 0.24), inset 0 1px 0 rgb(var(--edu-card) / 0.85);
 }
 
 /* ==================== VARIANT: CARD ==================== */
 
 :host([variant="card"]) .content-zone {
-	background: transparent;
-	border: 2px solid rgb(var(--edu-border));
-	border-radius: 4px;
+	background: rgb(var(--edu-card));
+	border: 1px solid rgb(var(--edu-border));
+	border-radius: 12px;
 	color: rgb(var(--edu-ink));
+	box-shadow: 0 8px 18px rgb(var(--edu-shadow-color) / 0.1);
 }
 
 :host([variant="card"]) .content-zone:hover:not([aria-disabled="true"]) {
-	background: rgb(var(--edu-muted));
-	border-color: var(--chip-color);
+	background: linear-gradient(180deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.8));
+	border-color: rgb(var(--edu-first-accent) / 0.35);
+	box-shadow: 0 12px 24px rgb(var(--edu-shadow-color) / 0.14);
 }
 
 :host([variant="card"]) .content-zone:active:not([aria-disabled="true"]) {
-	background: rgb(var(--edu-border));
+	transform: translateY(1px);
 }
 
 :host([variant="card"]) .prefix {
-	color: var(--chip-color);
+	color: rgb(var(--edu-third-ink));
 }
 
 :host([variant="card"][selected]) .content-zone {
 	border-color: var(--chip-color);
-	box-shadow: 0 0 0 3px rgba(var(--chip-color), 0.2);
+	box-shadow: 0 0 0 3px rgba(var(--chip-color), 0.18), 0 12px 24px rgb(var(--edu-shadow-color) / 0.12);
 }
 
 /* ==================== VARIANT: SIGN ==================== */
@@ -4185,9 +4363,8 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	border-radius: 0;
 	color: rgb(var(--edu-ink));
 	padding: 0.5rem 1.2rem;
-	font-size: 0.9rem;
 	font-weight: bold;
-	transform: skewX(-10deg);
+	transform: skewX(-3deg);
 	text-transform: uppercase;
 	letter-spacing: 0.2rem;
 }
@@ -4713,16 +4890,17 @@ var HTML2 = `
 	}
 
 	.block[variant="playful"] {
-		background: var(--accent-color);
-		border: none;
-		color: rgb(var(--edu-inverted-ink));
+		background: linear-gradient(135deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.92));
+		border: 2px solid rgb(var(--edu-border));
+		color: rgb(var(--edu-ink));
 		border-radius: 16px;
-		box-shadow: 2px 2px 0px rgba(var(--edu-shadow-color) / 0.2);
+		box-shadow: 0 6px 14px rgb(var(--edu-shadow-color) / 0.12);
 	}
 
 	.block[variant="playful"]:hover {
-		transform: translateY(-2px) rotate(-2deg);
-		box-shadow: 0 6px 16px rgba(var(--edu-first-accent), 0.4);
+		transform: translateY(-2px) rotate(-1deg);
+		border-color: color-mix(in srgb, var(--accent-color) 38%, rgb(var(--edu-border)));
+		box-shadow: 0 10px 22px rgb(var(--edu-shadow-color) / 0.18);
 	}
 
 	.block[variant="outline"] {
@@ -4753,40 +4931,45 @@ var HTML2 = `
 	}
 
 	.block[variant="minimal"] {
-		background: rgb(var(--edu-card));
-		color: rgb(var(--edu-ink));
+		background: transparent;
+		color: rgb(var(--edu-second-ink));
 		border: 1px solid rgb(var(--edu-border));
-		border-radius: 6px;
+		border-radius: 10px;
 		padding: 0.75rem;
 	}
 
 	.block[variant="minimal"]:hover {
-		border-color: rgb(var(--edu-first-accent) / 0.5);
-		box-shadow: 0 1px 4px rgba(var(--edu-shadow-color), 0.1);
+		background: rgb(var(--edu-card) / 0.8);
+		color: rgb(var(--edu-ink));
+		border-color: rgb(var(--edu-first-accent) / 0.35);
+		box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.08);
 	}
 
 	.block[variant="glass"] {
 		background: rgba(var(--edu-card), 0.7);
 		backdrop-filter: blur(10px);
-		border: 2px solid rgba(var(--edu-border), 0.35);
-		border-radius: 12px;
+		border: 1px solid rgba(var(--edu-border), 0.45);
+		border-radius: 14px;
+		box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.85), 0 8px 20px rgba(var(--edu-shadow-color), 0.12);
 	}
 
 	.block[variant="glass"]:hover {
-		background: rgba(var(--edu-card), 0.85);
-		border-color: rgba(var(--edu-first-accent), 0.5);
+		background: rgba(var(--edu-card), 0.82);
+		border-color: rgba(var(--edu-first-accent), 0.4);
+		box-shadow: inset 0 1px 0 rgb(var(--edu-card) / 0.95), 0 12px 24px rgba(var(--edu-shadow-color), 0.16);
 	}
 
 	.block[variant="card"] {
 		background: rgb(var(--edu-card));
-		border: 2px solid rgb(var(--edu-border));
-		border-radius: 8px;
-		box-shadow: 0 2px 8px rgba(var(--edu-shadow-color), 0.08);
+		border: 1px solid rgb(var(--edu-border));
+		border-radius: 12px;
+		box-shadow: 0 8px 18px rgba(var(--edu-shadow-color), 0.1);
 	}
 
 	.block[variant="card"]:hover {
-		border-color: rgb(var(--edu-first-accent));
-		box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.12);
+		background: linear-gradient(180deg, rgb(var(--edu-card)), rgb(var(--edu-muted) / 0.8));
+		border-color: rgb(var(--edu-first-accent) / 0.35);
+		box-shadow: 0 12px 24px rgba(var(--edu-shadow-color), 0.14);
 	}
 
 	.block[variant="sign"] {
@@ -4802,7 +4985,7 @@ var HTML2 = `
 
 	.block[variant="sign"]:hover {
 		border-color: var(--accent-color);
-		background: var(accent-color);
+		background: rgb(var(--edu-muted));
 	}
 
 	.block[variant="empty"] {
@@ -4866,7 +5049,7 @@ var EduBlock = class extends HTMLElement {
 if (!customElements.get("edu-block")) customElements.define("edu-block", EduBlock);
 
 // src/interactions/shared/classification-implementation/grader.ts
-function classificationGrader(correctData, userData, els) {
+function classificationGrader(correctData, userData, els, distractors) {
   let correctCount = 0;
   let totalCount = 0;
   correctData.forEach((category) => {
@@ -4880,6 +5063,17 @@ function classificationGrader(correctData, userData, els) {
       } else el.chipState = "wrong";
     });
   });
+  if (distractors) {
+    distractors.forEach((distractor) => {
+      totalCount++;
+      const userCategory = userData.get(distractor);
+      const el = els.querySelector(`[data-label="${distractor}"]`);
+      if (userCategory === "Invalid") {
+        correctCount++;
+        el.chipState = "correct";
+      } else el.chipState = "wrong";
+    });
+  }
   const score = totalCount > 0 ? Math.round(correctCount / totalCount * 100) : 0;
   return { score, correct: correctCount, total: totalCount };
 }
@@ -4889,10 +5083,10 @@ var OpenClassification = class extends BaseInteraction {
   constructor(data, config, assets) {
     super(data, config, assets);
     this.interactionMechanic = "static";
-    this.categories = ["none"];
+    this.categories = [];
     this.allItems = [];
     this.categoryColors = [
-      "#94a3b8",
+      "#6366f1",
       "#3b82f6",
       "#10b981",
       "#f59e0b",
@@ -4901,7 +5095,7 @@ var OpenClassification = class extends BaseInteraction {
       "#ec4899",
       "#14b8a6",
       "#f97316",
-      "#6366f1"
+      "#94a3b8"
     ];
     this.currentColor = this.categoryColors[0];
     this.data.categories.forEach(({ label, items }) => {
@@ -4911,6 +5105,7 @@ var OpenClassification = class extends BaseInteraction {
     this.currentCategory = this.categories[0];
     if (this.data.distractors) {
       this.allItems.push(...this.data.distractors);
+      this.categories.push("Invalid");
     }
     this.allItems = shuffle(this.allItems);
     this.categorized = /* @__PURE__ */ new Map();
@@ -4932,7 +5127,7 @@ var OpenClassification = class extends BaseInteraction {
     this.innerHTML = `
 			<style>
 				open-classification {
-					--current-color: #94a3b8;
+					--current-color: #aa94b8;
 					display: flex;
 					width: 100%;
 					height: 100%;
@@ -4977,7 +5172,7 @@ var OpenClassification = class extends BaseInteraction {
 				.items-container {
 					display: grid;
 					grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
-					grid-auto-rows: minmax(44px, 1fr);
+					grid-auto-rows: minmax(clamp(56px, 12cqh, 88px), 1fr);
 					gap: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
 					padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1.25rem);
 					background: rgb(var(--edu-muted));
@@ -5178,14 +5373,13 @@ var OpenClassification = class extends BaseInteraction {
   // ==================== GRADING ====================
   submit() {
     super.submit();
-    const result = classificationGrader(this.data.categories, this.categorized, this);
+    const result = classificationGrader(this.data.categories, this.categorized, this, this.data.distractors);
     console.log(`Classification Score: ${result.score.toFixed(1)}% (${result.correct}/${result.total} correct)`);
     this.dispatchEvent(new CustomEvent("interaction:graded", {
       detail: { result },
       bubbles: true,
       composed: true
     }));
-    this.setAttribute("inert", "");
   }
   // ==================== RESET ====================
   reset() {
@@ -5330,6 +5524,7 @@ var SequentialClassification = class extends BaseInteraction {
 					gap: clamp(0.5rem, min(1.5cqw, 1.5cqh), 1rem);
 					overflow-y: auto;
 					overflow-x: hidden;
+					scrollbar-gutter: stable;
 					align-content: stretch;
 					padding: clamp(0.25rem, min(1cqw, 1cqh), 0.5rem);
 					min-height: 0;
@@ -5373,11 +5568,17 @@ var SequentialClassification = class extends BaseInteraction {
 
 				edu-chip {
 					position: absolute;
+					width: clamp(160px, 20cqw, 280px);
+					max-width: calc(100% - 0.5rem);
 					user-select: none;
 					touch-action: none;
 					transition: transform 0.2s ease;
 				}
 
+				edu-chip::part(content-zone) {
+					min-height: clamp(56px, 10cqh, 88px);
+				}
+
 				edu-chip:hover {
 					transform: scale(1.05);
 				}
@@ -6168,9 +6369,9 @@ var MCQ = class extends BaseInteraction {
     this.data.data.forEach((q) => {
       this.userAnswers[q.question] = [];
       if (this.config.shuffle) {
-        this.shuffledOptions.set(q.question, shuffle([...q.options]));
+        this.shuffledOptions.set(q.question, shuffle([...q.options, ...q.correctOptions]));
       } else {
-        this.shuffledOptions.set(q.question, [...q.options]);
+        this.shuffledOptions.set(q.question, [...q.options, ...q.correctOptions]);
       }
     });
     this.variant = this.config.variant;
@@ -6243,17 +6444,17 @@ var MCQ = class extends BaseInteraction {
 					flex-shrink: 0;
 					display: flex;
 					flex-direction: column;
-					min-height: clamp(64px, 10cqh, 120px);
-					max-height: clamp(120px, 30cqh, 260px);
+					min-height: clamp(88px, 16cqh, 160px);
+					max-height: clamp(132px, 32cqh, 280px);
 					overflow: hidden;
 				}
 
 				.question-text {
 					padding: 0;
-					font-size: clamp(0.95rem, 2.4cqh, 1.2rem);
+					font-size: clamp(1.05rem, 2.6cqh, 1.45rem);
 					font-weight: 600;
 					color: rgb(var(--edu-ink));
-					line-height: 1.4;
+					line-height: 1.35;
 				}
 
 				.divider {
@@ -6317,7 +6518,7 @@ var MCQ = class extends BaseInteraction {
 					border: none;
 					padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
 					height: 100%;
-					max-height: clamp(120px, 30cqh, 260px);
+					max-height: clamp(132px, 32cqh, 280px);
 					overflow: auto;
 					align-items: center;
 					justify-content: flex-start;
@@ -6689,7 +6890,7 @@ var SimultaneousAssociation = class extends BaseInteraction {
 				.items-list {
 					display: grid;
 					grid-template-columns: 1fr;
-					grid-auto-rows: minmax(44px, 1fr);
+					grid-auto-rows: minmax(clamp(56px, 12cqh, 88px), 1fr);
 					gap: clamp(0.35rem, min(1.2cqw, 1.2cqh), 0.75rem);
 					min-height: 0;
 					height: 100%;
@@ -6911,8 +7112,8 @@ var ListRecall = class extends BaseInteraction {
 				.chips-container {
 					flex: 1;
 					display: grid;
-					grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
-					grid-auto-rows: minmax(44px, auto);
+					grid-template-columns: 1fr 1fr;
+					grid-auto-rows: minmax(56px, auto);
 					gap: clamp(0.4rem, min(1.4cqw, 1.4cqh), 0.75rem);
 					padding: clamp(0.5rem, min(1.6cqw, 1.6cqh), 1rem);
 					border: 2px dashed rgb(var(--edu-border));
@@ -12363,7 +12564,7 @@ var RankOrder = class extends BaseInteraction {
     // Scalability constants
     this.MAX_ITEMS = 10;
     // Cognitive Ceiling
-    this.MIN_ITEM_HEIGHT = 44;
+    this.MIN_ITEM_HEIGHT = 56;
     if (!this.isValid || !this.data || !this.config) return;
     const items = this.data.items;
     this.data.items = items;
@@ -13177,13 +13378,6 @@ var simple_shell_default = `<header part='header'>
 	<div class="radio-nav" part="radio-nav"></div>
 	<div class="action-buttons">
 		<button class="check-btn" type="button" part="check">Check</button>
-
-		<button class="see-answers-btn btn" title="See answers" part="see-answers">
-			<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-				<path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z"/>
-				<circle cx="12" cy="12" r="3"/>
-			</svg>
-		</button>
 		<button class="retry-btn btn" title="Retry" part="retry">
 			<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
 				<path d="M17 2v4h-4"/>
@@ -13205,7 +13399,7 @@ var simple_shell_default = `<header part='header'>
 `;
 
 // src/shell/simple-shell/styles.css
-var styles_default4 = ':host {\n	display: flex;\n	width: 100%;\n	height: 100%;\n	box-sizing: border-box;\n	container-type: size;\n}\n\n.edu-hidden { display: none !important; }\n\n.wrap {\n	display: flex;\n	flex-direction: column;\n	width: 100%;\n	height: 100%;\n	color: rgb(var(--edu-ink));\n	background: rgb(var(--edu-bg));\n	overflow: hidden;\n	box-sizing: border-box;\n}\n\nheader {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding: clamp(0.2rem, 0.7cqh, 0.4rem);\n	border-bottom: 1px solid rgb(var(--edu-border));\n	flex-shrink: 0;\n	gap: clamp(0.25rem, 1cqw, 0.5rem);\n	height: clamp(38px, 7cqh, 46px);\n	min-height: clamp(38px, 7cqh, 46px);\n}\n\n.prompt-container {\n	display: flex;\n	min-width: 0;\n	gap: clamp(0.25rem, 1cqw, 0.5rem);\n	align-items: center;\n	flex: 1;\n}\n\n.title {\n	flex: 1;\n	min-width: 0;\n	padding: 0;\n	font-size: clamp(0.85rem, 2cqh, 1.05rem);\n	font-weight: 700;\n	line-height: 1.2;\n	white-space: nowrap;\n	overflow: hidden;\n	text-overflow: ellipsis;\n}\n\n.timer {\n	padding: 0;\n	font-size: clamp(0.75rem, 1.6cqh, 0.9rem);\n	font-weight: 600;\n	color: rgb(var(--edu-second-ink));\n	font-variant-numeric: tabular-nums;\n	cursor: pointer;\n}\n\n.timer[data-warning="true"] {\n	color: rgb(var(--edu-warning));\n}\n\n.timer[data-danger="true"] {\n	color: rgb(var(--edu-error));\n}\n\n.content {\n	flex: 1;\n	overflow: hidden;\n	min-height: 0;\n	padding: clamp(0.5rem, min(2cqw, 2cqh), 1rem);\n	box-sizing: border-box;\n	position: relative;\n	display: flex;\n}\n\n.screen {\n	display: flex;\n	width: 100%;\n	height: 100%;\n	box-sizing: border-box;\n	animation: fadeIn 1s ease;\n	flex: 1;\n	min-height: 0;\n}\n\n.screen[data-screen="interaction"] {\n	justify-content: stretch;\n	align-items: stretch;\n}\n\n.screen:not([data-screen="interaction"]) {\n	justify-content: center;\n	align-items: center;\n}\n\n.screen[data-screen="interaction"] ::slotted(*) {\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	display: block;\n}\n\n@keyframes fadeIn {\n	from {\n		opacity: 0;\n		transform: translateY(10px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.error-content,\n.attempts-message,\n.score-display,\n.timer-display {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: center;\n	text-align: center;\n	height: 100%;\n	color: rgb(var(--edu-ink));\n}\n\n.timer-display .timer {\n	font-size: 10rem !important;\n	color: rgb(var(--edu-ink)) !important;\n}\n\n.error-content {\n	color: rgb(var(--edu-error));\n}\n\n.attempts-message {\n	font-weight: 600;\n	font-size: 1.25rem;\n}\n\nfooter {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	justify-content: center;\n	align-items: center;\n	/* padding: clamp(0.3rem, 0.8cqh, 0.6rem);*/ \n	gap: clamp(0.25rem, 0.8cqh, 0.5rem);\n	flex-shrink: 0;\n	height: clamp(20px, 9cqh, 62px);\n	min-height: clamp(50px, 9cqh, 62px);\n}\n\n.progress-container {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: clamp(0.25rem, 1cqw, 0.6rem);\n	width: 100%;\n}\n\n.progress-bar {\n	flex: 1;\n	height: clamp(8px, 1.6cqh, 12px);\n	appearance: none;\n	-webkit-appearance: none;\n	border: none;\n}\n\n.progress-bar::-webkit-progress-bar {\n	background-color: rgb(var(--edu-muted));\n	border-radius: 10px;\n}\n\n.progress-bar::-webkit-progress-value {\n	background: rgb(var(--edu-first-accent));\n	border-radius: 10px;\n	transition: width 0.3s ease, background 0.3s ease;\n}\n\n.progress-bar::-moz-progress-bar {\n	background: rgb(var(--edu-first-accent));\n	border-radius: 10px;\n	transition: width 0.3s ease, background 0.3s ease;\n}\n\n/* Score-based progress bar coloring */\n.progress-bar.score-fail::-webkit-progress-value {\n	background: rgb(var(--edu-error)) !important;\n}\n\n.progress-bar.score-fail::-moz-progress-bar {\n	background: rgb(var(--edu-error)) !important;\n}\n\n.progress-bar.score-low::-webkit-progress-value {\n	background: rgb(var(--edu-warning)) !important;\n}\n\n.progress-bar.score-low::-moz-progress-bar {\n	background: rgb(var(--edu-warning)) !important;\n}\n\n.progress-bar.score-mid::-webkit-progress-value {\n	background: rgb(139, 195, 74) !important; /* Light green */\n}\n\n.progress-bar.score-mid::-moz-progress-bar {\n	background: rgb(139, 195, 74) !important;\n}\n\n.progress-bar.score-high::-webkit-progress-value {\n	background: rgb(var(--edu-success)) !important;\n}\n\n.progress-bar.score-high::-moz-progress-bar {\n	background: rgb(var(--edu-success)) !important;\n}\n\n.progress-icon-wrapper {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	max-width: 24px;\n	max-height: 24px;\n	position: absolute;\n	left: 0;\n	top: 50%;\n	transform: translateY(-50%);\n	pointer-events: none;\n	transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;\n	background-color: rgb(var(--edu-first-accent));\n	border-radius: 50px;\n	box-shadow: 0 0 10px 5px rgb(var(--edu-first-accent));\n	padding: 0;\n}\n\n/* Score-based icon coloring */\n.progress-icon-wrapper.score-fail {\n	background-color: rgb(var(--edu-error));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-error));\n}\n\n.progress-icon-wrapper.score-low {\n	background-color: rgb(var(--edu-warning));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-warning));\n}\n\n.progress-icon-wrapper.score-mid {\n	background-color: rgba(139, 195, 74, 0.8);\n	box-shadow: 0 0 10px 5px rgba(139, 195, 74, 0.8);\n}\n\n.progress-icon-wrapper.score-high {\n	background-color: rgb(var(--edu-success));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-success));\n}\n\n.progress-icon {\n	width: clamp(20px, 3.2cqh, 30px);\n	height: clamp(20px, 3.2cqh, 30px);\n}\n\n.progress-counter {\n	font-size: clamp(0.7rem, 1.4cqh, 0.85rem);\n	font-weight: 600;\n	color: rgb(var(--edu-second-ink));\n	min-width: 3rem;\n	text-align: right;\n	flex-shrink: 0;\n}\n\n.action-buttons {\n	display: flex;\n	gap: 0.5rem;\n	align-items: center;\n	justify-content: center;\n	flex-wrap: wrap;\n}\n\n.check-btn {\n	padding: clamp(0.35rem, 1cqh, 0.6rem) clamp(1rem, 2.6cqw, 1.6rem);\n	font-size: clamp(0.8rem, 1.6cqh, 0.95rem);\n	font-weight: 600;\n	cursor: pointer;\n	border: none;\n	border-radius: var(--edu-radius);\n	background: rgb(var(--edu-first-accent));\n	color: rgb(var(--edu-inverted-ink));\n	transition: all 0.2s ease;\n}\n\n.check-btn:hover:not(:disabled) {\n	background: rgb(var(--edu-first-accent) / 0.9);\n	transform: translateY(-2px) scale(1.02);\n	box-shadow: 0 4px 12px rgb(var(--edu-first-accent) / 0.3);\n}\n\n.check-btn:active:not(:disabled) {\n	transform: translateY(0) scale(0.98);\n	box-shadow: 0 2px 4px rgb(var(--edu-first-accent) / 0.2);\n}\n\n.check-btn:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n\n.btn {\n	padding: clamp(0.25rem, 0.8cqh, 0.4rem);\n	background: transparent;\n	border: 2px solid rgb(var(--edu-border));\n	border-radius: var(--edu-radius);\n	cursor: pointer;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	transition: all 0.2s ease;\n}\n\n.btn:hover {	\n	background: rgb(var(--edu-muted));\n	border-color: rgb(var(--edu-first-accent));\n	transform: translateY(-2px) scale(1.05);\n	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.btn:active {\n	transform: translateY(0) scale(0.95);\n	box-shadow: none;\n}\n\n.radio-nav {\n	display: none;\n	flex-wrap: wrap;\n	gap: 0.5rem;\n	align-items: center;\n	justify-content: center;\n}\n\n.radio-nav[data-active="true"] {\n	display: flex;\n}\n\n@media (max-width: 640px) {\n	.radio-nav {\n		gap: 0.35rem;\n	}\n\n	.radio-nav label {\n		padding: 0.4rem 0.75rem;\n		font-size: 0.875rem;\n	}\n}\n\n.radio-nav input { display: none; }\n\n.radio-nav label {\n	cursor: pointer;\n	transition: all 0.3s ease;\n	padding: 0.5rem 1rem;\n	border-radius: var(--edu-radius);\n	border: 1px solid rgb(var(--edu-border));\n	background: rgb(var(--edu-card));\n	color: rgb(var(--edu-ink));\n	font-weight: 500;\n}\n\n.radio-nav label:hover {\n	border-color: rgb(var(--edu-first-accent));\n}\n\n.radio-nav input:checked + label {\n	background: rgb(var(--edu-first-accent));\n	color: rgb(var(--edu-inverted-ink));\n	border-color: rgb(var(--edu-first-accent));\n}\n\n.actions {\n	display: flex;\n	gap: 0.5rem;\n}\n\n.utils-container {\n	display: flex;\n	justify-content: space-between;\n}\n\n:host([variant="empty"]) {\n	& .wrap { background: transparent; border: none; }\n	& header { border-bottom: none; }\n\n	& .title {\n		padding-bottom: 5px;\n		max-width: fit-content;\n		border-bottom: 5px solid rgb(var(--edu-ink));\n	}\n\n	& .timer {  }\n\n	& .check-btn {\n		background: transparent;\n		color: rgb(var(--edu-ink));\n		border: 2px solid rgb(var(--edu-ink));\n		border-radius: 0;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		color: rgb(var(--edu-inverted-ink));\n		background: rgb(var(--edu-ink));\n		border-color: rgb(var(--edu-ink));\n	}\n\n	& .progress-bar::-webkit-progress-bar {background: transparent}\n	& .progress-bar::-webkit-progress-value {background: rgb(var(--edu-ink))}\n\n	& .radio-nav label {\n		background: transparent;\n		border: 2px solid rgb(var(--edu-ink));\n		border-radius: 0;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-ink));\n		color: rgb(var(--edu-inverted-ink));\n	}\n\n	& .radio-nav label:hover { background-color: rgb(var(--edu-first-accent)) }\n}\n\n:host([variant="minimal"]) {\n	& .wrap {\n		border: 1px solid rgb(var(--edu-border));\n		border-radius: 6px;\n	}\n\n	& .timer {\n		font-size: 0.95rem;\n	}\n\n	& .check-btn {\n		border-radius: 4px;\n	}\n\n	& footer {\n		border-top: 1px solid rgb(var(--edu-border));\n	}\n\n	& .progress-bar {\n		height: 1px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-muted));\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background-color: rgb(var(--edu-ink));\n	}\n\n	& .radio-nav label {\n		border-radius: 4px;\n	}\n}\n\n:host([variant="elegant"]) {\n	& .wrap {\n		border-radius: 10px;\n		box-shadow: 0 10px 30px rgba(var(--edu-shadow-color), 0.15);\n	}\n\n	& .timer {\n		font-family: georgia, serif;\n		font-style: italic;\n		font-size: 1.1rem;\n	}\n\n	& .check-btn {\n		border-radius: 8px;\n		font-size: 1rem;\n	}\n\n	& footer {\n		border-top: 1px solid rgb(var(--edu-border) / 0.5);\n		padding: 1.25rem;\n	}\n\n	& .progress-bar {\n		height: 4px;\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: linear-gradient(90deg, rgb(var(--edu-first-accent)), rgb(var(--edu-first-accent) / 0.6));\n	}\n\n	& .radio-nav label {\n		font-family: georgia, serif;\n		border: none;\n		border-bottom: 2px solid transparent;\n		background: transparent;\n		padding: 0.5rem 1rem;\n	}\n\n	& .radio-nav input:checked + label {\n		color: rgb(var(--edu-first-accent));\n		border-bottom: 2px solid rgb(var(--edu-first-accent));\n		background: transparent;\n		font-style: italic;\n	}\n\n	& label {\n		font-family: georgia, serif;\n		padding: 0.5rem 1rem;\n	}\n}\n\n:host([variant="playful"]) {\n	& .wrap {\n		color: rgb(var(--edu-first-accent));\n		border-radius: 14px;\n		border: 2px dashed rgb(var(--edu-border));\n	}\n\n	& .timer {\n		font-weight: 700;\n		font-size: 1.2rem;\n	}\n\n	& .check-btn {\n		border-radius: 12px;\n		font-weight: 700;\n		text-transform: uppercase;\n		letter-spacing: 0.5px;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		transform: translateY(-2px) rotate(-1deg);\n	}\n\n	& footer {\n		border-top: 2px dashed rgb(var(--edu-border));\n	}\n\n	& .progress-bar {\n		height: 20px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-warning) / 0.3);\n		border-radius: 20px;\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgb(var(--edu-first-accent));\n		border-radius: 20px;\n		border: 3px solid rgb(var(--edu-warning) / 0.3);\n	}\n\n	& .radio-nav label {\n		background: rgb(var(--edu-muted));\n		border-radius: 50px;\n		font-weight: 700;\n	}\n\n	& .radio-nav label:hover {\n		transform: scale(1.1) rotate(-2deg);\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n		box-shadow: 0 5px 15px rgb(var(--edu-first-accent) / 0.4);\n	}\n}\n\n:host([variant="glass"]) {\n	& .wrap {\n		background: rgba(var(--edu-card), 0.7);\n		backdrop-filter: blur(10px);\n		border: 1px solid rgba(var(--edu-border), 0.35);\n		border-radius: 12px;\n	}\n\n	& .check-btn {\n		background: rgba(var(--edu-first-accent), 0.9);\n		backdrop-filter: blur(5px);\n		border-radius: 10px;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		background: rgba(var(--edu-first-accent), 1);\n	}\n\n	& footer {\n		border-top: 1px solid rgba(var(--edu-border), 0.35);\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background: rgba(var(--edu-card), 0.3);\n		backdrop-filter: blur(5px);\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgba(var(--edu-first-accent), 0.7);\n	}\n\n	& .radio-nav label {\n		background: rgba(var(--edu-card), 0.5);\n		backdrop-filter: blur(5px);\n		border: 1px solid rgba(var(--edu-border), 0.35);\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgba(var(--edu-first-accent), 0.8);\n		border-color: rgb(var(--edu-first-accent));\n	}\n}\n\n:host([variant="letter"]) {\n	& .wrap {\n		border: 1px solid rgb(var(--edu-border));\n		font-family: georgia, serif;\n		box-shadow: inset 0 0 0 1px rgba(var(--edu-shadow-color), 0.1);\n		border-radius: 4px;\n	}\n\n	& .timer {\n		font-family: georgia, serif;\n		letter-spacing: 0.5px;\n	}\n\n	& .check-btn {\n		font-family: georgia, serif;\n		border-radius: 2px;\n		font-size: 0.95rem;\n		letter-spacing: 0.5px;\n	}\n\n	& footer {\n		border-top: 1px solid rgb(var(--edu-border));\n		padding: 1rem 1.5rem;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-muted));\n		box-shadow: inset 0 0 0 1px rgba(var(--edu-shadow-color), 0.05);\n	}\n\n	& .radio-nav label {\n		width: 40px;\n		height: 40px;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		padding: 0;\n		background: rgb(var(--edu-third-ink));\n		color: rgb(var(--edu-inverted-ink));\n		font-weight: 900;\n		border-radius: 4px;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-first-accent));\n		transform: translateY(-4px);\n	}\n}\n\n:host([variant="sign"]) {\n	& .wrap {\n		border-radius: 6px;\n		text-transform: uppercase;\n		letter-spacing: 1px;\n		border: 2px solid rgb(var(--edu-border));\n	}\n\n	& .timer {\n		text-transform: uppercase;\n		letter-spacing: 1.5px;\n		font-weight: 800;\n		font-size: 0.9rem;\n	}\n\n	& .check-btn {\n		text-transform: uppercase;\n		letter-spacing: 1.5px;\n		font-weight: 800;\n		font-size: 0.9rem;\n		border-radius: 4px;\n		margin: 0.85rem 2.5rem;\n	}\n\n	& footer {\n		border-top: 2px solid rgb(var(--edu-border));\n	}\n\n	& .title {\n		text-transform: uppercase;\n	}\n\n	& .progress-bar {\n		height: 24px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background: rgb(var(--edu-third-ink));\n		border: 2px solid rgb(var(--edu-third-ink));\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgb(var(--edu-second-accent));\n	}\n\n	& .radio-nav label {\n		background: rgb(var(--edu-third-ink));\n		color: rgb(var(--edu-second-accent));\n		border-left: 4px solid rgb(var(--edu-second-accent));\n		text-transform: uppercase;\n		font-size: 0.8rem;\n		font-weight: 700;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-second-accent));\n		color: rgb(var(--edu-third-ink));\n		border-left-color: rgb(var(--edu-third-ink));\n	}\n}\n\n:host([variant="outline"]) {\n	& .wrap {\n		color: rgb(var(--edu-inverted-ink));\n		background: transparent;\n		border-width: 0 1px 2px 1px;\n		border-style: solid;\n		border-color: rgb(var(--edu-first-accent));\n		background: rgb(var(--edu-bg) / 0.1);\n	}\n\n	& header { background: rgb(var(--edu-first-accent)); color: rgb(var(--edu-inverted-ink)) }\n	& .timer { color: rgb(var(--edu-inverted-ink)) }\n\n	& footer {\n		border-top: none;\n		padding: 0;\n		padding-left: 0.5rem;\n		padding-right: 0.5rem;\n	}\n\n	& .check-btn {\n		font-size: 100%;\n		font-weight: 700;\n		border: none;\n		border-radius: 0;\n		border-top-left-radius: 10px;\n		border-top-right-radius: 10px;\n		color: rgb(var(--edu-inverted-ink));\n		background: rgb(var(--edu-first-accent));\n		margin: 0;\n		padding: 1rem;\n		text-transform: uppercase;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		background: rgb(var(--edu-first-accent) / 0.9);\n		box-shadow: 0 4px 12px rgb(var(--edu-first-accent) / 0.3);\n		transform: none;\n	}\n\n	& .radio-nav label {\n		border: 2px solid rgb(var(--edu-first-accent));\n		border-radius: 0;\n		background: transparent;\n		color: rgb(var(--edu-ink));\n	}\n\n	& .radio-nav label:hover {\n		background: rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n	}\n}\n\n:host([variant="card"]) {\n	& .wrap {\n		border-radius: 8px;\n		box-shadow: 0 4px 12px rgba(var(--edu-shadow-color), 0.1), 0 2px 4px rgba(var(--edu-shadow-color), 0.05);\n	}\n\n	& .check-btn {\n		border-radius: 6px;\n		box-shadow: 0 2px 4px rgba(var(--edu-shadow-color), 0.1);\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		box-shadow: 0 4px 8px rgba(var(--edu-first-accent), 0.2);\n	}\n\n	& footer {\n		border-top: 1px solid rgb(var(--edu-border));\n	}\n\n	& .radio-nav label {\n		border-radius: 6px;\n		box-shadow: 0 2px 4px rgba(var(--edu-shadow-color), 0.1);\n	}\n\n	& .radio-nav input:checked + label {\n		box-shadow: 0 4px 8px rgba(var(--edu-first-accent), 0.2);\n	}\n}\n';
+var styles_default4 = ':host {\n	display: flex;\n	width: 100%;\n	height: 100%;\n	box-sizing: border-box;\n	container-type: size;\n}\n\n.edu-hidden { display: none !important; }\n\n.wrap {\n	display: flex;\n	flex-direction: column;\n	width: 100%;\n	height: 100%;\n	color: rgb(var(--edu-ink));\n	background: rgb(var(--edu-bg));\n	overflow: hidden;\n	box-sizing: border-box;\n}\n\nheader {\n	display: flex;\n	justify-content: space-between;\n	align-items: center;\n	padding: clamp(0.2rem, 0.7cqh, 0.4rem);\n	border-bottom: 1px solid rgb(var(--edu-border));\n	flex-shrink: 0;\n	gap: clamp(0.25rem, 1cqw, 0.5rem);\n	height: clamp(38px, 7cqh, 46px);\n	min-height: clamp(38px, 7cqh, 46px);\n}\n\n.prompt-container {\n	display: flex;\n	min-width: 0;\n	gap: clamp(0.25rem, 1cqw, 0.5rem);\n	align-items: center;\n	flex: 1;\n}\n\n.title {\n	flex: 1;\n	min-width: 0;\n	padding: 0;\n	font-size: clamp(0.85rem, 2cqh, 1.05rem);\n	font-weight: 700;\n	line-height: 1.2;\n	white-space: nowrap;\n	overflow: hidden;\n	text-overflow: ellipsis;\n}\n\n.timer {\n	padding: 0;\n	font-size: clamp(0.75rem, 1.6cqh, 0.9rem);\n	font-weight: 600;\n	color: rgb(var(--edu-second-ink));\n	font-variant-numeric: tabular-nums;\n	cursor: pointer;\n}\n\n.timer[data-warning="true"] {\n	color: rgb(var(--edu-warning));\n}\n\n.timer[data-danger="true"] {\n	color: rgb(var(--edu-error));\n}\n\n.content {\n	flex: 1;\n	overflow: hidden;\n	min-height: 0;\n	padding: clamp(0.5rem, min(2cqw, 2cqh), 1rem);\n	box-sizing: border-box;\n	position: relative;\n	display: flex;\n}\n\n.screen {\n	display: flex;\n	width: 100%;\n	height: 100%;\n	box-sizing: border-box;\n	animation: fadeIn 1s ease;\n	flex: 1;\n	min-height: 0;\n}\n\n.screen[data-screen="interaction"] {\n	justify-content: stretch;\n	align-items: stretch;\n}\n\n.screen:not([data-screen="interaction"]) {\n	justify-content: center;\n	align-items: center;\n}\n\n.screen[data-screen="interaction"] ::slotted(*) {\n	width: 100%;\n	height: 100%;\n	min-height: 0;\n	display: block;\n}\n\n@keyframes fadeIn {\n	from {\n		opacity: 0;\n		transform: translateY(10px);\n	}\n	to {\n		opacity: 1;\n		transform: translateY(0);\n	}\n}\n\n.error-content,\n.attempts-message,\n.score-display,\n.timer-display {\n	display: flex;\n	flex-direction: column;\n	align-items: center;\n	justify-content: center;\n	text-align: center;\n	height: 100%;\n	color: rgb(var(--edu-ink));\n}\n\n.timer-display .timer {\n	font-size: 10rem !important;\n	color: rgb(var(--edu-ink)) !important;\n}\n\n.error-content {\n	color: rgb(var(--edu-error));\n}\n\n.attempts-message {\n	font-weight: 600;\n	font-size: 1.25rem;\n}\n\nfooter {\n	position: relative;\n	display: flex;\n	flex-direction: column;\n	justify-content: flex-start;\n	align-items: center;\n	padding: clamp(0.35rem, 1cqh, 0.75rem) clamp(0.5rem, 1.5cqw, 1rem);\n	gap: clamp(0.25rem, 0.8cqh, 0.5rem);\n	flex-shrink: 0;\n	height: auto;\n	min-height: clamp(76px, 12cqh, 120px);\n	box-sizing: border-box;\n	overflow: visible;\n}\n\n.progress-container {\n	position: relative;\n	display: flex;\n	align-items: center;\n	justify-content: space-between;\n	gap: clamp(0.25rem, 1cqw, 0.6rem);\n	width: 100%;\n	min-width: 0;\n}\n\n.progress-bar {\n	flex: 1;\n	height: clamp(8px, 1.6cqh, 12px);\n	appearance: none;\n	-webkit-appearance: none;\n	border: none;\n}\n\n.progress-bar::-webkit-progress-bar {\n	background-color: rgb(var(--edu-muted));\n	border-radius: 10px;\n}\n\n.progress-bar::-webkit-progress-value {\n	background: rgb(var(--edu-first-accent));\n	border-radius: 10px;\n	transition: width 0.3s ease, background 0.3s ease;\n}\n\n.progress-bar::-moz-progress-bar {\n	background: rgb(var(--edu-first-accent));\n	border-radius: 10px;\n	transition: width 0.3s ease, background 0.3s ease;\n}\n\n/* Score-based progress bar coloring */\n.progress-bar.score-fail::-webkit-progress-value {\n	background: rgb(var(--edu-error)) !important;\n}\n\n.progress-bar.score-fail::-moz-progress-bar {\n	background: rgb(var(--edu-error)) !important;\n}\n\n.progress-bar.score-low::-webkit-progress-value {\n	background: rgb(var(--edu-warning)) !important;\n}\n\n.progress-bar.score-low::-moz-progress-bar {\n	background: rgb(var(--edu-warning)) !important;\n}\n\n.progress-bar.score-mid::-webkit-progress-value {\n	background: rgb(139, 195, 74) !important; /* Light green */\n}\n\n.progress-bar.score-mid::-moz-progress-bar {\n	background: rgb(139, 195, 74) !important;\n}\n\n.progress-bar.score-high::-webkit-progress-value {\n	background: rgb(var(--edu-success)) !important;\n}\n\n.progress-bar.score-high::-moz-progress-bar {\n	background: rgb(var(--edu-success)) !important;\n}\n\n.progress-icon-wrapper {\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	max-width: 24px;\n	max-height: 24px;\n	position: absolute;\n	left: 0;\n	top: 50%;\n	transform: translateY(-50%);\n	pointer-events: none;\n	transition: left 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;\n	background-color: rgb(var(--edu-first-accent));\n	border-radius: 50px;\n	box-shadow: 0 0 10px 5px rgb(var(--edu-first-accent));\n	padding: 0;\n}\n\n/* Score-based icon coloring */\n.progress-icon-wrapper.score-fail {\n	background-color: rgb(var(--edu-error));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-error));\n}\n\n.progress-icon-wrapper.score-low {\n	background-color: rgb(var(--edu-warning));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-warning));\n}\n\n.progress-icon-wrapper.score-mid {\n	background-color: rgba(139, 195, 74, 0.8);\n	box-shadow: 0 0 10px 5px rgba(139, 195, 74, 0.8);\n}\n\n.progress-icon-wrapper.score-high {\n	background-color: rgb(var(--edu-success));\n	box-shadow: 0 0 10px 5px rgb(var(--edu-success));\n}\n\n.progress-icon {\n	width: clamp(20px, 3.2cqh, 30px);\n	height: clamp(20px, 3.2cqh, 30px);\n}\n\n.progress-counter {\n	font-size: clamp(0.7rem, 1.4cqh, 0.85rem);\n	font-weight: 600;\n	color: rgb(var(--edu-second-ink));\n	min-width: 3rem;\n	text-align: right;\n	flex-shrink: 0;\n}\n\n.action-buttons {\n	display: flex;\n	gap: 0.5rem;\n	align-items: center;\n	justify-content: center;\n	flex-wrap: wrap;\n	width: 100%;\n	min-width: 0;\n}\n\n.prompt-btn,\n.retry-btn,\n.scores-btn {\n	color: rgb(var(--edu-ink));\n}\n\n.check-btn {\n	padding: clamp(0.35rem, 1cqh, 0.6rem) clamp(1rem, 2.6cqw, 1.6rem);\n	font-size: clamp(0.8rem, 1.6cqh, 0.95rem);\n	font-weight: 600;\n	cursor: pointer;\n	border: none;\n	border-radius: var(--edu-radius);\n	background: rgb(var(--edu-first-accent));\n	color: rgb(var(--edu-inverted-ink));\n	transition: all 0.2s ease;\n}\n\n.check-btn:hover:not(:disabled) {\n	background: rgb(var(--edu-first-accent) / 0.9);\n	transform: translateY(-2px) scale(1.02);\n	box-shadow: 0 4px 12px rgb(var(--edu-first-accent) / 0.3);\n}\n\n.check-btn:active:not(:disabled) {\n	transform: translateY(0) scale(0.98);\n	box-shadow: 0 2px 4px rgb(var(--edu-first-accent) / 0.2);\n}\n\n.check-btn:disabled {\n	opacity: 0.5;\n	cursor: not-allowed;\n}\n\n.btn {\n	padding: clamp(0.25rem, 0.8cqh, 0.4rem);\n	background: transparent;\n	border: 2px solid rgb(var(--edu-border));\n	border-radius: var(--edu-radius);\n	cursor: pointer;\n	display: flex;\n	align-items: center;\n	justify-content: center;\n	transition: all 0.2s ease;\n}\n\n.btn:hover {	\n	background: rgb(var(--edu-muted));\n	border-color: rgb(var(--edu-first-accent));\n	transform: translateY(-2px) scale(1.05);\n	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n}\n\n.btn:active {\n	transform: translateY(0) scale(0.95);\n	box-shadow: none;\n}\n\n.radio-nav {\n	display: none;\n	flex-wrap: wrap;\n	gap: 0.5rem;\n	align-items: center;\n	justify-content: center;\n	width: 100%;\n	min-width: 0;\n}\n\n.radio-nav[data-active="true"] {\n	display: flex;\n}\n\n@media (max-width: 640px) {\n	.radio-nav {\n		gap: 0.35rem;\n	}\n\n	.radio-nav label {\n		padding: 0.4rem 0.75rem;\n		font-size: 0.875rem;\n	}\n}\n\n.radio-nav input { display: none; }\n\n.radio-nav label {\n	cursor: pointer;\n	transition: all 0.3s ease;\n	padding: 0.5rem 1rem;\n	border-radius: var(--edu-radius);\n	border: 1px solid rgb(var(--edu-border));\n	background: rgb(var(--edu-card));\n	color: rgb(var(--edu-ink));\n	font-weight: 500;\n}\n\n.radio-nav label:hover {\n	border-color: rgb(var(--edu-first-accent));\n}\n\n.radio-nav input:checked + label {\n	background: rgb(var(--edu-first-accent));\n	color: rgb(var(--edu-inverted-ink));\n	border-color: rgb(var(--edu-first-accent));\n}\n\n.actions {\n	display: flex;\n	gap: 0.5rem;\n}\n\n.utils-container {\n	display: flex;\n	justify-content: space-between;\n}\n\n:host([variant="empty"]) {\n	& .wrap { background: transparent; border: none; }\n	& header { border-bottom: none; }\n\n	& .title {\n		padding-bottom: 5px;\n		max-width: fit-content;\n		border-bottom: 5px solid rgb(var(--edu-ink));\n	}\n\n	& .timer {  }\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n	}\n\n	& .check-btn {\n		background: transparent;\n		color: rgb(var(--edu-ink));\n		border: 2px solid rgb(var(--edu-ink));\n		border-radius: 0;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		color: rgb(var(--edu-inverted-ink));\n		background: rgb(var(--edu-ink));\n		border-color: rgb(var(--edu-ink));\n	}\n\n	& .progress-bar::-webkit-progress-bar {background: transparent}\n	& .progress-bar::-webkit-progress-value {background: rgb(var(--edu-ink))}\n\n	& .radio-nav label {\n		background: transparent;\n		border: 2px solid rgb(var(--edu-ink));\n		border-radius: 0;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-ink));\n		color: rgb(var(--edu-inverted-ink));\n	}\n\n	& .radio-nav label:hover { background-color: rgb(var(--edu-first-accent)) }\n}\n\n:host([variant="minimal"]) {\n	& .wrap {\n		border: 1px solid rgb(var(--edu-border));\n		border-radius: 10px;\n		background: rgb(var(--edu-card));\n	}\n\n	& .timer {\n		font-size: 0.95rem;\n	}\n\n	& .check-btn {\n		border-radius: 10px;\n		box-shadow: none;\n	}\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n		border-top: 1px solid rgb(var(--edu-border));\n	}\n\n	& .progress-bar {\n		height: 1px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-muted));\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background-color: rgb(var(--edu-ink));\n	}\n\n	& .radio-nav label {\n		border-radius: 999px;\n		background: transparent;\n	}\n}\n\n:host([variant="elegant"]) {\n	& .wrap {\n		border-radius: 10px;\n		box-shadow: 0 10px 30px rgba(var(--edu-shadow-color), 0.15);\n	}\n\n	& .timer {\n		font-family: georgia, serif;\n		font-style: italic;\n		font-size: 1.1rem;\n	}\n\n	& .check-btn {\n		border-radius: 8px;\n		font-size: 1rem;\n	}\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n		border-top: 1px solid rgb(var(--edu-border) / 0.5);\n		padding: 1.25rem;\n	}\n\n	& .progress-bar {\n		height: 4px;\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: linear-gradient(90deg, rgb(var(--edu-first-accent)), rgb(var(--edu-first-accent) / 0.6));\n	}\n\n	& .radio-nav label {\n		font-family: georgia, serif;\n		border: none;\n		border-bottom: 2px solid transparent;\n		background: transparent;\n		padding: 0.5rem 1rem;\n	}\n\n	& .radio-nav input:checked + label {\n		color: rgb(var(--edu-first-accent));\n		border-bottom: 2px solid rgb(var(--edu-first-accent));\n		background: transparent;\n		font-style: italic;\n	}\n\n	& label {\n		font-family: georgia, serif;\n		padding: 0.5rem 1rem;\n	}\n}\n\n:host([variant="playful"]) {\n	& .wrap {\n		color: rgb(var(--edu-ink));\n		border-radius: 14px;\n		border: 2px dashed rgb(var(--edu-border));\n	}\n\n	& .timer {\n		font-weight: 700;\n		font-size: 1.2rem;\n	}\n\n	& .check-btn {\n		background: linear-gradient(135deg, rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n		border-radius: 12px;\n		font-weight: 700;\n		text-transform: uppercase;\n		letter-spacing: 0.5px;\n		box-shadow: 0 8px 18px rgb(var(--edu-shadow-color) / 0.16);\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		transform: translateY(-2px) rotate(-1deg);\n	}\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n		border-top: 2px dashed rgb(var(--edu-border));\n	}\n\n	& .progress-bar {\n		height: 20px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-warning) / 0.3);\n		border-radius: 20px;\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgb(var(--edu-first-accent));\n		border-radius: 20px;\n		border: 3px solid rgb(var(--edu-warning) / 0.3);\n	}\n\n	& .radio-nav label {\n		background: rgb(var(--edu-card));\n		color: rgb(var(--edu-ink));\n		border: 2px solid rgb(var(--edu-border));\n		border-radius: 50px;\n		font-weight: 700;\n	}\n\n	& .radio-nav label:hover {\n		transform: scale(1.1) rotate(-2deg);\n	}\n\n	& .radio-nav input:checked + label {\n		background: linear-gradient(135deg, rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n		border-color: transparent;\n		box-shadow: 0 5px 15px rgb(var(--edu-shadow-color) / 0.18);\n	}\n}\n\n:host([variant="glass"]) {\n	& .wrap {\n		background: rgba(var(--edu-card), 0.7);\n		backdrop-filter: blur(10px);\n		border: 1px solid rgba(var(--edu-border), 0.35);\n		border-radius: 14px;\n		box-shadow: 0 16px 32px rgba(var(--edu-shadow-color), 0.12);\n	}\n\n	& .check-btn {\n		background: rgba(var(--edu-first-accent), 0.88);\n		backdrop-filter: blur(5px);\n		border-radius: 999px;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		background: rgba(var(--edu-first-accent), 1);\n	}\n\n	& footer {\n		border-top: 1px solid rgba(var(--edu-border), 0.35);\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background: rgba(var(--edu-card), 0.3);\n		backdrop-filter: blur(5px);\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgba(var(--edu-first-accent), 0.7);\n	}\n\n	& .radio-nav label {\n		background: rgba(var(--edu-card), 0.5);\n		backdrop-filter: blur(5px);\n		border: 1px solid rgba(var(--edu-border), 0.35);\n		border-radius: 999px;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgba(var(--edu-first-accent), 0.8);\n		border-color: rgb(var(--edu-first-accent));\n	}\n}\n\n:host([variant="letter"]) {\n	& .wrap {\n		border: 1px solid rgb(var(--edu-border));\n		font-family: georgia, serif;\n		box-shadow: inset 0 0 0 1px rgba(var(--edu-shadow-color), 0.1);\n		border-radius: 4px;\n	}\n\n	& .timer {\n		font-family: georgia, serif;\n		letter-spacing: 0.5px;\n	}\n\n	& .check-btn {\n		font-family: georgia, serif;\n		border-radius: 2px;\n		font-size: 0.95rem;\n		letter-spacing: 0.5px;\n	}\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n		border-top: 1px solid rgb(var(--edu-border));\n		padding: 1rem 1.5rem;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background-color: rgb(var(--edu-muted));\n		box-shadow: inset 0 0 0 1px rgba(var(--edu-shadow-color), 0.05);\n	}\n\n	& .radio-nav label {\n		width: 40px;\n		height: 40px;\n		display: flex;\n		align-items: center;\n		justify-content: center;\n		padding: 0;\n		background: rgb(var(--edu-third-ink));\n		color: rgb(var(--edu-inverted-ink));\n		font-weight: 900;\n		border-radius: 4px;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-first-accent));\n		transform: translateY(-4px);\n	}\n}\n\n:host([variant="sign"]) {\n	& .wrap {\n		border-radius: 6px;\n		text-transform: uppercase;\n		letter-spacing: 1px;\n		border: 2px solid rgb(var(--edu-border));\n	}\n\n	& .timer {\n		text-transform: uppercase;\n		letter-spacing: 1.5px;\n		font-weight: 800;\n		font-size: 0.9rem;\n	}\n\n	& .check-btn {\n		text-transform: uppercase;\n		letter-spacing: 1.5px;\n		font-weight: 800;\n		font-size: 0.9rem;\n		border-radius: 4px;\n		margin: 0.85rem 2.5rem;\n	}\n\n	& footer {\n		color: rgb(var(--edu-inverted-ink));\n		border-top: 2px solid rgb(var(--edu-border));\n	}\n\n	& .title {\n		text-transform: uppercase;\n	}\n\n	& .progress-bar {\n		height: 24px;\n	}\n\n	& .progress-bar::-webkit-progress-bar {\n		background: rgb(var(--edu-third-ink));\n		border: 2px solid rgb(var(--edu-third-ink));\n	}\n\n	& .progress-bar::-webkit-progress-value {\n		background: rgb(var(--edu-second-accent));\n	}\n\n	& .radio-nav label {\n		background: rgb(var(--edu-third-ink));\n		color: rgb(var(--edu-second-accent));\n		border-left: 4px solid rgb(var(--edu-second-accent));\n		text-transform: uppercase;\n		font-size: 0.8rem;\n		font-weight: 700;\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-second-accent));\n		color: rgb(var(--edu-third-ink));\n		border-left-color: rgb(var(--edu-third-ink));\n	}\n}\n\n:host([variant="outline"]) {\n	& .wrap {\n		color: rgb(var(--edu-inverted-ink));\n		background: transparent;\n		border-width: 0 1px 2px 1px;\n		border-style: solid;\n		border-color: rgb(var(--edu-first-accent));\n		background: rgb(var(--edu-bg) / 0.1);\n	}\n\n	& header { background: rgb(var(--edu-first-accent)); color: rgb(var(--edu-inverted-ink)) }\n	& .timer { color: rgb(var(--edu-inverted-ink)) }\n\n	& footer {\n		border-top: none;\n		padding: 0;\n		padding-left: 0.5rem;\n		padding-right: 0.5rem;\n	}\n\n	& .check-btn {\n		font-size: 100%;\n		font-weight: 700;\n		border: none;\n		border-radius: 0;\n		border-top-left-radius: 10px;\n		border-top-right-radius: 10px;\n		color: rgb(var(--edu-inverted-ink));\n		background: rgb(var(--edu-first-accent));\n		margin: 0;\n		padding: 1rem;\n		text-transform: uppercase;\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		background: rgb(var(--edu-first-accent) / 0.9);\n		box-shadow: 0 4px 12px rgb(var(--edu-first-accent) / 0.3);\n		transform: none;\n	}\n\n	& .radio-nav label {\n		border: 2px solid rgb(var(--edu-first-accent));\n		border-radius: 0;\n		background: transparent;\n		color: rgb(var(--edu-ink));\n	}\n\n	& .radio-nav label:hover {\n		background: rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n	}\n\n	& .radio-nav input:checked + label {\n		background: rgb(var(--edu-first-accent));\n		color: rgb(var(--edu-inverted-ink));\n	}\n}\n\n:host([variant="card"]) {\n	& .wrap {\n		border-radius: 14px;\n		background: rgb(var(--edu-card));\n		box-shadow: 0 10px 24px rgba(var(--edu-shadow-color), 0.12), 0 2px 4px rgba(var(--edu-shadow-color), 0.05);\n	}\n\n	& .check-btn {\n		border-radius: 999px;\n		box-shadow: 0 6px 14px rgba(var(--edu-shadow-color), 0.12);\n	}\n\n	& .check-btn:hover:not(:disabled) {\n		box-shadow: 0 4px 8px rgba(var(--edu-first-accent), 0.2);\n	}\n\n	& footer {\n		border-top: 1px solid rgb(var(--edu-border));\n	}\n\n	& .radio-nav label {\n		border-radius: 999px;\n		box-shadow: 0 4px 10px rgba(var(--edu-shadow-color), 0.08);\n	}\n\n	& .radio-nav input:checked + label {\n		box-shadow: 0 4px 8px rgba(var(--edu-first-accent), 0.2);\n	}\n}\n';
 
 // src/shell/simple-shell/script.ts
 var InteractionsBaseShell = class extends HTMLElement {
@@ -13236,7 +13430,6 @@ var InteractionsBaseShell = class extends HTMLElement {
     this.$timerEl = wrap.querySelector(".timer");
     this.$checkBtn = wrap.querySelector(".check-btn");
     this.$scoresBtn = wrap.querySelector(".scores-btn");
-    this.$seeAnswersBtn = wrap.querySelector(".see-answers-btn");
     this.$retryBtn = wrap.querySelector(".retry-btn");
     this.$radioNav = wrap.querySelector(".radio-nav");
     this.$progressContainer = wrap.querySelector(".progress-container");
@@ -13345,11 +13538,6 @@ var InteractionsBaseShell = class extends HTMLElement {
         console.error("Submit failed:", error);
       }
     });
-    this.$seeAnswersBtn.addEventListener("click", () => {
-      this.soundManager.playSound("pop");
-      if (this.currentScreen === "solution") this.switchScreen("interaction");
-      else this.switchScreen("solution");
-    });
     this.$scoresBtn.addEventListener("click", () => {
       this.soundManager.playSound("pop");
       if (this.currentScreen === "score") this.switchScreen("interaction");
@@ -13438,7 +13626,6 @@ var InteractionsBaseShell = class extends HTMLElement {
   }
   handleGraded(result) {
     this.$checkBtn.classList.add("edu-hidden");
-    this.$seeAnswersBtn.classList.remove("edu-hidden");
     this.$scoresBtn.classList.remove("edu-hidden");
     this.$retryBtn.classList.remove("edu-hidden");
     if (this.attemptLimit && this.attemptCount > this.attemptLimit) {
@@ -13471,7 +13658,6 @@ var InteractionsBaseShell = class extends HTMLElement {
     if (!this.interaction.implementsProgress) {
       this.$checkBtn.classList.remove("edu-hidden");
     }
-    this.$seeAnswersBtn.classList.add("edu-hidden");
     this.$scoresBtn.classList.add("edu-hidden");
     this.$retryBtn.classList.add("edu-hidden");
     this.$progressIcon.classList.remove("score-fail", "score-low", "score-mid", "score-high");
@@ -13655,6 +13841,7 @@ export {
   basicTableDataValidator,
   classificationTableGrader,
   clearInteractionRegistry,
+  cognikitThemePresets,
   compareValues,
   configureCognikit,
   createInteraction,
@@ -13668,6 +13855,7 @@ export {
   getClassificationCellGrading,
   getClassificationGradingState,
   getCognikitConfig,
+  getCognikitThemePresets,
   getDNDGradingState,
   getHighlightGradingState,
   getInteraction,
@@ -13687,9 +13875,12 @@ export {
   recognitionValidator,
   registerBuiltInInteractions,
   registerInteraction,
+  resetCognikitTheme,
+  resolveCognikitTheme,
   seriationGrader,
   seriationParser,
   seriationValidator,
+  setCognikitTheme,
   textEngineBaseDataValidator,
   textEngineBaseGrammarParser,
   textEngineBlanksDataValidator,