Models 44

GLM 5.3 Flash

by Z.aiReasoningClean
Open in new window

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

How it went

Total time
2 min 23 s
Cost
$0.012
Output tokens
23,426
Spent thinking
9,663 tokens
Speed
165.3 tok/s
Console errors
0
First token after
1.2 s
First visible text after
1 min 13 s
Prompt tokens
362
Code size
41.0 KB
Finish reason
stop
Served by
Fireworks
Model id
z-ai/glm-5.3-flash
Reasoning sent
{"effort":"low"}
Max output
64,000 tokens
Generated
Nov 10, 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 · 773 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 Tacos, Seoul Fire</title>
<style>
  :root{
    --paper:#FAF1DF;
    --paper-2:#F3E5CB;
    --ink:#241E17;
    --red:#D8342A;
    --orange:#E86A17;
    --green:#4E8C33;
    --yellow:#F3C550;
    --cream:#FBF3E4;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:Georgia,'Times New Roman',serif;
    overflow-x:hidden;
    line-height:1.5;
  }
  /* riso paper grain over everything */
  body::after{
    content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  }
  .display{font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-weight:400;letter-spacing:-.005em}
  .mono{font-family:ui-monospace,'Cascadia Mono','Courier New',monospace}
  .wrap{max-width:1180px;margin:0 auto;padding:0 5vw}
  svg{display:block}
  a{color:inherit}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

  /* ---------- top ticker ---------- */
  .ticker{
    background:var(--red);color:var(--cream);overflow:hidden;
    border-bottom:3px solid var(--ink);white-space:nowrap;
  }
  .ticker-inner{display:inline-block;padding:7px 0;animation:tick 26s linear infinite}
  .ticker span{font-family:ui-monospace,'Courier New',monospace;font-size:13px;letter-spacing:.22em;margin-right:1.6em}
  @keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:100;
    background:var(--paper);border-bottom:3px solid var(--ink);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;gap:16px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo strong{font-family:Impact,Haettenschweiler,sans-serif;font-weight:400;font-size:24px;letter-spacing:.02em}
  .logo .kor{font-size:12px;opacity:.55;align-self:flex-end;margin-bottom:3px}
  nav.links{display:flex;gap:26px}
  nav.links a{
    text-decoration:none;font-family:ui-monospace,'Courier New',monospace;
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:4px 0;
  }
  nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--red);transition:width .25s}
  nav.links a:hover::after{width:100%}
  .btn{
    display:inline-block;border:3px solid var(--ink);background:var(--ink);color:var(--cream);
    font-family:Impact,Haettenschweiler,sans-serif;font-size:17px;letter-spacing:.05em;
    padding:10px 22px;border-radius:999px;text-decoration:none;cursor:pointer;
    box-shadow:4px 4px 0 rgba(36,30,23,.9);transition:transform .15s, box-shadow .15s, background .15s;
  }
  .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(36,30,23,.9);background:var(--red)}
  .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(36,30,23,.9)}
  .btn.ghost{background:transparent;color:var(--ink)}
  .btn.ghost:hover{background:var(--yellow);color:var(--ink)}
  .basket{
    border:3px solid var(--ink);border-radius:999px;padding:8px 16px;background:var(--yellow);
    font-family:ui-monospace,'Courier New',monospace;font-size:13px;font-weight:700;letter-spacing:.05em;
  }

  /* ---------- hero ---------- */
  .hero{position:relative;overflow:hidden;border-bottom:3px solid var(--ink)}
  .hero-ko{
    position:absolute;right:-3%;top:-8%;z-index:0;pointer-events:none;
    font-size:clamp(160px,26vw,340px);font-weight:900;color:transparent;
    -webkit-text-stroke:2px rgba(36,30,23,.12);line-height:1;font-family:sans-serif;
  }
  .hero-grid{
    position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
    gap:24px;align-items:center;padding:56px 5vw 64px;max-width:1180px;margin:0 auto;
  }
  .kicker{font-family:ui-monospace,'Courier New',monospace;font-size:13px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:18px}
  .kicker b{color:var(--red)}
  h1{font-size:clamp(76px,12.5vw,176px);line-height:.88;text-transform:uppercase}
  h1 .l1{display:block;color:var(--red);text-shadow:6px 6px 0 var(--ink);transform:rotate(-1.5deg)}
  h1 .l2{
    display:block;color:transparent;-webkit-text-stroke:3px var(--ink);
    margin-left:.35em;transform:rotate(1deg);margin-top:8px;
  }
  .tagline{font-style:italic;font-size:clamp(18px,2vw,23px);margin:26px 0 6px;max-width:34ch}
  .tagline em{color:var(--red);font-style:italic}
  .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:26px}
  .hint{margin-top:22px;font-family:ui-monospace,'Courier New',monospace;font-size:12.5px;letter-spacing:.12em;opacity:.6}

  /* taco stage */
  .stage{position:relative;display:flex;justify-content:center}
  .taco-wrap{position:relative;width:min(440px,86vw);cursor:pointer;animation:bob 2.8s ease-in-out infinite alternate;-webkit-tap-highlight-color:transparent}
  @keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(9px)}}
  .taco-inner{transition:transform .1s}
  .taco-inner.boing{animation:boing .55s ease}
  @keyframes boing{
    0%{transform:scale(1) rotate(0)}
    30%{transform:scale(1.07,.92) rotate(2deg)}
    55%{transform:scale(.94,1.06) rotate(-2.5deg)}
    100%{transform:scale(1) rotate(0)}
  }
  .flame{transform-box:fill-box;transform-origin:center bottom;animation:flick .42s ease-in-out infinite alternate}
  .f2{animation-delay:.14s}.f3{animation-delay:.26s}
  @keyframes flick{from{transform:scaleY(.82) scaleX(1.06)}to{transform:scaleY(1.14) scaleX(.94)}}
  .steam{transform-box:fill-box;transform-origin:center bottom;animation:steam 3.2s ease-in infinite}
  .s2{animation-delay:1.1s}.s3{animation-delay:2.1s}
  @keyframes steam{0%{transform:translateY(12px) scale(.9);opacity:0}30%{opacity:.55}100%{transform:translateY(-30px) scale(1.1);opacity:0}}
  .badge{
    position:absolute;top:-30px;left:-14px;width:148px;height:148px;z-index:2;
    animation:spin 15s linear infinite;pointer-events:none;
  }
  @keyframes spin{to{transform:rotate(360deg)}}
  /* flying ingredient particles */
  .pt{position:absolute;z-index:5;pointer-events:none;will-change:transform,opacity}
  .pt svg{width:100%;height:100%}

  /* ---------- marquee divider ---------- */
  .div-marquee{background:var(--ink);color:var(--cream);overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--ink)}
  .div-marquee .ticker-inner{animation-duration:34s}
  .div-marquee span{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(18px,2.2vw,26px);letter-spacing:.1em;margin-right:1.4em;color:var(--yellow)}
  .div-marquee .r{color:var(--red)}

  /* ---------- section headings ---------- */
  section{position:relative}
  .sec-head{padding:70px 0 34px;display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
  .sec-num{font-family:ui-monospace,'Courier New',monospace;font-size:14px;letter-spacing:.2em;opacity:.6;padding-bottom:14px}
  .sec-head h2{font-size:clamp(52px,8vw,104px);line-height:.9;text-transform:uppercase;color:var(--red);text-shadow:4px 4px 0 var(--ink)}
  .sec-head .sub{font-style:italic;font-size:17px;padding-bottom:12px;max-width:32ch;opacity:.85}

  /* ---------- menu ---------- */
  .menu-note{font-family:ui-monospace,'Courier New',monospace;font-size:13px;letter-spacing:.08em;border-left:4px solid var(--red);padding:6px 0 6px 16px;margin-bottom:34px;max-width:62ch}
  .mrow{border-top:3px solid var(--ink);transition:background .25s,color .25s;cursor:default}
  .mrow:last-of-type{border-bottom:3px solid var(--ink)}
  .mrow:hover,.mrow.open{background:var(--ink);color:var(--cream)}
  .mrow-top{display:flex;align-items:baseline;gap:18px;padding:22px 8px}
  .mrow .num{font-family:ui-monospace,'Courier New',monospace;font-size:14px;opacity:.55;min-width:30px}
  .mrow h3{font-family:Impact,Haettenschweiler,sans-serif;font-weight:400;font-size:clamp(26px,3.6vw,42px);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
  .mrow .dots{flex:1;border-bottom:3px dotted currentColor;opacity:.45;transform:translateY(-6px);min-width:24px}
  .mrow .price{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(22px,2.6vw,30px);color:var(--red)}
  .mrow:hover .price,.mrow.open .price{color:var(--yellow)}
  .add{
    width:40px;height:40px;border-radius:50%;border:3px solid currentColor;flex:none;align-self:center;
    font-family:ui-monospace,'Courier New',monospace;font-size:22px;line-height:1;
    display:grid;place-items:center;transition:background .2s,color .2s,transform .2s;
  }
  .add:hover{background:var(--red);color:var(--cream)!important;border-color:var(--cream);transform:rotate(90deg)}
  .mbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
  .mrow:hover .mbody,.mrow.open .mbody{grid-template-rows:1fr}
  .mbody-in{overflow:hidden}
  .mbody-flex{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:0 8px 22px 56px}
  .mbody p{font-style:italic;font-size:16.5px;max-width:56ch;opacity:.92}
  .heat{display:flex;gap:3px;margin-left:auto;align-items:center}
  .heat svg{width:21px;height:21px}
  .heat .lbl{font-family:ui-monospace,'Courier New',monospace;font-size:11px;letter-spacing:.14em;margin-right:8px;opacity:.7}

  /* ---------- story ---------- */
  .story{background:var(--paper-2);border-top:3px solid var(--ink);overflow:hidden;position:relative}
  .story-ko{
    position:absolute;left:-4%;bottom:-10%;font-size:clamp(140px,20vw,260px);font-weight:900;line-height:1;
    color:transparent;-webkit-text-stroke:2px rgba(36,30,23,.1);pointer-events:none;font-family:sans-serif;
  }
  .story-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;padding-bottom:80px;position:relative;z-index:1}
  .story p.lede{font-size:clamp(19px,2.1vw,24px);line-height:1.6}
  .story p.lede::first-letter{
    font-family:Impact,Haettenschweiler,sans-serif;font-size:3.2em;color:var(--red);
    float:left;line-height:.8;padding:6px 12px 0 0;
  }
  .story p.lede b{color:var(--red);font-style:normal}
  .story p+p{margin-top:18px;font-size:17px;opacity:.9;max-width:56ch}
  .stickers{position:relative;height:420px}
  .sticker{
    position:absolute;background:var(--cream);border:3px solid var(--ink);border-radius:14px;
    padding:18px 22px 14px;text-align:center;filter:drop-shadow(7px 7px 0 rgba(36,30,23,.85));
    transition:transform .25s;
  }
  .sticker:hover{transform:rotate(0deg) scale(1.06)!important}
  .sticker figcaption{font-family:ui-monospace,'Courier New',monospace;font-size:12px;letter-spacing:.18em;margin-top:10px}
  .st1{top:0;left:6%;transform:rotate(-7deg)}
  .st2{top:130px;right:2%;transform:rotate(5deg)}
  .st3{bottom:0;left:20%;transform:rotate(-3deg)}
  .strip{display:flex;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);background:var(--paper)}
  .strip > div{flex:1;padding:26px 30px;border-left:3px solid var(--ink)}
  .strip > div:first-child{border-left:none}
  .strip .big{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(34px,4.4vw,58px);color:var(--red);line-height:1}
  .strip .lbl{font-family:ui-monospace,'Courier New',monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin-top:6px;opacity:.75}

  /* ---------- truck (dark) ---------- */
  .truck{background:var(--ink);color:var(--cream);border-top:3px solid var(--ink)}
  .truck .sec-head h2{color:var(--yellow);text-shadow:4px 4px 0 var(--red)}
  .status-pill{
    display:inline-flex;align-items:center;gap:10px;border:3px solid var(--cream);border-radius:999px;
    padding:10px 22px;font-family:ui-monospace,'Courier New',monospace;font-size:14px;letter-spacing:.1em;
    margin-bottom:30px;
  }
  .status-pill .dot{width:12px;height:12px;border-radius:50%;background:#777}
  .status-pill.open{border-color:#8CD867;color:#8CD867;animation:pulse 1.6s ease-in-out infinite}
  .status-pill.open .dot{background:#8CD867}
  .status-pill.closed{color:var(--red)}
  .status-pill.closed .dot{background:var(--red)}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
  .sched{border-top:3px solid var(--cream);margin-bottom:70px}
  .srow{
    display:grid;grid-template-columns:110px 1fr auto auto;gap:20px;align-items:center;
    padding:20px 14px;border-bottom:3px solid rgba(251,243,228,.25);transition:background .2s;
  }
  .srow .day{font-family:ui-monospace,'Courier New',monospace;font-size:14px;letter-spacing:.2em;opacity:.7}
  .srow .loc{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(20px,2.6vw,30px);letter-spacing:.02em;text-transform:uppercase}
  .srow .hrs{font-family:ui-monospace,'Courier New',monospace;font-size:13px;opacity:.7;letter-spacing:.06em}
  .srow.today{background:rgba(216,52,42,.22);box-shadow:inset 6px 0 0 var(--red)}
  .srow.today .day{color:var(--yellow);opacity:1}
  .today-tag{
    font-family:ui-monospace,'Courier New',monospace;font-size:11px;letter-spacing:.2em;
    background:var(--red);color:var(--cream);padding:5px 12px;border-radius:999px;
  }
  .closed-day{opacity:.4;font-style:italic;font-family:Georgia,serif;font-size:16px;text-transform:none;letter-spacing:0}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:var(--cream);border-top:3px solid var(--cream);padding:70px 0 40px}
  .club{display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:60px}
  .club h3{font-family:Impact,Haettenschweiler,sans-serif;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;color:var(--yellow)}
  .club form{display:flex;gap:0;flex:1;min-width:280px;max-width:480px}
  .club input{
    flex:1;background:transparent;border:3px solid var(--cream);border-right:none;color:var(--cream);
    padding:12px 16px;font-family:ui-monospace,'Courier New',monospace;font-size:14px;outline:none;min-width:0;
  }
  .club input::placeholder{color:rgba(251,243,228,.5)}
  .club input:focus{border-color:var(--yellow)}
  .club button{border-radius:0}
  .foot-links{display:flex;gap:28px;font-family:ui-monospace,'Courier New',monospace;font-size:13px;letter-spacing:.14em;margin-bottom:44px}
  .foot-links button{text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s,color .2s}
  .foot-links button:hover{color:var(--yellow);border-color:var(--yellow)}
  .giant{
    text-align:center;font-size:clamp(58px,12vw,150px);line-height:.9;text-transform:uppercase;
    color:transparent;-webkit-text-stroke:3px rgba(251,243,228,.85);white-space:nowrap;
  }
  .giant span{color:var(--red);-webkit-text-stroke:0;text-shadow:5px 5px 0 rgba(251,243,228,.25)}
  .credits{text-align:center;font-family:ui-monospace,'Courier New',monospace;font-size:12px;letter-spacing:.14em;opacity:.5;margin-top:26px}

  /* ---------- toast ---------- */
  #toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,120px);z-index:800;
    background:var(--ink);color:var(--cream);border:3px solid var(--cream);border-radius:999px;
    padding:13px 26px;font-family:ui-monospace,'Courier New',monospace;font-size:14px;letter-spacing:.05em;
    box-shadow:5px 5px 0 rgba(216,52,42,.9);transition:transform .35s cubic-bezier(.2,.9,.3,1.3);white-space:nowrap;max-width:92vw;
  }
  #toast.show{transform:translate(-50%,0)}
  #toast b{color:var(--yellow)}

  /* ---------- reveal on scroll ---------- */
  .reveal{opacity:0;transform:translateY(28px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}

  /* ---------- responsive ---------- */
  @media (max-width:960px){
    .hero-grid{grid-template-columns:1fr;padding-top:44px}
    .stage{margin-top:10px}
    .badge{width:112px;height:112px;top:-22px;left:2%}
    .story-grid{grid-template-columns:1fr;gap:20px}
    .stickers{height:380px;max-width:460px;margin:0 auto;width:100%}
    nav.links{display:none}
    .srow{grid-template-columns:80px 1fr auto;gap:12px}
    .srow .hrs{grid-column:2;grid-row:2}
  }
  @media (max-width:640px){
    .mrow-top{flex-wrap:wrap;gap:10px;padding:18px 6px}
    .mrow h3{white-space:normal}
    .mbody-flex{padding-left:6px}
    .heat{margin-left:0}
    .strip{flex-direction:column}
    .strip > div{border-left:none;border-top:3px solid var(--ink)}
    .strip > div:first-child{border-top:none}
    .stickers{height:340px}
    .st2{right:0}
  }
</style>
</head>
<body>

<!-- ================= top ticker ================= -->
<div class="ticker" aria-hidden="true">
  <div class="ticker-inner" id="tick1"></div>
</div>

<!-- ================= header ================= -->
<header>
  <div class="nav">
    <a class="logo" href="#top">
      <svg width="30" height="30" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M20 7c1.5-2 .8-4.2-.5-5.5-.8 1-1 2-1 3.2C13 4 7 6 4.2 10 2 13 1 17.5 2.5 21c-.4-4 1.6-8 4.7-10.6C10.5 7.5 15.8 6.5 20 7Z" fill="#D8342A" stroke="#241E17" stroke-width="1.6"/>
      </svg>
      <strong>KIMCHI LOCO</strong>
      <span class="kor mono">김치 로코</span>
    </a>
    <nav class="links">
      <a href="#menu">Menu</a>
      <a href="#story">Story</a>
      <a href="#truck">The Truck</a>
    </nav>
    <div style="display:flex;gap:12px;align-items:center">
      <span class="basket mono" id="basket">🛒 0</span>
      <a class="btn" href="#menu" id="orderBtn">Order</a>
    </div>
  </div>
</header>

<!-- ================= hero ================= -->
<section class="hero" id="top">
  <div class="hero-ko" aria-hidden="true">맛있어</div>
  <div class="hero-grid">
    <div>
      <p class="kicker"><b>●</b> FOOD TRUCK — KOREAN × MEXICAN — EST. 2024</p>
      <h1 class="display">
        <span class="l1">KIMCHI</span>
        <span class="l2">LOCO</span>
      </h1>
      <p class="tagline">Seoul fire. Mexico City soul. Bulgogi sizzling on one flat-top, tortillas toasting on the other — <em>and absolutely no chilli too shy.</em></p>
      <div class="hero-ctas">
        <a class="btn" href="#menu">See the menu</a>
        <a class="btn ghost" href="#truck">Find the truck</a>
      </div>
      <p class="hint">psst — click the taco. he likes attention.</p>
    </div>

    <div class="stage">
      <div class="taco-wrap" id="tacoWrap" role="img" aria-label="A smiling taco mascot wearing sunglasses, sitting over flames">
        <!-- rotating badge -->
        <svg class="badge" viewBox="0 0 160 160" aria-hidden="true">
          <defs>
            <path id="badgeCircle" d="M80,80 m-58,0 a58,58 0 1,1 116,0 a58,58 0 1,1 -116,0"/>
          </defs>
          <circle cx="80" cy="80" r="76" fill="#D8342A" stroke="#241E17" stroke-width="4"/>
          <circle cx="80" cy="80" r="40" fill="#FAF1DF" stroke="#241E17" stroke-width="3"/>
          <text font-family="ui-monospace, monospace" font-size="14.5" letter-spacing="3.5" fill="#FBF3E4">
            <textPath href="#badgeCircle">KIMCHI LOCO ★ 스피시 ★ TACO ★</textPath>
          </text>
          <path d="M20 7c1.5-2 .8-4.2-.5-5.5-.8 1-1 2-1 3.2C13 4 7 6 4.2 10 2 13 1 17.5 2.5 21c-.4-4 1.6-8 4.7-10.6C10.5 7.5 15.8 6.5 20 7Z" fill="#D8342A" stroke="#241E17" stroke-width="1.6" transform="translate(69,69) scale(0.95)"/>
        </svg>

        <div class="taco-inner" id="tacoInner">
          <svg viewBox="0 0 420 470" aria-hidden="true">
            <!-- steam -->
            <g fill="none" stroke="#241E17" stroke-width="5" stroke-linecap="round" opacity=".5">
              <path class="steam"    d="M150,100 q-12,-24 4,-44 q13,-17 2,-38"/>
              <path class="steam s2" d="M232,92 q12,-22 -3,-42 q-12,-16 -2,-34"/>
              <path class="steam s3" d="M292,110 q-10,-20 4,-36 q11,-14 3,-30"/>
            </g>
            <!-- flames -->
            <g>
              <g class="flame f1" transform="translate(120,458)">
                <path d="M0,0 C-24,-16 -28,-46 -10,-64 C-6,-44 4,-47 6,-62 C24,-50 28,-18 13,-4 C9,-1 4,0 0,0 Z" fill="#E86A17"/>
                <path d="M0,0 C-11,-9 -12,-24 -3,-33 C-1,-24 4,-24 5,-31 C13,-24 13,-9 6,-3 C4,-1 2,0 0,0 Z" fill="#F3C550"/>
              </g>
              <g class="flame f2" transform="translate(210,462) scale(1.25)">
                <path d="M0,0 C-24,-16 -28,-46 -10,-64 C-6,-44 4,-47 6,-62 C24,-50 28,-18 13,-4 C9,-1 4,0 0,0 Z" fill="#D8342A"/>
                <path d="M0,0 C-11,-9 -12,-24 -3,-33 C-1,-24 4,-24 5,-31 C13,-24 13,-9 6,-3 C4,-1 2,0 0,0 Z" fill="#F6BE3C"/>
              </g>
              <g class="flame f3" transform="translate(300,458)">
                <path d="M0,0 C-24,-16 -28,-46 -10,-64 C-6,-44 4,-47 6,-62 C24,-50 28,-18 13,-4 C9,-1 4,0 0,0 Z" fill="#E86A17"/>
                <path d="M0,0 C-11,-9 -12,-24 -3,-33 C-1,-24 4,-24 5,-31 C13,-24 13,-9 6,-3 C4,-1 2,0 0,0 Z" fill="#F3C550"/>
              </g>
            </g>
            <!-- tortilla bowl -->
            <path d="M45,238 Q52,348 210,356 Q368,348 375,238 Z" fill="#F3C550" stroke="#241E17" stroke-width="7" stroke-linejoin="round"/>
            <path d="M78,246 Q88,318 210,328 Q332,318 342,246" fill="none" stroke="#C99532" stroke-width="5" opacity=".5"/>
            <ellipse cx="120" cy="300" rx="5" ry="3.4" fill="#FBF3E4"/>
            <ellipse cx="255" cy="316" rx="5" ry="3.4" fill="#FBF3E4"/>
            <ellipse cx="318" cy="278" rx="5" ry="3.4" fill="#FBF3E4"/>
            <!-- cheese drips -->
            <g fill="#F6BE3C" stroke="#241E17" stroke-width="4">
              <rect x="146" y="222" width="15" height="42" rx="7.5"/>
              <rect x="206" y="226" width="15" height="50" rx="7.5"/>
              <rect x="264" y="222" width="15" height="38" rx="7.5"/>
            </g>
            <!-- kimchi filling -->
            <path d="M60,240 C70,158 96,148 113,192 C121,128 151,126 159,176 C171,116 201,114 211,168 C223,118 253,124 259,180 C273,134 301,140 307,196 C323,156 349,168 357,240 Z"
                  fill="#D8342A" stroke="#241E17" stroke-width="6" stroke-linejoin="round"/>
            <!-- lettuce -->
            <path d="M92,240 C102,182 124,180 132,214 C142,172 166,170 174,208 C186,162 212,160 220,206 C232,166 256,168 264,212 C276,178 298,182 304,240 Z"
                  fill="#4E8C33" stroke="#241E17" stroke-width="5" stroke-linejoin="round"/>
            <!-- sesame -->
            <ellipse cx="136" cy="196" rx="6" ry="4" fill="#FBF3E4" transform="rotate(-18 136 196)"/>
            <ellipse cx="216" cy="176" rx="6" ry="4" fill="#FBF3E4" transform="rotate(12 216 176)"/>
            <ellipse cx="286" cy="200" rx="6" ry="4" fill="#FBF3E4" transform="rotate(-10 286 200)"/>
            <!-- face -->
            <g>
              <rect x="136" y="262" width="60" height="36" rx="13" fill="#241E17"/>
              <rect x="222" y="262" width="60" height="36" rx="13" fill="#241E17"/>
              <path d="M196,275 Q210,266 222,275" fill="none" stroke="#241E17" stroke-width="6" stroke-linecap="round"/>
              <path d="M136,275 L114,268 M282,275 L304,268" stroke="#241E17" stroke-width="6" stroke-linecap="round"/>
              <path d="M146,271 l16,-6 M232,271 l16,-6" stroke="#FBF3E4" stroke-width="4" stroke-linecap="round" opacity=".45"/>
              <path d="M188,318 Q210,336 232,318" fill="none" stroke="#241E17" stroke-width="6" stroke-linecap="round"/>
              <circle cx="122" cy="302" r="10" fill="#E88A6A" opacity=".55"/>
              <circle cx="298" cy="302" r="10" fill="#E88A6A" opacity=".55"/>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ================= marquee divider ================= -->
<div class="div-marquee" aria-hidden="true">
  <div class="ticker-inner" id="tick2"></div>
</div>

<!-- ================= menu ================= -->
<section id="menu">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="sec-num">(01)</span>
      <h2 class="display">The Menu</h2>
      <p class="sub">Six things, done dangerously well. Everything hits the flat-top when you order it.</p>
    </div>
    <p class="menu-note reveal">SPICE LEVELS 1–5 · YES, LEVEL 5 IS A BAD IDEA · NO, WE WON'T TALK YOU OUT OF IT</p>

    <div id="menuList">
      <article class="mrow reveal" data-name="Bulgogi K-Taco" data-price="$4.50" data-heat="2">
        <div class="mrow-top"><span class="num">01</span><h3>Bulgogi K-Taco</h3><span class="dots"></span><span class="price">$4.50</span><button class="add" aria-label="Add Bulgogi K-Taco">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>Marinated short rib, charred right at the window. Kimchi slaw, gochujang crema, cilantro, toasted sesame. The one that started the traffic jam on 6th &amp; Main.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>

      <article class="mrow reveal" data-name="Gangnam Chicken" data-price="$5.00" data-heat="3">
        <div class="mrow-top"><span class="num">02</span><h3>Gangnam Chicken</h3><span class="dots"></span><span class="price">$5.00</span><button class="add" aria-label="Add Gangnam Chicken">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>Double-fried chicken, honey-gochujang glaze, pickled daikon, crushed peanut. Gangnam style, street-truck price.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>

      <article class="mrow reveal" data-name="El Diablo Pork Boss" data-price="$5.50" data-heat="5">
        <div class="mrow-top"><span class="num">03</span><h3>El Diablo Pork Boss</h3><span class="dots"></span><span class="price">$5.50</span><button class="add" aria-label="Add El Diablo Pork Boss">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>Slow-seared samgyeopsal pork belly, salsa verde, pickled jalapeño, scallion. Level five. Sign the waiver. We mean it.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>

      <article class="mrow reveal" data-name="Tofu Hero" data-price="$4.50" data-heat="1">
        <div class="mrow-top"><span class="num">04</span><h3>Tofu Hero</h3><span class="dots"></span><span class="price">$4.50</span><button class="add" aria-label="Add Tofu Hero">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>Crispy tofu, ssam sauce, quick cucumber, crispy shallots. Fully plant-based, zero apology, full flavour.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>

      <article class="mrow reveal" data-name="Loco Fries" data-price="$8.00" data-heat="3">
        <div class="mrow-top"><span class="num">05</span><h3>Loco Fries</h3><span class="dots"></span><span class="price">$8.00</span><button class="add" aria-label="Add Loco Fries">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>A mountain. Bulgogi, cheese sauce, warm kimchi, scallion, sriracha mayo. Bring a friend. Or don't — we won't judge.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>

      <article class="mrow reveal" data-name="Bibim-Burrito" data-price="$9.50" data-heat="2">
        <div class="mrow-top"><span class="num">06</span><h3>Bibim-Burrito</h3><span class="dots"></span><span class="price">$9.50</span><button class="add" aria-label="Add Bibim-Burrito">+</button></div>
        <div class="mbody"><div class="mbody-in"><div class="mbody-flex">
          <p>Bibimbap logic, burrito engineering. Rice, bulgogi, fried egg, spinach, gochu sauce. It's a lot. You're ready.</p>
          <span class="heat"></span>
        </div></div></div>
      </article>
    </div>
  </div>
  <div style="height:70px"></div>
</section>

<!-- ================= story ================= -->
<section class="story" id="story">
  <div class="story-ko" aria-hidden="true">안녕</div>
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="sec-num">(02)</span>
      <h2 class="display">Why "Loco"?</h2>
      <p class="sub">Because combining your grandma's kimchi with a tortilla is, technically, a beautiful madness.</p>
    </div>
    <div class="story-grid">
      <div class="reveal">
        <p class="lede">It started with <b>Grandma Park's kimchi</b> — the kind that ferments for weeks, the kind that argues back. Our founder Ji took a jar of it to a taco night in East Austin, folded it into a carnitas taco, and watched three friends go quiet mid-bite. That silence was the business plan.</p>
        <p>Every morning we fry kimchi into slaw, simmer gochujang into crema, and press tortillas by hand. The salsa changes daily. The bulgogi marinade hasn't changed once — because you don't touch a recipe that good. <b>스피시, 맛있어, 자자.</b> Spicy, delicious, let's go.</p>
      </div>
      <div class="stickers reveal">
        <figure class="sticker st1">
          <svg width="88" height="130" viewBox="0 0 90 150" aria-hidden="true">
            <rect x="32" y="6" width="26" height="20" rx="3" fill="#241E17"/>
            <rect x="24" y="28" width="42" height="14" rx="4" fill="#D8342A" stroke="#241E17" stroke-width="4"/>
            <rect x="16" y="42" width="58" height="100" rx="12" fill="#D8342A" stroke="#241E17" stroke-width="5"/>
            <rect x="24" y="66" width="42" height="50" rx="4" fill="#FBF3E4" stroke="#241E17" stroke-width="3.5"/>
            <path d="M30,80 h30 M30,90 h30 M30,100 h20" stroke="#241E17" stroke-width="3" stroke-linecap="round"/>
          </svg>
          <figcaption class="mono">GOCHUJANG</figcaption>
        </figure>
        <figure class="sticker st2">
          <svg width="92" height="112" viewBox="0 0 90 140" aria-hidden="true">
            <ellipse cx="45" cy="30" rx="28" ry="9" fill="#FBF3E4" stroke="#241E17" stroke-width="4"/>
            <path d="M20,32 L70,32 L79,126 L11,126 Z" fill="#E86A17" stroke="#241E17" stroke-width="5" stroke-linejoin="round"/>
            <path d="M25,60 q10,-8 20,0 q10,8 20,0 M23,84 q10,-8 20,0 q10,8 20,0" fill="none" stroke="#FBF3E4" stroke-width="4" stroke-linecap="round"/>
          </svg>
          <figcaption class="mono">RAMYEON</figcaption>
        </figure>
        <figure class="sticker st3">
          <svg width="94" height="94" viewBox="0 0 100 100" aria-hidden="true">
            <circle cx="50" cy="50" r="42" fill="#4E8C33" stroke="#241E17" stroke-width="5"/>
            <circle cx="50" cy="50" r="30" fill="#CFE59B" stroke="#241E17" stroke-width="3"/>
            <path d="M50,22 v56 M22,50 h56 M31,31 l38,38 M69,31 L31,69" stroke="#4E8C33" stroke-width="3"/>
          </svg>
          <figcaption class="mono">LIME, ALWAYS</figcaption>
        </figure>
      </div>
    </div>
  </div>
  <div class="strip reveal">
    <div><div class="big display">18k</div><div class="lbl">tacos a month</div></div>
    <div><div class="big display">3</div><div class="lbl">salsas made daily</div></div>
    <div><div class="big display">1</div><div class="lbl">very proud grandma</div></div>
  </div>
</section>

<!-- ================= truck ================= -->
<section class="truck" id="truck">
  <div class="wrap">
    <div class="sec-head reveal">
      <span class="sec-num" style="color:rgba(251,243,228,.6)">(03)</span>
      <h2 class="display">Find The Truck</h2>
      <p class="sub" style="color:rgba(251,243,228,.85)">Same truck, different corner every day. Follow the smell of toasted gochujang.</p>
    </div>
    <div class="status-pill closed" id="statusPill" role="status"><span class="dot"></span><span id="statusText">Checking the flat-top…</span></div>
    <div class="sched" id="schedList"></div>
  </div>
</section>

<!-- ================= footer ================= -->
<footer>
  <div class="wrap">
    <div class="club reveal">
      <h3>Join the Kimchi Club ★</h3>
      <form id="clubForm" novalidate>
        <input type="email" id="clubEmail" placeholder="your@email.com" aria-label="Email address">
        <button class="btn" type="submit">Sign up</button>
      </form>
    </div>
    <div class="foot-links">
      <button data-net="Instagram">Instagram</button>
      <button data-net="TikTok">TikTok</button>
      <button data-net="X">X</button>
      <button data-net="KakaoTalk">KakaoTalk</button>
    </div>
    <div class="giant display">KIMCHI <span>LOCO</span></div>
    <p class="credits">SEOUL FIRE · MEXICO CITY SOUL · © 2024 KIMCHI LOCO TRUCK</p>
  </div>
</footer>

<div id="toast" aria-live="polite"></div>

<script>
(function(){
  "use strict";
  var $ = function(s){ return document.querySelector(s); };

  /* ---------- tickers ---------- */
  var items1 = "★ K-TACOS ★ BULGOGI ★ KIMCHI SLAW ★ GOCHUJANG CREMA ★ OPEN LATE FRI ★ NO SHORTCUTS ★ ";
  var items2 = "BULGOGI <span class='r'>★</span> KIMCHI <span class='r'>★</span> CREMA <span class='r'>★</span> SESAME <span class='r'>★</span> LIME <span class='r'>★</span> ";
  $("#tick1").innerHTML = "<span>" + items1.repeat(4) + "</span><span>" + items1.repeat(4) + "</span>";
  $("#tick2").innerHTML = "<span>" + items2.repeat(6) + "</span><span>" + items2.repeat(6) + "</span>";

  /* ---------- toast ---------- */
  var toastEl = $("#toast"), toastTimer = null;
  function toast(html){
    toastEl.innerHTML = html;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function(){ toastEl.classList.remove("show"); }, 3000);
  }

  /* ---------- hero: boing + flying ingredient particles ---------- */
  var tacoWrap = $("#tacoWrap"), tacoInner = $("#tacoInner");
  var BITS = [
    "<svg viewBox='0 0 24 24'><path d='M20 7c1.5-2 .8-4.2-.5-5.5-.8 1-1 2-1 3.2C13 4 7 6 4.2 10 2 13 1 17.5 2.5 21c-.4-4 1.6-8 4.7-10.6C10.5 7.5 15.8 6.5 20 7Z' fill='#D8342A' stroke='#241E17' stroke-width='1.4'/></svg>",
    "<svg viewBox='0 0 24 24'><circle cx='12' cy='12' r='10' fill='#4E8C33' stroke='#241E17' stroke-width='1.6'/><circle cx='12' cy='12' r='6.5' fill='#CFE59B'/><path d='M12 5.5v13M5.5 12h13M7.4 7.4l9.2 9.2M16.6 7.4l-9.2 9.2' stroke='#4E8C33' stroke-width='1.3'/></svg>",
    "<svg viewBox='0 0 24 24'><rect x='4' y='5' width='16' height='14' rx='3' fill='#E86A17' stroke='#241E17' stroke-width='1.6'/><path d='M8 9l8 6M16 9l-8 6' stroke='#D8342A' stroke-width='1.6'/></svg>",
    "<svg viewBox='0 0 24 24'><path d='M4,14 Q2,7 8,4 Q16,0 20,8 Q22,13 18,17 Q10,22 4,14Z' fill='#F3C550' stroke='#241E17' stroke-width='1.6'/></svg>"
  ];
  var parts = [], running = false;

  tacoWrap.addEventListener("pointerdown", function(e){
    // boing
    tacoInner.classList.remove("boing");
    void tacoInner.offsetWidth;
    tacoInner.classList.add("boing");
    // spawn particles
    var heroRect = tacoWrap.closest(".hero").getBoundingClientRect();
    var r = tacoWrap.getBoundingClientRect();
    var cx = e.clientX || (r.left + r.width/2), cy = e.clientY || (r.top + r.height/2);
    var x = cx - heroRect.left, y = cy - heroRect.top;
    for (var i = 0; i < 12; i++){
      var el = document.createElement("span");
      el.className = "pt";
      var size = 20 + Math.random()*16;
      el.style.width = el.style.height = size + "px";
      el.style.left = "0"; el.style.top = "0";
      el.innerHTML = BITS[Math.floor(Math.random()*BITS.length)];
      parts.push({
        el: el, x: x, y: y,
        vx: (Math.random()-.5)*11,
        vy: -(4 + Math.random()*7),
        rot: Math.random()*360, vr: (Math.random()-.5)*20,
        life: 1.35
      });
    }
    if (!running){ running = true; requestAnimationFrame(step); }
    if (Math.random() < 0.25) toast("김치 폭탄! <b>Kimchi bomb.</b> He warned you.");
  });

  function step(){
    var heroRect = tacoWrap.closest(".hero").getBoundingClientRect();
    for (var i = parts.length - 1; i >= 0; i--){
      var p = parts[i];
      p.vy += 0.42; p.x += p.vx; p.y += p.vy;
      p.rot += p.vr; p.life -= 0.016;
      p.el.style.transform = "translate(" + p.x + "px," + p.y + "px) rotate(" + p.rot + "deg)";
      p.el.style.opacity = Math.max(0, Math.min(1, p.life * 1.6));
      if (p.life <= 0 || p.y > heroRect.height + 60){
        if (p.el.parentNode) p.el.parentNode.removeChild(p.el);
        parts.splice(i, 1);
      } else if (!p.el.parentNode){
        tacoWrap.closest(".hero").appendChild(p.el);
      }
    }
    if (parts.length){ requestAnimationFrame(step); } else { running = false; }
  }

  /* ---------- heat meters ---------- */
  var chiliSVG = function(filled){
    return "<svg viewBox='0 0 24 24'><path d='M20 7c1.5-2 .8-4.2-.5-5.5-.8 1-1 2-1 3.2C13 4 7 6 4.2 10 2 13 1 17.5 2.5 21c-.4-4 1.6-8 4.7-10.6C10.5 7.5 15.8 6.5 20 7Z' fill='" +
      (filled ? "#D8342A" : "none") + "' stroke='currentColor' stroke-width='1.6'/></svg>";
  };
  document.querySelectorAll(".mrow").forEach(function(row){
    var heat = parseInt(row.dataset.heat, 10) || 1, html = "<span class='lbl'>HEAT</span>";
    for (var i = 0; i < 5; i++) html += chiliSVG(i < heat);
    row.querySelector(".heat").innerHTML = html;
  });

  /* ---------- menu: tap-to-open (touch) + add to order ---------- */
  var basket = 0, basketEl = $("#basket");
  document.querySelectorAll(".mrow").forEach(function(row){
    row.addEventListener("click", function(e){
      if (e.target.closest(".add")) return;
      if (window.matchMedia("(hover: none)").matches) row.classList.toggle("open");
    });
  });
  document.getElementById("menuList").addEventListener("click", function(e){
    var btn = e.target.closest(".add");
    if (!btn) return;
    e.stopPropagation();
    basket++;
    basketEl.textContent = "🛒 " + basket;
    var row = btn.closest(".mrow");
    toast("<b>" + row.dataset.name + "</b> added — " + row.dataset.price + " · pay at the window, 가자!");
  });
  $("#orderBtn").addEventListener("click", function(){
    if (basket > 0) toast(basket + " item" + (basket > 1 ? "s" : "")) ;
  });

  /* ---------- live truck schedule ---------- */
  var DAYS = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var DAYS_SHORT = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
  // [location, [[open,close],...]] per weekday (0=Sun)
  var SCHED = [
    ["Riverside Park", [[12,20]]],
    ["Closed — the flat-top rests", []],
    ["6th & Main", [[11,14],[17,21]]],
    ["6th & Main", [[11,14],[17,21]]],
    ["6th & Main", [[11,14],[17,21]]],
    ["Brewery Row", [[17,24]]],
    ["H Mart Parking Lot", [[12,20]]]
  ];
  function fmt(h){
    if (h >= 24) return "12 AM";
    var H = Math.floor(h), m = Math.round((h - H) * 60);
    var ap = (H % 24) >= 12 ? "PM" : "AM";
    var hh = ((H + 11) % 12) + 1;
    return hh + (m ? ":" + String(m).padStart(2,"0") : ":00") + " " + ap;
  }
  function slotLabel(slots){
    return slots.map(function(s){ return fmt(s[0]) + "–" + fmt(s[1]); }).join(" & ");
  }
  var now = new Date(), today = now.getDay(), t = now.getHours() + now.getMinutes()/60;

  // render rows Mon → Sun
  var listEl = $("#schedList"), order = [1,2,3,4,5,6,0];
  order.forEach(function(d){
    var s = SCHED[d];
    var row = document.createElement("div");
    row.className = "srow" + (d === today ? " today" : "");
    row.innerHTML =
      "<span class='day'>" + DAYS_SHORT[d].toUpperCase() + (d === today ? " ·" : "") + "</span>" +
      "<span class='loc'>" + (s[1].length ? s[0] : "<span class='closed-day'>" + s[0] + "</span>") + "</span>" +
      "<span class='hrs'>" + (s[1].length ? slotLabel(s[1]) : "eating everyone else's food") + "</span>" +
      (d === today ? "<span class='today-tag'>TODAY</span>" : "<span></span>");
    listEl.appendChild(row);
  });

  // live open/closed status
  var pill = $("#statusPill"), txt = $("#statusText");
  var todaySlots = SCHED[today][1], openNow = false, until = null;
  todaySlots.forEach(function(s){ if (t >= s[0] && t < s[1]){ openNow = true; if (until === null || s[1] < until) until = s[1]; } });
  if (openNow){
    pill.className = "status-pill open";
    txt.textContent = "OPEN NOW — until " + fmt(until) + ". Come hungry.";
  } else {
    var next = null;
    for (var i = 0; i < 8 && !next; i++){
      var dd = (today + i) % 7;
      var slots = SCHED[dd][1].slice().sort(function(a,b){ return a[0]-b[0]; });
      for (var j = 0; j < slots.length; j++){
        if (i > 0 || slots[j][0] > t){ next = { d: dd, s: slots[j][0] }; break; }
      }
    }
    pill.className = "status-pill closed";
    txt.textContent = next ? "CLOSED — back " + DAYS_SHORT[next.d] + " " + fmt(next.s) + ". Set an alarm." : "CLOSED";
  }

  /* ---------- club form ---------- */
  $("#clubForm").addEventListener("submit", function(e){
    e.preventDefault();
    var v = $("#clubEmail").value.trim();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)){
      toast("That email looks <b>locó</b> — check it and try again.");
      return;
    }
    $("#clubEmail").value = "";
    toast("You're in the Kimchi Club ★ <b>Free taco on your birthday</b> (yes, really).");
  });

  /* ---------- social buttons ---------- */
  document.querySelectorAll(".foot-links button").forEach(function(b){
    b.addEventListener("click", function(){
      toast("We'd open " + b.dataset.net + " here — find us as <b>@kimchiloco</b>.");
    });
  });

  /* ---------- reveal on scroll ---------- */
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(en){
      if (en.isIntersecting){ en.target.classList.add("in"); io.unobserve(en.target); }
    });
  }, { threshold: 0.12 });
  document.querySelectorAll(".reveal").forEach(function(el, i){
    el.style.transitionDelay = (i % 4) * 0.07 + "s";
    io.observe(el);
  });

  // refresh open/closed status every minute
  setInterval(function(){ location.reload(); }, 60000);
})();
</script>
</body>
</html>
Reasoning trace (9,663 tokens)
The user wants a Korean taco food truck website called "Kimchi Loco" that makes people really want to come. This is a fun, vibrant brand — Korean-Mexican fusion. I want to make something with real personality, not a generic template.

