Hugging Face's logo

Spaces:
CompactAI-O
/
Homepage
Running

App Files Community
2
CompactAI commited on
Commit
19379dd
·
verified ·
1 Parent(s): 0e295ad

Upload 85 files

Browse files
This view is limited to 50 files because it contains too many changes.   See raw diff
Files changed (50) hide show
  1. 261 Hours For A 300M Model And I Have Every Optimization.html +66 -28
  2. Blog-TheBloateningWhenAICompaniesForgotAbouttheLittleGuy.html +64 -26
  3. Closed Source Distillation Is A Half-Finished Puzzle.html +65 -27
  4. DeepSeek Beat Me To My Own Idea And I Am Not Okay.html +66 -28
  5. Distilling Closed Models Until They Forget They Were Closed.html +61 -23
  6. Distilling%20Closed%20Models%20Until%20They%20Forget%20They%20Were%20Closed.html +61 -23
  7. Distilling%2520Closed%2520Models%2520Until%2520They%2520Forget%2520They%2520Were%2520Closed.html +61 -23
  8. Every AI Model Is Lazy And I Have The Screenshots.html +68 -30
  9. I Bricked My School Chromebook With Pi-hole And Regret Everything.html +65 -27
  10. I Am Joining Forces With TeichAI And It Is Funny Either Way.html +66 -28
  11. I Asked AI To Mod My VBIOS And It Choked At Step Four.html +67 -29
  12. I Built A Tool That Snitches On AI Models.html +72 -34
  13. I Built A Training UI And Then Unsloth Laughed.html +65 -27
  14. I Captured The Ghosts In The Machine (And Named It Prism).html +67 -29
  15. I Deleted Sonnet Because My Dataloader Had Too Many Hands.html +68 -30
  16. I Dreamed Of NaN And Woke Up To NaN.html +65 -27
  17. I Finally Switched Terminals (And My Ego Is Healing).html +61 -23
  18. I Flashed The Matrix VBIOS And Now I Train Models All Day.html +67 -29
  19. I Locked My GPU Clocks And Now It Runs Forever.html +67 -29
  20. I Made A Dataset So Dense It Broke My Hard Drive.html +66 -28
  21. I Released A Model And Nobody Clapped (Fair) .html +64 -26
  22. I Released TMLM-Haiku-1.3 And It Is Still Dumb.html +67 -29
  23. I Spent $40 And Got A Greeting .html +67 -29
  24. I Tried Opus 4.6 And Now Everything Else Feels Broken.html +66 -28
  25. I Watched Anthropic Find Anxiety Neurons And Now I Want To Delete Them.html +67 -29
  26. I Watched Project Hail Mary And Forgot About My NaN Loss.html +68 -30
  27. I Woke Up To NaN And Now I Am Dead Inside.html +66 -28
  28. I%20Finally%20Switched%20Terminals%20%28And%20My%20Ego%20Is%20Healing%29.html +61 -23
  29. I%20Finally%20Switched%20Terminals%20(And%20My%20Ego%20Is%20Healing).html +61 -23
  30. I%2520Finally%2520Switched%2520Terminals%2520%28And%2520My%2520Ego%2520Is%2520Healing%29.html +61 -23
  31. OpenAI Did A Good Thing And Everyone Is Mad About It .html +68 -30
  32. TMLM-Haiku-2 Is Coming And It Might Speak English.html +66 -28
  33. Teaching AI to Regret: The Backspace Token Theory.html +66 -28
  34. Teaching%20AI%20to%20Regret%3A%20The%20Backspace%20Token%20Theory.html +66 -28
  35. Teaching%20AI%20to%20Regret:%20The%20Backspace%20Token%20Theory.html +66 -28
  36. Teaching%2520AI%2520to%2520Regret%3A%2520The%2520Backspace%2520Token%2520Theory.html +66 -28
  37. The Chinchilla Effect: Why Tiny Models Have to Be Picky.html +62 -24
  38. The Training Time Compute Trap.html +64 -26
  39. The%20Chinchilla%20Effect%3A%20Why%20Tiny%20Models%20Have%20to%20Be%20Picky.html +62 -24
  40. The%20Chinchilla%20Effect:%20Why%20Tiny%20Models%20Have%20to%20Be%20Picky.html +62 -24
  41. The%20Training%20Time%20Compute%20Trap.html +64 -26
  42. The%2520Chinchilla%2520Effect%3A%2520Why%2520Tiny%2520Models%2520Have%2520to%2520Be%2520Picky.html +62 -24
  43. The%2520Training%2520Time%2520Compute%2520Trap.html +64 -26
  44. Two Days For Ten Percent And Opus Is Laughing At Me.html +68 -30
  45. blog-Anthropic%2527s-Distillation-Drama-A-Masterclass-in-Projection.html +70 -3
  46. blog-Anthropic%27s-Distillation-Drama-A-Masterclass-in-Projection.html +70 -3
  47. blog-Anthropic's-Distillation-Drama-A-Masterclass-in-Projection.html +70 -3
  48. blog-External-Memory-Modules-Because-My-Model-Has-Commitment-Issues.html +65 -20
  49. blog-My Baby-Model-Takes-Forever-to-Grow-Up.html +70 -3
  50. blog-My%20Baby-Model-Takes-Forever-to-Grow-Up.html +70 -3
261 Hours For A 300M Model And I Have Every Optimization.html CHANGED
@@ -1,67 +1,105 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>261 Hours For A 300M Model And I Have Every Optimization | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .opt-list { list-style: none; padding: 0; margin: 24px 0; }
47
- .opt-list li { padding: 16px 20px; background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--gray-6); display: flex; justify-content: space-between; align-items: center; }
48
  .opt-list li .status { color: var(--accent); font-size: 12px; font-family: var(--font-mono); }
49
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
50
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
51
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
52
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
53
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
54
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
55
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
56
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
57
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
58
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
59
- footer a { color: var(--gray-5); }
60
  footer a:hover { color: var(--accent); }
61
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
62
- </style>
 
 
63
  </head>
64
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  <nav>
66
  <div class="container">
67
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>261 Hours For A 300M Model And I Have Every Optimization | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .opt-list { list-style: none; padding: 0; margin: 24px 0; }
62
+ .opt-list li { padding: 16px 20px; background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--blue-200); display: flex; justify-content: space-between; align-items: center; }
63
  .opt-list li .status { color: var(--accent); font-size: 12px; font-family: var(--font-mono); }
64
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
65
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
66
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
67
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
68
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
69
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
70
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
71
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
72
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
73
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
74
+ footer a { color: var(--blue-200); }
75
  footer a:hover { color: var(--accent); }
76
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
77
+
78
+ </style>
79
+
80
  </head>
81
  <body>
82
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
83
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
84
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
85
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
87
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
89
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
91
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
96
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
99
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
100
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
101
+ </svg>
102
+
103
  <nav>
104
  <div class="container">
105
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Blog-TheBloateningWhenAICompaniesForgotAbouttheLittleGuy.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Bloatening: When AI Companies Forgot About the Little Guy | TinyMemoryLM</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com ">
8
- <link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist :wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Bloatening: When AI Companies Forgot About the Little Guy | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Closed Source Distillation Is A Half-Finished Puzzle.html CHANGED
@@ -1,64 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Closed Source Distillation Is A Half-Finished Puzzle | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
53
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
54
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
55
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
56
- footer a { color: var(--gray-5); }
57
  footer a:hover { color: var(--accent); }
58
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
59
- </style>
 
 
60
  </head>
61
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  <nav>
63
  <div class="container">
64
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Closed Source Distillation Is A Half-Finished Puzzle | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
68
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
69
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
70
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
71
+ footer a { color: var(--blue-200); }
72
  footer a:hover { color: var(--accent); }
73
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
74
+
75
+ </style>
76
+
77
  </head>
78
  <body>
79
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
80
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
81
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
82
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
83
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
84
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
91
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
98
+ </svg>
99
+
100
  <nav>
101
  <div class="container">
102
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
DeepSeek Beat Me To My Own Idea And I Am Not Okay.html CHANGED
@@ -1,66 +1,104 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>DeepSeek Beat Me To My Own Idea And I Am Not Okay | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .comparison-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; }
48
- .comparison-card h3 { font-size: 14px; color: var(--gray-5); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
49
  .comparison-card.me { border-color: var(--gray-4); }
50
  .comparison-card.them { border-color: var(--accent); }
51
- .comparison-card p { font-size: 14px; color: var(--gray-6); }
52
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
53
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
54
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
55
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
56
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
57
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
58
- footer a { color: var(--gray-5); }
59
  footer a:hover { color: var(--accent); }
60
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .comparison-grid { grid-template-columns: 1fr; } }
61
- </style>
 
 
62
  </head>
63
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  <nav>
65
  <div class="container">
66
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>DeepSeek Beat Me To My Own Idea And I Am Not Okay | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .comparison-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; }
63
+ .comparison-card h3 { font-size: 14px; color: var(--blue-200); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
64
  .comparison-card.me { border-color: var(--gray-4); }
65
  .comparison-card.them { border-color: var(--accent); }
66
+ .comparison-card p { font-size: 14px; color: var(--blue-200); }
67
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
68
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
69
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
70
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
71
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
72
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
73
+ footer a { color: var(--blue-200); }
74
  footer a:hover { color: var(--accent); }
75
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .comparison-grid { grid-template-columns: 1fr; } }
76
+
77
+ </style>
78
+
79
  </head>
