app.py

"""
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(),
    )