cognikit 0.2.0 → 1.0.1

package/public/app.js

@@ -3829,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;
 }
@@ -3836,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]) {
@@ -3862,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) {
@@ -3896,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;
@@ -3935,6 +3954,7 @@ var styles_default = `/* ==================== BASE STYLES ==================== *
 	align-items: center;
 	justify-content: center;
 	min-width: 0;
+	overflow-wrap: anywhere;
 }
 
 /* ==================== MODALITY ACTION BUTTON ==================== */
@@ -4122,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;
 }
 
 
@@ -4218,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;
 }
 
@@ -4246,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 ==================== */
@@ -4331,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;
 }
@@ -4859,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"] {
@@ -4899,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"] {
@@ -4948,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"] {
@@ -5012,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) => {
@@ -5026,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 };
 }
@@ -5035,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",
@@ -5047,7 +5095,7 @@ var OpenClassification = class extends BaseInteraction {
       "#ec4899",
       "#14b8a6",
       "#f97316",
-      "#6366f1"
+      "#94a3b8"
     ];
     this.currentColor = this.categoryColors[0];
     this.data.categories.forEach(({ label, items }) => {
@@ -5057,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();
@@ -5078,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%;
@@ -5123,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));
@@ -5324,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() {
@@ -5476,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;
@@ -5519,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);
 				}
@@ -6314,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;
@@ -6389,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 {
@@ -6463,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;
@@ -6835,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%;
@@ -7057,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));
@@ -12509,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;
@@ -13263,6 +13318,12 @@ registerBuiltInInteractions();
 // src/shell/simple-shell/index.html
 var simple_shell_default = `<header part='header'>
 	<div class="prompt-container">
+		<button class="close-btn btn" title="Close Fullscreen" part="close-part" style="display: none;">
+			<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="M18 6 6 18" />
+				<path d="m6 6 12 12" />
+			</svg>
+		</button>
 		<button class="prompt-btn btn" title="See Prompt Data" part="see-prompt">
 			<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="M12 3c4.97 0 9 1.79 9 4s-4.03 4-9 4-9-1.79-9-4 4.03-4 9-4Z"/>
@@ -13323,13 +13384,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"/>
@@ -13351,7 +13405,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 {
@@ -13378,11 +13432,11 @@ var InteractionsBaseShell = class extends HTMLElement {
     this.$headerEl = wrap.querySelector("header");
     this.$footerEl = wrap.querySelector("footer");
     this.$titleEl = wrap.querySelector(".title");
+    this.$closeBtn = wrap.querySelector(".close-btn");
     this.$promptBtn = wrap.querySelector(".prompt-btn");
     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");
@@ -13407,7 +13461,6 @@ var InteractionsBaseShell = class extends HTMLElement {
     if (!this.hasAttribute("show-footer")) this.setAttribute("show-footer", "true");
     this.updateVisibility();
     this.animationsManager.animate(this.$progressIcon, "heartbeat");
-    this.animationsManager.animate(this.$promptBtn, "wobble");
   }
   disconnectedCallback() {
     this.stopTimer();
@@ -13481,6 +13534,15 @@ var InteractionsBaseShell = class extends HTMLElement {
       this.interactionComplete = false;
     }
   }
+  toggleCloseBtn(handler) {
+    if (this.$closeBtn.style.display === "none") {
+      this.$closeBtn.style.display = "block";
+      this.$closeBtn.addEventListener("click", handler);
+      return;
+    }
+    this.$closeBtn.removeEventListener("click", handler);
+    this.$closeBtn.style.display = "none";
+  }
   // ==================== EVENT LISTENERS ====================
   setupShellListeners() {
     this.$checkBtn.addEventListener("click", () => {
@@ -13491,11 +13553,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");
@@ -13584,7 +13641,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) {
@@ -13617,7 +13673,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");