Spaces:

CompactAI-O
/

Tiny-model-golf

Running

File size: 50,089 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model Golf — Monthly Parameter-Efficiency Competition</title>
<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=Geist:wght@400;500;600;700&family=Geist+Mono&display=swap" rel="stylesheet">
<style>
    :root {
        --blue-900: #000000;
        --blue-800: rgba(10, 10, 10, 0.88);
        --blue-700: #111111;
        --blue-600: #1a1a1a;
        --blue-500: #333333;
        --blue-400: #555555;
        --blue-300: #777777;
        --blue-200: #888888;
        --blue-100: #aaaaaa;
        --white: #ffffff;
        --white-soft: #f5f5f5;
        --white-muted: #e0e0e0;
        --grid-line: rgba(255, 255, 255, 0.03);
        --grid-line-major: rgba(255, 255, 255, 0.06);
        --accent: #c8960c;
        --accent-bright: #ffd633;
        --accent-muted: #8b6508;
        --gold-gradient: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
        --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
        --font-mono: 'Geist Mono', 'SF Mono', 'Fira Code', monospace;
        --container-max: 1400px;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body {
        font-family: var(--font-sans);
        background: var(--blue-900);
        color: var(--white-muted);
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
    }
    body::before {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: 0;
        background-image:
            linear-gradient(var(--grid-line) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
            linear-gradient(var(--grid-line-major) 1px, transparent 1px),
            linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);
        background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
        opacity: 0.7;
    }
    body::after {
        content: '';
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        background-size: 256px 256px;
    }
    a { color: var(--white); text-decoration: none; }
    a:hover { color: var(--accent); }
    a:focus-visible {
        outline: 2px solid var(--accent-bright);
        outline-offset: 3px;
        border-radius: 2px;
    }
    .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
    }
    .skip-link {
        position: absolute;
        top: -100%;
        left: 16px;
        padding: 12px 24px;
        background: var(--accent);
        color: var(--blue-900);
        font-weight: 600;
        border-radius: 0 0 8px 8px;
        z-index: 999;
        transition: top 0.2s;
    }
    .skip-link:focus {
        top: 0;
    }

    #bg-canvas {
        position: fixed;
        top: 0; left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 0;
        pointer-events: none;
        opacity: 0.45;
    }

    .scroll-track {
        position: fixed;
        right: 24px;
        top: 100px;
        bottom: 100px;
        width: 3px;
        z-index: 3;
        pointer-events: none;
    }
    .scroll-track .track-bg {
        position: absolute;
        inset: 0;
        background: var(--blue-500);
        border-radius: 2px;
    }
    .scroll-track .track-fill {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 0%;
        background: linear-gradient(to bottom, var(--accent-bright), var(--accent));
        border-radius: 2px;
        transition: height 0.1s linear;
    }
    .scroll-track .track-label {
        position: absolute;
        right: 14px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--blue-300);
        white-space: nowrap;
    }
    .scroll-track .track-label.top {
        top: 0;
        transform: translateY(-50%);
    }
    .scroll-track .track-label.bottom {
        bottom: 0;
        transform: translateY(50%);
    }
    .scroll-track .track-pct {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        font-weight: 600;
        font-family: var(--font-mono);
        color: var(--blue-300);
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .scroll-track:hover .track-pct {
        opacity: 1;
    }

    .side-ghost {
        position: fixed;
        z-index: 1;
        pointer-events: none;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.06em;
        font-family: var(--font-sans);
        user-select: none;
        writing-mode: vertical-lr;
        text-orientation: mixed;
        background: linear-gradient(to bottom, rgba(200,150,12,0.15), rgba(200,150,12,0.05));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .side-ghost.left {
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: clamp(120px, 20vw, 300px);
    }
    .side-ghost.right {
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: clamp(80px, 14vw, 200px);
        background: linear-gradient(to bottom, rgba(255,214,51,0.15), rgba(200,150,12,0.05));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .corner-accent {
        position: fixed;
        z-index: 1;
        pointer-events: none;
    }
    .corner-accent.tl {
        top: 32px; left: 32px;
        width: 48px; height: 48px;
        border-top: 1px solid rgba(200, 150, 12, 0.12);
        border-left: 1px solid rgba(200, 150, 12, 0.12);
    }
    .corner-accent.tr {
        top: 32px; right: 32px;
        width: 48px; height: 48px;
        border-top: 1px solid rgba(200, 150, 12, 0.12);
        border-right: 1px solid rgba(200, 150, 12, 0.12);
    }
    .corner-accent.bl {
        bottom: 32px; left: 32px;
        width: 48px; height: 48px;
        border-bottom: 1px solid rgba(200, 150, 12, 0.12);
        border-left: 1px solid rgba(200, 150, 12, 0.12);
    }
    .corner-accent.br {
        bottom: 32px; right: 32px;
        width: 48px; height: 48px;
        border-bottom: 1px solid rgba(200, 150, 12, 0.12);
        border-right: 1px solid rgba(200, 150, 12, 0.12);
    }

    @media (max-width: 1024px) {
        .side-ghost { display: none; }
        .corner-accent { display: none; }
    }
    @media (max-width: 768px) {
        .scroll-track { display: none; }
    }

    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(40px) scale(0.96); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        33% { transform: translateY(-8px) rotate(1deg); }
        66% { transform: translateY(4px) rotate(-0.5deg); }
    }
    @keyframes borderGlow {
        0%, 100% { border-color: rgba(200, 150, 12, 0.2); box-shadow: 0 0 20px rgba(200, 150, 12, 0.02); }
        50% { border-color: rgba(200, 150, 12, 0.5); box-shadow: 0 0 40px rgba(200, 150, 12, 0.08); }
    }
    @keyframes shimmer {
        0% { background-position: -200% center; }
        100% { background-position: 200% center; }
    }
    @keyframes accordionOpen {
        from { opacity: 0; max-height: 0; }
        to { opacity: 1; max-height: 300px; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
        html { scroll-behavior: auto; }
        #bg-canvas { display: none; }
    }

    .hero {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 0;
        position: relative;
        overflow: hidden;
    }
    .hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:
            radial-gradient(ellipse 100% 60% at 50% -20%, rgba(200, 150, 12, 0.08), transparent),
            radial-gradient(ellipse 60% 50% at 80% 80%, rgba(200, 150, 12, 0.04), transparent);
        pointer-events: none;
        z-index: 1;
    }
    .hero-content { position: relative; z-index: 2; }

    .logo-wrap {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 36px;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
    }
    .logo-wrap img {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid var(--blue-600);
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .logo-wrap img:hover {
        transform: scale(1.1) rotate(-4deg);
        border-color: var(--accent);
        box-shadow: 0 0 40px rgba(200, 150, 12, 0.2);
    }
    .logo-wrap .logo-text {
        font-size: 14px;
        font-weight: 500;
        color: var(--blue-300);
        letter-spacing: 0.02em;
    }
    .logo-wrap .logo-text span { color: var(--accent); }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(200, 150, 12, 0.1);
        border: 1px solid rgba(200, 150, 12, 0.3);
        padding: 8px 18px;
        border-radius: 9999px;
        font-size: 12px;
        color: var(--accent-bright);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 32px;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    }
    .hero-badge .dot {
        width: 6px; height: 6px;
        background: var(--accent-bright);
        border-radius: 50%;
        animation: float 3s ease-in-out infinite;
    }
    .hero h1 {
        font-size: clamp(64px, 12vw, 120px);
        font-weight: 700;
        line-height: 1.0;
        letter-spacing: -0.04em;
        margin-bottom: 16px;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    }
    .hero h1 .highlight {
        background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 4s linear infinite;
    }
    .hero-subtitle {
        font-size: clamp(17px, 2vw, 21px);
        color: var(--blue-200);
        max-width: 800px;
        margin-bottom: 48px;
        line-height: 1.6;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
    }

    .hero-cta {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 80px;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    }
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 14px 32px;
        font-size: 15px;
        font-weight: 500;
        border-radius: 8px;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        cursor: pointer;
        font-family: var(--font-sans);
        position: relative;
        overflow: hidden;
    }
    .btn::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
        transition: left 0.6s ease;
    }
    .btn:hover::before { left: 100%; }
    .btn:focus-visible {
        outline: 2px solid var(--accent-bright);
        outline-offset: 3px;
    }
    .btn-primary {
        background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
        background-size: 200% auto;
        color: var(--blue-900);
        border: none;
        font-weight: 600;
        animation: shimmer 4s linear infinite;
    }
    .btn-primary:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 50px rgba(200, 150, 12, 0.35);
    }
    .btn-secondary {
        background: transparent;
        color: var(--blue-200);
        border: 1px solid var(--blue-500);
    }
    .btn-secondary:hover {
        border-color: var(--accent);
        color: var(--white);
        transform: translateY(-3px);
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        opacity: 0;
        animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    }
    .hero-stat {
        background: rgba(10, 10, 10, 0.8);
        border: 1px solid var(--blue-600);
        border-radius: 12px;
        padding: 28px 16px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        overflow: hidden;
    }
    .hero-stat::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.12), transparent 70%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }
    .hero-stat:hover::before { opacity: 1; }
    .hero-stat:hover {
        border-color: rgba(200, 150, 12, 0.4);
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }
    .hero-stat .number {
        font-size: clamp(32px, 4vw, 48px);
        font-weight: 700;
        background: linear-gradient(135deg, #ffd633, #c8960c, #ffd633);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-family: var(--font-mono);
        line-height: 1.1;
        margin-bottom: 6px;
        animation: shimmer 5s linear infinite;
        position: relative;
        z-index: 1;
    }
    .hero-stat .label { font-size: 13px; color: var(--blue-200); font-weight: 500; position: relative; z-index: 1; }
    .hero-stat .sublabel { font-size: 11px; color: var(--blue-300); margin-top: 4px; position: relative; z-index: 1; }

    .section {
        padding: 100px 0;
        position: relative;
        z-index: 2;
    }
    .section.alt {
        background: var(--blue-800);
        border-top: 1px solid var(--blue-600);
        border-bottom: 1px solid var(--blue-600);
    }
    .section-header {
        text-align: center;
        margin-bottom: 56px;
    }
    .section-header h2 {
        font-size: 36px;
        font-weight: 700;
        color: var(--white);
        margin-bottom: 16px;
        letter-spacing: -0.02em;
    }
    .section-header p {
        font-size: 16px;
        color: var(--blue-200);
        max-width: 600px;
        margin: 0 auto;
    }
    .section-body {
        max-width: 900px;
        margin: 0 auto;
    }
    .section-body p {
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 24px;
        color: var(--blue-200);
    }

    .two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .col-card {
        background: var(--blue-800);
        border: 1px solid var(--blue-600);
        border-radius: 12px;
        padding: 32px;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        overflow: hidden;
    }
    .col-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }
    .col-card:hover::before { opacity: 1; }
    .col-card::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(200, 150, 12, 0.04), transparent);
        transition: left 0.8s ease;
        pointer-events: none;
    }
    .col-card:hover::after { left: 100%; }
    .col-card:hover {
        border-color: rgba(200, 150, 12, 0.35);
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    .col-card h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--white);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
        z-index: 1;
    }
    .col-card ul { list-style: none; padding: 0; position: relative; z-index: 1; }
    .col-card li {
        padding: 10px 0;
        border-bottom: 1px solid var(--blue-600);
        font-size: 14px;
        color: var(--blue-200);
        display: flex;
        align-items: baseline;
        gap: 10px;
    }
    .col-card li:last-child { border-bottom: none; }
    .col-card li .check { color: var(--accent); font-weight: 700; flex-shrink: 0; }

    .three-col {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1200px;
        margin: 0 auto;
    }
    .info-card {
        background: var(--blue-800);
        border: 1px solid var(--blue-600);
        border-radius: 12px;
        padding: 32px 24px;
        text-align: center;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        overflow: hidden;
    }
    .info-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }
    .info-card:hover::before { opacity: 1; }
    .info-card:hover {
        border-color: rgba(200, 150, 12, 0.35);
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    .info-card .card-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
        color: var(--blue-900);
        font-weight: 700;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        position: relative;
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .info-card:hover .card-icon {
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(200, 150, 12, 0.3);
    }
    .info-card h3 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; position: relative; z-index: 1; }
    .info-card p { font-size: 14px; color: var(--blue-200); line-height: 1.6; margin: 0; position: relative; z-index: 1; }

    .rules-card {
        background: var(--blue-800);
        border: 1px solid var(--blue-600);
        border-radius: 12px;
        padding: 32px;
        max-width: 900px;
        margin: 0 auto;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        animation: borderGlow 4s ease-in-out infinite;
        position: relative;
    }
    .rules-card .rule-row {
        display: flex;
        align-items: baseline;
        padding: 14px 0;
        border-bottom: 1px solid var(--blue-600);
        gap: 12px;
        position: relative;
        z-index: 1;
    }
    .rules-card .rule-row:last-child { border-bottom: none; }
    .rules-card .rule-icon { color: var(--accent); font-weight: 700; width: 20px; text-align: center; flex-shrink: 0; }
    .rules-card .rule-label { font-size: 14px; font-weight: 600; color: var(--white); min-width: 100px; flex-shrink: 0; }
    .rules-card .rule-desc { font-size: 14px; color: var(--blue-200); }
    .rules-tagline {
        text-align: center;
        font-size: 13px;
        color: var(--blue-300);
        font-family: var(--font-mono);
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--blue-600);
        position: relative;
        z-index: 1;
    }

    .how-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        max-width: 1100px;
        margin: 0 auto;
    }
    .how-step {
        background: var(--blue-800);
        border: 1px solid var(--blue-600);
        border-radius: 12px;
        padding: 36px 24px;
        text-align: center;
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        overflow: hidden;
    }
    .how-step::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(200, 150, 12, 0.08), transparent 70%);
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
    }
    .how-step:hover::before { opacity: 1; }
    .how-step:hover {
        border-color: rgba(200, 150, 12, 0.35);
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    .how-step .step-num {
        width: 44px; height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffd633 0%, #c8960c 50%, #a0760a 100%);
        color: var(--blue-900);
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 16px;
        position: relative;
        z-index: 1;
        transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .how-step:hover .step-num {
        transform: scale(1.15);
        box-shadow: 0 0 40px rgba(200, 150, 12, 0.3);
    }
    .how-step h4 { font-size: 17px; font-weight: 600; color: var(--white); margin-bottom: 10px; position: relative; z-index: 1; }
    .how-step p { font-size: 14px; color: var(--blue-200); line-height: 1.6; margin: 0; position: relative; z-index: 1; }

    .faq-list {
        max-width: 900px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .faq-item {
        background: var(--blue-800);
        border: 1px solid var(--blue-600);
        border-radius: 10px;
        overflow: hidden;
        transition: border-color 0.3s ease;
    }
    .faq-item:hover { border-color: var(--blue-500); }
    .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 24px;
        background: none;
        border: none;
        color: var(--white);
        font-size: 15px;
        font-weight: 500;
        font-family: var(--font-sans);
        cursor: pointer;
        text-align: left;
        transition: color 0.2s ease;
    }
    .faq-question:hover { color: var(--accent); }
    .faq-question:focus-visible {
        outline: 2px solid var(--accent-bright);
        outline-offset: -2px;
    }
    .faq-question .icon {
        width: 20px; height: 20px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: var(--accent);
        transition: transform 0.3s ease;
    }
    .faq-item.open .faq-question .icon {
        transform: rotate(45deg);
    }
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease, padding 0.35s ease;
    }
    .faq-item.open .faq-answer {
        max-height: 300px;
    }
    .faq-answer p {
        padding: 0 24px 18px;
        font-size: 14px;
        color: var(--blue-200);
        line-height: 1.7;
        margin: 0;
    }

    .cta-section {
        padding: 120px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
        z-index: 2;
    }
    .cta-section::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(200, 150, 12, 0.06), transparent);
        pointer-events: none;
    }
    .cta-section h2 {
        font-size: 48px;
        font-weight: 700;
        color: var(--white);
        margin-bottom: 16px;
        letter-spacing: -0.02em;
    }
    .cta-section h2 .highlight {
        background: var(--gold-gradient);
        background-size: 200% auto;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: shimmer 4s linear infinite;
    }
    .cta-section p {
        font-size: 18px;
        color: var(--blue-200);
        max-width: 500px;
        margin: 0 auto 32px;
    }
    .cta-section .cta-links {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    

    footer {
        padding: 60px 0;
        background: var(--blue-800);
        border-top: 1px solid var(--blue-600);
        text-align: center;
        position: relative;
        z-index: 2;
    }
    footer p { color: var(--blue-200); font-size: 14px; margin-bottom: 8px; }
    footer a { color: var(--blue-200); }
    footer a:hover { color: var(--accent); }

    .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }

    @media (max-width: 768px) {
        .hero-stats { grid-template-columns: repeat(2, 1fr); }
        .two-col { grid-template-columns: 1fr; }
        .three-col { grid-template-columns: 1fr; }
        .how-grid { grid-template-columns: 1fr; }
        .hero h1 { font-size: clamp(40px, 15vw, 64px); }
        .cta-section h2 { font-size: 32px; }
        .rules-card .rule-row { flex-wrap: wrap; gap: 4px; }
        .rules-card .rule-label { min-width: 0; width: 100%; }
    }