80
  <body>
81
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
82
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
83
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
84
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
85
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
86
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
93
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
100
+ </svg>
101
+
102
  <nav>
103
  <div class="container">
104
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Distilling Closed Models Until They Forget They Were Closed.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Distilling%20Closed%20Models%20Until%20They%20Forget%20They%20Were%20Closed.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Distilling%2520Closed%2520Models%2520Until%2520They%2520Forget%2520They%2520Were%2520Closed.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Distilling Closed Models Until They Forget They Were Closed | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Every AI Model Is Lazy And I Have The Screenshots.html CHANGED
@@ -1,70 +1,108 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Every AI Model Is Lazy And I Have The Screenshots | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
  .post-body h3 { font-size: 18px; font-weight: 600; color: var(--white); margin: 32px 0 16px; }
44
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
45
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
46
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
47
  .model-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
48
- .model-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; position: relative; }
49
  .model-card .rank { position: absolute; top: 12px; right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; }
50
  .model-card h3 { color: var(--white); margin-bottom: 12px; font-size: 16px; }
51
- .model-card p { font-size: 14px; color: var(--gray-6); margin-bottom: 8px; }
52
- .model-card .lazy-tag { display: inline-block; background: var(--gray-3); color: var(--white); font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-right: 4px; margin-bottom: 4px; }
53
- .model-card .comment { color: var(--gray-5); font-style: italic; font-size: 13px; margin-top: 8px; display: block; }
54
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
55
  .code-block .prompt { color: var(--accent); }
56
- .code-block .response { color: var(--gray-6); }
57
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
58
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
59
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
60
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
61
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
62
- footer a { color: var(--gray-5); }
63
  footer a:hover { color: var(--accent); }
64
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
65
- </style>
 
 
66
  </head>
67
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  <nav>
69
  <div class="container">
70
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Every AI Model Is Lazy And I Have The Screenshots | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
  .post-body h3 { font-size: 18px; font-weight: 600; color: var(--white); margin: 32px 0 16px; }
59
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
60
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
61
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
62
  .model-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0; }
63
+ .model-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; position: relative; }
64
  .model-card .rank { position: absolute; top: 12px; right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600; }
65
  .model-card h3 { color: var(--white); margin-bottom: 12px; font-size: 16px; }
66
+ .model-card p { font-size: 14px; color: var(--blue-200); margin-bottom: 8px; }
67
+ .model-card .lazy-tag { display: inline-block; background: var(--blue-500); color: var(--white); font-size: 10px; padding: 2px 6px; border-radius: 3px; margin-right: 4px; margin-bottom: 4px; }
68
+ .model-card .comment { color: var(--blue-200); font-style: italic; font-size: 13px; margin-top: 8px; display: block; }
69
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
70
  .code-block .prompt { color: var(--accent); }
71
+ .code-block .response { color: var(--blue-200); }
72
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
73
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
74
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
75
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
76
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
77
+ footer a { color: var(--blue-200); }
78
  footer a:hover { color: var(--accent); }
79
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
80
+
81
+ </style>
82
+
83
  </head>
84
  <body>
85
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
86
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
87
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
88
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
89
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
94
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
96
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
99
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
102
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
103
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
104
+ </svg>
105
+
106
  <nav>
107
  <div class="container">
108
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Bricked My School Chromebook With Pi-hole And Regret Everything.html CHANGED
@@ -1,63 +1,101 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Bricked My School Chromebook With Pi-hole And Regret Everything | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
- .loop-diagram { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; text-align: center; }
49
- .loop-diagram .step { padding: 8px 0; color: var(--gray-6); }
50
  .loop-diagram .step.highlight { color: var(--accent); font-weight: 600; }
51
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
52
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
53
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
54
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
55
- footer a { color: var(--gray-5); }
56
  footer a:hover { color: var(--accent); }
57
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
58
- </style>
 
 
59
  </head>
60
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61
  <nav>
62
  <div class="container">
63
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Bricked My School Chromebook With Pi-hole And Regret Everything | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
+ .loop-diagram { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; text-align: center; }
64
+ .loop-diagram .step { padding: 8px 0; color: var(--blue-200); }
65
  .loop-diagram .step.highlight { color: var(--accent); font-weight: 600; }
66
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
67
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
68
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
69
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
70
+ footer a { color: var(--blue-200); }
71
  footer a:hover { color: var(--accent); }
72
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
73
+
74
+ </style>
75
+
76
  </head>
77
  <body>
78
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
79
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
80
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
81
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
82
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
83
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
84
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
85
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
87
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
89
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
93
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
97
+ </svg>
98
+
99
  <nav>
100
  <div class="container">
101
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Am Joining Forces With TeichAI And It Is Funny Either Way.html CHANGED
@@ -1,66 +1,104 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Am Joining Forces With TeichAI And It Is Funny Either Way | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .collaboration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .collab-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; }
48
- .collab-card h3 { font-size: 14px; color: var(--gray-5); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
49
  .collab-card .names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
50
- .collab-card .name { background: var(--accent); color: var(--black); padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; }
51
  .collab-card a { color: var(--accent); font-weight: 600; }
52
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
53
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
54
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
55
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
56
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
57
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
58
- footer a { color: var(--gray-5); }
59
  footer a:hover { color: var(--accent); }
60
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .collaboration-grid { grid-template-columns: 1fr; } }
61
- </style>
 
 
62
  </head>
63
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  <nav>
65
  <div class="container">
66
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Am Joining Forces With TeichAI And It Is Funny Either Way | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .collaboration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .collab-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; }
63
+ .collab-card h3 { font-size: 14px; color: var(--blue-200); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
64
  .collab-card .names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
65
+ .collab-card .name { background: var(--accent); color: var(--blue-900); padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; }
66
  .collab-card a { color: var(--accent); font-weight: 600; }
67
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
68
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
69
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
70
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
71
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
72
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
73
+ footer a { color: var(--blue-200); }
74
  footer a:hover { color: var(--accent); }
75
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .collaboration-grid { grid-template-columns: 1fr; } }
76
+
77
+ </style>
78
+
79
  </head>
80
  <body>
81
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
82
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
83
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
84
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
85
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
86
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
93
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
100
+ </svg>
101
+
102
  <nav>
103
  <div class="container">
104
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Asked AI To Mod My VBIOS And It Choked At Step Four.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Asked AI To Mod My VBIOS And It Choked At Step Four | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .step-list { list-style: none; padding: 0; margin: 24px 0; }
47
- .step-list li { padding: 16px 20px; background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--gray-6); display: flex; justify-content: space-between; align-items: center; }
48
  .step-list li .status { font-size: 12px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 4px; }
49
- .step-list li .status.success { color: var(--accent); background: rgba(255, 77, 0, 0.1); }
50
  .step-list li .status.failed { color: #ff0000; background: rgba(255, 0, 0, 0.1); }
51
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
52
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
53
- .warning-box { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; }
54
  .warning-box h3 { color: var(--accent); font-size: 14px; margin-bottom: 12px; }
55
- .warning-box p { font-size: 14px; color: var(--gray-6); }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Asked AI To Mod My VBIOS And It Choked At Step Four | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .step-list { list-style: none; padding: 0; margin: 24px 0; }
62
+ .step-list li { padding: 16px 20px; background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--blue-200); display: flex; justify-content: space-between; align-items: center; }
63
  .step-list li .status { font-size: 12px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 4px; }
64
+ .step-list li .status.success { color: var(--accent); background: rgba(107, 163, 240, 0.1); }
65
  .step-list li .status.failed { color: #ff0000; background: rgba(255, 0, 0, 0.1); }
66
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
67
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
68
+ .warning-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; }
69
  .warning-box h3 { color: var(--accent); font-size: 14px; margin-bottom: 12px; }
70
+ .warning-box p { font-size: 14px; color: var(--blue-200); }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Built A Tool That Snitches On AI Models.html CHANGED
@@ -1,78 +1,116 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Built A Tool That Snitches On AI Models | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
  .post-body h3 { font-size: 18px; font-weight: 600; color: var(--white); margin: 32px 0 16px; }
44
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
45
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
46
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
47
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
48
  .code-block .prompt { color: var(--accent); }
49
- .code-block .response { color: var(--gray-6); }
50
  .code-block .guess { color: var(--white); font-weight: 600; }
51
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
52
  .code-block .keyword { color: var(--accent); }
53
- .code-block .string { color: var(--gray-6); }
54
  .usecase-list { list-style: none; padding: 0; margin: 24px 0; }
55
- .usecase-list li { padding: 16px 20px; background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--gray-6); }
56
  .usecase-list li strong { color: var(--white); display: block; margin-bottom: 4px; font-size: 16px; }
