Models 44

DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean
Open in new window

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

How it went

Total time
44.8 s
Cost
$0.0041
Output tokens
8,212
Spent thinking
0 tokens
Speed
185.7 tok/s
Console errors
0
First token after
586 ms
First visible text after
586 ms
Prompt tokens
364
Code size
23.6 KB
Finish reason
stop
Served by
Relace
Model id
deepseek/deepseek-v4.1-flash-1017
Reasoning sent
{"effort":"none"}
Max output
64,000 tokens
Generated
Nov 11, 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 · 615 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kimchi Loco — Korean Tacos Food Truck</title>
<style>
  :root{
    --ink:#1a1210;
    --cream:#fff6e9;
    --chili:#e23b2e;
    --loco:#ffb020;
    --gochu:#8b1a1a;
    --lime:#7bc043;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{overflow-x:hidden}
  body{
    font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }

  /* ---------- HERO ---------- */
  header{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding:0 clamp(16px,4vw,64px);
    background:
      radial-gradient(120% 80% at 80% 10%, rgba(255,176,32,.55), transparent 60%),
      radial-gradient(90% 70% at 10% 90%, rgba(123,192,67,.35), transparent 60%),
      linear-gradient(160deg,#2b0f0c 0%, #7a1712 45%, #e23b2e 100%);
    color:var(--cream);
    overflow:hidden;
  }
  /* animated starburst */
  .burst{
    position:absolute;
    width:min(90vw,900px);
    aspect-ratio:1;
    right:-14%;
    top:-10%;
    background:repeating-conic-gradient(from 0deg,
      rgba(255,176,32,.16) 0deg 6deg,
      transparent 6deg 12deg);
    border-radius:50%;
    animation:spin 60s linear infinite;
    pointer-events:none;
    z-index:0;
  }
  @keyframes spin{to{transform:rotate(360deg)}}

  .nav{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 0;
    flex-wrap:wrap;
    gap:12px;
  }
  .logo{
    font-weight:900;font-size:clamp(18px,2.2vw,24px);
    letter-spacing:.06em;text-transform:uppercase;
    display:flex;align-items:center;gap:10px;
  }
  .logo .dot{width:14px;height:14px;border-radius:50%;background:var(--loco);
    box-shadow:0 0 0 4px rgba(255,176,32,.25);display:inline-block}
  .nav a{color:var(--cream);text-decoration:none;font-weight:700;font-size:14px;
    letter-spacing:.08em;text-transform:uppercase;opacity:.85;transition:.2s}
  .nav a:hover{opacity:1;color:var(--loco)}
  .navlinks{display:flex;gap:clamp(14px,3vw,36px);flex-wrap:wrap}

  .hero-main{
    position:relative;z-index:2;
    flex:1;display:grid;grid-template-columns:1.05fr .95fr;
    align-items:center;gap:clamp(20px,4vw,60px);
    padding:clamp(24px,4vw,60px) 0 clamp(48px,6vw,90px);
  }
  .kicker{
    display:inline-flex;align-items:center;gap:10px;
    background:rgba(255,246,233,.12);
    border:1.5px solid rgba(255,246,233,.3);
    padding:8px 16px;border-radius:999px;
    font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--loco);
    margin-bottom:22px;
  }
  .kicker .pulse{width:9px;height:9px;border-radius:50%;background:var(--lime);
    animation:pulse 1.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(123,192,67,.7)}50%{box-shadow:0 0 0 9px rgba(123,192,67,0)}}

  h1{
    font-size:clamp(46px,8.6vw,118px);
    line-height:.86;
    font-weight:900;
    letter-spacing:-.03em;
    text-transform:uppercase;
  }
  h1 .loco{
    color:var(--loco);
    text-shadow:0 6px 0 rgba(0,0,0,.18);
    display:inline-block;
    transform:rotate(-2deg);
  }
  h1 .outline{
    -webkit-text-stroke:2px var(--cream);
    color:transparent;
  }
  .sub{
    max-width:44ch;
    margin-top:26px;
    font-size:clamp(16px,1.6vw,20px);
    line-height:1.55;
    color:rgba(255,246,233,.88);
    font-weight:500;
  }
  .cta-row{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;align-items:center}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:16px 30px;border-radius:999px;
    font-weight:900;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
    text-decoration:none;cursor:pointer;border:none;
    transition:transform .15s ease, box-shadow .15s ease, background .2s;
  }
  .btn:hover{transform:translateY(-3px)}
  .btn-primary{background:var(--loco);color:var(--ink);
    box-shadow:0 10px 0 rgba(0,0,0,.28)}
  .btn-primary:hover{box-shadow:0 13px 0 rgba(0,0,0,.28)}
  .btn-ghost{background:transparent;color:var(--cream);
    border:2px solid rgba(255,246,233,.45)}
  .btn-ghost:hover{border-color:var(--loco);color:var(--loco)}

  /* taco visual */
  .taco-stage{
    position:relative;display:flex;justify-content:center;align-items:center;
    min-height:clamp(280px,44vw,460px);
  }
  .taco-plate{
    position:relative;width:min(78%,420px);aspect-ratio:1;
    display:grid;place-items:center;
  }
  .taco{
    width:100%;height:100%;
    filter:drop-shadow(0 26px 30px rgba(0,0,0,.45));
    animation:bob 4.5s ease-in-out infinite;
  }
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-16px) rotate(2deg)}}
  .steam{position:absolute;top:4%;width:100%;display:flex;justify-content:center;gap:22px;pointer-events:none}
  .steam span{width:8px;height:0;background:linear-gradient(to top,rgba(255,246,233,.5),transparent);
    border-radius:999px;animation:rise 3s ease-in infinite}
  .steam span:nth-child(2){animation-delay:.7s}
  .steam span:nth-child(3){animation-delay:1.4s}
  @keyframes rise{0%{height:0;opacity:0}30%{opacity:.8}100%{height:80px;opacity:0;transform:translateY(-30px)}}

  .price-tag{
    position:absolute;bottom:2%;right:-6%;
    background:var(--cream);color:var(--gochu);
    font-weight:900;font-size:clamp(15px,2vw,22px);
    padding:12px 20px;border-radius:16px;
    transform:rotate(7deg);
    box-shadow:0 12px 24px rgba(0,0,0,.35);
    border:3px dashed var(--chili);
  }
  .stamp{
    position:absolute;top:6%;left:-4%;
    width:clamp(82px,12vw,116px);aspect-ratio:1;
    border-radius:50%;
    background:var(--chili);
    color:var(--cream);
    display:grid;place-items:center;text-align:center;
    font-weight:900;font-size:clamp(10px,1.3vw,13px);line-height:1.15;
    letter-spacing:.05em;text-transform:uppercase;
    transform:rotate(-12deg);
    border:3px solid rgba(255,246,233,.7);
    animation:stampPulse 3s ease-in-out infinite;
  }
  @keyframes stampPulse{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-8deg) scale(1.07)}}

  .scroll-hint{
    position:relative;z-index:2;
    text-align:center;padding-bottom:26px;
    font-size:12px;letter-spacing:.25em;text-transform:uppercase;
    color:rgba(255,246,233,.6);font-weight:800;
    animation:fade 2s ease-in-out infinite;
  }
  @keyframes fade{0%,100%{opacity:.4}50%{opacity:1}}

  /* ---------- MARQUEE ---------- */
  .marquee{
    background:var(--ink);
    color:var(--cream);
    padding:16px 0;
    overflow:hidden;
    white-space:nowrap;
    border-top:4px solid var(--loco);
    border-bottom:4px solid var(--loco);
  }
  .marquee-track{
    display:inline-block;
    animation:scroll 26s linear infinite;
    font-weight:900;font-size:clamp(16px,2vw,22px);
    letter-spacing:.1em;text-transform:uppercase;
  }
  .marquee-track span{margin:0 26px;color:var(--cream)}
  .marquee-track .hl{color:var(--loco)}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- SECTION SHARED ---------- */
  section.block{padding:clamp(56px,8vw,110px) clamp(16px,4vw,64px)}
  .eyebrow{
    font-size:13px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;
    color:var(--chili);margin-bottom:14px;display:flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"";width:34px;height:3px;background:var(--chili);display:inline-block}
  h2{
    font-size:clamp(32px,5vw,64px);
    line-height:.95;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;
    margin-bottom:18px;
  }
  .lead{max-width:60ch;font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:#4a3b36}

  /* ---------- MENU ---------- */
  .menu-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:22px;margin-top:44px;
  }
  .card{
    background:#fff;
    border-radius:22px;
    padding:26px 24px 24px;
    border:2px solid #f0e3cf;
    box-shadow:0 6px 0 #f0e3cf;
    position:relative;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s;
    overflow:hidden;
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 12px 0 #f0e3cf;border-color:var(--loco)}
  .card .emoji{font-size:44px;display:block;margin-bottom:14px}
  .card h3{font-size:23px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:8px}
  .card p{font-size:15px;line-height:1.55;color:#5c4a44;min-height:66px}
  .price{
    display:inline-block;margin-top:18px;
    font-weight:900;font-size:20px;color:var(--gochu);
    background:#ffefd4;padding:6px 14px;border-radius:999px;
  }
  .tag{
    position:absolute;top:16px;right:16px;
    font-size:10.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
    background:var(--chili);color:#fff;padding:5px 10px;border-radius:999px;
  }
  .tag.green{background:var(--lime);color:var(--ink)}
  .tag.dark{background:var(--ink);color:var(--loco)}

  /* ---------- STORY / NUMBERS ---------- */
  .story{
    background:linear-gradient(170deg,#fff6e9 0%, #ffe9c9 100%);
  }
  .story-wrap{
    display:grid;grid-template-columns:1.05fr .95fr;
    gap:clamp(28px,5vw,70px);align-items:center;max-width:1240px;margin:0 auto;
  }
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .stat{
    background:var(--ink);color:var(--cream);
    border-radius:20px;padding:26px 22px;
    position:relative;overflow:hidden;
  }
  .stat:nth-child(2){background:var(--chili)}
  .stat:nth-child(3){background:var(--loco);color:var(--ink)}
  .stat:nth-child(4){background:var(--gochu)}
  .stat .num{font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1;letter-spacing:-.02em}
  .stat .lbl{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    margin-top:10px;opacity:.85}

  /* ---------- FIND US ---------- */
  .find{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
  .find h2{color:var(--cream)}
  .find .eyebrow{color:var(--loco)}
  .find .eyebrow::before{background:var(--loco)}
  .find .lead{color:rgba(255,246,233,.75)}
  .sched{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;margin-top:40px;
  }
  .slot{
    border:1.5px solid rgba(255,246,233,.18);
    border-radius:18px;padding:22px;
    background:rgba(255,246,233,.04);
    transition:.2s;
  }
  .slot:hover{border-color:var(--loco);background:rgba(255,176,32,.09)}
  .slot .day{font-size:12px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--loco)}
  .slot .place{font-size:19px;font-weight:800;margin-top:8px}
  .slot .time{font-size:14px;color:rgba(255,246,233,.6);margin-top:6px}
  .now{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--lime);color:var(--ink);
    font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
    padding:5px 12px;border-radius:999px;margin-top:14px;
  }
  .now::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink);
    animation:pulse 1.4s ease-in-out infinite}

  /* ---------- FOOTER CTA ---------- */
  .final{
    background:linear-gradient(120deg,var(--chili),var(--gochu));
    color:var(--cream);text-align:center;
    padding:clamp(64px,9vw,120px) clamp(16px,4vw,64px);
    position:relative;overflow:hidden;
  }
  .final h2{font-size:clamp(34px,6vw,76px);color:var(--cream)}
  .final p{max-width:56ch;margin:18px auto 0;font-size:clamp(16px,1.6vw,20px);line-height:1.6;
    color:rgba(255,246,233,.9)}
  .final .btn-primary{margin-top:38px;font-size:16px;padding:18px 40px}
  .socials{display:flex;justify-content:center;gap:18px;margin-top:44px;flex-wrap:wrap}
  .socials a{
    color:rgba(255,246,233,.8);text-decoration:none;font-weight:800;
    font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
    border-bottom:2px solid transparent;padding-bottom:3px;transition:.2s;
  }
  .socials a:hover{color:var(--loco);border-color:var(--loco)}
  .copyright{
    text-align:center;padding:26px;font-size:12px;letter-spacing:.1em;
    text-transform:uppercase;color:#8a7a72;background:var(--cream);font-weight:700;
  }

  /* taco floaters */
  .floater{position:absolute;font-size:clamp(26px,4vw,48px);opacity:.16;pointer-events:none;
    animation:bob 6s ease-in-out infinite}
  .floater.f1{top:12%;left:6%}
  .floater.f2{bottom:16%;right:8%;animation-delay:1.2s}
  .floater.f3{top:60%;left:12%;animation-delay:2.4s}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:860px){
    .hero-main{grid-template-columns:1fr;gap:10px;padding-top:10px}
    .taco-stage{order:-1;min-height:auto}
    .taco-plate{width:min(62%,300px)}
    .story-wrap{grid-template-columns:1fr}
    .price-tag{right:4%}
    .stamp{left:2%}
  }
  @media (max-width:520px){
    .navlinks{display:none}
    .card p{min-height:0}
    .price-tag{bottom:-2%;font-size:14px;padding:9px 14px}
    .cta-row{flex-direction:column;align-items:stretch}
    .btn{justify-content:center}
  }
