Hugging Face's logo

Spaces:
build-small-hackathon
/
README
Running

App Files Community
7
README / README.md
ysharma's picture
ysharma HF Staff
NVIDIA Nemotron awarded to Figment; 6 sponsor prizes now pending; 23 winners
8521d91 verified
preview code
|
Raw
History Blame Contribute Delete
55.9 kB
---
title: README
emoji: 🏃
colorFrom: green
colorTo: indigo
sdk: static
pinned: false
thumbnail: >-
https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/-lbDR4njKiyD17zNsO3GG.png
---
<style>
/* ---------- scoped to .bsh so it can't leak into the README around it ---------- */
.bsh {
--cream: #f6efe1;
--paper: #fbf6e8;
--walnut: #5a3a22;
--bark: #3a2516;
--ink: #2a2118;
--copper:#c98a3c;
--rust: #8a4a2b;
--moss: #5a6b3a;
--sage: #7a8c4a;
--sun: #e6a85c;
--mush: #b8553a;
--line: #8a6a48;
/* --- responsive helpers (no media queries) --- */
/* Fluid horizontal padding: 22px on narrow, up to 44px on wide */
--gutter: clamp(22px, 4.5vw, 44px);
/* 0 below 760px, 1 at and above. Used to hide the seal. */
--wide: clamp(0px, (100vw - 760px) * 9999, 1px);
max-width: 1000px;
margin: 0 auto;
padding: 0;
color: var(--ink);
font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
font-size: 16px;
line-height: 1.55;
background:
radial-gradient(ellipse at 20% 10%, rgba(201,138,60,0.08), transparent 50%),
radial-gradient(ellipse at 80% 90%, rgba(90,107,58,0.08), transparent 50%),
repeating-linear-gradient(0deg, rgba(138,106,72,0.025) 0 1px, transparent 1px 3px),
var(--cream);
border: 2px solid var(--walnut);
border-radius: 14px;
box-shadow:
inset 0 0 0 1px var(--cream),
inset 0 0 0 6px var(--walnut),
inset 0 0 0 8px var(--cream),
inset 0 0 0 9px var(--copper),
0 6px 24px rgba(58,37,22,0.18);
overflow: hidden;
}
.bsh * { box-sizing: border-box; }
.bsh .pad { padding: 36px var(--gutter); }
/* ---------- type ---------- */
.bsh h1, .bsh h2, .bsh h3 { font-family: Georgia, "Iowan Old Style", serif; color: var(--bark); margin: 0; letter-spacing: -0.01em; }
/* h1: fluid between 40px and 56px */
.bsh h1 { font-size: clamp(40px, 7vw, 56px); line-height: 0.95; font-weight: 700; }
.bsh h2 { font-size: 28px; line-height: 1.1; font-weight: 700; }
.bsh h3 { font-size: 18px; line-height: 1.2; font-weight: 700; }
.bsh p { margin: 0 0 12px 0; }
.bsh .small { font-size: 13px; }
.bsh .mono { font-family: "SFMono-Regular", Menlo, Consolas, monospace; }
.bsh .caps { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 700; }
.bsh .muted { color: var(--walnut); opacity: 0.78; }
.bsh a { color: var(--rust); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.bsh a:hover { color: var(--bark); text-decoration-style: solid; }
/* ---------- top strip ---------- */
.bsh .strip {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 14px var(--gutter);
background: var(--bark);
color: var(--cream);
border-bottom: 1px dashed rgba(246,239,225,0.35);
flex-wrap: wrap;
}
.bsh .strip .who { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.bsh .strip .who span.caps { color: var(--sun); letter-spacing: 0.06em; }
.bsh .strip .dates { font-family: Georgia, serif; font-style: italic; font-size: 14px; color: var(--cream); }
.bsh .strip .dates b { color: var(--sun); font-style: normal; font-weight: 700; letter-spacing: 0.02em; }
/* ---------- sponsors section ---------- */
.bsh .sponsors {
padding: 36px var(--gutter) 30px;
/* No solid background here — leaving it transparent lets the parent
.bsh inset box-shadow frame (copper + walnut) remain visible through
this section. A subtle radial highlight is still painted on top. */
background:
radial-gradient(ellipse at 50% 0%, rgba(201,138,60,0.10), transparent 60%);
border-bottom: 1px solid rgba(138,106,72,0.25);
position: relative;
}
.bsh .sponsors::before {
content: "✦ ✦ ✦";
position: absolute;
top: 14px; left: 50%; transform: translateX(-50%);
color: var(--copper);
letter-spacing: 0.6em;
font-size: 10px;
opacity: 0.6;
}
.bsh .sponsors .sponsor-head {
text-align: center;
margin-bottom: 22px;
}
.bsh .sponsors .sponsor-head .caps {
color: var(--moss);
display: inline-flex; align-items: center; gap: 10px;
}
.bsh .sponsors .sponsor-head .caps::before,
.bsh .sponsors .sponsor-head .caps::after {
content: "❋"; color: var(--copper); font-size: 12px;
}
.bsh .sponsors .sponsor-head h2 {
margin-top: 8px;
font-size: clamp(24px, 4vw, 32px);
}
.bsh .sponsors .sponsor-head h2 em { font-style: italic; color: var(--rust); }
.bsh .sponsors .sponsor-head p {
margin-top: 6px;
font-size: 14px;
color: var(--walnut);
font-style: italic;
}
.bsh .tier-label {
display: flex; align-items: center; gap: 14px;
color: var(--rust); font-weight: 700;
margin: 22px 0 14px;
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
}
.bsh .tier-label::before, .bsh .tier-label::after {
content: ""; flex: 1; height: 0;
border-top: 1px dashed var(--walnut);
opacity: 0.5;
}
/* host contribution card — Hugging Face's own stake in the pool */
.bsh .host-card {
background: var(--paper);
border: 2px solid var(--walnut);
border-radius: 12px;
padding: 18px 22px;
display: flex; align-items: center; gap: 20px;
flex-wrap: wrap;
box-shadow:
inset 0 0 0 1px var(--paper),
inset 0 0 0 4px var(--moss),
inset 0 0 0 5px var(--paper),
0 4px 0 rgba(58,37,22,0.14);
transition: transform 0.18s ease;
}
.bsh .host-card:hover { transform: translateY(-2px); }
.bsh .host-card .logo-slot-host {
width: 140px; height: 90px; flex-shrink: 0;
background: var(--cream);
border: 1.5px dashed var(--walnut);
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
padding: 10px;
}
.bsh .host-card .logo-slot-host img {
max-height: 70px; max-width: 100%; object-fit: contain;
}
.bsh .host-card .meta { flex: 1; min-width: 240px; }
.bsh .host-card .meta .name {
font-weight: 700; color: var(--bark); font-size: 17px; line-height: 1.2;
}
.bsh .host-card .meta .desc {
font-size: 14px; color: var(--ink); line-height: 1.5; margin-top: 4px;
}
.bsh .host-card .meta .desc b { color: var(--rust); }
/* anchor cards — always one row, cards scale fluidly with viewport */
.bsh .anchors {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(8px, 1.6vw, 20px);
}
.bsh .anchor-card {
background: var(--paper);
border: 2px solid var(--walnut);
border-radius: 12px;
padding: clamp(16px, 2.6vw, 28px) clamp(8px, 1.9vw, 22px) clamp(10px, 2vw, 22px);
position: relative;
min-width: 0;
box-shadow:
inset 0 0 0 1px var(--paper),
inset 0 0 0 4px var(--copper),
inset 0 0 0 5px var(--paper),
0 4px 0 rgba(58,37,22,0.14);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bsh .anchor-card:hover {
transform: translateY(-3px);
box-shadow:
inset 0 0 0 1px var(--paper),
inset 0 0 0 4px var(--rust),
inset 0 0 0 5px var(--paper),
0 8px 0 rgba(58,37,22,0.18);
}
.bsh .anchor-card .logo-slot {
background: var(--cream);
border: 1.5px dashed var(--walnut);
border-radius: 8px;
height: clamp(56px, 8.5vw, 110px);
display: flex; align-items: center; justify-content: center;
margin-bottom: clamp(8px, 1.5vw, 16px);
padding: clamp(6px, 1.2vw, 14px);
position: relative;
}
.bsh .anchor-card .logo-slot img {
max-height: clamp(38px, 6.5vw, 78px);
max-width: 100%;
object-fit: contain;
}
.bsh .anchor-card .logo-slot .logo-placeholder {
color: var(--walnut);
opacity: 0.45;
font-size: clamp(7px, 0.9vw, 11px);
letter-spacing: clamp(0.08em, 0.4vw, 0.22em);
text-transform: uppercase;
font-weight: 700;
text-align: center;
}
.bsh .anchor-card h3 {
font-size: clamp(15px, 1.9vw, 22px);
margin-bottom: 10px;
color: var(--bark);
text-align: center;
}
.bsh .anchor-card .contribution {
font-size: clamp(11px, 1.25vw, 14px);
line-height: 1.55;
color: var(--ink);
margin-bottom: 0;
text-align: center;
overflow-wrap: break-word;
}
.bsh .anchor-card .contribution b {
color: var(--rust);
font-size: clamp(12px, 1.45vw, 16px);
display: inline;
}
/* supporter row */
.bsh .supporters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 14px;
}
.bsh .supporter-card {
background: var(--paper);
border: 1.5px dashed var(--walnut);
border-radius: 8px;
padding: 14px 14px;
display: flex; align-items: center; gap: 14px;
transition: background 0.15s ease, transform 0.15s ease;
}
.bsh .supporter-card:hover {
background: var(--cream);
transform: translateY(-2px);
}
.bsh .supporter-card .logo-slot-sm {
width: 110px; height: 88px; flex-shrink: 0;
background: var(--cream);
border: 1px dashed var(--walnut);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
padding: 6px;
}
.bsh .supporter-card .logo-slot-sm img {
max-height: 72px; max-width: 100%; object-fit: contain;
}
.bsh .supporter-card .logo-slot-sm .logo-placeholder {
font-size: 9px; color: var(--walnut); opacity: 0.5;
letter-spacing: 0.16em; text-transform: uppercase;
text-align: center; line-height: 1.2; font-weight: 700;
}
.bsh .supporter-card .meta { flex: 1; min-width: 0; }
.bsh .supporter-card .meta .name {
font-weight: 700; color: var(--bark); font-size: 15px; line-height: 1.2;
}
.bsh .supporter-card .meta .desc {
font-size: 13px; color: var(--ink); line-height: 1.45; margin-top: 4px;
}
.bsh .sponsor-total {
margin-top: 22px;
text-align: center;
padding: 14px 16px;
background: var(--paper);
border: 1.5px solid var(--walnut);
border-radius: 8px;
font-family: Georgia, serif;
}
.bsh .sponsor-total .total-num {
font-size: 28px; font-weight: 700; color: var(--rust);
display: inline-block;
}
.bsh .sponsor-total .total-label {
font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--moss); font-weight: 700; display: block; margin-bottom: 4px;
}
.bsh .sponsor-total .total-note {
font-size: 13px; color: var(--walnut); font-style: italic; margin-left: 8px;
}
/* ---------- status callout (post-event: judging underway) ---------- */
.bsh .must-register {
margin: 0 var(--gutter);
margin-top: 16px;
padding: 26px 28px;
background:
repeating-linear-gradient(135deg, rgba(58,37,22,0.04) 0 10px, transparent 10px 20px),
linear-gradient(180deg, #f3c790 0%, #e6a85c 100%);
color: var(--bark);
border: 2px solid var(--bark);
border-radius: 12px;
box-shadow:
inset 0 0 0 1px #f3c790,
inset 0 0 0 4px var(--bark),
inset 0 0 0 5px #f3c790,
0 6px 0 rgba(58,37,22,0.2);
position: relative;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.bsh .must-register::before {
content: "⚑";
position: absolute;
top: -14px; left: 22px;
background: var(--bark); color: var(--sun);
width: 32px; height: 32px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
border: 3px solid var(--cream);
box-shadow: 0 2px 0 rgba(58,37,22,0.2);
}
.bsh .must-register .mr-text {
flex: 1; min-width: 240px;
}
.bsh .must-register .mr-headline {
font-family: Georgia, serif;
font-size: 19px;
font-weight: 700;
color: var(--bark);
line-height: 1.25;
margin-bottom: 6px;
}
.bsh .must-register .mr-headline em {
font-style: italic;
color: var(--rust);
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: var(--rust);
text-underline-offset: 4px;
}
.bsh .must-register .mr-sub {
font-size: 14px;
color: var(--bark);
opacity: 0.85;
line-height: 1.45;
}
.bsh .must-register .mr-sub b {
font-weight: 700;
color: var(--bark);
opacity: 1;
}
.bsh .must-register .mr-button {
display: inline-block;
padding: 14px 24px;
background: var(--bark);
color: var(--sun);
border: 2px solid var(--bark);
border-radius: 999px;
font-family: Georgia, serif;
font-weight: 700;
font-size: 15px;
text-decoration: none;
letter-spacing: 0.04em;
box-shadow: 0 4px 0 rgba(0,0,0,0.22);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.bsh .must-register .mr-button:hover {
background: var(--rust);
border-color: var(--rust);
color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0,0,0,0.26);
text-decoration: none;
}
/* ---------- header ---------- */
.bsh .header { padding: 44px var(--gutter) 28px; position: relative; }
.bsh .header::before {
content: "";
position: absolute; left: var(--gutter); right: var(--gutter); bottom: 18px; height: 1px;
background: var(--walnut);
box-shadow: 0 4px 0 -1px var(--cream), 0 5px 0 -1px var(--walnut);
}
.bsh .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--rust); font-weight: 700; }
.bsh .eyebrow .dingbat { font-size: 16px; opacity: 0.7; }
.bsh .title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.bsh .title-row h1 em { font-style: italic; color: var(--rust); }
/* Seal: visible above 760px, collapsed to a 0×0 point below it.
width/height/border collapse together so the dashed border doesn't
leave a stray dot, and overflow:hidden clips the absolute pseudos. */
.bsh .seal {
width: clamp(0px, (100vw - 760px) * 9999, 110px);
height: clamp(0px, (100vw - 760px) * 9999, 110px);
flex-shrink: 0;
border-radius: 50%;
background: var(--paper);
border: clamp(0px, (100vw - 760px) * 9999, 2px) dashed var(--walnut);
box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px var(--copper);
display: flex; align-items: center; justify-content: center;
color: var(--bark);
text-align: center;
font-family: Georgia, serif;
font-size: 11px;
line-height: 1.15;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
transform: rotate(-6deg);
position: relative;
overflow: hidden;
}
.bsh .seal::before {
content: "✦"; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
}
.bsh .seal::after {
content: "✦"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--copper);
}
.bsh .seal .seal-inner { padding: 0 8px; }
/* ---------- section header ---------- */
.bsh .section { padding: 40px var(--gutter); border-top: 1px solid rgba(138,106,72,0.25); position: relative; }
.bsh .section.no-rule { border-top: none; }
.bsh .section-label {
display: inline-flex; align-items: center; gap: 10px;
color: var(--moss); font-weight: 700;
margin-bottom: 14px;
}
.bsh .section-label .ornament { color: var(--copper); }
.bsh .section h2 { margin-bottom: 8px; }
.bsh .lede { font-size: 17px; line-height: 1.6; max-width: 68ch; color: var(--bark); }
/* ---------- intro pull ---------- */
.bsh .intro p + p { margin-top: 12px; }
.bsh .intro .pull {
border-left: 3px double var(--copper);
padding: 4px 0 4px 16px;
margin: 18px 0 6px;
font-style: italic;
color: var(--bark);
font-size: 17px;
}
/* ---------- two-track grid ---------- */
/* auto-fit + min(100%, threshold) collapses to 1 column when the row can't
hold two tracks at the threshold width. */
.bsh .tracks {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
gap: 22px; margin-top: 18px;
}
.bsh .track {
background: var(--paper);
border: 1.5px dashed var(--walnut);
border-radius: 10px;
padding: 24px 22px 22px;
position: relative;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bsh .track:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(58,37,22,0.12);
}
.bsh .track .chap {
position: absolute; top: -12px; left: 18px;
background: var(--cream); color: var(--moss);
padding: 2px 10px; border: 1px solid var(--moss); border-radius: 999px;
font-size: 10px; letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
}
.bsh .track .ico {
font-size: 36px; line-height: 1; margin-bottom: 10px;
filter: drop-shadow(0 2px 0 rgba(58,37,22,0.08));
}
.bsh .track h3 {
font-size: 22px; line-height: 1.15; margin-bottom: 8px; color: var(--bark);
}
.bsh .track p { font-size: 15px; line-height: 1.55; color: var(--ink); margin-bottom: 14px; }
.bsh .track .judged { border-top: 1px dotted var(--line); padding-top: 12px; margin-top: 4px; }
.bsh .track .judged .caps { color: var(--rust); margin-bottom: 8px; display: block; }
.bsh .track ul { list-style: none; margin: 0; padding: 0; }
.bsh .track ul li { font-size: 14px; line-height: 1.5; padding-left: 20px; position: relative; margin-bottom: 6px; color: var(--bark); }
.bsh .track ul li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--copper); font-size: 12px; }
/* ---------- constraints ---------- */
.bsh .constraints {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
gap: 16px; margin-top: 18px;
}
.bsh .constraint {
border: 1.5px solid var(--walnut);
border-radius: 8px;
padding: 20px 18px 18px;
background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
position: relative;
}
.bsh .constraint .num {
position: absolute; top: -16px; left: 16px;
width: 32px; height: 32px; border-radius: 50%;
background: var(--bark); color: var(--sun);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif; font-weight: 700; font-size: 16px;
border: 3px solid var(--cream);
}
.bsh .constraint h3 { font-size: 16px; margin-bottom: 6px; color: var(--bark); }
.bsh .constraint p { font-size: 14px; line-height: 1.5; margin: 0; color: var(--ink); }
.bsh .constraint p b { color: var(--rust); }
/* ---------- merit badges ---------- */
.bsh .sash {
margin-top: 22px;
background:
repeating-linear-gradient(135deg, rgba(58,37,22,0.04) 0 8px, transparent 8px 16px),
var(--paper);
border: 1.5px dashed var(--walnut);
border-radius: 12px;
padding: 28px 26px 26px;
position: relative;
}
.bsh .sash::before, .bsh .sash::after {
content: ""; position: absolute; left: 50%; transform: translateX(-50%);
width: 60px; height: 12px;
background:
linear-gradient(90deg, transparent 0 6px, var(--copper) 6px 100%) no-repeat,
linear-gradient(90deg, var(--copper) 0 100%) no-repeat;
background-size: 100% 2px, 100% 100%;
background-position: 0 0, 0 0;
}
.bsh .sash::before { top: -1px; background: var(--copper); border-radius: 0 0 4px 4px; height: 6px; width: 80px; }
.bsh .sash::after { bottom: -1px; background: var(--copper); border-radius: 4px 4px 0 0; height: 6px; width: 80px; }
.bsh .badges {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 24px 20px;
margin-top: 8px;
}
.bsh .badge {
display: flex; gap: 14px; align-items: flex-start;
padding: 8px;
border-radius: 10px;
transition: background 0.18s ease;
}
.bsh .badge:hover { background: rgba(201,138,60,0.10); }
.bsh .badge .patch {
width: 76px; height: 76px; flex-shrink: 0;
border-radius: 50%;
background: var(--cream);
border: 2px dashed var(--walnut);
box-shadow:
inset 0 0 0 5px var(--cream),
inset 0 0 0 6px var(--copper),
0 3px 0 rgba(58,37,22,0.12);
display: flex; align-items: center; justify-content: center;
font-size: 30px;
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
}
.bsh .badge:hover .patch {
transform: rotate(-6deg) scale(1.04);
box-shadow:
inset 0 0 0 5px var(--cream),
inset 0 0 0 6px var(--rust),
0 5px 0 rgba(58,37,22,0.18);
}
.bsh .badge .patch.moss { background: #eaeed8; }
.bsh .badge .patch.copper { background: #f6e3c4; }
.bsh .badge .patch.rust { background: #f1d6c7; }
.bsh .badge .patch.sun { background: #f7e8c6; }
.bsh .badge .patch.cream { background: #f3e8d0; }
.bsh .badge .patch.olive { background: #e8e7c8; }
.bsh .badge .meta { flex: 1; min-width: 0; padding-top: 4px; }
.bsh .badge .meta .name { font-weight: 700; font-size: 15px; color: var(--bark); margin-bottom: 2px; }
.bsh .badge .meta .desc { font-size: 13px; line-height: 1.45; color: var(--ink); }
.bsh .badge .meta .tag {
display: inline-block; margin-top: 6px;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
color: var(--moss);
}
.bsh .badge .meta .tag.tentative { color: var(--rust); }
/* ---------- awards ---------- */
.bsh .awards-note {
font-size: 14px;
color: var(--walnut);
font-style: italic;
margin-top: 4px;
}
.bsh .podiums {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 22px;
}
.bsh .podium {
background: var(--paper);
border: 2px solid var(--walnut);
border-radius: 12px;
padding: 24px 22px 16px;
position: relative;
box-shadow:
inset 0 0 0 1px var(--paper),
inset 0 0 0 4px var(--copper),
inset 0 0 0 5px var(--paper),
0 4px 0 rgba(58,37,22,0.14);
transition: transform 0.18s ease;
}
.bsh .podium:hover { transform: translateY(-2px); }
.bsh .podium .podium-head {
display: flex; align-items: center; gap: 12px;
margin-bottom: 6px;
}
.bsh .podium .podium-head .ico { font-size: 28px; line-height: 1; }
.bsh .podium .podium-head h3 { font-size: 19px; color: var(--bark); }
.bsh .podium .podium-sub {
font-size: 13px; color: var(--walnut); font-style: italic;
margin-bottom: 12px;
}
.bsh .prize-row {
display: flex; justify-content: space-between; align-items: baseline;
padding: 9px 4px;
border-bottom: 1px dotted var(--line);
}
.bsh .prize-row:last-child { border-bottom: none; }
.bsh .prize-row .place {
font-size: 14px; color: var(--bark); font-weight: 700;
display: flex; gap: 10px; align-items: center;
}
.bsh .prize-row .place .medal {
width: 26px; height: 26px; flex-shrink: 0;
border-radius: 50%;
background: var(--cream);
border: 1.5px solid var(--walnut);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif; font-size: 11px; font-weight: 700; color: var(--bark);
}
.bsh .prize-row.gold .medal { background: var(--sun); border-color: var(--rust); }
.bsh .prize-row .amt {
font-family: Georgia, serif; font-weight: 700;
color: var(--rust); font-size: 16px;
white-space: nowrap;
}
.bsh .community-card {
margin-top: 22px;
background: var(--paper);
border: 2px solid var(--walnut);
border-radius: 12px;
padding: 18px 22px;
display: flex; align-items: center; gap: 18px;
flex-wrap: wrap;
box-shadow:
inset 0 0 0 1px var(--paper),
inset 0 0 0 4px var(--moss),
inset 0 0 0 5px var(--paper),
0 4px 0 rgba(58,37,22,0.14);
}
.bsh .community-card .ico { font-size: 32px; flex-shrink: 0; }
.bsh .community-card .meta { flex: 1; min-width: 220px; }
.bsh .community-card .meta .name { font-weight: 700; color: var(--bark); font-size: 17px; }
.bsh .community-card .meta .desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
.bsh .community-card .amt {
font-family: Georgia, serif; font-weight: 700;
color: var(--rust); font-size: 24px; white-space: nowrap;
}
.bsh .specials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 20px 14px;
margin-top: 6px;
}
.bsh .special-card {
background: var(--paper);
border: 1.5px dashed var(--walnut);
border-radius: 10px;
padding: 18px 16px 14px;
position: relative;
transition: background 0.15s ease, transform 0.15s ease;
}
.bsh .special-card:hover {
background: var(--cream);
transform: translateY(-2px);
border-style: solid;
}
.bsh .special-card .amt-tag {
position: absolute; top: -13px; right: 14px;
background: var(--bark); color: var(--sun);
padding: 3px 12px; border-radius: 999px;
font-family: Georgia, serif; font-weight: 700; font-size: 13px;
border: 2px solid var(--cream);
box-shadow: 0 2px 0 rgba(58,37,22,0.18);
}
.bsh .special-card .name {
font-weight: 700; color: var(--bark); font-size: 15px;
display: flex; align-items: center; gap: 8px;
margin-bottom: 4px;
}
.bsh .special-card .desc { font-size: 13px; line-height: 1.45; color: var(--ink); }
/* ---------- header cta ---------- */
.bsh .header-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.bsh .header-button {
display: inline-block;
padding: 12px 22px;
background: var(--bark);
color: var(--sun);
border: 2px solid var(--bark);
border-radius: 999px;
font-family: Georgia, serif;
font-weight: 700;
font-size: 15px;
text-decoration: none;
letter-spacing: 0.04em;
box-shadow: 0 4px 0 rgba(58,37,22,0.22);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bsh .header-button:hover {
background: var(--rust);
border-color: var(--rust);
color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(58,37,22,0.28);
text-decoration: none;
}
.bsh .header-cta-info {
font-family: Georgia, serif;
font-style: italic;
color: var(--rust);
font-size: 14px;
}
.bsh .header-cta-info b {
font-style: normal;
color: var(--bark);
font-weight: 700;
}
/* ---------- numbered ledger ---------- */
.bsh .ledger {
border: 1px solid var(--walnut);
border-radius: 8px;
overflow: hidden;
background: var(--paper);
margin-top: 18px;
}
.bsh .ledger .row {
display: grid; grid-template-columns: 56px 1fr; align-items: stretch;
border-bottom: 1px dashed rgba(138,106,72,0.45);
}
.bsh .ledger .row:last-child { border-bottom: none; }
.bsh .ledger .row .n {
background: var(--bark); color: var(--sun);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif; font-weight: 700; font-size: 22px;
border-right: 1px dashed rgba(246,239,225,0.3);
}
.bsh .ledger .row:hover .n { background: var(--rust); color: var(--cream); }
.bsh .ledger .row .body { padding: 14px 18px; }
.bsh .ledger .row .body .name { font-weight: 700; color: var(--bark); font-size: 16px; }
.bsh .ledger .row .body .desc { font-size: 14px; color: var(--ink); margin-top: 2px; }
.bsh .ledger .row .body .name .done-tag {
display: inline-block; margin-left: 8px;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
color: var(--cream); background: var(--moss);
padding: 2px 8px; border-radius: 999px;
vertical-align: middle;
}
/* ---------- accordion (post-event recap) ---------- */
.bsh .trail-accordion {
border: 1.5px dashed var(--walnut);
border-radius: 10px;
background: var(--paper);
overflow: hidden;
margin-top: 16px;
}
.bsh .trail-accordion > summary {
list-style: none;
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 16px 20px;
font-family: Georgia, "Iowan Old Style", serif;
font-weight: 700;
font-size: 15px;
color: var(--bark);
user-select: none;
}
.bsh .trail-accordion > summary::-webkit-details-marker { display: none; }
.bsh .trail-accordion > summary:hover { background: var(--cream); }
.bsh .trail-accordion > summary .acc-icon {
font-family: Georgia, serif; font-size: 22px; line-height: 1; color: var(--rust);
transition: transform 0.2s ease; flex-shrink: 0;
}
.bsh .trail-accordion[open] > summary .acc-icon { transform: rotate(45deg); }
.bsh .trail-accordion[open] > summary { border-bottom: 1px dashed rgba(138,106,72,0.45); }
.bsh .trail-accordion .ledger { margin: 18px 20px 20px; }
/* ---------- resources ---------- */
.bsh .resources {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 10px 22px; margin-top: 14px;
}
.bsh .resources a {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border: 1px dashed var(--walnut); border-radius: 6px;
background: var(--paper); text-decoration: none; color: var(--bark);
font-size: 14px; font-weight: 700;
transition: background 0.15s ease, transform 0.15s ease;
}
.bsh .resources a:hover { background: var(--cream); transform: translateX(2px); border-style: solid; }
.bsh .resources a .arr { color: var(--rust); font-family: Georgia, serif; }
/* ---------- timeline / map ---------- */
.bsh .map {
margin-top: 18px;
background:
radial-gradient(circle at 12% 22%, rgba(90,107,58,0.10), transparent 22%),
radial-gradient(circle at 88% 78%, rgba(201,138,60,0.10), transparent 24%),
var(--paper);
border: 1.5px solid var(--walnut);
border-radius: 10px;
padding: 22px 22px 18px;
position: relative;
}
.bsh .map .map-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.bsh .map .map-head .compass { font-size: 22px; color: var(--rust); }
.bsh .stops { position: relative; padding: 6px 0 0; }
.bsh .stops::before {
content: ""; position: absolute; left: 43px; top: 18px; bottom: 18px;
border-left: 2px dashed var(--copper);
}
/* .stop: flex with the Switcher trick on .what so it wraps below pin+when
when the row is narrower than ~500px. Pin stays anchored on the trail. */
.bsh .stop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 14px;
padding: 10px 6px; border-radius: 6px; position: relative;
transition: background 0.15s ease;
}
.bsh .stop:hover { background: rgba(201,138,60,0.08); }
.bsh .stop .pin {
width: 38px; height: 38px; border-radius: 50%;
background: var(--cream);
border: 2px solid var(--walnut);
box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--copper);
display: flex; align-items: center; justify-content: center;
font-family: Georgia, serif; font-weight: 700; color: var(--bark); font-size: 14px;
margin-left: 19px; position: relative; z-index: 1;
flex-shrink: 0;
}
.bsh .stop:hover .pin { background: var(--sun); }
.bsh .stop.stop-done .pin { background: var(--moss); color: var(--cream); border-color: var(--moss); }
.bsh .stop.stop-now .pin { background: var(--sun); border-color: var(--rust); box-shadow: inset 0 0 0 3px var(--cream), inset 0 0 0 4px var(--rust); }
.bsh .stop .when {
flex: 0 1 160px;
font-style: italic; color: var(--rust); font-size: 14px;
}
.bsh .stop .what {
color: var(--bark);
flex-grow: 1;
/* Switcher: when (500px - 100%) is positive (narrow) the basis
blows up and .what wraps to its own line; when negative (wide)
it clamps and .what sits inline. */
flex-basis: calc((500px - 100%) * 999);
min-width: 0;
/* When wrapped (narrow), indent to align with .when (pin margin 19 +
pin 38 + gap 14 = 71). When inline (wide), clamps to 0 — the flex
gap handles spacing. */
padding-left: clamp(0px, (500px - 100%) * 9999, 71px);
}
.bsh .stop .what b { color: var(--bark); font-weight: 700; }
.bsh .stop .what .note { display: block; font-size: 13px; color: var(--ink); opacity: 0.85; }
/* ---------- final cta ---------- */
.bsh .cta {
background:
repeating-linear-gradient(45deg, rgba(58,37,22,0.04) 0 6px, transparent 6px 12px),
linear-gradient(180deg, #2f1f12, var(--bark));
color: var(--cream);
padding: 36px var(--gutter) 40px;
text-align: center;
border-top: 6px double var(--copper);
position: relative;
}
.bsh .cta h2 { color: var(--cream); font-size: clamp(28px, 5vw, 38px); }
.bsh .cta h2 em { color: var(--sun); font-style: italic; }
.bsh .cta p { color: rgba(246,239,225,0.85); font-size: 16px; max-width: 56ch; margin: 10px auto 22px; }
.bsh .cta .button {
display: inline-block; padding: 14px 26px;
background: var(--sun); color: var(--bark);
border: 2px solid var(--sun);
border-radius: 999px;
font-weight: 700; font-size: 16px; text-decoration: none;
letter-spacing: 0.04em;
box-shadow: 0 4px 0 rgba(0,0,0,0.25);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bsh .cta .button:hover {
background: var(--cream); border-color: var(--cream);
transform: translateY(-2px);
box-shadow: 0 6px 0 rgba(0,0,0,0.3);
}
.bsh .cta .links { margin-top: 18px; font-size: 13px; }
.bsh .cta .links a { color: var(--sun); margin: 0 10px; }
.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; }
/* ---------- decorative svg dividers ---------- */
.bsh .ornament-rule {
display: flex; align-items: center; gap: 12px;
color: var(--copper);
margin: 18px 0 22px;
}
.bsh .ornament-rule::before, .bsh .ornament-rule::after {
content: ""; flex: 1; height: 0;
border-top: 1px solid var(--walnut);
border-bottom: 1px solid var(--walnut);
height: 3px;
}
</style>
<div class="bsh">
<!-- banner -->
<div style="padding: 0 11px;">
<img
src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/Z0dKQfn56SAMmjVQTEaA0.png"
alt="Build Small Hackathon — small models, big adventure"
style="display: block; width: 100%; height: auto;"
/>
</div>
<!-- top strip -->
<div class="strip">
<div class="who">
<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>
<span><span class="caps">Anchor Sponsors</span> &nbsp;<b style="color:#f6efe1; font-family:Georgia,serif;">OpenBMB</b> · <b style="color:#f6efe1; font-family:Georgia,serif;">OpenAI</b> · <b style="color:#f6efe1; font-family:Georgia,serif;">NVIDIA</b> · <b style="color:#f6efe1; font-family:Georgia,serif;">Modal</b></span>
<span><span class="caps">Cash &amp; Prizes</span> &nbsp;<span class="mono" style="color:#f6efe1;"><b>$48k+</b></span></span>
</div>
</div>
<!-- status callout: winners announced -->
<div class="must-register">
<div class="mr-text">
<div class="mr-headline">🎉 The winners are <em>in!</em></div>
<div class="mr-sub">The judges have spoken — <b>23 winning projects</b> across both tracks, the sponsor podiums, and the special &amp; community awards are logged now in the <b>Prize Ledger</b> — including the <b>NVIDIA Nemotron</b> GPU, just awarded to <b>Figment</b>. Two sponsor podiums (Modal, OpenAI) — <b>6 prizes</b> — are still being decided; those land <b>next week</b>.</div>
</div>
<a href="https://huggingface.co/spaces/build-small-hackathon/prize-ledger" class="mr-button">→ &nbsp; See the Prize Ledger &nbsp; ←</a>
</div>
<!-- sponsors section -->
<section class="sponsors">
<div class="sponsor-head">
<div class="caps">Our Trail Partners</div>
<h2>Backed by the <em>best in AI.</em></h2>
<p>The folks making this adventure possible — the full roster, locked in.</p>
</div>
<!-- host contribution -->
<div class="tier-label">From Your Hosts</div>
<div class="host-card">
<div class="logo-slot-host">
<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo" />
</div>
<div class="meta">
<div class="name">Hugging Face</div>
<div class="desc"><b>$15,000</b> into the cash prize pool, plus <b>$20</b> in Hugging Face credits for <b>every participant</b>. We're not just hosting the trail — we're packing the provisions too.</div>
</div>
</div>
<!-- anchor sponsors -->
<div class="tier-label">Anchor Sponsors</div>
<div class="anchors">
<div class="anchor-card">
<div class="logo-slot">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/mzMkyXIjLpnnqXOl8Lpk4.png" alt="OpenAI Logo" />
</div>
<p class="contribution"><b>$10,000</b> in cash prizes, plus <b>$100</b> in Codex credits for the first <b>1,000</b> participants.</p>
</div>
<div class="anchor-card">
<div class="logo-slot">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/wYm-DlI9aieKgNaMOyZNG.png" alt="NVIDIA Logo" />
</div>
<p class="contribution">Two <b>RTX 5080 GPUs🔥</b> as physical prizes.</p>
</div>
<div class="anchor-card">
<div class="logo-slot">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/pQinmWtp5Ry-KPqcjPjWQ.png" alt="Modal Logo" />
</div>
<p class="contribution"><b>$250</b> in Modal credits for <b>every participant</b>, plus <b>$20,000</b> in credits for the winners.</p>
</div>
<div class="anchor-card">
<div class="logo-slot">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/yZ9NtM2v-1xdDGVyZIDlP.png" alt="OpenBMB Logo" />
</div>
<p class="contribution"><b>$10,000</b> in special category prizes — split across both tracks for the standout OpenBMB picks.</p>
</div>
</div>
<!-- supporting sponsors -->
<div class="tier-label">Supporting Sponsors</div>
<div class="supporters">
<div class="supporter-card">
<div class="logo-slot-sm">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/6u758uEg9TnK0pOPxYwY-.png" alt="Cohere Logo" />
</div>
<div class="meta">
<div class="name">Cohere</div>
<div class="desc"><b>$5,000</b> in cash prize contribution to the pool.</div>
</div>
</div>
<div class="supporter-card">
<div class="logo-slot-sm">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/bSUIAOKwim9WUud6S2Pxk.png" alt="JetBrains Logo" />
</div>
<div class="meta">
<div class="name">JetBrains</div>
<div class="desc"><b>$5,000</b> in cash prize contribution to the pool.</div>
</div>
</div>
<div class="supporter-card">
<div class="logo-slot-sm">
<img src="https://huggingface.co/proxy/cdn-uploads.huggingface.co/production/uploads/60d2dc1007da9c17c72708f8/ql37h0WxsPtgojRlupqG0.png" alt="Black Forest Labs Logo" />
</div>
<div class="meta">
<div class="name">Black Forest Labs</div>
<div class="desc"><b>$3,000</b> in cash prize contribution to the pool.</div>
</div>
</div>
</div>
<div class="sponsor-total">
<span class="total-label">Total Prize Pool</span>
<span class="total-num">$48,000+</span>
<span class="total-note">in cash &amp; physical prizes across both tracks — plus per-participant credits ($100 Codex · $250 Modal · $20 Hugging Face)</span>
</div>
</section>
<!-- intro -->
<section class="section no-rule intro">
<div class="section-label caps"><span class="ornament">❋</span> Chapter Zero — Why this exists</div>
<p style="margin-top: 14px;">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>
<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>
<p style="margin-top: 14px;">This hackathon is different. Rather than using a giant LLM to ship yet another B2B SaaS, we wanted 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>
</section>
<!-- two tracks -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> Two Tracks · Pick your trail</div>
<h2>Choose your own adventure.</h2>
<div class="tracks">
<div class="track">
<span class="chap">Chapter One</span>
<div class="ico">🏡</div>
<h3>Backyard AI</h3>
<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>
<div class="judged">
<span class="caps">Judged on</span>
<ul>
<li>Problem is specific and real</li>
<li>The person actually <em>used it</em></li>
<li>Honest fit between problem and the small-model constraint</li>
<li>Polish of the Gradio app</li>
</ul>
</div>
</div>
<div class="track">
<span class="chap">Chapter Two</span>
<div class="ico">🍄</div>
<h3>An Adventure in Thousand&nbsp;Token Wood</h3>
<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>
<div class="judged">
<span class="caps">Judged on</span>
<ul>
<li>Genuinely delightful (would you show a friend?)</li>
<li>AI is load-bearing for the experience</li>
<li>Originality of concept</li>
<li>Polish of the Gradio app</li>
</ul>
</div>
</div>
</div>
</section>
<!-- constraints -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> The Constraints — Three rules of the trail</div>
<h2>Pack light.</h2>
<div class="constraints">
<div class="constraint">
<div class="num">1</div>
<h3>Small Models Only</h3>
<p>Total parameters must be <b>≤ 32 billion</b>. The model fits on a laptop. So should your ambition.</p>
</div>
<div class="constraint">
<div class="num">2</div>
<h3>Built on Gradio</h3>
<p>Your app must be a <b>Gradio app</b>, hosted as a <b>Hugging Face Space</b>. That's the canvas.</p>
</div>
<div class="constraint">
<div class="num">3</div>
<h3>Show, Don't Tell</h3>
<p>A short <b>demo video</b> and a <b>social-media post</b> are part of the submission. Make it sing.</p>
</div>
</div>
</section>
<!-- bonus quests -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> Bonus Quests · Six earnable merit badges</div>
<h2>Stack 'em on your sash.</h2>
<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>
<div class="sash">
<div class="badges">
<div class="badge">
<div class="patch sun">🔌</div>
<div class="meta">
<div class="name">Off the Grid</div>
<div class="desc">No cloud APIs. The whole thing runs on the model in front of you.</div>
<span class="tag">Local-first</span>
</div>
</div>
<div class="badge">
<div class="patch moss">🎯</div>
<div class="meta">
<div class="name">Well-Tuned</div>
<div class="desc">Your app uses a fine-tuned model you've published on Hugging Face.</div>
<span class="tag">Fine-tuned</span>
</div>
</div>
<div class="badge">
<div class="patch rust">🎨</div>
<div class="meta">
<div class="name">Off-Brand</div>
<div class="desc">A custom frontend that pushes past the default Gradio look (Hint: see `gr.Server`).</div>
<span class="tag">Custom UI</span>
</div>
</div>
<div class="badge">
<div class="patch copper">🦙</div>
<div class="meta">
<div class="name">Llama Champion</div>
<div class="desc">Your model runs through the llama.cpp runtime.</div>
<span class="tag">llama.cpp</span>
</div>
</div>
<div class="badge">
<div class="patch cream">📡</div>
<div class="meta">
<div class="name">Sharing is Caring</div>
<div class="desc">You shared your agent trace on the Hub for everyone to learn from.</div>
<span class="tag">Open trace</span>
</div>
</div>
<div class="badge">
<div class="patch olive">📓</div>
<div class="meta">
<div class="name">Field Notes</div>
<div class="desc">You wrote a blog post or report about what you built and what you learned.</div>
<span class="tag">Write-up</span>
</div>
</div>
</div>
</div>
</section>
<!-- awards -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> The Awards · What you're competing for</div>
<h2>The trophy cabinet.</h2>
<p class="awards-note">Every submission to a main track competes for that track's podium. Sponsor and special awards are separate categories on top — one great app can take home more than one.</p>
<!-- main tracks -->
<div class="tier-label">Main Track Awards · $18,000</div>
<div class="podiums">
<div class="podium">
<div class="podium-head"><span class="ico">🏡</span><h3>Backyard AI</h3></div>
<div class="podium-sub">Top four submissions on this trail.</div>
<div class="prize-row gold"><span class="place"><span class="medal">1st</span> First Place</span><span class="amt">$4,000</span></div>
<div class="prize-row"><span class="place"><span class="medal">2nd</span> Second Place</span><span class="amt">$2,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">3rd</span> Third Place</span><span class="amt">$1,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">4th</span> Fourth Place</span><span class="amt">$1,000</span></div>
</div>
<div class="podium">
<div class="podium-head"><span class="ico">🍄</span><h3>Thousand Token Wood</h3></div>
<div class="podium-sub">Top four submissions on this trail.</div>
<div class="prize-row gold"><span class="place"><span class="medal">1st</span> First Place</span><span class="amt">$4,000</span></div>
<div class="prize-row"><span class="place"><span class="medal">2nd</span> Second Place</span><span class="amt">$2,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">3rd</span> Third Place</span><span class="amt">$1,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">4th</span> Fourth Place</span><span class="amt">$1,000</span></div>
</div>
</div>
<!-- community choice -->
<div class="community-card">
<span class="ico">🗳️</span>
<div class="meta">
<div class="name">Community Choice — by Hugging Face</div>
<div class="desc">One winner, voted by the community. The app the trail itself loved most.</div>
</div>
<span class="amt">$2,000</span>
</div>
<!-- sponsor awards -->
<div class="tier-label">Sponsor Awards</div>
<div class="podiums">
<div class="podium">
<div class="podium-head"><span class="ico">🏮</span><h3>OpenBMB Awards</h3></div>
<div class="podium-sub">$10,000 total — three prizes <b>in each</b> of the two tracks for the standout OpenBMB picks.</div>
<div class="prize-row gold"><span class="place"><span class="medal">1st</span> First, per track</span><span class="amt">$2,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">2nd</span> Second, per track</span><span class="amt">$1,500</span></div>
<div class="prize-row"><span class="place"><span class="medal">3rd</span> Third, per track</span><span class="amt">$1,000</span></div>
</div>
<div class="podium">
<div class="podium-head"><span class="ico">🌀</span><h3>OpenAI Track</h3></div>
<div class="podium-sub">$10,000 total — OpenAI's own podium across all submissions.</div>
<div class="prize-row gold"><span class="place"><span class="medal">1st</span> First Place</span><span class="amt">$5,000</span></div>
<div class="prize-row"><span class="place"><span class="medal">2nd</span> Second Place</span><span class="amt">$3,000</span></div>
<div class="prize-row"><span class="place"><span class="medal">3rd</span> Third Place</span><span class="amt">$2,000</span></div>
</div>
<div class="podium">
<div class="podium-head"><span class="ico">🟩</span><h3>NVIDIA Nemotron Quest</h3></div>
<div class="podium-sub">A physical GPU for the standout Nemotron build — <b>awarded</b>.</div>
<div class="prize-row gold"><span class="place"><span class="medal">🏆</span> <a href="https://huggingface.co/spaces/build-small-hackathon/figment">Figment</a></span><span class="amt">RTX 5080</span></div>
</div>
<div class="podium">
<div class="podium-head"><span class="ico">🟢</span><h3>Modal Awards</h3></div>
<div class="podium-sub">$20,000 in Modal credits for the top Modal-powered apps.</div>
<div class="prize-row gold"><span class="place"><span class="medal">1st</span> First Place</span><span class="amt">$10,000 credits</span></div>
<div class="prize-row"><span class="place"><span class="medal">2nd</span> Second Place</span><span class="amt">$7,000 credits</span></div>
<div class="prize-row"><span class="place"><span class="medal">3rd</span> Third Place</span><span class="amt">$3,000 credits</span></div>
</div>
</div>
<!-- special awards -->
<div class="tier-label">Special Awards · $8,000</div>
<div class="specials">
<div class="special-card">
<span class="amt-tag">$2,000</span>
<div class="name">🎖️ Bonus Quest Champion</div>
<div class="desc">The most merit badges stacked on a single sash. Collect 'em all.</div>
</div>
<div class="special-card">
<span class="amt-tag">$1,500</span>
<div class="name">🎨 Off-Brand Award</div>
<div class="desc">The best custom UI pushing past the default Gradio look. <code>gr.Server</code> is your friend.</div>
</div>
<div class="special-card">
<span class="amt-tag">$1,500</span>
<div class="name">🐜 Tiny Titan</div>
<div class="desc">The best app built on a genuinely tiny model — think ≤4B parameters.</div>
</div>
<div class="special-card">
<span class="amt-tag">$1,000</span>
<div class="name">🎬 Best Demo</div>
<div class="desc">The full package: great app, great demo video, great social post.</div>
</div>
<div class="special-card">
<span class="amt-tag">$1,000</span>
<div class="name">🤖 Best Agent</div>
<div class="desc">The best agentic app — all under the 32B cap, of course.</div>
</div>
<div class="special-card">
<span class="amt-tag">$1,000</span>
<div class="name">🃏 Judges' Wildcard</div>
<div class="desc">For the entry that's amazing but fits no category. We know you're out there.</div>
</div>
</div>
<div class="sponsor-total">
<span class="total-label">All In</span>
<span class="total-num">$48,000 cash</span>
<span class="total-note">+ two RTX 5080 GPUs + $20,000 in Modal credits — across 29 separate awards</span>
</div>
</section>
<!-- how it worked (collapsed recap) -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> How it worked</div>
<h2>The trail, start to finish.</h2>
<p class="awards-note">Registration and submissions are closed — here's the route every builder followed, kept for the record.</p>
<details class="trail-accordion">
<summary><span class="acc-label">Review the four steps builders took</span><span class="acc-icon">＋</span></summary>
<div class="ledger">
<div class="row">
<div class="n">I</div>
<div class="body">
<div class="name">Register <span class="done-tag">Closed</span></div>
<div class="desc">Registrations closed June 3, 2026. Builders who registered and joined this org were set for the trail.</div>
</div>
</div>
<div class="row">
<div class="n">II</div>
<div class="body">
<div class="name">Find your people</div>
<div class="desc">Builders met teammates, joined the AMAs, and connected with Gradio and HF folks in the Discord.</div>
</div>
</div>
<div class="row">
<div class="n">III</div>
<div class="body">
<div class="name">Build &amp; ship</div>
<div class="desc">Each team built a Gradio app and hosted it as a Space under this org.</div>
</div>
</div>
<div class="row">
<div class="n">IV</div>
<div class="body">
<div class="name">Submit</div>
<div class="desc">Final submissions — a Space link, a short demo video, and a social post — landed by the June 15 deadline.</div>
</div>
</div>
</div>
</details>
</section>
<!-- what happens next -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> Where things stand</div>
<h2>The winners are in.</h2>
<p class="lede" style="margin-top: 6px;">Judging's wrapped and the results are live. Here's what's decided — and the last few prizes still to come.</p>
<div class="constraints">
<div class="constraint">
<div class="num">✓</div>
<h3>Judged</h3>
<p>Gradio, Hugging Face, and our sponsor teams reviewed every eligible submission against each track and prize rubric — verifying parameter caps and entry criteria along the way.</p>
</div>
<div class="constraint">
<div class="num">✓</div>
<h3>Winners announced</h3>
<p><b>23 winning projects</b> — both track podiums, the OpenBMB and community picks, six special awards, and the NVIDIA Nemotron GPU (Figment) — are up now in the <a href="https://huggingface.co/spaces/build-small-hackathon/prize-ledger">Prize Ledger</a>.</p>
</div>
<div class="constraint">
<div class="num">3</div>
<h3>Still being decided</h3>
<p><b>Six more prizes</b> — the <b>Modal</b> and <b>OpenAI</b> podiums — are still in judging. We'll announce those <b>next week</b>.</p>
</div>
</div>
</section>
<!-- resources -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> Tools for the trail</div>
<h2>Useful trailheads.</h2>
<div class="resources">
<a href="https://huggingface.co/proxy/build-small-hackathon-field-guide.hf.space/"><span>📖 &nbsp;The Field Guide — rules, prizes &amp; kit</span><span class="arr">→</span></a>
<a href="https://github.com/huggingface/ml-intern"><span>📓 &nbsp;ML Intern</span><span class="arr">→</span></a>
<a href="https://www.gradio.app/guides/quickstart"><span>📚 &nbsp;Gradio Guides</span><span class="arr">→</span></a>
<a href="https://huggingface.co/blog/introducing-gradio-server"><span>🛠 &nbsp;Gradio's gr.Server — fully custom UIs</span><span class="arr">→</span></a>
<a href="https://github.com/ggml-org/llama.cpp"><span>🦙 &nbsp;Getting Started with Llama.cpp</span><span class="arr">→</span></a>
</div>
</section>
<!-- timeline / map -->
<section class="section">
<div class="section-label caps"><span class="ornament">❋</span> Timeline · A hand-drawn map</div>
<h2>Two weekends in the woods.</h2>
<div class="map">
<div class="map-head">
<span class="caps muted">Trail map</span>
<span class="compass" aria-hidden="true">✦ N ✦</span>
</div>
<div class="stops">
<div class="stop stop-done">
<div class="pin">✓</div>
<div class="when">May 07 – June 3, 2026</div>
<div class="what"><b>Registration window.</b><span class="note">Closed. Sign-ups wrapped June 3.</span></div>
</div>
<div class="stop stop-done">
<div class="pin">✓</div>
<div class="when">June 5, 2026</div>
<div class="what"><b>Hack window began.</b><span class="note">Two weekends to build, ship, and demo.</span></div>
</div>
<div class="stop stop-done">
<div class="pin">✓</div>
<div class="when">Mid-window</div>
<div class="what"><b>Live AMA.</b><span class="note">Sponsors and the Gradio team answered your questions.</span></div>
</div>
<div class="stop stop-done">
<div class="pin">✓</div>
<div class="when">June 15, 2026</div>
<div class="what"><b>Submissions closed.</b><span class="note">Spaces, demo videos, and social posts locked in.</span></div>
</div>
<div class="stop stop-done">
<div class="pin">✓</div>
<div class="when">July 10, 2026</div>
<div class="what"><b>Winners announced.</b><span class="note">23 winning projects went up in the Prize Ledger — track podiums, sponsor &amp; special awards.</span></div>
</div>
<div class="stop stop-now">
<div class="pin">★</div>
<div class="when">Next week</div>
<div class="what"><b>Final sponsor prizes.</b><span class="note">You are here. Modal &amp; OpenAI — 6 prizes still being decided.</span></div>
</div>
</div>
</div>
</section>
<!-- final cta -->
<div class="cta">
<h2>You built something <em>small</em>.</h2>
<p>Two weekends. Two tracks. Hundreds of Spaces shipped on models that fit on a laptop — and 23 of them just took home the win. Thanks for hitting the trail.</p>
<a href="https://huggingface.co/spaces/build-small-hackathon/prize-ledger" class="button">→ &nbsp; See the Prize Ledger &nbsp; ←</a>
<p class="registration_info" style="color: rgba(255,255,255,0.65);">
23 winners announced · 6 sponsor prizes still to come next week.
</p>
<div class="links">
<a href="https://huggingface.co/spaces/build-small-hackathon/prize-ledger">Prize Ledger</a> · <a href="https://huggingface.co/build-small-hackathon/spaces">Submissions</a> · <a href="https://discord.gg/YHECTft87Z">Discord</a> · <a href="https://huggingface.co/proxy/build-small-hackathon-field-guide.hf.space/">Field Guide</a>
</div>
</div>
</div>