57
- .cta-box { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
58
  .cta-box a { color: var(--accent); font-weight: 600; font-size: 18px; word-break: break-all; }
59
  .cta-box a:hover { color: var(--white); }
60
- .cta-box p { margin: 12px 0 0; color: var(--gray-5); font-size: 14px; }
61
- .api-info { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; }
62
- .api-info .badge { display: inline-block; background: var(--accent); color: var(--black); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; margin-right: 8px; }
63
- .api-info .badge-secondary { background: var(--gray-3); color: var(--white); }
64
  .provider-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
65
- .provider-list span { background: var(--gray-1); border: 1px solid var(--gray-2); padding: 6px 12px; border-radius: 4px; font-size: 13px; color: var(--gray-6); font-family: var(--font-mono); }
66
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
67
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
68
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
69
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
70
- footer a { color: var(--gray-5); }
71
  footer a:hover { color: var(--accent); }
72
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
73
- </style>
 
 
74
  </head>
75
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
76
  <nav>
77
  <div class="container">
78
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Built A Tool That Snitches On AI Models | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
  .post-body h3 { font-size: 18px; font-weight: 600; color: var(--white); margin: 32px 0 16px; }
59
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
60
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
61
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
62
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
63
  .code-block .prompt { color: var(--accent); }
64
+ .code-block .response { color: var(--blue-200); }
65
  .code-block .guess { color: var(--white); font-weight: 600; }
66
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
67
  .code-block .keyword { color: var(--accent); }
68
+ .code-block .string { color: var(--blue-200); }
69
  .usecase-list { list-style: none; padding: 0; margin: 24px 0; }
70
+ .usecase-list li { padding: 16px 20px; background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; margin-bottom: 12px; font-size: 15px; color: var(--blue-200); }
71
  .usecase-list li strong { color: var(--white); display: block; margin-bottom: 4px; font-size: 16px; }
72
+ .cta-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
73
  .cta-box a { color: var(--accent); font-weight: 600; font-size: 18px; word-break: break-all; }
74
  .cta-box a:hover { color: var(--white); }
75
+ .cta-box p { margin: 12px 0 0; color: var(--blue-200); font-size: 14px; }
76
+ .api-info { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; }
77
+ .api-info .badge { display: inline-block; background: var(--accent); color: var(--blue-900); font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; margin-right: 8px; }
78
+ .api-info .badge-secondary { background: var(--blue-500); color: var(--white); }
79
  .provider-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
80
+ .provider-list span { background: var(--blue-800); border: 1px solid var(--blue-600); padding: 6px 12px; border-radius: 4px; font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
81
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
82
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
83
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
84
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
85
+ footer a { color: var(--blue-200); }
86
  footer a:hover { color: var(--accent); }
87
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
88
+
89
+ </style>
90
+
91
  </head>
92
  <body>
93
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
94
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
95
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
96
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
98
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
100
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
102
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
103
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
104
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
105
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
106
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
107
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
108
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
110
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
112
+ </svg>
113
+
114
  <nav>
115
  <div class="container">
116
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Built A Training UI And Then Unsloth Laughed.html CHANGED
@@ -1,64 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Built A Training UI And Then Unsloth Laughed | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
53
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
54
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
55
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
56
- footer a { color: var(--gray-5); }
57
  footer a:hover { color: var(--accent); }
58
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
59
- </style>
 
 
60
  </head>
61
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  <nav>
63
  <div class="container">
64
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Built A Training UI And Then Unsloth Laughed | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
68
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
69
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
70
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
71
+ footer a { color: var(--blue-200); }
72
  footer a:hover { color: var(--accent); }
73
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
74
+
75
+ </style>
76
+
77
  </head>
78
  <body>
79
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
80
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
81
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
82
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
83
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
84
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
91
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
98
+ </svg>
99
+
100
  <nav>
101
  <div class="container">
102
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Captured The Ghosts In The Machine (And Named It Prism).html CHANGED
@@ -1,69 +1,107 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Captured The Ghosts In The Machine (And Named It Prism) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
  .dataset-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; }
53
  .dataset-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
54
- .dataset-table td { padding: 12px; border-bottom: 1px solid var(--gray-2); color: var(--gray-6); }
55
- .dataset-table tr:hover { background: var(--gray-1); }
56
  .dataset-table .highlight { color: var(--accent); font-weight: 600; }
57
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
58
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
59
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
60
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
61
- footer a { color: var(--gray-5); }
62
  footer a:hover { color: var(--accent); }
63
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
64
- </style>
 
 
65
  </head>
66
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  <nav>
68
  <div class="container">
69
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Captured The Ghosts In The Machine (And Named It Prism) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
  .dataset-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; }
68
  .dataset-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
69
+ .dataset-table td { padding: 12px; border-bottom: 1px solid var(--blue-600); color: var(--blue-200); }
70
+ .dataset-table tr:hover { background: var(--blue-800); }
71
  .dataset-table .highlight { color: var(--accent); font-weight: 600; }
72
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
73
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
74
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
75
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
76
+ footer a { color: var(--blue-200); }
77
  footer a:hover { color: var(--accent); }
78
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
79
+
80
+ </style>
81
+
82
  </head>
83
  <body>
84
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
85
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
86
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
87
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
93
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
98
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
99
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
100
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
101
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
102
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
103
+ </svg>
104
+
105
  <nav>
106
  <div class="container">
107
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Deleted Sonnet Because My Dataloader Had Too Many Hands.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Deleted Sonnet Because My Dataloader Had Too Many Hands | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .loss-chart { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; }
53
  .loss-chart .bar { display: flex; align-items: center; margin: 4px 0; }
54
- .loss-chart .label { width: 120px; color: var(--gray-5); }
55
  .loss-chart .value { color: var(--accent); }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Deleted Sonnet Because My Dataloader Had Too Many Hands | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .loss-chart { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; }
68
  .loss-chart .bar { display: flex; align-items: center; margin: 4px 0; }
69
+ .loss-chart .label { width: 120px; color: var(--blue-200); }
70
  .loss-chart .value { color: var(--accent); }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Dreamed Of NaN And Woke Up To NaN.html CHANGED
@@ -1,64 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Dreamed Of NaN And Woke Up To NaN | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
48
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
49
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
50
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
51
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
52
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
53
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
54
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
55
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
56
- footer a { color: var(--gray-5); }
57
  footer a:hover { color: var(--accent); }
58
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
59
- </style>
 
 
60
  </head>
61
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  <nav>
63
  <div class="container">
64
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Dreamed Of NaN And Woke Up To NaN | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
63
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
64
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
65
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
66
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
67
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
68
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
69
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
70
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
71
+ footer a { color: var(--blue-200); }
72
  footer a:hover { color: var(--accent); }
73
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
74
+
75
+ </style>
76
+
77
  </head>
78
  <body>
79
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
80
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
81
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
82
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
83
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
84
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
91
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
98
+ </svg>
99
+
100
  <nav>
101
  <div class="container">
102
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Finally Switched Terminals (And My Ego Is Healing).html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Flashed The Matrix VBIOS And Now I Train Models All Day.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Flashed The Matrix VBIOS And Now I Train Models All Day | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .stats-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 14px; }
47
  .stats-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
48
- .stats-table td { padding: 12px; border-bottom: 1px solid var(--gray-2); color: var(--gray-6); }
49
- .stats-table tr:hover { background: var(--gray-1); }
50
  .stats-table .highlight { color: var(--accent); font-weight: 600; }
51
- .warning-box { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; }
52
  .warning-box h3 { color: var(--accent); font-size: 14px; margin-bottom: 12px; }
53
- .warning-box p { font-size: 14px; color: var(--gray-6); }
54
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
55
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Flashed The Matrix VBIOS And Now I Train Models All Day | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .stats-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 14px; }
62
  .stats-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
63
+ .stats-table td { padding: 12px; border-bottom: 1px solid var(--blue-600); color: var(--blue-200); }
64
+ .stats-table tr:hover { background: var(--blue-800); }
65
  .stats-table .highlight { color: var(--accent); font-weight: 600; }
66
+ .warning-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; }
67
  .warning-box h3 { color: var(--accent); font-size: 14px; margin-bottom: 12px; }
68
+ .warning-box p { font-size: 14px; color: var(--blue-200); }
69
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
70
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Locked My GPU Clocks And Now It Runs Forever.html CHANGED
@@ -1,69 +1,107 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Locked My GPU Clocks And Now It Runs Forever | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .clock-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 14px; }
47
  .clock-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
48
- .clock-table td { padding: 12px; border-bottom: 1px solid var(--gray-2); color: var(--gray-6); }
49
- .clock-table tr:hover { background: var(--gray-1); }
50
  .clock-table .highlight { color: var(--accent); font-weight: 600; }
51
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
52
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
53
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; margin: 24px 0; }
54
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
55
  .stat-card .number { font-size: 24px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
56
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
57
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
58
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
59
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
60
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
61
- footer a { color: var(--gray-5); }
62
  footer a:hover { color: var(--accent); }
63
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr 1fr; } }
64
- </style>
 
 
65
  </head>
66
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  <nav>
68
  <div class="container">
69
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Locked My GPU Clocks And Now It Runs Forever | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .clock-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--font-mono); font-size: 14px; }
62
  .clock-table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--accent); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