</style>
</head>
<body>

<!-- HERO -->
<header>
  <div class="burst"></div>
  <div class="floater f1">🌮</div>
  <div class="floater f2">🌶️</div>
  <div class="floater f3">🔥</div>

  <nav class="nav">
    <div class="logo"><span class="dot"></span>Kimchi Loco</div>
    <div class="navlinks">
      <a href="#menu">Menu</a>
      <a href="#story">The Fire</a>
      <a href="#find">Find the Truck</a>
    </div>
  </nav>

  <div class="hero-main">
    <div>
      <div class="kicker"><span class="pulse"></span>Now serving • Austin, TX</div>
      <h1>Korean<br><span class="loco">Fire</span> <span class="outline">in a</span><br>Taco Shell</h1>
      <p class="sub">Gochujang-braised short rib. Crackly kimchi. A blistered corn tortilla that can barely hold it all. This is not fusion — this is a collision, and it tastes incredible.</p>
      <div class="cta-row">
        <a href="#menu" class="btn btn-primary">🌮 See the Menu</a>
        <a href="#find" class="btn btn-ghost">📍 Find the Truck</a>
      </div>
    </div>

    <div class="taco-stage">
      <div class="steam"><span></span><span></span><span></span></div>
      <div class="taco-plate">
        <svg class="taco" viewBox="0 0 400 400" role="img" aria-label="A loaded Korean taco">
          <defs>
            <linearGradient id="shell" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#f6c453"/>
              <stop offset="55%" stop-color="#e8a52e"/>
              <stop offset="100%" stop-color="#c47c18"/>
            </linearGradient>
            <linearGradient id="meat" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#8b1a1a"/>
              <stop offset="100%" stop-color="#5a0e0e"/>
            </linearGradient>
            <linearGradient id="lettuce" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stop-color="#a8d95f"/>
              <stop offset="100%" stop-color="#6aa832"/>
            </linearGradient>
          </defs>

          <!-- tortilla shadow -->
          <ellipse cx="200" cy="330" rx="140" ry="22" fill="rgba(0,0,0,.22)"/>

          <!-- tortilla back -->
          <path d="M70 300 C70 175 135 105 200 105 C265 105 330 175 330 300 Z" fill="url(#shell)"/>
          <path d="M70 300 C70 175 135 105 200 105 C265 105 330 175 330 300 Z" fill="none" stroke="#a8690f" stroke-width="3" opacity=".5"/>

          <!-- char marks -->
          <g stroke="#8a5309" stroke-width="7" stroke-linecap="round" opacity=".45">
            <path d="M120 240 q14 -16 8 -34"/>
            <path d="M165 200 q-10 22 4 34"/>
            <path d="M255 215 q12 -18 4 -36"/>
            <path d="M290 255 q-12 16 -6 30"/>
          </g>

          <!-- lettuce bed -->
          <path d="M88 250 C100 210 145 190 200 190 C255 190 300 210 312 250 C290 285 250 300 200 300 C150 300 110 285 88 250 Z" fill="url(#lettuce)"/>
          <!-- lettuce frills -->
          <g fill="#8cc44a">
            <circle cx="110" cy="240" r="18"/>
            <circle cx="150" cy="222" r="20"/>
            <circle cx="200" cy="212" r="22"/>
            <circle cx="250" cy="222" r="20"/>
            <circle cx="290" cy="240" r="18"/>
          </g>

          <!-- bulgogi meat -->
          <g fill="url(#meat)">
            <path d="M120 258 C110 235 145 218 175 226 C195 231 200 250 188 262 C170 278 130 280 120 258Z"/>
            <path d="M185 250 C180 226 215 210 245 222 C268 231 268 258 250 266 C228 276 195 272 185 250Z"/>
            <path d="M240 262 C234 244 262 232 288 244 C305 252 300 275 282 280 C260 286 246 278 240 262Z"/>
          </g>
          <!-- glossy meat highlights -->
          <g fill="rgba(255,190,120,.35)">
            <ellipse cx="150" cy="242" rx="14" ry="6" transform="rotate(-14 150 242)"/>
            <ellipse cx="218" cy="238" rx="16" ry="6" transform="rotate(8 218 238)"/>
            <ellipse cx="270" cy="254" rx="12" ry="5" transform="rotate(-10 270 254)"/>
          </g>

          <!-- kimchi red strips -->
          <g fill="#d9342a">
            <path d="M135 270 q18 -12 34 -2 q-6 14 -24 14 q-12 -2 -10 -12Z"/>
            <path d="M210 272 q20 -10 34 2 q-10 14 -26 10 q-12 -4 -8 -12Z"/>
            <path d="M262 230 q16 -8 26 4 q-8 12 -22 8 q-10 -4 -4 -12Z"/>
          </g>
          <!-- green onion -->
          <g stroke="#7bc043" stroke-width="6" stroke-linecap="round">
            <path d="M140 218 l-12 -6"/>
            <path d="M170 208 l-4 -12"/>
            <path d="M205 202 l6 -12"/>
            <path d="M238 210 l10 -10"/>
            <path d="M268 222 l14 -6"/>
          </g>
          <!-- sesame -->
          <g fill="#fff6e9">
            <ellipse cx="160" cy="250" rx="4" ry="2.4" transform="rotate(20 160 250)"/>
            <ellipse cx="198" cy="240" rx="4" ry="2.4" transform="rotate(-15 198 240)"/>
            <ellipse cx="236" cy="252" rx="4" ry="2.4" transform="rotate(35 236 252)"/>
            <ellipse cx="276" cy="246" rx="4" ry="2.4" transform="rotate(-25 276 246)"/>
            <ellipse cx="128" cy="256" rx="4" ry="2.4" transform="rotate(10 128 256)"/>
          </g>

          <!-- tortilla front lip -->
          <path d="M70 300 C110 336 290 336 330 300 C290 322 110 322 70 300 Z" fill="#d99524" opacity=".9"/>
        </svg>
        <div class="stamp">Real<br>Fire<br>Only</div>
        <div class="price-tag">From $6 🌮</div>
      </div>
    </div>
  </div>

  <div class="scroll-hint">Scroll · Get Hungry</div>