</style>
</head>
<body>

<a href="#main-content" class="skip-link">Skip to main content</a>

<canvas id="bg-canvas" aria-hidden="true"></canvas>

<div class="corner-accent tl" aria-hidden="true"></div>
<div class="corner-accent tr" aria-hidden="true"></div>
<div class="corner-accent bl" aria-hidden="true"></div>
<div class="corner-accent br" aria-hidden="true"></div>

<div class="side-ghost left" aria-hidden="true">MODEL GOLF</div>
<div class="side-ghost right" aria-hidden="true">ROUND ONE</div>

<div class="scroll-track" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-label="Scroll progress">
    <div class="track-bg"></div>
    <div class="track-fill"></div>
    <span class="track-label top">Top</span>
    <span class="track-label bottom">Bottom</span>
    <span class="track-pct">0%</span>
</div>

<main id="main-content">
    <section class="hero" id="hero" aria-label="Hero banner" role="region">
        <div class="container hero-content">
            <div class="logo-wrap">
                <img src="compact.webp" alt="CompactAI-O organization logo">
                <span class="logo-text">by <span>CompactAI-O</span></span>
            </div>
            <div class="hero-badge" role="status" aria-live="polite">
                <span class="dot" aria-hidden="true"></span>
                Monthly Competition &mdash; Open To Everyone
            </div>
            <h1>Model <span class="highlight" aria-hidden="true">Golf</span><span class="sr-only">Golf</span></h1>
            <p class="hero-subtitle">Build the best language model under 100 million parameters. Minimum 1028-token context. Winner receives $50 in RunPod credits. Round one: June 1&ndash;30, 2026.</p>
            <div class="hero-cta" role="group" aria-label="Call to action buttons">
                <a href="#rules" class="btn btn-primary">View Rules</a>
                <a href="#participate" class="btn btn-secondary">How To Join</a>
                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-secondary" rel="noopener">Join Discord</a>
            </div>
            <div class="hero-stats" role="list" aria-label="Competition statistics">
                <div class="hero-stat" data-tilt role="listitem">
                    <div class="number" aria-hidden="true">&lt;100M</div>
                    <div class="label">Parameter Limit</div>
                    <div class="sublabel">Strict upper bound</div>
                </div>
                <div class="hero-stat" data-tilt role="listitem">
                    <div class="number" aria-hidden="true">1028+</div>
                    <div class="label">Context Window</div>
                    <div class="sublabel">Minimum tokens</div>
                </div>
                <div class="hero-stat" data-tilt role="listitem">
                    <div class="number" aria-hidden="true">$50</div>
                    <div class="label">RunPod Credits</div>
                    <div class="sublabel">Monthly prize</div>
                </div>
                <div class="hero-stat" data-tilt role="listitem">
                    <div class="number" aria-hidden="true">30d</div>
                    <div class="label">Current Round</div>
                    <div class="sublabel">June 1&ndash;30, 2026</div>
                </div>
            </div>
        </div>
    </section>

    <section class="section reveal" id="what" aria-labelledby="what-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="what-heading">What It Is</h2>
            </div>
            <div class="two-col">
                <div class="col-card" data-tilt>
                    <h3><span class="check" aria-hidden="true">&#x2713;</span> What Model <em style="font-style: normal; color: var(--white);">Is</em></h3>
                    <ul role="list">
                        <li><span class="check" aria-hidden="true">&#x2713;</span> A monthly parameter-efficiency competition</li>
                        <li><span class="check" aria-hidden="true">&#x2713;</span> Open to anyone, anywhere</li>
                        <li><span class="check" aria-hidden="true">&#x2713;</span> Fully custom architectures allowed</li>
                        <li><span class="check" aria-hidden="true">&#x2713;</span> Novel tokenization &amp; training schemes welcome</li>
                        <li><span class="check" aria-hidden="true">&#x2713;</span> Open source by design</li>
                        <li><span class="check" aria-hidden="true">&#x2713;</span> $50 RunPod credits to the winner</li>
                    </ul>
                </div>
                <div class="col-card" data-tilt>
                    <h3><span class="icon" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> What It Is <em style="font-style: normal; color: var(--blue-400);">Not</em></h3>
                    <ul role="list">
                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not a Kaggle-style dataset contest</li>
                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not restricted to existing architectures</li>
                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not limited by llama.cpp compatibility</li>
                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not a fixed-benchmark leaderboard</li>
                        <li><span class="check" style="color: var(--blue-400);" aria-hidden="true">&#x2717;</span> Not for closed-source submissions</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <section class="section reveal reveal-delay-1" id="rules" aria-labelledby="rules-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="rules-heading">The Rules</h2>
                <p>Simple and clear. Complexity discourages participation.</p>
            </div>
            <div class="rules-card" aria-label="Competition rules">
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">License</span>
                    <span class="rule-desc">MIT, GPL, Apache, or AGPL (any version)</span>
                </div>
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">Parameters</span>
                    <span class="rule-desc">Must be smaller than 100 million</span>
                </div>
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">Context</span>
                    <span class="rule-desc">Minimum 1028 tokens</span>
                </div>
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">Platform</span>
                    <span class="rule-desc">No requirement for llama.cpp compatibility</span>
                </div>
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">AI Assistance</span>
                    <span class="rule-desc">Up to 45% of work can be AI-generated</span>
                </div>
                <div class="rule-row">
                    <span class="rule-icon" aria-hidden="true">&#x2713;</span>
                    <span class="rule-label">Submission</span>
                    <span class="rule-desc">Open source repository with documentation</span>
                </div>
                <div class="rules-tagline" aria-label="Tagline: Simple. Clear. Enforceable."># Simple. Clear. Enforceable.</div>
            </div>
        </div>
    </section>

    <section class="section alt reveal reveal-delay-2" id="participate" aria-labelledby="participate-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="participate-heading">How To Join</h2>
                <p>Round one runs <strong>June 1&ndash;30, 2026</strong>. Here is how it works.</p>
            </div>
            <div class="how-grid">
                <div class="how-step" data-tilt>
                    <div class="step-num" aria-hidden="true">1</div>
                    <h4>Build</h4>
                    <p>Create a language model under 100M parameters with at least 1028-token context. Any architecture. Any approach.</p>
                </div>
                <div class="how-step" data-tilt>
                    <div class="step-num" aria-hidden="true">2</div>
                    <h4>Document</h4>
                    <p>Open source your repository with full documentation. Include parameter count, context window, and approach summary.</p>
                </div>
                <div class="how-step" data-tilt>
                    <div class="step-num" aria-hidden="true">3</div>
                    <h4>Submit</h4>
                    <p>Submit your repo link when the competition opens. Submissions are evaluated monthly. Winner gets $50 in RunPod credits.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section reveal reveal-delay-1" id="resources" aria-labelledby="resources-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="resources-heading">Resources &amp; Evaluation</h2>
                <p>Everything you need to build and submit your model.</p>
            </div>
            <div class="three-col">
                <div class="info-card" data-tilt>
                    <div class="card-icon" aria-hidden="true">B</div>
                    <h3>Benchmark</h3>
                    <p>Models evaluated on a held-out suite of reasoning, coding, and language understanding tasks. Final ranking by aggregate score.</p>
                </div>
                <div class="info-card" data-tilt>
                    <div class="card-icon" aria-hidden="true">T</div>
                    <h3>Tools</h3>
                    <p>Use any framework &mdash; PyTorch, JAX, TensorFlow, or custom CUDA. Bring your own tokenizer, architecture, and training pipeline.</p>
                </div>
                <div class="info-card" data-tilt>
                    <div class="card-icon" aria-hidden="true">G</div>
                    <h3>Guidelines</h3>
                    <p>Submit via a pull request to the Model Golf repository with your model weights, config, and a short technical report.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="section alt reveal reveal-delay-1" id="faq" aria-labelledby="faq-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="faq-heading">Frequently Asked Questions</h2>
                <p>Common questions about Model Golf.</p>
            </div>
            <div class="faq-list" role="list">
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq1-answer">
                        <span>Can I use a pre-trained model as a starting point?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq1-answer" role="region" aria-hidden="true">
                        <p>Yes, you may fine-tune or adapt existing open-source models as long as the final parameter count is under 100 million and all code is open source. You must document your starting point clearly in your submission.</p>
                    </div>
                </div>
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq2-answer">
                        <span>How is the 100M parameter limit enforced?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq2-answer" role="region" aria-hidden="true">
                        <p>Submissions must include a parameter count script that counts every trainable parameter. Organizers verify counts and reserve the right to reject submissions that creatively circumvent the limit (e.g., large embedding tables with sparse usage).</p>
                    </div>
                </div>
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq3-answer">
                        <span>What does "open source" mean for Model Golf?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq3-answer" role="region" aria-hidden="true">
                        <p>All training code, model weights, configuration, and a technical report must be publicly available under an OSI-approved license. We accept MIT, GPL, Apache 2.0, and AGPL licenses.</p>
                    </div>
                </div>
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq4-answer">
                        <span>When does the first round begin?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq4-answer" role="region" aria-hidden="true">
                        <p>Round one runs <strong>June 1&ndash;30, 2026</strong>. Submissions close at 23:59 UTC on June 30. Join the Discord for early-access resources.</p>
                    </div>
                </div>
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq5-answer">
                        <span>Can the AI speak clearly in a preferred language? Is translation supported?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq5-answer" role="region" aria-hidden="true">
                        <p>The model can be trained to speak clearly in one or more languages. Translation to your preferred language can be handled separately by you or your application, allowing the model to focus on its core task while you adapt the output as needed.</p>
                    </div>
                </div>
                <div class="faq-item" role="listitem">
                    <button class="faq-question" aria-expanded="false" aria-controls="faq6-answer">
                        <span>Is this a pre-trained or post-trained model? What's the difference?</span>
                        <span class="icon" aria-hidden="true">+</span>
                    </button>
                    <div class="faq-answer" id="faq6-answer" role="region" aria-hidden="true">
                        <p>Models can be either pre-trained (sentence continuation) or post-trained (Q&A style). Pre-training teaches the model language patterns from vast data, while post-training fine-tunes it for specific formats like instruction following and conversational responses. Both approaches are valid for Model Golf.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="section reveal reveal-delay-2" aria-labelledby="why-heading">
        <div class="container">
            <div class="section-header">
                <h2 id="why-heading">Why Small Models?</h2>
                <p>Parameter efficiency is the path to democratized AI.</p>
            </div>
            <div class="section-body">
                <p>Small models run on consumer hardware. They deploy at the edge. Individuals can fine-tune them on a single GPU. Model Golf rewards architectural creativity within tight constraints, making efficiency competitive.</p>
                <p>The $50 prize is symbolic &mdash; enough to cover GPU time, enough to motivate enthusiasts, not enough to attract mercenaries. Enthusiasts build interesting things. Interesting things advance the field.</p>
            </div>
        </div>
    </section>

    <section class="cta-section">
        <div class="container">
            <h2>Ready To <span class="highlight" aria-hidden="true">Compete</span><span class="sr-only">Compete</span>?</h2>
            <p>Round one ends June 30, 2026. Submit your model by 23:59 UTC.</p>
            <div class="cta-links">
                <a href="https://discord.gg/y2jTct6Cxv" target="_blank" class="btn btn-primary" rel="noopener">Join Discord</a>
                <a href="https://compactai-o-homepage.static.hf.space/blog.html" class="btn btn-secondary" rel="noopener">Read The Blog</a>
            </div>
        </div>
    </section>