63
+ .clock-table td { padding: 12px; border-bottom: 1px solid var(--blue-600); color: var(--blue-200); }
64
+ .clock-table tr:hover { background: var(--blue-800); }
65
  .clock-table .highlight { color: var(--accent); font-weight: 600; }
66
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
67
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
68
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px; margin: 24px 0; }
69
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
70
  .stat-card .number { font-size: 24px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
71
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
72
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
73
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
74
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
75
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
76
+ footer a { color: var(--blue-200); }
77
  footer a:hover { color: var(--accent); }
78
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr 1fr; } }
79
+
80
+ </style>
81
+
82
  </head>
83
  <body>
84
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
85
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
86
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
87
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
93
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
98
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
99
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
100
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
101
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
102
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
103
+ </svg>
104
+
105
  <nav>
106
  <div class="container">
107
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Made A Dataset So Dense It Broke My Hard Drive.html CHANGED
@@ -1,64 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Made A Dataset So Dense It Broke My Hard Drive | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
53
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
54
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
55
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
56
- footer a { color: var(--gray-5); }
57
  footer a:hover { color: var(--accent); }
58
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
59
- </style>
 
 
60
  </head>
61
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  <nav>
63
  <div class="container">
64
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Made A Dataset So Dense It Broke My Hard Drive | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 28px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
68
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
69
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
70
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
71
+ footer a { color: var(--blue-200); }
72
  footer a:hover { color: var(--accent); }
73
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
74
+
75
+ </style>
76
+
77
  </head>
78
  <body>
79
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
80
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
81
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
82
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
83
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
84
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
91
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
98
+ </svg>
99
+
100
  <nav>
101
  <div class="container">
102
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Released A Model And Nobody Clapped (Fair) .html CHANGED
@@ -1,62 +1,100 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Released A Model And Nobody Clapped (Fair) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
  .code-block .prompt { color: var(--accent); }
48
- .code-block .response { color: var(--gray-6); }
49
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
50
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
51
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
52
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
53
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
54
- footer a { color: var(--gray-5); }
55
  footer a:hover { color: var(--accent); }
56
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
57
- </style>
 
 
58
  </head>
59
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  <nav>
61
  <div class="container">
62
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Released A Model And Nobody Clapped (Fair) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
  .code-block .prompt { color: var(--accent); }
63
+ .code-block .response { color: var(--blue-200); }
64
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
65
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
66
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
67
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
68
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
69
+ footer a { color: var(--blue-200); }
70
  footer a:hover { color: var(--accent); }
71
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
72
+
73
+ </style>
74
+
75
  </head>
76
  <body>
77
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
78
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
79
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
80
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
81
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
86
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
89
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
96
+ </svg>
97
+
98
  <nav>
99
  <div class="container">
100
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Released TMLM-Haiku-1.3 And It Is Still Dumb.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Released TMLM-Haiku-1.3 And It Is Still Dumb | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .cta-box { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
53
  .cta-box a { color: var(--accent); font-weight: 600; font-size: 18px; word-break: break-all; }
54
  .cta-box a:hover { color: var(--white); }
55
- .cta-box p { margin: 12px 0 0; color: var(--gray-5); font-size: 14px; }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Released TMLM-Haiku-1.3 And It Is Still Dumb | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .cta-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 12px; padding: 24px; margin: 32px 0; text-align: center; }
68
  .cta-box a { color: var(--accent); font-weight: 600; font-size: 18px; word-break: break-all; }
69
  .cta-box a:hover { color: var(--white); }
70
+ .cta-box p { margin: 12px 0 0; color: var(--blue-200); font-size: 14px; }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Spent $40 And Got A Greeting .html CHANGED
@@ -1,66 +1,104 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Spent $40 And Got A Greeting | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .item { color: var(--gray-6); }
48
  .code-block .highlight { color: var(--accent); }
49
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
50
  .price-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
51
- .price-table th { text-align: left; padding: 12px; border-bottom: 1px solid var(--gray-3); color: var(--white); font-size: 14px; }
52
- .price-table td { padding: 12px; border-bottom: 1px solid var(--gray-2); color: var(--gray-6); font-size: 14px; }
53
- .price-table tr:hover { background: var(--gray-1); }
54
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
55
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
56
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
57
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
58
- footer a { color: var(--gray-5); }
59
  footer a:hover { color: var(--accent); }
60
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
61
- </style>
 
 
62
  </head>
63
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  <nav>
65
  <div class="container">
66
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Spent $40 And Got A Greeting | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .item { color: var(--blue-200); }
63
  .code-block .highlight { color: var(--accent); }
64
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
65
  .price-table { width: 100%; border-collapse: collapse; margin: 24px 0; }
66
+ .price-table th { text-align: left; padding: 12px; border-bottom: 1px solid var(--blue-500); color: var(--white); font-size: 14px; }
67
+ .price-table td { padding: 12px; border-bottom: 1px solid var(--blue-600); color: var(--blue-200); font-size: 14px; }
68
+ .price-table tr:hover { background: var(--blue-800); }
69
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
70
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
71
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
72
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
73
+ footer a { color: var(--blue-200); }
74
  footer a:hover { color: var(--accent); }
75
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
76
+
77
+ </style>
78
+
79
  </head>
80
  <body>
81
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
82
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
83
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
84
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
85
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
86
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
93
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
100
+ </svg>
101
+
102
  <nav>
103
  <div class="container">
104
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Tried Opus 4.6 And Now Everything Else Feels Broken.html CHANGED
@@ -1,66 +1,104 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Tried Opus 4.6 And Now Everything Else Feels Broken | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .comparison-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; }
48
- .comparison-card h3 { font-size: 14px; color: var(--gray-5); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
49
  .comparison-card.good { border-color: var(--accent); }
50
  .comparison-card.bad { border-color: var(--gray-4); }
51
- .comparison-card p { font-size: 14px; color: var(--gray-6); }
52
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
53
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
54
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
55
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
56
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
57
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
58
- footer a { color: var(--gray-5); }
59
  footer a:hover { color: var(--accent); }
60
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .comparison-grid { grid-template-columns: 1fr; } }
61
- </style>
 
 
62
  </head>
63
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  <nav>
65
  <div class="container">
66
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Tried Opus 4.6 And Now Everything Else Feels Broken | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .comparison-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; }
63
+ .comparison-card h3 { font-size: 14px; color: var(--blue-200); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
64
  .comparison-card.good { border-color: var(--accent); }
65
  .comparison-card.bad { border-color: var(--gray-4); }
66
+ .comparison-card p { font-size: 14px; color: var(--blue-200); }
67
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
68
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
69
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
70
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
71
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
72
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
73
+ footer a { color: var(--blue-200); }
74
  footer a:hover { color: var(--accent); }
75
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .comparison-grid { grid-template-columns: 1fr; } }
76
+
77
+ </style>
78
+
79
  </head>
80
  <body>
81
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
82
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
83
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
84
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
85
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
86
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
88
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
93
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
94
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
95
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
100
+ </svg>
101
+
102
  <nav>
103
  <div class="container">
104
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Watched Anthropic Find Anxiety Neurons And Now I Want To Delete Them.html CHANGED
@@ -1,67 +1,105 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Watched Anthropic Find Anxiety Neurons And Now I Want To Delete Them | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .video-box { background: var(--gray-1); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; text-align: center; }
47
  .video-box a { color: var(--accent); font-weight: 600; font-size: 16px; word-break: break-all; }
48
- .video-box p { margin: 12px 0 0; color: var(--gray-5); font-size: 14px; }
49
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
50
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
51
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
52
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
53
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
54
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
55
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
56
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
57
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
58
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
59
- footer a { color: var(--gray-5); }
60
  footer a:hover { color: var(--accent); }
61
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
62
- </style>
 
 
63
  </head>
64
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
65
  <nav>
66
  <div class="container">
67
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Watched Anthropic Find Anxiety Neurons And Now I Want To Delete Them | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .video-box { background: var(--blue-800); border: 2px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; text-align: center; }
62
  .video-box a { color: var(--accent); font-weight: 600; font-size: 16px; word-break: break-all; }
63
+ .video-box p { margin: 12px 0 0; color: var(--blue-200); font-size: 14px; }
64
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
65
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
66
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
67
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
68
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
69
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
70
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
71
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
72
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
73
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
74
+ footer a { color: var(--blue-200); }
75
  footer a:hover { color: var(--accent); }
76
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
77
+
78
+ </style>
79
+
80
  </head>
81
  <body>
82
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
83
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
84
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
85
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
87
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
89
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
91
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
96
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
99
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
100
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
101
+ </svg>
102
+
103
  <nav>
104
  <div class="container">
105
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Watched Project Hail Mary And Forgot About My NaN Loss.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Watched Project Hail Mary And Forgot About My NaN Loss | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .movie-info { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; }
47
- .movie-info .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--gray-2); font-size: 14px; }
48
  .movie-info .row:last-child { border-bottom: none; }
49
- .movie-info .label { color: var(--gray-5); }
50
  .movie-info .value { color: var(--white); }
51
- .rating-box { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; }
52
  .rating-box .score { font-size: 48px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); text-align: center; }