</header>

<!-- MARQUEE -->
<div class="marquee">
  <div class="marquee-track" id="mq">
    <span>Gochujang <span class="hl">★</span> Kimchi <span class="hl">★</span> Bulgogi <span class="hl">★</span> Crackly Corn Tortillas <span class="hl">★</span> Pickled Daikon <span class="hl">★</span> Fire Sauce <span class="hl">★</span>&nbsp;</span>
  </div>
</div>

<!-- MENU -->
<section class="block" id="menu">
  <div class="eyebrow">The Lineup</div>
  <h2>Tacos that<br>start arguments.</h2>
  <p class="lead">Six things on the menu. Every single one earns its place. Order two, regret nothing, come back tomorrow for the rest.</p>

  <div class="menu-grid">
    <div class="card">
      <span class="tag">Best Seller</span>
      <span class="emoji">🥩</span>
      <h3>Galbi Short Rib</h3>
      <p>12-hour gochujang-braised short rib, charred scallion, pickled daikon, sesame. Melts before you chew.</p>
      <span class="price">$6.50</span>
    </div>
    <div class="card">
      <span class="tag dark">Fire</span>
      <span class="emoji">🔥</span>
      <h3>Buldak Blaze</h3>
      <p>Fire-chicken thighs, triple-chili sauce, lime crema, crunchy cabbage slaw. It's hot. It's honest about it.</p>
      <span class="price">$6.00</span>
    </div>
    <div class="card">
      <span class="tag green">Veggie</span>
      <span class="emoji">🍄</span>
      <h3>King Oyster Seoul</h3>
      <p>Smoked king oyster mushroom, soy-ginger glaze, house kimchi, toasted garlic. Meat-eaters order this twice.</p>
      <span class="price">$5.75</span>
    </div>
    <div class="card">
      <span class="emoji">🌶️</span>
      <h3>Kimchi Pork Belly</h3>
      <p>Crackling pork belly, aged house kimchi, gochujang aioli, fresno chili. The messy one. Worth it.</p>
      <span class="price">$7.00</span>
    </div>
    <div class="card">
      <span class="emoji">🌽</span>
      <h3>Elote Loco</h3>
      <p>Grilled street corn, gochugaru butter, cotija, lime, chili threads. A side that steals the show.</p>
      <span class="price">$4.50</span>
    </div>
    <div class="card">
      <span class="emoji">🥤</span>
      <h3>Yuja Agua Fresca</h3>
      <p>Korean yuja citrus, fresh lime, mint, sparkling water. The reset button your mouth will thank you for.</p>
      <span class="price">$3.50</span>
    </div>
  </div>
