Models 44

Claude Opus 5.5

by Anthropicreasoning defaultClean
Open in new window

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

How it went

Total time
3 min 14 s
Cost
$0.459
Output tokens
22,866
Spent thinking
3,477 tokens
Speed
120.2 tok/s
Console errors
0
First token after
3.3 s
First visible text after
44.1 s
Prompt tokens
543
Code size
37.7 KB
Finish reason
stop
Served by
Claude Platform on AWS
Model id
anthropic/claude-opus-5.5
Reasoning sent
model default
Max output
128,000 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 · 555 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 on Wheels</title>
<style>
:root{
  --red:#e8352b; --red-d:#b9221a; --orange:#ff8a1f; --yellow:#ffd23f;
  --cream:#fff6e6; --ink:#1c1412; --ink2:#2b201c; --green:#5fb84a; --muted:#7a6a62;
  --display:"Arial Black","Helvetica Neue",Impact,"Segoe UI Black",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--cream);color:var(--ink);overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:.95}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(28,20,18,.92);backdrop-filter:blur(8px);color:var(--cream)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.logo .dot{width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:18px;box-shadow:0 0 0 3px var(--yellow)}
.logo span em{font-style:normal;color:var(--yellow)}
.navlinks{display:flex;gap:26px;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.navlinks a:hover{color:var(--yellow)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:999px;padding:14px 24px;font-weight:800;font-size:15px;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 0 var(--red-d)}
.btn-red:hover{box-shadow:0 8px 0 var(--red-d)}
.btn-ghost{background:transparent;color:var(--ink);border:3px solid var(--ink)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 6px 0 #c99b00}
.nav-cta{padding:10px 18px;font-size:13px}

/* HERO */
.hero{position:relative;background:radial-gradient(circle at 80% 30%,#ffb347 0,#ff8a1f 25%,var(--red) 60%,#a8160f 100%);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.12) 1.5px,transparent 1.5px);background-size:22px 22px;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;padding-top:56px;padding-bottom:70px;min-height:600px}
.status{display:inline-flex;align-items:center;gap:10px;background:rgba(28,20,18,.85);padding:8px 16px 8px 12px;border-radius:999px;font-size:14px;font-weight:700;margin-bottom:22px}
.pulse{width:11px;height:11px;border-radius:50%;background:#4cff7a;box-shadow:0 0 0 0 rgba(76,255,122,.7);animation:pulse 1.6s infinite}
.pulse.closed{background:var(--yellow);box-shadow:0 0 0 0 rgba(255,210,63,.7)}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(76,255,122,0)}100%{box-shadow:0 0 0 0 rgba(76,255,122,0)}}
.hero h1{font-size:clamp(48px,7.6vw,104px);text-transform:uppercase;text-shadow:5px 5px 0 var(--ink)}
.hero h1 .y{color:var(--yellow)}
.rotator{display:inline-block;color:var(--ink);background:var(--yellow);padding:2px 14px;transform:rotate(-2deg);text-shadow:none;border-radius:6px;min-width:3ch}
.hero p.lead{font-size:clamp(17px,1.6vw,21px);max-width:520px;margin:24px 0 32px;font-weight:500;opacity:.96}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn-ghost{color:#fff;border-color:#fff}
.hero-stats{display:flex;gap:30px;margin-top:36px;flex-wrap:wrap}
.hero-stats div{font-size:13px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;opacity:.9}
.hero-stats b{display:block;font-family:var(--display);font-size:30px;letter-spacing:0;opacity:1;color:var(--yellow)}
.art{position:relative;aspect-ratio:1/1;max-width:540px;width:100%;justify-self:center}
.art .plate{position:absolute;inset:8%;border-radius:50%;background:var(--cream);box-shadow:0 0 0 14px rgba(255,255,255,.18),0 0 0 30px rgba(255,255,255,.08),0 30px 60px rgba(0,0,0,.35)}
.art .taco{position:absolute;inset:14% 6% 10% 6%;animation:bob 3.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px) rotate(-2deg)}}
.badge{position:absolute;top:-2%;right:-2%;width:30%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sticker{position:absolute;left:0;bottom:12%;background:var(--ink);color:var(--yellow);padding:12px 18px;border-radius:14px;transform:rotate(-8deg);font-family:var(--display);font-size:20px;box-shadow:4px 4px 0 var(--yellow)}
.sticker small{display:block;font-family:var(--body);font-size:11px;color:#fff;letter-spacing:.12em;font-weight:800}
.floaty{position:absolute;font-size:30px;animation:float 5s ease-in-out infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
@keyframes float{50%{transform:translateY(-18px) rotate(15deg)}}
.steam{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:0;animation:steam 3s ease-in-out infinite}
.steam:nth-child(2){animation-delay:1s}.steam:nth-child(3){animation-delay:2s}
@keyframes steam{0%{opacity:0;transform:translateY(20px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-30px)}}

/* MARQUEE */
.marquee{background:var(--ink);color:var(--yellow);overflow:hidden;border-top:4px solid var(--yellow);border-bottom:4px solid var(--yellow);transform:rotate(-1.2deg);margin:-14px -10px 0;position:relative;z-index:5}
.marquee .track{display:flex;width:max-content;animation:marq 28s linear infinite}
.marquee span{font-family:var(--display);font-size:26px;padding:14px 22px;white-space:nowrap;text-transform:uppercase}
.marquee span i{font-style:normal;color:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* SECTIONS */
section{padding:96px 0}
.eyebrow{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:12px}
.sec-title{font-size:clamp(38px,5.4vw,68px);text-transform:uppercase;margin-bottom:16px}
.sec-sub{font-size:18px;color:var(--muted);max-width:600px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:40px}

/* MENU */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:3px solid var(--ink);background:transparent;padding:9px 18px;border-radius:999px;font-weight:800;font-size:14px;transition:.15s}
.tab.on,.tab:hover{background:var(--ink);color:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:22px;display:flex;flex-direction:column;gap:10px;box-shadow:6px 6px 0 var(--ink);transition:transform .18s,box-shadow .18s;position:relative;animation:pop .35s both}
@keyframes pop{from{transform:scale(.94);opacity:.3}}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.card .ico{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;font-size:40px}
.card h3{font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15px;flex:1}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.price{font-family:var(--display);font-size:26px}
.heat{font-size:13px;letter-spacing:1px}
.add{width:46px;height:46px;border-radius:50%;border:none;background:var(--red);color:#fff;font-size:26px;font-weight:900;box-shadow:0 4px 0 var(--red-d);transition:.15s}
.add:hover{transform:scale(1.1) rotate(90deg)}
.tag{position:absolute;top:18px;right:18px;background:var(--yellow);border:2px solid var(--ink);font-size:11px;font-weight:900;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;transform:rotate(4deg)}

/* BUILDER */
.builder{background:var(--ink);color:var(--cream);position:relative;overflow:hidden}
.builder::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(var(--red) 0,transparent 65%);opacity:.35;right:-200px;top:-200px}
.builder .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.builder .sec-sub{color:#cbb9ae}
.preview{background:var(--cream);border-radius:30px;padding:24px;position:relative;box-shadow:0 0 0 8px var(--yellow)}
.preview .tname{font-family:var(--display);color:var(--ink);font-size:clamp(22px,2.6vw,32px);text-transform:uppercase;text-align:center;margin-top:6px}
.preview .tprice{text-align:center;color:var(--red);font-family:var(--display);font-size:20px}
.opt-group{margin-bottom:22px}
.opt-group h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:2px solid #5a4a42;background:transparent;color:var(--cream);padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;transition:.15s}
.chip:hover{border-color:var(--yellow)}
.chip.on{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--red);height:28px}
.heatlbl{display:flex;justify-content:space-between;font-weight:800;margin-top:4px}
.heatlbl b{color:var(--orange)}
.qty{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.step{display:flex;align-items:center;border:2px solid #5a4a42;border-radius:999px}
.step button{width:42px;height:42px;background:none;border:none;color:var(--cream);font-size:22px;font-weight:900}
.step span{min-width:30px;text-align:center;font-weight:800;font-size:18px}

/* SCHEDULE */
.sched{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start}
.days{display:flex;flex-direction:column;gap:10px}
.day{display:grid;grid-template-columns:70px 1fr auto;gap:16px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:14px 18px;transition:.15s}
.day .d{font-family:var(--display);font-size:20px;text-transform:uppercase}
.day .loc b{display:block;font-size:16px}
.day .loc small{color:var(--muted);font-size:13px}
.day .hrs{font-weight:800;font-size:14px;text-align:right;white-space:nowrap}
.day.today{background:var(--red);color:#fff;box-shadow:6px 6px 0 var(--ink);transform:translateX(-4px)}
.day.today .loc small{color:#ffe1dc}
.day.today .d::after{content:" ★";color:var(--yellow)}
.mapcard{background:var(--yellow);border:3px solid var(--ink);border-radius:24px;padding:26px;box-shadow:8px 8px 0 var(--ink);position:sticky;top:90px}
.mapcard h3{font-size:28px;text-transform:uppercase;margin-bottom:8px}
.map{height:220px;border-radius:16px;border:3px solid var(--ink);background:#f4e4c1;margin:16px 0;position:relative;overflow:hidden}
.map svg{width:100%;height:100%}
.pin{position:absolute;left:58%;top:42%;transform:translate(-50%,-100%);font-size:40px;animation:drop 1.4s ease-in-out infinite}
@keyframes drop{50%{transform:translate(-50%,-115%)}}
.count{font-family:var(--display);font-size:34px}

/* REVIEWS */
.reviews{background:var(--orange);position:relative}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:var(--cream);border:3px solid var(--ink);border-radius:22px;padding:26px;box-shadow:6px 6px 0 var(--ink)}
.rev:nth-child(2){transform:rotate(1.5deg)}
.rev:nth-child(1){transform:rotate(-1.2deg)}
.stars{color:var(--red);font-size:20px;letter-spacing:3px}
.rev p{font-size:17px;font-weight:600;margin:12px 0 16px}
.who{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--display)}

/* CTA */
.cta{background:var(--red);color:#fff;text-align:center;position:relative;overflow:hidden}
.cta h2{font-size:clamp(42px,7vw,96px);text-transform:uppercase;text-shadow:5px 5px 0 var(--ink)}
.cta p{font-size:19px;max-width:560px;margin:18px auto 30px}
.signup{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.signup input{flex:1;min-width:220px;padding:16px 22px;border-radius:999px;border:3px solid var(--ink);font-size:16px;font-weight:600;outline:none}
.signup input:focus{box-shadow:0 0 0 4px var(--yellow)}

footer{background:var(--ink);color:#cbb9ae;padding:50px 0 30px}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer h5{color:var(--yellow);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
footer a:hover{color:#fff}
.fine{text-align:center;font-size:13px;margin-top:30px;opacity:.6}

/* CART */
.cartbtn{position:fixed;right:22px;bottom:22px;z-index:60;width:66px;height:66px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);font-size:28px;box-shadow:4px 4px 0 var(--ink);transition:.2s}
.cartbtn:hover{transform:scale(1.07)}
.cartbtn .n{position:absolute;top:-6px;right:-6px;background:var(--red);color:#fff;font-size:13px;font-weight:900;min-width:26px;height:26px;border-radius:999px;display:grid;place-items:center;border:2px solid var(--ink)}
.cartbtn.bump{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.25) rotate(-10deg)}}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,100%);background:var(--cream);z-index:80;transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;border-left:4px solid var(--ink)}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;opacity:0;pointer-events:none;transition:.3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;background:var(--ink);color:var(--yellow)}
.drawer header h3{font-size:24px;text-transform:uppercase}
.drawer header button{background:none;border:none;color:#fff;font-size:28px}
.items{flex:1;overflow:auto;padding:16px 22px}
.item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:2px dashed #e2cfb8}
.item b{display:block;font-size:15px}
.item small{color:var(--muted)}
.item .ctl{display:flex;align-items:center;gap:6px}
.item .ctl button{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-weight:900}
.empty{text-align:center;color:var(--muted);padding:50px 10px;font-weight:600}
.empty div{font-size:60px}
.drawer footer{background:#fff;color:var(--ink);padding:20px 22px;border-top:3px solid var(--ink)}
.tot{display:flex;justify-content:space-between;font-family:var(--display);font-size:24px;margin-bottom:14px}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,150%);background:var(--ink);color:#fff;padding:14px 22px;border-radius:14px;z-index:90;font-weight:700;box-shadow:4px 4px 0 var(--yellow);transition:transform .35s cubic-bezier(.2,.9,.3,1.3);max-width:calc(100% - 40px);text-align:center}
.toast.show{transform:translate(-50%,0)}

@media (max-width:900px){
  .navlinks{display:none}
  .hero .wrap{grid-template-columns:1fr;padding-top:36px;min-height:0}
  .art{max-width:420px}
  .builder .wrap,.sched{grid-template-columns:1fr}
  .revgrid{grid-template-columns:1fr}
  .rev{transform:none!important}
  .mapcard{position:static}
  section{padding:70px 0}
}
@media (max-width:480px){
  .wrap{padding:0 16px}
  .day{grid-template-columns:52px 1fr;}
  .day .hrs{grid-column:2;text-align:left}
  .hero-stats{gap:18px}
  .logo{font-size:18px}
  .sticker{font-size:16px}
}
</style>
</head>
<body>

<nav>
  <div class="wrap">
    <a href="#top" class="logo"><div class="dot">🌮</div><span>KIMCHI <em>LOCO</em></span></a>
    <div class="navlinks">
      <a href="#menu">Menu</a><a href="#build">Build a Taco</a><a href="#find">Find Us</a><a href="#love">Love</a>
    </div>
    <a href="#find" class="btn btn-red nav-cta">📍 Find the Truck</a>
  </div>
</nav>

<header class="hero" id="top">
  <div class="wrap">
    <div>
      <div class="status"><span class="pulse" id="pulse"></span><span id="statusText">Checking where we're parked…</span></div>
      <h1>Seoul Food.<br><span class="y">Street</span> <span class="rotator" id="rot">Soul.</span></h1>
      <p class="lead">Smoky bulgogi, fire-kissed galbi and house-fermented kimchi, folded into hot tortillas and drowned in gochujang crema. Korean flavor, taco attitude, zero chill.</p>
      <div class="ctas">
        <a href="#menu" class="btn btn-yellow">🔥 See the Menu</a>
        <a href="#build" class="btn btn-ghost">Build Your Taco →</a>
      </div>
      <div class="hero-stats">
        <div><b>48hr</b>Marinated beef</div>
        <div><b>3 wk</b>Aged kimchi</div>
        <div><b>~6 min</b>Avg. wait</div>
      </div>
    </div>
    <div class="art">
      <div class="plate"></div>
      <div class="taco" id="heroTaco"></div>
      <svg class="badge" viewBox="0 0 200 200" aria-hidden="true">
        <defs><path id="circ" d="M100,100 m-72,0 a72,72 0 1,1 144,0 a72,72 0 1,1 -144,0"/></defs>
        <circle cx="100" cy="100" r="98" fill="#1c1412"/>
        <text font-family="Arial Black,Impact,sans-serif" font-size="21" fill="#ffd23f" letter-spacing="3"><textPath href="#circ">SEOUL × STREET • HOT OFF THE GRILL •</textPath></text>
        <text x="100" y="114" text-anchor="middle" font-size="42">🌶️</text>
      </svg>
      <div class="sticker"><small>TACOS FROM</small>$4.00</div>
      <div class="floaty" style="left:4%;top:10%">🌶️</div>
      <div class="floaty" style="right:8%;bottom:6%;animation-delay:1.5s">🥬</div>
      <div class="floaty" style="left:40%;top:-2%;animation-delay:.8s;font-size:24px">🧄</div>
    </div>
  </div>
</header>

<div class="marquee"><div class="track" id="marq"></div></div>

<section id="menu">
  <div class="wrap">
    <div class="head">
      <div>
        <span class="eyebrow">The Menu</span>
        <h2 class="sec-title">Dangerously<br>Snackable</h2>
        <p class="sec-sub">Everything grilled to order on our flat-top. Tap <b>+</b> to pre-order and skip the line.</p>
      </div>
      <div class="tabs" id="tabs"></div>
    </div>
    <div class="grid" id="grid"></div>
  </div>
</section>

<section class="builder" id="build">
  <div class="wrap">
    <div>
      <span class="eyebrow" style="color:var(--yellow)">Taco Lab</span>
      <h2 class="sec-title">Build Your<br>Own Chaos</h2>
      <p class="sec-sub" style="margin-bottom:30px">Pick your protein, pile it high, choose your heat. We'll name it, you'll crave it.</p>
      <div class="opt-group"><h4>1 · Protein</h4><div class="chips" data-k="protein"></div></div>
      <div class="opt-group"><h4>2 · Sauce</h4><div class="chips" data-k="sauce"></div></div>
      <div class="opt-group"><h4>3 · Toppings <span style="opacity:.6">(+$0.50)</span></h4><div class="chips" data-k="tops" data-multi="1"></div></div>
      <div class="opt-group"><h4>4 · Heat level</h4>
        <input type="range" min="0" max="4" value="2" id="heat" aria-label="Heat level">
        <div class="heatlbl"><span>😇 Mild</span><b id="heatName">Seoul on Fire</b><span>💀 Loco</span></div>
      </div>
      <div class="qty">
        <div class="step"><button id="qm" aria-label="less">−</button><span id="qn">2</span><button id="qp" aria-label="more">+</button></div>
        <button class="btn btn-red" id="addCustom">Add to Order</button>
      </div>
    </div>
    <div class="preview">
      <div id="buildTaco"></div>
      <div class="tname" id="tname">The Loco Bulgogi</div>
      <div class="tprice" id="tprice">$4.50 each</div>
    </div>
  </div>
</section>

<section id="find">
  <div class="wrap">
    <span class="eyebrow">Where's the Truck?</span>
    <h2 class="sec-title">Chase the Smoke</h2>
    <p class="sec-sub" style="margin-bottom:36px">Same spots every week. Follow the smell of charred sugar and garlic — or just check here.</p>
    <div class="sched">
      <div class="days" id="days"></div>
      <div class="mapcard">
        <span class="eyebrow" style="color:var(--ink)" id="mapEyebrow">Right Now</span>
        <h3 id="mapTitle">—</h3>
        <div id="mapSub" style="font-weight:700"></div>
        <div class="map">
          <svg viewBox="0 0 300 220" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
            <rect width="300" height="220" fill="#f4e4c1"/>
            <path d="M0 160 C80 140 120 190 300 150 L300 220 L0 220Z" fill="#9fd3e6"/>
            <rect x="20" y="20" width="70" height="50" rx="6" fill="#bfe3a5"/>
            <rect x="210" y="30" width="70" height="40" rx="6" fill="#bfe3a5"/>
            <g stroke="#fff" stroke-width="12" fill="none"><path d="M0 95 H300"/><path d="M150 0 V220"/><path d="M0 30 L300 130"/></g>
            <g stroke="#e8c98f" stroke-width="2" stroke-dasharray="6 6" fill="none"><path d="M0 95 H300"/><path d="M150 0 V220"/></g>
            <circle cx="174" cy="92" r="26" fill="#e8352b" opacity=".2"><animate attributeName="r" values="10;36;10" dur="2s" repeatCount="indefinite"/></circle>
          </svg>
          <div class="pin">📍</div>
        </div>
        <div style="font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase" id="countLbl">Closes in</div>
        <div class="count" id="count">--:--:--</div>
      </div>
    </div>
  </div>
</section>

<section class="reviews" id="love">
  <div class="wrap">
    <span class="eyebrow" style="color:var(--ink)">The Word on the Street</span>
    <h2 class="sec-title" style="margin-bottom:40px">People Are<br>Losing It</h2>
    <div class="revgrid">
      <div class="rev"><div class="stars">★★★★★</div><p>"I followed this truck across three neighborhoods. The galbi taco made me call my mom and apologize for things."</p><div class="who"><div class="av" style="background:#e8352b">J</div>Jenna R. · Regular since day 1</div></div>
      <div class="rev"><div class="stars">★★★★★</div><p>"Kimchi fries at midnight is a lifestyle now. Crispy, cheesy, funky, spicy. Ten out of ten, would wait in the rain."</p><div class="who"><div class="av" style="background:#1c1412">M</div>Marcus T. · Night-market goblin</div></div>
      <div class="rev"><div class="stars">★★★★★</div><p>"As a Korean grandma's grandson I came in skeptical. Left with two orders and a deep respect for that kimchi."</p><div class="who"><div class="av" style="background:#5fb84a">D</div>Daniel K. · Professional skeptic</div></div>
    </div>
  </div>
</section>

<section class="cta">
  <div class="wrap">
    <h2>Never Miss<br>The Truck</h2>
    <p>Get our location the second we park, plus secret-menu drops and a free taco on your birthday.</p>
    <form class="signup" id="signup">
      <input type="email" required placeholder="your@email.com" aria-label="Email">
      <button class="btn btn-yellow" type="submit">I'm In 🌮</button>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div>
      <div class="logo" style="color:#fff;margin-bottom:12px"><div class="dot">🌮</div><span>KIMCHI <em>LOCO</em></span></div>
      <div style="max-width:280px">Korean tacos. Street prices. Unreasonable amounts of flavor.</div>
    </div>
    <div><h5>Catering</h5><a href="#top">Weddings, offices & parties</a><br><a href="#top">book@kimchiloco.com</a></div>
    <div><h5>Follow</h5><a href="#top">Instagram @kimchiloco</a><br><a href="#top">TikTok @kimchiloco</a></div>
  </div>
  <div class="fine">© 2025 Kimchi Loco Food Truck · Made with gochujang & love</div>
</footer>

<button class="cartbtn" id="cartBtn" aria-label="Open order">🛍️<span class="n" id="cartN">0</span></button>
<div class="scrim" id="scrim"></div>
<aside class="drawer" id="drawer">
  <header><h3>Your Order</h3><button id="closeCart" aria-label="close">×</button></header>
  <div class="items" id="items"></div>
  <footer>
    <div class="tot"><span>Total</span><span id="total">$0.00</span></div>
    <button class="btn btn-red" style="width:100%;justify-content:center" id="checkout">Pre-order for Pickup</button>
  </footer>
</aside>
<div class="toast" id="toast"></div>

<script>
// ---------- TACO SVG ----------
function rng(seed){return function(){seed=(seed*9301+49297)%233280;return seed/233280;}}
const PROTEINS={bulgogi:{n:"Bulgogi Beef",c:"#7a3b1d",p:1},pork:{n:"Spicy Pork",c:"#b8401f",p:1},chicken:{n:"Gochujang Chicken",c:"#d9822b",p:.5},tofu:{n:"Crispy Tofu",c:"#eccb7c",p:.5},galbi:{n:"Galbi Short Rib",c:"#4f2412",p:2}};
const SAUCES={gochu:{n:"Gochujang Crema",c:"#ff7a3d"},yuzu:{n:"Yuzu Aioli",c:"#f6e27a"},soy:{n:"Sesame Soy Glaze",c:"#3a1f0e"},ssam:{n:"Ssamjang Ranch",c:"#f3efe2"}};
const TOPS={kimchi:"Kimchi",slaw:"Purple Slaw",cilantro:"Cilantro",sesame:"Sesame",scallion:"Scallion",cheese:"Cheese"};
function tacoSVG(o,id){
  const r=rng(7);let s='';
  // back lettuce / slaw
  if(o.tops.includes('slaw')){
    let d='M52,140 ';for(let x=52;x<=348;x+=18){d+=`Q${x+9},${92+r()*14} ${x+18},${112+r()*8} `}d+='L348,150 L52,150Z';
    s+=`<path d="${d}" fill="#8e44ad"/><path d="${d.replace(/(\d+\.?\d*),(\d+\.?\d*)/g,(m,a,b)=>a+','+(+b+10))}" fill="#7dc855"/>`;
  }else{
    let d='M52,140 ';for(let x=52;x<=348;x+=18){d+=`Q${x+9},${104+r()*10} ${x+18},${118+r()*6} `}d+='L348,150 L52,150Z';
    s+=`<path d="${d}" fill="#7dc855"/>`;
  }
  // protein
  const pc=PROTEINS[o.protein].c;
  for(let i=0;i<11;i++){const cx=70+i*26+r()*8,cy=118+r()*10-Math.sin(i/10*Math.PI)*14;
    s+=`<ellipse cx="${cx}" cy="${cy}" rx="${20+r()*6}" ry="${13+r()*4}" fill="${pc}" stroke="rgba(0,0,0,.25)" stroke-width="2"/>`;
    s+=`<ellipse cx="${cx-5}" cy="${cy-4}" rx="5" ry="2.5" fill="rgba(255,255,255,.25)"/>`;}
  if(o.tops.includes('cheese')){for(let i=0;i<14;i++){const x=70+r()*260,y=100+r()*20;s+=`<rect x="${x}" y="${y}" width="22" height="5" rx="2.5" fill="#ffcc33" transform="rotate(${r()*60-30} ${x} ${y})"/>`}}
  if(o.tops.includes('kimchi')){for(let i=0;i<12;i++){const x=70+r()*260,y=94+r()*22;s+=`<path d="M${x},${y} q10,-10 22,-2 q-4,10 -22,2z" fill="#e8352b" stroke="#a8160f" stroke-width="1.5" transform="rotate(${r()*80-40} ${x} ${y})"/>`}}
  // sauce drizzle
  let z='M66,108 ';for(let x=66;x<330;x+=22){z+=`Q${x+11},${82+r()*10} ${x+22},${110+r()*8} `}
  s+=`<path d="${z}" fill="none" stroke="${SAUCES[o.sauce].c}" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"/>`;
  if(o.tops.includes('cilantro')){for(let i=0;i<10;i++){const x=72+r()*250,y=88+r()*22;s+=`<g transform="translate(${x} ${y}) rotate(${r()*360})"><ellipse rx="7" ry="4" fill="#2f9e44"/><ellipse cx="7" cy="4" rx="6" ry="3.5" fill="#37b24d"/></g>`}}
  if(o.tops.includes('scallion')){for(let i=0;i<9;i++){const x=75+r()*250,y=88+r()*24;s+=`<circle cx="${x}" cy="${y}" r="5" fill="none" stroke="#8ce99a" stroke-width="3"/>`}}
  // chili flakes by heat
  for(let i=0;i<o.heat*9;i++){const x=70+r()*260,y=86+r()*30;s+=`<rect x="${x}" y="${y}" width="5" height="3" fill="#c0110a" transform="rotate(${r()*90} ${x} ${y})"/>`}
  if(o.tops.includes('sesame')){for(let i=0;i<26;i++){const x=70+r()*260,y=86+r()*30;s+=`<ellipse cx="${x}" cy="${y}" rx="2.6" ry="1.4" fill="#fff8e1" transform="rotate(${r()*180} ${x} ${y})"/>`}}
  // shell
  const shell=`<path d="M28,128 A172,150 0 0 0 372,128 L344,128 A144,124 0 0 1 56,128 Z" fill="url(#sh${id})" stroke="#b97a1f" stroke-width="4" stroke-linejoin="round"/>`;
  let spots='';for(let i=0;i<22;i++){const a=Math.PI*(0.08+r()*0.84),rr=152+r()*14;spots+=`<circle cx="${200-Math.cos(a)*rr*1.12}" cy="${128+Math.sin(a)*rr*.92}" r="${2+r()*3}" fill="#b5771c" opacity=".55"/>`}
  const steam=o.steam?`<g><path class="steam" d="M150 70 q-14 -20 0 -40 q14 -20 0 -40"/><path class="steam" d="M200 66 q-14 -20 0 -40 q14 -20 0 -40"/><path class="steam" d="M250 70 q-14 -20 0 -40 q14 -20 0 -40"/></g>`:'';
  return `<svg viewBox="0 -20 400 320" width="100%" height="100%" role="img" aria-label="Taco illustration">
    <defs><linearGradient id="sh${id}" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#ffd77a"/><stop offset="1" stop-color="#e9a83b"/></linearGradient></defs>
    <ellipse cx="200" cy="288" rx="150" ry="12" fill="rgba(0,0,0,.15)"/>
    ${steam}${s}${shell}${spots}</svg>`;
}
document.getElementById('heroTaco').innerHTML=tacoSVG({protein:'galbi',sauce:'gochu',tops:['kimchi','slaw','cilantro','sesame','scallion'],heat:2,steam:true},'h');

// rotator
const words=["Soul.","Heat.","Loco.","Funk.","Crunch."];let wi=0;
setInterval(()=>{wi=(wi+1)%words.length;document.getElementById('rot').textContent=words[wi]},1800);

// marquee
const mq="BULGOGI <i>✦</i> GALBI <i>✦</i> KIMCHI FRIES <i>✦</i> GOCHUJANG <i>✦</i> LATE NIGHT <i>✦</i> EXTRA SPICY <i>✦</i> ";
document.getElementById('marq').innerHTML=`<span>${mq}</span><span>${mq}</span><span>${mq}</span><span>${mq}</span>`;

// ---------- MENU ----------
const MENU=[
 {c:"Tacos",n:"Galbi Short Rib",d:"Sweet-soy short rib charred hard, kimchi, scallion, sesame, gochujang crema.",p:5.5,h:2,e:"🥩",bg:"#ffe0d6",t:"Best seller"},
 {c:"Tacos",n:"Bulgogi Beef",d:"48-hour marinated ribeye, purple slaw, cilantro, sesame soy glaze.",p:4.5,h:1,e:"🌮",bg:"#fff0c2"},
 {c:"Tacos",n:"Spicy Pork Jeyuk",d:"Gochujang pork shoulder, pickled onion, kimchi, lime crema.",p:4.5,h:3,e:"🐖",bg:"#ffd6d1",t:"Spicy"},
 {c:"Tacos",n:"Gochujang Chicken",d:"Crispy thighs in sticky gochujang glaze, yuzu aioli, crunchy slaw.",p:4,h:2,e:"🍗",bg:"#ffe6c4"},
 {c:"Tacos",n:"Crispy Tofu",d:"Twice-fried tofu, ssamjang ranch, cucumber kimchi, peanuts.",p:4,h:1,e:"🌱",bg:"#dff5d3",t:"Vegan"},
 {c:"Burritos",n:"Kimchi Fried Rice Burrito",d:"Bulgogi, kimchi fried rice, fried egg, cheese, all wrapped & seared.",p:12,h:2,e:"🌯",bg:"#fff0c2",t:"Huge"},
 {c:"Burritos",n:"Loco Bowl",d:"Rice, any protein, kimchi, slaw, jammy egg, crispy shallots.",p:13,h:2,e:"🍚",bg:"#e3f0ff"},
 {c:"Sides",n:"Kimchi Fries",d:"Crispy fries, caramelized kimchi, bulgogi, melted cheese, spicy mayo.",p:8,h:2,e:"🍟",bg:"#ffe6c4",t:"Cult fave"},
 {c:"Sides",n:"Kimchi Quesadilla",d:"Gooey cheese, buttery kimchi, griddled crisp. Comes with dip.",p:9,h:1,e:"🧀",bg:"#fff6b8"},
 {c:"Sides",n:"Corn Cheese Cup",d:"Sweet corn, mozzarella, mayo, torched till it bubbles.",p:6,h:0,e:"🌽",bg:"#fff0c2"},
 {c:"Drinks",n:"Yuzu Lemonade",d:"Fresh-squeezed, bright, fizzy. Puts out the fire.",p:4,h:0,e:"🍋",bg:"#fbffc9"},
 {c:"Drinks",n:"Melona Horchata",d:"Rice horchata meets honeydew melon bar. Trust us.",p:5,h:0,e:"🍈",bg:"#dff5d3"},
];
const cats=["All","Tacos","Burritos","Sides","Drinks"];let curCat="All";
const tabs=document.getElementById('tabs'),grid=document.getElementById('grid');
function renderTabs(){tabs.innerHTML=cats.map(c=>`<button class="tab ${c===curCat?'on':''}" data-c="${c}">${c}</button>`).join('')}
function renderMenu(){
  grid.innerHTML=MENU.filter(m=>curCat==="All"||m.c===curCat).map(m=>{const i=MENU.indexOf(m);return `
  <div class="card">${m.t?`<span class="tag">${m.t}</span>`:''}
   <div class="ico" style="background:${m.bg}">${m.e}</div>
   <h3>${m.n}</h3><p>${m.d}</p>
   <div class="heat">${m.h?'🌶️'.repeat(m.h)+'<span style="opacity:.25">'+'🌶️'.repeat(3-Math.min(m.h,3))+'</span>':'<span style="color:var(--muted);font-weight:700">No heat</span>'}</div>
   <div class="row"><span class="price">$${m.p.toFixed(2)}</span><button class="add" data-i="${i}" aria-label="Add ${m.n}">+</button></div>
  </div>`}).join('');
}
tabs.addEventListener('click',e=>{const b=e.target.closest('.tab');if(!b)return;curCat=b.dataset.c;renderTabs();renderMenu()});
grid.addEventListener('click',e=>{const b=e.target.closest('.add');if(!b)return;const m=MENU[b.dataset.i];addToCart(m.n,m.p,1)});
renderTabs();renderMenu();

// ---------- BUILDER ----------
const st={protein:'bulgogi',sauce:'gochu',tops:['kimchi','cilantro','sesame'],heat:2,qty:2};
const HEATS=["Mild Mannered","Warm Hug","Seoul on Fire","Call Your Mom","Certified LOCO"];
const chipData={protein:PROTEINS,sauce:SAUCES,tops:TOPS};
document.querySelectorAll('.chips').forEach(el=>{
  const k=el.dataset.k,data=chipData[k];
  el.innerHTML=Object.keys(data).map(key=>`<button class="chip" data-v="${key}">${typeof data[key]==='string'?data[key]:data[key].n}${k==='protein'&&data[key].p>1?' +$'+(data[key].p-1).toFixed(2):''}</button>`).join('');
  el.addEventListener('click',e=>{const b=e.target.closest('.chip');if(!b)return;const v=b.dataset.v;
    if(el.dataset.multi){const i=st.tops.indexOf(v);i>-1?st.tops.splice(i,1):st.tops.push(v)}else st[k]=v;
    updBuilder()});
});
function unitPrice(){return 3+PROTEINS[st.protein].p+st.tops.length*.5}
function tacoName(){const p=PROTEINS[st.protein].n.split(' ')[0];const pre=["The Gentle","The Cozy","The Loco","The Volcanic","The Absolutely Unhinged"][st.heat];return `${pre} ${p}`}
function updBuilder(){
  document.querySelectorAll('.chips').forEach(el=>{const k=el.dataset.k;el.querySelectorAll('.chip').forEach(b=>{const v=b.dataset.v;b.classList.toggle('on',k==='tops'?st.tops.includes(v):st[k]===v)})});
  document.getElementById('buildTaco').innerHTML=tacoSVG({...st,steam:false},'b');
  document.getElementById('heatName').textContent=HEATS[st.heat];
  document.getElementById('tname').textContent=tacoName();
  document.getElementById('tprice').textContent=`$${unitPrice().toFixed(2)} each · ${st.qty} = $${(unitPrice()*st.qty).toFixed(2)}`;
  document.getElementById('qn').textContent=st.qty;
}
document.getElementById('heat').addEventListener('input',e=>{st.heat=+e.target.value;updBuilder()});
document.getElementById('qm').onclick=()=>{st.qty=Math.max(1,st.qty-1);updBuilder()};
document.getElementById('qp').onclick=()=>{st.qty=Math.min(20,st.qty+1);updBuilder()};
document.getElementById('addCustom').onclick=()=>addToCart(tacoName()+" Taco",unitPrice(),st.qty);
updBuilder();

// ---------- SCHEDULE ----------
const SCHED=[ // index = JS day
 {d:"Sun",loc:"Elm Park Brunch Market",sub:"Near the fountain",o:11,c:17},
 {d:"Mon",loc:"Hop Yard Brewery",sub:"1420 Foundry St",o:17,c:22},
 {d:"Tue",loc:"Tech Park Plaza",sub:"Lunch rush, Bldg C",o:11,c:15},
 {d:"Wed",loc:"Riverside Night Market",sub:"Pier 9, by the lights",o:17,c:23},
 {d:"Thu",loc:"Downtown Civic Square",sub:"5th & Main",o:11,c:15},
 {d:"Fri",loc:"Arts District Late Night",sub:"Outside The Neon Room",o:18,c:26},
 {d:"Sat",loc:"Saturday Farmers Market",sub:"Union Lot, Stall 22",o:10,c:16},
];
const order=[1,2,3,4,5,6,0];
function fmtH(h){h=h%24;const ap=h>=12?'pm':'am';const hh=h%12||12;return hh+ap}
function renderDays(){const today=new Date().getDay();
  document.getElementById('days').innerHTML=order.map(i=>{const s=SCHED[i];return `<div class="day ${i===today?'today':''}"><div class="d">${s.d}</div><div class="loc"><b>${s.loc}</b><small>${s.sub}</small></div><div class="hrs">${fmtH(s.o)} – ${fmtH(s.c)}</div></div>`}).join('')}
renderDays();
function findStatus(){
  const now=new Date();
  // check today and yesterday (for late night past midnight)
  for(const back of [0,1]){
    const day=new Date(now);day.setDate(now.getDate()-back);const s=SCHED[day.getDay()];
    const open=new Date(day);open.setHours(s.o,0,0,0);const close=new Date(day);close.setHours(0,0,0,0);close.setTime(close.getTime()+s.c*3600000);
    if(now>=open&&now<close)return{open:true,s,t:close};
  }
  for(let k=0;k<8;k++){const day=new Date(now);day.setDate(now.getDate()+k);const s=SCHED[day.getDay()];const open=new Date(day);open.setHours(s.o,0,0,0);if(open>now)return{open:false,s,t:open}}
}
function tick(){
  const r=findStatus(),now=new Date();let ms=r.t-now;if(ms<0)ms=0;
  const h=Math.floor(ms/3600000),m=Math.floor(ms%3600000/60000),sec=Math.floor(ms%60000/1000);
  const pad=n=>String(n).padStart(2,'0');
  document.getElementById('count').textContent=`${pad(h)}:${pad(m)}:${pad(sec)}`;
  document.getElementById('pulse').classList.toggle('closed',!r.open);
  if(r.open){
    document.getElementById('statusText').innerHTML=`Open now · <b style="color:var(--yellow)">${r.s.loc}</b> till ${fmtH(r.s.c)}`;
    document.getElementById('mapEyebrow').textContent="Grilling right now";
    document.getElementById('countLbl').textContent="Grill shuts off in";
  }else{
    document.getElementById('statusText').innerHTML=`Next stop · <b style="color:var(--yellow)">${r.s.loc}</b> · ${r.s.d} ${fmtH(r.s.o)}`;
    document.getElementById('mapEyebrow').textContent="Next stop";
    document.getElementById('countLbl').textContent="Fires up in";
  }
  document.getElementById('mapTitle').textContent=r.s.loc;
  document.getElementById('mapSub').textContent=`${r.s.sub} · ${r.s.d} ${fmtH(r.s.o)} – ${fmtH(r.s.c)}`;
}
tick();setInterval(tick,1000);

// ---------- CART ----------
const cart=[];
const $=id=>document.getElementById(id);
function addToCart(name,price,qty){
  const ex=cart.find(c=>c.name===name&&c.price===price);ex?ex.qty+=qty:cart.push({name,price,qty});
  renderCart();const b=$('cartBtn');b.classList.remove('bump');void b.offsetWidth;b.classList.add('bump');
  toast(`🔥 ${qty>1?qty+'× ':''}${name} added!`);
}
function renderCart(){
  const n=cart.reduce((a,c)=>a+c.qty,0),t=cart.reduce((a,c)=>a+c.qty*c.price,0);
  $('cartN').textContent=n;$('total').textContent='$'+t.toFixed(2);
  $('items').innerHTML=cart.length?cart.map((c,i)=>`<div class="item"><div><b>${c.name}</b><small>$${c.price.toFixed(2)} each</small></div><div class="ctl"><button data-i="${i}" data-d="-1">−</button><b>${c.qty}</b><button data-i="${i}" data-d="1">+</button></div></div>`).join(''):`<div class="empty"><div>🌮</div>Your order is empty.<br>That's a tragedy. Fix it.</div>`;
}
$('items').addEventListener('click',e=>{const b=e.target.closest('button');if(!b)return;const c=cart[b.dataset.i];c.qty+=+b.dataset.d;if(c.qty<=0)cart.splice(b.dataset.i,1);renderCart()});
function openCart(o){$('drawer').classList.toggle('open',o);$('scrim').classList.toggle('open',o)}
$('cartBtn').onclick=()=>openCart(true);$('closeCart').onclick=()=>openCart(false);$('scrim').onclick=()=>openCart(false);
$('checkout').onclick=()=>{if(!cart.length){toast("Add some tacos first 👀");return}
  const num=Math.floor(100+Math.random()*900);cart.length=0;renderCart();openCart(false);
  toast(`✅ Order #${num} placed! Ready in ~8 min — say "Loco!" at the window.`)};
renderCart();

let tt;function toast(m){const t=$('toast');t.textContent=m;t.classList.add('show');clearTimeout(tt);tt=setTimeout(()=>t.classList.remove('show'),2600)}
$('signup').addEventListener('submit',e=>{e.preventDefault();e.target.innerHTML='<div style="font-family:var(--display);font-size:26px;background:var(--ink);color:var(--yellow);padding:18px 26px;border-radius:999px">🎉 You\'re on the list. Free birthday taco unlocked.</div>'});
</script>
</body>
</html>
Reasoning trace (3,477 tokens)
I'm planning a self-contained website for the Kimchi Loco taco truck, with an energetic, appetizing look built from CSS and SVG instead of images. I'm thinking through the sections: an animated SVG taco hero, the menu, a "where's the truck today" schedule, maybe an interactive taco builder, reviews, and a call to action. I'm also settling on a gochujang red and a kimchi-tinged palette.

I'm moving into the palette and type choices, then laying out the page sections in order: a nav with a "Find the Truck" button, a hero with the animated taco and live open status, a marquee ticker, a filterable menu with spice indicators, a taco builder, the weekly schedule, reviews, a catering signup, and a footer. I'm also keeping the page from scrolling sideways.

Writing SVG taco code...

Still working out the taco's silhouette, sketching the shell as a crescent with a curved bottom and an open top edge.

Still working out the taco's silhouette and how the fillings sit against the shell.

I'm working through the menu pricing now: tacos around $4 to $5.50, burritos and bowls at $12 to $13, sides from $6 to $9, and drinks from $3 to $5. For the builder, I'm weighing whether the base taco should carry a price of its own, with protein added on top.

Now I'm adding a spinning circular badge to the hero, with "SINCE 2025" text running around it on a path. I'm also keeping the cart simple: a floating button with a count, a drawer with the items and total, and a "Place order" step that shows a pickup-time toast.

Now I'm setting the open-now logic aside for a moment and lining up the weekly schedule, deciding whether every day should count as a possible open window so the "open now" status isn't always false.

Next I'm setting up the schedule data, with each day's location and hours, and the "open now" check that falls back to a countdown to the next stop. Then the hero will pair text on the left with the taco art on the right, using a circular backdrop and a price sticker, and stacking on mobile. The builder will reuse one taco drawing function, with toggles for protein, slaw, sauce, and toppings.

Still building out the taco's filling layers, with the lettuce or slaw, protein, kimchi, sauce, and toppings each placed along the top of the shell.

Still writing SVG taco code...

Still writing SVG taco code...

Now I'm defining the menu items and the cart: each item carries a name, price, and quantity, with a drawer on the right and a floating button in the bottom corner. I'm also planning three review cards with star ratings, and I've decided against scroll-reveal animations so the content stays visible from the start.

Next I'm adding a marquee strip, with its content duplicated so it scrolls in a loop, and a spinning circular badge with text set along a path.