53
- .rating-box .label { font-size: 13px; color: var(--gray-5); text-align: center; margin-top: 8px; }
54
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
55
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Watched Project Hail Mary And Forgot About My NaN Loss | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .movie-info { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; }
62
+ .movie-info .row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--blue-600); font-size: 14px; }
63
  .movie-info .row:last-child { border-bottom: none; }
64
+ .movie-info .label { color: var(--blue-200); }
65
  .movie-info .value { color: var(--white); }
66
+ .rating-box { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; }
67
  .rating-box .score { font-size: 48px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); text-align: center; }
68
+ .rating-box .label { font-size: 13px; color: var(--blue-200); text-align: center; margin-top: 8px; }
69
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
70
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I Woke Up To NaN And Now I Am Dead Inside.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Woke Up To NaN And Now I Am Dead Inside | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
48
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
49
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
50
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
51
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
52
- .log-block { background: var(--black); border: 1px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
53
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
54
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
55
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
56
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
57
- footer a { color: var(--gray-5); }
58
  footer a:hover { color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Woke Up To NaN And Now I Am Dead Inside | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
63
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
64
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
65
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
66
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
67
+ .log-block { background: var(--blue-900); border: 1px solid var(--accent); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
68
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
69
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
70
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
71
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
72
+ footer a { color: var(--blue-200); }
73
  footer a:hover { color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I%20Finally%20Switched%20Terminals%20%28And%20My%20Ego%20Is%20Healing%29.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I%20Finally%20Switched%20Terminals%20(And%20My%20Ego%20Is%20Healing).html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
I%2520Finally%2520Switched%2520Terminals%2520%28And%2520My%2520Ego%2520Is%2520Healing%29.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>I Finally Switched Terminals (And My Ego Is Healing) | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
OpenAI Did A Good Thing And Everyone Is Mad About It .html CHANGED
@@ -1,70 +1,108 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>OpenAI Did A Good Thing And Everyone Is Mad About It | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
  .post-body blockquote a { color: var(--accent); text-decoration: underline; }
46
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
47
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
48
- .code-block .item { color: var(--gray-6); }
49
  .code-block .highlight { color: var(--accent); }
50
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
51
- .case-box { background: var(--gray-1); border: 1px solid var(--gray-3); border-radius: 8px; padding: 20px; margin: 24px 0; }
52
  .case-box h3 { color: var(--white); font-size: 16px; margin-bottom: 12px; }
53
- .case-box p { font-size: 14px; color: var(--gray-6); margin-bottom: 8px; }
54
  .case-box a { color: var(--accent); font-size: 13px; }
55
- .confession-box { background: var(--gray-1); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; border-radius: 0 8px 8px 0; }
56
- .confession-box p { font-size: 15px; color: var(--gray-6); margin-bottom: 12px; }
57
  .confession-box p:last-child { margin-bottom: 0; }
58
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
59
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
60
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
61
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
62
- footer a { color: var(--gray-5); }
63
  footer a:hover { color: var(--accent); }
64
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
65
- </style>
 
 
66
  </head>
67
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  <nav>
69
  <div class="container">
70
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>OpenAI Did A Good Thing And Everyone Is Mad About It | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
  .post-body blockquote a { color: var(--accent); text-decoration: underline; }
61
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
62
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
63
+ .code-block .item { color: var(--blue-200); }
64
  .code-block .highlight { color: var(--accent); }
65
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
66
+ .case-box { background: var(--blue-800); border: 1px solid var(--blue-500); border-radius: 8px; padding: 20px; margin: 24px 0; }
67
  .case-box h3 { color: var(--white); font-size: 16px; margin-bottom: 12px; }
68
+ .case-box p { font-size: 14px; color: var(--blue-200); margin-bottom: 8px; }
69
  .case-box a { color: var(--accent); font-size: 13px; }
70
+ .confession-box { background: var(--blue-800); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; border-radius: 0 8px 8px 0; }
71
+ .confession-box p { font-size: 15px; color: var(--blue-200); margin-bottom: 12px; }
72
  .confession-box p:last-child { margin-bottom: 0; }
73
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
74
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
75
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
76
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
77
+ footer a { color: var(--blue-200); }
78
  footer a:hover { color: var(--accent); }
79
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
80
+
81
+ </style>
82
+
83
  </head>
84
  <body>
85
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
86
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
87
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
88
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
89
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
90
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
92
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
94
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
96
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
99
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
102
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
103
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
104
+ </svg>
105
+
106
  <nav>
107
  <div class="container">
108
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
TMLM-Haiku-2 Is Coming And It Might Speak English.html CHANGED
@@ -1,64 +1,102 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>TMLM-Haiku-2 Is Coming And It Might Speak English | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
47
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
48
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
49
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
50
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
51
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
52
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
53
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
54
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
55
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
56
- footer a { color: var(--gray-5); }
57
  footer a:hover { color: var(--accent); }
58
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
59
- </style>
 
 
60
  </head>
61
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62
  <nav>
63
  <div class="container">
64
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>TMLM-Haiku-2 Is Coming And It Might Speak English | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
62
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
63
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
64
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
65
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
66
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
67
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
68
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
69
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
70
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
71
+ footer a { color: var(--blue-200); }
72
  footer a:hover { color: var(--accent); }
73
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
74
+
75
+ </style>
76
+
77
  </head>
78
  <body>
79
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
80
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
81
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
82
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
83
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
84
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
85
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
86
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
87
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
91
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
92
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
93
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
94
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
95
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
96
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
97
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
98
+ </svg>
99
+
100
  <nav>
101
  <div class="container">
102
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Teaching AI to Regret: The Backspace Token Theory.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com ">
8
- <link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist :wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Teaching%20AI%20to%20Regret%3A%20The%20Backspace%20Token%20Theory.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com ">
8
- <link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist :wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Teaching%20AI%20to%20Regret:%20The%20Backspace%20Token%20Theory.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com ">
8
- <link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist :wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Teaching%2520AI%2520to%2520Regret%3A%2520The%2520Backspace%2520Token%2520Theory.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
- <link rel="preconnect" href="https://fonts.googleapis.com ">
8
- <link rel="preconnect" href="https://fonts.gstatic.com " crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist :wght@400;500:600:700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Teaching AI to Regret: The Backspace Token Theory | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The Chinchilla Effect: Why Tiny Models Have to Be Picky.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The Training Time Compute Trap.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The%20Chinchilla%20Effect%3A%20Why%20Tiny%20Models%20Have%20to%20Be%20Picky.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The%20Chinchilla%20Effect:%20Why%20Tiny%20Models%20Have%20to%20Be%20Picky.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The%20Training%20Time%20Compute%20Trap.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The%2520Chinchilla%2520Effect%3A%2520Why%2520Tiny%2520Models%2520Have%2520to%2520Be%2520Picky.html CHANGED
@@ -1,58 +1,96 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
53
- </style>
 
 
54
  </head>
55
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  <nav>
57
  <div class="container">
58
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Chinchilla Effect: Why Tiny Models Have to Be Picky | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
68
+
69
+ </style>
70
+
71
  </head>
72
  <body>
73
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
74
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
75
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
76
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
78
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
79
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
80
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
81
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
82
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
88
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
90
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
92
+ </svg>
93
+
94
  <nav>
95
  <div class="container">
96
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
The%2520Training%2520Time%2520Compute%2520Trap.html CHANGED
@@ -1,65 +1,103 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
- <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500:600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
47
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
48
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
49
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
50
- footer a { color: var(--gray-5); }
51
  footer a:hover { color: var(--accent); }
52
- .link-list { margin: 32px 0; padding: 20px; background: var(--gray-1); border-radius: 8px; }
53
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
54
  .link-list ul { list-style: none; padding: 0; }
55
  .link-list li { margin-bottom: 12px; }
56
- .link-list a { font-size: 14px; color: var(--gray-6); display: flex; align-items: center; gap: 8px; }
57
  .link-list a:hover { color: var(--accent); }
58
  .link-list a::before { content: '→'; color: var(--accent); }
59
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
60
- </style>
 
 
61
  </head>
62
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <nav>
64
  <div class="container">
65
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>The Training Time Compute Trap | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
62
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
63
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
64
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
65
+ footer a { color: var(--blue-200); }
66
  footer a:hover { color: var(--accent); }
67
+ .link-list { margin: 32px 0; padding: 20px; background: var(--blue-800); border-radius: 8px; }
68
  .link-list h3 { font-size: 16px; font-weight: 600; color: var(--white); margin-bottom: 16px; }
69
  .link-list ul { list-style: none; padding: 0; }
70
  .link-list li { margin-bottom: 12px; }
71
+ .link-list a { font-size: 14px; color: var(--blue-200); display: flex; align-items: center; gap: 8px; }
72
  .link-list a:hover { color: var(--accent); }
73
  .link-list a::before { content: '→'; color: var(--accent); }
74
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } }
75
+
76
+ </style>
77
+
78
  </head>
79
  <body>
80
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
81
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
82
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
83
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
85
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
89
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
90
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
91
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
92
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
97
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
98
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
99
+ </svg>
100
+
101
  <nav>
102
  <div class="container">
103
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
Two Days For Ten Percent And Opus Is Laughing At Me.html CHANGED
@@ -1,68 +1,106 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Two Days For Ten Percent And Opus Is Laughing At Me | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
 
11
  :root {
12
- --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626;
13
- --gray-3: #363636; --gray-4: #525252; --gray-5: #737373; --gray-6: #a3a3a6;
14
- --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00;
 
 
 
 
 
 
 
 
 
 
 
 
 
15
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
16
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
17
- --container-max: 700px;
18
  }
19
  * { box-sizing: border-box; margin: 0; padding: 0; }
20
  html { font-size: 16px; scroll-behavior: smooth; }
21
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
22
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
23
  a:hover { color: var(--accent); }
24
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
25
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
26
  nav .container { display: flex; justify-content: space-between; align-items: center; }
27
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
28
  .nav-brand span { color: var(--accent); }
29
  .nav-links { display: flex; gap: 32px; }
30
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
31
  .nav-links a:hover { color: var(--white); }
32
  .post { padding: 140px 0 80px; }
33
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
34
  .post-back:hover { color: var(--accent); }
35
  .post-back::before { content: '← '; }
36
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
37
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
38
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
39
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
40
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
41
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
42
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
43
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
44
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
45
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
46
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
47
- .stat-card { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; text-align: center; }
48
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
49
- .stat-card .label { font-size: 13px; color: var(--gray-5); margin-top: 8px; }
50
- .progress-bar { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; }
51
- .progress-bar .bar { height: 20px; background: var(--gray-2); border-radius: 4px; overflow: hidden; margin: 12px 0; }
52
  .progress-bar .fill { height: 100%; background: var(--accent); width: 10%; transition: width 0.3s ease; }
53
- .progress-bar .text { font-family: var(--font-mono); font-size: 13px; color: var(--gray-5); display: flex; justify-content: space-between; }
54
- .code-block { background: var(--gray-1); border: 1px solid var(--gray-2); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
55
- .code-block .comment { color: var(--gray-5); font-style: italic; display: block; margin-top: 4px; }
56
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
57
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
58
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
59
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
60
- footer a { color: var(--gray-5); }
61
  footer a:hover { color: var(--accent); }
62
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
63
- </style>
 
 
64
  </head>
65
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  <nav>
67
  <div class="container">
68
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Two Days For Ten Percent And Opus Is Laughing At Me | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
  :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
  --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
  }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
  html { font-size: 16px; scroll-behavior: smooth; }
36
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
37
  a { color: var(--white); text-decoration: none; transition: color 0.15s ease; }
38
  a:hover { color: var(--accent); }
39
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
40
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
41
  nav .container { display: flex; justify-content: space-between; align-items: center; }
42
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
43
  .nav-brand span { color: var(--accent); }
44
  .nav-links { display: flex; gap: 32px; }
45
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
46
  .nav-links a:hover { color: var(--white); }
47
  .post { padding: 140px 0 80px; }
48
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
49
  .post-back:hover { color: var(--accent); }
50
  .post-back::before { content: '← '; }
51
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
52
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
53
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
54
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; letter-spacing: -0.02em; }
55
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
56
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
57
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
58
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
59
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
60
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
61
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
62
+ .stat-card { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; text-align: center; }
63
  .stat-card .number { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
64
+ .stat-card .label { font-size: 13px; color: var(--blue-200); margin-top: 8px; }
65
+ .progress-bar { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; }
66
+ .progress-bar .bar { height: 20px; background: var(--blue-600); border-radius: 4px; overflow: hidden; margin: 12px 0; }
67
  .progress-bar .fill { height: 100%; background: var(--accent); width: 10%; transition: width 0.3s ease; }
68
+ .progress-bar .text { font-family: var(--font-mono); font-size: 13px; color: var(--blue-200); display: flex; justify-content: space-between; }
69
+ .code-block { background: var(--blue-800); border: 1px solid var(--blue-600); border-radius: 8px; padding: 20px; margin: 24px 0; font-family: var(--font-mono); font-size: 13px; overflow-x: auto; }
70
+ .code-block .comment { color: var(--blue-200); font-style: italic; display: block; margin-top: 4px; }
71
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
72
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
73
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
74
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
75
+ footer a { color: var(--blue-200); }
76
  footer a:hover { color: var(--accent); }
77
  @media (max-width: 768px) { .post h1 { font-size: 28px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; } }
78
+
79
+ </style>
80
+
81
  </head>
82
  <body>
83
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
84
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
85
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
86
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
87
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
88
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
89
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
90
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
91
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
92
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
93
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
94
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
95
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
96
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
97
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
98
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
99
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
100
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
101
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
102
+ </svg>
103
+
104
  <nav>
105
  <div class="container">
106
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
blog-Anthropic%2527s-Distillation-Drama-A-Masterclass-in-Projection.html CHANGED
@@ -4,9 +4,33 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
 
 
8
  <style>
9
- :root{--color-bg:#faf8f5;--color-bg-alt:#f5f0e8;--color-bg-dark:#1a1815;--color-bg-dark-alt:#252220;--color-accent:#e85d3b;--color-accent-light:#ff8a6b;--color-accent-dark:#c44a2d;--color-secondary:#d4a853;--color-text:#2d2a26;--color-text-light:#6b6560;--color-text-muted:#9a948d;--color-border:#e5e0d8;--shadow-md:0 4px 20px rgba(45,42,38,0.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--container-max:1200px;--section-padding:100px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
11
  html{scroll-behavior:smooth;font-size:16px}
12
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@@ -48,10 +72,53 @@ pre code{background:none;padding:0;color:inherit}
48
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
49
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
50
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
51
- @media(max-width:768px){:root{--section-padding:60px}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
 
53
  </head>
54
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <nav class="main-nav">
56
  <div class="container">
57
  <a href="index.html" class="nav-brand">FMN-GPT</a>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
  <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
35
  html{scroll-behavior:smooth;font-size:16px}
36
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
 
72
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
73
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
74
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
75
+ @media(max-width:768px){:root {
76
+ --blue-900: #0a1628;
77
+ --blue-800: #0f2240;
78
+ --blue-700: #142d54;
79
+ --blue-600: #1a3a6b;
80
+ --blue-500: #2250a0;
81
+ --blue-400: #3a7bd5;
82
+ --blue-300: #6ba3f0;
83
+ --blue-200: #a8c8f5;
84
+ --blue-100: #d4e4fa;
85
+ --white: #ffffff;
86
+ --white-soft: #f0f4fa;
87
+ --white-muted: #c8d8ec;
88
+ --grid-line: rgba(255, 255, 255, 0.08);
89
+ --grid-line-major: rgba(255, 255, 255, 0.18);
90
+ --accent: #6ba3f0;
91
+ --accent-muted: #3a7bd5;
92
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
93
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
94
+ --container-max: 1100px;
95
+ }}
96
+
97
  </style>
98
+
99
  </head>
100
  <body>
101
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
102
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
103
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
104
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
105
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
106
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
107
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
108
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
110
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
112
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
113
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
114
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
115
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
116
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
117
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
118
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
119
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
120
+ </svg>
121
+
122
  <nav class="main-nav">
123
  <div class="container">
124
  <a href="index.html" class="nav-brand">FMN-GPT</a>
blog-Anthropic%27s-Distillation-Drama-A-Masterclass-in-Projection.html CHANGED
@@ -4,9 +4,33 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
 
 
8
  <style>
9
- :root{--color-bg:#faf8f5;--color-bg-alt:#f5f0e8;--color-bg-dark:#1a1815;--color-bg-dark-alt:#252220;--color-accent:#e85d3b;--color-accent-light:#ff8a6b;--color-accent-dark:#c44a2d;--color-secondary:#d4a853;--color-text:#2d2a26;--color-text-light:#6b6560;--color-text-muted:#9a948d;--color-border:#e5e0d8;--shadow-md:0 4px 20px rgba(45,42,38,0.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--container-max:1200px;--section-padding:100px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
11
  html{scroll-behavior:smooth;font-size:16px}
12
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@@ -48,10 +72,53 @@ pre code{background:none;padding:0;color:inherit}
48
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
49
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
50
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
51
- @media(max-width:768px){:root{--section-padding:60px}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
 
53
  </head>
54
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <nav class="main-nav">
56
  <div class="container">
57
  <a href="index.html" class="nav-brand">FMN-GPT</a>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
  <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
35
  html{scroll-behavior:smooth;font-size:16px}
36
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
 
72
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
73
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
74
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
75
+ @media(max-width:768px){:root {
76
+ --blue-900: #0a1628;
77
+ --blue-800: #0f2240;
78
+ --blue-700: #142d54;
79
+ --blue-600: #1a3a6b;
80
+ --blue-500: #2250a0;
81
+ --blue-400: #3a7bd5;
82
+ --blue-300: #6ba3f0;
83
+ --blue-200: #a8c8f5;
84
+ --blue-100: #d4e4fa;
85
+ --white: #ffffff;
86
+ --white-soft: #f0f4fa;
87
+ --white-muted: #c8d8ec;
88
+ --grid-line: rgba(255, 255, 255, 0.08);
89
+ --grid-line-major: rgba(255, 255, 255, 0.18);
90
+ --accent: #6ba3f0;
91
+ --accent-muted: #3a7bd5;
92
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
93
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
94
+ --container-max: 1100px;
95
+ }}
96
+
97
  </style>
98
+
99
  </head>
100
  <body>
101
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
102
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
103
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
104
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
105
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
106
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
107
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
108
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
110
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
112
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
113
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
114
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
115
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
116
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
117
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
118
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
119
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
120
+ </svg>
121
+
122
  <nav class="main-nav">
123
  <div class="container">
124
  <a href="index.html" class="nav-brand">FMN-GPT</a>
blog-Anthropic's-Distillation-Drama-A-Masterclass-in-Projection.html CHANGED
@@ -4,9 +4,33 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
 
 
8
  <style>
9
- :root{--color-bg:#faf8f5;--color-bg-alt:#f5f0e8;--color-bg-dark:#1a1815;--color-bg-dark-alt:#252220;--color-accent:#e85d3b;--color-accent-light:#ff8a6b;--color-accent-dark:#c44a2d;--color-secondary:#d4a853;--color-text:#2d2a26;--color-text-light:#6b6560;--color-text-muted:#9a948d;--color-border:#e5e0d8;--shadow-md:0 4px 20px rgba(45,42,38,0.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--container-max:1200px;--section-padding:100px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
11
  html{scroll-behavior:smooth;font-size:16px}
12
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@@ -48,10 +72,53 @@ pre code{background:none;padding:0;color:inherit}
48
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
49
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
50
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
51
- @media(max-width:768px){:root{--section-padding:60px}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
 
53
  </head>
54
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <nav class="main-nav">
56
  <div class="container">
57
  <a href="index.html" class="nav-brand">FMN-GPT</a>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Anthropic's Distillation Drama: A Masterclass in Projection | FMN-GPT - CompactAI</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
  <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
35
  html{scroll-behavior:smooth;font-size:16px}
36
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
 
72
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
73
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
74
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
75
+ @media(max-width:768px){:root {
76
+ --blue-900: #0a1628;
77
+ --blue-800: #0f2240;
78
+ --blue-700: #142d54;
79
+ --blue-600: #1a3a6b;
80
+ --blue-500: #2250a0;
81
+ --blue-400: #3a7bd5;
82
+ --blue-300: #6ba3f0;
83
+ --blue-200: #a8c8f5;
84
+ --blue-100: #d4e4fa;
85
+ --white: #ffffff;
86
+ --white-soft: #f0f4fa;
87
+ --white-muted: #c8d8ec;
88
+ --grid-line: rgba(255, 255, 255, 0.08);
89
+ --grid-line-major: rgba(255, 255, 255, 0.18);
90
+ --accent: #6ba3f0;
91
+ --accent-muted: #3a7bd5;
92
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
93
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
94
+ --container-max: 1100px;
95
+ }}
96
+
97
  </style>
98
+
99
  </head>
100
  <body>
101
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
102
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
103
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
104
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
105
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
106
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
107
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
108
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
110
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
112
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
113
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
114
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
115
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
116
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
117
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
118
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
119
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
120
+ </svg>
121
+
122
  <nav class="main-nav">
123
  <div class="container">
124
  <a href="index.html" class="nav-brand">FMN-GPT</a>
blog-External-Memory-Modules-Because-My-Model-Has-Commitment-Issues.html CHANGED
@@ -1,48 +1,93 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>External Memory Modules | TinyMemoryLM</title>
 
7
  <link rel="preconnect" href="https://fonts.googleapis.com">
8
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
10
- <style>
11
- :root { --black: #000000; --black-soft: #0a0a0a; --gray-1: #171717; --gray-2: #262626; --gray-3: #363636; --gray-5: #737373; --gray-6: #a3a3a6; --gray-7: #d4d4d4; --white: #ffffff; --accent: #ff4d00; --font-sans: 'Geist', -apple-system, sans-serif; --font-mono: 'Geist Mono', monospace; --container-max: 700px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  * { box-sizing: border-box; margin: 0; padding: 0; }
13
- body { font-family: var(--font-sans); background: var(--black); color: var(--gray-7); line-height: 1.7; -webkit-font-smoothing: antialiased; }
14
  a { color: var(--white); text-decoration: none; }
15
  a:hover { color: var(--accent); }
16
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
17
- nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); border-bottom: 1px solid var(--gray-2); padding: 16px 0; }
18
  nav .container { display: flex; justify-content: space-between; align-items: center; }
19
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
20
  .nav-brand span { color: var(--accent); }
21
  .nav-links { display: flex; gap: 32px; }
22
- .nav-links a { font-size: 14px; font-weight: 500; color: var(--gray-6); }
23
  .post { padding: 140px 0 80px; }
24
- .post-back { display: inline-block; color: var(--gray-5); font-size: 14px; margin-bottom: 32px; }
25
  .post-back:hover { color: var(--accent); }
26
  .post-back::before { content: '← '; }
27
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
28
- .post-date { font-size: 13px; color: var(--gray-5); font-family: var(--font-mono); }
29
- .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--accent); background: rgba(255, 77, 0, 0.1); padding: 4px 10px; border-radius: 4px; }
30
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; }
31
- .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--gray-6); }
32
- .post-body p:first-of-type { font-size: 20px; color: var(--gray-7); }
33
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
34
- .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--gray-1); border-radius: 0 8px 8px 0; }
35
- .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--gray-6); margin: 0; }
36
- .post-body hr { border: none; height: 1px; background: var(--gray-2); margin: 48px 0; }
37
- .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gray-2); }
38
- .post-footer p { font-size: 14px; color: var(--gray-5); font-style: italic; margin: 0; }
39
- footer { padding: 40px 0; background: var(--black-soft); border-top: 1px solid var(--gray-2); text-align: center; }
40
- footer p { color: var(--gray-5); font-size: 14px; margin-bottom: 8px; }
41
- footer a { color: var(--gray-5); }
42
  @media (max-width: 768px) { .post h1 { font-size: 28px; } }
