PageSourceSearch

https://frankreinhold.education/posts/

html frankreinhold.education collected 2026-10-07 04:03:54 UTC 92,409 bytes, 3,181 lines download raw bytes

1<!doctype html>
2<!-- This site was created with Hugo Blox. https://hugoblox.com -->
3<!-- Last Published: March 8, 2026 --><html lang="en-us" dir="ltr"
4      data-wc-theme-default="system"
5      data-hbb-relurl="/">
6  
7<head>
8  <meta charset="utf-8" />
9  <meta name="viewport" content="width=device-width, initial-scale=1" />
10  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
11  <meta name="generator" content="Hugo Blox Builder 0.10.0" />
12
13  
14  
15
16
17
18
19
20
21
22
23  
24
25
26
27
28
29  
30  
31  
32  
33  
34    
35    
36    
37  
38  
39
40  <meta name="author" content="Frank Reinhold" />
41
42  
43  
44  
45  
46    
47  
48  
49  <meta name="description" content="Frank Reinhold&#39;s academic webpage." />
50
51  
52  <link rel="alternate" hreflang="en-us" href="https://frankreinhold.education/posts/" />
53
54  
55  
56  
57  
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85  
86  
87  
88  
89  
90  
91  
92  
93  
94  
95  
96  
97  
98  
99  
100  
101    
102    
103    
104    
105      
106      
107      
108      
109        
110      
111    
112    
113      
114      
115      
116      
117        
118      
119    
120    
121  
122
123
124
125
126  
127  
128  
129  
130  
131  
132  
133  
134  
135  
136  
137  
138  
139  
140  
141  
142    
143    
144    
145    
146      
147      
148      
149      
150        
151      
152    
153    
154      
155      
156      
157      
158        
159      
160    
161    
162  
163
164
165
166
167<style>
168   
169     
170  
171   
172  :root {
173    
174      
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189  
190  
191  
192  
193    
194      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
195         or we output the raw color value directly if theme.css supp
195orts it.
196         
197         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
198         However, Tailwind 4 supports OKLCH natively. 
199         
200         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
201         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
202         
203         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
204         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
205         
206         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
207         OR we redefine the higher-level variables.
208         
209         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
210         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
211      */
212      --color-primary-100: oklch(0.93 0.034 272.788);
213    
214      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
215         or we output the raw color value directly if theme.css supp
215orts it.
216         
217         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
218         However, Tailwind 4 supports OKLCH natively. 
219         
220         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
221         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
222         
223         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
224         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
225         
226         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
227         OR we redefine the higher-level variables.
228         
229         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
230         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
231      */
232      --color-primary-200: oklch(0.87 0.065 274.039);
233    
234      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
235         or we output the raw color value directly if theme.css supp
235orts it.
236         
237         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
238         However, Tailwind 4 supports OKLCH natively. 
239         
240         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
241         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
242         
243         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
244         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
245         
246         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
247         OR we redefine the higher-level variables.
248         
249         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
250         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
251      */
252      --color-primary-300: oklch(0.785 0.115 274.713);
253    
254      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
255         or we output the raw color value directly if theme.css supp
255orts it.
256         
257         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
258         However, Tailwind 4 supports OKLCH natively. 
259         
260         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
261         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
262         
263         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
264         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
265         
266         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
267         OR we redefine the higher-level variables.
268         
269         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
270         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
271      */
272      --color-primary-400: oklch(0.673 0.182 276.935);
273    
274      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
275         or we output the raw color value directly if theme.css supp
275orts it.
276         
277         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
278         However, Tailwind 4 supports OKLCH natively. 
279         
280         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
281         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
282         
283         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
284         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
285         
286         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
287         OR we redefine the higher-level variables.
288         
289         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
290         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
291      */
292      --color-primary-50: oklch(0.962 0.018 272.314);
293    
294      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
295         or we output the raw color value directly if theme.css supp
295orts it.
296         
297         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
298         However, Tailwind 4 supports OKLCH natively. 
299         
300         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
301         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
302         
303         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
304         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
305         
306         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
307         OR we redefine the higher-level variables.
308         
309         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
310         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
311      */
312      --color-primary-500: oklch(0.585 0.233 277.117);
313    
314      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
315         or we output the raw color value directly if theme.css supp
315orts it.
316         
317         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
318         However, Tailwind 4 supports OKLCH natively. 
319         
320         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
321         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
322         
323         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
324         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
325         
326         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
327         OR we redefine the higher-level variables.
328         
329         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
330         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
331      */
332      --color-primary-600: oklch(0.511 0.262 276.966);
333    
334      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
335         or we output the raw color value directly if theme.css supp
335orts it.
336         
337         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
338         However, Tailwind 4 supports OKLCH natively. 
339         
340         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
341         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
342         
343         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
344         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
345         
346         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
347         OR we redefine the higher-level variables.
348         
349         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
350         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
351      */
352      --color-primary-700: oklch(0.457 0.24 277.023);
353    
354      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
355         or we output the raw color value directly if theme.css supp
355orts it.
356         
357         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
358         However, Tailwind 4 supports OKLCH natively. 
359         
360         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
361         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
362         
363         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
364         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
365         
366         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
367         OR we redefine the higher-level variables.
368         
369         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
370         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
371      */
372      --color-primary-800: oklch(0.398 0.195 277.366);
373    
374      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
375         or we output the raw color value directly if theme.css supp
375orts it.
376         
377         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
378         However, Tailwind 4 supports OKLCH natively. 
379         
380         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
381         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
382         
383         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
384         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
385         
386         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
387         OR we redefine the higher-level variables.
388         
389         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
390         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
391      */
392      --color-primary-900: oklch(0.359 0.144 278.697);
393    
394      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
395         or we output the raw color value directly if theme.css supp
395orts it.
396         
397         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
398         However, Tailwind 4 supports OKLCH natively. 
399         
400         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
401         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
402         
403         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
404         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
405         
406         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
407         OR we redefine the higher-level variables.
408         
409         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
410         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
411      */
412      --color-primary-950: oklch(0.257 0.09 281.288);
413    
414    
415    /* Also set the legacy RGB vars to a fallback (500 shade) to prevent breakage 
416       in case something accesses the raw -rgb var directly, though unlikely */
417    --hb-primary-500-rgb: 128 128 128; 
418  
419
420
421
422
423
424
425
426
427
428
429  
430  
431  
432  
433    
434      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
435         or we output the raw color value directly if theme.css supp
435orts it.
436         
437         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
438         However, Tailwind 4 supports OKLCH natively. 
439         
440         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
441         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
442         
443         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
444         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
445         
446         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
447         OR we redefine the higher-level variables.
448         
449         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
450         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
451      */
452      --color-secondary-100: oklch(0.932 0.032 255.585);
453    
454      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
455         or we output the raw color value directly if theme.css supp
455orts it.
456         
457         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
458         However, Tailwind 4 supports OKLCH natively. 
459         
460         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
461         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
462         
463         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
464         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
465         
466         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
467         OR we redefine the higher-level variables.
468         
469         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
470         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
471      */
472      --color-secondary-200: oklch(0.882 0.059 254.128);
473    
474      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
475         or we output the raw color value directly if theme.css supp
475orts it.
476         
477         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
478         However, Tailwind 4 supports OKLCH natively. 
479         
480         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
481         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
482         
483         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
484         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
485         
486         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
487         OR we redefine the higher-level variables.
488         
489         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
490         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
491      */
492      --color-secondary-300: oklch(0.809 0.105 251.813);
493    
494      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
495         or we output the raw color value directly if theme.css supp
495orts it.
496         
497         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
498         However, Tailwind 4 supports OKLCH natively. 
499         
500         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
501         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
502         
503         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
504         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
505         
506         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
507         OR we redefine the higher-level variables.
508         
509         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
510         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
511      */
512      --color-secondary-400: oklch(0.707 0.165 254.624);
513    
514      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
515         or we output the raw color value directly if theme.css supp
515orts it.
516         
517         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
518         However, Tailwind 4 supports OKLCH natively. 
519         
520         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
521         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
522         
523         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
524         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
525         
526         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
527         OR we redefine the higher-level variables.
528         
529         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
530         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
531      */
532      --color-secondary-50: oklch(0.97 0.014 254.604);
533    
534      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
535         or we output the raw color value directly if theme.css supp
535orts it.
536         
537         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
538         However, Tailwind 4 supports OKLCH natively. 
539         
540         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
541         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
542         
543         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
544         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
545         
546         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
547         OR we redefine the higher-level variables.
548         
549         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
550         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
551      */
552      --color-secondary-500: oklch(0.623 0.214 259.815);
553    
554      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
555         or we output the raw color value directly if theme.css supp
555orts it.
556         
557         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
558         However, Tailwind 4 supports OKLCH natively. 
559         
560         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
561         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
562         
563         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
564         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
565         
566         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
567         OR we redefine the higher-level variables.
568         
569         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
570         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
571      */
572      --color-secondary-600: oklch(0.546 0.245 262.881);
573    
574      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
575         or we output the raw color value directly if theme.css supp
575orts it.
576         
577         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
578         However, Tailwind 4 supports OKLCH natively. 
579         
580         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
581         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
582         
583         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
584         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
585         
586         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
587         OR we redefine the higher-level variables.
588         
589         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
590         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
591      */
592      --color-secondary-700: oklch(0.488 0.243 264.376);
593    
594      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
595         or we output the raw color value directly if theme.css supp
595orts it.
596         
597         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
598         However, Tailwind 4 supports OKLCH natively. 
599         
600         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
601         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
602         
603         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
604         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
605         
606         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
607         OR we redefine the higher-level variables.
608         
609         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
610         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
611      */
612      --color-secondary-800: oklch(0.424 0.199 265.638);
613    
614      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
615         or we output the raw color value directly if theme.css supp
615orts it.
616         
617         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
618         However, Tailwind 4 supports OKLCH natively. 
619         
620         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
621         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
622         
623         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
624         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
625         
626         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
627         OR we redefine the higher-level variables.
628         
629         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
630         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
631      */
632      --color-secondary-900: oklch(0.379 0.146 265.522);
633    
634      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
635         or we output the raw color value directly if theme.css supp
635orts it.
636         
637         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
638         However, Tailwind 4 supports OKLCH natively. 
639         
640         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
641         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
642         
643         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
644         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
645         
646         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
647         OR we redefine the higher-level variables.
648         
649         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
650         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
651      */
652      --color-secondary-950: oklch(0.282 0.091 267.935);
653    
654    
655    /* Also set the legacy RGB vars to a fallback (500 shade) to prevent breakage 
656       in case something accesses the raw -rgb var directly, though unlikely */
657    --hb-secondary-500-rgb: 128 128 128; 
658  
659
660
661
662
663
664
665--color-background: #ffffff;
666--color-foreground: #111827;
667
668
669--color-header-bg: #0f172a;
670--color-header-fg: #ffffff;
671
672
673--color-footer-bg: #f3f4f6;
674--color-footer-fg: #0f172a;
675
676    
677  }
678
679   
680  .dark {
681    
682      
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697  
698  
699  
700  
701    
702      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
703         or we output the raw color value directly if theme.css supp
703orts it.
704         
705         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
706         However, Tailwind 4 supports OKLCH natively. 
707         
708         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
709         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
710         
711         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
712         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
713         
714         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
715         OR we redefine the higher-level variables.
716         
717         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
718         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
719      */
720      --color-primary-100: oklch(0.932 0.032 255.585);
721    
722      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
723         or we output the raw color value directly if theme.css supp
723orts it.
724         
725         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
726         However, Tailwind 4 supports OKLCH natively. 
727         
728         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
729         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
730         
731         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
732         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
733         
734         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
735         OR we redefine the higher-level variables.
736         
737         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
738         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
739      */
740      --color-primary-200: oklch(0.882 0.059 254.128);
741    
742      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
743         or we output the raw color value directly if theme.css supp
743orts it.
744         
745         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
746         However, Tailwind 4 supports OKLCH natively. 
747         
748         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
749         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
750         
751         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
752         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
753         
754         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
755         OR we redefine the higher-level variables.
756         
757         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
758         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
759      */
760      --color-primary-300: oklch(0.809 0.105 251.813);
761    
762      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
763         or we output the raw color value directly if theme.css supp
763orts it.
764         
765         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
766         However, Tailwind 4 supports OKLCH natively. 
767         
768         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
769         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
770         
771         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
772         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
773         
774         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
775         OR we redefine the higher-level variables.
776         
777         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
778         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
779      */
780      --color-primary-400: oklch(0.707 0.165 254.624);
781    
782      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
783         or we output the raw color value directly if theme.css supp
783orts it.
784         
785         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
786         However, Tailwind 4 supports OKLCH natively. 
787         
788         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
789         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
790         
791         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
792         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
793         
794         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
795         OR we redefine the higher-level variables.
796         
797         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
798         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
799      */
800      --color-primary-50: oklch(0.97 0.014 254.604);
801    
802      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
803         or we output the raw color value directly if theme.css supp
803orts it.
804         
805         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
806         However, Tailwind 4 supports OKLCH natively. 
807         
808         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
809         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
810         
811         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
812         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
813         
814         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
815         OR we redefine the higher-level variables.
816         
817         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
818         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
819      */
820      --color-primary-500: oklch(0.623 0.214 259.815);
821    
822      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
823         or we output the raw color value directly if theme.css supp
823orts it.
824         
825         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
826         However, Tailwind 4 supports OKLCH natively. 
827         
828         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
829         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
830         
831         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
832         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
833         
834         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
835         OR we redefine the higher-level variables.
836         
837         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
838         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
839      */
840      --color-primary-600: oklch(0.546 0.245 262.881);
841    
842      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
843         or we output the raw color value directly if theme.css supp
843orts it.
844         
845         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
846         However, Tailwind 4 supports OKLCH natively. 
847         
848         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
849         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
850         
851         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
852         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
853         
854         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
855         OR we redefine the higher-level variables.
856         
857         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
858         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
859      */
860      --color-primary-700: oklch(0.488 0.243 264.376);
861    
862      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
863         or we output the raw color value directly if theme.css supp
863orts it.
864         
865         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
866         However, Tailwind 4 supports OKLCH natively. 
867         
868         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
869         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
870         
871         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
872         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
873         
874         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
875         OR we redefine the higher-level variables.
876         
877         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
878         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
879      */
880      --color-primary-800: oklch(0.424 0.199 265.638);
881    
882      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
883         or we output the raw color value directly if theme.css supp
883orts it.
884         
885         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
886         However, Tailwind 4 supports OKLCH natively. 
887         
888         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
889         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
890         
891         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
892         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
893         
894         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
895         OR we redefine the higher-level variables.
896         
897         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
898         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
899      */
900      --color-primary-900: oklch(0.379 0.146 265.522);
901    
902      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
903         or we output the raw color value directly if theme.css supp
903orts it.
904         
905         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
906         However, Tailwind 4 supports OKLCH natively. 
907         
908         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
909         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
910         
911         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
912         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
913         
914         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
915         OR we redefine the higher-level variables.
916         
917         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
918         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
919      */
920      --color-primary-950: oklch(0.282 0.091 267.935);
921    
922    
923    /* Also set the legacy RGB vars to a fallback (500 shade) to prevent breakage 
924       in case something accesses the raw -rgb var directly, though unlikely */
925    --hb-primary-500-rgb: 128 128 128; 
926  
927
928
929
930
931
932
933
934
935
936
937  
938  
939  
940  
941    
942      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
943         or we output the raw color value directly if theme.css supp
943orts it.
944         
945         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
946         However, Tailwind 4 supports OKLCH natively. 
947         
948         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
949         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
950         
951         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
952         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
953         
954         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
955         OR we redefine the higher-level variables.
956         
957         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
958         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
959      */
960      --color-secondary-100: oklch(0.953 0.051 180.801);
961    
962      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
963         or we output the raw color value directly if theme.css supp
963orts it.
964         
965         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
966         However, Tailwind 4 supports OKLCH natively. 
967         
968         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
969         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
970         
971         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
972         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
973         
974         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
975         OR we redefine the higher-level variables.
976         
977         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
978         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
979      */
980      --color-secondary-200: oklch(0.91 0.096 180.426);
981    
982      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
983         or we output the raw color value directly if theme.css supp
983orts it.
984         
985         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
986         However, Tailwind 4 supports OKLCH natively. 
987         
988         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
989         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
990         
991         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
992         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
993         
994         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
995         OR we redefine the higher-level variables.
996         
997         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
998         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
999      */
1000      --color-secondary-300: oklch(0.855 0.138 181.071);
1001    
1002      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1003         or we output the raw color value directly if theme.css supp
1003orts it.
1004         
1005         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1006         However, Tailwind 4 supports OKLCH natively. 
1007         
1008         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1009         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1010         
1011         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1012         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1013         
1014         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1015         OR we redefine the higher-level variables.
1016         
1017         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1018         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1019      */
1020      --color-secondary-400: oklch(0.777 0.152 181.912);
1021    
1022      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1023         or we output the raw color value directly if theme.css supp
1023orts it.
1024         
1025         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1026         However, Tailwind 4 supports OKLCH natively. 
1027         
1028         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1029         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1030         
1031         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1032         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1033         
1034         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1035         OR we redefine the higher-level variables.
1036         
1037         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1038         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1039      */
1040      --color-secondary-50: oklch(0.984 0.014 180.72);
1041    
1042      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1043         or we output the raw color value directly if theme.css supp
1043orts it.
1044         
1045         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1046         However, Tailwind 4 supports OKLCH natively. 
1047         
1048         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1049         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1050         
1051         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1052         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1053         
1054         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1055         OR we redefine the higher-level variables.
1056         
1057         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1058         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1059      */
1060      --color-secondary-500: oklch(0.704 0.14 182.503);
1061    
1062      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1063         or we output the raw color value directly if theme.css supp
1063orts it.
1064         
1065         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1066         However, Tailwind 4 supports OKLCH natively. 
1067         
1068         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1069         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1070         
1071         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1072         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1073         
1074         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1075         OR we redefine the higher-level variables.
1076         
1077         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1078         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1079      */
1080      --color-secondary-600: oklch(0.6 0.118 184.704);
1081    
1082      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1083         or we output the raw color value directly if theme.css supp
1083orts it.
1084         
1085         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1086         However, Tailwind 4 supports OKLCH natively. 
1087         
1088         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1089         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1090         
1091         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1092         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1093         
1094         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1095         OR we redefine the higher-level variables.
1096         
1097         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1098         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1099      */
1100      --color-secondary-700: oklch(0.511 0.096 186.391);
1101    
1102      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1103         or we output the raw color value directly if theme.css supp
1103orts it.
1104         
1105         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1106         However, Tailwind 4 supports OKLCH natively. 
1107         
1108         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1109         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1110         
1111         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1112         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1113         
1114         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1115         OR we redefine the higher-level variables.
1116         
1117         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1118         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1119      */
1120      --color-secondary-800: oklch(0.437 0.078 188.216);
1121    
1122      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1123         or we output the raw color value directly if theme.css supp
1123orts it.
1124         
1125         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1126         However, Tailwind 4 supports OKLCH natively. 
1127         
1128         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1129         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1130         
1131         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1132         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1133         
1134         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1135         OR we redefine the higher-level variables.
1136         
1137         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1138         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1139      */
1140      --color-secondary-900: oklch(0.386 0.063 188.416);
1141    
1142      /* Note: converting OKLCH to raw RGB CSS vars requires Tailwind 4's internal conversion 
1143         or we output the raw color value directly if theme.css supp
1143orts it.
1144         
1145         The existing system expects --hb-primary-50-rgb to be a comma-less RGB triplet "255 255 255".
1146         However, Tailwind 4 supports OKLCH natively. 
1147         
1148         CRITICAL FIX: We must override the `rgb(var(...))` wrapper in `theme.css` if we want to use OKLCH.
1149         OR we just output the RGB approximation if we want to keep `theme.css` untouched.
1150         
1151         BUT `theme.css` defines: --color-primary-50: rgb(var(--hb-primary-50-rgb));
1152         So we MUST provide RGB triplets. OKLCH strings like "oklch(...)" inside `rgb(...)` is invalid CSS.
1153         
1154         To fix this properly without changing `theme.css` significantly, we need RGB values in this table, 
1155         OR we redefine the higher-level variables.
1156         
1157         Since we cannot easily calculate OKLCH -> RGB in Hugo templates, we should 
1158         OUTPUT THE HIGHER LEVEL VARIABLES directly here to override theme.css.
1159      */
1160      --color-secondary-950: oklch(0.277 0.046 192.524);
1161    
1162    
1163    /* Also set the legacy RGB vars to a fallback (500 shade) to prevent breakage 
1164       in case something accesses the raw -rgb var directly, though unlikely */
1165    --hb-secondary-500-rgb: 128 128 128; 
1166  
1167
1168
1169
1170
1171
1172
1173--color-background: #0f172a;
1174--color-foreground: #f8fafc;
1175
1176
1177--color-header-bg: #f8fafc;
1178--color-header-fg: #0f172a;
1179
1180
1181--color-footer-bg: #111827;
1182--color-footer-fg: #e5e7eb;
1183
1184    
1185  }
1186   
1187</style>
1188
1189
1190  
1191  
1192
1193  
1194  
1195  
1196    
1197
1198  
1199  
1200  
1201  
1202  
1203  
1204  
1205    
1206      
1207        <link rel="stylesheet" href="/css/_entry.abda409c3a51ec42de7c319e4f7d0651d69549116e6a151c003e202665f4eb23.css" integrity="sha256-q9pAnDpR7ELefDGeT30GUdaVSRFuahUcAD4gJmX06yM=" crossorigin="anonymous">
1208      
1209    
1210  
1211
1212
1213  
1214
1215  
1216  
1217  
1218
1219  
1220
1221  
1221<script src="/js/hb-head.min.e9ff67ddf77122b225756bf5a926e24420bea2586199fddcb3b1813a009f4ee5.js" integrity="sha256-6f9n3fdxIrIldWv1qSbiRCC&#43;olhhmf3cs7GBOgCfTuU=" crossorigin="anonymous"></script>
1221
1222
1223  
1224  
1225  
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262  
1263  
1264  
1265    <link rel="alternate" href="/posts/index.xml" type="application/rss+xml" title="Frank Reinhold" />
1266  
1267
1268  
1269  
1270  
1271    <link rel="icon" type="image/png" href="/media/icon_hu_c545d605fbaba839.png" />
1272  
1273  
1274  
1275  
1276    
1277      <link rel="apple-touch-icon" type="image/png" href="/media/icon_hu_b7aec86dcb688f0.png" />
1278    
1279  
1280
1281  <link rel="canonical" href="https://frankreinhold.education/posts/" />
1282
1283  
1284  
1285  
1286  
1287  
1288  
1289  
1290  
1291    
1292    
1293      
1294    
1295    
1296  
1297  
1298
1299  
1300  
1301    
1302    
1303  
1304  <meta property="twitter:card" content="summary" />
1305  
1306  <meta property="og:site_name" content="Frank Reinhold" />
1307  <meta property="og:url" content="https://frankreinhold.education/posts/" />
1308  <meta property="og:title" content="News | Frank Reinhold" />
1309  <meta property="og:description" content="Frank Reinhold&#39;s academic webpage." /><meta property="og:image" content="https://frankreinhold.education/media/icon_hu_982c5d63a71b2961.png" />
1310    <meta property="twitter:image" content="https://frankreinhold.education/media/icon_hu_982c5d63a71b2961.png" /><meta property="og:locale" content="en-us" />
1311  
1312    
1313      <meta property="og:updated_time" content="2025-12-05T00:00:00&#43;00:00" />
1314    
1315  
1316
1317  
1318
1319<script type="application/ld+json">
1320{
1321  "@context": "https://schema.org",
1322  "@id": "https://frankreinhold.education/posts/",
1323  "@type": "CollectionPage",
1324  "dateModified": "2025-12-05T00:00:00Z",
1325  "description": "Frank Reinhold's academic webpage.",
1326  "inLanguage": "en-us",
1327  "isPartOf": {
1328    "@id": "https://frankreinhold.education/",
1329    "@type": "WebSite",
1330    "name": "Frank Reinhold",
1331    "url": "https://frankreinhold.education/"
1332  },
1333  "mainEntity": {
1334    "@type": "ItemList",
1335    "itemListElement": [
1336      {
1337        "@type": "ListItem",
1338        "item": {
1339          "@id": "https://frankreinhold.education/posts/2026-03-08_reinholdleaind/",
1340          "@type": "WebPage",
1341          "name": "Who Outperforms Whom in School—and Why? The Role of Motivation and Culture in Gender Gaps",
1342          "url": "https://frankreinhold.education/posts/2026-03-08_reinholdleaind/"
1343        },
1344        "position": 1
1345      },
1346      {
1347        "@type": "ListItem",
1348        "item": {
1349          "@id": "https://frankreinhold.education/posts/2025-12-19_reuteresm/",
1350          "@type": "WebPage",
1351          "name": "Why Some Patterns Are Harder Than Others: What Primary Students Really Struggle With",
1352          "url": "https://frankreinhold.education/posts/2025-12-19_reuteresm/"
1353        },
1354        "position": 2
1355      },
1356      {
1357        "@type": "ListItem",
1358        "item": {
1359          "@id": "https://frankreinhold.education/posts/2025-12-04_abtzdm/",
1360          "@type": "WebPage",
1361          "name": "How Students 'See' Boxplots: New Evidence for Extrafoveal Information Processing",
1362          "url": "https://frankreinhold.education/posts/2025-12-04_abtzdm/"
1363        },
1364        "position": 3
1365      },
1366      {
1367        "@type": "ListItem",
1368        "item": {
1369          "@id": "https://frankreinhold.education/posts/2025-11-17_kadlubacaeo/",
1370          "@type": "WebPage",
1371          "name": "How Teachers Really Use Digital Technology in Math Classrooms",
1372          "url": "https://frankreinhold.education/posts/2025-11-17_kadlubacaeo/"
1373        },
1374        "position": 4
1375      },
1376      {
1377        "@type": "ListItem",
1378        "item": {
1379          "@id": "https://frankreinhold.education/posts/2025-11-03_compile/",
1380          "@type": "WebPage",
1381          "name": "Launch of the COMPI.LE Research Project",
1382          "url": "https://frankreinhold.education/posts/2025-11-03_compile/"
1383        },
1384        "position": 5
1385      },
1386      {
1387        "@type": "ListItem",
1388        "item": {
1389          "@id": "https://frankreinhold.education/posts/2025-06-24_hoferjli/",
1390          "@type": "WebPage",
1391          "name": "Aptitude-Treatment-Interaction Effects in Digital Math Learning",
1392          "url": "https://frankreinhold.education/posts/2025-06-24_hoferjli/"
1393        },
1394        "position": 6
1395      }
1396    ],
1397    "itemListOrder": "Descending",
1398    "numberOfItems": 6
1399  },
1400  "name": "News",
1401  "url": "https://frankreinhold.education/posts/"
1402}
1403</script>
1403
1404
1405
1406
1407  
1407<script type="application/ld+json">
1408    {
1409  "@context": "https://schema.org",
1410  "@type": "BreadcrumbList",
1411  "itemListElement": [
1412    {
1413      "item": "https://frankreinhold.education/",
1414      "name": "Frank Reinhold",
1415      "position": 1
1416    },
1417    {
1418      "item": "https://frankreinhold.education/posts/",
1419      "name": "News",
1420      "position": 2
1421    }
1422  ]
1423}
1424    </script>
1424
1425
1426
1427
1428
1429
1430
1431  <title>News | Frank Reinhold</title>
1432
1433  
1434  
1435  
1436  
1437  
1438  
1439  
1440  
1441  
1442  
1443  
1444  
1445  
1446  
1447  
1448  
1449  
1450  
1451  
1452  
1453  
1454  
1455  
1456  
1457    
1458    
1459  
1460  
1461  <style>
1462    :root {
1463       
1464      --hb-font-size-base: 1rem;
1465      --hb-font-size-scale: 1.25;
1466      
1467       
1468      --hb-radius: 0.5rem;
1469      --hb-spacing-base: 0.75rem;
1470      --hb-spacing-section: 2.5rem;
1471    }
1472    
1473    
1474    @font-face {
1475      font-family: 'Inter var';
1476      font-style: normal;
1477      font-weight: 100 900;
1478      font-display: swap;
1479      src: url(/dist/font/Inter.var.woff2) format(woff2);
1480    }
1481    
1482  </style>
1483
1484  
1485
1486  
1487  
1488
1489
1490
1491
1492  
1493  
1494
1495  
1496  
1497
1498  
1499
1500  
1501  
1502    
1503    
1504      
1505      
1506      
1507    
1508      
1509      
1510      
1511    
1512      
1513      
1514      
1515    
1516      
1517      
1518      
1519    
1520      
1521      
1522      
1523    
1524    
1525  
1526
1527  
1528    
1529    
1530      
1531      
1532      
1533      
1534      
1535      
1536      
1537      
1538      
1539      
1540      
1541      
1542      
1543      
1544      
1545    
1546  
1547    
1548    
1549      
1550      
1551      
1552      
1553      
1554      
1555      
1556      
1557      
1558      
1559      
1560      
1561      
1562      
1563      
1564    
1565  
1566    
1567    
1568      
1569      
1570      
1571      
1572      
1573      
1574      
1575      
1576      
1577      
1578      
1579      
1580      
1581      
1582      
1583    
1584  
1585    
1586    
1587      
1588      
1589      
1590      
1591      
1592      
1593      
1594      
1595      
1596      
1597      
1598      
1599      
1600      
1601      
1602    
1603  
1604    
1605    
1606      
1607      
1608      
1609      
1610      
1611      
1612      
1613      
1614      
1615      
1616      
1617      
1618      
1619      
1620      
1621    
1622  
1623  
1624  
1625
1626  
1627  
1628
1629  
1630
1631  
1632  
1633    
1634    
1635      
1636      
1637      
1638    
1639    
1640  
1641
1642  
1643    
1644    
1645      
1646      
1647      
1648      
1649      
1650      
1651      
1652      
1653      
1654      
1655      
1656      
1657      
1658      
1659      
1660    
1661  
1662  
1663  
1664
1665  
1666  
1667
1668  
1669
1670  
1671  
1672    
1673    
1674      
1675      
1676      
1677    
1678    
1679  
1680
1681  
1682    
1683    
1684      
1685      
1686      
1687      
1688      
1689      
1690      
1691      
1692      
1693      
1694      
1695      
1696      
1697      
1698      
1699    
1700  
1701  
1702  
1703
1704  
1705  
1706
1707  
1708
1709  
1710  
1711    
1712    
1713      
1714      
1715      
1716    
1717      
1718      
1719      
1720    
1721    
1722  
1723
1724  
1725    
1726    
1727      
1728      
1729      
1730      
1731      
1732      
1733      
1734      
1735      
1736      
1737      
1738      
1739      
1740      
1741      
1742    
1743  
1744    
1745    
1746      
1747      
1748      
1749      
1750      
1751      
1752      
1753      
1754      
1755      
1756      
1757      
1758      
1759      
1760      
1761    
1762  
1763  
1764  
1765
1766  
1767  
1768
1769  
1770
1771  
1772  
1773    
1774    
1775      
1776      
1777      
1778    
1779    
1780  
1781
1782  
1783    
1784    
1785      
1786      
1787      
1788      
1789      
1790      
1791      
1792      
1793      
1794      
1795      
1796      
1797      
1798      
1799      
1800    
1801  
1802  
1803  
1804
1805  
1806  
1807
1808  
1809
1810  
1811  
1812    
1813    
1814      
1815      
1816      
1817    
1818      
1819      
1820      
1821    
1822      
1823      
1824      
1825    
1826      
1827      
1828      
1829    
1830    
1831  
1832
1833  
1834    
1835    
1836      
1837      
1838      
1839      
1840      
1841      
1842      
1843      
1844      
1845      
1846      
1847      
1848      
1849      
1850      
1851    
1852  
1853    
1854    
1855      
1856      
1857      
1858      
1859      
1860      
1861      
1862      
1863      
1864      
1865      
1866      
1867      
1868      
1869      
1870    
1871  
1872    
1873    
1874      
1875      
1876      
1877      
1878      
1879      
1880      
1881      
1882      
1883      
1884      
1885      
1886      
1887      
1888      
1889    
1890  
1891    
1892    
1893      
1894      
1895      
1896      
1897      
1898      
1899      
1900      
1901      
1902      
1903      
1904      
1905      
1906      
1907      
1908    
1909  
1910  
1911  
1912  
1913  
1914  
1915  
1916  
1917  
1918
1919  
1919<script
1920    defer
1921    src="/js/hugo-blox-en.min.65b31b94cb4f09cfd8f827efdb711400b677b90781e4aee753207d95de698687.js"
1922    integrity="sha256-ZbMblMtPCc/Y&#43;Cfv23EUALZ3uQeB5K7nUyB9ld5phoc="
1923  ></script>
1923
1924
1925  
1926  
1927
1928
1929
1930
1931
1932
1933
1934
1935
1936
1937
1938
1939
1940
1941
1942
1943
1944
1945
1946
1947
1948
1949
1950
1951
1952  
1953  
1954
1955
1956
1957
1958
1959
1960
1961
1962  
1963    
1964      
1965        
1966        
1966<script async defer src="https://buttons.github.io/buttons.js"></script>
1966
1967
1968        
1969      
1970    
1971  
1972
1973
1974
1975
1976</head>
1977
1978  <body class="bg-[var(--color-background)] text-[var(--color-foreground)] page-wrapper" id="top">
1979    <div id="page-bg"></div>
1980    <div class="page-header sticky top-0 z-30">
1981      
1982      
1983      
1984        
1985          
1986
1987<header id="site-header" class="header">
1988  <nav class="navbar px-3 flex justify-start">
1989    <div class="order-0 h-full">
1990      
1991      <a class="navbar-brand" href="/" title="Frank Reinhold">
1992        
1993        
1994        
1995        Frank Reinhold
1996      </a>
1997    </div>
1998    
1999    <input id="nav-toggle" type="checkbox" class="hidden" />
2000    <label
2001      for="nav-toggle"
2002      class="order-3 cursor-pointer flex items-center lg:hidden text-[var(--color-header-fg)] lg:order-1">
2003      <svg id="show-button" class="h-6 fill-current block" viewBox="0 0 20 20">
2004        <title>Open Menu</title>
2005        <path d="M0 3h20v2H0V3z m0 6h20v2H0V9z m0 6h20v2H0V0z"></path>
2006      </svg>
2007      <svg id="hide-button" class="h-6 fill-current hidden" viewBox="0 0 20 20">
2008        <title>Close Menu</title>
2009        <polygon
2010          points="11 9 22 9 22 11 11 11 11 22 9 22 9 11 -2 11 -2 9 9 9 9 -2 11 -2"
2011          transform="rotate(45 10 10)"></polygon>
2012      </svg>
2013    </label>
2014    
2015
2016    
2017    
2018    <ul
2019      id="nav-menu"
2020      class="navbar-nav order-3 hidden lg:flex w-full pb-6 lg:order-1 lg:w-auto lg:space-x-2 lg:pb-0 xl:space-x-8 justify-start
2021      ">
2022      
2023      
2024      
2025      
2026      
2027      
2028      <li class="nav-item">
2029        <a
2030          class="nav-link "
2031          
2032          href="/"
2033        >Home</a
2034        >
2035      </li>
2036      
2037      
2038      
2039      
2040      
2041      
2042      <li class="nav-item">
2043        <a
2044          class="nav-link "
2045          
2046          href="/#news"
2047        >News</a
2048        >
2049      </li>
2050      
2051      
2052      
2053      
2054      
2055      
2056      <li class="nav-item">
2057        <a
2058          class="nav-link "
2059          
2060          href="/#featuredpub"
2061        >Featured</a
2062        >
2063      </li>
2064      
2065      
2066      
2067      
2068      
2069      
2070      <li class="nav-item">
2071        <a
2072          class="nav-link "
2073          
2074          href="/#featuredfocus"
2075        >Research</a
2076        >
2077      </li>
2078      
2079      
2080      
2081      
2082      
2083      
2084      <li class="nav-item">
2085        <a
2086          class="nav-link "
2087          
2088          href="/experience/"
2089        >Experience</a
2090        >
2091      </li>
2092      
2093      
2094      
2095      
2096      
2097      
2098      <li class="nav-item">
2099        <a
2100          class="nav-link "
2101          
2102          href="/publication"
2103        >Publications</a
2104        >
2105      </li>
2106      
2107      
2108      
2109      
2110      
2111      
2112      <li class="nav-item">
2113        <a
2114          class="nav-link "
2115          
2116          href="/projects/"
2117        >Projects</a
2118        >
2119      </li>
2120      
2121      
2122      
2123      
2124      
2125      
2126      <li class="nav-item">
2127        <a
2128          class="nav-link "
2129          
2130          href="/events/"
2131        >Talks</a
2132        >
2133      </li>
2134      
2135      
2136      
2137      
2138      
2139      
2140      <li class="nav-item">
2141        <a
2142          class="nav-link active"
2143          
2144          href="/posts/"
2145        >Blog</a
2146        >
2147      </li>
2148      
2149      
2150      
2151    </ul>
2152
2153    <div class="order-1 ml-auto flex items-center md:order-2 lg:ml-0">
2154
2155      
2156      
2157      
2158
2159      
2160      
2161
2162      
2163      
2164
2165      
2166      
2167
2168      
2169      
2170    </div>
2171  </nav>
2172</header>
2173
2174
2175
2176        
2177      
2178    </div>
2179    
2180    <div class="page-body ">
2181      
2182
2183  
2184  
2185    
2186
2187
2188
2189
2190
2191
2192
2193
2194  
2195
2196  
2197
2198  
2199
2200  
2201
2202  
2203
2204
2205
2206
2207
2208
2209
2210
2211
2212
2213
2214
2215
2216
2217
2218
2219
2220
2221
2222
2223
2224
2225
2226
2227
2228
2229
2230
2231
2232
2233
2234
2235
2236
2237
2238
2239
2240
2241  
2242  
2243
2244
2245
2246
2247
2248
2249
2250
2251
2252
2253  
2254  
2255  
2256
2257  
2258  
2259
2260  
2261
2262  
2263
2264  
2265  <section id="section-collection" class="relative  hbb-section blox-collection  " style="padding: 30px 0 0 0;">
2266    
2267    
2268    <div class="home-section-bg " >
2269      
2270    </div>
2271    
2272
2273
2274
2275
2276
2277
2278
2279
2280
2281
2282
2283  
2284
2285
2286
2287
2288
2289
2290
2291
2292
2293
2294
2295
2296  
2297  
2298  
2299  
2300  
2301
2302
2303
2304
2305
2306
2307
2308
2309
2310
2311
2312
2313
2314
2315
2316
2317
2318
2319
2320
2321
2322
2323
2324  
2325
2326
2327
2328
2329  
2330
2331  
2332
2333  
2334
2335  
2336
2337  
2338
2339  
2340
2341
2342
2343
2344
2345<div class="flex flex-col items-center max-w-prose mx-auto gap-3 justify-center px-6 md:px-0">
2346
2347  <div class="mb-6 text-3xl font-bold text-gray-900 dark:text-white">
2348    Blog Entries
2349  </div>
2350
2351  <p>This is an overview of my blog post entries.</p>
2352</div>
2353
2354
2355<div class="flex flex-col items-center px-6">
2356
2357  
2358  
2359
2360
2361<div class="container px-8 mx-auto xl:px-5 py-5 lg:py-8 max-w-screen-lg ">
2362  <div class="grid gap-10 md:grid-cols-3 lg:gap-10">
2363
2364
2365  
2366    
2367
2368
2369
2370
2371
2372
2373
2374
2375
2376
2377
2378
2379
2380
2381<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-8a8b34bba55e3617cc138b0057da84f3">
2382    
2383    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2384      
2385      
2386        
2387          
2388          
2389            
2390          
2391          
2392          <a href="/posts/2026-03-08_reinholdleaind/"  class="block">
2393            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2394                 srcset="/posts/2026-03-08_reinholdleaind/featured_hu_5723a39f4fb2b5ee.webp 400w, /posts/2026-03-08_reinholdleaind/featured_hu_7f034ea37494bdeb.webp 600w, /posts/2026-03-08_reinholdleaind/featured_hu_4a0f77a2fe06d2f4.webp 800w, /posts/2026-03-08_reinholdleaind/featured_hu_a2c101974caa8aec.webp 800w"
2395                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2396                 src="/posts/2026-03-08_reinholdleaind/featured_hu_5723a39f4fb2b5ee.webp" 
2397                 width="800" 
2398                 height="450"
2399                 loading="lazy" 
2400                 decoding="async"
2401                 fetchpriority="high"
2402                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2403                 alt="Who Outperforms Whom in School—and Why? The Role of Motivation and Culture in Gender Gaps featured image">
2404          </a>
2405        
2406      
2407      
2408      
2409      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2409parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2410    </div>
2411
2412    
2413    <div class="p-8 space-y-4">
2414      
2415
2416      
2417      <div class="flex items-center gap-2">
2418        
2419        <a href="/tags/gender-disparities/">
2420          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2421            Gender Disparities
2422          </span>
2423        </a>
2424        
2425      </div>
2426      
2427
2428      <h3 id="card-title-8a8b34bba55e3617cc138b0057da84f3" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
2429        <a href="/posts/2026-03-08_reinholdleaind/"  class="hover:underline">
2430          Who Outperforms Whom in School—and Why? The Role of Motivation and Culture in Gender Gaps
2431          
2432        </a>
2433      </h3>
2434      
2435      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
2436        Achievement gaps between boys and girls reflect a complex interaction of motivation, beliefs, and societal influences.
2437      </p>
2438
2439      
2440
2441      
2442      
2443      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
2444        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
2445          
2446          <div class="flex items-center gap-2 min-w-0">
2447            
2448            
2449              
2450              <div class="relative h-6 w-6 flex-shrink-0">
2451                
2452                
2453                  
2454                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
2455                
2456              </div>
2457              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
2458            
2459          </div>
2460          <span class="opacity-40">•</span>
2461          
2462          
2463            <time class="hidden sm:inline whitespace-nowrap" datetime="2026-03-08">
2464              Mar 8, 2026
2465            </time>
2466          
2467          
2468          
2469        </div>
2470        
2471        
2472        
2473      </div>
2474      
2475      
2476      
2477      
2478    </div>
2479</div>
2480  
2481    
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
2493
2494
2495
2496<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-ba7775705740de682c240cf963b8b3c7">
2497    
2498    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2499      
2500      
2501        
2502          
2503          
2504            
2505          
2506          
2507          <a href="/posts/2025-12-19_reuteresm/"  class="block">
2508            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2509                 srcset="/posts/2025-12-19_reuteresm/featured_hu_ee264015a7a4ccf8.webp 400w, /posts/2025-12-19_reuteresm/featured_hu_d2a31d0536e80393.webp 600w, /posts/2025-12-19_reuteresm/featured_hu_f56e1d40844d8756.webp 799w"
2510                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2511                 src="/posts/2025-12-19_reuteresm/featured_hu_ee264015a7a4ccf8.webp" 
2512                 width="799" 
2513                 height="450"
2514                 loading="lazy" 
2515                 decoding="async"
2516                 
2517                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2518                 alt="Why Some Patterns Are Harder Than Others: What Primary Students Really Struggle With featured image">
2519          </a>
2520        
2521      
2522      
2523      
2524      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2524parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2525    </div>
2526
2527    
2528    <div class="p-8 space-y-4">
2529      
2530
2531      
2532      <div class="flex items-center gap-2">
2533        
2534        <a href="/tags/pattern-recognition/">
2535          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2536            Pattern Recognition
2537          </span>
2538        </a>
2539        
2540      </div>
2541      
2542
2543      <h3 id="card-title-ba7775705740de682c240cf963b8b3c7" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
2544        <a href="/posts/2025-12-19_reuteresm/"  class="hover:underline">
2545          Why Some Patterns Are Harder Than Others: What Primary Students Really Struggle With
2546          
2547        </a>
2548      </h3>
2549      
2550      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
2551        Patterns are often called the heart of mathematics, but recognizing a pattern is more complex than it seems.
2552      </p>
2553
2554      
2555
2556      
2557      
2558      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
2559        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
2560          
2561          <div class="flex items-center gap-2 min-w-0">
2562            
2563            
2564              
2565              <div class="relative h-6 w-6 flex-shrink-0">
2566                
2567                
2568                  
2569                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
2570                
2571              </div>
2572              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
2573            
2574          </div>
2575          <span class="opacity-40">•</span>
2576          
2577          
2578            <time class="hidden sm:inline whitespace-nowrap" datetime="2025-12-19">
2579              Dec 19, 2025
2580            </time>
2581          
2582          
2583          
2584        </div>
2585        
2586        
2587        
2588      </div>
2589      
2590      
2591      
2592      
2593    </div>
2594</div>
2595  
2596    
2597
2598
2599
2600
2601
2602
2603
2604
2605
2606
2607
2608
2609
2610
2611<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-c7ffd733748f0d8376ac12fecae7066a">
2612    
2613    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2614      
2615      
2616        
2617          
2618          
2619            
2620          
2621          
2622          <a href="/posts/2025-12-04_abtzdm/"  class="block">
2623            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2624                 srcset="/posts/2025-12-04_abtzdm/featured_hu_27029694c3de618f.webp 400w, /posts/2025-12-04_abtzdm/featured_hu_44c997419379b6a6.webp 600w, /posts/2025-12-04_abtzdm/featured_hu_957f96f14c8438e9.webp 800w, /posts/2025-12-04_abtzdm/featured_hu_9d5e80a9275d1e75.webp 800w"
2625                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2626                 src="/posts/2025-12-04_abtzdm/featured_hu_27029694c3de618f.webp" 
2627                 width="800" 
2628                 height="450"
2629                 loading="lazy" 
2630                 decoding="async"
2631                 
2632                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2633                 alt="How Students &#39;See&#39; Boxplots: New Evidence for Extrafoveal Information Processing featured image">
2634          </a>
2635        
2636      
2637      
2638      
2639      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2639parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2640    </div>
2641
2642    
2643    <div class="p-8 space-y-4">
2644      
2645
2646      
2647      <div class="flex items-center gap-2">
2648        
2649        <a href="/tags/eye-tracking/">
2650          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2651            Eye Tracking
2652          </span>
2653        </a>
2654        
2655      </div>
2656      
2657
2658      <h3 id="card-title-c7ffd733748f0d8376ac12fecae7066a" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
2659        <a href="/posts/2025-12-04_abtzdm/"  class="hover:underline">
2660          How Students &#39;See&#39; Boxplots: New Evidence for Extrafoveal Information Processing
2661          
2662        </a>
2663      </h3>
2664      
2665      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
2666        Our study shows that some boxplot elements can be processed extrafoveally, revealing when students interpret statistical graphics simultaneously rather than sequentially.
2667      </p>
2668
2669      
2670
2671      
2672      
2673      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
2674        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
2675          
2676          <div class="flex items-center gap-2 min-w-0">
2677            
2678            
2679              
2680              <div class="relative h-6 w-6 flex-shrink-0">
2681                
2682                
2683                  
2684                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
2685                
2686              </div>
2687              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
2688            
2689          </div>
2690          <span class="opacity-40">•</span>
2691          
2692          
2693            <time class="hidden sm:inline whitespace-nowrap" datetime="2025-12-04">
2694              Dec 4, 2025
2695            </time>
2696          
2697          
2698          
2699        </div>
2700        
2701        
2702        
2703      </div>
2704      
2705      
2706      
2707      
2708    </div>
2709</div>
2710  
2711    
2712
2713
2714
2715
2716
2717
2718
2719
2720
2721
2722
2723
2724
2725
2726<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-725c4ee9ab4740fb95ba80b433683620">
2727    
2728    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2729      
2730      
2731        
2732          
2733          
2734            
2735          
2736          
2737          <a href="/posts/2025-11-17_kadlubacaeo/"  class="block">
2738            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2739                 srcset="/posts/2025-11-17_kadlubacaeo/featured_hu_21f6407de3a887ee.webp 400w, /posts/2025-11-17_kadlubacaeo/featured_hu_458628edc32e62f2.webp 600w, /posts/2025-11-17_kadlubacaeo/featured_hu_8f52fe8ec4ea556.webp 800w, /posts/2025-11-17_kadlubacaeo/featured_hu_92595174da70f76e.webp 800w"
2740                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2741                 src="/posts/2025-11-17_kadlubacaeo/featured_hu_21f6407de3a887ee.webp" 
2742                 width="800" 
2743                 height="450"
2744                 loading="lazy" 
2745                 decoding="async"
2746                 
2747                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2748                 alt="How Teachers Really Use Digital Technology in Math Classrooms featured image">
2749          </a>
2750        
2751      
2752      
2753      
2754      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2754parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2755    </div>
2756
2757    
2758    <div class="p-8 space-y-4">
2759      
2760
2761      
2762      <div class="flex items-center gap-2">
2763        
2764        <a href="/tags/teaching-practices/">
2765          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2766            Teaching Practices
2767          </span>
2768        </a>
2769        
2770      </div>
2771      
2772
2773      <h3 id="card-title-725c4ee9ab4740fb95ba80b433683620" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
2774        <a href="/posts/2025-11-17_kadlubacaeo/"  class="hover:underline">
2775          How Teachers Really Use Digital Technology in Math Classrooms
2776          
2777        </a>
2778      </h3>
2779      
2780      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
2781        Our new study shows how differently mathematics teachers integrate the same digital tool-revealing four distinct teaching approaches that shape technology-enhanced learning.
2782      </p>
2783
2784      
2785
2786      
2787      
2788      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
2789        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
2790          
2791          <div class="flex items-center gap-2 min-w-0">
2792            
2793            
2794              
2795              <div class="relative h-6 w-6 flex-shrink-0">
2796                
2797                
2798                  
2799                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
2800                
2801              </div>
2802              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
2803            
2804          </div>
2805          <span class="opacity-40">•</span>
2806          
2807          
2808            <time class="hidden sm:inline whitespace-nowrap" datetime="2025-11-17">
2809              Nov 17, 2025
2810            </time>
2811          
2812          
2813          
2814        </div>
2815        
2816        
2817        
2818      </div>
2819      
2820      
2821      
2822      
2823    </div>
2824</div>
2825  
2826    
2827
2828
2829
2830
2831
2832
2833
2834
2835
2836
2837
2838
2839
2840
2841<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-f3634167a38a86557a076b74d7e1561a">
2842    
2843    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2844      
2845      
2846        
2847          
2848          
2849            
2850          
2851          
2852          <a href="/posts/2025-11-03_compile/"  class="block">
2853            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2854                 srcset="/posts/2025-11-03_compile/featured_hu_97154a1a99fa9905.webp 400w, /posts/2025-11-03_compile/featured_hu_b73d7028faf7250a.webp 600w, /posts/2025-11-03_compile/featured_hu_6346dc57b4965afc.webp 800w, /posts/2025-11-03_compile/featured_hu_41067671afe456ec.webp 800w"
2855                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2856                 src="/posts/2025-11-03_compile/featured_hu_97154a1a99fa9905.webp" 
2857                 width="800" 
2858                 height="450"
2859                 loading="lazy" 
2860                 decoding="async"
2861                 
2862                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2863                 alt="Launch of the COMPI.LE Research Project featured image">
2864          </a>
2865        
2866      
2867      
2868      
2869      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2869parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2870    </div>
2871
2872    
2873    <div class="p-8 space-y-4">
2874      
2875
2876      
2877      <div class="flex items-center gap-2">
2878        
2879        <a href="/tags/digital-tools/">
2880          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2881            Digital Tools
2882          </span>
2883        </a>
2884        
2885      </div>
2886      
2887
2888      <h3 id="card-title-f3634167a38a86557a076b74d7e1561a" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
2889        <a href="/posts/2025-11-03_compile/"  class="hover:underline">
2890          Launch of the COMPI.LE Research Project
2891          
2892        </a>
2893      </h3>
2894      
2895      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
2896        With support from the Daimler and Benz Foundation, COMPI.LE investigates how playful building and programming with LEGO® SPIKE™ Essential fosters computational thinking in young …
2897      </p>
2898
2899      
2900
2901      
2902      
2903      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
2904        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
2905          
2906          <div class="flex items-center gap-2 min-w-0">
2907            
2908            
2909              
2910              <div class="relative h-6 w-6 flex-shrink-0">
2911                
2912                
2913                  
2914                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
2915                
2916              </div>
2917              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
2918            
2919          </div>
2920          <span class="opacity-40">•</span>
2921          
2922          
2923            <time class="hidden sm:inline whitespace-nowrap" datetime="2025-11-03">
2924              Nov 3, 2025
2925            </time>
2926          
2927          
2928          
2929        </div>
2930        
2931        
2932        
2933      </div>
2934      
2935      
2936      
2937      
2938    </div>
2939</div>
2940  
2941    
2942
2943
2944
2945
2946
2947
2948
2949
2950
2951
2952
2953
2954
2955
2956<div class="group bg-white/90 dark:bg-zinc-900/90 backdrop-blur-sm rounded-2xl ring-1 ring-zinc-900/5 dark:ring-white/10 shadow-lg overflow-hidden transition-all duration-300 ease-out hover:shadow-xl hover:shadow-blue-500/10 hover:-translate-y-2 focus-within:ring-2 focus-within:ring-blue-500/50" role="article" aria-labelledby="card-title-62659ae0969d7478f59882de91940e1f">
2957    
2958    <div class="relative overflow-hidden aspect-[16/9] bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-800 dark:to-zinc-900">
2959      
2960      
2961        
2962          
2963          
2964            
2965          
2966          
2967          <a href="/posts/2025-06-24_hoferjli/"  class="block">
2968            <img class="w-full h-full transition-transform duration-500 ease-out group-hover:scale-105 object-contain" 
2969                 srcset="/posts/2025-06-24_hoferjli/featured_hu_a1c0376cd82e55a8.webp 400w, /posts/2025-06-24_hoferjli/featured_hu_8a17b3dd007acf9b.webp 600w, /posts/2025-06-24_hoferjli/featured_hu_825e80106e882b8f.webp 800w, /posts/2025-06-24_hoferjli/featured_hu_61ea75fb12ace34.webp 800w"
2970                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
2971                 src="/posts/2025-06-24_hoferjli/featured_hu_a1c0376cd82e55a8.webp" 
2972                 width="800" 
2973                 height="450"
2974                 loading="lazy" 
2975                 decoding="async"
2976                 
2977                 style="position: absolute; height: 100%; width: 100%; inset: 0px; color: transparent;"
2978                 alt="Aptitude-Treatment-Interaction Effects in Digital Math Learning featured image">
2979          </a>
2980        
2981      
2982      
2983      
2984      <div class="absolute inset-0 pointer-events-none bg-gradient-to-t from-black/10 via-trans
2984parent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
2985    </div>
2986
2987    
2988    <div class="p-8 space-y-4">
2989      
2990
2991      
2992      <div class="flex items-center gap-2">
2993        
2994        <a href="/tags/individual-differences/">
2995          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary-100 text-primary-800 dark:bg-primary-900/40 dark:text-primary-300">
2996            Individual Differences
2997          </span>
2998        </a>
2999        
3000      </div>
3001      
3002
3003      <h3 id="card-title-62659ae0969d7478f59882de91940e1f" class="text-xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200 leading-tight">
3004        <a href="/posts/2025-06-24_hoferjli/"  class="hover:underline">
3005          Aptitude-Treatment-Interaction Effects in Digital Math Learning
3006          
3007        </a>
3008      </h3>
3009      
3010      <p class="text-zinc-600 dark:text-zinc-400 text-base leading-relaxed line-clamp-3">
3011        A new article in Learning and Instruction examines which students benefit from different types of scaffolding when learning fractions on the number line in tablet-based …
3012      </p>
3013
3014      
3015
3016      
3017      
3018      <div class="pt-3 border-t border-zinc-100 dark:border-zinc-800">
3019        <div class="flex items-center gap-3 text-xs text-zinc-500 dark:text-zinc-500 flex-wrap mb-3">
3020          
3021          <div class="flex items-center gap-2 min-w-0">
3022            
3023            
3024              
3025              <div class="relative h-6 w-6 flex-shrink-0">
3026                
3027                
3028                  
3029                  <img alt="avatar" class="rounded-full object-cover" src="/authors/admin/avatar_hu_7920a977f573d4ac.webp" width="24" height="24" loading="lazy" decoding="async" />
3030                
3031              </div>
3032              <span class="truncate max-w-[9rem] text-sm">Frank Reinhold</span>
3033            
3034          </div>
3035          <span class="opacity-40">•</span>
3036          
3037          
3038            <time class="hidden sm:inline whitespace-nowrap" datetime="2025-06-24">
3039              Jun 24, 2025
3040            </time>
3041          
3042          
3043          
3044        </div>
3045        
3046        
3047        
3048      </div>
3049      
3050      
3051      
3052      
3053    </div>
3054</div>
3055  
3056
3057    </div>
3058</div>
3059
3060
3061</div>
3062
3063
3064
3065
3066
3067  </section>
3068
3069  
3070
3071
3072    </div>
3073    <div class="page-footer">
3074      <footer class="container mx-auto flex flex-col justify-items-center text-sm leading-6 mt-24 mb-4 text-slate-700 dark:text-slate-200">
3075
3076  
3077
3078
3079
3080
3081
3082
3083
3084
3085  
3086
3087
3088
3089
3090
3091  
3092  
3093  
3094
3095
3096
3097
3098
3099
3100
3101
3102
3103
3104
3105
3106
3107
3108
3109  
3110  <p class="powered-by text-center">
3111    
3112    
3113    © 2026 Frank Reinhold. This work is licensed under {license}
3114  </p>
3115  
3116
3117
3118
3119
3120
3121  
3122  
3123  
3124    
3125    
3126      
3127      
3128        
3129        
3130      
3131    
3132
3133    <p class="powered-by text-center text-sm opacity-80 py-1">
3134      
3135      
3136      
3137      
3138      
3139        
3140      
3141      
3142      
3143      
3144      
3145      Made with <a class="underline hover:opacity-100" href="https://hugoblox.com?utm_source=site_footer&utm_medium=referral&utm_campaign=poweredby_oss&utm_content=brand_academic-cv" target="_blank" rel="noopener" data-hbx="poweredby_brand">Hugo Blox</a>.
3146      <a class="inline-flex items-center rounded px-2 py-0.5 border border-current ms-2 text-xs hover:opacity-100"
3147         href="https://hugoblox.com/templates/academic-cv/start?utm_source=site_footer&amp;utm_medium=referral&amp;utm_campaign=poweredby_oss&amp;utm_content=cta_academic-cv" target="_blank" rel="noopener" data-hbx="poweredby_cta">Create yours →</a>
3148    </p>  
3149
3150</footer>
3151
3152    </div>
3153
3154    
3155    
3156
3157
3158<div id="hb-notification-container" class="fixed top-20 right-4 z-[9999] pointer-events-none" aria-live="polite" aria-atomic="true"></div>
3159
3160
3161    
3162    
3163
3164
3165
3166
3167
3168
3169
3170
3171  
3172
3173
3174
3175
3176
3177    
3178    
3179    
3180  </body>
3181</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.