Let me think about the concept and visual direction:

**Brand concept:** "Kimchi Loco" — Korean + Mexican fusion, food truck. The vibe should be: loud, bold, street-food energy, night-market neon but done with craft. I want to avoid generic gradient hero banners and blue/purple schemes. Instead I'll go with a bold editorial poster aesthetic: think street-food poster meets Korean pop-art — hot red/paprika, warm cream/paper background, deep charcoal ink, with gochujang-red and lime-green accents. A "risograph poster" feel: heavy type, halftone textures, sticker-like badges, rotated elements, marquees.

**Color palette:**
- Paper cream: #FBF3E4 / #F6EBD8
- Gochujang red: #E43D30 or #D62828
- Deep charcoal/ink: #1A1714
- Kimchi orange: #F25C1B maybe
- Lime/cilantro green: #7CB518 or #4C9A2A
- Sesame yellow accent: #F5B700

That's a warm, food-forward palette — no blue/purple, no gradients as primary device.

**Typography:** I need something with character. No Inter/Roboto. Good options from Google Fonts (CDN allowed — "External CDN references allowed" — Google Fonts should be fine; it's a network request but fonts via CDN are typically allowed... the instruction says "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." Hmm — the task doesn't explicitly allow Google Fonts. To be safe and self-contained, I should use system font stacks creatively? But I don't want Arial/Inter/Roboto as primary identity font... The rule is strict: no external fonts. So I need to work with system fonts but craft identity another way.

Wait — but many of these sandbox demos do use Google Fonts CDN. The rule says "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." Since no CDN URLs are explicitly allowed by the task, I should avoid Google Fonts. I'll craft typography with system stacks: I can use a condensed heavy feel via "Arial Narrow", "Impact", or better: use font stacks like `"Archivo Black"` won't work without loading. 

Options: Use `font-family: Impact, 'Arial Black', sans-serif` for display — Impact has real character (memes aside, it can be done ironically-well in a poster context — actually Impact is very "LOCO" appropriate, bold condensed poster type). Or use system serif like Georgia for editorial contrast. A mix: Impact-style condensed for huge headlines (with tight letter-spacing tricks), Georgia italic for accents, and a mono (Courier/`ui-monospace`) for labels/menu prices — that trio gives an authored, poster-like feel.

Actually a strong choice: display = `'Arial Narrow', 'Helvetica Neue Condensed', Impact` — hmm, Arial Narrow isn't guaranteed on Windows Chrome... Impact is guaranteed on Windows and macOS. Let me use Impact for the massive "KIMCHI LOCO" headline with rotations and outlines, Georgia italic for narrative touches, and monospace for menu/labels. That's a distinctive, safe combo.

Alternatively I could draw the logotype as inline SVG text — still relies on fonts. I'll go with Impact + letter-spacing tuning. Impact with skew, stroke outlines (-webkit-text-stroke) can look genuinely poster-cool.

**Layout concept:** Avoid uniform card rows. Structure as a vertical scroll narrative:

1. **Top ticker/marquee** — scrolling text strip: "SEOUL ★ MEXICO CITY ★ ..., SPICY LEVEL..." a classic food-truck marquee in red with cream text.
2. **Nav** — simple, ink on cream, with a sticker badge.
3. **Hero** — huge stacked type "KIMCHI / LOCO" with a rotating circular badge ("EST. 2024 • SEOUL ST meets TACO AL PASTOR •"), a taco illustration (hand-drawn SVG!), steam animation, and a marquee. The signature moment could be an interactive SVG taco that reacts to mouse — e.g., a big illustrated taco that "bursts" with kimchi sparks, or flames you can fan. Or: a "build your taco" interactive section.
4. **Menu section** — editorial list style (not cards): big numbered rows, dish name huge, dotted leader lines to price, hover reveals description + "spice meter" with chili icons. Asymmetric layout with a large illustration on one side.
5. **"Find the truck" section** — a schedule (days/locations) as a ticket/board, plus a live "open now / closed" status computed from actual time — nice real behavior.
6. **Interactive signature:** "Spice-o-Meter" — a slider that changes the whole page's chili count / makes the page shake / turns up heat — fun and memorable. Or a click-to-fan-the-flames on the taco. Let me think about what's most memorable and feasible.

Signature moment idea: The hero taco illustration where hovering/clicking shoots out little kimchi/tobiko particle bursts, plus a "press the salsa button" that triggers a full-screen flavor splash. Or: the "LOCO METER" — hold a button to charge spice, page heats up (background shifts, chilis fly), release for a rating ("You can handle the Bull-Dog?"). 

I'll do: hero taco with flame flicker under it + click anywhere on hero spawns flying ingredients (kimchi, lime, chili SVG bits) with physics. And a "Find the Truck" with live open/closed status. And the menu rows with hover interactions. That's plenty of life.

**Illustration:** hand-drawn inline SVG taco — a taco with kimchi filling, face maybe (kawaii taco with sunglasses = memorable brand mascot!). A taco with gothic sunglasses, saying "안녕 / hola". That's a fun mascot. I'll draw a decent SVG: semicircle tortilla, wavy filling (kimchi red, lettuce green, cheese yellow), sesame dots. Add steam wisps animating above.

Let me design the SVG taco:
- Tortilla: half-ellipse path, fill #F2C14E / #E8B04B with darker edge stroke, dots texture.
- Filling: along the top arc, wavy bumps in red (#D62828 kimchi), green (#5C8A3A), yellow cheese drips.
- Face: sunglasses (black rounded rects + bridge), smile. Cute.
- Flames beneath: SVG flame shapes with CSS flicker animation (scale/skew, alternating).

**Marquee:** CSS animation translating duplicated content.

**Menu items (fusion names):**
1. "The Original K-Taco" — bulgogi beef, kimchi slaw, gochujang crema, cilantro — $4.50
2. "Gangnam Chicken" — double-fried chicken, honey-gochu glaze, pickled daikon — $5
3. "Pork Boss" — DJ pork (samgyeopsal), salsa verde, sesame — $5.50
4. "Tofu Hero" — crispy tofu, kimchi, ssam sauce (vegan) — $4.50
5. "Loco Fries" — loaded fries, bulgogi, cheese, kimchi, scallions — $8
6. "Bibim-Burrito" — bibimbap burrito — $9.50

Menu layout: two-column asymmetric? Rows full width with number, name in big Impact, dotted leader, price; hover: row background turns red, description slides in, chili spice meter (1–3 chilis) shown as inline SVG chilis. That's editorial and interactive, not cards.

**Find the truck:** weekly schedule grid styled like a stamped ticket board:
- Mon: closed
- Tue–Thu: 6th & Main, 11am–2pm / 5–9pm
- Fri: The Brewery Row, 5pm–12am
- Sat: Riverside Park, 12pm–10pm
- Sun: H Mart Parking Lot, 12pm–8pm

Live status: compute current day/time, highlight today's row, show "OPEN NOW — come get it" pill or "CLOSED — back at ...". Real behavior, nice.

**Order/CFA:** "Order ahead" form with name + pickup item → toast "Order in! 가자! (Let's go!)" — no backend, but shows interactivity. Keep simple: a fake order button that fires a toast. Actually a small "Get the secret menu" — email-ish? I'll do a "Join the Kimchi Club" footer with input → inline success message (no alert). Fine.

**Scroll animations:** IntersectionObserver reveal (translate up + rotate slightly). Sections stagger.

**Custom cursor?** Maybe a small chili cursor follower — could be too much; skip or make subtle. Skip.

**Background texture:** subtle paper grain via repeating radial-gradient dots or SVG noise (feTurbulence as data-uri background). I can inline an SVG noise filter as background-image data URI — that's self-contained. Use low opacity for a risograph paper feel.

**Header sticker:** circular rotating text badge "KIMCHI LOCO • 스피시 • DELICIOUS •" rotating slowly — placed in hero overlapping the headline.

**Korean text accents:** 스피시 (spicy), 맛있어 (delicious), 안녕 (hi) — big background watermark text "맛있다" in outline. Adds authenticity.

**Structure plan:**

```
<body>
  ticker marquee (top, red bar)
  header nav: logo mark (small taco icon) KIMCHI LOCO | nav links: Menu, Truck, Story | "Order" button
  HERO:
    - left: giant stacked KIMCHI LOCO with outline/offset shadow layers, tagline in Georgia italic: "Seoul fire. Mexico City soul." CTA buttons: "See the menu" / "Find the truck"
    - right: big taco SVG with flame animation + steam; rotating badge overlapping
    - hint: "click around — the taco likes attention" / particles on click
  marquee divider (black bar, white text: "★ BULGOGI ★ KIMCHI ★ GOCHUJANG CREMA...")
  MENU section: heading "THE MENU" huge with chili icon; list rows with hover reveal; note "Everything made to order. Spice levels 1–5. Yes, level 5 is a bad idea. Do it."
  STORY section: split — big drop-cap paragraph, Korean watermark, photo placeholder? No images allowed except... "No external images" — picsum not allowed here since no network. Use illustrated SVG stickers: chili bottle, ramyeon, lime. Story text with bold highlights, stats row (asymmetric): "18k tacos/month", "3 salsas daily", "1 very happy grandma" — inline, playful, not uniform cards (just inline flow text with big numbers).
  TRUCK section: dark charcoal background, schedule board with live status pill, "Today" highlighted.
  FOOTER: Kimchi Club signup (inline form → success toast), socials as text links, big outline wordmark, credits.
  toast element
```

**Interactivity list:**
- Hero click → ingredient particles (SVG shapes: chili, lime slice, kimchi square) with physics (gravity, spin, fade). Canvas or DOM? DOM elements with CSS transitions/rAF — I'll use a small rAF loop creating absolutely positioned SVGs in hero, gravity + rotation, remove after ~1.2s. Also taco does a "jump/tilt" wiggle on click.
- Rotating badge (CSS animation).
- Flames flicker (CSS keyframes, 3 flames different delays).
- Steam wisps (CSS translateY + fade loop).
- Menu row hover: expand description (max-height or grid-template-rows), color invert.
- Live open status via JS Date.
- IntersectionObserver reveals.
- Smooth scroll nav links.
- Form → toast.
- Marquee loops.
- Maybe: pressing "L" makes everything extra loco? Skip, keyboard needs click first anyway.

Cursor-follow? skip.

**Responsive:** hero stacks at <900px, headline uses clamp(), menu rows wrap, schedule stacks. No horizontal overflow: watch rotated elements, use overflow-x hidden on body.

Let me now write the taco SVG carefully. Coordinate system 400×360.

Taco design (mascot with sunglasses):
- Tortilla shell: path from (60,260) arc to (340,260) — a semicircle-ish dome? Actually a taco viewed from side: shell like a "D" rotated. Let me draw: bottom edge slightly curved line from (70,270) to (330,270), and the shell arc above: M70,270 Q75,120 200,115 Q325,120 330,270 — hmm that's a dome (taco standing opening-up). A taco sitting opening-up: tortilla folded like a "∩" with filling peeking at top rim. Actually a taco typically: the shell is a "U" shape when viewed from the end; from the side it's a triangle-ish with filling on top. Front view: draw tortilla as a shallow "V/U" bowl (the shell), filling bumping above the rim.

Side/front view classic: tortilla shell = wide shallow semicircle bowl: path M50,250 A150,150 0 0 0 350,250 ... that's a downward semicircle (bowl). Then filling = wavy bumps sitting on top edge (the diameter line), bulging above it. Yes:

- Bowl: M50,240 A150,130 0 0 0 350,240 Z (fill #F2C14E, stroke #1A1714 width 6). Wait A rx,ry rot large-arc sweep — from (50,240) to (350,240) with sweep 0 goes... let me just use a quadratic: M40,240 Q40,340 200,345 Q360,340 360,240 L40,240 — a bowl bottom. Plus a rim line: ellipse or line at top slightly darker.
- Filling: along y=240 top, wave bumps going up to ~y=120: path M60,240 Q80,140 110,190 Q120,120 150,170 Q170,110 200,160 Q230,115 250,175 Q280,130 300,190 Q320,150 340,240 Z — kimchi red base, then overlapping green lettuce bumps (smaller arcs), yellow cheese drips (rounded rectangles hanging), white sesame dots.
- Face on the tortilla bowl (lower center): sunglasses: two rounded rects (140,255 w55 h30, rx10) and (205,255...), bridge line, arms; smile: path arc at (200,310); cheeks blush maybe. Chili emblem? keep clean.
- Sesame dots on tortilla.
- Flames under: three flame paths at y≈340..420 — canvas area 400×460.

Flame shape: path like M0,0 C -14,-18 -6,-34 0,-46 C 6,-34 14,-18 0,0 Z (teardrop) in orange/red, inner yellow teardrop. Place 3 under taco, animate scaleY flicker with transform-origin bottom.

Steam: two/three squiggly paths above filling, stroke ink, opacity animation rising.

Rotating badge: SVG with textPath on circle, "KIMCHI LOCO • 스피시 타코 •" repeated, CSS rotate 12s linear infinite. Position absolute overlapping hero taco top-left.

Particle shapes on click: small SVGs — chili (red curved), lime slice (green circle w/ segments), kimchi square (orange-red rect w/ stroke). Create via JS template strings, animate with rAF physics.

Colors final:
- --paper: #FAF1DF
- --ink: #1E1A16
- --red: #E0362C (gochujang)
- --orange: #F07E1F? maybe not needed
- --green: #3F7D2C (cilantro)
- --yellow: #F4B942 (cheese)
- dark section bg: #201B16

Headline treatment: "KIMCHI" solid red with ink offset shadow, "LOCO" outlined (-webkit-text-stroke ink, transparent fill) — layered poster look. Font: Impact with slight skew(-2deg) and tight letter-spacing, huge clamp(80px, 16vw, 190px).

Watermark Korean "맛있는" behind story section in outline, low opacity.

Spice meter on menu rows: 1–5 chili SVGs inline (small path).

Chili SVG small path (side view curved pepper): 
`M2,2 C6,8 10,10 14,9 C18,8 19,4 16,3 C12,2 6,1 2,2 Z` plus stem. I'll craft simple: use a bent teardrop.

Let me write a compact chili path: `<svg viewBox="0 0 24 24"><path d="M20 7c1-2 0-4-1-5-1 1-1 2-1 3-4-1-10 1-13 5-2 3-3 7-2 10 0-4 2-8 5-10 3-3 8-4 12-3z" fill="#E0362C"/></svg>` — decent enough silhouette.

Live status logic: schedule array [{d:0,label:'Sunday',...}] with open hour windows (may be two windows for Tue–Thu). Compute now; find today's entry; check if within window; show pill "OPEN NOW" green or "CLOSED — opens Tue 11:00" etc. Simple version: each day has ranges [[11,14],[17,21]] hours; closed = []. Display text accordingly. Today's row gets highlight class.

Toast: fixed bottom, slides up, auto-hide 3s.

Order buttons: each menu row has a "+ Add" on hover? Could make a mini order count in nav ("Order • 2"). That adds real interactive depth: click row's add button → count increments, nav badge updates, toast "Bulgogi K-Taco added — order at the window". Nice, wired behavior without backend. Keep it light. I'll add a small circular "+" button on each row; nav shows basket count; clicking nav order button when count>0 shows toast summary else scrolls to menu. 

Header: sticky, cream bg with ink bottom border.

Ticker top: red bg, cream text, items: "★ K-TACOS ★ BULGOGI ★ KIMCHI SLAW ★ GOCHUJANG CREMA ★ OPEN LATE FRI ★" repeated, marquee 30s.

Section headings: small mono label "(01) MENU" + huge Impact word.

Menu rows structure:
```
<div class="mrow" data-name data-price data-heat>
  <div class="mrow-top"><span class="num">01</span><h3>Bulgogi K-Taco</h3><span class="dots"></span><span class="price">$4.50</span><button class="add">+</button></div>
  <div class="mrow-body"><p>desc</p><span class="heat">chilis ×3</span></div>
</div>
```
Hover/click expands body (grid-template-rows 0fr→1fr). For touch, click toggles .open. Hover via CSS on pointer:fine.

Dots leader: flex-grow element with border-bottom dotted.

Story section layout: asymmetric grid: left big text col, right column with stacked sticker SVGs rotated (chili bottle, ramyeon cup, lime). Stats as inline big numbers within text or a row beneath — make it a horizontal strip with three items separated by borders, but I'll style as a "ticket strip" not cards.

Sticker SVGs: 
1. Gojang bottle: rect body red + cap + label "GOCHUJANG".
2. Ramyeon cup: trapezoid with lid, "빠른 면" text.
3. Lime wedge: circle with segments green.
Keep simple line style: ink stroke 4, flat fills.

Footer: dark, giant outline "KIMCHI LOCO", club form: input email + button "Sign me up" → toast "You're in the Kimchi Club ★". Social text links: Instagram / TikTok / X — but links can't go anywhere; use href="#" with preventDefault + toast? Better: just leave as decorative text with hover style, or toast "Opens our Instagram — pretend we're @kimchiloco". That's honest & playful. I'll do the toast.

Nav "Menu / The Truck / Story" anchor smooth scroll (CSS scroll-behavior).

Now, first paint: everything above must render instantly — CSS animations run on load, so screenshot at 3s shows flames flickering, badge rotating, marquee moving. Good.

Accessibility-ish: alt/aria minimal, fine.

Let me be careful about no horizontal scrollbar: rotated badge inside hero with overflow hidden on hero? The badge overlaps taco within container — keep within. Watermark text position absolute, overflow hidden on section. body overflow-x hidden as safety.

Let me now write the code. I'll aim for well-organized, ~700-900 lines. Comments in English (user wrote in English).

Key CSS details:

```css
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--paper) noise; color:var(--ink); font-family:Georgia, 'Times New Roman', serif;}
.mono{font-family:ui-monospace, 'Cascadia Mono', 'Courier New', monospace}
.display{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; letter-spacing:.01em}
```

Noise: `background-image:url("data:image/svg+xml,...feTurbulence...")` — data URI with URL-encoding; careful with quotes. Use:
`url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.05"/></feComponentTransfer></filter><rect width="120" height="120" filter="url(%23n)"/></svg>')` — need to encode # as %23, quotes ok inside url('...') if inner uses double quotes. Yes.

Hero headline with layered shadow: `text-shadow: 6px 6px 0 var(--ink)` on red text; second line outline via -webkit-text-stroke:3px ink; color:transparent. Add slight rotate on second line.

Taco container with idle bob animation (translateY sin via CSS keyframes 3s ease-in-out infinite alternate).

Click wiggle: add class .boing → keyframes scale/rot 0.5s, remove on animationend.

Particles JS:

```js
const heroTaco = document.getElementById('tacoWrap');
heroTaco.addEventListener('pointerdown', e => { burst(e); boing(); });
```
Burst: create 10 particles at click point within hero coordinate space (append to hero, position absolute, left/top from e relative to hero rect). Types: shapes array of svg strings. rAF loop: vx random, vy upward -4..-9, gravity .35, rot += vr; life 1.4s → remove.

Steam: three paths class steam with animation `rise 3s infinite` staggered (translateY -30, opacity 0→.8→0, slight scaleX).

Flames: `.flame{transform-origin:200px 420px; animation:flick .5s infinite alternate}` different delays; keyframes scaleY(0.85→1.15) skewX small. Actually transform-origin per flame — set with `transform-box: fill-box; transform-origin: center bottom;`.

Schedule data:

```js
const SCHED = {
 0:[["Riverside Park",[[12,20]]]],
 1:[],
 2:[["6th & Main",[[11,14],[17,21]]]],
 3:[["6th & Main",[[11,14],[17,21]]]],
 4:[["6th & Main",[[11,14],[17,21]]]],
 5:[["Brewery Row",[[17,24]]]],
 6:[["H Mart Lot",[[12,20]]]]
};
```
Render rows Mon..Sun; mark today; compute open: any range contains now (h + m/60). Status pill: "OPEN NOW · until 9 PM" or "CLOSED · next: Tue 11 AM" — compute next opening: iterate forward. Implement simply.

Menu data in JS and render? Or static HTML. Static HTML is fine and readable; but "add" buttons need wiring — event delegation. I'll write static HTML rows (6 items), each with data-name/data-price.

Nav basket count span#basket.

Order toast: `showToast(msg)`.

Form submit: preventDefault, basic email check, success message inline + toast.

IntersectionObserver: `.reveal` → add .in. Elements: section headers, rows, story, etc. With transition delay via nth or inline style order.

Also small touch: "spice note" under menu: mono text.

Responsive breakpoints: 960px and 640px.

Header logo: small SVG chili icon + "KIMCHI LOCO" display font.

Let me also add a "signature": in hero, under CTA, a mono hint: "psst — click the taco."  Good affordance.

Hero CTA buttons: solid ink button with red hover, and outlined button. Rounded-full, Impact text. On click scroll to menu / truck.

Now writing final HTML. I'll be meticulous with SVG taco coordinates.

Taco SVG (viewBox 0 0 420 470):

Bowl (tortilla): 
- Path: M45,235 Q50,345 210,352 Q370,345 375,235 L45,235 Z? The top edge straight closing line — but filling covers it. Fill #F3C550, stroke #241E17 stroke-width 7, stroke-linejoin round.
- Inner rim shading: path M70,240 Q80,320 210,330 Q340,320 350,240 stroke rgba darker, fill none, opacity .25 — subtle. Maybe skip; add sesame dots on bowl: small white ellipses with ink stroke .5? Just cream dots.
- Bottom highlight.

Filling (above y≈235):
- Kimchi layer (red #D8342A): path M60,238 C70,160 95,150 112,192 C120,130 150,128 158,176 C170,118 200,116 210,168 C222,120 252,126 258,180 C272,136 300,142 306,196 C322,158 348,168 356,238 Z — wavy bumps. stroke ink 6.
- Lettuce green (#4E8C33): overlapping smaller bumps lower: M90,238 C100,180 122,178 130,212 C140,170 164,168 172,206 C184,160 210,158 218,204 C230,164 254,166 262,210 C274,176 296,180 302,238 Z — fill green stroke ink 5. Hmm overlapping arcs create nice depth.
- Cheese drips (#F6BE3C): a few rounded blobs hanging from filling line onto bowl: rects rx: e.g. path/rects at x=150,205,260 width 14 height 34, rx7, plus stroke.
- Sesame: small white ellipses on filling bumps (3-4).

Face (on bowl, centered ~ (210, 295)):
- Sunglasses: rect x=138 y=262 w=58 h=34 rx=12; rect x=222 y=262 w=58 h=34 rx=12; fill #241E17; bridge: path M196,274 Q210,266 222,274 stroke ink 6 fill none; arms: M138,274 L118,268 ; M280,274 L300,268 stroke 6. Lens shine: white line inside each lens opacity .5: M148,270 l14,-? simple small line.
- Smile: path M188,316 Q210,334 232,316 stroke ink 6 fill none linecap round.
- Blush: two circles fill #E88A7A opacity .6 at (128,300),(292,300) r=9.

Flames (below bowl, around y=360-450): three groups at x=130,210,290, base y=455.
Flame path (origin at bottom center): M0,0 C-22,-16 -26,-44 -10,-62 C-6,-44 4,-46 6,-60 C 22,-48 26,-18 12,-4 C8,-2 4,0 0,0 Z — rough flame. Fill #E86A17 outer; inner smaller flame #F6BE3C scaled .55 translate up. Plus tiny red core. Wrap each in <g class="flame" transform="translate(130,455)">.

Steam: paths above filling around y=100 up: e.g. M150,95 q-10,-25 5,-45 q12,-18 2,-40 stroke ink opacity .5 width 5 fill none linecap round; two more at x=230, 285 with different heights. class steam s1/s2/s3.

Bob animation on whole svg wrapper; but flames flicker inside.

Badge SVG: viewBox 0 0 160 160, circle path id for textPath: M80,80 m-58,0 a58,58 0 1,1 116,0 a58,58 0 1,1 -116,0. Text mono 15px letter-spacing 3: "KIMCHI LOCO ★ 스피시 ★ TACO TRUCK ★ ". Center: small chili svg or star. Rotate whole svg via CSS.

Chili icon (nav): simple path.

OK, also the "ticket strip" stats: flex row, each item flex:1 with left border, big number Impact red + small mono label. Different content lengths → not uniform cards, it's a strip. Fine.

Story stickers: place at right, rotated, with hover wiggle. Add drop-shadow hard offset (box-shadow can't on svg — use filter: drop-shadow(6px 6px 0 rgba ink)). Sticker container: cream bg with ink border 3px, rotate -6/4/-3 deg, contains svg + caption mono. These are 3 stickers stacked with offsets — not a card row, they're scattered. Good.

Gochujang bottle SVG (viewBox 0 0 90 150): cap rect(32,8,26,18 ink), neck, body rect(18,30,54,105 rx10) fill red stroke ink 5, label rect(24,64,42,44) cream stroke ink 3, text? tiny lines instead of text (avoid font weirdness): two ink lines. Plus "GOCHUJANG" mono under sticker caption.

Ramyeon cup (0 0 90 140): trapezoid path M22,30 L68,30 L78,125 L12,125 Z fill #E8603C? cup often red; lid: ellipse cx45 cy30 rx26 ry8 fill cream stroke ink, top line. Waves lines on cup. Caption "RAMYEON".

Lime (0 0 100 100): circle r40 fill #7CB56B? use #4E8C33 stroke ink 5; inner circle r32 fill #CDE3A0? no gradients—flat #BFD98B; segments: 6 lines from center + small wedge lines. Caption "LIME".

Menu descriptions with personality:
1. Bulgogi K-Taco — "Marinated short rib, charred at the window, kimchi slaw, gochujang crema, cilantro, sesame. The one that started the traffic jam." heat 2, $4.50
2. Gangnam Chicken — "Double-fried chicken, honey-gochu glaze, pickled daikon, crushed peanut. Gangnam style, street price." heat 3, $5.00
3. El Diablo Pork Boss — "Slow samgyeopsla pork belly, salsa verde, pickled jalapeño, scallion. Sign the waiver." heat 5, $5.50
4. Tofu Hero — "Crispy tofu, kimchi butter—wait, no—vegan ssam sauce, cucumber, crispy shallots. Plant-based, zero apology." heat 1, $4.50
5. Loco Fries — "A mountain. Bulgogi, cheese sauce, kimchi, scallion, sriracha mayo. Bring a friend. Or don't." heat 3, $8.00
6. Bibim-Burrito — "Bibimbap logic, burrito engineering. Rice, bulgogi, egg, spinach, gochu sauce. It's a lot. You're ready." heat 2, $9.50

Heat display: chilis filled = heat, filled red; unfilled outlined. Render via JS from data-heat attr into .heat span. Simpler: static inline SVGs... I'll do JS render to avoid repetition.

Add button: circular 34px ink border, cream bg, "+" mono; hover invert. Click: basket++, toast `"${name} added — pay at the window"`.

Nav: basket pill shows taco count "0". Clicking nav "Order" scrolls to menu.

Live region for status computed on load + every minute.

Time formatting: h in 0-24 → "11 AM–2 PM".

Now compose "next opening": flatten future slots: for i in 0..7: day=(today+i)%7 slots; if i==0 only future slots; take first; label "Tue 11 AM". Good.

Footer wordmark: huge outline text with -webkit-text-stroke cream on dark, opacity .9, white-space nowrap? Use font-size clamp big, could overflow — set font-size: clamp(60px, 12vw, 150px), text-align center, fine.

Also add keyboard easter egg? Skip.

One more consideration: "Something meaningful visible on first paint" — yes, full hero.

Let me write it now. I'll keep CSS organized with comments. Total maybe ~800 lines. Let's go.

Edge check: Impact fallback 'Arial Narrow Bold' etc. `font-family: 'Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;` On macOS Impact exists. Good. letter-spacing tighten: Impact is already condensed; add `letter-spacing:-.01em`.

Hero grid: grid-template-columns: 1.1fr .9fr; gap; align center; padding: 48px 5vw 64px. Hero min-height: calc(100vh - 110px)? Just generous padding.

Headline lines: block spans; second line margin-left offset for dynamism; add small red star svg between? Add "안녕, hola!" mono label above.

Behind headline: giant outline Korean "맛있어" absolute, font serif bold — Korean glyphs in Georgia won't render; fallback fonts will handle (system Korean). Set font-family for it: sans-serif Korean default fine. opacity .07, font-size 28vw, position absolute, z-index 0, right:-4%. Keep within overflow hidden hero.

Alright — code time. I'll write carefully to avoid syntax errors, especially the SVG data-URI noise and template strings.

For particles types:

```js
const BITS = [
 // chili
 `<svg viewBox="0 0 24 24" class="p-chili"><path d="M20 7c1.5-2 .8-4.2-.5-5.5-.8 1-1 2-1 3.2C13 4 7 6 4.2 10 2 13 1 17.5 2.5 21c-.4-4 1.6-8 4.7-10.6C10.5 7.5 15.8 6.5 20 7Z" fill="#D8342A" stroke="#241E17" stroke-width="1.4"/></svg>`,
 // lime slice
 `<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4E8C33" stroke="#241E17" stroke-width="1.6"/><circle cx="12" cy="12" r="6.5" fill="#CFE59B"/><path d="M12 5.5v13M5.5 12h13M7.4 7.4l9.2 9.2M16.6 7.4l-9.2 9.2" stroke="#4E8C33" stroke-width="1.3"/></svg>`,
 // kimchi chunk
 `<svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="3" fill="#E86A17" stroke="#241E17" stroke-width="1.6"/><path d="M8 9l8 6M16 9l-8 6" stroke="#D8342A" stroke-width="1.6"/></svg>`
];
```

Particle DOM: span.pt with innerHTML svg, position absolute, width 22-30px. rAF physics; hero position:relative; overflow:hidden.

Also taco click sound? No audio.

Wiggle keyframes: 
```css
@keyframes boing{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.06,.94) rotate(2deg)}55%{transform:scale(.96,1.05) rotate(-2deg)}100%{transform:scale(1) rotate(0)}}
```
Applied to inner wrapper so bob (outer) unaffected.

Bob: `@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(8px)}}` alternate 2.8s.

Steam keyframes: `@keyframes steam{0%{transform:translateY(10px);opacity:0}30%{opacity:.6}100%{transform:translateY(-26px);opacity:0}}` 3s infinite, delays .9s increments, transform-box fill-box.

Flame: `@keyframes flick{from{transform:scaleY(.86) scaleX(1.05)}to{transform:scaleY(1.12) scaleX(.95)}}` .38s alternate infinite; delays.

Badge rotate 14s linear infinite.

Menu row hover invert: .mrow:hover{background:var(--ink);color:var(--paper)} price red→? ensure contrast: on dark, price color var(--yellow), desc color #EDE. Use CSS.

Expand: .mrow .mbody{display:grid;grid-template-rows:0fr;transition:.35s} .mrow:hover .mbody, .mrow.open .mbody{grid-template-rows:1fr} inner {overflow:hidden}.

Add button inside row must stay clickable on dark: give it explicit colors.

Reveal: `.reveal{opacity:0;transform:translateY(26px)} .reveal.in{opacity:1;transform:none;transition:.7s cubic-bezier(.2,.7,.2,1)}` with per-element transition-delay via style attr or nth-child.

Status pill: #statusPill with classes open/closed.

Schedule table markup: rows rendered by JS into #schedList; each row: day name mono, location display, hours mono, marker. Today row: background cream on dark section? The truck section dark: bg ink, text cream. Today row gets red left bar + "TODAY" tag.

OK writing final answer now. Also remember: response must contain ONLY the code block per output rules... Actually the system prompt says reply with exactly one fenced code block, no text before/after. But also "After writing code, include a brief text explanation" — conflicting; the explicit output rules of the environment take precedence: exactly one code block, nothing else. I'll follow the strict output rule (one code block only).

Let me write everything.

Double-check noise data URI encoding: I'll use single-quoted url with encoded chars: spaces ok? Better encode as %20? Inside url('data:image/svg+xml,...') unencoded spaces generally work but to be safe I'll keep it simple and use minimal SVG. Use:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");

That's the standard safe pattern. body::before fixed overlay instead of body background to layer over everything? Use body::before with position fixed, pointer-events none, z-index 999? Over toast is fine visually, keep z-index 5 below header maybe. Simpler: put on body background with paper color. But sections have own bg colors (ink sections) which would cover noise. For uniform riso grain, use body::after fixed overlay z-index: 2000, pointer-events:none, mix nothing, opacity as built into rect opacity .05. It'll grain over everything including toast — acceptable, subtle. But above toast ok.

Sticky header z-index 100; toast 500; grain 900.

Now the schedule "next open" calc and status text. Implement:

```js
function fmt(h){const H=Math.floor(h%24),m=Math.round((h%1)*60);const ap=H>=12?'PM':'AM';const hh=((H+11)%12)+1;return hh+(m? ':'+String(m).padStart(2,'0'):':00')... 
```
Simpler: hours are integers in my data, so fmt(h)= `${((h+11)%12)+1} ${h<12&&h!==0? 'AM':'PM'}` careful h=24 (Fri until 24) → "12 AM"? midnight — say 12 AM. ((24+11)%12)+1 = (35%12)+1=11+1=12 → "12", h>=12 → PM → "12 PM". Midnight is 12 AM technically; Fri until midnight — display "12 AM". Eh, set Fri close 23.5? Keep 24 and fmt gives "12 PM" wrong. I'll special-case: h===24 → '12 AM'. fine.

Status compute:

```js
const now=new Date(); const d=now.getDay(); const t=now.getHours()+now.getMinutes()/60;
const slots=SCHED[d][1]; open if slots.some(([a,b])=>t>=a&&t<b);
if open: until = min b where t<b → `OPEN NOW — until ${fmt(b)}`.
else find next: for i 0..7: dd=(d+i)%7; for [a,b] of SCHED[dd][1]: if(i>0||a>t) → `CLOSED — back ${dayName(dd)} ${fmt(a)}`
```
dayName: ['Sun',...]. Render pill text + row highlight.

Render rows Mon..Sun order [1..6,0].

Enough planning. Write it.