43
- </style>
 
 
44
  </head>
45
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  <nav>
47
  <div class="container">
48
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>External Memory Modules | TinyMemoryLM</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
  <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
+ <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  * { box-sizing: border-box; margin: 0; padding: 0; }
35
+ body { font-family: var(--font-sans); background: var(--blue-900); color: var(--white-muted); line-height: 1.7; -webkit-font-smoothing: antialiased; }
36
  a { color: var(--white); text-decoration: none; }
37
  a:hover { color: var(--accent); }
38
  .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
39
+ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(10, 22, 40, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--blue-600); padding: 16px 0; }
40
  nav .container { display: flex; justify-content: space-between; align-items: center; }
41
  .nav-brand { font-size: 18px; font-weight: 600; color: var(--white); display: flex; align-items: center; gap: 8px; }
42
  .nav-brand span { color: var(--accent); }
43
  .nav-links { display: flex; gap: 32px; }
44
+ .nav-links a { font-size: 14px; font-weight: 500; color: var(--blue-200); }
45
  .post { padding: 140px 0 80px; }
46
+ .post-back { display: inline-block; color: var(--blue-200); font-size: 14px; margin-bottom: 32px; }
47
  .post-back:hover { color: var(--accent); }
48
  .post-back::before { content: '← '; }
49
  .post-meta { display: flex; gap: 12px; margin-bottom: 20px; }
