Models 44

Nemotron 3 Ultra (free)

by NVIDIAReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
2 min 21 s
Cost
$0
Output tokens
12,498
Spent thinking
139 tokens
Speed
89 tok/s
Console errors
0
First token after
565 ms
First visible text after
2.9 s
Prompt tokens
381
Code size
35.6 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent
{"effort":"high"}
Max output
32,000 tokens
Generated
Nov 9, 2026

What it was asked

The prompt
“i'm opening a korean taco food truck called "Kimchi Loco", make me a website that makes people really want to come”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 934 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kimchi Loco — Korean Taco Food Truck</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;700&family=Permanent+Marker&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0d0d0d;
      --fg: #fafafa;
      --muted: #a0a0a0;
      --accent: #e84d2e;
      --accent-2: #ffb700;
      --accent-3: #00c896;
      --card: #1a1a1a;
      --border: #333;
      --glow: rgba(232, 77, 46, 0.4);
      --glow-2: rgba(255, 183, 0, 0.4);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Space Grotesk', sans-serif;
      background: var(--bg);
      color: var(--fg);
      overflow-x: hidden;
      line-height: 1.6;
    }

    .font-display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
    .font-hand { font-family: 'Permanent Marker', cursive; }

    /* Background atmosphere */
    .atmosphere {
      position: fixed;
      inset: 0;
      z-index: -1;
      background: 
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232, 77, 46, 0.15) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(255, 183, 0, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 200, 150, 0.06) 0%, transparent 70%),
        var(--bg);
    }

    .atmosphere::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      opacity: 0.03;
      pointer-events: none;
    }

    /* Floating particles */
    .particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      opacity: 0;
      animation: floatUp 8s infinite ease-in;
    }
    .particle:nth-child(odd) { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
    .particle:nth-child(even) { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }

    @keyframes floatUp {
      0% { transform: translateY(100vh) scale(0); opacity: 0; }
      10% { opacity: 0.6; }
      90% { opacity: 0.3; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    /* Header / Hero */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 2rem 1rem;
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(232, 77, 46, 0.08) 0%, transparent 70%);
      pointer-events: none;
      animation: pulse 4s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
      50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.8; }
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.25rem;
      background: linear-gradient(135deg, rgba(232, 77, 46, 0.2), rgba(255, 183, 0, 0.15));
      border: 1px solid rgba(232, 77, 46, 0.4);
      border-radius: 100px;
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--accent-2);
      margin-bottom: 1.5rem;
      animation: slideUp 0.8s ease-out;
      backdrop-filter: blur(10px);
    }

    .badge .dot {
      width: 8px;
      height: 8px;
      background: var(--accent-3);
      border-radius: 50%;
      animation: blink 1.5s infinite;
    }

    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

    .hero h1 {
      font-size: clamp(3rem, 12vw, 8rem);
      line-height: 1;
      font-weight: 400;
      margin-bottom: 0.5rem;
      animation: slideUp 0.8s ease-out 0.1s both;
      background: linear-gradient(135deg, #fff 0%, var(--accent) 40%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-shadow: 0 0 60px rgba(232, 77, 46, 0.3);
    }

    .hero h1 span { display: block; }

    .hero .sub {
      font-family: 'Permanent Marker', cursive;
      font-size: clamp(1.25rem, 3vw, 2rem);
      color: var(--accent-2);
      margin-bottom: 1rem;
      animation: slideUp 0.8s ease-out 0.2s both;
      text-shadow: 0 0 30px rgba(255, 183, 0, 0.3);
    }

    .hero .tagline {
      font-size: clamp(1rem, 2.5vw, 1.4rem);
      color: var(--muted);
      max-width: 600px;
      margin-bottom: 2.5rem;
      animation: slideUp 0.8s ease-out 0.3s both;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .cta-group { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; animation: slideUp 0.8s ease-out 0.4s both; }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 2rem;
      border-radius: 100px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.1em;
      text-decoration: none;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(255,255,255,0.1));
      transform: translateX(-100%);
      transition: transform 0.4s ease;
    }

    .btn:hover::before { transform: translateX(100%); }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #c73d1f);
      color: #fff;
      box-shadow: 0 4px 24px var(--glow);
    }

    .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px var(--glow); }

    .btn-secondary {
      background: transparent;
      color: var(--fg);
      border: 2px solid var(--border);
    }

    .btn-secondary:hover { border-color: var(--accent-2); color: var(--accent-2); transform: translateY(-3px); }

    .scroll-hint {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
      color: var(--muted);
      font-size: 0.85rem;
      animation: slideUp 0.8s ease-out 0.8s both, bounce 2s ease-in-out 1.5s infinite;
    }

    @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

    /* Sections */
    section { padding: 6rem 1.5rem; position: relative; }

    .container { max-width: 1200px; margin: 0 auto; }

    .section-header { text-align: center; margin-bottom: 4rem; }

    .section-label {
      font-family: 'Permanent Marker', cursive;
      color: var(--accent-2);
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      display: block;
    }

    .section-title {
      font-size: clamp(2.5rem, 6vw, 4rem);
      font-weight: 400;
      line-height: 1.1;
    }

    .section-title em { font-style: normal; color: var(--accent); }

    /* Menu */
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
    }

    .menu-card {
      background: linear-gradient(145deg, var(--card), #141414);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2rem;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
      cursor: pointer;
    }

    .menu-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .menu-card:hover {
      transform: translateY(-8px);
      border-color: var(--accent);
      box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--accent);
    }

    .menu-card:hover::before { transform: scaleX(1); }

    .menu-card.featured {
      border-color: var(--accent-2);
      background: linear-gradient(145deg, rgba(255, 183, 0, 0.05), var(--card));
    }

    .menu-card.featured::before { background: linear-gradient(90deg, var(--accent-2), var(--accent)); transform: scaleX(1); }

    .menu-badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      border-radius: 100px;
      margin-bottom: 1rem;
      text-transform: uppercase;
    }

    .badge-spicy { background: rgba(232, 77, 46, 0.2); color: var(--accent); border: 1px solid var(--accent); }
    .badge-new { background: rgba(0, 200, 150, 0.2); color: var(--accent-3); border: 1px solid var(--accent-3); }
    .badge-fave { background: rgba(255, 183, 0, 0.2); color: var(--accent-2); border: 1px solid var(--accent-2); }

    .menu-card h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.75rem;
      letter-spacing: 0.03em;
      margin-bottom: 0.5rem;
    }

    .menu-card .desc { color: var(--muted); font-size: 0.95rem; margin-bottom: 1rem; line-height: 1.7; }

    .menu-card .ingredients { font-size: 0.85rem; color: #666; font-style: italic; margin-bottom: 1.25rem; }

    .menu-footer { display: flex; justify-content: space-between; align-items: center; }

    .price { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; color: var(--accent-2); }

    .heat-meter { display: flex; gap: 3px; }

    .heat-meter span {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--border);
      transition: all 0.2s ease;
    }

    .heat-meter span.lit { background: var(--accent); box-shadow: 0 0 8px var(--accent); }

    /* Truck Info */
    .truck-section { background: linear-gradient(180deg, transparent, rgba(232, 77, 46, 0.03), transparent); }

    .truck-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: start;
    }

    .truck-visual {
      position: relative;
      aspect-ratio: 4/3;
      border-radius: 24px;
      overflow: hidden;
      background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
      border: 1px solid var(--border);
    }

    .truck-svg { width: 100%; height: 100%; }

    .truck-info h2 { margin-bottom: 1.5rem; }

    .info-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    .info-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.5rem;
      transition: all 0.3s ease;
    }

    .info-card:hover { border-color: var(--accent); transform: translateY(-4px); }

    .info-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      font-size: 1.25rem;
    }

    .icon-red { background: rgba(232, 77, 46, 0.15); color: var(--accent); }
    .icon-gold { background: rgba(255, 183, 0, 0.15); color: var(--accent-2); }
    .icon-green { background: rgba(0, 200, 150, 0.15); color: var(--accent-3); }
    .icon-purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

    .info-card h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
    .info-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

    .schedule { margin-top: 2rem; }
    .schedule h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; margin-bottom: 1rem; }
    .schedule-item { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.95rem; }
    .schedule-item:last-child { border-bottom: none; }
    .schedule-day { color: var(--muted); }
    .schedule-loc { color: var(--fg); font-weight: 500; }

    /* Reviews / Social Proof */
    .reviews-section { background: linear-gradient(180deg, transparent, rgba(255, 183, 0, 0.03), transparent); }

    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .review-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 2rem;
      position: relative;
      transition: all 0.3s ease;
    }

    .review-card:hover { border-color: var(--accent-2); transform: translateY(-4px); }

    .stars { display: flex; gap: 3px; margin-bottom: 1rem; }
    .stars svg { width: 20px; height: 20px; fill: var(--accent-2); }

    .review-text { color: var(--muted); font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.5rem; }
    .review-author { display: flex; align-items: center; gap: 0.75rem; }
    .avatar {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      letter-spacing: 0.05em;
    }
    .author-name { font-weight: 600; }
    .author-handle { color: var(--muted); font-size: 0.85rem; }

    /* CTA Section */
    .cta-section {
      text-align: center;
      background: linear-gradient(180deg, transparent, rgba(232, 77, 46, 0.05), transparent);
    }

    .cta-card {
      max-width: 700px;
      margin: 0 auto;
      padding: 4rem 2rem;
      background: linear-gradient(145deg, rgba(232, 77, 46, 0.1), rgba(255, 183, 0, 0.05));
      border: 1px solid rgba(232, 77, 46, 0.3);
      border-radius: 32px;
      position: relative;
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(from 0deg, transparent, rgba(232, 77, 46, 0.1), transparent 30%);
      animation: rotate 8s linear infinite;
    }

    @keyframes rotate { to { transform: rotate(360deg); } }

    .cta-card > * { position: relative; z-index: 1; }

    .cta-card h2 { margin-bottom: 1rem; }
    .cta-card p { color: var(--muted); margin-bottom: 2rem; font-size: 1.1rem; }

    /* Footer */
    footer {
      padding: 3rem 1.5rem;
      border-top: 1px solid var(--border);
      text-align: center;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      max-width: 1000px;
      margin: 0 auto 2rem;
      text-align: left;
    }

    .footer-col h4 { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; margin-bottom: 1rem; color: var(--accent-2); }
    .footer-col p, .footer-col a { color: var(--muted); font-size: 0.9rem; line-height: 1.8; text-decoration: none; transition: color 0.2s; }
    .footer-col a:hover { color: var(--accent); }

    .social-links { display: flex; gap: 1rem; margin-top: 1rem; }
    .social-links a {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--card);
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      transition: all 0.3s;
    }
    .social-links a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

    .copyright { color: #444; font-size: 0.85rem; }

    /* Animations on scroll */
    .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      .reveal { opacity: 1; transform: none; }
    }

    /* Mobile adjustments */
    @media (max-width: 768px) {
      .truck-grid { grid-template-columns: 1fr; gap: 2rem; }
      .info-cards { grid-template-columns: 1fr; }
      .hero { min-height: auto; padding: 4rem 1rem; }
      section { padding: 4rem 1rem; }
      .cta-card { padding: 2.5rem 1.5rem; }
    }

    @media (max-width: 480px) {
      .btn { padding: 0.875rem 1.5rem; font-size: 1rem; }
      .menu-card { padding: 1.5rem; }
    }
  </style>
