display page corrected

server/static/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Cloud-Native DevOps Debug Environment</title>
-    <meta name="description" content="OpenEnv environment where AI agents learn to debug broken GitHub Actions workflows, Dockerfiles, and Kubernetes manifests.">
+    <meta name="description" content="Train AI agents to debug broken GitHub Actions workflows, Dockerfiles, and Kubernetes manifests. 10 tasks, 50 scenarios, difficulty-aware grading.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <style>
@@ -39,11 +39,8 @@
             overflow-x: hidden;
         }
 
-        /* ── Animated Background ── */
         .bg-grid {
-            position: fixed;
-            inset: 0;
-            z-index: 0;
+            position: fixed; inset: 0; z-index: 0;
             background-image:
                 radial-gradient(circle at 20% 30%, rgba(99,102,241,0.08) 0%, transparent 50%),
                 radial-gradient(circle at 80% 70%, rgba(34,211,238,0.06) 0%, transparent 50%),
@@ -51,438 +48,127 @@
             animation: bgPulse 12s ease-in-out infinite alternate;
         }
         .bg-grid::after {
-            content: '';
-            position: absolute;
-            inset: 0;
+            content: ''; position: absolute; inset: 0;
             background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
                               linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
             background-size: 60px 60px;
         }
-        @keyframes bgPulse {
-            0% { opacity: 1; }
-            100% { opacity: 0.6; transform: scale(1.02); }
-        }
+        @keyframes bgPulse { 0% { opacity: 1; } 100% { opacity: 0.6; transform: scale(1.02); } }
 
-        /* ── Main Container ── */
-        .container {
-            position: relative;
-            z-index: 1;
-            max-width: 1100px;
-            margin: 0 auto;
-            padding: 0 24px;
-        }
+        .container { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
 
-        /* ── Hero Section ── */
-        .hero {
-            text-align: center;
-            padding: 80px 0 60px;
-        }
+        /* Hero */
+        .hero { text-align: center; padding: 80px 0 60px; }
         .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 6px 16px;
-            border-radius: 100px;
-            background: rgba(99,102,241,0.1);
-            border: 1px solid rgba(99,102,241,0.25);
-            font-size: 0.8rem;
-            font-weight: 500;
-            color: var(--accent-indigo);
-            letter-spacing: 0.5px;
-            margin-bottom: 28px;
+            display: inline-flex; align-items: center; gap: 8px;
+            padding: 6px 16px; border-radius: 100px;
+            background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25);
+            font-size: 0.8rem; font-weight: 500; color: var(--accent-indigo);
+            letter-spacing: 0.5px; margin-bottom: 28px;
             animation: fadeInDown 0.6s ease-out;
         }
-        .hero-badge .dot {
-            width: 7px; height: 7px;
-            border-radius: 50%;
-            background: var(--accent-emerald);
-            animation: pulse 2s ease-in-out infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); }
-            50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(52,211,153,0); }
-        }
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-16px); }
-            to   { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to   { opacity: 1; transform: translateY(0); }
-        }
+        .hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-emerald); animation: pulse 2s ease-in-out infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,211,153,0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(52,211,153,0); } }
+        @keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
 
-        .hero h1 {
-            font-size: clamp(2.2rem, 5vw, 3.4rem);
-            font-weight: 800;
-            line-height: 1.15;
-            letter-spacing: -1.5px;
-            margin-bottom: 20px;
-            animation: fadeInUp 0.7s ease-out 0.1s both;
-        }
-        .hero h1 .gradient-text {
-            background: var(--gradient-primary);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .hero p {
-            font-size: 1.15rem;
-            color: var(--text-secondary);
-            max-width: 650px;
-            margin: 0 auto 36px;
-            animation: fadeInUp 0.7s ease-out 0.2s both;
-        }
+        .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 20px; animation: fadeInUp 0.7s ease-out 0.1s both; }
+        .hero h1 .gradient-text { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .hero p { font-size: 1.15rem; color: var(--text-secondary); max-width: 680px; margin: 0 auto 36px; animation: fadeInUp 0.7s ease-out 0.2s both; }
 
-        .hero-actions {
-            display: flex;
-            gap: 14px;
-            justify-content: center;
-            flex-wrap: wrap;
-            animation: fadeInUp 0.7s ease-out 0.3s both;
-        }
-        .btn {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 26px;
-            border-radius: 12px;
-            font-family: inherit;
-            font-size: 0.9rem;
-            font-weight: 600;
-            text-decoration: none;
-            cursor: pointer;
-            border: none;
-            transition: all 0.25s ease;
-        }
-        .btn-primary {
-            background: var(--gradient-primary);
-            color: #0a0e1a;
-        }
+        .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 0.7s ease-out 0.3s both; }
+        .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px; border-radius: 12px; font-family: inherit; font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: all 0.25s ease; }
+        .btn-primary { background: var(--gradient-primary); color: #0a0e1a; }
         .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(99,102,241,0.3); }