50
+ .post-date { font-size: 13px; color: var(--blue-200); font-family: var(--font-mono); }
51
+ .post-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--accent); background: rgba(107, 163, 240, 0.1); padding: 4px 10px; border-radius: 4px; }
52
  .post h1 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 32px; line-height: 1.2; }
53
+ .post-body p { font-size: 17px; line-height: 1.8; margin-bottom: 24px; color: var(--blue-200); }
54
+ .post-body p:first-of-type { font-size: 20px; color: var(--white-muted); }
55
  .post-body h2 { font-size: 24px; font-weight: 600; color: var(--white); margin: 48px 0 20px; }
56
+ .post-body blockquote { border-left: 3px solid var(--accent); padding: 20px 24px; margin: 32px 0; background: var(--blue-800); border-radius: 0 8px 8px 0; }
57
+ .post-body blockquote p { font-size: 16px; font-style: italic; color: var(--blue-200); margin: 0; }
58
+ .post-body hr { border: none; height: 1px; background: var(--blue-600); margin: 48px 0; }
59
+ .post-footer { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--blue-600); }
60
+ .post-footer p { font-size: 14px; color: var(--blue-200); font-style: italic; margin: 0; }
61
+ footer { padding: 40px 0; background: var(--blue-800); border-top: 1px solid var(--blue-600); text-align: center; }
62
+ footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
63
+ footer a { color: var(--blue-200); }
64
  @media (max-width: 768px) { .post h1 { font-size: 28px; } }
65
+
66
+ </style>
67
+
68
  </head>
69
  <body>
70
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
71
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
72
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
73
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
74
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
75
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
76
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
77
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
78
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
79
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
80
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
81
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
82
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
83
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
84
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
85
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
86
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
87
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
88
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
89
+ </svg>
90
+
91
  <nav>
92
  <div class="container">
93
  <a href="index.html" class="nav-brand"><span>/</span>TinyMemoryLM</a>