</head>
<body>
  <div class="atmosphere"></div>
  <div class="particles" id="particles"></div>

  <!-- Hero -->
  <header class="hero">
    <div class="badge">
      <span class="dot"></span>
      NOW SERVING IN LOS ANGELES
    </div>
    <h1 class="font-display">
      <span>KIMCHI</span>
      <span>LOCO</span>
    </h1>
    <p class="sub font-hand">KOREAN TACOS • MEXICAN SOUL</p>
    <p class="tagline">Where gochujang meets carnitas. Where kimchi meets queso. The fusion you didn't know you needed — until right now.</p>
    <div class="cta-group">
      <a href="#menu" class="btn btn-primary">FIND THE TRUCK</a>
      <a href="#menu" class="btn btn-secondary">PEEK THE MENU</a>
    </div>
    <div class="scroll-hint">
      SCROLL DOWN
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity: 0.5;">
        <path d="M12 5v14M19 12l-7 7-7-7"/>
      </svg>
    </div>
  </header>

  <!-- Menu -->
  <section id="menu" class="reveal">
    <div class="container">
      <div class="section-header">
        <span class="section-label">WHAT'S COOKIN'</span>
        <h2 class="section-title font-display">The <em>Menu</em></h2>
      </div>
      <div class="menu-grid" id="menuGrid"></div>
    </div>
  </section>

  <!-- Truck Info -->
  <section class="truck-section reveal">
    <div class="container">
      <div class="truck-grid">
        <div class="truck-visual">
          <svg class="truck-svg" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <linearGradient id="truckBody" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" stop-color="#e84d2e"/>
                <stop offset="100%" stop-color="#c73d1f"/>
              </linearGradient>
              <linearGradient id="truckAccent" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#ffb700"/>
                <stop offset="100%" stop-color="#e84d2e"/>
              </linearGradient>
              <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="3" result="blur"/>
                <feMerge>
                  <feMergeNode in="blur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>
            <!-- Truck body -->
            <rect x="40" y="120" width="320" height="100" rx="8" fill="url(#truckBody)" filter="url(#glow)"/>
            <rect x="40" y="120" width="320" height="100" rx="8" fill="none" stroke="url(#truckAccent)" stroke-width="2"/>
            <!-- Cab -->
            <path d="M40 120 L80 80 L180 80 L180 120 Z" fill="url(#truckBody)" stroke="url(#truckAccent)" stroke-width="2"/>
            <!-- Windows -->
            <rect x="55" y="88" width="50" height="45" rx="3" fill="#0d0d0d" opacity="0.8"/>
            <rect x="115" y="88" width="55" height="45" rx="3" fill="#0d0d0d" opacity="0.8"/>
            <!-- Wheels -->
            <circle cx="100" cy="230" r="28" fill="#0a0a0a" stroke="#333" stroke-width="3"/>
            <circle cx="100" cy="230" r="18" fill="#1a1a1a" stroke="#e84d2e" stroke-width="1" opacity="0.5"/>
            <circle cx="300" cy="230" r="28" fill="#0a0a0a" stroke="#333" stroke-width="3"/>
            <circle cx="300" cy="230" r="18" fill="#1a1a1a" stroke="#e84d2e" stroke-width="1" opacity="0.5"/>
            <!-- Serving window -->
            <rect x="200" y="130" width="140" height="70" rx="4" fill="#0d0d0d" opacity="0.9"/>
            <rect x="200" y="130" width="140" height="70" rx="4" fill="none" stroke="#ffb700" stroke-width="2" stroke-dasharray="8 4"/>
            <!-- Kimchi Loco text on truck -->
            <text x="200" y="100" font-family="Bebas Neue, sans-serif" font-size="24" fill="#ffb700" text-anchor="middle" letter-spacing="2">KIMCHI LOCO</text>
            <!-- Exhaust puffs -->
            <circle cx="35" cy="100" r="8" fill="#e84d2e" opacity="0.3">
              <animate attributeName="r" values="5;12;5" dur="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.4;0;0.4" dur="2s" repeatCount="indefinite"/>
            </circle>
            <circle cx="25" cy="90" r="6" fill="#ffb700" opacity="0.2">
              <animate attributeName="r" values="3;10;3" dur="2s" repeatCount="indefinite" begin="0.5s"/>
              <animate attributeName="opacity" values="0.3;0;0.3" dur="2s" repeatCount="indefinite" begin="0.5s"/>
            </circle>
            <!-- Taco decorations -->
            <g transform="translate(60, 200)">
              <path d="M0 0 Q10 -15 20 0 Q15 10 10 15 Q5 10 0 0" fill="#ffb700" opacity="0.3">
                <animateTransform attributeName="transform" type="translate" values="60,200; 55,195; 60,200" dur="3s" repeatCount="indefinite"/>
              </path>
            </g>
            <g transform="translate(340, 195)">
              <path d="M0 0 Q10 -15 20 0 Q15 10 10 15 Q5 10 0 0" fill="#e84d2e" opacity="0.3">
                <animateTransform attributeName="transform" type="translate" values="340,195; 345,190; 340,195" dur="3s" repeatCount="indefinite" begin="1s"/>
              </path>
            </g>
          </svg>
        </div>
        <div class="truck-info">
          <h2 class="section-title font-display" style="text-align: left; font-size: clamp(2rem, 5vw, 3rem);">Find <em>Us</em></h2>
          <div class="info-cards">
            <div class="info-card">
              <div class="info-icon icon-red">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
              </div>
              <h4>TRACK THE TRUCK</h4>
              <p>Real-time location on IG Stories & Twitter. We move daily — catch us if you can.</p>
            </div>
            <div class="info-card">
              <div class="info-icon icon-gold">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
              </div>
              <h4>LUNCH &amp; LATE NIGHT</h4>
              <p>11AM–3PM &amp; 8PM–2AM. Different vibes, same heat. Late night = extra spicy.</p>
            </div>
            <div class="info-card">
              <div class="info-icon icon-green">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
              </div>
              <h4>CATERING AVAILABLE</h4>
              <p>Private events, weddings, corporate. We bring the fiesta to you. DM for quotes.</p>
            </div>
            <div class="info-card">
              <div class="info-icon icon-purple">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8"/><path d="M12 17v4"/></svg>
              </div>
              <h4>VEGAN FRIENDLY</h4>
              <p>Plant-based proteins, vegan crema, corn tortillas. Nobody misses out on the flavor.</p>
            </div>
          </div>
          <div class="schedule">
            <h4>THIS WEEK'S SPOTS</h4>
            <div class="schedule-item"><span class="schedule-day">MON</span><span class="schedule-loc">Arts District • 6th & Mateo</span></div>
            <div class="schedule-item"><span class="schedule-day">TUE</span><span class="schedule-loc">K-Town • Wilshire & Western</span></div>
            <div class="schedule-item"><span class="schedule-day">WED</span><span class="schedule-loc">Santa Monica • 3rd St Promenade</span></div>
            <div class="schedule-item"><span class="schedule-day">THU</span><span class="schedule-loc">Highland Park • York & Ave 50</span></div>
            <div class="schedule-item"><span class="schedule-day">FRI</span><span class="schedule-loc">Downtown • Grand Central Market</span></div>
            <div class="schedule-item"><span class="schedule-day">SAT</span><span class="schedule-loc">Venice • Abbot Kinney</span></div>
            <div class="schedule-item"><span class="schedule-day">SUN</span><span class="schedule-loc">Pop-up location (check IG!)</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Reviews -->
  <section class="reviews-section reveal">
    <div class="container">
      <div class="section-header">
        <span class="section-label">WHAT PEOPLE SAY</span>
        <h2 class="section-title font-display">Real <em>Ones</em> Know</h2>
      </div>
      <div class="reviews-grid" id="reviewsGrid"></div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta-section reveal">
    <div class="container">
      <div class="cta-card">
        <h2 class="section-title font-display" style="font-size: clamp(2rem, 5vw, 3rem);">Ready to Get <em>Loco</em>?</h2>
        <p>Follow the truck. Smell the grill. Taste the fusion. Your new obsession is one bite away.</p>
        <div class="cta-group">
          <a href="https://instagram.com" target="_blank" rel="noopener" class="btn btn-primary">FOLLOW @KIMCHILOCO</a>
          <a href="#menu" class="btn btn-secondary">SEE TODAY'S SPECIALS</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer>
    <div class="footer-grid">
      <div class="footer-col">
        <h4 class="font-display">KIMCHI LOCO</h4>
        <p>Korean-Mexican fusion food truck serving LA since 2023. Made with love, gochujan, and a little bit of chaos.</p>
        <div class="social-links">
          <a href="#" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
          <a href="#" aria-label="Twitter"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg></a>
          <a href="#" aria-label="TikTok"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 2a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10Z"/><path d="M10 15v-3"/><path d="M14 15v-5"/><path d="M18 15v-1"/></svg></a>
        </div>
      </div>
      <div class="footer-col">
        <h4 class="font-display">HOURS</h4>
        <p>Lunch: 11AM – 3PM<br>Late Night: 8PM – 2AM<br>7 Days a Week</p>
      </div>
      <div class="footer-col">
        <h4 class="font-display">CONTACT</h4>
        <p>DM us @kimchiloco<br>catering@kimchiloco.la<br>Text: (213) 555-LOCO</p>
      </div>
      <div class="footer-col">
        <h4 class="font-display">ALLERGEN INFO</h4>
        <p>Corn tortillas (GF)<br>Vegan options available<br>Contains: soy, sesame<br>Ask about peanuts</p>
      </div>
    </div>
    <p class="copyright">© 2024 Kimchi Loco. All rights reserved. Stay spicy. 🌶️</p>
  </footer>

  <script>
    // Menu Data
    const menuItems = [
      {
        name: "THE O.G. LOCO",
        desc: "Double carnitas, kimchi slaw, gochujan crema, cilantro, lime, corn tortilla. The one that started it all.",
        ingredients: "Corn tortilla • Carnitas • Napa kimchi • Gochujan aioli • Cilantro • Lime",
        price: "$4.50",
        heat: 3,
        badge: "fave",
        badgeText: "CROWD FAVE"
      },
      {
        name: "BULGOGI BOMB",
        desc: "Marinated bulgogi beef, charred scallions, pickled daikon, sesame crema, fried shallots, flour tortilla.",
        ingredients: "Flour tortilla • Bulgogi beef • Pickled daikon • Scallions • Sesame crema • Fried shallots",
        price: "$5.00",
        heat: 2,
        badge: "new",
        badgeText: "NEW"
      },
      {
        name: "SPICY PORK BELLY",
        desc: "Crispy pork belly, gochujan glaze, cucumber kimchi, pickled jalapeños, queso fresco, corn tortilla.",
        ingredients: "Corn tortilla • Pork belly • Gochujan glaze • Cucumber kimchi • Jalapeños • Queso fresco",
        price: "$5.50",
        heat: 4,
        badge: "spicy",
        badgeText: "FIRE 🔥"
      },
      {
        name: "KOREAN FRIED CHICKEN",
        desc: "Double-fried chicken, yangnyeom sauce, pickled radish slaw, ranch drizzle, brioche bun vibes on a tortilla.",
        ingredients: "Flour tortilla • KFC chicken • Yangnyeom sauce • Radish slaw • Buttermilk ranch",
        price: "$5.00",
        heat: 3,
        badge: "fave",
        badgeText: "BEST SELLER"
      },
      {
        name: "TOFU LOCO (VG)",
        desc: "Crispy gochujan tofu, charred corn, kimchi slaw, vegan chipotle crema, cilantro, corn tortilla.",
        ingredients: "Corn tortilla • Gochujan tofu • Charred corn • Kimchi slaw • Vegan chipotle crema",
        price: "$4.50",
        heat: 2,
        badge: "new",
        badgeText: "VEGAN"
      },
      {
        name: "SHORT RIB QUESADILLA",
        desc: "Braised short rib, melted Oaxaca + mozzarella, caramelized kimchi, scallions, served with consomé dip.",
        ingredients: "Flour tortilla • Short rib • Oaxaca cheese • Mozzarella • Caramelized kimchi • Consomé",
        price: "$7.00",
        heat: 2,
        badge: "spicy",
        badgeText: "PREMIUM"
      },
      {
        name: "KIMCHI FRIES",
        desc: "Crinkle fries, queso, carnitas, kimchi, gochujan crema, scallions, fried egg on top. Shareable... theoretically.",
        ingredients: "Fries • Queso • Carnitas • Kimchi • Gochujan crema • Scallions • Fried egg",
        price: "$9.00",
        heat: 3,
        badge: "fave",
        badgeText: "FOR THE TABLE"
      },
      {
        name: "ELOTE LOCO",
        desc: "Grilled corn, mayo-cotija spread, gochujan butter, chili lime dust, cilantro. Handheld street food perfection.",
        ingredients: "Corn • Cotija • Mayo • Gochujan butter • Chili lime • Cilantro",
        price: "$4.00",
        heat: 2,
        badge: "",
        badgeText: ""
      }
    ];

    // Reviews Data
    const reviews = [
      { text: "The O.G. Loco changed my life. I dream about that gochujan crema. Three times this week already and zero regrets.", author: "Marcus Chen", handle: "@marcuseatsla", stars: 5, avatar: "MC" },
      { text: "Bulgogi Bomb + Kimchi Fries = the perfect date night. My girlfriend stole my last fry and I didn't even mad.", author: "Sarah Kim", handle: "@sarahskitchen", stars: 5, avatar: "SK" },
      { text: "Finally a food truck that does spicy RIGHT. The Spicy Pork Belly has actual heat, not just 'spicy mayo' heat. Respect.", author: "Derek Rodriguez", handle: "@derekeats", stars: 5, avatar: "DR" },
      { text: "Vegan tofu taco that actually slaps? Didn't think it existed. The charred corn adds this sweet crunch. 10/10.", author: "Priya Patel", handle: "@priya.plantbased", stars: 5, avatar: "PP" },
      { text: "Catered our office holiday party. 50 people, zero complaints. The short rib quesadillas disappeared in 4 minutes flat.", author: "Jennifer Park", handle: "@jpark_events", stars: 5, avatar: "JP" },
      { text: "Followed this truck across LA for a week. Venice, K-Town, Arts District — consistent every time. That's rare.", author: "Tony Alvarez", handle: "@tonytacotours", stars: 5, avatar: "TA" }
    ];

    // Render Menu
    const menuGrid = document.getElementById('menuGrid');
    menuItems.forEach((item, i) => {
      const card = document.createElement('article');
      card.className = 'menu-card reveal' + (item.badge === 'fave' ? ' featured' : '');
      card.style.transitionDelay = `${i * 0.08}s`;
      card.innerHTML = `
        ${item.badge ? `<span class="menu-badge badge-${item.badge}">${item.badgeText}</span>` : ''}
        <h3>${item.name}</h3>
        <p class="desc">${item.desc}</p>
        <p class="ingredients">${item.ingredients}</p>
        <div class="menu-footer">
          <span class="price">${item.price}</span>
          <div class="heat-meter" aria-label="Spice level ${item.heat} out of 5">
            ${[1,2,3,4,5].map(l => `<span class="${l <= item.heat ? 'lit' : ''}"></span>`).join('')}
          </div>
        </div>
      `;
      menuGrid.appendChild(card);
    });

    // Render Reviews
    const reviewsGrid = document.getElementById('reviewsGrid');
    reviews.forEach((review, i) => {
      const card = document.createElement('article');
      card.className = 'review-card reveal';
      card.style.transitionDelay = `${i * 0.1}s`;
      card.innerHTML = `
        <div class="stars">${'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'.repeat(review.stars)}</div>
        <p class="review-text">"${review.text}"</p>
        <div class="review-author">
          <div class="avatar">${review.avatar}</div>
          <div>
            <div class="author-name">${review.author}</div>
            <div class="author-handle">${review.handle}</div>
          </div>
        </div>
      `;
      reviewsGrid.appendChild(card);
    });

    // Particles
    const particlesContainer = document.getElementById('particles');
    for (let i = 0; i < 20; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      p.style.left = Math.random() * 100 + '%';
      p.style.animationDelay = Math.random() * 8 + 's';
      p.style.animationDuration = (6 + Math.random() * 4) + 's';
      particlesContainer.appendChild(p);
    }

    // Scroll Reveal
    const revealElements = document.querySelectorAll('.reveal');
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });

    revealElements.forEach(el => observer.observe(el));

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
      });
    });

    // Parallax subtle movement on hero
    const hero = document.querySelector('.hero');
    let ticking = false;
    window.addEventListener('mousemove', (e) => {
      if (!ticking) {
        requestAnimationFrame(() => {
          const x = (e.clientX / window.innerWidth - 0.5) * 20;
          const y = (e.clientY / window.innerHeight - 0.5) * 20;
          hero.style.transform = `translate(${x * 0.3}px, ${y * 0.3}px)`;
          ticking = false;
        });
        ticking = true;
      }
    });

    // Reset hero transform on leave
    hero.addEventListener('mouseleave', () => {
      hero.style.transform = 'translate(0, 0)';
    });
  </script>
</body>
</html>
Reasoning trace (139 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". This needs to be a mouth-watering, visually appealing site that makes people want to visit. Let me create something vibrant, fun, and appetizing.

Key elements:
- Bold, energetic branding
- Mouth-watering food photography (using CSS/styled elements since no images)
- Menu with Korean-Mexican fusion items
- Food truck location/schedule
- Fun personality/voice
- Animations and interactions
- Mobile responsive

I'll use a vibrant color scheme - Korean red, Mexican orange/gold, with dark backgrounds for contrast. Lots of personality in the copy.