-        .btn-secondary {
-            background: rgba(99,102,241,0.1);
-            border: 1px solid rgba(99,102,241,0.25);
-            color: var(--accent-indigo);
-        }
+        .btn-secondary { background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); color: var(--accent-indigo); }
         .btn-secondary:hover { background: rgba(99,102,241,0.18); transform: translateY(-2px); }
 
-        /* ── Stats Strip ── */
-        .stats {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 16px;
-            margin: 0 0 64px;
-            animation: fadeInUp 0.7s ease-out 0.4s both;
-        }
-        .stat-card {
-            text-align: center;
-            padding: 24px 16px;
-            border-radius: 16px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            backdrop-filter: blur(12px);
-            transition: border-color 0.3s;
-        }
+        /* Stats */
+        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 64px; animation: fadeInUp 0.7s ease-out 0.4s both; }
+        .stat-card { text-align: center; padding: 24px 16px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-card); backdrop-filter: blur(12px); transition: border-color 0.3s; }
         .stat-card:hover { border-color: rgba(99,102,241,0.35); }
-        .stat-number {
-            font-size: 2rem;
-            font-weight: 800;
-            letter-spacing: -1px;
-            background: var(--gradient-primary);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .stat-label {
-            font-size: 0.82rem;
-            color: var(--text-muted);
-            margin-top: 4px;
-            font-weight: 500;
-        }
+        .stat-number { font-size: 2rem; font-weight: 800; letter-spacing: -1px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        .stat-label { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
 
-        /* ── Section Headers ── */
+        /* Section */
         .section { margin-bottom: 64px; }
-        .section-header {
-            margin-bottom: 28px;
-        }
-        .section-header h2 {
-            font-size: 1.6rem;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            margin-bottom: 8px;
-        }
-        .section-header p {
-            color: var(--text-secondary);
-            font-size: 0.95rem;
-        }
-
-        /* ── Task Cards ── */
-        .task-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-            gap: 18px;
-        }
-        .task-card {
-            padding: 24px;
-            border-radius: 16px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            backdrop-filter: blur(12px);
-            transition: all 0.3s ease;
-            position: relative;
-            overflow: hidden;
-        }
-        .task-card::before {
-            content: '';
-            position: absolute;
-            top: 0; left: 0; right: 0;
-            height: 3px;
-            border-radius: 16px 16px 0 0;
-        }
-        .task-card:hover {
-            border-color: rgba(99,102,241,0.35);
-            transform: translateY(-4px);
-            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
-        }
-        .task-card.easy::before    { background: linear-gradient(90deg, #34d399, #22d3ee); }
-        .task-card.medium::before  { background: linear-gradient(90deg, #fbbf24, #f97316); }
-        .task-card.hard::before    { background: linear-gradient(90deg, #fb7185, #a78bfa); }
-
-        .task-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            margin-bottom: 12px;
-        }
-        .task-id {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.78rem;
-            color: var(--accent-indigo);
-            background: rgba(99,102,241,0.1);
-            padding: 3px 10px;
-            border-radius: 6px;
-        }
-        .difficulty-badge {
-            font-size: 0.72rem;
-            font-weight: 600;
-            padding: 3px 10px;
-            border-radius: 100px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-        .difficulty-badge.easy    { background: rgba(52,211,153,0.12); color: #34d399; }
-        .difficulty-badge.medium  { background: rgba(251,191,36,0.12); color: #fbbf24; }
+        .section-header { margin-bottom: 28px; }
+        .section-header h2 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
+        .section-header p { color: var(--text-secondary); font-size: 0.95rem; }
+
+        /* Task Cards */
+        .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
+        .task-card { padding: 24px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-card); backdrop-filter: blur(12px); transition: all 0.3s ease; position: relative; overflow: hidden; }
+        .task-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
+        .task-card:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
+        .task-card.easy::before { background: linear-gradient(90deg, #34d399, #22d3ee); }
+        .task-card.medium::before { background: linear-gradient(90deg, #fbbf24, #f97316); }
+        .task-card.hard::before { background: linear-gradient(90deg, #fb7185, #a78bfa); }
+        .task-card.expert::before { background: linear-gradient(90deg, #a78bfa, #818cf8, #fb7185); }
+
+        .task-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
+        .task-id { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent-indigo); background: rgba(99,102,241,0.1); padding: 3px 10px; border-radius: 6px; }
+        .difficulty-badge { font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.5px; }
+        .difficulty-badge.easy { background: rgba(52,211,153,0.12); color: #34d399; }
+        .difficulty-badge.medium { background: rgba(251,191,36,0.12); color: #fbbf24; }
         .difficulty-badge.medium-hard { background: rgba(249,115,22,0.12); color: #f97316; }
-        .difficulty-badge.hard    { background: rgba(251,113,133,0.12); color: #fb7185; }
-
-        .task-card h3 {
-            font-size: 1.05rem;
-            font-weight: 600;
-            margin-bottom: 8px;
-        }
-        .task-card p {
-            font-size: 0.88rem;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-        .task-scenarios {
-            margin-top: 14px;
-            font-size: 0.78rem;
-            color: var(--text-muted);
-            font-weight: 500;
-        }
+        .difficulty-badge.hard { background: rgba(251,113,133,0.12); color: #fb7185; }
+        .difficulty-badge.expert { background: rgba(167,139,250,0.15); color: #a78bfa; }
 
-        /* ── Endpoint Table ── */
-        .endpoint-table {
-            width: 100%;
-            border-collapse: collapse;
-            border-radius: 16px;
-            overflow: hidden;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            backdrop-filter: blur(12px);
-        }
-        .endpoint-table th {
-            text-align: left;
-            padding: 14px 20px;
-            font-size: 0.78rem;
-            font-weight: 600;
-            color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.8px;
-            border-bottom: 1px solid var(--border-card);
-            background: rgba(99,102,241,0.04);
-        }
-        .endpoint-table td {
-            padding: 13px 20px;
-            font-size: 0.88rem;
-            border-bottom: 1px solid rgba(99,102,241,0.06);
-            color: var(--text-secondary);
-        }
-        .endpoint-table tr:last-child td { border-bottom: none; }
-        .endpoint-table tr:hover td { background: rgba(99,102,241,0.03); }
-        .endpoint-path {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.84rem;
-            color: var(--accent-cyan);
-        }
-        .method-badge {
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.72rem;
-            font-weight: 600;
-            padding: 3px 8px;
-            border-radius: 5px;
-            text-transform: uppercase;
-        }
-        .method-badge.get  { background: rgba(52,211,153,0.12); color: #34d399; }
-        .method-badge.post { background: rgba(96,165,250,0.12); color: #60a5fa; }
+        .task-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
+        .task-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; }
+        .task-scenarios { margin-top: 14px; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
 
-        /* ── How It Works Flow ── */
-        .flow-steps {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 18px;
-        }
-        .flow-step {
-            padding: 28px 24px;
-            border-radius: 16px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            backdrop-filter: blur(12px);
-            text-align: center;
-            position: relative;
-            transition: all 0.3s ease;
-        }
+        /* Flow Steps */
+        .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
+        .flow-step { padding: 28px 24px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-card); backdrop-filter: blur(12px); text-align: center; transition: all 0.3s ease; }
         .flow-step:hover { border-color: rgba(99,102,241,0.3); transform: translateY(-3px); }
-        .flow-icon {
-            font-size: 2rem;
-            margin-bottom: 14px;
-            display: block;
-        }
-        .flow-step h3 {
-            font-size: 1rem;
-            font-weight: 700;
-            margin-bottom: 10px;
-        }
-        .flow-step p {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            line-height: 1.6;
-        }
-        .flow-arrow {
-            display: none;
-        }
-
-        /* ── Code Block ── */
-        .code-block {
-            background: rgba(0,0,0,0.4);
-            border: 1px solid var(--border-card);
-            border-radius: 14px;
-            padding: 22px 26px;
-            font-family: 'JetBrains Mono', monospace;
-            font-size: 0.82rem;
-            line-height: 1.8;
-            color: var(--text-secondary);
-            overflow-x: auto;
-            position: relative;
-        }
-        .code-block .comment { color: var(--text-muted); }
-        .code-block .cmd { color: var(--accent-cyan); }
-        .code-block .flag { color: var(--accent-amber); }
-        .code-block .url { color: var(--accent-indigo); }
+        .flow-icon { font-size: 2rem; margin-bottom: 14px; display: block; }
+        .flow-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; }
+        .flow-step p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
 
-        /* ── Grading Section ── */
-        .grading-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-            gap: 16px;
-        }
-        .grade-card {
-            padding: 22px;
-            border-radius: 14px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            text-align: center;
-            transition: all 0.3s ease;
-        }
+        /* Grading */
+        .grading-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
+        .grade-card { padding: 22px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border-card); text-align: center; transition: all 0.3s ease; }
         .grade-card:hover { border-color: rgba(99,102,241,0.3); }
-        .grade-weight {
-            font-size: 1.8rem;
-            font-weight: 800;
-            margin-bottom: 6px;
-        }
+        .grade-weight { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; }
         .grade-card:nth-child(1) .grade-weight { color: var(--accent-emerald); }
         .grade-card:nth-child(2) .grade-weight { color: var(--accent-blue); }
         .grade-card:nth-child(3) .grade-weight { color: var(--accent-amber); }
-        .grade-card:nth-child(4) .grade-weight { color: var(--accent-rose); }
+        .grade-card:nth-child(4) .grade-weight { color: var(--accent-purple); }
+        .grade-card:nth-child(5) .grade-weight { color: var(--accent-rose); }
         .grade-card h4 { font-size: 0.9rem; margin-bottom: 6px; }
         .grade-card p { font-size: 0.8rem; color: var(--text-muted); }
 
-        /* ── Baseline Scores ── */
-        .baseline-bar {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-            padding: 14px 20px;
-            border-radius: 12px;
-            background: var(--bg-card);
-            border: 1px solid var(--border-card);
-            margin-bottom: 10px;
-            transition: all 0.3s;
-        }
-        .baseline-bar:hover { border-color: rgba(99,102,241,0.3); }
-        .baseline-bar .task-name {
-            flex: 0 0 260px;
-            font-size: 0.85rem;
-            font-family: 'JetBrains Mono', monospace;
-            color: var(--text-secondary);
-        }
-        .baseline-bar .bar-track {
-            flex: 1;
-            height: 8px;
-            border-radius: 8px;
-            background: rgba(99,102,241,0.08);
-            overflow: hidden;
-        }
-        .baseline-bar .bar-fill {
-            height: 100%;
-            border-radius: 8px;
-            background: var(--gradient-primary);
-            transition: width 1.5s ease-out;
-        }
-        .baseline-bar .score-value {
-            flex: 0 0 60px;
-            text-align: right;
-            font-weight: 700;
-            font-size: 0.9rem;
-            font-family: 'JetBrains Mono', monospace;
-        }
+        /* Endpoint Table */
+        .endpoint-table { width: 100%; border-collapse: collapse; border-radius: 16px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-card); backdrop-filter: blur(12px); }
+        .endpoint-table th { text-align: left; padding: 14px 20px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; border-bottom: 1px solid var(--border-card); background: rgba(99,102,241,0.04); }
+        .endpoint-table td { padding: 13px 20px; font-size: 0.88rem; border-bottom: 1px solid rgba(99,102,241,0.06); color: var(--text-secondary); }
+        .endpoint-table tr:last-child td { border-bottom: none; }
+        .endpoint-table tr:hover td { background: rgba(99,102,241,0.03); }
+        .endpoint-path { font-family: 'JetBrains Mono', monospace; font-size: 0.84rem; color: var(--accent-cyan); }
+        .method-badge { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; padding: 3px 8px; border-radius: 5px; text-transform: uppercase; }
+        .method-badge.get { background: rgba(52,211,153,0.12); color: #34d399; }
+        .method-badge.post { background: rgba(96,165,250,0.12); color: #60a5fa; }
 
-        /* ── Footer ── */
-        .footer {
-            text-align: center;
-            padding: 48px 0 40px;
-            border-top: 1px solid var(--border-card);
-            margin-top: 40px;
-        }
-        .footer p {
-            font-size: 0.82rem;
-            color: var(--text-muted);
-        }
-        .footer a {
-            color: var(--accent-indigo);
-            text-decoration: none;
-        }
+        /* Code Block */
+        .code-block { background: rgba(0,0,0,0.4); border: 1px solid var(--border-card); border-radius: 14px; padding: 22px 26px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; line-height: 1.8; color: var(--text-secondary); overflow-x: auto; }
+        .code-block .comment { color: var(--text-muted); }
+        .code-block .cmd { color: var(--accent-cyan); }
+        .code-block .flag { color: var(--accent-amber); }
+        .code-block .url { color: var(--accent-indigo); }
+
+        /* Footer */
+        .footer { text-align: center; padding: 48px 0 40px; border-top: 1px solid var(--border-card); margin-top: 40px; }
+        .footer p { font-size: 0.82rem; color: var(--text-muted); }
+        .footer a { color: var(--accent-indigo); text-decoration: none; }
         .footer a:hover { text-decoration: underline; }
 
-        /* ── Responsive ── */
         @media (max-width: 768px) {
             .stats { grid-template-columns: repeat(2, 1fr); }
             .flow-steps { grid-template-columns: 1fr; }
             .task-grid { grid-template-columns: 1fr; }
             .grading-grid { grid-template-columns: repeat(2, 1fr); }
-            .baseline-bar .task-name { flex: 0 0 160px; font-size: 0.75rem; }
-            .endpoint-table { font-size: 0.8rem; }
         }
         @media (max-width: 480px) {
             .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
@@ -497,7 +183,6 @@
 
 <div class="container">
 
-    <!-- ═══ HERO ═══ -->
     <section class="hero">
         <div class="hero-badge">
             <span class="dot"></span>
@@ -508,9 +193,9 @@
             Debug Environment
         </h1>
         <p>
-            An OpenEnv-compatible environment where AI agents learn to debug broken
-            GitHub Actions workflows and Dockerfiles. Built for the OpenEnv Hackathon
-            by Scaler School of Technology.
+            Broken Dockerfiles. Misconfigured workflows. K8s pods stuck in CrashLoopBackOff.
+            This environment throws real-world deployment failures at AI agents and
+            measures how well they can track down the root cause and fix it.
         </p>
         <div class="hero-actions">
             <a href="/info" class="btn btn-primary">
@@ -528,56 +213,56 @@
         </div>
     </section>
 
-    <!-- ═══ STATS ═══ -->
+    <!-- Stats -->
     <div class="stats">
         <div class="stat-card">
-            <div class="stat-number">6</div>
+            <div class="stat-number">10</div>
             <div class="stat-label">Task Categories</div>
         </div>
         <div class="stat-card">
-            <div class="stat-number">30</div>
+            <div class="stat-number">50</div>
             <div class="stat-label">Unique Scenarios</div>
         </div>
         <div class="stat-card">
-            <div class="stat-number">12</div>
-            <div class="stat-label">API Endpoints</div>
+            <div class="stat-number">3</div>
+            <div class="stat-label">Simulators (Docker, GHA, K8s)</div>
         </div>
         <div class="stat-card">
-            <div class="stat-number">0.547</div>
-            <div class="stat-label">Baseline Score (Llama 70B)</div>
+            <div class="stat-number">12</div>
+            <div class="stat-label">API Endpoints</div>
         </div>
     </div>
 
-    <!-- ═══ HOW IT WORKS ═══ -->
+    <!-- How It Works -->
     <section class="section">
         <div class="section-header">
             <h2>How It Works</h2>
-            <p>Three-phase loop: receive broken configs, fix them, get graded.</p>
+            <p>Same loop every DevOps engineer runs through, just faster.</p>
         </div>
         <div class="flow-steps">
             <div class="flow-step">
-                <span class="flow-icon">📥</span>
+                <span class="flow-icon">&#x1F4E5;</span>
                 <h3>1. Reset</h3>
-                <p>Agent receives broken Dockerfile or GitHub Actions YAML, error messages, and available secrets.</p>
+                <p>Agent gets broken config files &mdash; a Dockerfile, a workflow YAML, some K8s manifests &mdash; along with whatever error the pipeline spit out.</p>
             </div>
             <div class="flow-step">
-                <span class="flow-icon">🔧</span>
-                <h3>2. Observe → Act</h3>
-                <p>Read errors, analyze files, edit content, replace lines, or request hints. Up to 10 steps per episode.</p>
+                <span class="flow-icon">&#x1F527;</span>
+                <h3>2. Observe &rarr; Act</h3>
+                <p>Read the error, find the bug, edit the file. Could be a typo, a wrong port, a missing secret. Up to 10 steps to get it right.</p>
             </div>
             <div class="flow-step">
-                <span class="flow-icon">📊</span>
+                <span class="flow-icon">&#x1F4CA;</span>
                 <h3>3. Grade</h3>
-                <p>Deterministic scoring based on issues fixed, efficiency, and hint usage. Score range: 0.0 → 1.0.</p>
+                <p>Deterministic scoring: how many issues got fixed, how quickly, and whether hints were needed. Harder tasks are graded more generously.</p>
             </div>
         </div>
     </section>
 
-    <!-- ═══ TASKS ═══ -->
+    <!-- Tasks -->
     <section class="section">
         <div class="section-header">
-            <h2>The 6 Tasks</h2>
-            <p>30 scenarios across 6 categories with clear difficulty progression.</p>
+            <h2>10 Tasks, 50 Scenarios</h2>
+            <p>From single-typo Dockerfile fixes to multi-bug pipeline debugging across GHA + Docker + K8s.</p>
         </div>
         <div class="task-grid">
             <div class="task-card easy">
@@ -586,7 +271,7 @@
                     <span class="difficulty-badge easy">Easy</span>
                 </div>
                 <h3>Dockerfile Syntax Errors</h3>
-                <p>Simple typos and instruction errors that break <code>docker build</code> — misspelled filenames, invalid base images, broken line continuations.</p>
+                <p>The classic stuff &mdash; misspelled filenames, bad base image tags, broken <code>RUN</code> continuations. Things that make <code>docker build</code> fail immediately.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
             <div class="task-card medium">
@@ -595,7 +280,7 @@
                     <span class="difficulty-badge medium">Medium</span>
                 </div>
                 <h3>Dockerfile Runtime Errors</h3>
-                <p>Dockerfile builds but the container crashes at runtime — missing WORKDIR, CMD/ENTRYPOINT conflicts, permission issues.</p>
+                <p>It builds fine, then crashes at runtime. Missing WORKDIR, CMD/ENTRYPOINT conflicts, permission issues, missing env vars.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
             <div class="task-card easy">
@@ -604,7 +289,7 @@
                     <span class="difficulty-badge easy">Easy</span>
                 </div>
                 <h3>Workflow Syntax &amp; Structure</h3>
-                <p>GitHub Actions YAML with structural problems — missing <code>runs-on</code>, invalid triggers, steps without actions.</p>
+                <p>GitHub Actions YAML that GitHub refuses to even parse. Missing <code>runs-on</code>, wrong trigger format, steps without actions.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
             <div class="task-card medium">
@@ -613,7 +298,7 @@
                     <span class="difficulty-badge medium">Medium</span>
                 </div>
                 <h3>Secrets &amp; Permissions</h3>
-                <p>Secrets exist but aren't wired correctly — missing <code>env:</code> blocks, wrong syntax, missing token permissions.</p>
+                <p>The secret is right there in the repo settings, but the workflow can't see it. Missing <code>env:</code> blocks, wrong <code>${{ }}</code> syntax, token permission gaps.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
             <div class="task-card medium">
@@ -622,7 +307,7 @@
                     <span class="difficulty-badge medium-hard">Medium-Hard</span>
                 </div>
                 <h3>CI + Docker Integration</h3>
-                <p>Workflow and Dockerfile interact — fixing one alone isn't enough. Build context mismatches, missing login steps.</p>
+                <p>The workflow and Dockerfile depend on each other. Build context mismatches, missing buildx setup, login without secrets.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
             <div class="task-card hard">
@@ -631,191 +316,131 @@
                     <span class="difficulty-badge hard">Hard</span>
                 </div>
                 <h3>Multi-Stage &amp; Matrix Pipelines</h3>
-                <p>Complex pipelines with 2-3 interacting bugs across multiple files. Artifact mismatches, matrix failures, cross-job dependencies.</p>
+                <p>Multi-stage builds, matrix strategies, cross-job artifacts. Two or three bugs that only make sense when you look at the files together.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card medium">
+                <div class="task-header">
+                    <span class="task-id">k8s_pod_failures</span>
+                    <span class="difficulty-badge medium">Medium</span>
+                </div>
+                <h3>Kubernetes Pod Failures</h3>
+                <p>Pods stuck in CrashLoopBackOff or ImagePullBackOff. OOM kills, wrong commands, missing ConfigMaps, misconfigured probes.</p>
                 <div class="task-scenarios">5 scenarios</div>
             </div>
+            <div class="task-card hard">
+                <div class="task-header">
+                    <span class="task-id">k8s_networking</span>
+                    <span class="difficulty-badge hard">Hard</span>
+                </div>
+                <h3>K8s Service &amp; Ingress Issues</h3>
+                <p>Pods are running, but nobody can reach them. Selector mismatches, wrong targetPorts, NetworkPolicies blocking traffic, missing ingress classes.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card hard">
+                <div class="task-header">
+                    <span class="task-id">pipeline_build_deploy</span>
+                    <span class="difficulty-badge hard">Hard</span>
+                </div>
+                <h3>Build &amp; Push Pipeline</h3>
+                <p>End-to-end GHA-to-Docker-to-Registry failures. GHCR tokens not wired, image tag mismatches between build and push, missing permissions.</p>
+                <div class="task-scenarios">5 scenarios</div>
+            </div>
+            <div class="task-card expert">
+                <div class="task-header">
+                    <span class="task-id">pipeline_full_stack</span>
+                    <span class="difficulty-badge expert">Expert</span>
+                </div>
+                <h3>Full Stack Pipeline</h3>
+                <p>The real deal &mdash; 2 to 4 bugs scattered across a GHA workflow, Dockerfile, and K8s manifests at the same time. Requires cross-file reasoning.</p>
+                <div class="task-scenarios">5 scenarios &middot; multi-error</div>
+            </div>
         </div>
     </section>
 
-    <!-- ═══ GRADING ═══ -->
+    <!-- Grading -->
     <section class="section">
         <div class="section-header">
-            <h2>Grading System</h2>
-            <p>Deterministic and dynamic — same actions always produce the same score.</p>
+            <h2>Grading</h2>
+            <p>Deterministic, difficulty-aware scoring. Same actions, same score. Harder tasks get more room to breathe.</p>
         </div>
         <div class="grading-grid">
             <div class="grade-card">
-                <div class="grade-weight">40%</div>
+                <div class="grade-weight">35%</div>
                 <h4>Partial Fixes</h4>
-                <p>Proportional to fraction of issues fixed</p>
+                <p>Credit for each issue you fix, even if you don't get them all</p>
             </div>
             <div class="grade-card">
-                <div class="grade-weight">30%</div>
+                <div class="grade-weight">25%</div>
                 <h4>Complete Bonus</h4>
-                <p>All-or-nothing bonus when every issue is fixed</p>
+                <p>Extra credit when every single issue is resolved</p>
             </div>
             <div class="grade-card">
-                <div class="grade-weight">30%</div>
+                <div class="grade-weight">25%</div>
                 <h4>Efficiency</h4>
-                <p>Bonus for solving in minimal steps</p>
+                <p>Fewer steps is better &mdash; decay is gentler on hard tasks</p>
             </div>
             <div class="grade-card">
-                <div class="grade-weight">−5%</div>
-                <h4>Hint Penalty</h4>
-                <p>Per hint requested by the agent</p>
-            </div>
-        </div>
-    </section>
-
-    <!-- ═══ BASELINE RESULTS ═══ -->
-    <section class="section">
-        <div class="section-header">
-            <h2>Baseline Results</h2>
-            <p>Tested with <code style="color:var(--accent-cyan)">meta-llama/Llama-3.1-70B-Instruct</code> via HuggingFace router.</p>
-        </div>
-        <div class="baseline-bars">
-            <div class="baseline-bar">
-                <span class="task-name">dockerfile_syntax</span>
-                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
-                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
+                <div class="grade-weight">+3%</div>
+                <h4>Difficulty Bonus</h4>
+                <p>Solving hard/expert tasks perfectly earns extra points</p>
             </div>
-            <div class="baseline-bar">
-                <span class="task-name">dockerfile_runtime</span>
-                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
-                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
-            </div>
-            <div class="baseline-bar">
-                <span class="task-name">workflow_syntax_structure</span>
-                <div class="bar-track"><div class="bar-fill" data-width="0"></div></div>
-                <span class="score-value" style="color:var(--accent-rose)">0.000</span>
-            </div>
-            <div class="baseline-bar">
-                <span class="task-name">workflow_secrets_permissions</span>
-                <div class="bar-track"><div class="bar-fill" data-width="100"></div></div>
-                <span class="score-value" style="color:var(--accent-emerald)">1.000</span>
-            </div>
-            <div class="baseline-bar">
-                <span class="task-name">ci_docker_integration</span>
-                <div class="bar-track"><div class="bar-fill" data-width="0"></div></div>
-                <span class="score-value" style="color:var(--accent-rose)">0.000</span>
-            </div>
-            <div class="baseline-bar">
-                <span class="task-name">multi_stage_pipeline_matrix</span>
-                <div class="bar-track"><div class="bar-fill" data-width="28"></div></div>
-                <span class="score-value" style="color:var(--accent-amber)">0.283</span>
-            </div>
-            <div class="baseline-bar" style="border-color: rgba(99,102,241,0.3);">
-                <span class="task-name" style="font-weight:700; color:var(--text-primary);">OVERALL</span>
-                <div class="bar-track"><div class="bar-fill" data-width="55"></div></div>
-                <span class="score-value" style="color:var(--accent-indigo); font-size:1rem;">0.547</span>
+            <div class="grade-card">
+                <div class="grade-weight">&minus;3-4%</div>
+                <h4>Hint Penalty</h4>
+                <p>Per hint used &mdash; cheaper on harder tasks where hints are fair</p>
             </div>
         </div>
     </section>
 
-    <!-- ═══ API ENDPOINTS ═══ -->
+    <!-- API Endpoints -->
     <section class="section">
         <div class="section-header">
             <h2>API Endpoints</h2>
-            <p>12 endpoints for environment control, grading, and introspection.</p>
+            <p>Everything you need to run episodes, grade trajectories, and inspect the environment.</p>
         </div>
         <table class="endpoint-table">
             <thead>
-                <tr>
-                    <th>Endpoint</th>
-                    <th>Method</th>
-                    <th>Description</th>
-                </tr>
+                <tr><th>Endpoint</th><th>Method</th><th>Description</th></tr>
             </thead>
             <tbody>
-                <tr>
-                    <td><span class="endpoint-path">/health</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Health check — returns <code>{"status": "healthy"}</code></td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/metadata</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Environment name, description, version, tags</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/schema</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Action, observation, and state JSON schemas</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/reset</span></td>
-                    <td><span class="method-badge post">POST</span></td>
-                    <td>Start a new episode (optional: task_id, scenario_id, seed)</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/step</span></td>
-                    <td><span class="method-badge post">POST</span></td>
-                    <td>Take an action and receive observation + reward</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/state</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Get current observation without acting</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/info</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Task list with metadata</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/tasks</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>All tasks with difficulty levels</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/grader</span></td>
-                    <td><span class="method-badge post">POST</span></td>
-                    <td>Grade a trajectory (list of step dicts)</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/baseline</span></td>
-                    <td><span class="method-badge post">POST</span></td>
-                    <td>Run built-in heuristic baseline</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/mcp</span></td>
-                    <td><span class="method-badge post">POST</span></td>
-                    <td>JSON-RPC 2.0 MCP endpoint</td>
-                </tr>
-                <tr>
-                    <td><span class="endpoint-path">/docs</span></td>
-                    <td><span class="method-badge get">GET</span></td>
-                    <td>Interactive Swagger API documentation</td>
-                </tr>
+                <tr><td><span class="endpoint-path">/health</span></td><td><span class="method-badge get">GET</span></td><td>Returns <code>{"status": "healthy"}</code></td></tr>
+                <tr><td><span class="endpoint-path">/metadata</span></td><td><span class="method-badge get">GET</span></td><td>Environment name, version, tags</td></tr>
+                <tr><td><span class="endpoint-path">/tasks</span></td><td><span class="method-badge get">GET</span></td><td>All 10 tasks with difficulty levels</td></tr>
+                <tr><td><span class="endpoint-path">/info</span></td><td><span class="method-badge get">GET</span></td><td>Full task list with schemas</td></tr>
+                <tr><td><span class="endpoint-path">/reset</span></td><td><span class="method-badge post">POST</span></td><td>Start a new episode (pick a task or get a random one)</td></tr>
+                <tr><td><span class="endpoint-path">/step</span></td><td><span class="method-badge post">POST</span></td><td>Take an action, get back observation + reward</td></tr>
+                <tr><td><span class="endpoint-path">/state</span></td><td><span class="method-badge get">GET</span></td><td>Current observation without acting</td></tr>
+                <tr><td><span class="endpoint-path">/grader</span></td><td><span class="method-badge post">POST</span></td><td>Score a trajectory after the episode</td></tr>
+                <tr><td><span class="endpoint-path">/baseline</span></td><td><span class="method-badge post">POST</span></td><td>Run the built-in heuristic baseline</td></tr>
+                <tr><td><span class="endpoint-path">/schema</span></td><td><span class="method-badge get">GET</span></td><td>Action and observation JSON schemas</td></tr>
+                <tr><td><span class="endpoint-path">/mcp</span></td><td><span class="method-badge post">POST</span></td><td>JSON-RPC 2.0 MCP endpoint</td></tr>
+                <tr><td><span class="endpoint-path">/docs</span></td><td><span class="method-badge get">GET</span></td><td>Interactive Swagger docs</td></tr>
             </tbody>
         </table>
     </section>
 
-    <!-- ═══ QUICK START ═══ -->
+    <!-- Quick Start -->
     <section class="section">
         <div class="section-header">
-            <h2>Quick Start</h2>
-            <p>Run a full episode in 3 commands.</p>
+            <h2>Try It</h2>
+            <p>Fix a K8s OOMKilled pod in 3 commands.</p>
         </div>
         <div class="code-block">
-<span class="comment"># 1. Start an episode</span>
+<span class="comment"># 1. Get a broken K8s deployment with OOMKilled pods</span>
 <span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/reset</span> \
   -H <span class="flag">"Content-Type: application/json"</span> \
-  -d '{"task_id": "dockerfile_syntax", "scenario_id": "typo_filename"}'
+  -d '{"task_id": "k8s_pod_failures", "scenario_id": "oom_killed"}'
 
-<span class="comment"># 2. Fix the typo</span>
+<span class="comment"># 2. Bump the memory limit from 64Mi to 256Mi</span>
 <span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/step</span> \
   -H <span class="flag">"Content-Type: application/json"</span> \
-  -d '{"action": {"action_type": "edit_file", "edits": [{"file_path": "Dockerfile", "old_content": "COPY requirments.txt .", "new_content": "COPY requirements.txt ."}]}}'
+  -d '{"action": {"action_type": "edit_file", "edits": [{"file_path": "k8s/deployment.yaml", "old_content": "memory: \"64Mi\"", "new_content": "memory: \"256Mi\""}]}}'
 
-<span class="comment"># 3. Submit</span>
-<span class="cmd">curl</span> -X POST <span class="url">http://localhost:8000/step</span> \
-  -H <span class="flag">"Content-Type: application/json"</span> \
-  -d '{"action": {"action_type": "submit"}}'
+<span class="comment"># 3. Done - issues_fixed: 1/1, reward: 0.3</span>
         </div>
     </section>
 
-    <!-- ═══ FOOTER ═══ -->
     <footer class="footer">
         <p>
             Built for the <strong>OpenEnv Hackathon</strong> by
@@ -828,35 +453,16 @@
 </div>
 
 <script>
-    // Animate baseline score bars on scroll
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.querySelectorAll('.bar-fill').forEach(bar => {
-                    bar.style.width = bar.dataset.width + '%';
-                });
-                observer.unobserve(entry.target);
-            }
-        });
-    }, { threshold: 0.3 });
-
-    const bars = document.querySelector('.baseline-bars');
-    if (bars) {
-        bars.querySelectorAll('.bar-fill').forEach(b => b.style.width = '0%');
-        observer.observe(bars);
-    }
-
-    // Staggered card entrance animation
     const cards = document.querySelectorAll('.task-card, .grade-card, .flow-step');
-    const cardObserver = new IntersectionObserver((entries) => {
+    const obs = new IntersectionObserver((entries) => {
         entries.forEach((entry, i) => {
             if (entry.isIntersecting) {
                 entry.target.style.animation = `fadeInUp 0.5s ease-out ${i * 0.06}s both`;
-                cardObserver.unobserve(entry.target);
+                obs.unobserve(entry.target);
             }
         });
     }, { threshold: 0.15 });
-    cards.forEach(c => cardObserver.observe(c));
+    cards.forEach(c => obs.observe(c));
 </script>
 
 </body>