blog-My Baby-Model-Takes-Forever-to-Grow-Up.html CHANGED
@@ -4,9 +4,33 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>My Baby Model Takes Forever to Grow Up | FMN-GPT - CompactAI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
 
 
8
  <style>
9
- :root{--color-bg:#faf8f5;--color-bg-alt:#f5f0e8;--color-bg-dark:#1a1815;--color-bg-dark-alt:#252220;--color-accent:#e85d3b;--color-accent-light:#ff8a6b;--color-accent-dark:#c44a2d;--color-secondary:#d4a853;--color-text:#2d2a26;--color-text-light:#6b6560;--color-text-muted:#9a948d;--color-border:#e5e0d8;--shadow-md:0 4px 20px rgba(45,42,38,0.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--container-max:1200px;--section-padding:100px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
11
  html{scroll-behavior:smooth;font-size:16px}
12
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@@ -48,10 +72,53 @@ pre code{background:none;padding:0;color:inherit}
48
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
49
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
50
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
51
- @media(max-width:768px){:root{--section-padding:60px}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
 
53
  </head>
54
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <nav class="main-nav">
56
  <div class="container">
57
  <a href="index.html" class="nav-brand">FMN-GPT</a>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>My Baby Model Takes Forever to Grow Up | FMN-GPT - CompactAI</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
  <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
35
  html{scroll-behavior:smooth;font-size:16px}
36
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
 
72
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
73
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
74
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
75
+ @media(max-width:768px){:root {
76
+ --blue-900: #0a1628;
77
+ --blue-800: #0f2240;
78
+ --blue-700: #142d54;
79
+ --blue-600: #1a3a6b;
80
+ --blue-500: #2250a0;
81
+ --blue-400: #3a7bd5;
82
+ --blue-300: #6ba3f0;
83
+ --blue-200: #a8c8f5;
84
+ --blue-100: #d4e4fa;
85
+ --white: #ffffff;
86
+ --white-soft: #f0f4fa;
87
+ --white-muted: #c8d8ec;
88
+ --grid-line: rgba(255, 255, 255, 0.08);
89
+ --grid-line-major: rgba(255, 255, 255, 0.18);
90
+ --accent: #6ba3f0;
91
+ --accent-muted: #3a7bd5;
92
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
93
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
94
+ --container-max: 1100px;
95
+ }}
96
+
97
  </style>
98
+
99
  </head>
100
  <body>
101
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
102
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
103
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
104
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
105
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
106
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
107
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
108
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
110
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
112
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
113
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
114
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
115
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
116
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
117
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
118
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
119
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
120
+ </svg>
121
+
122
  <nav class="main-nav">
123
  <div class="container">
124
  <a href="index.html" class="nav-brand">FMN-GPT</a>
blog-My%20Baby-Model-Takes-Forever-to-Grow-Up.html CHANGED
@@ -4,9 +4,33 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>My Baby Model Takes Forever to Grow Up | FMN-GPT - CompactAI</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 
 
 
8
  <style>
9
- :root{--color-bg:#faf8f5;--color-bg-alt:#f5f0e8;--color-bg-dark:#1a1815;--color-bg-dark-alt:#252220;--color-accent:#e85d3b;--color-accent-light:#ff8a6b;--color-accent-dark:#c44a2d;--color-secondary:#d4a853;--color-text:#2d2a26;--color-text-light:#6b6560;--color-text-muted:#9a948d;--color-border:#e5e0d8;--shadow-md:0 4px 20px rgba(45,42,38,0.12);--font-sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono','Fira Code',monospace;--container-max:1200px;--section-padding:100px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
11
  html{scroll-behavior:smooth;font-size:16px}
12
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
@@ -48,10 +72,53 @@ pre code{background:none;padding:0;color:inherit}
48
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
49
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
50
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
51
- @media(max-width:768px){:root{--section-padding:60px}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
 
53
  </head>
54
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
  <nav class="main-nav">
56
  <div class="container">
57
  <a href="index.html" class="nav-brand">FMN-GPT</a>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>My Baby Model Takes Forever to Grow Up | FMN-GPT - CompactAI</title>
7
+ <link rel="stylesheet" href="bluesheet.css">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
11
  <style>
12
+
13
+ :root {
14
+ --blue-900: #0a1628;
15
+ --blue-800: #0f2240;
16
+ --blue-700: #142d54;
17
+ --blue-600: #1a3a6b;
18
+ --blue-500: #2250a0;
19
+ --blue-400: #3a7bd5;
20
+ --blue-300: #6ba3f0;
21
+ --blue-200: #a8c8f5;
22
+ --blue-100: #d4e4fa;
23
+ --white: #ffffff;
24
+ --white-soft: #f0f4fa;
25
+ --white-muted: #c8d8ec;
26
+ --grid-line: rgba(255, 255, 255, 0.08);
27
+ --grid-line-major: rgba(255, 255, 255, 0.18);
28
+ --accent: #6ba3f0;
29
+ --accent-muted: #3a7bd5;
30
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
31
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
32
+ --container-max: 1100px;
33
+ }
34
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
35
  html{scroll-behavior:smooth;font-size:16px}
36
  body{font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
 
72
  .blog-meta{display:flex;gap:1rem;margin-bottom:1rem}
73
  .blog-date{color:var(--color-text-muted);font-size:.875rem}
74
  .blog-tag{background:rgba(232,93,59,.1);color:var(--color-accent);font-size:.75rem;font-weight:600;padding:.25rem .75rem;border-radius:50px;text-transform:uppercase;letter-spacing:.05em}
75
+ @media(max-width:768px){:root {
76
+ --blue-900: #0a1628;
77
+ --blue-800: #0f2240;
78
+ --blue-700: #142d54;
79
+ --blue-600: #1a3a6b;
80
+ --blue-500: #2250a0;
81
+ --blue-400: #3a7bd5;
82
+ --blue-300: #6ba3f0;
83
+ --blue-200: #a8c8f5;
84
+ --blue-100: #d4e4fa;
85
+ --white: #ffffff;
86
+ --white-soft: #f0f4fa;
87
+ --white-muted: #c8d8ec;
88
+ --grid-line: rgba(255, 255, 255, 0.08);
89
+ --grid-line-major: rgba(255, 255, 255, 0.18);
90
+ --accent: #6ba3f0;
91
+ --accent-muted: #3a7bd5;
92
+ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
93
+ --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
94
+ --container-max: 1100px;
95
+ }}
96
+
97
  </style>
98
+
99
  </head>
100
  <body>
101
+ <svg class="scribbles" viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice">
102
+ <path d="M100,50 Q150,30 200,60 T300,40 T400,70" fill="none" stroke="white" stroke-width="1"/>
103
+ <path d="M800,200 Q850,180 900,210 T1000,190 T1100,220" fill="none" stroke="white" stroke-width="0.8"/>
104
+ <path d="M200,700 Q250,680 300,710 T400,690 T500,720" fill="none" stroke="white" stroke-width="0.6"/>
105
+ <path d="M1200,400 Q1250,380 1300,410 T1400,390" fill="none" stroke="white" stroke-width="0.7"/>
106
+ <path d="M50,400 Q100,380 150,420 T250,400" fill="none" stroke="white" stroke-width="0.5"/>
107
+ <circle cx="350" cy="150" r="30" fill="none" stroke="white" stroke-width="0.6"/>
108
+ <circle cx="1100" cy="600" r="25" fill="none" stroke="white" stroke-width="0.5"/>
109
+ <path d="M600,100 L620,80 L640,100 L660,80" fill="none" stroke="white" stroke-width="0.7"/>
110
+ <path d="M1300,750 Q1320,730 1340,760 T1380,740" fill="none" stroke="white" stroke-width="0.5"/>
111
+ <path d="M100,800 Q120,780 140,810 T180,790 T220,820" fill="none" stroke="white" stroke-width="0.6"/>
112
+ <path d="M700,500 Q720,480 740,510 T780,490 T820,520" fill="none" stroke="white" stroke-width="0.4"/>
113
+ <path d="M400,300 C420,280 440,320 460,300 C480,280 500,320 520,300" fill="none" stroke="white" stroke-width="0.5"/>
114
+ <path d="M900,700 C920,680 940,720 960,700 C980,680 1000,720 1020,700" fill="none" stroke="white" stroke-width="0.6"/>
115
+ <path d="M150,250 Q170,230 190,260 Q210,240 230,270" fill="none" stroke="white" stroke-width="0.4"/>
116
+ <path d="M1050,100 Q1070,80 1090,110 Q1110,90 1130,120" fill="none" stroke="white" stroke-width="0.5"/>
117
+ <path d="M500,850 C520,830 540,860 560,840 C580,820 600,860 620,840" fill="none" stroke="white" stroke-width="0.4"/>
118
+ <path d="M1350,50 Q1370,30 1390,60 T1430,40" fill="none" stroke="white" stroke-width="0.5"/>
119
+ <path d="M30,600 Q50,580 70,610 T110,590" fill="none" stroke="white" stroke-width="0.4"/>
120
+ </svg>
121
+
122
  <nav class="main-nav">
123
  <div class="container">
124
  <a href="index.html" class="nav-brand">FMN-GPT</a>