add new lesson mode and started code refraction

client/src/styles/pages/_lesson.scss

@@ -0,0 +1,78 @@
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+.page-container-center {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding: $spacing-md;
+	overflow-y: auto;
+}
+
+.lesson-card {
+	width: 100%;
+	max-width: $size-lesson-card-width;
+	border-radius: $radius-xl !important;
+	border: $border-subtle;
+	background-color: $color-surface !important;
+	min-height: $size-lesson-card-min-height;
+	display: flex;
+	flex-direction: column;
+}
+
+.hero-wrapper {
+	width: $size-hero-wrapper;
+	height: $size-hero-wrapper;
+}
+
+.radical-section {
+	width: 100%;
+	background: $color-zinc-900;
+	border-radius: $radius-md;
+	padding: $spacing-md;
+	margin-bottom: $spacing-lg;
+}
+
+.radical-chip {
+	border-radius: $radius-md;
+	border: $border-subtle;
+	background-color: #27272a;
+
+	img {
+		filter: invert(1);
+		width: 100%;
+	}
+}
+
+.readings-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: $spacing-lg;
+	width: 100%;
+}
+
+.reading-box {
+	background: $color-reading-box;
+	padding: $spacing-lg;
+	border-radius: $radius-lg;
+	text-align: center;
+
+	.label {
+		font-size: $font-xs;
+		color: #666;
+		letter-spacing: 1px;
+		text-transform: uppercase;
+		margin-bottom: $spacing-xs;
+	}
+
+	.val {
+		font-size: 1.1rem;
+		font-weight: $weight-bold;
+	}
+}
+
+.lesson-canvas-wrapper {
+	margin: 0 auto;
+}