pngwn HF Staff commited on
Commit
aa7bc06
Β·
verified Β·
1 Parent(s): 238947e

Update README.md

Browse files
Files changed (1) hide show
  1. README.md +637 -637
README.md CHANGED
@@ -8,646 +8,646 @@ pinned: false
8
  ---
9
 
10
  <style>
11
- /* ---------- scoped to .bsh so it can't leak into the README around it ---------- */
12
- .bsh {
13
- --cream: #f6efe1;
14
- --paper: #fbf6e8;
15
- --walnut: #5a3a22;
16
- --bark: #3a2516;
17
- --ink: #2a2118;
18
- --copper:#c98a3c;
19
- --rust: #8a4a2b;
20
- --moss: #5a6b3a;
21
- --sage: #7a8c4a;
22
- --sun: #e6a85c;
23
- --mush: #b8553a;
24
- --line: #8a6a48;
25
-
26
- max-width: 1000px;
27
- margin: 0 auto;
28
- padding: 0;
29
- color: var(--ink);
30
- font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
31
- font-size: 16px;
32
- line-height: 1.55;
33
- background:
34
- radial-gradient(ellipse at 20% 10%, rgba(201,138,60,0.08), transparent 50%),
35
- radial-gradient(ellipse at 80% 90%, rgba(90,107,58,0.08), transparent 50%),
36
- repeating-linear-gradient(0deg, rgba(138,106,72,0.025) 0 1px, transparent 1px 3px),
37
- var(--cream);
38
- border: 2px solid var(--walnut);
39
- border-radius: 14px;
40
- box-shadow:
41
- inset 0 0 0 1px var(--cream),
42
- inset 0 0 0 6px var(--walnut),
43
- inset 0 0 0 8px var(--cream),
44
- inset 0 0 0 9px var(--copper),
45
- 0 6px 24px rgba(58,37,22,0.18);
46
- overflow: hidden;
47
- }
48
- .bsh * { box-sizing: border-box; }
49
- .bsh .pad { padding: 36px 44px; }
50
-
51
- /* ---------- type ---------- */
52
- .bsh h1, .bsh h2, .bsh h3 { font-family: Georgia, "Iowan Old Style", serif; color: var(--bark); margin: 0; letter-spacing: -0.01em; }
53
- .bsh h1 { font-size: 56px; line-height: 0.95; font-weight: 700; }
54
- .bsh h2 { font-size: 28px; line-height: 1.1; font-weight: 700; }
55
- .bsh h3 { font-size: 18px; line-height: 1.2; font-weight: 700; }
56
- .bsh p { margin: 0 0 12px 0; }
57
- .bsh .small { font-size: 13px; }
58
- .bsh .mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
59
- .bsh .caps { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
60
- .bsh .muted { color: var(--walnut); opacity: 0.78; }
61
- .bsh a { color: var(--rust); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
62
- .bsh a:hover { color: var(--bark); text-decoration-style: solid; }
63
-
64
- /* ---------- top strip ---------- */
65
- .bsh .strip {
66
- display: flex; align-items: center; justify-content: space-between; gap: 24px;
67
- padding: 14px 44px;
68
- background: var(--bark);
69
- color: var(--cream);
70
- border-bottom: 1px dashed rgba(246,239,225,0.35);
71
- }
72
- .bsh .strip .who { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
73
- .bsh .strip .who span.caps { color: var(--sun); }
74
- .bsh .strip .dates { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--cream); }
75
- .bsh .strip .dates b { color: var(--sun); font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
76
-
77
- /* ---------- header ---------- */
78
- .bsh .header { padding: 44px 44px 28px; position: relative; }
79
- .bsh .header::before {
80
- content: "";
81
- position: absolute; left: 44px; right: 44px; bottom: 18px; height: 1px;
82
- background: var(--walnut);
83
- box-shadow: 0 4px 0 -1px var(--cream), 0 5px 0 -1px var(--walnut);
84
- }
85
- .bsh .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--rust); font-weight: 700; }
86
- .bsh .eyebrow .dingbat { font-size: 16px; opacity: 0.7; }
87
- .bsh .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
88
- .bsh .title-row h1 em { font-style: italic; color: var(--rust); }
89
- .bsh .seal {
90
- width: 110px; height: 110px; flex-shrink: 0;
91
- border-radius: 50%;
92
- background: var(--paper);
93
- border: 2px dashed var(--walnut);
94
- box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--copper);
95
- display: flex; align-items: center; justify-content: center;
96
- color: var(--bark);
97
- text-align: center;
98
- font-family: Georgia, serif;
99
- font-size: 11px;
100
- line-height: 1.15;
101
- letter-spacing: 0.08em;
102
- text-transform: uppercase;
103
- font-weight: 700;
104
- transform: rotate(-6deg);
105
- position: relative;
106
- }
107
- .bsh .seal::before {
108
- content: "✦"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
109
- }
110
- .bsh .seal::after {
111
- content: "✦"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
112
- }
113
- .bsh .seal .seal-inner { padding: 0 8px; }
114
-
115
- /* ---------- section header ---------- */
116
- .bsh .section { padding: 40px 44px; border-top: 1px solid rgba(138,106,72,0.25); position: relative; }
117
- .bsh .section.no-rule { border-top: none; }
118
- .bsh .section-label {
119
- display: inline-flex; align-items: center; gap: 10px;
120
- color: var(--moss); font-weight: 700;
121
- margin-bottom: 14px;
122
- }
123
- .bsh .section-label .ornament { color: var(--copper); }
124
- .bsh .section h2 { margin-bottom: 8px; }
125
- .bsh .lede { font-size: 17px; line-height: 1.6; max-width: 68ch; color: var(--bark); }
126
-
127
- /* ---------- intro pull ---------- */
128
- .bsh .intro p + p { margin-top: 12px; }
129
- .bsh .intro .pull {
130
- border-left: 3px double var(--copper);
131
- padding: 4px 0 4px 16px;
132
- margin: 18px 0 6px;
133
- font-style: italic;
134
- color: var(--bark);
135
- font-size: 17px;
136
- }
137
-
138
- /* ---------- two-track grid ---------- */
139
- .bsh .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
140
- .bsh .track {
141
- background: var(--paper);
142
- border: 1.5px dashed var(--walnut);
143
- border-radius: 10px;
144
- padding: 24px 22px 22px;
145
- position: relative;
146
- transition: transform 0.18s ease, box-shadow 0.18s ease;
147
- }
148
- .bsh .track:hover {
149
- transform: translateY(-2px);
150
- box-shadow: 0 8px 18px rgba(58,37,22,0.12);
151
- }
152
- .bsh .track .chap {
153
- position: absolute; top: -12px; left: 18px;
154
- background: var(--cream); color: var(--moss);
155
- padding: 2px 10px; border: 1px solid var(--moss); border-radius: 999px;
156
- font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
157
- }
158
- .bsh .track .ico {
159
- font-size: 36px; line-height: 1; margin-bottom: 10px;
160
- filter: drop-shadow(0 2px 0 rgba(58,37,22,0.08));
161
- }
162
- .bsh .track h3 {
163
- font-size: 22px; line-height: 1.15; margin-bottom: 8px; color: var(--bark);
164
- }
165
- .bsh .track p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
166
- .bsh .track .judged { border-top: 1px dotted var(--line); padding-top: 12px; margin-top: 4px; }
167
- .bsh .track .judged .caps { color: var(--rust); margin-bottom: 8px; display: block; }
168
- .bsh .track ul { list-style: none; margin: 0; padding: 0; }
169
- .bsh .track ul li { font-size: 14px; line-height: 1.5; padding-left: 20px; position: relative; margin-bottom: 6px; color: var(--bark); }
170
- .bsh .track ul li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--copper); font-size: 12px; }
171
-
172
- /* ---------- constraints ---------- */
173
- .bsh .constraints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
174
- .bsh .constraint {
175
- border: 1.5px solid var(--walnut);
176
- border-radius: 8px;
177
- padding: 20px 18px 18px;
178
- background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
179
- position: relative;
180
- }
181
- .bsh .constraint .num {
182
- position: absolute; top: -16px; left: 16px;
183
- width: 32px; height: 32px; border-radius: 50%;
184
- background: var(--bark); color: var(--sun);
185
- display: flex; align-items: center; justify-content: center;
186
- font-family: Georgia, serif; font-weight: 700; font-size: 16px;
187
- border: 3px solid var(--cream);
188
- }
189
- .bsh .constraint h3 { font-size: 16px; margin-bottom: 6px; color: var(--bark); }
190
- .bsh .constraint p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }
191
-
192
- /* ---------- merit badges ---------- */
193
- .bsh .sash {
194
- margin-top: 22px;
195
- background:
196
- repeating-linear-gradient(135deg, rgba(58,37,22,0.04) 0 8px, transparent 8px 16px),
197
- var(--paper);
198
- border: 1.5px dashed var(--walnut);
199
- border-radius: 12px;
200
- padding: 28px 26px 26px;
201
- position: relative;
202
- }
203
- .bsh .sash::before, .bsh .sash::after {
204
- content: ""; position: absolute; left: 50%; transform: translateX(-50%);
205
- width: 60px; height: 12px;
206
- background:
207
- linear-gradient(90deg, transparent 0 6px, var(--copper) 6px 100%) no-repeat,
208
- linear-gradient(90deg, var(--copper) 0 100%) no-repeat;
209
- background-size: 100% 2px, 100% 100%;
210
- background-position: 0 0, 0 0;
211
- }
212
- .bsh .sash::before { top: -1px; background: var(--copper); border-radius: 0 0 4px 4px; height: 6px; width: 80px; }
213
- .bsh .sash::after { bottom: -1px; background: var(--copper); border-radius: 4px 4px 0 0; height: 6px; width: 80px; }
214
-
215
- .bsh .badges {
216
- display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px;
217
- margin-top: 8px;
218
- }
219
- .bsh .badge {
220
- display: flex; gap: 14px; align-items: flex-start;
221
- padding: 8px;
222
- border-radius: 10px;
223
- transition: background 0.18s ease;
224
- }
225
- .bsh .badge:hover { background: rgba(201,138,60,0.10); }
226
- .bsh .badge .patch {
227
- width: 76px; height: 76px; flex-shrink: 0;
228
- border-radius: 50%;
229
- background: var(--cream);
230
- border: 2px dashed var(--walnut);
231
- box-shadow:
232
- inset 0 0 0 5px var(--cream),
233
- inset 0 0 0 6px var(--copper),
234
- 0 3px 0 rgba(58,37,22,0.12);
235
- display: flex; align-items: center; justify-content: center;
236
- font-size: 30px;
237
- transition: transform 0.25s ease, box-shadow 0.25s ease;
238
- position: relative;
239
- }
240
- .bsh .badge:hover .patch {
241
- transform: rotate(-6deg) scale(1.04);
242
- box-shadow:
243
- inset 0 0 0 5px var(--cream),
244
- inset 0 0 0 6px var(--rust),
245
- 0 5px 0 rgba(58,37,22,0.18);
246
- }
247
- .bsh .badge .patch.moss { background: #eaeed8; }
248
- .bsh .badge .patch.copper { background: #f6e3c4; }
249
- .bsh .badge .patch.rust { background: #f1d6c7; }
250
- .bsh .badge .patch.sun { background: #f7e8c6; }
251
- .bsh .badge .patch.cream { background: #f3e8d0; }
252
- .bsh .badge .patch.olive { background: #e8e7c8; }
253
- .bsh .badge .meta { flex: 1; min-width: 0; padding-top: 4px; }
254
- .bsh .badge .meta .name { font-weight: 700; font-size: 15px; color: var(--bark); margin-bottom: 2px; }
255
- .bsh .badge .meta .desc { font-size: 13px; line-height: 1.45; color: var(--ink); }
256
- .bsh .badge .meta .tag {
257
- display: inline-block; margin-top: 6px;
258
- font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
259
- color: var(--moss);
260
- }
261
- .bsh .badge .meta .tag.tentative { color: var(--rust); }
262
-
263
- /* ---------- numbered ledger ---------- */
264
- .bsh .ledger {
265
- border: 1px solid var(--walnut);
266
- border-radius: 8px;
267
- overflow: hidden;
268
- background: var(--paper);
269
- margin-top: 18px;
270
- }
271
- .bsh .ledger .row {
272
- display: grid; grid-template-columns: 56px 1fr; align-items: stretch;
273
- border-bottom: 1px dashed rgba(138,106,72,0.45);
274
- }
275
- .bsh .ledger .row:last-child { border-bottom: none; }
276
- .bsh .ledger .row .n {
277
- background: var(--bark); color: var(--sun);
278
- display: flex; align-items: center; justify-content: center;
279
- font-family: Georgia, serif; font-weight: 700; font-size: 22px;
280
- border-right: 1px dashed rgba(246,239,225,0.3);
281
- }
282
- .bsh .ledger .row:hover .n { background: var(--rust); color: var(--cream); }
283
- .bsh .ledger .row .body { padding: 14px 18px; }
284
- .bsh .ledger .row .body .name { font-weight: 700; color: var(--bark); font-size: 16px; }
285
- .bsh .ledger .row .body .desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
286
-
287
- /* ---------- resources ---------- */
288
- .bsh .resources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 14px; }
289
- .bsh .resources a {
290
- display: flex; align-items: center; justify-content: space-between;
291
- padding: 10px 14px; border: 1px dashed var(--walnut); border-radius: 6px;
292
- background: var(--paper); text-decoration: none; color: var(--bark);
293
- font-size: 14px; font-weight: 700;
294
- transition: background 0.15s ease, transform 0.15s ease;
295
- }
296
- .bsh .resources a:hover { background: var(--cream); transform: translateX(2px); border-style: solid; }
297
- .bsh .resources a .arr { color: var(--rust); font-family: Georgia, serif; }
298
-
299
- /* ---------- timeline / map ---------- */
300
- .bsh .map {
301
- margin-top: 18px;
302
- background:
303
- radial-gradient(circle at 12% 22%, rgba(90,107,58,0.10), transparent 22%),
304
- radial-gradient(circle at 88% 78%, rgba(201,138,60,0.10), transparent 24%),
305
- var(--paper);
306
- border: 1.5px solid var(--walnut);
307
- border-radius: 10px;
308
- padding: 22px 22px 18px;
309
- position: relative;
310
- }
311
- .bsh .map .map-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
312
- .bsh .map .map-head .compass { font-size: 22px; color: var(--rust); }
313
- .bsh .stops { position: relative; padding: 6px 0 0; }
314
- .bsh .stops::before {
315
- content: ""; position: absolute; left: 43px; top: 18px; bottom: 18px;
316
- border-left: 2px dashed var(--copper);
317
- }
318
- .bsh .stop {
319
- display: grid; grid-template-columns: 76px 160px 1fr; align-items: center; gap: 14px;
320
- padding: 10px 6px; border-radius: 6px; position: relative;
321
- transition: background 0.15s ease;
322
- }
323
- .bsh .stop:hover { background: rgba(201,138,60,0.08); }
324
- .bsh .stop .pin {
325
- width: 38px; height: 38px; border-radius: 50%;
326
- background: var(--cream);
327
- border: 2px solid var(--walnut);
328
- box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--copper);
329
- display: flex; align-items: center; justify-content: center;
330
- font-family: Georgia, serif; font-weight: 700; color: var(--bark); font-size: 14px;
331
- margin-left: 19px; position: relative; z-index: 1;
332
- }
333
- .bsh .stop:hover .pin { background: var(--sun); }
334
- .bsh .stop .when { font-style: italic; color: var(--rust); font-size: 14px; }
335
- .bsh .stop .what { color: var(--bark); }
336
- .bsh .stop .what b { color: var(--bark); font-weight: 700; }
337
- .bsh .stop .what .note { display: block; font-size: 13px; color: var(--ink); opacity: 0.85; }
338
-
339
- /* ---------- final cta ---------- */
340
- .bsh .cta {
341
- background:
342
- repeating-linear-gradient(45deg, rgba(58,37,22,0.04) 0 6px, transparent 6px 12px),
343
- linear-gradient(180deg, #2f1f12, var(--bark));
344
- color: var(--cream);
345
- padding: 36px 44px 40px;
346
- text-align: center;
347
- border-top: 6px double var(--copper);
348
- position: relative;
349
- }
350
- .bsh .cta h2 { color: var(--cream); font-size: 38px; }
351
- .bsh .cta h2 em { color: var(--sun); font-style: italic; }
352
- .bsh .cta p { color: rgba(246,239,225,0.85); font-size: 16px; max-width: 56ch; margin: 10px auto 22px; }
353
- .bsh .cta .button {
354
- display: inline-block; padding: 14px 26px;
355
- background: var(--sun); color: var(--bark);
356
- border: 2px solid var(--sun);
357
- border-radius: 999px;
358
- font-weight: 700; font-size: 16px; text-decoration: none;
359
- letter-spacing: 0.04em;
360
- box-shadow: 0 4px 0 rgba(0,0,0,0.25);
361
- transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
362
- }
363
- .bsh .cta .button:hover {
364
- background: var(--cream); border-color: var(--cream);
365
- transform: translateY(-2px);
366
- box-shadow: 0 6px 0 rgba(0,0,0,0.3);
367
- }
368
- .bsh .cta .links { margin-top: 18px; font-size: 13px; }
369
- .bsh .cta .links a { color: var(--sun); margin: 0 10px; }
370
- .bsh .cta .placeholder { display: block; margin-top: 10px; font-size: 11px; color: rgba(246,239,225,0.5); font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; }
371
-
372
- /* ---------- responsive ---------- */
373
- @media (max-width: 760px) {
374
- .bsh .pad, .bsh .header, .bsh .section, .bsh .strip, .bsh .cta { padding-left: 22px; padding-right: 22px; }
375
- .bsh h1 { font-size: 40px; }
376
- .bsh .tracks, .bsh .constraints, .bsh .badges, .bsh .resources { grid-template-columns: 1fr; }
377
- .bsh .stop { grid-template-columns: 76px 1fr; }
378
- .bsh .stop .when { grid-column: 2; padding-left: 0; }
379
- .bsh .stop .what { grid-column: 2; }
380
- .bsh .seal { display: none; }
381
- }
382
-
383
- /* ---------- decorative svg dividers ---------- */
384
- .bsh .ornament-rule {
385
- display: flex; align-items: center; gap: 12px;
386
- color: var(--copper);
387
- margin: 18px 0 22px;
388
- }
389
- .bsh .ornament-rule::before, .bsh .ornament-rule::after {
390
- content: ""; flex: 1; height: 0;
391
- border-top: 1px solid var(--walnut);
392
- border-bottom: 1px solid var(--walnut);
393
- height: 3px;
394
- }
395
  </style>
396
 
397
  <div class="bsh">
398
 
399
- <!-- top strip -->
400
- <div class="strip">
401
- <div class="who">
402
- <span><span class="caps">Hosted by</span> &nbsp;<b style="color:#f6efe1; font-family:Georgia,serif;">Gradio</b> Β· <b style="color:#f6efe1; font-family:Georgia,serif;">Hugging Face</b></span>
403
- <span><span class="caps">Sponsored by</span> &nbsp;<span class="mono" style="color:#f6efe1; opacity:0.7;">[ TBD ]</span></span>
404
- </div>
405
- <div class="dates"><b>May 29</b> – <b>June 8, 2026</b></div>
406
- </div>
407
-
408
- <!-- header -->
409
- <header class="header">
410
- <div class="title-row">
411
- <div style="flex:1; min-width: 0;">
412
- <div class="eyebrow caps"><span class="dingbat">✦</span> The Build Small Hackathon <span class="dingbat">✦</span></div>
413
- <h1 style="margin-top: 10px;">Making AI <em>Fun</em><br>Again.</h1>
414
- </div>
415
- <div class="seal" aria-hidden="true">
416
- <div class="seal-inner">Build<br>Small<br>Β·<br>2026</div>
417
- </div>
418
- </div>
419
- </header>
420
-
421
- <!-- intro -->
422
- <section class="section no-rule intro">
423
- <div class="section-label caps"><span class="ornament">❋</span> Chapter Zero β€” Why this exists</div>
424
- <p class="lede">The pace of AI over the last year has been anxiety-inducing. Labs release larger and larger models that do more of the things that make us feel human β€” writing, drawing, speaking, coding. No wonder more than half of us think the risks of AI outweigh the benefits.</p>
425
- <div class="pull">We're sponsoring a hackathon to take things back to how they felt in 2021 β€” when models were small enough to tinker with, and the vibe was fun and hopeful about how this technology could improve our lives.</div>
426
- <p style="margin-top: 14px;">This hackathon is different. Rather than using a giant LLM to ship yet another B2B SaaS, we want you to <b>think small</b>. Armed with only <b>32 billion parameters</b>, solve a problem someone you know is facing β€” or build something whimsical.</p>
427
- </section>
428
-
429
- <!-- two tracks -->
430
- <section class="section">
431
- <div class="section-label caps"><span class="ornament">❋</span> Two Tracks Β· Pick your trail</div>
432
- <h2>Choose your own adventure.</h2>
433
-
434
- <div class="tracks">
435
- <div class="track">
436
- <span class="chap">Chapter One</span>
437
- <div class="ico">🏑</div>
438
- <h3>Backyard AI</h3>
439
- <p>Solve a real problem for someone you actually know. Pick a person β€” a neighbor, a parent, a small-business owner on your street β€” and build something that makes their day measurably better.</p>
440
- <div class="judged">
441
- <span class="caps">Judged on</span>
442
- <ul>
443
- <li>Problem is specific and real</li>
444
- <li>The person actually <em>used it</em></li>
445
- <li>Honest fit between problem and the small-model constraint</li>
446
- <li>Polish of the Gradio app</li>
447
- </ul>
448
- </div>
449
- </div>
450
-
451
- <div class="track">
452
- <span class="chap">Chapter Two</span>
453
- <div class="ico">πŸ„</div>
454
- <h3>An Adventure in Thousand&nbsp;Token Wood</h3>
455
- <p>Build something delightful that wouldn't exist without AI. Wander somewhere weirder. A toy, a tiny game, a strange interactive story, an art experiment that surprises you. The AI should be doing the fun thing β€” not just helping you build it. Strange is good. Joyful is the bar.</p>
456
- <div class="judged">
457
- <span class="caps">Judged on</span>
458
- <ul>
459
- <li>Genuinely delightful (would you show a friend?)</li>
460
- <li>AI is load-bearing for the experience</li>
461
- <li>Originality of concept</li>
462
- <li>Polish of the Gradio app</li>
463
- </ul>
464
- </div>
465
- </div>
466
- </div>
467
- </section>
468
-
469
- <!-- constraints -->
470
- <section class="section">
471
- <div class="section-label caps"><span class="ornament">❋</span> The Constraints β€” Three rules of the trail</div>
472
- <h2>Pack light.</h2>
473
-
474
- <div class="constraints">
475
- <div class="constraint">
476
- <div class="num">1</div>
477
- <h3>Small Models Only</h3>
478
- <p>Total parameters must be <b>≀ 32 billion</b>. The model fits on a laptop. So should your ambition.</p>
479
- </div>
480
- <div class="constraint">
481
- <div class="num">2</div>
482
- <h3>Built on Gradio</h3>
483
- <p>Your app must be a <b>Gradio app</b>, hosted as a <b>Hugging Face Space</b>. That's the canvas.</p>
484
- </div>
485
- <div class="constraint">
486
- <div class="num">3</div>
487
- <h3>Show, Don't Tell</h3>
488
- <p>A short <b>demo video</b> and a <b>social-media post</b> are part of the submission. Make it sing.</p>
489
- </div>
490
- </div>
491
- </section>
492
-
493
- <!-- bonus quests -->
494
- <section class="section">
495
- <div class="section-label caps"><span class="ornament">❋</span> Bonus Quests Β· Six earnable merit badges</div>
496
- <h2>Stack 'em on your sash.</h2>
497
- <p class="lede" style="margin-top: 6px;">None required. Each one grants extra points for your submission. Hover a patch to see it lift.</p>
498
-
499
- <div class="sash">
500
- <div class="badges">
501
- <div class="badge">
502
- <div class="patch sun">πŸ”Œ</div>
503
- <div class="meta">
504
- <div class="name">Off the Grid</div>
505
- <div class="desc">No cloud APIs. The whole thing runs on the model in front of you.</div>
506
- <span class="tag">Local-first</span>
507
- </div>
508
- </div>
509
- <div class="badge">
510
- <div class="patch moss">🎯</div>
511
- <div class="meta">
512
- <div class="name">Well-Tuned</div>
513
- <div class="desc">Your app uses a fine-tuned model you've published on Hugging Face.</div>
514
- <span class="tag">Fine-tuned</span>
515
- </div>
516
- </div>
517
- <div class="badge">
518
- <div class="patch rust">🎨</div>
519
- <div class="meta">
520
- <div class="name">Off-Brand</div>
521
- <div class="desc">A custom frontend that pushes past the default Gradio look.</div>
522
- <span class="tag">Custom UI</span>
523
- </div>
524
- </div>
525
- <div class="badge">
526
- <div class="patch copper">πŸ¦™</div>
527
- <div class="meta">
528
- <div class="name">Llama Champion</div>
529
- <div class="desc">Your model runs through the llama.cpp runtime.</div>
530
- <span class="tag">llama.cpp</span>
531
- </div>
532
- </div>
533
- <div class="badge">
534
- <div class="patch cream">πŸ“‘</div>
535
- <div class="meta">
536
- <div class="name">Sharing is Caring</div>
537
- <div class="desc">You shared your agent trace on the Hub for everyone to learn from.</div>
538
- <span class="tag">Open trace</span>
539
- </div>
540
- </div>
541
- <div class="badge">
542
- <div class="patch olive">πŸ““</div>
543
- <div class="meta">
544
- <div class="name">Field Notes</div>
545
- <div class="desc">You wrote a blog post or report about what you built and what you learned.</div>
546
- <span class="tag tentative">Tentative</span>
547
- </div>
548
- </div>
549
- </div>
550
- </div>
551
- </section>
552
-
553
- <!-- how to participate -->
554
- <section class="section">
555
- <div class="section-label caps"><span class="ornament">❋</span> How to Participate</div>
556
- <h2>Four steps. No application. No waitlist.</h2>
557
-
558
- <div class="ledger">
559
- <div class="row">
560
- <div class="n">I</div>
561
- <div class="body">
562
- <div class="name">Register</div>
563
- <div class="desc">Join this org on Hugging Face. No application, no waitlist β€” just walk in.</div>
564
- </div>
565
- </div>
566
- <div class="row">
567
- <div class="n">II</div>
568
- <div class="body">
569
- <div class="name">Find your people</div>
570
- <div class="desc">Hop into the Gradio Discord. Office hours, AMAs, and teammates live there.</div>
571
- </div>
572
- </div>
573
- <div class="row">
574
- <div class="n">III</div>
575
- <div class="body">
576
- <div class="name">Build &amp; ship</div>
577
- <div class="desc">Build your Gradio app and host it as a Space under this org.</div>
578
- </div>
579
- </div>
580
- <div class="row">
581
- <div class="n">IV</div>
582
- <div class="body">
583
- <div class="name">Submit</div>
584
- <div class="desc">Drop your Space link, a short demo video, and a social post by the deadline.</div>
585
- </div>
586
- </div>
587
- </div>
588
- </section>
589
-
590
- <!-- resources -->
591
- <section class="section">
592
- <div class="section-label caps"><span class="ornament">❋</span> How to Get Started Β· Tools for the trail</div>
593
- <h2>Useful trailheads.</h2>
594
- <div class="resources">
595
- <a href="#"><span>πŸ““ &nbsp;ML Intern Agent Guide β€” fine-tune without code</span><span class="arr">β†’</span></a>
596
- <a href="#"><span>πŸ“š &nbsp;Gradio Guides</span><span class="arr">β†’</span></a>
597
- <a href="#"><span>πŸ›  &nbsp;Gradio's gr.Server β€” fully custom UIs</span><span class="arr">β†’</span></a>
598
- <a href="#"><span>πŸ¦™ &nbsp;Getting Started with Llama.cpp on Spaces</span><span class="arr">β†’</span></a>
599
- </div>
600
- </section>
601
-
602
- <!-- timeline / map -->
603
- <section class="section">
604
- <div class="section-label caps"><span class="ornament">❋</span> Timeline Β· A hand-drawn map</div>
605
- <h2>Two weekends in the woods.</h2>
606
-
607
- <div class="map">
608
- <div class="map-head">
609
- <span class="caps muted">Trail map</span>
610
- <span class="compass" aria-hidden="true">✦ N ✦</span>
611
- </div>
612
- <div class="stops">
613
- <div class="stop">
614
- <div class="pin">I</div>
615
- <div class="when">Week of [date TBD]</div>
616
- <div class="what"><b>Registration opens.</b><span class="note">Sign up, join Discord, start sketching.</span></div>
617
- </div>
618
- <div class="stop">
619
- <div class="pin">II</div>
620
- <div class="when">[date TBD]</div>
621
- <div class="what"><b>Hack window begins.</b><span class="note">Two weekends to build, ship, and demo.</span></div>
622
- </div>
623
- <div class="stop">
624
- <div class="pin">III</div>
625
- <div class="when">Mid-window</div>
626
- <div class="what"><b>Live AMA + office hours.</b><span class="note">Ask the Gradio team anything.</span></div>
627
- </div>
628
- <div class="stop">
629
- <div class="pin">IV</div>
630
- <div class="when">[date TBD]</div>
631
- <div class="what"><b>Submissions close.</b><span class="note">Space, demo video, social post locked in.</span></div>
632
- </div>
633
- <div class="stop">
634
- <div class="pin">V</div>
635
- <div class="when">[date TBD]</div>
636
- <div class="what"><b>Winners announced.</b><span class="note">Per track, plus bonus-quest leaderboard.</span></div>
637
- </div>
638
- </div>
639
- </div>
640
- </section>
641
-
642
- <!-- final cta -->
643
- <div class="cta">
644
- <h2>Build something <em>small</em>.</h2>
645
- <p>Two weekends. Two tracks. The model on your laptop. The neighbor next door.</p>
646
- <a href="#" class="button">β†’ &nbsp; Register on Hugging Face &nbsp; ←</a>
647
- <span class="placeholder">Placeholder link for now</span>
648
- <div class="links">
649
- <a href="#">Join the community</a> Β· <a href="#">Gradio docs</a> Β· <a href="#">Discord</a>
650
- </div>
651
- </div>
652
 
653
  </div>
 
8
  ---
9
 
10
  <style>
11
+ /* ---------- scoped to .bsh so it can't leak into the README around it ---------- */
12
+ .bsh {
13
+ --cream: #f6efe1;
14
+ --paper: #fbf6e8;
15
+ --walnut: #5a3a22;
16
+ --bark: #3a2516;
17
+ --ink: #2a2118;
18
+ --copper:#c98a3c;
19
+ --rust: #8a4a2b;
20
+ --moss: #5a6b3a;
21
+ --sage: #7a8c4a;
22
+ --sun: #e6a85c;
23
+ --mush: #b8553a;
24
+ --line: #8a6a48;
25
+
26
+ max-width: 1000px;
27
+ margin: 0 auto;
28
+ padding: 0;
29
+ color: var(--ink);
30
+ font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
31
+ font-size: 16px;
32
+ line-height: 1.55;
33
+ background:
34
+ radial-gradient(ellipse at 20% 10%, rgba(201,138,60,0.08), transparent 50%),
35
+ radial-gradient(ellipse at 80% 90%, rgba(90,107,58,0.08), transparent 50%),
36
+ repeating-linear-gradient(0deg, rgba(138,106,72,0.025) 0 1px, transparent 1px 3px),
37
+ var(--cream);
38
+ border: 2px solid var(--walnut);
39
+ border-radius: 14px;
40
+ box-shadow:
41
+ inset 0 0 0 1px var(--cream),
42
+ inset 0 0 0 6px var(--walnut),
43
+ inset 0 0 0 8px var(--cream),
44
+ inset 0 0 0 9px var(--copper),
45
+ 0 6px 24px rgba(58,37,22,0.18);
46
+ overflow: hidden;
47
+ }
48
+ .bsh * { box-sizing: border-box; }
49
+ .bsh .pad { padding: 36px 44px; }
50
+
51
+ /* ---------- type ---------- */
52
+ .bsh h1, .bsh h2, .bsh h3 { font-family: Georgia, "Iowan Old Style", serif; color: var(--bark); margin: 0; letter-spacing: -0.01em; }
53
+ .bsh h1 { font-size: 56px; line-height: 0.95; font-weight: 700; }
54
+ .bsh h2 { font-size: 28px; line-height: 1.1; font-weight: 700; }
55
+ .bsh h3 { font-size: 18px; line-height: 1.2; font-weight: 700; }
56
+ .bsh p { margin: 0 0 12px 0; }
57
+ .bsh .small { font-size: 13px; }
58
+ .bsh .mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
59
+ .bsh .caps { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
60
+ .bsh .muted { color: var(--walnut); opacity: 0.78; }
61
+ .bsh a { color: var(--rust); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
62
+ .bsh a:hover { color: var(--bark); text-decoration-style: solid; }
63
+
64
+ /* ---------- top strip ---------- */
65
+ .bsh .strip {
66
+ display: flex; align-items: center; justify-content: space-between; gap: 24px;
67
+ padding: 14px 44px;
68
+ background: var(--bark);
69
+ color: var(--cream);
70
+ border-bottom: 1px dashed rgba(246,239,225,0.35);
71
+ }
72
+ .bsh .strip .who { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
73
+ .bsh .strip .who span.caps { color: var(--sun); }
74
+ .bsh .strip .dates { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--cream); }
75
+ .bsh .strip .dates b { color: var(--sun); font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
76
+
77
+ /* ---------- header ---------- */
78
+ .bsh .header { padding: 44px 44px 28px; position: relative; }
79
+ .bsh .header::before {
80
+ content: "";
81
+ position: absolute; left: 44px; right: 44px; bottom: 18px; height: 1px;
82
+ background: var(--walnut);
83
+ box-shadow: 0 4px 0 -1px var(--cream), 0 5px 0 -1px var(--walnut);
84
+ }
85
+ .bsh .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--rust); font-weight: 700; }
86
+ .bsh .eyebrow .dingbat { font-size: 16px; opacity: 0.7; }
87
+ .bsh .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
88
+ .bsh .title-row h1 em { font-style: italic; color: var(--rust); }
89
+ .bsh .seal {
90
+ width: 110px; height: 110px; flex-shrink: 0;
91
+ border-radius: 50%;
92
+ background: var(--paper);
93
+ border: 2px dashed var(--walnut);
94
+ box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--copper);
95
+ display: flex; align-items: center; justify-content: center;
96
+ color: var(--bark);
97
+ text-align: center;
98
+ font-family: Georgia, serif;
99
+ font-size: 11px;
100
+ line-height: 1.15;
101
+ letter-spacing: 0.08em;
102
+ text-transform: uppercase;
103
+ font-weight: 700;
104
+ transform: rotate(-6deg);
105
+ position: relative;
106
+ }
107
+ .bsh .seal::before {
108
+ content: "✦"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
109
+ }
110
+ .bsh .seal::after {
111
+ content: "✦"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
112
+ }
113
+ .bsh .seal .seal-inner { padding: 0 8px; }
114
+
115
+ /* ---------- section header ---------- */
116
+ .bsh .section { padding: 40px 44px; border-top: 1px solid rgba(138,106,72,0.25); position: relative; }
117
+ .bsh .section.no-rule { border-top: none; }
118
+ .bsh .section-label {
119
+ display: inline-flex; align-items: center; gap: 10px;
120
+ color: var(--moss); font-weight: 700;
121
+ margin-bottom: 14px;
122
+ }
123
+ .bsh .section-label .ornament { color: var(--copper); }
124
+ .bsh .section h2 { margin-bottom: 8px; }
125
+ .bsh .lede { font-size: 17px; line-height: 1.6; max-width: 68ch; color: var(--bark); }
126
+
127
+ /* ---------- intro pull ---------- */
128
+ .bsh .intro p + p { margin-top: 12px; }
129
+ .bsh .intro .pull {
130
+ border-left: 3px double var(--copper);
131
+ padding: 4px 0 4px 16px;
132
+ margin: 18px 0 6px;
133
+ font-style: italic;
134
+ color: var(--bark);
135
+ font-size: 17px;
136
+ }
137
+
138
+ /* ---------- two-track grid ---------- */
139
+ .bsh .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
140
+ .bsh .track {
141
+ background: var(--paper);
142
+ border: 1.5px dashed var(--walnut);
143
+ border-radius: 10px;
144
+ padding: 24px 22px 22px;
145
+ position: relative;
146
+ transition: transform 0.18s ease, box-shadow 0.18s ease;
147
+ }
148
+ .bsh .track:hover {
149
+ transform: translateY(-2px);
150
+ box-shadow: 0 8px 18px rgba(58,37,22,0.12);
151
+ }
152
+ .bsh .track .chap {
153
+ position: absolute; top: -12px; left: 18px;
154
+ background: var(--cream); color: var(--moss);
155
+ padding: 2px 10px; border: 1px solid var(--moss); border-radius: 999px;
156
+ font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
157
+ }
158
+ .bsh .track .ico {
159
+ font-size: 36px; line-height: 1; margin-bottom: 10px;
160
+ filter: drop-shadow(0 2px 0 rgba(58,37,22,0.08));
161
+ }
162
+ .bsh .track h3 {
163
+ font-size: 22px; line-height: 1.15; margin-bottom: 8px; color: var(--bark);
164
+ }
165
+ .bsh .track p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
166
+ .bsh .track .judged { border-top: 1px dotted var(--line); padding-top: 12px; margin-top: 4px; }
167
+ .bsh .track .judged .caps { color: var(--rust); margin-bottom: 8px; display: block; }
168
+ .bsh .track ul { list-style: none; margin: 0; padding: 0; }
169
+ .bsh .track ul li { font-size: 14px; line-height: 1.5; padding-left: 20px; position: relative; margin-bottom: 6px; color: var(--bark); }
170
+ .bsh .track ul li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--copper); font-size: 12px; }
171
+
172
+ /* ---------- constraints ---------- */
173
+ .bsh .constraints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
174
+ .bsh .constraint {
175
+ border: 1.5px solid var(--walnut);
176
+ border-radius: 8px;
177
+ padding: 20px 18px 18px;
178
+ background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
179
+ position: relative;
180
+ }
181
+ .bsh .constraint .num {
182
+ position: absolute; top: -16px; left: 16px;
183
+ width: 32px; height: 32px; border-radius: 50%;
184
+ background: var(--bark); color: var(--sun);
185
+ display: flex; align-items: center; justify-content: center;
186
+ font-family: Georgia, serif; font-weight: 700; font-size: 16px;
187
+ border: 3px solid var(--cream);
188
+ }
189
+ .bsh .constraint h3 { font-size: 16px; margin-bottom: 6px; color: var(--bark); }
190
+ .bsh .constraint p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }
191
+
192
+ /* ---------- merit badges ---------- */
193
+ .bsh .sash {
194
+ margin-top: 22px;
195
+ background:
196
+ repeating-linear-gradient(135deg, rgba(58,37,22,0.04) 0 8px, transparent 8px 16px),
197
+ var(--paper);
198
+ border: 1.5px dashed var(--walnut);
199
+ border-radius: 12px;
200
+ padding: 28px 26px 26px;
201
+ position: relative;
202
+ }
203
+ .bsh .sash::before, .bsh .sash::after {
204
+ content: ""; position: absolute; left: 50%; transform: translateX(-50%);
205
+ width: 60px; height: 12px;
206
+ background:
207
+ linear-gradient(90deg, transparent 0 6px, var(--copper) 6px 100%) no-repeat,
208
+ linear-gradient(90deg, var(--copper) 0 100%) no-repeat;
209
+ background-size: 100% 2px, 100% 100%;
210
+ background-position: 0 0, 0 0;
211
+ }
212
+ .bsh .sash::before { top: -1px; background: var(--copper); border-radius: 0 0 4px 4px; height: 6px; width: 80px; }
213
+ .bsh .sash::after { bottom: -1px; background: var(--copper); border-radius: 4px 4px 0 0; height: 6px; width: 80px; }
214
+
215
+ .bsh .badges {
216
+ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 20px;
217
+ margin-top: 8px;
218
+ }
219
+ .bsh .badge {
220
+ display: flex; gap: 14px; align-items: flex-start;
221
+ padding: 8px;
222
+ border-radius: 10px;
223
+ transition: background 0.18s ease;
224
+ }
225
+ .bsh .badge:hover { background: rgba(201,138,60,0.10); }
226
+ .bsh .badge .patch {
227
+ width: 76px; height: 76px; flex-shrink: 0;
228
+ border-radius: 50%;
229
+ background: var(--cream);
230
+ border: 2px dashed var(--walnut);
231
+ box-shadow:
232
+ inset 0 0 0 5px var(--cream),
233
+ inset 0 0 0 6px var(--copper),
234
+ 0 3px 0 rgba(58,37,22,0.12);
235
+ display: flex; align-items: center; justify-content: center;
236
+ font-size: 30px;
237
+ transition: transform 0.25s ease, box-shadow 0.25s ease;
238
+ position: relative;
239
+ }
240
+ .bsh .badge:hover .patch {
241
+ transform: rotate(-6deg) scale(1.04);
242
+ box-shadow:
243
+ inset 0 0 0 5px var(--cream),
244
+ inset 0 0 0 6px var(--rust),
245
+ 0 5px 0 rgba(58,37,22,0.18);
246
+ }
247
+ .bsh .badge .patch.moss { background: #eaeed8; }
248
+ .bsh .badge .patch.copper { background: #f6e3c4; }
249
+ .bsh .badge .patch.rust { background: #f1d6c7; }
250
+ .bsh .badge .patch.sun { background: #f7e8c6; }
251
+ .bsh .badge .patch.cream { background: #f3e8d0; }
252
+ .bsh .badge .patch.olive { background: #e8e7c8; }
253
+ .bsh .badge .meta { flex: 1; min-width: 0; padding-top: 4px; }
254
+ .bsh .badge .meta .name { font-weight: 700; font-size: 15px; color: var(--bark); margin-bottom: 2px; }
255
+ .bsh .badge .meta .desc { font-size: 13px; line-height: 1.45; color: var(--ink); }
256
+ .bsh .badge .meta .tag {
257
+ display: inline-block; margin-top: 6px;
258
+ font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
259
+ color: var(--moss);
260
+ }
261
+ .bsh .badge .meta .tag.tentative { color: var(--rust); }
262
+
263
+ /* ---------- numbered ledger ---------- */
264
+ .bsh .ledger {
265
+ border: 1px solid var(--walnut);
266
+ border-radius: 8px;
267
+ overflow: hidden;
268
+ background: var(--paper);
269
+ margin-top: 18px;
270
+ }
271
+ .bsh .ledger .row {
272
+ display: grid; grid-template-columns: 56px 1fr; align-items: stretch;
273
+ border-bottom: 1px dashed rgba(138,106,72,0.45);
274
+ }
275
+ .bsh .ledger .row:last-child { border-bottom: none; }
276
+ .bsh .ledger .row .n {
277
+ background: var(--bark); color: var(--sun);
278
+ display: flex; align-items: center; justify-content: center;
279
+ font-family: Georgia, serif; font-weight: 700; font-size: 22px;
280
+ border-right: 1px dashed rgba(246,239,225,0.3);
281
+ }
282
+ .bsh .ledger .row:hover .n { background: var(--rust); color: var(--cream); }
283
+ .bsh .ledger .row .body { padding: 14px 18px; }
284
+ .bsh .ledger .row .body .name { font-weight: 700; color: var(--bark); font-size: 16px; }
285
+ .bsh .ledger .row .body .desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
286
+
287
+ /* ---------- resources ---------- */
288
+ .bsh .resources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 14px; }
289
+ .bsh .resources a {
290
+ display: flex; align-items: center; justify-content: space-between;
291
+ padding: 10px 14px; border: 1px dashed var(--walnut); border-radius: 6px;
292
+ background: var(--paper); text-decoration: none; color: var(--bark);
293
+ font-size: 14px; font-weight: 700;
294
+ transition: background 0.15s ease, transform 0.15s ease;
295
+ }
296
+ .bsh .resources a:hover { background: var(--cream); transform: translateX(2px); border-style: solid; }
297
+ .bsh .resources a .arr { color: var(--rust); font-family: Georgia, serif; }
298
+
299
+ /* ---------- timeline / map ---------- */
300
+ .bsh .map {
301
+ margin-top: 18px;
302
+ background:
303
+ radial-gradient(circle at 12% 22%, rgba(90,107,58,0.10), transparent 22%),
304
+ radial-gradient(circle at 88% 78%, rgba(201,138,60,0.10), transparent 24%),
305
+ var(--paper);
306
+ border: 1.5px solid var(--walnut);
307
+ border-radius: 10px;
308
+ padding: 22px 22px 18px;
309
+ position: relative;
310
+ }
311
+ .bsh .map .map-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
312
+ .bsh .map .map-head .compass { font-size: 22px; color: var(--rust); }
313
+ .bsh .stops { position: relative; padding: 6px 0 0; }
314
+ .bsh .stops::before {
315
+ content: ""; position: absolute; left: 43px; top: 18px; bottom: 18px;
316
+ border-left: 2px dashed var(--copper);
317
+ }
318
+ .bsh .stop {
319
+ display: grid; grid-template-columns: 76px 160px 1fr; align-items: center; gap: 14px;
320
+ padding: 10px 6px; border-radius: 6px; position: relative;
321
+ transition: background 0.15s ease;
322
+ }
323
+ .bsh .stop:hover { background: rgba(201,138,60,0.08); }
324
+ .bsh .stop .pin {
325
+ width: 38px; height: 38px; border-radius: 50%;
326
+ background: var(--cream);
327
+ border: 2px solid var(--walnut);
328
+ box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--copper);
329
+ display: flex; align-items: center; justify-content: center;
330
+ font-family: Georgia, serif; font-weight: 700; color: var(--bark); font-size: 14px;
331
+ margin-left: 19px; position: relative; z-index: 1;
332
+ }
333
+ .bsh .stop:hover .pin { background: var(--sun); }
334
+ .bsh .stop .when { font-style: italic; color: var(--rust); font-size: 14px; }
335
+ .bsh .stop .what { color: var(--bark); }
336
+ .bsh .stop .what b { color: var(--bark); font-weight: 700; }
337
+ .bsh .stop .what .note { display: block; font-size: 13px; color: var(--ink); opacity: 0.85; }
338
+
339
+ /* ---------- final cta ---------- */
340
+ .bsh .cta {
341
+ background:
342
+ repeating-linear-gradient(45deg, rgba(58,37,22,0.04) 0 6px, transparent 6px 12px),
343
+ linear-gradient(180deg, #2f1f12, var(--bark));
344
+ color: var(--cream);
345
+ padding: 36px 44px 40px;
346
+ text-align: center;
347
+ border-top: 6px double var(--copper);
348
+ position: relative;
349
+ }
350
+ .bsh .cta h2 { color: var(--cream); font-size: 38px; }
351
+ .bsh .cta h2 em { color: var(--sun); font-style: italic; }
352
+ .bsh .cta p { color: rgba(246,239,225,0.85); font-size: 16px; max-width: 56ch; margin: 10px auto 22px; }
353
+ .bsh .cta .button {
354
+ display: inline-block; padding: 14px 26px;
355
+ background: var(--sun); color: var(--bark);
356
+ border: 2px solid var(--sun);
357
+ border-radius: 999px;
358
+ font-weight: 700; font-size: 16px; text-decoration: none;
359
+ letter-spacing: 0.04em;
360
+ box-shadow: 0 4px 0 rgba(0,0,0,0.25);
361
+ transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
362
+ }
363
+ .bsh .cta .button:hover {
364
+ background: var(--cream); border-color: var(--cream);
365
+ transform: translateY(-2px);
366
+ box-shadow: 0 6px 0 rgba(0,0,0,0.3);
367
+ }
368
+ .bsh .cta .links { margin-top: 18px; font-size: 13px; }
369
+ .bsh .cta .links a { color: var(--sun); margin: 0 10px; }
370
+ .bsh .cta .placeholder { display: block; margin-top: 10px; font-size: 11px; color: rgba(246,239,225,0.5); font-style: italic; letter-spacing: 0.1em; text-transform: uppercase; }
371
+
372
+ /* ---------- responsive ---------- */
373
+ @media (max-width: 760px) {
374
+ .bsh .pad, .bsh .header, .bsh .section, .bsh .strip, .bsh .cta { padding-left: 22px; padding-right: 22px; }
375
+ .bsh h1 { font-size: 40px; }
376
+ .bsh .tracks, .bsh .constraints, .bsh .badges, .bsh .resources { grid-template-columns: 1fr; }
377
+ .bsh .stop { grid-template-columns: 76px 1fr; }
378
+ .bsh .stop .when { grid-column: 2; padding-left: 0; }
379
+ .bsh .stop .what { grid-column: 2; }
380
+ .bsh .seal { display: none; }
381
+ }
382
+
383
+ /* ---------- decorative svg dividers ---------- */
384
+ .bsh .ornament-rule {
385
+ display: flex; align-items: center; gap: 12px;
386
+ color: var(--copper);
387
+ margin: 18px 0 22px;
388
+ }
389
+ .bsh .ornament-rule::before, .bsh .ornament-rule::after {
390
+ content: ""; flex: 1; height: 0;
391
+ border-top: 1px solid var(--walnut);
392
+ border-bottom: 1px solid var(--walnut);
393
+ height: 3px;
394
+ }
395
  </style>
396
 
397
  <div class="bsh">
398
 
399
+ <!-- top strip -->
400
+ <div class="strip">
401
+ <div class="who">
402
+ <span><span class="caps">Hosted by</span> &nbsp;<b style="color:#f6efe1; font-family:Georgia,serif;">Gradio</b> Β· <b style="color:#f6efe1; font-family:Georgia,serif;">Hugging Face</b></span>
403
+ <span><span class="caps">Sponsored by</span> &nbsp;<span class="mono" style="color:#f6efe1; opacity:0.7;">[ TBD ]</span></span>
404
+ </div>
405
+ <div class="dates"><b>May 29</b> – <b>June 8, 2026</b></div>
406
+ </div>
407
+
408
+ <!-- header -->
409
+ <header class="header">
410
+ <div class="title-row">
411
+ <div style="flex:1; min-width: 0;">
412
+ <div class="eyebrow caps"><span class="dingbat">✦</span> The Build Small Hackathon <span class="dingbat">✦</span></div>
413
+ <h1 style="margin-top: 10px;">Making AI <em>Fun</em><br>Again.</h1>
414
+ </div>
415
+ <div class="seal" aria-hidden="true">
416
+ <div class="seal-inner">Build<br>Small<br>Β·<br>2026</div>
417
+ </div>
418
+ </div>
419
+ </header>
420
+
421
+ <!-- intro -->
422
+ <section class="section no-rule intro">
423
+ <div class="section-label caps"><span class="ornament">❋</span> Chapter Zero β€” Why this exists</div>
424
+ <p class="lede">The pace of AI over the last year has been anxiety-inducing. Labs release larger and larger models that do more of the things that make us feel human β€” writing, drawing, speaking, coding. No wonder more than half of us think the risks of AI outweigh the benefits.</p>
425
+ <div class="pull">We're sponsoring a hackathon to take things back to how they felt in 2021 β€” when models were small enough to tinker with, and the vibe was fun and hopeful about how this technology could improve our lives.</div>
426
+ <p style="margin-top: 14px;">This hackathon is different. Rather than using a giant LLM to ship yet another B2B SaaS, we want you to <b>think small</b>. Armed with only <b>32 billion parameters</b>, solve a problem someone you know is facing β€” or build something whimsical.</p>
427
+ </section>
428
+
429
+ <!-- two tracks -->
430
+ <section class="section">
431
+ <div class="section-label caps"><span class="ornament">❋</span> Two Tracks Β· Pick your trail</div>
432
+ <h2>Choose your own adventure.</h2>
433
+
434
+ <div class="tracks">
435
+ <div class="track">
436
+ <span class="chap">Chapter One</span>
437
+ <div class="ico">🏑</div>
438
+ <h3>Backyard AI</h3>
439
+ <p>Solve a real problem for someone you actually know. Pick a person β€” a neighbor, a parent, a small-business owner on your street β€” and build something that makes their day measurably better.</p>
440
+ <div class="judged">
441
+ <span class="caps">Judged on</span>
442
+ <ul>
443
+ <li>Problem is specific and real</li>
444
+ <li>The person actually <em>used it</em></li>
445
+ <li>Honest fit between problem and the small-model constraint</li>
446
+ <li>Polish of the Gradio app</li>
447
+ </ul>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="track">
452
+ <span class="chap">Chapter Two</span>
453
+ <div class="ico">πŸ„</div>
454
+ <h3>An Adventure in Thousand&nbsp;Token Wood</h3>
455
+ <p>Build something delightful that wouldn't exist without AI. Wander somewhere weirder. A toy, a tiny game, a strange interactive story, an art experiment that surprises you. The AI should be doing the fun thing β€” not just helping you build it. Strange is good. Joyful is the bar.</p>
456
+ <div class="judged">
457
+ <span class="caps">Judged on</span>
458
+ <ul>
459
+ <li>Genuinely delightful (would you show a friend?)</li>
460
+ <li>AI is load-bearing for the experience</li>
461
+ <li>Originality of concept</li>
462
+ <li>Polish of the Gradio app</li>
463
+ </ul>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </section>
468
+
469
+ <!-- constraints -->
470
+ <section class="section">
471
+ <div class="section-label caps"><span class="ornament">❋</span> The Constraints β€” Three rules of the trail</div>
472
+ <h2>Pack light.</h2>
473
+
474
+ <div class="constraints">
475
+ <div class="constraint">
476
+ <div class="num">1</div>
477
+ <h3>Small Models Only</h3>
478
+ <p>Total parameters must be <b>≀ 32 billion</b>. The model fits on a laptop. So should your ambition.</p>
479
+ </div>
480
+ <div class="constraint">
481
+ <div class="num">2</div>
482
+ <h3>Built on Gradio</h3>
483
+ <p>Your app must be a <b>Gradio app</b>, hosted as a <b>Hugging Face Space</b>. That's the canvas.</p>
484
+ </div>
485
+ <div class="constraint">
486
+ <div class="num">3</div>
487
+ <h3>Show, Don't Tell</h3>
488
+ <p>A short <b>demo video</b> and a <b>social-media post</b> are part of the submission. Make it sing.</p>
489
+ </div>
490
+ </div>
491
+ </section>
492
+
493
+ <!-- bonus quests -->
494
+ <section class="section">
495
+ <div class="section-label caps"><span class="ornament">❋</span> Bonus Quests Β· Six earnable merit badges</div>
496
+ <h2>Stack 'em on your sash.</h2>
497
+ <p class="lede" style="margin-top: 6px;">None required. Each one grants extra points for your submission. Hover a patch to see it lift.</p>
498
+
499
+ <div class="sash">
500
+ <div class="badges">
501
+ <div class="badge">
502
+ <div class="patch sun">πŸ”Œ</div>
503
+ <div class="meta">
504
+ <div class="name">Off the Grid</div>
505
+ <div class="desc">No cloud APIs. The whole thing runs on the model in front of you.</div>
506
+ <span class="tag">Local-first</span>
507
+ </div>
508
+ </div>
509
+ <div class="badge">
510
+ <div class="patch moss">🎯</div>
511
+ <div class="meta">
512
+ <div class="name">Well-Tuned</div>
513
+ <div class="desc">Your app uses a fine-tuned model you've published on Hugging Face.</div>
514
+ <span class="tag">Fine-tuned</span>
515
+ </div>
516
+ </div>
517
+ <div class="badge">
518
+ <div class="patch rust">🎨</div>
519
+ <div class="meta">
520
+ <div class="name">Off-Brand</div>
521
+ <div class="desc">A custom frontend that pushes past the default Gradio look.</div>
522
+ <span class="tag">Custom UI</span>
523
+ </div>
524
+ </div>
525
+ <div class="badge">
526
+ <div class="patch copper">πŸ¦™</div>
527
+ <div class="meta">
528
+ <div class="name">Llama Champion</div>
529
+ <div class="desc">Your model runs through the llama.cpp runtime.</div>
530
+ <span class="tag">llama.cpp</span>
531
+ </div>
532
+ </div>
533
+ <div class="badge">
534
+ <div class="patch cream">πŸ“‘</div>
535
+ <div class="meta">
536
+ <div class="name">Sharing is Caring</div>
537
+ <div class="desc">You shared your agent trace on the Hub for everyone to learn from.</div>
538
+ <span class="tag">Open trace</span>
539
+ </div>
540
+ </div>
541
+ <div class="badge">
542
+ <div class="patch olive">πŸ““</div>
543
+ <div class="meta">
544
+ <div class="name">Field Notes</div>
545
+ <div class="desc">You wrote a blog post or report about what you built and what you learned.</div>
546
+ <span class="tag tentative">Tentative</span>
547
+ </div>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- how to participate -->
554
+ <section class="section">
555
+ <div class="section-label caps"><span class="ornament">❋</span> How to Participate</div>
556
+ <h2>Four steps. No application. No waitlist.</h2>
557
+
558
+ <div class="ledger">
559
+ <div class="row">
560
+ <div class="n">I</div>
561
+ <div class="body">
562
+ <div class="name">Register</div>
563
+ <div class="desc">Join this org on Hugging Face. No application, no waitlist β€” just walk in.</div>
564
+ </div>
565
+ </div>
566
+ <div class="row">
567
+ <div class="n">II</div>
568
+ <div class="body">
569
+ <div class="name">Find your people</div>
570
+ <div class="desc">Hop into the Gradio Discord. Office hours, AMAs, and teammates live there.</div>
571
+ </div>
572
+ </div>
573
+ <div class="row">
574
+ <div class="n">III</div>
575
+ <div class="body">
576
+ <div class="name">Build &amp; ship</div>
577
+ <div class="desc">Build your Gradio app and host it as a Space under this org.</div>
578
+ </div>
579
+ </div>
580
+ <div class="row">
581
+ <div class="n">IV</div>
582
+ <div class="body">
583
+ <div class="name">Submit</div>
584
+ <div class="desc">Drop your Space link, a short demo video, and a social post by the deadline.</div>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </section>
589
+
590
+ <!-- resources -->
591
+ <section class="section">
592
+ <div class="section-label caps"><span class="ornament">❋</span> How to Get Started Β· Tools for the trail</div>
593
+ <h2>Useful trailheads.</h2>
594
+ <div class="resources">
595
+ <a href="#"><span>πŸ““ &nbsp;ML Intern Agent Guide β€” fine-tune without code</span><span class="arr">β†’</span></a>
596
+ <a href="#"><span>πŸ“š &nbsp;Gradio Guides</span><span class="arr">β†’</span></a>
597
+ <a href="#"><span>πŸ›  &nbsp;Gradio's gr.Server β€” fully custom UIs</span><span class="arr">β†’</span></a>
598
+ <a href="#"><span>πŸ¦™ &nbsp;Getting Started with Llama.cpp on Spaces</span><span class="arr">β†’</span></a>
599
+ </div>
600
+ </section>
601
+
602
+ <!-- timeline / map -->
603
+ <section class="section">
604
+ <div class="section-label caps"><span class="ornament">❋</span> Timeline Β· A hand-drawn map</div>
605
+ <h2>Two weekends in the woods.</h2>
606
+
607
+ <div class="map">
608
+ <div class="map-head">
609
+ <span class="caps muted">Trail map</span>
610
+ <span class="compass" aria-hidden="true">✦ N ✦</span>
611
+ </div>
612
+ <div class="stops">
613
+ <div class="stop">
614
+ <div class="pin">I</div>
615
+ <div class="when">Week of [date TBD]</div>
616
+ <div class="what"><b>Registration opens.</b><span class="note">Sign up, join Discord, start sketching.</span></div>
617
+ </div>
618
+ <div class="stop">
619
+ <div class="pin">II</div>
620
+ <div class="when">[date TBD]</div>
621
+ <div class="what"><b>Hack window begins.</b><span class="note">Two weekends to build, ship, and demo.</span></div>
622
+ </div>
623
+ <div class="stop">
624
+ <div class="pin">III</div>
625
+ <div class="when">Mid-window</div>
626
+ <div class="what"><b>Live AMA + office hours.</b><span class="note">Ask the Gradio team anything.</span></div>
627
+ </div>
628
+ <div class="stop">
629
+ <div class="pin">IV</div>
630
+ <div class="when">[date TBD]</div>
631
+ <div class="what"><b>Submissions close.</b><span class="note">Space, demo video, social post locked in.</span></div>
632
+ </div>
633
+ <div class="stop">
634
+ <div class="pin">V</div>
635
+ <div class="when">[date TBD]</div>
636
+ <div class="what"><b>Winners announced.</b><span class="note">Per track, plus bonus-quest leaderboard.</span></div>
637
+ </div>
638
+ </div>
639
+ </div>
640
+ </section>
641
+
642
+ <!-- final cta -->
643
+ <div class="cta">
644
+ <h2>Build something <em>small</em>.</h2>
645
+ <p>Two weekends. Two tracks. The model on your laptop. The neighbor next door.</p>
646
+ <a href="#" class="button">β†’ &nbsp; Register on Hugging Face &nbsp; ←</a>
647
+ <span class="placeholder">Placeholder link for now</span>
648
+ <div class="links">
649
+ <a href="#">Join the community</a> Β· <a href="#">Gradio docs</a> Β· <a href="#">Discord</a>
650
+ </div>
651
+ </div>
652
 
653
  </div>