</section>

<!-- STORY -->
<section class="block story" id="story">
  <div class="story-wrap">
    <div>
      <div class="eyebrow">The Fire Behind It</div>
      <h2>Two kitchens.<br>One truck.</h2>
      <p class="lead">Kimchi Loco started as a joke between a Korean grandma's kitchen and a taco stand on South 1st. Then we actually cooked it — gochujang on a charred corn tortilla, crackling at the edges — and the joke stopped being funny. It became a line around the block.</p>
      <p class="lead" style="margin-top:18px">Everything gets made on the truck. The kimchi ferments in the back. The tortillas get pressed to order. The fire sauce is a family recipe we're not allowed to write down.</p>
    </div>
    <div class="stats">
      <div class="stat"><div class="num">12<br>hrs</div><div class="lbl">Short Rib Braise</div></div>
      <div class="stat"><div class="num">800+</div><div class="lbl">Tacos / Saturday</div></div>
      <div class="stat"><div class="num">4.9★</div><div class="lbl">Across 1,200 Reviews</div></div>
      <div class="stat"><div class="num">0</div><div class="lbl">Freezers On Board</div></div>
    </div>
  </div>
</section>

<!-- FIND US -->
<section class="block find" id="find">
  <div class="eyebrow">Rolling Schedule</div>
  <h2>Find the<br>taco truck.</h2>
  <p class="lead">We move. Follow the smoke. Here's where the Kimchi Loco truck parks this week — and yes, we sell out early.</p>

  <div class="sched">
    <div class="slot">
      <div class="day">Monday – Tuesday</div>
      <div class="place">South Congress Lot</div>
      <div class="time">11:30 AM – 8 PM · 1500 S Congress</div>
      <div class="now">Serving Now</div>
    </div>
    <div class="slot">
      <div class="day">Wednesday – Thursday</div>
      <div class="place">Rainey Street Row</div>
      <div class="time">5 PM – 11 PM · Late-night fire</div>
    </div>
    <div class="slot">
      <div class="day">Friday</div>
      <div class="place">Mueller Farmers Market</div>
      <div class="time">11 AM – 2 PM · Get there early</div>
    </div>
    <div class="slot">
      <div class="day">Saturday – Sunday</div>
      <div class="place">Zilker Park Edge</div>
      <div class="time">12 PM – 9 PM · Picnic-plate chaos</div>
    </div>
  </div>
</section>

<!-- FINAL CTA -->
<section class="final">
  <h2>Come hungry.<br>Leave loco.</h2>
  <p>The truck is warming up. The kimchi is ready. The first 20 tacos on Saturday go fast — and the fire sauce waits for nobody.</p>
  <a href="#menu" class="btn btn-primary">🌮 Plan Your Order</a>
  <div class="socials">
    <a href="#">Instagram</a>
    <a href="#">TikTok</a>
    <a href="#">Text the Truck</a>
  </div>
</section>

<div class="copyright">© Kimchi Loco Food Truck · Austin, TX · Gochujang is a personality</div>

<script>
  // Duplicate marquee content for seamless loop
  (function(){
    const mq = document.getElementById('mq');
    mq.innerHTML += mq.innerHTML;
  })();

  // Smooth scroll for in-page links
  document.querySelectorAll('a[href^="#"]').forEach(function(a){
    a.addEventListener('click', function(e){
      const id = a.getAttribute('href');
      if(id.length > 1){
        const el = document.querySelector(id);
        if(el){ e.preventDefault(); el.scrollIntoView({behavior:'smooth', block:'start'}); }
      }
    });
  });
</script>
</body>
</html>