</main>

<footer role="contentinfo">
    <div class="container">
        <p>Built with curiosity over compute</p>
        <p>FMN-GPT by <a href="https://huggingface.co/CompactAI-O" target="_blank" rel="noopener">CompactAI-O</a> | 2026</p>
    </div>
</footer>

<script>
(function() {
    // --- Scroll reveal ---
    var reveal = document.querySelectorAll('.reveal');
    if ('IntersectionObserver' in window) {
        var observer = new IntersectionObserver(function(entries) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.15 });
        reveal.forEach(function(el) { observer.observe(el); });
    } else {
        reveal.forEach(function(el) { el.classList.add('visible'); });
    }

    // --- FAQ accordion ---
    var faqButtons = document.querySelectorAll('.faq-question');
    faqButtons.forEach(function(btn) {
        btn.addEventListener('click', function() {
            var item = btn.closest('.faq-item');
            var isOpen = item.classList.contains('open');
            var answer = document.getElementById(btn.getAttribute('aria-controls'));
            if (isOpen) {
                item.classList.remove('open');
                btn.setAttribute('aria-expanded', 'false');
                answer.setAttribute('aria-hidden', 'true');
            } else {
                item.classList.add('open');
                btn.setAttribute('aria-expanded', 'true');
                answer.setAttribute('aria-hidden', 'false');
            }
        });
    });

    // --- Fluid background canvas ---
    var prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var canvas = document.getElementById('bg-canvas');
    if (prefersReduced) { canvas.remove(); }
    else {
        var ctx = canvas.getContext('2d');
        var w, h, time = 0;
        var mouse = { x: 0.5, y: 0.5 };

        function resize() {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
        }
        resize();
        window.addEventListener('resize', resize);

        document.addEventListener('mousemove', function(e) {
            mouse.x = e.clientX / w;
            mouse.y = e.clientY / h;
        });

        function drawFluid(time) {
            ctx.clearRect(0, 0, w, h);
            var imageData = ctx.createImageData(w, h);
            var data = imageData.data;
            var cx = mouse.x * w;
            var cy = mouse.y * h;

            for (var y = 0; y < h; y += 2) {
                for (var x = 0; x < w; x += 2) {
                    var dx = x - cx;
                    var dy = y - cy;
                    var dist = Math.sqrt(dx * dx + dy * dy);
                    var angle = Math.atan2(dy, dx);

                    var n1 = Math.sin(x * 0.003 + time * 0.4) * Math.cos(y * 0.003 + time * 0.3);
                    var n2 = Math.sin((x - cx) * 0.005 + time * 0.5) * Math.cos((y - cy) * 0.005 + time * 0.4);
                    var n3 = Math.sin(dist * 0.01 - time * 0.6 + angle);

                    var val = (n1 * 0.5 + n2 * 0.3 + n3 * 0.2);
                    val = Math.max(-1, Math.min(1, val));

                    var push = Math.max(0, 1 - dist / (w * 0.4));
                    val += push * 0.3;

                    var intensity = (val * 0.5 + 0.5) * 0.06;

                    var idx = (y * w + x) * 4;
                    data[idx] = 200 * intensity;
                    data[idx + 1] = 150 * intensity;
                    data[idx + 2] = 12 * intensity;
                    data[idx + 3] = intensity * 255;
                }
            }
            ctx.putImageData(imageData, 0, 0);
        }

        function animate() {
            time += 1;
            drawFluid(time);
            requestAnimationFrame(animate);
        }
        animate();
    }

    // --- Scroll progress bar ---
    var track = document.querySelector('.scroll-track');
    var fill = track.querySelector('.track-fill');
    var pct = track.querySelector('.track-pct');
    function updateProgress() {
        var scrollTop = window.scrollY;
        var docHeight = document.documentElement.scrollHeight - window.innerHeight;
        var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
        fill.style.height = progress + '%';
        pct.textContent = Math.round(progress) + '%';
        track.setAttribute('aria-valuenow', Math.round(progress));
    }
    window.addEventListener('scroll', updateProgress);
    window.addEventListener('resize', updateProgress);
    updateProgress();

    // --- Tilt effect ---
    var tiltEls = document.querySelectorAll('[data-tilt]');
    tiltEls.forEach(function(el) {
        el.addEventListener('mousemove', function(e) {
            var rect = el.getBoundingClientRect();
            var x = e.clientX - rect.left;
            var y = e.clientY - rect.top;
            var centerX = rect.width / 2;
            var centerY = rect.height / 2;
            var rotateX = (y - centerY) / centerY * -8;
            var rotateY = (x - centerX) / centerX * 8;
            el.style.transform = 'perspective(600px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) translateY(-4px)';
            el.style.setProperty('--mx', ((x / rect.width) * 100) + '%');
            el.style.setProperty('--my', ((y / rect.height) * 100) + '%');
        });
        el.addEventListener('mouseleave', function() {
            el.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) translateY(0px)';
        });
    });
})();
</script>
</body>
</html>