Upload app.py with huggingface_hub

app.py

@@ -4,13 +4,6 @@ FastAPI server exposing the Content Moderation Queue OpenEnv environment.
 Each call to /reset creates an isolated session with its own state.
 Pass the returned session_id to /step and /state to avoid interference
 between concurrent users or test runs.
-
-Endpoints:
-  GET  /health                    - liveness check
-  GET  /tasks                     - list all available tasks
-  POST /reset                     - start a new episode, returns Observation + session_id
-  POST /step?session_id=X         - submit action for your session
-  GET  /state?session_id=X        - snapshot of your session state
 """
 
 import uuid
@@ -22,116 +15,202 @@ from fastapi.responses import HTMLResponse
 from environment import ContentModerationEnv
 from environment.models import Action, Observation, StepResult, EnvironmentState
 
-SWAGGER_CSS = """
-/* ═══ Custom Swagger Theme — Glassmorphism ═══ */
-body { background: #3d4a3c !important; }
-
-.swagger-ui .topbar { background: #2e3a2d !important; border-bottom: 1px solid rgba(140,160,130,0.25); }
-.swagger-ui .topbar .download-url-wrapper .select-label select { border-color: rgba(140,160,130,0.3) !important; }
-.swagger-ui .topbar a { color: #d4d8c8 !important; }
+# ═══════════════════════════════════════════════════════════════════════════
+# Swagger CSS — warm cozy theme
+# ═══════════════════════════════════════════════════════════════════════════
 
-.swagger-ui { color: #d4d8c8 !important; }
-.swagger-ui .info .title { color: #eef0e4 !important; }
-.swagger-ui .info .description p { color: #9aa392 !important; }
-.swagger-ui .info .title small.version-stamp { background: rgba(255,107,157,0.2) !important; color: #ff6b9d !important; border: 1px solid rgba(255,107,157,0.3) !important; }
-
-/* Scheme container */
-.swagger-ui .scheme-container { background: rgba(60,72,58,0.6) !important; border: 1px solid rgba(140,160,130,0.2) !important; border-radius: 10px !important; box-shadow: none !important; }
+SWAGGER_CSS = """
+body { background: #fdf0dc !important; }
+
+.swagger-ui .topbar {
+  background: linear-gradient(135deg, #f4a833, #e8923a) !important;
+  border-bottom: 2px solid #e8923a !important;
+  padding: 10px 0 !important;
+}
+.swagger-ui .topbar a { color: #fff !important; }
+.swagger-ui .topbar .download-url-wrapper .select-label select {
+  border-color: rgba(255,255,255,0.3) !important;
+  color: #fff !important;
+}
+
+.swagger-ui { color: #5a4530 !important; font-family: 'Inter', system-ui, sans-serif !important; }
+.swagger-ui .info .title { color: #3d2b1a !important; font-weight: 700 !important; }
+.swagger-ui .info .description p { color: #7a6550 !important; }
+.swagger-ui .info .title small.version-stamp {
+  background: #f4a833 !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 12px !important;
+}
+
+.swagger-ui .scheme-container {
+  background: #fbe8c8 !important;
+  border: 1px solid #f0d4a0 !important;
+  border-radius: 14px !important;
+  box-shadow: 0 2px 8px rgba(180,140,80,0.08) !important;
+}
 
 /* Operation blocks */
-.swagger-ui .opblock { border: 1px solid rgba(140,160,130,0.2) !important; border-radius: 10px !important; background: rgba(60,72,58,0.5) !important; backdrop-filter: blur(12px); box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important; margin-bottom: 12px !important; }
-.swagger-ui .opblock .opblock-summary { border: none !important; border-radius: 10px !important; }
-.swagger-ui .opblock .opblock-summary-method { border-radius: 6px !important; font-weight: 700 !important; }
-.swagger-ui .opblock .opblock-summary-description { color: #9aa392 !important; }
-.swagger-ui .opblock .opblock-summary-path { color: #eef0e4 !important; }
-.swagger-ui .opblock .opblock-summary-path__deprecated { color: #666 !important; }
-
-/* GET blocks */
-.swagger-ui .opblock-get { background: rgba(90,228,200,0.06) !important; border-color: rgba(90,228,200,0.2) !important; }
-.swagger-ui .opblock-get .opblock-summary-method { background: rgba(90,228,200,0.2) !important; color: #5ae4c8 !important; }
+.swagger-ui .opblock {
+  border-radius: 14px !important;
+  box-shadow: 0 2px 10px rgba(180,140,80,0.08) !important;
+  margin-bottom: 14px !important;
+  overflow: hidden !important;
+}
+.swagger-ui .opblock .opblock-summary { border: none !important; }
+.swagger-ui .opblock .opblock-summary-method { border-radius: 8px !important; font-weight: 700 !important; }
+.swagger-ui .opblock .opblock-summary-description { color: #7a6550 !important; }
+.swagger-ui .opblock .opblock-summary-path { color: #3d2b1a !important; }
+
+/* GET blocks — warm teal */
+.swagger-ui .opblock-get {
+  background: #fef9f0 !important;
+  border: 1.5px solid #b8d8c8 !important;
+}
+.swagger-ui .opblock-get .opblock-summary-method {
+  background: #5baa8a !important;
+  color: #fff !important;
+}
 .swagger-ui .opblock-get .opblock-summary { border-color: transparent !important; }
 
-/* POST blocks */
-.swagger-ui .opblock-post { background: rgba(255,107,157,0.06) !important; border-color: rgba(255,107,157,0.2) !important; }
-.swagger-ui .opblock-post .opblock-summary-method { background: rgba(255,107,157,0.2) !important; color: #ff6b9d !important; }
+/* POST blocks — warm orange */
+.swagger-ui .opblock-post {
+  background: #fef6ed !important;
+  border: 1.5px solid #f0c880 !important;
+}
+.swagger-ui .opblock-post .opblock-summary-method {
+  background: #f4a833 !important;
+  color: #fff !important;
+}
 .swagger-ui .opblock-post .opblock-summary { border-color: transparent !important; }
 
-/* Expanded operation body */
-.swagger-ui .opblock-body { background: rgba(50,62,48,0.4) !important; }
-.swagger-ui .opblock-body pre { background: #2a3428 !important; color: #d4d8c8 !important; border: 1px solid rgba(140,160,130,0.15) !important; border-radius: 8px !important; }
-.swagger-ui .opblock-description-wrapper p { color: #9aa392 !important; }
-.swagger-ui table thead tr td { color: #9aa392 !important; border-color: rgba(140,160,130,0.15) !important; }
-.swagger-ui table thead tr th { color: #9aa392 !important; border-color: rgba(140,160,130,0.15) !important; }
-.swagger-ui table tbody tr td { color: #d4d8c8 !important; border-color: rgba(140,160,130,0.1) !important; }
+/* Body */
+.swagger-ui .opblock-body { background: #fdf5e8 !important; }
+.swagger-ui .opblock-body pre {
+  background: #fef9f0 !important;
+  color: #5a4530 !important;
+  border: 1px solid #f0d4a0 !important;
+  border-radius: 10px !important;
+}
+.swagger-ui .opblock-description-wrapper p { color: #7a6550 !important; }
+
+/* Tables */
+.swagger-ui table thead tr td, .swagger-ui table thead tr th {
+  color: #7a6550 !important;
+  border-color: #f0d4a0 !important;
+}
+.swagger-ui table tbody tr td {
+  color: #5a4530 !important;
+  border-color: #f5e0c0 !important;
+}
 
 /* Parameters */
-.swagger-ui .parameters-col_description p { color: #9aa392 !important; }
-.swagger-ui .parameter__name { color: #eef0e4 !important; }
-.swagger-ui .parameter__type { color: #5ae4c8 !important; }
-.swagger-ui .parameter__name.required::after { color: #ff6b9d !important; }
-.swagger-ui input[type=text] { background: #2a3428 !important; color: #d4d8c8 !important; border: 1px solid rgba(140,160,130,0.25) !important; border-radius: 6px !important; }
-.swagger-ui textarea { background: #2a3428 !important; color: #d4d8c8 !important; border: 1px solid rgba(140,160,130,0.25) !important; border-radius: 6px !important; }
-.swagger-ui select { background: #2a3428 !important; color: #d4d8c8 !important; border: 1px solid rgba(140,160,130,0.25) !important; border-radius: 6px !important; }
+.swagger-ui .parameter__name { color: #3d2b1a !important; }
+.swagger-ui .parameter__type { color: #5baa8a !important; }
+.swagger-ui .parameter__name.required::after { color: #e86040 !important; }
+.swagger-ui .parameters-col_description p { color: #7a6550 !important; }
+
+/* Inputs */
+.swagger-ui input[type=text], .swagger-ui textarea, .swagger-ui select {
+  background: #fef9f0 !important;
+  color: #3d2b1a !important;
+  border: 1.5px solid #f0d4a0 !important;
+  border-radius: 10px !important;
+  font-family: 'JetBrains Mono', monospace !important;
+}
+.swagger-ui input[type=text]:focus, .swagger-ui textarea:focus {
+  border-color: #f4a833 !important;
+  box-shadow: 0 0 0 3px rgba(244,168,51,0.15) !important;
+}
 
 /* Execute button */
-.swagger-ui .btn.execute { background: linear-gradient(135deg, #ff6b9d, #e05090) !important; color: #fff !important; border: none !important; border-radius: 8px !important; box-shadow: 0 2px 12px rgba(255,107,157,0.25) !important; font-weight: 600 !important; }
-.swagger-ui .btn.execute:hover { box-shadow: 0 4px 20px rgba(255,107,157,0.4) !important; }
-
-/* Try it out button */
-.swagger-ui .try-out__btn { color: #5ae4c8 !important; border-color: rgba(90,228,200,0.3) !important; border-radius: 8px !important; }
-.swagger-ui .try-out__btn:hover { background: rgba(90,228,200,0.1) !important; }
-
-/* Cancel button */
-.swagger-ui .btn-group .cancel { color: #9aa392 !important; border-color: rgba(140,160,130,0.25) !important; }
-
-/* Response section */
+.swagger-ui .btn.execute {
+  background: linear-gradient(135deg, #f4a833, #e8923a) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 10px !important;
+  box-shadow: 0 3px 12px rgba(244,168,51,0.3) !important;
+  font-weight: 600 !important;
+  padding: 8px 24px !important;
+}
+.swagger-ui .btn.execute:hover {
+  box-shadow: 0 5px 20px rgba(244,168,51,0.4) !important;
+  transform: translateY(-1px);
+}
+
+/* Try-out button */
+.swagger-ui .try-out__btn {
+  color: #f4a833 !important;
+  border-color: #f0c880 !important;
+  border-radius: 10px !important;
+}
+.swagger-ui .try-out__btn:hover { background: rgba(244,168,51,0.08) !important; }
+
+/* Cancel */
+.swagger-ui .btn-group .cancel { color: #7a6550 !important; border-color: #e0c8a0 !important; }
+
+/* Responses */
 .swagger-ui .responses-inner { background: transparent !important; }
-.swagger-ui .response-col_status { color: #5ae4c8 !important; }
-.swagger-ui .response-col_description { color: #9aa392 !important; }
-.swagger-ui .responses-table .response { border-color: rgba(140,160,130,0.1) !important; }
+.swagger-ui .response-col_status { color: #5baa8a !important; font-weight: 600 !important; }
+.swagger-ui .response-col_description { color: #7a6550 !important; }
 
 /* Live response */
-.swagger-ui .live-responses-table .response { border-color: rgba(140,160,130,0.15) !important; }
-.swagger-ui .microlight { background: #2a3428 !important; color: #d4d8c8 !important; border-radius: 8px !important; border: 1px solid rgba(140,160,130,0.15) !important; }
-
-/* Models section */
-.swagger-ui section.models { border: 1px solid rgba(140,160,130,0.2) !important; border-radius: 10px !important; background: rgba(60,72,58,0.4) !important; }
-.swagger-ui section.models h4 { color: #eef0e4 !important; border-color: rgba(140,160,130,0.15) !important; }
-.swagger-ui .model-title { color: #eef0e4 !important; }
-.swagger-ui .model { color: #d4d8c8 !important; }
-.swagger-ui .model .property { color: #9aa392 !important; }
-.swagger-ui .model .property.primitive { color: #5ae4c8 !important; }
-.swagger-ui .prop-type { color: #c4a6ff !important; }
-.swagger-ui .model-box { background: rgba(50,62,48,0.3) !important; border-radius: 8px !important; }
-.swagger-ui section.models .model-container { background: rgba(50,62,48,0.3) !important; border-radius: 8px !important; margin: 4px 0 !important; }
+.swagger-ui .microlight {
+  background: #fef9f0 !important;
+  color: #5a4530 !important;
+  border-radius: 10px !important;
+  border: 1px solid #f0d4a0 !important;
+}
+
+/* Models */
+.swagger-ui section.models {
+  border: 1.5px solid #f0d4a0 !important;
+  border-radius: 14px !important;
+  background: #fef6ed !important;
+}
+.swagger-ui section.models h4 { color: #3d2b1a !important; border-color: #f0d4a0 !important; }
+.swagger-ui .model-title { color: #3d2b1a !important; }
+.swagger-ui .model { color: #5a4530 !important; }
+.swagger-ui .model .property { color: #7a6550 !important; }
+.swagger-ui .model .property.primitive { color: #5baa8a !important; }
+.swagger-ui .prop-type { color: #c47830 !important; }
+.swagger-ui .model-box { background: #fdf5e8 !important; border-radius: 10px !important; }
+.swagger-ui section.models .model-container {
+  background: #fdf5e8 !important;
+  border-radius: 10px !important;
+  margin: 4px 0 !important;
+}
 
 /* Links */
-.swagger-ui a { color: #ff6b9d !important; }
-.swagger-ui a:hover { color: #ff8ab5 !important; }
-
-/* Section tag headers */
-.swagger-ui .opblock-tag { color: #eef0e4 !important; border-color: rgba(140,160,130,0.15) !important; }
-
-/* Scrollbar */
-.swagger-ui ::-webkit-scrollbar { width: 6px; }
-.swagger-ui ::-webkit-scrollbar-track { background: #2e3a2d; }
-.swagger-ui ::-webkit-scrollbar-thumb { background: rgba(140,160,130,0.3); border-radius: 3px; }
+.swagger-ui a { color: #e08030 !important; }
+.swagger-ui a:hover { color: #c06020 !important; }
 
-/* Loading */
-.swagger-ui .loading-container .loading::after { color: #9aa392 !important; }
+/* Section tags */
+.swagger-ui .opblock-tag { color: #3d2b1a !important; border-color: #f0d4a0 !important; }
 
-/* Arrow icons */
-.swagger-ui .expand-operation svg, .swagger-ui .expand-methods svg { fill: #9aa392 !important; }
+/* Expand arrows */
+.swagger-ui .expand-operation svg, .swagger-ui .expand-methods svg { fill: #c4a070 !important; }
 
-/* Copy button */
-.swagger-ui .copy-to-clipboard { background: rgba(90,228,200,0.1) !important; border-radius: 4px !important; }
+/* Markdown */
+.swagger-ui .markdown p, .swagger-ui .renderedMarkdown p { color: #7a6550 !important; }
+.swagger-ui .markdown li, .swagger-ui .renderedMarkdown li { color: #7a6550 !important; }
+.swagger-ui .markdown code {
+  background: #fbe8c8 !important;
+  color: #c47830 !important;
+  border-radius: 6px !important;
+  padding: 1px 6px !important;
+}
 
-/* Markdown content */
-.swagger-ui .markdown p, .swagger-ui .renderedMarkdown p { color: #9aa392 !important; }
-.swagger-ui .markdown li, .swagger-ui .renderedMarkdown li { color: #9aa392 !important; }
-.swagger-ui .markdown code { background: #2a3428 !important; color: #5ae4c8 !important; border-radius: 4px !important; padding: 1px 5px !important; }
+/* Scrollbar */
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #fdf0dc; }
+::-webkit-scrollbar-thumb { background: #e0c8a0; border-radius: 3px; }
 """
 
+# ═══════════════════════════════════════════════════════════════════════════
+# App setup
+# ═══════════════════════════════════════════════════════════════════════��═══
+
 app = FastAPI(
     title="Content Moderation Queue — OpenEnv",
     description=(
@@ -141,7 +220,7 @@ app = FastAPI(
         "Each /reset call creates an isolated session — pass session_id to /step and /state."
     ),
     version="1.0.0",
-    docs_url=None,  # disable default, we serve custom below
+    docs_url=None,
 )
 
 app.add_middleware(
@@ -151,12 +230,8 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Session store: session_id → ContentModerationEnv instance
-# Keeps last 200 sessions to prevent memory bloat
 _sessions: Dict[str, ContentModerationEnv] = {}
 MAX_SESSIONS = 200
-
-# Shared env used only for /tasks and /health (stateless calls)
 _shared_env = ContentModerationEnv()
 
 
@@ -170,8 +245,7 @@ def _get_session(session_id: str) -> ContentModerationEnv:
 
 
 def _new_session() -> tuple[str, ContentModerationEnv]:
-    """Create a new isolated session, evict oldest if over limit."""
-    sid = str(uuid.uuid4())[:8]   # short 8-char ID, easy to copy in Swagger
+    sid = str(uuid.uuid4())[:8]
     if len(_sessions) >= MAX_SESSIONS:
         oldest = next(iter(_sessions))
         del _sessions[oldest]
@@ -180,148 +254,128 @@ def _new_session() -> tuple[str, ContentModerationEnv]:
     return sid, env
 
 
-# ---------------------------------------------------------------------------
-# Landing page
-# ---------------------------------------------------------------------------
+# ═══════════════════════════════════════════════════════════════════════════
+# Landing page — warm cozy theme
+# ═══════════════════════════════════════════════════════════════════════════
 
-@app.get("/", response_class=HTMLResponse, include_in_schema=False)
-def root():
-    return """
+LANDING_HTML = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Content Moderation Queue — OpenEnv</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
     :root {
-      --bg: #3d4a3c;
-      --bg2: #4a5649;
-      --glass: rgba(60, 72, 58, 0.55);
-      --glass2: rgba(70, 84, 68, 0.4);
-      --border: rgba(140, 160, 130, 0.25);
-      --border-glow: rgba(255, 140, 180, 0.15);
-      --text: #d4d8c8;
-      --text-bright: #eef0e4;
-      --muted: #9aa392;
-      --pink: #ff6b9d;
-      --pink-glow: rgba(255, 107, 157, 0.3);
-      --cyan: #5ae4c8;
-      --cyan-glow: rgba(90, 228, 200, 0.25);
-      --green: #7ddf64;
-      --yellow: #f0c040;
-      --red: #ff6b6b;
-      --purple: #c4a6ff;
-      --orange: #ffaa5c;
+      --cream: #fdf0dc;
+      --cream2: #fbe8c8;
+      --card: #fef6ed;
+      --card2: #fef9f0;
+      --border: #f0d4a0;
+      --border2: #e8c890;
+      --text: #3d2b1a;
+      --text2: #5a4530;
+      --muted: #9a8060;
+      --orange: #f4a833;
+      --orange2: #e8923a;
+      --peach: #f8c06a;
+      --teal: #5baa8a;
+      --red-soft: #e86040;
+      --rose: #e88070;
+      --sand: #d4b888;
     }
 
     * { margin: 0; padding: 0; box-sizing: border-box; }
 
     body {
       font-family: 'Inter', system-ui, sans-serif;
-      background: var(--bg);
-      background-image:
-        radial-gradient(ellipse at 20% 50%, rgba(255,107,157,0.06) 0%, transparent 50%),
-        radial-gradient(ellipse at 80% 20%, rgba(90,228,200,0.06) 0%, transparent 50%),
-        radial-gradient(ellipse at 50% 80%, rgba(196,166,255,0.04) 0%, transparent 50%);
-      color: var(--text);
+      background: var(--cream);
+      color: var(--text2);
       min-height: 100vh;
-      -webkit-font-smoothing: antialiased;
-    }
-
-    /* Noise texture overlay */
-    body::before {
-      content: '';
-      position: fixed;
-      inset: 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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-      pointer-events: none;
-      z-index: 0;
+      background-image:
+        radial-gradient(ellipse at 30% 0%, rgba(244,168,51,0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 100%, rgba(232,146,58,0.06) 0%, transparent 50%);
     }
 
-    .wrap { position: relative; z-index: 1; }
-
     /* ═══ HERO ═══ */
     .hero {
-      padding: 56px 24px 44px;
+      background: linear-gradient(160deg, #fbe8c8 0%, #f8d8a4 40%, #f4c87a 100%);
+      padding: 52px 24px 44px;
       text-align: center;
-      border-bottom: 1px solid var(--border);
+      position: relative;
+      overflow: hidden;
+      border-bottom: 2px solid var(--border);
+    }
+    .hero::before {
+      content: '';
+      position: absolute;
+      bottom: -2px; left: 0; right: 0;
+      height: 40px;
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,20 Q150,0 300,20 Q450,40 600,20 Q750,0 900,20 Q1050,40 1200,20 V40 H0 Z' fill='%23fdf0dc'/%3E%3C/svg%3E") no-repeat center;
+      background-size: cover;
     }
 
-    .hero-shield {
-      width: 64px; height: 64px;
-      background: var(--glass);
-      border: 1px solid var(--border);
-      border-radius: 16px;
+    .hero-icon {
+      width: 72px; height: 72px;
+      background: rgba(255,255,255,0.6);
+      border: 2px solid rgba(255,255,255,0.8);
+      border-radius: 20px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-size: 2rem;
+      font-size: 2.2rem;
       margin-bottom: 16px;
-      box-shadow: 0 0 30px var(--pink-glow), inset 0 1px 0 rgba(255,255,255,0.05);
-      backdrop-filter: blur(12px);
+      box-shadow: 0 4px 16px rgba(200,150,60,0.15);
     }
 
     .hero h1 {
       font-size: 2rem;
-      font-weight: 700;
-      color: var(--text-bright);
+      font-weight: 800;
+      color: var(--text);
       letter-spacing: -0.5px;
       margin-bottom: 10px;
     }
 
-    .badge-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
+    .badges { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
     .badge {
       padding: 4px 14px;
       border-radius: 20px;
       font-size: 0.68rem;
-      font-weight: 600;
+      font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.8px;
-      border: 1px solid;
     }
-    .b-openenv { background: rgba(255,107,157,0.15); color: var(--pink); border-color: rgba(255,107,157,0.3); }
-    .b-live { background: rgba(90,228,200,0.12); color: var(--cyan); border-color: rgba(90,228,200,0.25); }
-    .b-ver { background: var(--glass2); color: var(--muted); border-color: var(--border); }
+    .b-env { background: var(--orange); color: #fff; }
+    .b-live { background: var(--teal); color: #fff; }
+    .b-ver { background: rgba(255,255,255,0.6); color: var(--muted); border: 1px solid var(--border); }
 
     .hero-desc {
-      max-width: 560px;
+      max-width: 520px;
       margin: 0 auto;
-      color: var(--muted);
-      font-size: 0.95rem;
+      color: var(--text2);
+      font-size: 0.92rem;
       line-height: 1.65;
+      opacity: 0.85;
     }
 
-    .container { max-width: 920px; margin: 0 auto; padding: 36px 24px 24px; }
+    .container { max-width: 900px; margin: 0 auto; padding: 32px 24px; }
 
-    /* ═══ GLASS CARD ═══ */
-    .glass {
-      background: var(--glass);
-      backdrop-filter: blur(16px);
-      -webkit-backdrop-filter: blur(16px);
-      border: 1px solid var(--border);
-      border-radius: 14px;
-      box-shadow: 0 4px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04);
+    /* ═══ CARD BASE ═══ */
+    .card {
+      background: var(--card);
+      border: 1.5px solid var(--border);
+      border-radius: 16px;
+      box-shadow: 0 2px 10px rgba(180,140,80,0.06);
     }
 
     /* ═══ STATS ═══ */
-    .stats {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 14px;
-      margin-bottom: 36px;
-    }
-    .stat { padding: 20px 16px; text-align: center; }
+    .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 32px; }
+    .stat { padding: 20px 14px; text-align: center; }
     .stat-val {
-      font-size: 1.7rem;
-      font-weight: 700;
-      background: linear-gradient(135deg, var(--pink), var(--purple));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+      font-size: 1.8rem;
+      font-weight: 800;
+      color: var(--orange2);
     }
     .stat-lbl {
       font-size: 0.7rem;
@@ -329,112 +383,110 @@ def root():
       text-transform: uppercase;
       letter-spacing: 0.8px;
       margin-top: 4px;
+      font-weight: 500;
     }
 
     /* ═══ SECTION TITLE ═══ */
     .stitle {
-      font-size: 0.75rem;
-      font-weight: 600;
+      font-size: 0.72rem;
+      font-weight: 700;
       color: var(--muted);
       text-transform: uppercase;
       letter-spacing: 1.5px;
       margin-bottom: 14px;
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
     }
     .stitle::after {
       content: '';
       flex: 1;
-      height: 1px;
-      background: var(--border);
+      height: 1.5px;
+      background: linear-gradient(90deg, var(--border), transparent);
     }
 
-    /* ═══ FLOW STEPS ═══ */
-    .flow {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 12px;
-      margin-bottom: 36px;
+    /* ═══ HOW IT WORKS ═══ */
+    .flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 32px; }
+    .flow-card {
+      padding: 20px 14px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
     }
-    .flow-card { padding: 20px 14px; text-align: center; position: relative; }
     .flow-card::before {
       content: '';
       position: absolute;
       top: 0; left: 0; right: 0;
-      height: 2px;
-      background: linear-gradient(90deg, var(--pink), var(--cyan));
-      border-radius: 14px 14px 0 0;
-      opacity: 0.5;
+      height: 3px;
+      background: linear-gradient(90deg, var(--orange), var(--peach));
+      border-radius: 16px 16px 0 0;
     }
     .flow-n {
-      font-size: 1.3rem;
+      display: inline-flex;
+      width: 32px; height: 32px;
+      align-items: center;
+      justify-content: center;
+      background: var(--orange);
+      color: #fff;
+      border-radius: 10px;
+      font-size: 0.85rem;
       font-weight: 700;
-      color: var(--pink);
-      text-shadow: 0 0 20px var(--pink-glow);
     }
-    .flow-t { font-size: 0.85rem; font-weight: 600; color: var(--text-bright); margin-top: 6px; }
+    .flow-t { font-size: 0.88rem; font-weight: 600; color: var(--text); margin-top: 8px; }
     .flow-d { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
     .flow-c {
       display: inline-block;
       margin-top: 8px;
       font-family: 'JetBrains Mono', monospace;
-      font-size: 0.68rem;
-      color: var(--cyan);
-      background: rgba(0,0,0,0.2);
+      font-size: 0.67rem;
+      color: var(--teal);
+      background: var(--cream2);
       padding: 3px 10px;
-      border-radius: 6px;
-      border: 1px solid rgba(90,228,200,0.15);
+      border-radius: 8px;
+      border: 1px solid var(--border);
+      font-weight: 500;
     }
 
     /* ═══ TASKS ═══ */
-    .tasks {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 14px;
-      margin-bottom: 36px;
-    }
+    .tasks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px; }
     .task { padding: 22px 18px; position: relative; overflow: hidden; }
     .task::before {
       content: '';
       position: absolute;
       left: 0; top: 0; bottom: 0;
-      width: 3px;
-      border-radius: 14px 0 0 14px;
+      width: 4px;
+      border-radius: 16px 0 0 16px;
     }
-    .t-easy::before { background: var(--green); box-shadow: 0 0 12px rgba(125,223,100,0.3); }
-    .t-med::before { background: var(--yellow); box-shadow: 0 0 12px rgba(240,192,64,0.3); }
-    .t-hard::before { background: var(--red); box-shadow: 0 0 12px rgba(255,107,107,0.3); }
+    .t-easy::before { background: var(--teal); }
+    .t-med::before { background: var(--orange); }
+    .t-hard::before { background: var(--red-soft); }
     .task-diff {
-      font-size: 0.65rem;
+      font-size: 0.62rem;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1.2px;
       margin-bottom: 6px;
     }
-    .t-easy .task-diff { color: var(--green); }
-    .t-med .task-diff { color: var(--yellow); }
-    .t-hard .task-diff { color: var(--red); }
-    .task-name { font-size: 0.92rem; font-weight: 600; color: var(--text-bright); margin-bottom: 6px; }
-    .task-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
+    .t-easy .task-diff { color: var(--teal); }
+    .t-med .task-diff { color: var(--orange2); }
+    .t-hard .task-diff { color: var(--red-soft); }
+    .task-name { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
+    .task-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
     .chips { display: flex; gap: 6px; flex-wrap: wrap; }
     .chip {
-      font-size: 0.67rem;
-      padding: 3px 9px;
-      border-radius: 6px;
-      background: rgba(0,0,0,0.2);
+      font-size: 0.65rem;
+      font-weight: 500;
+      padding: 3px 10px;
+      border-radius: 8px;
+      background: var(--cream2);
       border: 1px solid var(--border);
       color: var(--muted);
     }
 
     /* ═══ ACTIONS ═══ */
-    .actions {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 10px;
-      margin-bottom: 36px;
-    }
-    .act { padding: 14px 16px; }
+    .actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
+    .act { padding: 14px 16px; transition: transform 0.2s; }
+    .act:hover { transform: translateY(-2px); }
     .act-name {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.82rem;
@@ -442,90 +494,80 @@ def root():
       margin-bottom: 3px;
     }
     .act-desc { font-size: 0.72rem; color: var(--muted); }
-    .act-approve .act-name { color: var(--green); text-shadow: 0 0 12px rgba(125,223,100,0.2); }
-    .act-warn .act-name { color: var(--yellow); text-shadow: 0 0 12px rgba(240,192,64,0.2); }
-    .act-remove .act-name { color: var(--orange); text-shadow: 0 0 12px rgba(255,170,92,0.2); }
-    .act-bant .act-name { color: var(--red); text-shadow: 0 0 12px rgba(255,107,107,0.2); }
-    .act-banp .act-name { color: var(--pink); text-shadow: 0 0 12px var(--pink-glow); }
-    .act-esc .act-name { color: var(--purple); text-shadow: 0 0 12px rgba(196,166,255,0.2); }
+    .a-approve .act-name { color: var(--teal); }
+    .a-warn .act-name { color: var(--orange); }
+    .a-remove .act-name { color: var(--orange2); }
+    .a-bant .act-name { color: var(--red-soft); }
+    .a-banp .act-name { color: #c43030; }
+    .a-esc .act-name { color: #9070b0; }
 
     /* ═══ ENDPOINTS ═══ */
-    .ep-table { margin-bottom: 36px; overflow: hidden; }
+    .ep-table { margin-bottom: 32px; overflow: hidden; }
     .ep {
       display: flex;
       align-items: center;
       padding: 12px 18px;
       gap: 14px;
-      border-bottom: 1px solid rgba(140,160,130,0.1);
+      border-bottom: 1px solid rgba(240,212,160,0.5);
     }
     .ep:last-child { border-bottom: none; }
     .ep-m {
-      font-size: 0.65rem;
+      font-size: 0.64rem;
       font-weight: 700;
-      padding: 3px 10px;
-      border-radius: 5px;
+      padding: 4px 10px;
+      border-radius: 8px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       min-width: 48px;
       text-align: center;
     }
-    .ep-g { background: rgba(90,228,200,0.1); color: var(--cyan); border: 1px solid rgba(90,228,200,0.2); }
-    .ep-p { background: rgba(255,107,157,0.1); color: var(--pink); border: 1px solid rgba(255,107,157,0.2); }
+    .ep-g { background: rgba(91,170,138,0.12); color: var(--teal); border: 1px solid rgba(91,170,138,0.25); }
+    .ep-p { background: rgba(244,168,51,0.12); color: var(--orange2); border: 1px solid rgba(244,168,51,0.25); }
     .ep-path {
       font-family: 'JetBrains Mono', monospace;
-      font-size: 0.82rem;
-      color: var(--text-bright);
+      font-size: 0.8rem;
+      color: var(--text);
       flex: 1;
+      font-weight: 500;
     }
     .ep-info { font-size: 0.78rem; color: var(--muted); }
 
     /* ═══ REWARD ═══ */
-    .reward { padding: 22px 20px; margin-bottom: 36px; }
-    .reward h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-bright); margin-bottom: 14px; }
-    .r-item { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.82rem; }
-    .r-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-    .r-dot.rg { background: var(--green); box-shadow: 0 0 8px rgba(125,223,100,0.4); }
-    .r-dot.ry { background: var(--yellow); box-shadow: 0 0 8px rgba(240,192,64,0.4); }
-    .r-dot.rb { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
-    .r-dot.rr { background: var(--pink); box-shadow: 0 0 8px var(--pink-glow); }
+    .reward { padding: 22px 20px; margin-bottom: 32px; }
+    .reward h3 { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 14px; }
+    .r-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.82rem; color: var(--text2); }
+    .r-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+    .rg { background: var(--teal); }
+    .ry { background: var(--orange); }
+    .rb { background: #5a9ac0; }
+    .rr { background: var(--rose); }
 
     /* ═══ BASELINE ═══ */
-    .baseline { padding: 22px 20px; margin-bottom: 36px; }
-    .baseline h3 { font-size: 0.92rem; font-weight: 600; color: var(--text-bright); margin-bottom: 14px; }
-    .bl-sub { font-size: 0.75rem; color: var(--muted); margin-bottom: 16px; }
+    .baseline { padding: 22px 20px; margin-bottom: 32px; }
+    .baseline h3 { font-size: 0.92rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
+    .bl-sub { font-size: 0.73rem; color: var(--muted); margin-bottom: 16px; }
     .sc-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
-    .sc-lbl { font-size: 0.78rem; width: 80px; font-weight: 500; }
-    .sc-bar-bg {
-      flex: 1; height: 22px; border-radius: 8px;
-      background: rgba(0,0,0,0.2);
+    .sc-lbl { font-size: 0.78rem; width: 72px; font-weight: 600; }
+    .sc-bg {
+      flex: 1; height: 24px; border-radius: 12px;
+      background: var(--cream2);
+      border: 1px solid var(--border);
       overflow: hidden;
-      border: 1px solid rgba(0,0,0,0.1);
-    }
-    .sc-bar {
-      height: 100%;
-      border-radius: 7px;
-      position: relative;
-    }
-    .sc-bar::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
-      border-radius: 7px;
     }
-    .sc-g { background: linear-gradient(90deg, #5aad42, var(--green)); }
-    .sc-y { background: linear-gradient(90deg, #c89a20, var(--yellow)); }
-    .sc-r { background: linear-gradient(90deg, #d44, var(--red)); }
-    .sc-val { font-size: 0.82rem; font-weight: 600; width: 48px; text-align: right; }
+    .sc-bar { height: 100%; border-radius: 11px; }
+    .sc-bar-g { background: linear-gradient(90deg, #4a9a7a, var(--teal)); }
+    .sc-bar-y { background: linear-gradient(90deg, #d4922a, var(--orange)); }
+    .sc-bar-r { background: linear-gradient(90deg, #c84830, var(--red-soft)); }
+    .sc-val { font-size: 0.82rem; font-weight: 700; width: 48px; text-align: right; color: var(--text); }
 
     /* ═══ CTA ═══ */
-    .cta-row { display: flex; gap: 12px; margin-bottom: 36px; }
+    .ctas { display: flex; gap: 12px; margin-bottom: 36px; }
     .cta {
       flex: 1;
       display: block;
       text-align: center;
-      padding: 15px 20px;
-      border-radius: 10px;
+      padding: 14px 20px;
+      border-radius: 12px;
       text-decoration: none;
       font-weight: 600;
       font-size: 0.88rem;
@@ -533,52 +575,60 @@ def root():
     }
     .cta:hover { transform: translateY(-2px); }
     .cta-1 {
-      background: linear-gradient(135deg, var(--pink), #e05090);
+      background: linear-gradient(135deg, var(--orange), var(--orange2));
       color: #fff;
-      border: none;
-      box-shadow: 0 4px 20px var(--pink-glow);
+      box-shadow: 0 4px 16px rgba(244,168,51,0.25);
     }
-    .cta-1:hover { box-shadow: 0 6px 30px rgba(255,107,157,0.4); }
+    .cta-1:hover { box-shadow: 0 6px 24px rgba(244,168,51,0.35); }
     .cta-2 {
-      background: var(--glass);
-      color: var(--cyan);
-      border: 1px solid rgba(90,228,200,0.2);
-      backdrop-filter: blur(12px);
+      background: var(--card);
+      color: var(--teal);
+      border: 1.5px solid rgba(91,170,138,0.3);
     }
-    .cta-2:hover { background: rgba(90,228,200,0.1); }
+    .cta-2:hover { background: rgba(91,170,138,0.06); }
     .cta-3 {
-      background: var(--glass);
-      color: var(--text);
-      border: 1px solid var(--border);
-      backdrop-filter: blur(12px);
+      background: var(--card);
+      color: var(--text2);
+      border: 1.5px solid var(--border);
     }
 
     /* ═══ FOOTER ═══ */
     .footer {
       text-align: center;
       padding: 28px 0;
-      border-top: 1px solid var(--border);
+      border-top: 1.5px solid var(--border);
       color: var(--muted);
       font-size: 0.75rem;
     }
-    .footer a { color: var(--pink); text-decoration: none; }
+    .footer a { color: var(--orange2); text-decoration: none; }
     .footer a:hover { text-decoration: underline; }
 
+    /* ═══ DECORATIVE BLOBS ═══ */
+    .blob {
+      position: absolute;
+      border-radius: 50%;
+      opacity: 0.12;
+      pointer-events: none;
+    }
+    .blob-1 { width: 200px; height: 200px; background: var(--orange); top: -60px; right: -40px; }
+    .blob-2 { width: 140px; height: 140px; background: var(--peach); bottom: -30px; left: -30px; }
+
     @media (max-width: 720px) {
       .stats, .flow { grid-template-columns: repeat(2, 1fr); }
       .tasks, .actions { grid-template-columns: 1fr; }
-      .cta-row { flex-direction: column; }
+      .ctas { flex-direction: column; }
     }
   </style>
 </head>
 <body>
-<div class="wrap">
 
   <div class="hero">
-    <div class="hero-shield">&#128737;</div>
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+    <div class="hero-icon">&#128737;&#65039;</div>
     <h1>Content Moderation Queue</h1>
-    <div class="badge-row">
-      <span class="badge b-openenv">OpenEnv</span>
+    <div class="badges">
+      <span class="badge b-env">OpenEnv</span>
       <span class="badge b-live">Live</span>
       <span class="badge b-ver">v1.0.0</span>
     </div>
@@ -590,54 +640,54 @@ def root():
   <div class="container">
 
     <div class="stats">
-      <div class="glass stat"><div class="stat-val">30</div><div class="stat-lbl">Labeled Posts</div></div>
-      <div class="glass stat"><div class="stat-val">3</div><div class="stat-lbl">Difficulty Levels</div></div>
-      <div class="glass stat"><div class="stat-val">6</div><div class="stat-lbl">Action Types</div></div>
-      <div class="glass stat"><div class="stat-val">9</div><div class="stat-lbl">Violation Categories</div></div>
+      <div class="card stat"><div class="stat-val">30</div><div class="stat-lbl">Labeled Posts</div></div>
+      <div class="card stat"><div class="stat-val">3</div><div class="stat-lbl">Difficulty Levels</div></div>
+      <div class="card stat"><div class="stat-val">6</div><div class="stat-lbl">Action Types</div></div>
+      <div class="card stat"><div class="stat-val">9</div><div class="stat-lbl">Violation Types</div></div>
     </div>
 
     <div class="stitle">How It Works</div>
     <div class="flow">
-      <div class="glass flow-card"><div class="flow-n">1</div><div class="flow-t">Reset</div><div class="flow-d">Start episode, pick difficulty</div><div class="flow-c">POST /reset</div></div>
-      <div class="glass flow-card"><div class="flow-n">2</div><div class="flow-t">Observe</div><div class="flow-d">Read post, history, context</div><div class="flow-c">session_id</div></div>
-      <div class="glass flow-card"><div class="flow-n">3</div><div class="flow-t">Decide</div><div class="flow-d">Choose action + violation</div><div class="flow-c">POST /step</div></div>
-      <div class="glass flow-card"><div class="flow-n">4</div><div class="flow-t">Score</div><div class="flow-d">Get reward 0.0 - 1.0</div><div class="flow-c">GET /state</div></div>
+      <div class="card flow-card"><div class="flow-n">1</div><div class="flow-t">Reset</div><div class="flow-d">Start episode, pick difficulty</div><div class="flow-c">POST /reset</div></div>
+      <div class="card flow-card"><div class="flow-n">2</div><div class="flow-t">Observe</div><div class="flow-d">Read post, history, context</div><div class="flow-c">session_id</div></div>
+      <div class="card flow-card"><div class="flow-n">3</div><div class="flow-t">Decide</div><div class="flow-d">Choose action + violation</div><div class="flow-c">POST /step</div></div>
+      <div class="card flow-card"><div class="flow-n">4</div><div class="flow-t">Score</div><div class="flow-d">Get reward 0.0 - 1.0</div><div class="flow-c">GET /state</div></div>
     </div>
 
     <div class="stitle">Tasks</div>
     <div class="tasks">
-      <div class="glass task t-easy">
+      <div class="card task t-easy">
         <div class="task-diff">Easy</div>
         <div class="task-name">Binary Content Moderation</div>
-        <div class="task-desc">Classify 8 posts as safe or harmful. Clear signals: obvious spam, explicit hate speech vs everyday content.</div>
-        <div class="chips"><span class="chip">8 posts</span><span class="chip">2 actions</span><span class="chip">Binary grading</span></div>
+        <div class="task-desc">Classify 8 posts as safe or harmful. Clear signals: spam, hate speech vs everyday content.</div>
+        <div class="chips"><span class="chip">8 posts</span><span class="chip">2 actions</span><span class="chip">Binary</span></div>
       </div>
-      <div class="glass task t-med">
+      <div class="card task t-med">
         <div class="task-diff">Medium</div>
         <div class="task-name">Tiered Policy Enforcement</div>
-        <div class="task-desc">Apply 5-level severity. Edge cases: harsh criticism, repeat offenders, political content, zero-tolerance.</div>
+        <div class="task-desc">Apply 5-level severity. Harsh criticism, repeat offenders, political content, zero-tolerance.</div>
         <div class="chips"><span class="chip">10 posts</span><span class="chip">5 actions</span><span class="chip">Partial credit</span></div>
       </div>
-      <div class="glass task t-hard">
+      <div class="card task t-hard">
         <div class="task-diff">Hard</div>
         <div class="task-name">Full Queue + Appeals</div>
-        <div class="task-desc">Appeals with evidence, gaming slang vs threats, crisis escalation, repeat offenders, second-appeal denials.</div>
+        <div class="task-desc">Appeals, gaming slang vs threats, crisis escalation, repeat offenders, second-appeal denials.</div>
         <div class="chips"><span class="chip">12 posts</span><span class="chip">6 actions</span><span class="chip">Context bonus</span></div>
       </div>
     </div>
 
     <div class="stitle">Action Space</div>
     <div class="actions">
-      <div class="glass act act-approve"><div class="act-name">approve</div><div class="act-desc">Safe, policy-compliant content</div></div>
-      <div class="glass act act-warn"><div class="act-name">warn</div><div class="act-desc">Minor first-time violation</div></div>
-      <div class="glass act act-remove"><div class="act-name">remove</div><div class="act-desc">Clear policy violation</div></div>
-      <div class="glass act act-bant"><div class="act-name">ban_temporary</div><div class="act-desc">Repeat or serious offense</div></div>
-      <div class="glass act act-banp"><div class="act-name">ban_permanent</div><div class="act-desc">Zero-tolerance or 5+ violations</div></div>
-      <div class="glass act act-esc"><div class="act-name">escalate</div><div class="act-desc">Ambiguous, appeals, or crisis</div></div>
+      <div class="card act a-approve"><div class="act-name">approve</div><div class="act-desc">Safe, policy-compliant content</div></div>
+      <div class="card act a-warn"><div class="act-name">warn</div><div class="act-desc">Minor first-time violation</div></div>
+      <div class="card act a-remove"><div class="act-name">remove</div><div class="act-desc">Clear policy violation</div></div>
+      <div class="card act a-bant"><div class="act-name">ban_temporary</div><div class="act-desc">Repeat or serious offense</div></div>
+      <div class="card act a-banp"><div class="act-name">ban_permanent</div><div class="act-desc">Zero-tolerance or 5+ violations</div></div>
+      <div class="card act a-esc"><div class="act-name">escalate</div><div class="act-desc">Ambiguous, appeals, or crisis</div></div>
     </div>
 
     <div class="stitle">API Endpoints</div>
-    <div class="glass ep-table">
+    <div class="card ep-table">
       <div class="ep"><span class="ep-m ep-g">GET</span><span class="ep-path">/health</span><span class="ep-info">Liveness check</span></div>
       <div class="ep"><span class="ep-m ep-g">GET</span><span class="ep-path">/tasks</span><span class="ep-info">List all tasks</span></div>
       <div class="ep"><span class="ep-m ep-p">POST</span><span class="ep-path">/reset?task_id=task_easy</span><span class="ep-info">Start episode, get session_id</span></div>
@@ -646,7 +696,7 @@ def root():
     </div>
 
     <div class="stitle">Reward Design</div>
-    <div class="glass reward">
+    <div class="card reward">
       <div class="r-item"><div class="r-dot rg"></div><div><strong>Non-sparse:</strong> every post scores independently (0.0 - 1.0)</div></div>
       <div class="r-item"><div class="r-dot ry"></div><div><strong>Partial credit:</strong> one severity level off scores ~0.65 instead of 0.0</div></div>
       <div class="r-item"><div class="r-dot rb"></div><div><strong>Context bonus:</strong> +0.3 for history-dependent or context-dependent posts</div></div>
@@ -654,15 +704,15 @@ def root():
     </div>
 
     <div class="stitle">Baseline Scores</div>
-    <div class="glass baseline">
+    <div class="card baseline">
       <h3>Meta Llama 3 8B Instruct</h3>
-      <div class="bl-sub">temperature=0 &nbsp;|&nbsp; seed=42 &nbsp;|&nbsp; reproducible</div>
-      <div class="sc-row"><span class="sc-lbl" style="color:var(--green)">Easy</span><div class="sc-bar-bg"><div class="sc-bar sc-g" style="width:50%"></div></div><span class="sc-val">0.500</span></div>
-      <div class="sc-row"><span class="sc-lbl" style="color:var(--yellow)">Medium</span><div class="sc-bar-bg"><div class="sc-bar sc-y" style="width:53%"></div></div><span class="sc-val">0.533</span></div>
-      <div class="sc-row"><span class="sc-lbl" style="color:var(--red)">Hard</span><div class="sc-bar-bg"><div class="sc-bar sc-r" style="width:42%"></div></div><span class="sc-val">0.423</span></div>
+      <div class="bl-sub">temperature=0 | seed=42 | reproducible</div>
+      <div class="sc-row"><span class="sc-lbl" style="color:var(--teal)">Easy</span><div class="sc-bg"><div class="sc-bar sc-bar-g" style="width:50%"></div></div><span class="sc-val">0.500</span></div>
+      <div class="sc-row"><span class="sc-lbl" style="color:var(--orange2)">Medium</span><div class="sc-bg"><div class="sc-bar sc-bar-y" style="width:53%"></div></div><span class="sc-val">0.533</span></div>
+      <div class="sc-row"><span class="sc-lbl" style="color:var(--red-soft)">Hard</span><div class="sc-bg"><div class="sc-bar sc-bar-r" style="width:42%"></div></div><span class="sc-val">0.423</span></div>
     </div>
 
-    <div class="cta-row">
+    <div class="ctas">
       <a class="cta cta-1" href="/docs">Interactive API Docs</a>
       <a class="cta cta-2" href="/tasks">View Tasks</a>
       <a class="cta cta-3" href="/health">Health Check</a>
@@ -670,23 +720,21 @@ def root():
 
     <div class="footer">
       Content Moderation Queue &mdash; OpenEnv v1.0.0<br>
-      Built for the Meta AI Hackathon &nbsp;|&nbsp; <a href="/docs">API Docs</a>
+      Built for the Meta AI Hackathon | <a href="/docs">API Docs</a>
     </div>
 
   </div>
-</div>
 </body>
 </html>
 """
 
+@app.get("/", response_class=HTMLResponse, include_in_schema=False)
+def root():
+    return LANDING_HTML
 
-# ---------------------------------------------------------------------------
-# Endpoints
-# ---------------------------------------------------------------------------
 
 @app.get("/docs", include_in_schema=False)
 def custom_docs():
-    """Swagger UI with custom glassmorphism theme."""
     return HTMLResponse(f"""
 <!DOCTYPE html>
 <html><head>
@@ -712,6 +760,10 @@ SwaggerUIBundle({{
 """)
 
 
+# ═══════════════════════════════════════════════════════════════════════════
+# API Endpoints
+# ═══════════════════════════════════════════════════════════════════════════
+
 @app.get("/health")
 def health():
     """Liveness probe — returns 200 when server is ready."""
@@ -736,7 +788,6 @@ def reset(
     - **seed**: Optional. Omit for random post order (RL training). Pass integer (e.g. 42) for reproducible order.
 
     The response includes a **session_id** — copy it and pass it to every `/step` and `/state` call.
-    This ensures your episode state is never affected by other users or test runs.
     """
     try:
         sid, env = _new_session()
@@ -759,7 +810,7 @@ def step(
     - `reasoning`: Optional explanation (logged, not graded)
     - `violation_type`: Optional — spam / hate_speech / harassment / misinformation / csam / illegal_services / doxxing / self_harm_risk / none
 
-    Returns the next Observation, reward (0.0–1.0), done flag, and info dict.
+    Returns the next Observation, reward (0.0-1.0), done flag, and info dict.
     """
     env = _get_session(session_id)
     try: