Models 44

Muse Ember

Open in new window

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

How it went

Total time
39.7 s
Cost
$0.0086
Output tokens
17,026
Spent thinking
4,195 tokens
Speed
451.9 tok/s
Console errors
0
First token after
2.0 s
First visible text after
15.6 s
Prompt tokens
379
Code size
39.5 KB
Finish reason
stop
Served by
Meta
Model id
meta/muse-ember
Reasoning sent
{"effort":"max"}
Max output
943,718 tokens
Generated
Nov 12, 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 · 492 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 — Seoul Meets Mexico | Korean Tacos Food Truck</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
:root{--red:#FF2E2E;--orange:#FF7A00;--yellow:#FFC700;--cream:#FFF6E5;--black:#111111;--green:#12B76A}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--cream);color:var(--black);overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
.topbar{background:var(--black);color:#fff;text-align:center;padding:9px 12px;font-size:13px;font-weight:800;letter-spacing:.6px}
.topbar b{color:var(--yellow)}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,246,229,.95);backdrop-filter:blur(10px);border-bottom:3px solid var(--black);display:flex;align-items:center;justify-content:space-between;padding:12px 5%;gap:16px}
.logo{font-family:Impact,'Arial Black',sans-serif;font-size:28px;letter-spacing:1px;line-height:1;text-transform:uppercase}
.logo span{color:var(--red)}
.logo small{display:block;font-family:system-ui;font-size:10px;letter-spacing:3px;font-weight:800;color:#666;margin-top:3px}
.nav-links{display:flex;gap:26px;font-weight:800;font-size:14px;letter-spacing:.5px}
.nav-links a:hover{color:var(--red)}
.nav-right{display:flex;align-items:center;gap:10px}
.status-pill{display:flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--black);border-radius:999px;padding:7px 12px;font-size:12px;font-weight:900;white-space:nowrap}
.dot{width:9px;height:9px;background:var(--green);border-radius:50%;animation:pulse 1.4s infinite}
.dot.closed{background:var(--red);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,183,106,.5)}70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}}
.btn-order{background:var(--black);color:var(--yellow);border:3px solid var(--black);border-radius:999px;padding:10px 18px;font-weight:900;letter-spacing:.5px;box-shadow:4px 4px 0 var(--red);display:flex;gap:8px;align-items:center}
.btn-order:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}
.cart-count{background:var(--red);color:#fff;border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;font-size:12px;padding:0 5px}
.hero{padding:28px 5% 42px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;background:radial-gradient(circle at 85% 20%,#FFE58A 0 180px,transparent 181px),radial-gradient(#111 1.2px,transparent 1.2px);background-size:auto,22px 22px;position:relative}
.pill{display:inline-flex;gap:8px;align-items:center;background:#fff;border:2px solid var(--black);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:900;letter-spacing:1px;box-shadow:3px 3px 0 var(--black)}
.hero h1{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(52px,7.2vw,94px);line-height:.88;letter-spacing:.5px;text-transform:uppercase;margin:18px 0 6px}
.hero h1 .hl{background:var(--red);color:#fff;padding:2px 12px 6px;display:inline-block;transform:rotate(-1.5deg);box-shadow:6px 6px 0 var(--black)}
.hero h1 .yellow{color:var(--orange)}
.hero-sub{font-size:clamp(17px,2vw,21px);line-height:1.5;font-weight:600;color:#333;max-width:560px;margin:16px 0 22px}
.hero-sub b{color:var(--red)}
.korean{display:inline-block;background:var(--yellow);border:2px solid var(--black);padding:1px 7px;border-radius:6px;font-weight:900}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.btn-main{background:var(--black);color:#fff;border:3px solid var(--black);padding:16px 24px;border-radius:999px;font-weight:900;letter-spacing:.5px;font-size:15px;box-shadow:6px 6px 0 var(--red);transition:.15s}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.btn-main.yellow{background:var(--yellow);color:var(--black);box-shadow:6px 6px 0 var(--black)}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:13.5px;font-weight:800}
.hero-meta span{display:flex;align-items:center;gap:6px}
.stars{color:var(--orange);letter-spacing:1px}
.visual{position:relative;display:flex;justify-content:center}
.visual-card{position:relative;width:100%;max-width:520px;background:var(--yellow);border:4px solid var(--black);border-radius:32px;padding:28px 18px 18px;box-shadow:12px 12px 0 var(--black);transform:rotate(1deg)}
.visual-card::before{content:"";position:absolute;inset:10px;border:2px dashed rgba(0,0,0,.25);border-radius:24px;pointer-events:none}
.hero-taco-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 0 rgba(0,0,0,.12))}
.steam{animation:steam 2.4s infinite}
@keyframes steam{0%,100%{opacity:.2;transform:translateY(0)}50%{opacity:1;transform:translateY(-6px)}}
.float-chip{position:absolute;background:#fff;border:3px solid var(--black);border-radius:999px;padding:8px 13px;font-weight:900;font-size:12px;box-shadow:4px 4px 0 var(--black);z-index:3;white-space:nowrap}
.chip1{top:12px;left:-8px;transform:rotate(-6deg)}
.chip2{bottom:52px;right:-6px;transform:rotate(5deg);background:#FFE5E5}
.chip3{bottom:-14px;left:18px;transform:rotate(-3deg);background:#E6FFE F}
.chip3{background:#E8FFE8}
.spin-badge{position:absolute;top:-22px;right:-10px;width:118px;height:118px;animation:spin 12s linear infinite;z-index:4}
@keyframes spin{to{transform:rotate(360deg)}}
.price-sticker{position:absolute;top:46%;left:-16px;background:var(--red);color:#fff;border:3px solid var(--black);border-radius:50%;width:92px;height:92px;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1;transform:rotate(-10deg);box-shadow:4px 4px 0 #111;z-index:4}
.price-sticker b{font-size:26px;display:block}
.price-sticker small{font-size:10px;letter-spacing:1px}
.marquee-wrap{background:var(--black);color:var(--yellow);overflow:hidden;border-top:3px solid var(--black);border-bottom:3px solid var(--black);padding:13px 0;transform:rotate(-.6deg) scale(1.02)}
.marquee{display:flex;gap:28px;white-space:nowrap;font-family:Impact,'Arial Black',sans-serif;font-size:20px;letter-spacing:1px;animation:marquee 18s linear infinite;width:max-content}
.marquee span:nth-child(even){color:#fff}
@keyframes marquee{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:28px 5% 10px}
.stat{background:#fff;border:3px solid var(--black);border-radius:18px;padding:18px;text-align:center;box-shadow:5px 5px 0 var(--black)}
.stat b{font-family:Impact,'Arial Black',sans-serif;font-size:34px;display:block}
.stat p{font-size:12px;font-weight:800;letter-spacing:1px;color:#666;text-transform:uppercase;margin-top:4px}
.section{padding:52px 5%}
.section-head{text-align:center;max-width:720px;margin:0 auto 28px}
.eyebrow{font-weight:900;letter-spacing:3px;font-size:12px;color:var(--red)}
.section-head h2{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(36px,5vw,58px);text-transform:uppercase;line-height:.95;margin:10px 0}
.section-head p{color:#444;font-weight:600;line-height:1.6}
.filters{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.filter-btn{background:#fff;border:2.5px solid var(--black);border-radius:999px;padding:9px 16px;font-weight:900;font-size:13px}
.filter-btn.active{background:var(--black);color:var(--yellow)}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:#fff;border:3px solid var(--black);border-radius:22px;overflow:hidden;box-shadow:7px 7px 0 var(--black);transition:.18s;display:flex;flex-direction:column}
.card:hover{transform:translate(-3px,-4px);box-shadow:10px 11px 0 var(--black)}
.card-top{height:150px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:3px solid var(--black)}
.card-top .emoji{font-size:76px;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.2))}
.tag{position:absolute;top:10px;left:10px;background:var(--black);color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:1px;padding:5px 8px;border-radius:999px}
.tag.red{background:var(--red);color:#fff}
.card-body{padding:16px;flex:1;display:flex;flex-direction:column}
.card-body h3{font-size:19px;line-height:1.1}
.kor{font-size:12px;font-weight:800;color:#888;letter-spacing:.5px;margin:3px 0 8px}
.desc{font-size:13.5px;line-height:1.5;color:#444;font-weight:500;flex:1}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.price{font-family:Impact,'Arial Black',sans-serif;font-size:26px}
.spice{font-size:12px}
.add-btn{background:var(--red);color:#fff;border:2.5px solid var(--black);border-radius:999px;padding:9px 14px;font-weight:900;box-shadow:3px 3px 0 var(--black)}
.add-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--black)}
.add-btn.added{background:var(--green)}
.menu-note{margin-top:22px;background:#FFF0B8;border:2.5px dashed var(--black);border-radius:16px;padding:16px 18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:700}
.why{background:var(--black);color:#fff;border-radius:0}
.why .section-head p{color:#ccc}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.why-card{background:#1E1E1E;border:2px solid #333;border-radius:22px;padding:24px}
.why-card:hover{border-color:var(--yellow)}
.why-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-size:30px;margin-bottom:14px;border:2px solid #000}
.why-card h3{font-size:20px;margin-bottom:8px}
.why-card p{color:#bbb;line-height:1.6;font-size:14px}
.find-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.days{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.day-btn{flex:1;min-width:52px;background:#fff;border:2.5px solid var(--black);border-radius:14px;padding:11px 4px;font-weight:900}
.day-btn.active{background:var(--yellow);box-shadow:3px 3px 0 var(--black)}
.day-btn.today{outline:3px solid var(--red);outline-offset:2px}
.loc-card{background:#fff;border:3px solid var(--black);border-radius:22px;padding:22px;box-shadow:7px 7px 0 var(--black)}
.loc-card h3{font-size:26px;line-height:1}
.loc-card .addr{color:#555;font-weight:600;margin:8px 0 16px;line-height:1.5}
.loc-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.loc-row{background:var(--cream);border:2px solid #eee;border-radius:12px;padding:12px}
.loc-row small{font-size:10px;letter-spacing:1px;font-weight:900;color:#888;text-transform:uppercase}
.loc-row b{display:block;margin-top:4px}
.map-card{background:#DDEEFF;border:3px solid var(--black);border-radius:22px;overflow:hidden;box-shadow:7px 7px 0 var(--black)}
.map-head{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:3px solid var(--black)}
.live{background:#E8FFF1;color:#077A4A;border:2px solid var(--green);padding:6px 11px;border-radius:999px;font-weight:900;font-size:12px}
.map-svg{width:100%;height:auto;display:block}
.pin{animation:bounce 1.6s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.review-wrap{text-align:center;max-width:760px;margin:0 auto}
.review-card{background:#fff;border:3px solid var(--black);border-radius:26px;padding:30px;box-shadow:8px 8px 0 var(--yellow)}
.review-card .big-stars{font-size:22px;color:var(--orange);letter-spacing:3px}
.review-text{font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.35;margin:16px 0;min-height:110px;transition:opacity .4s}
.review-author{font-weight:800;color:#666}
.review-dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.rdot{width:10px;height:10px;border-radius:50%;background:#ccc;border:2px solid var(--black);cursor:pointer}
.rdot.active{background:var(--red)}
.cta-banner{background:var(--red);color:#fff;padding:44px 5%;text-align:center;border-top:4px solid var(--black);border-bottom:4px solid var(--black)}
.cta-banner h2{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(38px,6vw,72px);text-transform:uppercase;line-height:.9}
.cta-banner p{font-weight:700;margin:14px auto 22px;max-width:600px;line-height:1.6;opacity:.95}
footer{background:var(--black);color:#bbb;padding:36px 5%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:#fff;font-family:Impact,'Arial Black',sans-serif;letter-spacing:1px;font-size:22px}
footer small{display:block;margin-top:6px;line-height:1.6}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90;opacity:0;pointer-events:none;transition:.25s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:390px;max-width:92vw;background:var(--cream);z-index:100;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1);border-left:4px solid var(--black);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:20px;background:var(--yellow);border-bottom:3px solid var(--black);display:flex;justify-content:space-between;align-items:center}
.drawer-head h3{font-family:Impact,'Arial Black',sans-serif;font-size:26px;text-transform:uppercase}
.close-btn{width:38px;height:38px;border-radius:50%;border:3px solid var(--black);background:#fff;font-weight:900;font-size:18px}
.drawer-body{flex:1;overflow:auto;padding:18px}
.cart-item{display:flex;justify-content:space-between;gap:10px;background:#fff;border:2.5px solid var(--black);border-radius:16px;padding:13px;margin-bottom:10px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{width:28px;height:28px;border-radius:50%;border:2px solid var(--black);background:var(--cream);font-weight:900}
.drawer-foot{padding:18px;border-top:3px solid var(--black);background:#fff}
.promo-row{display:flex;gap:8px;margin-bottom:12px}
.promo-row input{flex:1;border:2.5px solid var(--black);border-radius:999px;padding:11px 14px;font-weight:700;min-width:0}
.promo-row button{background:var(--black);color:#fff;border-radius:999px;padding:0 16px;font-weight:900}
.total-row{display:flex;justify-content:space-between;font-size:18px;font-weight:900;margin-bottom:12px}
.checkout{width:100%;background:var(--red);color:#fff;border:3px solid var(--black);border-radius:999px;padding:16px;font-weight:900;font-size:16px;box-shadow:5px 5px 0 var(--black)}
.empty{text-align:center;padding:36px 10px;color:#666;font-weight:700}
.empty .big{font-size:54px;display:block;margin-bottom:10px}
.success-msg{background:#E8FFF1;border:2.5px solid var(--green);border-radius:16px;padding:16px;font-weight:800;text-align:center;margin-bottom:12px}
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,80px);background:var(--black);color:#fff;padding:13px 20px;border-radius:999px;font-weight:900;z-index:120;transition:.3s;box-shadow:0 10px 30px rgba(0,0,0,.3);white-space:nowrap}
.toast.show{transform:translate(-50%,0)}
.reveal{opacity:0;transform:translateY(22px);transition:.6s}
.reveal.visible{opacity:1;transform:none}
@media(max-width:1024px){.menu-grid{grid-template-columns:repeat(2,1fr)}.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
.nav-links{display:none}
.hero{grid-template-columns:1fr;padding-top:20px}
.visual-card{max-width:480px}
.stats{grid-template-columns:repeat(2,1fr)}
.find-grid{grid-template-columns:1fr}
.why-grid{grid-template-columns:1fr}
.status-pill{display:none}
}
@media(max-width:560px){
.menu-grid{grid-template-columns:1fr}
.hero h1{font-size:54px}
.float-chip{font-size:11px;padding:6px 9px}
.chip1{left:0}.chip2{right:0}
.price-sticker{left:-4px;width:80px;height:80px}
.spin-badge{width:92px;height:92px;top:-14px;right:0}
.loc-rows{grid-template-columns:1fr}
.logo{font-size:23px}
.btn-order{padding:9px 13px}
}
</style>
</head>
<body>
<div class="topbar">🔥 TONIGHT ONLY: <b>FREE KIMCHI FRIES</b> WITH ANY 2 TACOS &nbsp;•&nbsp; USE CODE <b>LOCO2FREE</b> &nbsp;•&nbsp; FIRST 200 JARS SELL OUT DAILY</div>

<header class="nav">
  <a href="#" class="logo">KIMCHI <span>LOCO</span><small>SEOUL ✕ MEXICO • FOOD TRUCK</small></a>
  <nav class="nav-links"><a href="#menu">MENU</a><a href="#about">WHY LOCO</a><a href="#find">FIND US</a><a href="#reviews">REVIEWS</a></nav>
  <div class="nav-right">
    <div class="status-pill"><span class="dot" id="navDot"></span><span id="navStatus">OPEN NOW • 11AM–10PM</span></div>
    <button class="btn-order" id="openCartBtn">🛒 ORDER <span class="cart-count" id="cartCount">0</span></button>
  </div>
</header>

<section class="hero">
  <div>
    <span class="pill">🇰🇷 SEOUL × 🇲🇽 MEXICO &nbsp;•&nbsp; <span style="color:#FF2E2E">김치 로코</span> &nbsp;•&nbsp; EST. 2024</span>
    <h1>CRAZY GOOD<br><span class="hl">KIMCHI LOCO</span><br>SEOUL-STYLE<br><span class="yellow">TACOS.</span></h1>
    <p class="hero-sub">Char-grilled <b>bulgogi</b>, house-fermented <b>kimchi</b>, and fiery <b>gochujang crema</b> folded into warm corn tortillas. This isn't fusion. This is <b>full loco.</b></p>
    <div class="ctas">
      <a href="#find" class="btn-main">📍 FIND THE TRUCK TODAY</a>
      <a href="#menu" class="btn-main yellow">SEE THE MENU ↓</a>
    </div>
    <div class="hero-meta">
      <span><span class="stars">★★★★★</span> 4.9 • 2,340 reviews</span>
      <span>🕚 Open Today 11AM–10PM</span>
      <span>🌶️ House kimchi made daily</span>
    </div>
  </div>

  <div class="visual">
    <div class="visual-card">
      <svg class="spin-badge" viewBox="0 0 120 120"><defs><path id="circ" d="M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0"/></defs><circle cx="60" cy="60" r="58" fill="#111"/><circle cx="60" cy="60" r="34" fill="#FF2E2E"/><text fill="#FFC700" font-size="11.5" font-weight="900" letter-spacing="2.5"><textPath href="#circ">KIMCHI LOCO • SEOUL × MEXICO • </textPath></text><text x="60" y="68" text-anchor="middle" font-size="26">🌮</text></svg>
      <div class="float-chip chip1">🌶️ GOCHUJANG CREMA</div>
      <div class="float-chip chip2">🥬 FRESH KIMCHI</div>
      <div class="float-chip chip3">🥩 24HR BULGOGI</div>
      <div class="price-sticker"><div><b>$13</b><small>BESTSELLER<br>TACO</small></div></div>
      <svg class="hero-taco-svg" viewBox="0 0 520 380" role="img" aria-label="Kimchi Loco taco">
        <ellipse cx="260" cy="322" rx="190" ry="20" fill="#000" opacity="0.14"/>
        <g class="steam" stroke="#111" stroke-width="5" fill="none" stroke-linecap="round"><path d="M170 95 Q160 70 175 55"/><path d="M260 85 Q250 60 265 45"/><path d="M350 95 Q340 70 355 55"/></g>
        <path d="M55 195 Q260 50 465 195 L465 228 Q260 288 55 228 Z" fill="#E9A93B" stroke="#111" stroke-width="6" stroke-linejoin="round"/>
        <g stroke="#111" stroke-width="4">
          <circle cx="125" cy="178" r="29" fill="#FF3B30"/><circle cx="190" cy="142" r="33" fill="#7AC74F"/><circle cx="262" cy="126" r="35" fill="#FF6B35"/><circle cx="332" cy="142" r="33" fill="#FFCC00"/><circle cx="395" cy="178" r="29" fill="#FF3B30"/>
          <circle cx="160" cy="165" r="19" fill="#8B4513"/><circle cx="305" cy="152" r="21" fill="#8B4513"/><circle cx="365" cy="163" r="16" fill="#7AC74F"/><circle cx="235" cy="150" r="14" fill="#fff"/>
        </g>
        <path d="M55 195 Q260 338 465 195 Q260 258 55 195 Z" fill="#FDD65E" stroke="#111" stroke-width="6" stroke-linejoin="round"/>
        <g fill="#E9A93B"><ellipse cx="150" cy="232" rx="11" ry="5" transform="rotate(-20 150 232)"/><ellipse cx="232" cy="262" rx="12" ry="5" transform="rotate(8 232 262)"/><ellipse cx="322" cy="252" rx="11" ry="5"/><ellipse cx="382" cy="226" rx="10" ry="4"/></g>
        <g fill="#111"><circle cx="180" cy="208" r="4"/><circle cx="270" cy="228" r="4"/><circle cx="340" cy="210" r="4"/></g>
      </svg>
      <div style="display:flex;justify-content:space-between;align-items:center;padding:6px 8px 2px">
        <b style="font-family:Impact,'Arial Black',sans-serif;letter-spacing:1px">BULGOGI BLAZE 🌮</b>
        <span style="background:#111;color:#FFC700;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:900">맛있어! SO GOOD</span>
      </div>
    </div>
  </div>
</section>

<div class="marquee-wrap"><div class="marquee" id="marquee"></div></div>

<section class="stats">
  <div class="stat reveal"><b>12K+</b><p>Tacos Sold</p></div>
  <div class="stat reveal"><b>4.9★</b><p>Google Rating</p></div>
  <div class="stat reveal"><b>200</b><p>Kimchi Jars / Day</p></div>
  <div class="stat reveal"><b>3 MINS</b><p>Avg. Wait Time</p></div>
</section>

<section class="section" id="menu" style="padding-top:30px">
  <div class="section-head reveal">
    <div class="eyebrow">THE LOCO MENU</div>
    <h2>PICK YOUR<br>POISON. 🌶️</h2>
    <p>Every taco comes on a warm corn tortilla with crunchy house kimchi, sesame, cilantro & our secret gochujang crema. Add one to your order — we'll have it hot in 3 minutes.</p>
  </div>
  <div class="filters" id="filters">
    <button class="filter-btn active" data-filter="all">ALL TACOS</button>
    <button class="filter-btn" data-filter="beef">🥩 BEEF</button>
    <button class="filter-btn" data-filter="chicken">🍗 CHICKEN</button>
    <button class="filter-btn" data-filter="seafood">🍤 SEAFOOD</button>
    <button class="filter-btn" data-filter="veggie">🥬 VEGGIE</button>
    <button class="filter-btn" data-filter="sides">🍟 SIDES</button>
  </div>
  <div class="menu-grid" id="menuGrid"></div>
  <div class="menu-note reveal">
    <span>💡 <b>COMBO DEAL:</b> Any 2 tacos + Kimchi Fries = <b>Save $4</b> &nbsp;•&nbsp; Code: <b>LOCO2FREE</b> in your order</span>
    <span>🫙 Only 200 kimchi jars made each morning — when it's gone, it's gone.</span>
  </div>
</section>

<section class="section why" id="about">
  <div class="section-head reveal">
    <div class="eyebrow" style="color:#FFC700">WHY PEOPLE DRIVE ACROSS TOWN</div>
    <h2>NOT JUST A TACO.<br>IT'S LOCO.</h2>
    <p>We started Kimchi Loco because we couldn't find a taco that hit like Seoul street food. So we built a truck that does both.</p>
  </div>
  <div class="why-grid">
    <div class="why-card reveal"><div class="why-icon" style="background:#FF2E2E">🫙</div><h3>Fermented Daily, Not Bought</h3><p>Our kimchi is fermented in-house every morning — napa cabbage, Korean chili flakes, garlic & ginger. Crunchy, bright, and a little spicy. You will taste the difference in bite one.</p></div>
    <div class="why-card reveal"><div class="why-icon" style="background:#FFC700">🥩</div><h3>24-Hour Seoul Marinade</h3><p>Bulgogi sliced thin and marinated for a full day in pear, soy, sesame & gochujang, then char-grilled to order over open flame. Sweet, smoky, caramelized.</p></div>
    <div class="why-card reveal"><div class="why-icon" style="background:#12B76A">🌶️</div><h3>Sauces From Scratch</h3><p>Gochujang crema, kimchi ranch, and burnt garlic aioli — all made fresh, no shortcuts. Three heat levels from mild Seoul to full loco fire.</p></div>
  </div>
</section>

<section class="section" id="find">
  <div class="section-head reveal">
    <div class="eyebrow">FIND THE TRUCK</div>
    <h2>WHERE ARE WE<br>EATING TODAY?</h2>
    <p>Tap a day to see our spot. We move daily so you're never bored — and yes, the line moves fast.</p>
  </div>
  <div class="find-grid">
    <div class="reveal">
      <div class="days" id="days"></div>
      <div class="loc-card" id="locCard"></div>
      <div style="display:flex;gap:10px;margin-top:16px;flex-wrap:wrap">
        <button class="btn-main" style="padding:13px 20px" onclick="document.getElementById('menu').scrollIntoView({behavior:'smooth'})">ORDER AHEAD →</button>
        <span style="align-self:center;font-weight:800;font-size:13px;color:#666">📞 Catering: loco@kimchiloco.com</span>
      </div>
    </div>
    <div class="map-card reveal">
      <div class="map-head"><b style="font-family:Impact,'Arial Black',sans-serif;letter-spacing:1px">LIVE LOCATION</b><span class="live" id="findStatus">● OPEN NOW</span></div>
      <svg class="map-svg" viewBox="0 0 600 380">
        <rect width="600" height="380" fill="#EAF4FF"/>
        <g stroke="#fff" stroke-width="18"><path d="M0 110 H600"/><path d="M0 260 H600"/><path d="M170 0 V380"/><path d="M390 0 V380"/></g>
        <g stroke="#B9D6F2" stroke-width="3"><path d="M0 110 H600"/><path d="M0 260 H600"/><path d="M170 0 V380"/><path d="M390 0 V380"/></g>
        <g fill="#A8E6A1"><rect x="20" y="20" width="120" height="70" rx="10"/><rect x="200" y="140" width="160" height="90" rx="10"/><rect x="420" y="20" width="140" height="70" rx="10"/><rect x="20" y="290" width="120" height="70" rx="10"/></g>
        <text x="80" y="60" text-anchor="middle" font-weight="800" fill="#2E7D32" font-size="13">ZILKER PARK</text>
        <text x="280" y="190" text-anchor="middle" font-weight="800" fill="#2E7D32" font-size="13">FOOD TRUCK PARK</text>
        <g class="pin"><path d="M280 155 L260 120 Q260 95 280 95 Q300 95 300 120 Z" fill="#FF2E2E" stroke="#111" stroke-width="3"/><circle cx="280" cy="118" r="8" fill="#fff" stroke="#111" stroke-width="2"/><text x="280" y="82" text-anchor="middle" font-weight="900" fill="#111" font-size="14">KIMCHI LOCO 🌮</text></g>
        <circle cx="280" cy="155" r="18" fill="#FF2E2E" opacity=".25"><animate attributeName="r" values="12;28;12" dur="2s" repeatCount="indefinite"/></circle>
        <g transform="translate(420,285)"><rect width="140" height="52" rx="12" fill="#111"/><text x="70" y="22" text-anchor="middle" fill="#FFC700" font-weight="900" font-size="12">KIMCHI LOCO</text><text x="70" y="40" text-anchor="middle" fill="#fff" font-size="11">🚚 FULL MENU • A/C</text></g>
      </svg>
      <div style="padding:14px 18px;background:#fff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:700"><span id="countdown">⏰ Closes at 10:00 PM</span><span>📍 <span id="mapAddr">2207 Lou Ring Blvd, Austin</span></span></div>
    </div>
  </div>
</section>

<section class="section" id="reviews" style="padding-top:20px">
  <div class="section-head reveal"><div class="eyebrow">REAL PEOPLE. REAL LOCO.</div><h2>THE LINE<br>PROVES IT.</h2></div>
  <div class="review-wrap reveal">
    <div class="review-card">
      <div class="big-stars">★★★★★</div>
      <p class="review-text" id="reviewText">"I drove 40 minutes for the Bulgogi Blaze. I would drive 40 more. The kimchi crunch + sweet bulgogi is actually insane."</p>
      <div class="review-author" id="reviewAuthor">— Maya R. • East Austin • Verified Order</div>
      <div class="review-dots" id="reviewDots"></div>
    </div>
  </div>
</section>

<div class="cta-banner">
  <h2>HUNGRY?<br>WE'RE LOCO.</h2>
  <p>Skip the line. Order ahead, pick your heat level, and we'll have your tacos fire-grilled and ready. First 200 kimchi jars go fast — today's batch is already going.</p>
  <button class="btn-main yellow" onclick="openCart()">START MY ORDER →</button>
</div>

<footer>
  <div><b>KIMCHI <span style="color:#FF2E2E">LOCO</span></b><small>Seoul meets Mexico. One truck, zero boring tacos.<br>© 2025 Kimchi Loco. All rights reserved.</small></div>
  <div><b style="font-size:14px;letter-spacing:2px">HOURS</b><small>Mon–Thu: 11AM–9PM<br>Fri–Sun: 11AM–10PM<br>Mon closed for kimchi day</small></div>
  <div><b style="font-size:14px;letter-spacing:2px">FOLLOW THE TRUCK</b><small>Instagram @kimchiloco.tx<br>TikTok @kimchiloco<br>loco@kimchiloco.com</small></div>
</footer>

<div class="drawer-overlay" id="overlay" onclick="closeCart()"></div>
<aside class="drawer" id="drawer">
  <div class="drawer-head"><h3>Your Loco Order 🌮</h3><button class="close-btn" onclick="closeCart()">×</button></div>
  <div class="drawer-body" id="drawerBody"></div>
  <div class="drawer-foot">
    <div class="promo-row"><input id="promoInput" placeholder="Promo code (try LOCO2FREE)"><button onclick="applyPromo()">APPLY</button></div>
    <div id="promoMsg" style="font-size:12px;font-weight:800;margin-bottom:8px"></div>
    <div class="total-row"><span>Total</span><span id="cartTotal">$0.00</span></div>
    <button class="checkout" id="checkoutBtn" onclick="checkout()">ORDER AHEAD • PICK UP IN 10 MIN →</button>
    <p style="text-align:center;font-size:12px;color:#888;font-weight:700;margin-top:10px">Pay at truck • Apple Pay, Card & Cash accepted</p>
  </div>
</aside>
<div class="toast" id="toast">Added to order! 🌮</div>

<script>
const MENU=[
{id:1,name:"Bulgogi Blaze",kor:"불고기 블레이즈",desc:"24hr bulgogi, house kimchi, gochujang crema, sesame & cilantro. Our #1 seller for a reason.",price:13,spice:2,tag:"BESTSELLER",cat:"beef",emoji:"🥩",bg:"#FFE5E5"},
{id:2,name:"Kimchi Carnitas",kor:"김치 카르니타스",desc:"Slow-roasted pork carnitas with spicy kimchi slaw and lime crema. Crispy edges, tender inside.",price:12,spice:1,tag:"FAN FAVORITE",cat:"beef",emoji:"🐷",bg:"#FFF0B8"},
{id:3,name:"Gochujang Chicken",kor:"고추장 치킨",desc:"Char-grilled chicken glazed in gochujang honey, topped with kimchi & cucumber. Sweet heat.",price:12,spice:3,tag:"SPICY 🔥",cat:"chicken",emoji:"🍗",bg:"#FFE8D6"},
{id:4,name:"Spicy Tuna Loco",kor:"매운 참치 타코",desc:"Tuna mixed with gochujang mayo, avocado, pickled radish & crispy shallots. Subway-style, loco edition.",price:14,spice:3,tag:"NEW",cat:"seafood",emoji:"🍣",bg:"#E5F0FF"},
{id:5,name:"Perilla Shrimp",kor:"들기름 새우",desc:"Garlic perilla shrimp, kimchi pico, burnt garlic aioli. Light, garlicky, addictive.",price:14,spice:1,tag:"",cat:"seafood",emoji:"🍤",bg:"#E6FFE8"},
{id:6,name:"Seoul Veggie",kor:"야채 타코",desc:"Mushroom bulgogi, grilled peppers, edamame & kimchi. 100% vegan, 100% flavor. No compromise.",price:11,spice:2,tag:"VEGAN",cat:"veggie",emoji:"🥬",bg:"#E8FFE8"},
{id:7,name:"Mushroom Bulgogi",kor:"버섯 불고기",desc:"King oyster mushroom bulgogi with sesame cucumbers & gochujang crema. Umami bomb.",price:11,spice:1,tag:"",cat:"veggie",emoji:"🍄",bg:"#F3E8FF"},
{id:8,name:"Kimchi Cheese Fries",kor:"김치 치즈 프라이즈",desc:"Crispy fries loaded with melted cheese, chopped kimchi, gochujang drizzle & ranch. Dangerously good.",price:8,spice:2,tag:"SIDES • MUST TRY",cat:"sides",emoji:"🍟",bg:"#FFF6D6"},
];
const SCHEDULE={
Mon:{closed:true,loc:"Kimchi Day 🫙",addr:"Truck closed — we ferment tomorrow's kimchi.",time:"Closed",vibe:"Restocking 200 jars of fresh kimchi"},
Tue:{loc:"Zilker Park",addr:"2207 Lou Ring Blvd, Austin, TX",time:"11AM – 9PM",vibe:"Lunch rush • Free fries 11–1PM"},
Wed:{loc:"South Congress",addr:"1400 S Congress Ave, Austin, TX",time:"11AM – 9PM",vibe:"After-work tacos & live music"},
Thu:{loc:"East Austin",addr:"1900 E 6th St, Austin, TX",time:"11AM – 9PM",vibe:"UT Longhorn game day special"},
Fri:{loc:"Downtown — Republic Park",addr:"422 Guadalupe St, Austin, TX",time:"11AM – 10PM",vibe:"Late night • Open until 10PM"},
Sat:{loc:"Barton Springs Farmers Market",addr:"2300 Barton Springs Rd, Austin",time:"10AM – 10PM",vibe:"Weekend crowds • Opens early!"},
Sun:{loc:"Food Truck Park — Mueller",addr:"1800 Simond Ave, Austin, TX",time:"11AM – 8PM",vibe:"Family day • Kids eat free (under 8)"},
};
const REVIEWS=[
{text:"\"I drove 40 minutes for the Bulgogi Blaze. I would drive 40 more. The kimchi crunch + sweet bulgogi is actually insane.\"",author:"— Maya R. • East Austin • Verified Order"},
{text:"\"Best taco I've had outside of Mexico City AND Seoul. I don't know how that works but Kimchi Loco figured it out.\"",author:"— Daniel K. • UT Student • 12 visits"},
{text:"\"The kimchi fries should be illegal. We ordered 2 tacos and ended up staying for 3 rounds of fries.\"",author:"— Sofia L. • South Congress"},
{text:"\"Ordered ahead, picked up in 8 minutes, still hot. Line was 30 deep. This is how food trucks should be.\"",author:"— James T. • Downtown Regular"},
];
let cart={}, promoDiscount=0, activeFilter='all', reviewIdx=0;

// Marquee
const words=["BULGOGI BLAZE 🌮","KIMCHI CARNITAS","GOCHUJANG CHICKEN 🔥","SEOUL × MEXICO","HOUSE KIMCHI DAILY","SPICY TUNA LOCO","맛있어!","KIMCHI LOCO"];
document.getElementById('marquee').innerHTML=[...words,...words].map(w=>`<span>${w}</span><span>✦</span>`).join('');

// Menu render
function spiceHtml(n){return '🌶️'.repeat(n)+' <span style="color:#bbb">'+'🌶️'.repeat(3-n)+'</span>'}
function renderMenu(){
  const grid=document.getElementById('menuGrid');
  const items=MENU.filter(m=>activeFilter==='all'||m.cat===activeFilter);
  grid.innerHTML=items.map(m=>`
  <article class="card">
    <div class="card-top" style="background:${m.bg}"><span class="emoji">${m.emoji}</span>${m.tag?`<span class="tag ${m.tag.includes('BEST')?'red':''}">${m.tag}</span>`:''}</div>
    <div class="card-body">
      <h3>${m.name}</h3><div class="kor">${m.kor}</div>
      <p class="desc">${m.desc}</p>
      <div style="margin-top:10px" class="spice">${spiceHtml(m.spice)} <span style="font-weight:700;color:#888">${m.spice===1?'Mild':m.spice===2?'Medium Heat':'Full Loco 🔥'}</span></div>
      <div class="card-foot"><span class="price">$${m.price}</span><button class="add-btn" data-id="${m.id}">+ ADD</button></div>
    </div>
  </article>`).join('');
  grid.querySelectorAll('.add-btn').forEach(b=>b.addEventListener('click',()=>addToCart(+b.dataset.id,b)));
}
renderMenu();
document.querySelectorAll('.filter-btn').forEach(b=>b.addEventListener('click',()=>{
  document.querySelectorAll('.filter-btn').forEach(x=>x.classList.remove('active'));b.classList.add('active');activeFilter=b.dataset.filter;renderMenu();
}));

// Cart
function addToCart(id,btn){
  cart[id]=(cart[id]||0)+1; updateCart();
  const item=MENU.find(m=>m.id===id);
  showToast(`✅ ${item.name} added — $${item.price}`);
  if(btn){const old=btn.textContent;btn.textContent='✓ ADDED';btn.classList.add('added');setTimeout(()=>{btn.textContent=old;btn.classList.remove('added')},1100)}
}
function changeQty(id,d){cart[id]+=d; if(cart[id]<=0) delete cart[id]; updateCart()}
function cartTotal(){let s=0;for(const id in cart){s+=MENU.find(m=>m.id==id).price*cart[id]} return Math.max(0,s-promoDiscount)}
function updateCart(){
  const count=Object.values(cart).reduce((a,b)=>a+b,0);
  document.getElementById('cartCount').textContent=count;
  document.getElementById('cartTotal').textContent='$'+cartTotal().toFixed(2);
  const body=document.getElementById('drawerBody');
  if(count===0){body.innerHTML=`<div class="empty"><span class="big">🌮</span>No tacos yet.<br>Add something loco from the menu!</div>`;return}
  let html='';
  for(const id in cart){const m=MENU.find(x=>x.id==id);html+=`<div class="cart-item"><div><b>${m.emoji} ${m.name}</b><div style="color:#888;font-size:13px">$${m.price} each</div></div><div style="text-align:right"><div class="qty"><button onclick="changeQty(${id},-1)">−</button><b>${cart[id]}</b><button onclick="changeQty(${id},1)">+</button></div><b>$${(m.price*cart[id]).toFixed(2)}</b></div></div>`}
  if(promoDiscount>0) html+=`<div style="background:#E8FFF1;border:2px solid #12B76A;border-radius:12px;padding:10px;font-weight:800;margin-top:6px">🎉 LOCO2FREE applied: −$${promoDiscount.toFixed(2)} (Free Kimchi Fries)</div>`;
  body.innerHTML=html;
}
function openCart(){document.getElementById('drawer').classList.add('open');document.getElementById('overlay').classList.add('open')}
function closeCart(){document.getElementById('drawer').classList.remove('open');document.getElementById('overlay').classList.remove('open')}
document.getElementById('openCartBtn').addEventListener('click',openCart);
function applyPromo(){
  const code=document.getElementById('promoInput').value.trim().toUpperCase();
  const msg=document.getElementById('promoMsg');
  if(code==='LOCO2FREE'){promoDiscount=8;msg.textContent='✅ Code applied! Free Kimchi Fries added.';updateCart()}
  else{promoDiscount=0;msg.textContent='❌ Invalid code. Try LOCO2FREE';msg.style.color='#FF2E2E';setTimeout(()=>msg.style.color='',2000);updateCart()}
}
function checkout(){
  if(Object.keys(cart).length===0){showToast('Add a taco first! 🌮');return}
  const total=cartTotal().toFixed(2);
  document.getElementById('drawerBody').innerHTML=`<div class="success-msg">🎉 ORDER PLACED!<br><br>Order #KL-${Math.floor(1000+Math.random()*9000)} • $${total}<br>Pickup in ~10 minutes at the truck.<br>Show this screen to skip the line!</div><p style="text-align:center;font-weight:700;color:#666">We'll text you when it's fire-grilled & ready 🔥</p>`;
  cart={};promoDiscount=0;document.getElementById('promoInput').value='';setTimeout(updateCart,600);
  document.getElementById('cartCount').textContent='0';document.getElementById('cartTotal').textContent='$0.00';
}
function showToast(t){const el=document.getElementById('toast');el.textContent=t;el.classList.add('show');setTimeout(()=>el.classList.remove('show'),2200)}
updateCart();

// Schedule
const order=["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
const todayName=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][new Date().getDay()];
const daysEl=document.getElementById('days');
daysEl.innerHTML=order.map(d=>`<button class="day-btn ${d===todayName?'active today':''}" data-day="${d}">${d}<br><small style="font-size:10px">${SCHEDULE[d].closed?'CLOSED':'OPEN'}</small></button>`).join('');
function renderLoc(day){
  const s=SCHEDULE[day];
  document.getElementById('locCard').innerHTML=s.closed?`
    <span class="pill" style="background:#FFE5E5">CLOSED MONDAY</span><h3 style="margin-top:14px">${s.loc}</h3><p class="addr">${s.addr}</p>
    <div class="loc-rows"><div class="loc-row"><small>Hours</small><b>${s.time}</b></div><div class="loc-row"><small>Today</small><b>${s.vibe}</b></div></div>
    <p style="font-weight:700;color:#666">We reopen Tuesday at Zilker Park! Order ahead now so you're first in line.</p>`:
  `<span class="pill" style="background:#E8FFF1">📍 TODAY'S SPOT ${day===todayName?'• LIVE NOW':''}</span><h3 style="margin-top:14px">${s.loc}</h3><p class="addr">${s.addr}</p>
    <div class="loc-rows"><div class="loc-row"><small>Hours</small><b>${s.time}</b></div><div class="loc-row"><small>Vibe</small><b>${s.vibe}</b></div></div>
    <button class="btn-main" style="width:100%;padding:13px" onclick="openCart()">ORDER AHEAD FOR ${s.loc.toUpperCase()} →</button>`;
  document.getElementById('mapAddr').textContent=s.addr;
  document.querySelectorAll('.day-btn').forEach(b=>b.classList.toggle('active',b.dataset.day===day));
}
daysEl.querySelectorAll('.day-btn').forEach(b=>b.addEventListener('click',()=>renderLoc(b.dataset.day)));
renderLoc(todayName);

// Open status
function updateStatus(){
  const now=new Date();const h=now.getHours();const dayName=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"][now.getDay()];
  const closedDay=SCHEDULE[dayName].closed;
  const openHour=dayName==='Sat'?10:11; const closeHour=(dayName==='Fri'||dayName==='Sat')?22:(dayName==='Sun'?20:21);
  const isOpen=!closedDay && h>=openHour && h<closeHour;
  const navStatus=document.getElementById('navStatus');const navDot=document.getElementById('navDot');
  const findStatus=document.getElementById('findStatus');const countdown=document.getElementById('countdown');
  if(isOpen){navStatus.textContent=`OPEN NOW • until ${closeHour>12?closeHour-12:closeHour}PM`;navDot.className='dot';findStatus.textContent='● OPEN NOW';findStatus.style.background='#E8FFF1';findStatus.style.color='#077A4A';countdown.textContent=`⏰ Closes at ${closeHour>12?closeHour-12:closeHour}:00 PM today`}
  else{navStatus.textContent='CLOSED • OPENS 11AM';navDot.className='dot closed';findStatus.textContent='● CLOSED NOW';findStatus.style.background='#FFE5E5';findStatus.style.color='#B42318';countdown.textContent=h<openHour?`⏰ Opens today at ${openHour}AM — order ahead!`:`⏰ Opens tomorrow at 11AM`}
}
updateStatus();setInterval(updateStatus,60000);

// Reviews
const dotsEl=document.getElementById('reviewDots');
dotsEl.innerHTML=REVIEWS.map((_,i)=>`<span class="rdot ${i===0?'active':''}" data-i="${i}"></span>`).join('');
dotsEl.querySelectorAll('.rdot').forEach(d=>d.addEventListener('click',()=>showReview(+d.dataset.i)));
function showReview(i){
  reviewIdx=i;const txt=document.getElementById('reviewText');txt.style.opacity=0;
  setTimeout(()=>{txt.textContent=REVIEWS[i].text;document.getElementById('reviewAuthor').textContent=REVIEWS[i].author;txt.style.opacity=1;document.querySelectorAll('.rdot').forEach((d,j)=>d.classList.toggle('active',j===i))},300);
}
setInterval(()=>showReview((reviewIdx+1)%REVIEWS.length),5000);

// Reveal
const obs=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')}),{threshold:.12});
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
</script>
</body>
</html>
Reasoning trace (4,195 tokens)
Designing an inline-only responsive HTML site for a Korean taco food truck with SVG graphics and first-paint content.Expanding the inline-only layout with interactive menu filters, cart builder, and live schedule components.Adding neo-brutalist styling, SVG assets, and interactive cart, schedule, and menu components.Extending the UI with schedule toggles, map link, cart drawer, toast, and data-driven menu rendering.Adding cart state, schedule logic, countdown timer, and scroll reveal with responsive styling.