Create app.py

app.py

@@ -0,0 +1,922 @@
+"""
+Build Small — Gradio + Hugging Face Hackathon
+Org README Space.
+
+This Space renders the hackathon landing page using gr.HTML().
+Custom CSS strips Gradio's default container so the design renders edge-to-edge.
+"""
+
+import gradio as gr
+
+
+HEAD_HTML = """
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,0..100&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@500;700&display=swap" rel="stylesheet">
+"""
+
+# Override Gradio's default container so the landing page renders edge-to-edge
+CUSTOM_CSS = """
+.gradio-container {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: #F2EAD8 !important;
+}
+.gradio-container > .main, .gradio-container > .wrap, .main, .wrap {
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+}
+.app, .container, .contain {
+    padding: 0 !important;
+    margin: 0 !important;
+    max-width: 100% !important;
+}
+footer { display: none !important; }
+.show-api { display: none !important; }
+.built-with { display: none !important; }
+body { background: #F2EAD8 !important; }
+"""
+
+LANDING_HTML = r"""
+<style>
+  :root {
+    --paper: #F2EAD8;
+    --paper-deep: #E8DEC6;
+    --ink: #1E1A12;
+    --ink-soft: #4A3F2E;
+    --moss: #3D5A3A;
+    --moss-deep: #2A3F28;
+    --ember: #B8501E;
+    --ember-soft: #D67A3F;
+    --gold: #B98C2C;
+    --sage: #8FA689;
+    --twilight: #2C3338;
+    --rule: rgba(30, 26, 18, 0.18);
+  }
+
+  /* Scoped reset for the landing wrapper only */
+  .build-small * { box-sizing: border-box; margin: 0; padding: 0; }
+  .build-small {
+    background: var(--paper);
+    color: var(--ink);
+    font-family: 'EB Garamond', Georgia, serif;
+    font-size: 19px;
+    line-height: 1.55;
+    overflow-x: hidden;
+    background-image:
+      radial-gradient(circle at 20% 10%, rgba(184,80,30,0.04) 0%, transparent 40%),
+      radial-gradient(circle at 80% 90%, rgba(61,90,58,0.05) 0%, transparent 45%),
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.07  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+    width: 100%;
+    min-height: 100vh;
+  }
+  .build-small .display { font-family: 'Fraunces', 'Times New Roman', serif; font-variation-settings: "SOFT" 100, "opsz" 144; }
+  .build-small .hand { font-family: 'Caveat', cursive; }
+
+  /* ========= NAV ========= */
+  .build-small nav {
+    position: sticky; top: 0; z-index: 50;
+    backdrop-filter: blur(8px);
+    background: rgba(242, 234, 216, 0.85);
+    border-bottom: 1px solid var(--rule);
+  }
+  .build-small nav .inner {
+    max-width: 1200px; margin: 0 auto;
+    padding: 18px 32px;
+    display: flex; justify-content: space-between; align-items: center;
+    gap: 24px;
+  }
+  .build-small .brand {
+    font-family: 'Fraunces', serif;
+    font-weight: 600;
+    font-size: 18px;
+    letter-spacing: 0.02em;
+    font-variation-settings: "SOFT" 100;
+  }
+  .build-small .brand .sm { color: var(--ember); font-style: italic; }
+  .build-small nav ul {
+    display: flex; gap: 28px; list-style: none;
+    font-family: 'EB Garamond', serif;
+    font-size: 16px;
+  }
+  .build-small nav a { color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
+  .build-small nav a:hover { color: var(--ember); }
+  .build-small .register-btn {
+    background: var(--ink);
+    color: var(--paper);
+    padding: 10px 22px;
+    border-radius: 999px;
+    font-family: 'Fraunces', serif;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    transition: transform 0.2s, background 0.2s;
+    text-decoration: none;
+  }
+  .build-small .register-btn:hover { background: var(--ember); color: var(--paper); transform: translateY(-1px); }
+
+  /* ========= HERO ========= */
+  .build-small .hero {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 80px 32px 60px;
+    position: relative;
+    text-align: center;
+  }
+  .build-small .hero .kicker {
+    font-family: 'Caveat', cursive;
+    font-size: 26px;
+    color: var(--ember);
+    margin-bottom: 12px;
+    transform: rotate(-1.5deg);
+    display: inline-block;
+  }
+  .build-small .hero h1 {
+    font-family: 'Fraunces', serif;
+    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 600;
+    font-size: clamp(64px, 12vw, 168px);
+    line-height: 0.92;
+    letter-spacing: -0.03em;
+    color: var(--ink);
+    margin: 8px 0 24px;
+  }
+  .build-small .hero h1 em {
+    font-style: italic;
+    color: var(--ember);
+    font-variation-settings: "SOFT" 100, "opsz" 144, "wght" 500;
+  }
+  .build-small .hero .lede {
+    font-size: 22px;
+    line-height: 1.5;
+    color: var(--ink-soft);
+    max-width: 640px;
+    margin: 0 auto 36px;
+  }
+  .build-small .hero .meta-row {
+    display: inline-flex;
+    gap: 32px;
+    align-items: center;
+    padding: 14px 28px;
+    border: 1px solid var(--rule);
+    border-radius: 999px;
+    background: rgba(255,255,255,0.4);
+    font-size: 15px;
+    color: var(--ink-soft);
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .build-small .hero .meta-row .dot { color: var(--ember); }
+  .build-small .hero .meta-row strong { color: var(--ink); font-weight: 500; }
+
+  .build-small .scribble {
+    display: block;
+    margin: 0 auto;
+    width: 120px;
+    color: var(--ember);
+    opacity: 0.6;
+  }
+
+  /* ========= INTRO ========= */
+  .build-small .intro {
+    max-width: 720px;
+    margin: 80px auto;
+    padding: 0 32px;
+    text-align: center;
+  }
+  .build-small .intro h2 {
+    font-family: 'Fraunces', serif;
+    font-variation-settings: "SOFT" 80;
+    font-size: 38px;
+    font-weight: 400;
+    font-style: italic;
+    color: var(--moss-deep);
+    margin-bottom: 24px;
+    line-height: 1.2;
+  }
+  .build-small .intro p {
+    font-size: 19px;
+    color: var(--ink-soft);
+    margin-bottom: 18px;
+  }
+  .build-small .intro p strong { color: var(--ink); font-weight: 600; }
+
+  /* ========= TRACKS ========= */
+  .build-small .tracks {
+    max-width: 1280px;
+    margin: 100px auto 80px;
+    padding: 0 32px;
+  }
+  .build-small .section-label {
+    text-align: center;
+    font-family: 'Caveat', cursive;
+    font-size: 28px;
+    color: var(--ember);
+    margin-bottom: 8px;
+    transform: rotate(-1deg);
+  }
+  .build-small .section-title {
+    text-align: center;
+    font-family: 'Fraunces', serif;
+    font-variation-settings: "SOFT" 100;
+    font-size: 56px;
+    font-weight: 400;
+    line-height: 1;
+    margin-bottom: 60px;
+    color: var(--ink);
+  }
+
+  .build-small .track-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+  }
+  .build-small .track {
+    padding: 56px 48px;
+    position: relative;
+  }
+  .build-small .track:first-child { border-right: 1px solid var(--rule); }
+  .build-small .track .chapter {
+    font-family: 'Caveat', cursive;
+    font-size: 22px;
+    color: var(--ember);
+    margin-bottom: 12px;
+  }
+  .build-small .track .illustration {
+    height: 140px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 24px;
+  }
+  .build-small .track h3 {
+    font-family: 'Fraunces', serif;
+    font-variation-settings: "SOFT" 100, "wght" 500;
+    font-size: 42px;
+    line-height: 1.05;
+    margin-bottom: 18px;
+  }
+  .build-small .track-1 h3 { color: var(--moss-deep); }
+  .build-small .track-2 h3 { color: var(--ember); font-style: italic; }
+  .build-small .track .subtitle {
+    font-family: 'EB Garamond', serif;
+    font-style: italic;
+    font-size: 19px;
+    color: var(--ink-soft);
+    margin-bottom: 28px;
+  }
+  .build-small .track .body { color: var(--ink-soft); margin-bottom: 28px; }
+  .build-small .track .judging {
+    border-top: 1px dashed var(--rule);
+    padding-top: 24px;
+  }
+  .build-small .track .judging-label {
+    font-family: 'Fraunces', serif;
+    font-size: 13px;
+    text-transform: uppercase;
+    letter-spacing: 0.18em;
+    color: var(--ink-soft);
+    margin-bottom: 12px;
+  }
+  .build-small .track .judging ul { list-style: none; }
+  .build-small .track .judging li {
+    padding: 8px 0;
+    font-size: 17px;
+    color: var(--ink);
+    display: flex;
+    gap: 12px;
+  }
+  .build-small .track .judging li::before {
+    content: "✦";
+    color: var(--ember);
+    flex-shrink: 0;
+  }
+  .build-small .track-1 .judging li::before { color: var(--moss); }
+
+  /* ========= RULES ========= */
+  .build-small .rules {
+    max-width: 1080px;
+    margin: 100px auto;
+    padding: 0 32px;
+  }
+  .build-small .rules-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0;
+  }
+  .build-small .rule-card {
+    padding: 36px 28px;
+    text-align: center;
+    border-right: 1px solid var(--rule);
+  }
+  .build-small .rule-card:last-child { border-right: none; }
+  .build-small .rule-card .icon {
+    font-family: 'Fraunces', serif;
+    font-size: 38px;
+    color: var(--ember);
+    margin-bottom: 12px;
+    font-variation-settings: "SOFT" 100;
+    font-style: italic;
+  }
+  .build-small .rule-card h4 {
+    font-family: 'Fraunces', serif;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 8px;
+    font-variation-settings: "SOFT" 100;
+  }
+  .build-small .rule-card p {
+    font-size: 16px;
+    color: var(--ink-soft);
+    line-height: 1.5;
+  }
+  .build-small .rule-card .pending {
+    display: inline-block;
+    margin-top: 8px;
+    font-family: 'Caveat', cursive;
+    font-size: 15px;
+    color: var(--ember);
+  }
+
+  /* ========= HOW IT WORKS (new section, from README) ========= */
+  .build-small .how-it-works {
+    max-width: 1080px;
+    margin: 100px auto;
+    padding: 0 32px;
+  }
+  .build-small .steps {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 24px;
+    margin-top: 16px;
+  }
+  .build-small .step {
+    padding: 32px 24px;
+    border: 1px solid var(--rule);
+    border-radius: 4px;
+    background: rgba(255,255,255,0.35);
+    position: relative;
+  }
+  .build-small .step .num {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    font-variation-settings: "SOFT" 100;
+    font-size: 48px;
+    color: var(--ember);
+    line-height: 1;
+    margin-bottom: 14px;
+  }
+  .build-small .step h4 {
+    font-family: 'Fraunces', serif;
+    font-size: 22px;
+    font-weight: 500;
+    font-variation-settings: "SOFT" 80;
+    margin-bottom: 8px;
+    color: var(--ink);
+  }
+  .build-small .step p {
+    font-size: 16px;
+    color: var(--ink-soft);
+    line-height: 1.5;
+  }
+  .build-small .step p strong { color: var(--ink); font-weight: 600; }
+
+  /* ========= BONUS QUESTS ========= */
+  .build-small .bonus {
+    background: var(--paper-deep);
+    padding: 100px 32px;
+    border-top: 1px solid var(--rule);
+    border-bottom: 1px solid var(--rule);
+    position: relative;
+    overflow: hidden;
+  }
+  .build-small .bonus::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image:
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .build-small .bonus-inner {
+    max-width: 1080px;
+    margin: 0 auto;
+    position: relative;
+  }
+  .build-small .bonus .intro-text {
+    text-align: center;
+    max-width: 580px;
+    margin: 0 auto 50px;
+    color: var(--ink-soft);
+    font-size: 18px;
+  }
+  .build-small .bonus-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 16px;
+  }
+  .build-small .badge {
+    background: var(--paper);
+    border: 1px solid var(--rule);
+    padding: 24px 20px;
+    border-radius: 4px;
+    transition: transform 0.2s, box-shadow 0.2s;
+    position: relative;
+  }
+  .build-small .badge:hover {
+    transform: translateY(-3px) rotate(-0.5deg);
+    box-shadow: 0 12px 30px rgba(30,26,18,0.10);
+  }
+  .build-small .badge .name {
+    font-family: 'Fraunces', serif;
+    font-size: 20px;
+    font-weight: 500;
+    color: var(--ember);
+    margin-bottom: 6px;
+    font-variation-settings: "SOFT" 100;
+    font-style: italic;
+  }
+  .build-small .badge .desc {
+    font-size: 15px;
+    color: var(--ink-soft);
+    line-height: 1.45;
+  }
+  .build-small .badge.tentative::after {
+    content: "tentative";
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    font-family: 'Caveat', cursive;
+    font-size: 13px;
+    color: var(--ember-soft);
+    transform: rotate(8deg);
+  }
+
+  /* ========= TIMELINE ========= */
+  .build-small .timeline-section {
+    max-width: 900px;
+    margin: 100px auto;
+    padding: 0 32px;
+  }
+  .build-small .timeline {
+    position: relative;
+    padding-left: 28px;
+    border-left: 2px dashed var(--rule);
+  }
+  .build-small .milestone {
+    margin-bottom: 36px;
+    position: relative;
+  }
+  .build-small .milestone::before {
+    content: "";
+    position: absolute;
+    left: -36px;
+    top: 8px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--ember);
+    border: 3px solid var(--paper);
+    box-shadow: 0 0 0 1px var(--ember);
+  }
+  .build-small .milestone .date {
+    font-family: 'Caveat', cursive;
+    font-size: 22px;
+    color: var(--ember);
+    margin-bottom: 4px;
+  }
+  .build-small .milestone .title {
+    font-family: 'Fraunces', serif;
+    font-size: 22px;
+    font-weight: 500;
+    margin-bottom: 4px;
+    font-variation-settings: "SOFT" 80;
+  }
+  .build-small .milestone .desc {
+    color: var(--ink-soft);
+    font-size: 17px;
+  }
+
+  /* ========= SUBMIT BLOCK ========= */
+  .build-small .submit {
+    max-width: 1080px;
+    margin: 100px auto;
+    padding: 0 32px;
+  }
+  .build-small .submit-card {
+    background: var(--twilight);
+    color: var(--paper);
+    padding: 80px 60px;
+    border-radius: 8px;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+  }
+  .build-small .submit-card::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(circle at 30% 20%, rgba(184,80,30,0.25), transparent 60%),
+                radial-gradient(circle at 80% 90%, rgba(143,166,137,0.18), transparent 55%);
+  }
+  .build-small .submit-card > * { position: relative; }
+  .build-small .submit-card .scribble-light { color: var(--ember-soft); opacity: 0.8; }
+  .build-small .submit-card h2 {
+    font-family: 'Fraunces', serif;
+    font-variation-settings: "SOFT" 100, "opsz" 144;
+    font-size: 64px;
+    font-weight: 500;
+    line-height: 1;
+    margin: 24px 0 20px;
+  }
+  .build-small .submit-card h2 em { color: var(--ember-soft); font-style: italic; }
+  .build-small .submit-card p {
+    color: rgba(242, 234, 216, 0.8);
+    font-size: 19px;
+    max-width: 540px;
+    margin: 0 auto 36px;
+  }
+  .build-small .submit-btn {
+    display: inline-block;
+    background: var(--paper);
+    color: var(--ink);
+    padding: 18px 40px;
+    border-radius: 999px;
+    font-family: 'Fraunces', serif;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    text-decoration: none;
+    transition: background 0.2s, transform 0.2s;
+  }
+  .build-small .submit-btn:hover { background: var(--ember-soft); color: var(--paper); transform: translateY(-2px); }
+
+  /* ========= SPONSORS ========= */
+  .build-small .sponsors {
+    max-width: 1080px;
+    margin: 0 auto 100px;
+    padding: 0 32px;
+    text-align: center;
+  }
+  .build-small .sponsors h3 {
+    font-family: 'Fraunces', serif;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.25em;
+    color: var(--ink-soft);
+    margin-bottom: 32px;
+  }
+  .build-small .sponsor-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 60px;
+    flex-wrap: wrap;
+    opacity: 0.7;
+  }
+  .build-small .sponsor-placeholder {
+    font-family: 'Fraunces', serif;
+    font-style: italic;
+    color: var(--ink-soft);
+    font-size: 18px;
+    border: 1px dashed var(--rule);
+    padding: 16px 32px;
+    border-radius: 4px;
+  }
+
+  /* ========= FOOTER ========= */
+  .build-small .page-footer {
+    border-top: 1px solid var(--rule);
+    padding: 40px 32px;
+    text-align: center;
+    color: var(--ink-soft);
+    font-size: 15px;
+  }
+  .build-small .page-footer a { color: var(--ember); text-decoration: none; }
+
+  /* ========= RESPONSIVE ========= */
+  @media (max-width: 760px) {
+    .build-small .track-grid { grid-template-columns: 1fr; }
+    .build-small .track:first-child { border-right: none; border-bottom: 1px solid var(--rule); }
+    .build-small .rules-grid { grid-template-columns: 1fr; }
+    .build-small .rule-card { border-right: none; border-bottom: 1px solid var(--rule); }
+    .build-small .rule-card:last-child { border-bottom: none; }
+    .build-small .steps { grid-template-columns: 1fr 1fr; }
+    .build-small nav ul { display: none; }
+    .build-small .submit-card { padding: 56px 28px; }
+    .build-small .submit-card h2 { font-size: 44px; }
+    .build-small .hero { padding: 56px 24px 40px; }
+    .build-small .section-title { font-size: 40px; }
+    .build-small .track { padding: 40px 28px; }
+  }
+  @media (max-width: 480px) {
+    .build-small .steps { grid-template-columns: 1fr; }
+  }
+
+  /* ========= ANIMATION ========= */
+  @keyframes build-small-rise {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .build-small .hero .kicker, .build-small .hero h1, .build-small .hero .lede, .build-small .hero .meta-row {
+    animation: build-small-rise 0.8s ease-out backwards;
+  }
+  .build-small .hero .kicker { animation-delay: 0.05s; }
+  .build-small .hero h1 { animation-delay: 0.18s; }
+  .build-small .hero .lede { animation-delay: 0.4s; }
+  .build-small .hero .meta-row { animation-delay: 0.55s; }
+</style>
+
+<div class="build-small">
+
+<nav>
+  <div class="inner">
+    <div class="brand">Build <span class="sm">Small</span></div>
+    <ul>
+      <li><a href="#tracks">Tracks</a></li>
+      <li><a href="#rules">Rules</a></li>
+      <li><a href="#how">How it works</a></li>
+      <li><a href="#bonus">Extra Credit</a></li>
+      <li><a href="#timeline">Timeline</a></li>
+    </ul>
+    <a href="#register" class="register-btn">Register</a>
+  </div>
+</nav>
+
+<!-- ============================ HERO ============================ -->
+<section class="hero">
+  <div class="kicker">~ a hackathon for small things ~</div>
+  <h1>Build <em>Small.</em></h1>
+  <p class="lede">A two-week hackathon for tiny weights, big ideas, and the things you can build close to home — hosted by Gradio &amp; Hugging Face.</p>
+
+  <div class="meta-row">
+    <span><strong>Two tracks</strong></span>
+    <span class="dot">✦</span>
+    <span><strong>Models ≤ 22GB</strong></span>
+    <span class="dot">✦</span>
+    <span><strong>Built on Gradio</strong></span>
+    <span class="dot">✦</span>
+    <span><strong>Open to everyone</strong></span>
+  </div>
+</section>
+
+<!-- ============================ INTRO ============================ -->
+<section class="intro">
+  <svg class="scribble" viewBox="0 0 120 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+    <path d="M2 12 Q15 2, 30 12 T60 12 T90 12 T118 12" />
+  </svg>
+  <h2 style="margin-top: 32px;">The internet is full of giant models doing giant things. This isn't that.</h2>
+  <p>For two weeks, we want to see what you can do with <strong>small models</strong>, <strong>tight constraints</strong>, and <strong>care for the people right around you</strong>. Build for one neighbor. Build something that runs on the laptop you already own. Build something a child could love.</p>
+  <p style="margin-top: 24px;">Pick a track, ship a Gradio app, and tell us a story.</p>
+</section>
+
+<!-- ============================ TRACKS ============================ -->
+<section class="tracks" id="tracks">
+  <div class="section-label">~ choose your path ~</div>
+  <h2 class="section-title">Two Tracks.</h2>
+
+  <div class="track-grid">
+    <!-- TRACK 1 -->
+    <div class="track track-1">
+      <div class="chapter">Chapter One</div>
+      <div class="illustration">
+        <svg width="180" height="120" viewBox="0 0 180 120" fill="none" stroke="#3D5A3A" stroke-width="1.4" stroke-linecap="round">
+          <path d="M0 95 Q90 88, 180 95" />
+          <path d="M50 95 L50 65 L75 50 L100 65 L100 95 Z" />
+          <path d="M68 95 L68 80 L82 80 L82 95" />
+          <circle cx="62" cy="72" r="2.5" />
+          <circle cx="88" cy="72" r="2.5" />
+          <path d="M85 50 L85 42" />
+          <path d="M84 38 Q86 36, 88 38 Q86 40, 88 42" stroke-dasharray="2 2" opacity="0.6" />
+          <path d="M135 95 L135 75" />
+          <circle cx="135" cy="68" r="14" />
+          <path d="M10 95 L10 86 M18 95 L18 86 M26 95 L26 86 M34 95 L34 86 M42 95 L42 86" />
+          <path d="M8 88 L44 88" />
+          <circle cx="155" cy="22" r="8" />
+          <path d="M155 8 L155 4 M155 36 L155 40 M141 22 L137 22 M169 22 L173 22 M145 12 L142 9 M165 12 L168 9" />
+        </svg>
+      </div>
+      <h3>Backyard AI</h3>
+      <p class="subtitle">Solve a real problem for someone you actually know.</p>
+      <p class="body">Pick a person — a neighbor, a parent, a small business owner on your street — and build something that makes their day measurably better. Walk over. Watch them use it. The closer the problem, the better the project.</p>
+      <div class="judging">
+        <div class="judging-label">Judging Criteria</div>
+        <ul>
+          <li>The problem is specific and real (not invented for the demo)</li>
+          <li>The person it was built for actually used it</li>
+          <li>Honest fit between problem, solution, and the small-model constraint</li>
+          <li>Polish and craft of the Gradio app</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- TRACK 2 -->
+    <div class="track track-2">
+      <div class="chapter">Chapter Two</div>
+      <div class="illustration">
+        <svg width="180" height="120" viewBox="0 0 180 120" fill="none" stroke="#B8501E" stroke-width="1.4" stroke-linecap="round">
+          <path d="M0 100 Q90 92, 180 100" />
+          <path d="M30 100 Q60 80, 90 90 T160 70" stroke-dasharray="3 3" opacity="0.6" />
+          <path d="M48 100 L48 95 Q43 95, 43 90 Q43 85, 53 85 Q63 85, 63 90 Q63 95, 58 95 L58 100" />
+          <circle cx="48" cy="89" r="0.8" fill="#B8501E" />
+          <circle cx="55" cy="87" r="0.8" fill="#B8501E" />
+          <path d="M22 100 L22 96 Q19 96, 19 93 Q19 90, 25 90 Q31 90, 31 93 Q31 96, 28 96 L28 100" />
+          <path d="M85 100 L85 70" />
+          <path d="M78 75 L85 70 L92 75 M75 80 L85 75 L95 80 M73 86 L85 80 L97 86" />
+          <path d="M125 100 L125 65" />
+          <path d="M117 70 L125 65 L133 70 M114 76 L125 70 L136 76 M111 83 L125 76 L139 83" />
+          <path d="M155 25 L155 19 L159 22 L153 22 L157 19 Z" />
+          <circle cx="148" cy="35" r="1" fill="#B8501E" />
+          <circle cx="170" cy="40" r="1" fill="#B8501E" />
+        </svg>
+      </div>
+      <h3>An Adventure in Thousand Token Wood</h3>
+      <p class="subtitle">Build something delightful that wouldn't exist without AI.</p>
+      <p class="body">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="judging">
+        <div class="judging-label">Judging Criteria</div>
+        <ul>
+          <li>Genuinely delightful — would you show a friend?</li>
+          <li>The AI is load-bearing for the experience</li>
+          <li>Originality of concept (we've seen the chatbot)</li>
+          <li>Polish and craft of the Gradio app</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================ RULES ============================ -->
+<section class="rules" id="rules">
+  <div class="section-label">~ rules of the land ~</div>
+  <h2 class="section-title">The Constraints.</h2>
+
+  <div class="rules-grid">
+    <div class="rule-card">
+      <div class="icon">①</div>
+      <h4>Small Models Only</h4>
+      <p>Any model that fits inside <strong>22 GB</strong> of memory.</p>
+      <span class="pending">↳ pending team sign-off</span>
+    </div>
+    <div class="rule-card">
+      <div class="icon">②</div>
+      <h4>Built on Gradio</h4>
+      <p>Your app must be a Gradio app, hosted as a Hugging Face Space.</p>
+    </div>
+    <div class="rule-card">
+      <div class="icon">③</div>
+      <h4>Show, Don't Tell</h4>
+      <p>A short demo video and a social-media post about your project are part of the submission.</p>
+    </div>
+  </div>
+</section>
+
+<!-- ============================ HOW IT WORKS ============================ -->
+<section class="how-it-works" id="how">
+  <div class="section-label">~ getting started ~</div>
+  <h2 class="section-title">How It Works.</h2>
+
+  <div class="steps">
+    <div class="step">
+      <div class="num">1</div>
+      <h4>Register</h4>
+      <p>Join this Hugging Face org. That's your ticket in — no application, no waitlist.</p>
+    </div>
+    <div class="step">
+      <div class="num">2</div>
+      <h4>Find Your People</h4>
+      <p>Hop into the Gradio Discord channel. Office hours, AMAs, and teammates live there.</p>
+    </div>
+    <div class="step">
+      <div class="num">3</div>
+      <h4>Build &amp; Ship</h4>
+      <p>Build your Gradio app and host it as a Space under this org during the hack window.</p>
+    </div>
+    <div class="step">
+      <div class="num">4</div>
+      <h4>Submit</h4>
+      <p>Drop your <strong>Space link</strong>, a short <strong>demo video</strong>, and a <strong>social post</strong> by the deadline.</p>
+    </div>
+  </div>
+</section>
+
+<!-- ============================ BONUS ============================ -->
+<section class="bonus" id="bonus">
+  <div class="bonus-inner">
+    <div class="section-label">~ extra credit ~</div>
+    <h2 class="section-title">Bonus Quests.</h2>
+    <p class="intro-text">None of these are required. Each one bumps you up the leaderboard. Stack them like badges on a scout sash.</p>
+
+    <div class="bonus-grid">
+      <div class="badge">
+        <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>
+      </div>
+      <div class="badge">
+        <div class="name">Well-Tuned</div>
+        <div class="desc">Your app uses a fine-tuned model you've published on Hugging Face.</div>
+      </div>
+      <div class="badge">
+        <div class="name">Off-Brand</div>
+        <div class="desc">A custom frontend that pushes past the default Gradio look.</div>
+      </div>
+      <div class="badge">
+        <div class="name">Llama ChamPion</div>
+        <div class="desc">Your model runs through the llama.cpp runtime.</div>
+      </div>
+      <div class="badge">
+        <div class="name">Sharing is Caring</div>
+        <div class="desc">You shared your agent trace on the Hub.</div>
+      </div>
+      <div class="badge tentative">
+        <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>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================ TIMELINE ============================ -->
+<section class="timeline-section" id="timeline">
+  <div class="section-label">~ when ~</div>
+  <h2 class="section-title">Timeline.</h2>
+
+  <div class="timeline">
+    <div class="milestone">
+      <div class="date">Week of [date TBD]</div>
+      <div class="title">Registration opens</div>
+      <div class="desc">Sign up on the Hugging Face org, join the Discord channel, start sketching ideas.</div>
+    </div>
+    <div class="milestone">
+      <div class="date">[date TBD]</div>
+      <div class="title">Hack window begins</div>
+      <div class="desc">Two weeks to build, ship, and demo.</div>
+    </div>
+    <div class="milestone">
+      <div class="date">Mid-window</div>
+      <div class="title">Live AMA + office hours</div>
+      <div class="desc">Drop in to ask the Gradio team anything about your build.</div>
+    </div>
+    <div class="milestone">
+      <div class="date">[date TBD]</div>
+      <div class="title">Submissions close</div>
+      <div class="desc">Demo video, public Space, and social post — locked in.</div>
+    </div>
+    <div class="milestone">
+      <div class="date">[date TBD]</div>
+      <div class="title">Winners announced</div>
+      <div class="desc">Per track, plus the leaderboard for bonus quests stacked.</div>
+    </div>
+  </div>
+</section>
+
+<!-- ============================ SUBMIT ============================ -->
+<section class="submit" id="register">
+  <div class="submit-card">
+    <svg class="scribble scribble-light" viewBox="0 0 120 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
+      <path d="M2 12 Q15 2, 30 12 T60 12 T90 12 T118 12" />
+    </svg>
+    <h2>Build something <em>small.</em></h2>
+    <p>Two weeks. Two tracks. The model on your laptop. The neighbor next door. Let's make some little things.</p>
+    <a href="#" class="submit-btn">Register on Hugging Face →</a>
+  </div>
+</section>
+
+<!-- ============================ SPONSORS ============================ -->
+<section class="sponsors">
+  <h3>Hosted by · Sponsored by</h3>
+  <div class="sponsor-row">
+    <div class="sponsor-placeholder">Gradio</div>
+    <div class="sponsor-placeholder">Hugging Face</div>
+    <div class="sponsor-placeholder">[ Sponsor TBD ]</div>
+    <div class="sponsor-placeholder">[ Sponsor TBD ]</div>
+  </div>
+</section>
+
+<div class="page-footer">
+  <p>Made with care by the Gradio team — questions? <a href="#">Find us on Discord</a></p>
+</div>
+
+</div>
+"""
+
+
+with gr.Blocks(
+    title="Build Small — A Gradio + Hugging Face Hackathon",
+) as demo:
+    gr.HTML(LANDING_HTML)
+
+
+if __name__ == "__main__":
+    demo.launch(
+        css=CUSTOM_CSS,
+        head=HEAD_HTML,
+        theme=gr.themes.Base(),
+    )