Models 44

DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean
Open in new window

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

How it went

Total time
2 min 9 s
Cost
$0.019
Output tokens
38,948
Spent thinking
25,425 tokens
Speed
303.5 tok/s
Console errors
0
First token after
354 ms
First visible text after
1 min 30 s
Prompt tokens
389
Code size
37.1 KB
Finish reason
stop
Served by
Ionstream
Model id
deepseek/deepseek-v4.1-flash-1017
Reasoning sent
{"effort":"high"}
Max output
64,000 tokens
Generated
Nov 11, 2026

What it was asked

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

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

Code run-1.html · 801 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Kimchi Loco — Korean Taco Truck · Seoul × SoCal</title>
<style>
*,*::before,*::after{box-sizing:border-box}
:root{
  --display:'Arial Black','Arial Bold','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cream:#FFF4E4;
  --muted:#B6A497;
  --line:rgba(255,244,228,.13);
  --gochu:#E4341B;
  --chili:#FF6A1F;
  --lime:#C9F04A;
  --amber:#FFB347;
  --ink:#120d0b;
  --panel:#1a1310;
}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,5vw,64px)}
section[id]{scroll-margin-top:80px}

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:18px;
  padding:13px clamp(16px,4vw,44px);
  background:rgba(18,13,11,.6);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,244,228,.08);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;
  letter-spacing:-.02em;font-size:17px;text-transform:uppercase;white-space:nowrap}
.brand .chili{width:24px;height:24px;flex:none;filter:drop-shadow(0 2px 8px rgba(228,52,27,.7))}
.brand b{color:var(--lime)}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:12px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lime);transition:width .3s}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{width:100%}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;
  background:var(--lime);color:#12100b;
  font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .2s,box-shadow .25s,background .25s,color .25s,border-color .25s;
  box-shadow:0 12px 30px -12px rgba(201,240,74,.85);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(201,240,74,.95)}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(255,244,228,.28);box-shadow:none}
.btn.ghost:hover{border-color:var(--cream);background:rgba(255,244,228,.07)}
.btn.sm{padding:10px 18px;font-size:11px}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:118px clamp(16px,5vw,64px) 64px;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 76% 32%,rgba(228,52,27,.34),transparent 62%),
    radial-gradient(760px 520px at 12% 84%,rgba(255,106,31,.17),transparent 66%),
    radial-gradient(640px 420px at 50% -4%,rgba(201,240,74,.08),transparent 70%);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,244,228,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,244,228,.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 74%);
  mask-image:radial-gradient(circle at 50% 42%,#000 0%,transparent 74%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(20px,4vw,60px);align-items:center;
}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.13s}
.hero-copy>*:nth-child(3){animation-delay:.21s}
.hero-copy>*:nth-child(4){animation-delay:.29s}
.hero-copy>*:nth-child(5){animation-delay:.37s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(255,244,228,.18);background:rgba(255,244,228,.05);
  font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#E9D9C9}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:ping 1.9s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,240,74,.6)}70%{box-shadow:0 0 0 9px rgba(201,240,74,0)}100%{box-shadow:0 0 0 0 rgba(201,240,74,0)}}

.hero h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(52px,9.4vw,140px);line-height:.84;letter-spacing:-.045em;
  text-transform:uppercase;margin:18px 0 0;
}
.hero h1 .loco{
  display:inline-block;
  background:linear-gradient(100deg,#FFC24B 0%,#FF6A1F 34%,#E4341B 66%,#A3140A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 14px 34px rgba(228,52,27,.5));
}
.lede{margin:22px 0 0;max-width:520px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;color:#D9C8B8}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-stats{display:flex;gap:clamp(22px,3vw,40px);margin:32px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.hero-stats li{display:flex;flex-direction:column;gap:3px}
.hero-stats b{font-family:var(--display);font-size:23px;letter-spacing:-.02em;color:var(--cream)}
.hero-stats span{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}

/* hero art */
.hero-art{position:relative;display:grid;place-items:center;min-height:min(560px,68vw);animation:rise 1.1s .18s cubic-bezier(.2,.7,.2,1) backwards}
.glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,106,31,.5),rgba(228,52,27,.16) 46%,transparent 70%);
  filter:blur(26px);animation:pulse 6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.08);opacity:1}}
.taco-hero{width:min(540px,92%);height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 44px 54px rgba(0,0,0,.62));
  animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-16px) rotate(2.5deg)}}

.steam{position:absolute;top:2%;width:22px;height:104px;border-radius:50%;z-index:1;
  background:linear-gradient(to top,rgba(255,244,228,0),rgba(255,244,228,.55));
  filter:blur(10px);opacity:0;animation:steam 4.6s ease-in-out infinite}
.steam.s1{left:36%;animation-delay:0s}
.steam.s2{left:50%;animation-delay:1.1s}
.steam.s3{left:64%;animation-delay:2.2s}
@keyframes steam{
  0%{opacity:0;transform:translateY(30px) scaleX(.7) scaleY(.7)}
  22%{opacity:.6}
  100%{opacity:0;transform:translateY(-110px) scaleX(1.7) scaleY(1.25)}
}

.badge-wrap{position:absolute;right:-2%;top:0;z-index:4;width:126px;height:126px;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
.badge-rotate{width:100%;height:100%;animation:spin 24s linear infinite}
.badge-rotate text{font-family:var(--display);font-size:11.5px;font-weight:900;
  letter-spacing:2.2px;fill:var(--lime);text-transform:uppercase}
@keyframes spin{to{transform:rotate(360deg)}}

.sticker{
  position:absolute;left:0;bottom:8%;z-index:4;transform:rotate(-8deg);
  background:#1c1512;border:1px solid rgba(201,240,74,.5);color:var(--lime);
  padding:9px 15px;border-radius:10px;font-family:var(--display);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 0 22px rgba(201,240,74,.08);
}

/* ---------- MARQUEE ---------- */
.marquee-wrap{overflow:hidden;padding:16px 0;position:relative;z-index:3}
.marquee{background:var(--lime);color:#120d0b;transform:rotate(-1.8deg);
  width:112vw;margin-left:-6vw;padding:12px 0;border-top:3px solid #120d0b;border-bottom:3px solid #120d0b}
.marquee-track{display:flex;width:max-content;animation:scrollx 30s linear infinite}
.mgroup{display:flex;align-items:center;flex:0 0 auto}
.mgroup span,.mgroup b{font-family:var(--display);font-size:clamp(15px,2.1vw,25px);
  text-transform:uppercase;letter-spacing:-.01em;padding:0 16px;white-space:nowrap}
.mgroup b{color:rgba(18,13,11,.35);font-size:clamp(12px,1.5vw,18px)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECTIONS ---------- */
.section{padding:clamp(70px,9vw,124px) 0;position:relative}
.menu{background:linear-gradient(180deg,#120d0b,#1b120e 42%,#120d0b)}
.section-head{max-width:720px;margin-bottom:clamp(30px,4vw,48px)}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.3em;
  text-transform:uppercase;color:var(--chili);margin-bottom:14px}
h2{font-family:var(--display);font-size:clamp(32px,5vw,66px);line-height:.95;
  letter-spacing:-.035em;text-transform:uppercase;margin:0}
h2 em{font-style:normal;color:var(--lime)}
.section-head p{margin:16px 0 0;color:#C7B5A6;font-size:15px;line-height:1.6;max-width:520px}

/* ---------- MENU CARDS ---------- */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{
  position:relative;overflow:hidden;border-radius:22px;
  background:linear-gradient(180deg,#1e1613,#15100e);
  border:1px solid var(--line);
  transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .38s,box-shadow .38s;
}
.card:hover{transform:translateY(-8px);border-color:rgba(255,106,31,.55);
  box-shadow:0 34px 60px -26px rgba(228,52,27,.55)}
.card-art{position:relative;aspect-ratio:16/11;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 118%,rgba(255,106,31,.34),transparent 64%)}
.card-art svg{width:76%;height:auto;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));
  transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-art svg{transform:rotate(-6deg) scale(1.07)}
.tag{position:absolute;top:12px;left:12px;font-size:9.5px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  background:rgba(201,240,74,.14);color:var(--lime);border:1px solid rgba(201,240,74,.4)}
.tag.hot{background:rgba(228,52,27,.18);color:#FF8A6A;border-color:rgba(228,52,27,.5)}
.card-body{padding:18px 20px 20px}
.card h3{font-family:var(--display);font-size:20px;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 7px}
.card p{margin:0;font-size:13.5px;line-height:1.55;color:#B4A294;min-height:42px}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;
  padding-top:14px;border-top:1px dashed rgba(255,244,228,.12)}
.price{font-family:var(--display);font-size:19px;color:var(--lime);letter-spacing:-.02em}
.heat{display:inline-flex;align-items:center;gap:0}
.heat i{display:block;width:8px;height:13px;margin-left:3px;
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:rgba(255,244,228,.14);transform:rotate(14deg);
  transition:background .25s,box-shadow .25s}
.heat i.on{background:linear-gradient(180deg,#FF7A33,#E4341B);box-shadow:0 0 8px rgba(228,52,27,.75)}

/* ---------- BUILD ---------- */
.build{background:
  radial-gradient(700px 500px at 20% 30%,rgba(228,52,27,.16),transparent 62%),
  radial-gradient(600px 460px at 85% 70%,rgba(201,240,74,.08),transparent 65%),
  #100b09;
  border-top:1px solid rgba(255,244,228,.07);border-bottom:1px solid rgba(255,244,228,.07)}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.build-stage{position:relative;display:grid;place-items:center;padding:26px 0 10px}
.stage-glow{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,106,31,.42),rgba(228,52,27,.1) 50%,transparent 72%);
  filter:blur(30px);animation:pulse 5.5s ease-in-out infinite}
.build-taco{position:relative;z-index:2;width:min(440px,86%);
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.62))}
.build-readout{position:relative;z-index:2;margin-top:16px;text-align:center}
.build-name{font-family:var(--display);font-size:clamp(17px,2.4vw,25px);letter-spacing:-.02em;
  text-transform:uppercase;color:var(--cream);white-space:nowrap}
.build-price{font-family:var(--display);font-size:15px;color:var(--lime);margin-top:5px;letter-spacing:.06em}
.opt{margin-bottom:22px}
.opt h4{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:11px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.opt h4 span{font-family:var(--display);color:var(--chili);letter-spacing:0;font-size:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 16px;border-radius:999px;font-size:13px;font-weight:700;
  background:rgba(255,244,228,.05);border:1px solid var(--line);color:#DCCBBC;
  transition:all .22s cubic-bezier(.2,.8,.2,1)}
.chip:hover{background:rgba(255,244,228,.1);transform:translateY(-1px);color:var(--cream)}
.chip.active{background:var(--lime);color:#12100b;border-color:var(--lime);
  box-shadow:0 0 0 4px rgba(201,240,74,.16),0 10px 24px -12px rgba(201,240,74,.9)}

/* ---------- FIND ---------- */
.find{background:linear-gradient(180deg,#120d0b,#191110)}
.find-card{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);
  background:linear-gradient(150deg,#221711,#170f0c 55%);
  border:1px solid rgba(255,244,228,.1);border-radius:28px;
  padding:clamp(26px,4vw,52px);position:relative;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(228,52,27,.7);
}
.find-card::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 320px at 100% 0%,rgba(255,106,31,.18),transparent 65%)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:ping 1.9s infinite}
.find-main h2{font-size:clamp(34px,5vw,62px)}
.addr{margin:16px 0 0;color:#C7B5A6;font-size:15px;line-height:1.6}
.find-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.find-week{position:relative;z-index:1}
.find-week h4{font-size:10.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.week{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.week li{display:grid;grid-template-columns:46px 1fr auto;gap:12px;align-items:center;
  padding:10px 12px;border-radius:11px;font-size:13.5px;color:#C0AE9F;
  border:1px solid transparent;transition:background .2s}
.week li:hover{background:rgba(255,244,228,.04)}
.week .d{font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:11px}
.week .h{font-size:11.5px;color:#8E7E72;font-variant-numeric:tabular-nums}
.week li.today{background:rgba(201,240,74,.1);border-color:rgba(201,240,74,.4);color:var(--cream)}
.week li.today .d{color:var(--lime)}
.week li.today .h{color:#B9D66A}

/* ---------- FOOTER ---------- */
footer{background:#0c0807;padding:clamp(56px,8vw,100px) 0 34px;border-top:1px solid rgba(255,244,228,.07)}
.foot-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot-cta h2{font-size:clamp(54px,12.5vw,180px);line-height:.8;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:2px rgba(255,244,228,.26)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;margin-top:52px;
  padding-top:36px;border-top:1px solid rgba(255,244,228,.09)}
.foot-grid p{color:#8E7E72;font-size:13.5px;line-height:1.65;margin:12px 0 0;max-width:320px}
.foot-col h5{font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px}
.foot-col a{display:block;font-size:13.5px;color:#C0AE9F;padding:5px 0;transition:color .2s,transform .2s}
.foot-col a:hover{color:var(--lime);transform:translateX(3px)}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,244,228,.07);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:#6E6157;letter-spacing:.05em}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.menu-grid .reveal:nth-child(2){transition-delay:.07s}
.menu-grid .reveal:nth-child(3){transition-delay:.14s}
.menu-grid .reveal:nth-child(4){transition-delay:.21s}
.menu-grid .reveal:nth-child(5){transition-delay:.28s}
.menu-grid .reveal:nth-child(6){transition-delay:.35s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{min-height:min(430px,72vw);margin-top:10px}
  .badge-wrap{width:100px;height:100px;right:0}
  .build-grid{grid-template-columns:1fr}
  .find-card{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav .btn.sm{padding:9px 15px;font-size:10px}
  .hero{padding-top:100px}
  .hero-stats{gap:20px}
  .hero-stats b{font-size:19px}
  .sticker{display:none}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .foot-cta h2{font-size:clamp(48px,16vw,90px)}
}
@media (max-width:420px){
  .brand{font-size:14px}
  .brand .chili{width:20px;height:20px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .badge-wrap{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>

<!-- ================= SPRITE ================= -->
<svg class="sprite" aria-hidden="true" focusable="false">
  <defs>
    <linearGradient id="gShell" x1="0" y1="0" x2="0.12" y2="1">
      <stop offset="0" stop-color="#F9CE8B"/>
      <stop offset="0.4" stop-color="#EFB35D"/>
      <stop offset="0.76" stop-color="#D3903F"/>
      <stop offset="1" stop-color="#B8742A"/>
    </linearGradient>
    <radialGradient id="gLight" cx="0.5" cy="0.02" r="0.92">
      <stop offset="0" stop-color="#FFE9BE" stop-opacity="0.85"/>
      <stop offset="0.62" stop-color="#FFE9BE" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="gShade" cx="0.5" cy="1.06" r="0.8">
      <stop offset="0" stop-color="#5A2E00" stop-opacity="0.5"/>
      <stop offset="1" stop-color="#5A2E00" stop-opacity="0"/>
    </radialGradient>
  </defs>

  <symbol id="taco" viewBox="0 40 400 288">
    <!-- fillings -->
    <g>
      <path d="M46,142 C34,116 56,92 84,94 C90,68 128,56 152,74 C170,52 212,50 230,72 C254,50 296,58 306,86 C338,88 358,114 346,142 Z"
            fill="var(--veg,#6FBF3B)"/>
      <path d="M46,142 C34,116 56,92 84,94 C90,68 128,56 152,74 C170,52 212,50 230,72 C254,50 296,58 306,86 C338,88 358,114 346,142 Z"
            fill="none" stroke="#2E6512" stroke-opacity="0.32" stroke-width="4"/>
      <ellipse cx="118" cy="124" rx="52" ry="30" fill="var(--meat,#8B3B1E)"/>
      <ellipse cx="200" cy="116" rx="60" ry="34" fill="var(--meat2,#A34A25)"/>
      <ellipse cx="286" cy="126" rx="50" ry="29" fill="var(--meat,#8B3B1E)"/>
      <ellipse cx="112" cy="114" rx="20" ry="8" fill="#fff" opacity="0.15"/>
      <ellipse cx="196" cy="104" rx="25" ry="10" fill="#fff" opacity="0.17"/>
      <rect x="150" y="106" width="27" height="12" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(-14 163 112)"/>
      <rect x="240" y="112" width="25" height="11" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(12 252 117)"/>
      <rect x="90" y="118" width="21" height="10" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(-8 100 123)"/>
      <rect x="300" y="118" width="21" height="10" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(18 310 123)"/>
      <ellipse cx="170" cy="96" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
      <ellipse cx="232" cy="92" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
      <ellipse cx="270" cy="104" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
    </g>
    <!-- shell -->
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gShell)"/>
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gLight)"/>
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gShade)"/>
    <g fill="#8A4B12" opacity="0.15">
      <ellipse cx="120" cy="202" rx="26" ry="18" transform="rotate(-18 120 202)"/>
      <ellipse cx="240" cy="252" rx="34" ry="22" transform="rotate(12 240 252)"/>
      <ellipse cx="302" cy="192" rx="20" ry="14"/>
      <ellipse cx="178" cy="282" rx="30" ry="16" transform="rotate(-6 178 282)"/>
      <ellipse cx="80" cy="168" rx="18" ry="12" transform="rotate(-30 80 168)"/>
    </g>
    <path d="M18,130 L382,130" stroke="#C07E2E" stroke-width="7" stroke-linecap="round" opacity="0.55"/>
    <!-- crema drizzle -->
    <path d="M56,158 Q86,132 116,158 T176,158 T236,158 T296,158 T352,158"
          fill="none" stroke="var(--sauce,#FFF6E0)" stroke-width="11" stroke-linecap="round" opacity="0.92"/>
    <g fill="#FFF4D6" opacity="0.85">
      <ellipse cx="100" cy="242" rx="4.5" ry="3" transform="rotate(-20 100 242)"/>
      <ellipse cx="210" cy="256" rx="4.5" ry="3" transform="rotate(14 210 256)"/>
      <ellipse cx="300" cy="236" rx="4.5" ry="3" transform="rotate(-8 300 236)"/>
    </g>
  </symbol>

  <symbol id="chili" viewBox="0 0 24 24">
    <path d="M12.6 5.4C12.2 3.2 13.6 1.6 15.8 1.6" fill="none" stroke="#7DD44A"
          stroke-width="2.2" stroke-linecap="round"/>
    <path d="M13.2 5.2c3.4 0 6 2.9 6 6.6 0 5.4-5 10.1-10.2 10.1-2.1 0-3.4-1.2-3.4-2.8 0-2.3 2.6-3.3 4.7-4.7 2.3-1.5 3.6-3.6 3.6-6.2 0-1.5-.3-2.6-.7-3z"
          fill="#E4341B"/>
  </symbol>
</svg>

<!-- ================= NAV ================= -->
<header class="nav">
  <a class="brand" href="#top">
    <svg class="chili" aria-hidden="true"><use href="#chili"/></svg>
    <span>Kimchi <b>Loco</b></span>
  </a>
  <nav class="nav-links" aria-label="Main">
    <a href="#menu">Menu</a>
    <a href="#build">Sizzle Lab</a>
    <a href="#find">Find Us</a>
  </nav>
  <a class="btn sm" href="#find">Order now</a>
</header>

<main>
  <!-- ================= HERO ================= -->
  <section class="hero" id="top">
    <div class="hero-inner">
      <div class="hero-copy">
        <span class="pill"><i class="dot"></i> Seoul × SoCal · Food Truck</span>
        <h1>Kimchi<br><span class="loco">Loco</span></h1>
        <p class="lede">Bulgogi beef, charred kimchi and gochujang crema folded into a warm corn tortilla. Two worlds. One hand. Zero napkins left dry.</p>
        <div class="hero-cta">
          <a class="btn" href="#find">Find the truck →</a>
          <a class="btn ghost" href="#menu">See the menu</a>
        </div>
        <ul class="hero-stats">
          <li><b>4.9★</b><span>2,341 reviews</span></li>
          <li><b>12</b><span>tacos on the line</span></li>
          <li><b>3</b><span>trucks roaming</span></li>
        </ul>
      </div>

      <div class="hero-art">
        <div class="glow"></div>
        <div class="steam s1"></div>
        <div class="steam s2"></div>
        <div class="steam s3"></div>
        <svg class="taco-hero" viewBox="0 40 400 288" aria-hidden="true"><use href="#taco"/></svg>
        <div class="sticker">Seoul → LA</div>
        <div class="badge-wrap">
          <svg class="badge-rotate" viewBox="0 0 120 120" aria-hidden="true">
            <defs>
              <path id="circ" d="M60,60 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0"/>
            </defs>
            <text>
              <textPath href="#circ" textLength="289" lengthAdjust="spacing">OPEN NOW · KIMCHI LOCO · HOT &amp; FRESH · </textPath>
            </text>
          </svg>
        </div>
      </div>
    </div>
  </section>

  <!-- ================= MARQUEE ================= -->
  <div class="marquee-wrap" aria-hidden="true">
    <div class="marquee">
      <div class="marquee-track">
        <div class="mgroup">
          <span>Bulgogi beef</span><b>✦</b><span>Charred kimchi</span><b>✦</b>
          <span>Gochujang crema</span><b>✦</b><span>Hand-pressed corn</span><b>✦</b>
          <span>Seoul × SoCal</span><b>✦</b><span>Open late</span><b>✦</b>
        </div>
        <div class="mgroup">
          <span>Bulgogi beef</span><b>✦</b><span>Charred kimchi</span><b>✦</b>
          <span>Gochujang crema</span><b>✦</b><span>Hand-pressed corn</span><b>✦</b>
          <span>Seoul × SoCal</span><b>✦</b><span>Open late</span><b>✦</b>
        </div>
      </div>
    </div>
  </div>

  <!-- ================= MENU ================= -->
  <section class="section menu" id="menu">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">The Lineup</span>
        <h2>Tacos that <em>slap</em></h2>
        <p>Six permanent residents, one rotating wildcard. Everything is made to order, folded in front of you, and gone in four bites.</p>
      </div>

      <div class="menu-grid">
        <article class="card reveal">
          <div class="card-art">
            <span class="tag">Best seller</span>
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#7A3418;--meat2:#96451F;--sauce:#FFF6E0;--veg:#6FBF3B;--kimchi:#E8452A"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Bulgogi Loco</h3>
            <p>Sweet-soy bulgogi, sesame slaw, pickled jalapeño, gochu crema.</p>
            <div class="card-foot">
              <span class="price">$6.50</span>
              <span class="heat"><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i></span>
            </div>
          </div>
        </article>

        <article class="card reveal">
          <div class="card-art">
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#A9612F;--meat2:#C0774A;--sauce:#FFF0D8;--veg:#5CA82E;--kimchi:#D8401F"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Kimchi Carnitas</h3>
            <p>Eight-hour pork, charred kimchi, cilantro, a squeeze of lime.</p>
            <div class="card-foot">
              <span class="price">$6.75</span>
              <span class="heat"><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i></span>
            </div>
          </div>
        </article>

        <article class="card reveal">
          <div class="card-art">
            <span class="tag hot">Spicy</span>
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#C4652A;--meat2:#E07C36;--sauce:#FF6A1F;--veg:#7DD44A;--kimchi:#E4341B"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Gochu Chicken</h3>
            <p>Crispy thigh, sticky gochujang glaze, scallion, toasted sesame.</p>
            <div class="card-foot">
              <span class="price">$6.25</span>
              <span class="heat"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i></i></span>
            </div>
          </div>
        </article>

        <article class="card reveal">
          <div class="card-art">
            <span class="tag">Vegan</span>
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#D9A441;--meat2:#EBC26E;--sauce:#FFF6E0;--veg:#7DD44A;--kimchi:#E8452A"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Tofu Loco</h3>
            <p>Crispy tofu, ssamjang glaze, cucumber ribbons, sesame.</p>
            <div class="card-foot">
              <span class="price">$5.75</span>
              <span class="heat"><i class="on"></i><i class="on"></i><i></i><i></i><i></i></span>
            </div>
          </div>
        </article>

        <article class="card reveal">
          <div class="card-art">
            <span class="tag hot">New</span>
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#5E2413;--meat2:#7A3418;--sauce:#FF4A16;--veg:#8BCB45;--kimchi:#FF6A1F"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Fire Short Rib</h3>
            <p>Galbi short rib, fire sauce, torn mint, pickled onion.</p>
            <div class="card-foot">
              <span class="price">$8.50</span>
              <span class="heat"><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i><i class="on"></i></span>
            </div>
          </div>
        </article>

        <article class="card reveal">
          <div class="card-art">
            <svg viewBox="0 40 400 288" aria-hidden="true"
                 style="--meat:#F2C14E;--meat2:#FFD97A;--sauce:#FFF6E0;--veg:#8BCB45;--kimchi:#E8452A"><use href="#taco"/></svg>
          </div>
          <div class="card-body">
            <h3>Elote Kimchi</h3>
            <p>Grilled corn, kimchi, cotija, chili-lime dust. Vegetarian.</p>
            <div class="card-foot">
              <span class="price">$5.50</span>
              <span class="heat"><i class="on"></i><i></i><i></i><i></i><i></i></span>
            </div>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ================= BUILD ================= -->
  <section class="section build" id="build">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">Sizzle Lab</span>
        <h2>Build your own <em>loco</em></h2>
        <p>Three steps. Infinite regret-free combinations. Tap anything and watch it hit the tortilla.</p>
      </div>

      <div class="build-grid">
        <div class="build-stage reveal">
          <div class="stage-glow"></div>
          <svg class="build-taco" id="preview" viewBox="0 40 400 288" aria-hidden="true"><use href="#taco"/></svg>
          <div class="build-readout">
            <div class="build-name" id="buildName">BULGOGI · LOCO</div>
            <div class="build-price" id="buildPrice">$8.50</div>
          </div>
        </div>

        <div class="build-panel reveal">
          <div class="opt">
            <h4><span>01</span> Protein</h4>
            <div class="chips" data-group="protein">
              <button class="chip active" data-key="bulgogi">Bulgogi beef</button>
              <button class="chip" data-key="pork">Spicy pork</button>
              <button class="chip" data-key="chicken">Gochu chicken</button>
              <button class="chip" data-key="tofu">Crispy tofu</button>
            </div>
          </div>
          <div class="opt">
            <h4><span>02</span> Sauce</h4>
            <div class="chips" data-group="sauce">
              <button class="chip active" data-key="crema">Gochu crema</button>
              <button class="chip" data-key="sesame">Sesame aioli</button>
              <button class="chip" data-key="fire">Fire sauce</button>
              <button class="chip" data-key="lime">Lime crema</button>
            </div>
          </div>
          <div class="opt">
            <h4><span>03</span> Heat</h4>
            <div class="chips" data-group="heat">
              <button class="chip" data-key="mild">Mild</button>
              <button class="chip active" data-key="loco">Loco</button>
              <button class="chip" data-key="melt">Face-melt</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ================= FIND ================= -->
  <section class="section find" id="find">
    <div class="wrap">
      <div class="find-card reveal">
        <div class="find-main">
          <span class="live"><i></i> Open now · until 9pm</span>
          <h2>Arts<br>District</h2>
          <p class="addr">2nd &amp; Traction Ave, Los Angeles CA<br>Look for the truck with the chili on the side.</p>
          <div class="find-actions">
            <a class="btn" href="#find">Get directions</a>
            <a class="btn ghost" href="#find">Book the truck</a>
          </div>
        </div>
        <div class="find-week">
          <h4>This week's route</h4>
          <ul class="week" id="week">
            <li data-day="1"><span class="d">Mon</span><span class="p">Arts District</span><span class="h">11–3</span></li>
            <li data-day="2"><span class="d">Tue</span><span class="p">Silver Lake</span><span class="h">12–8</span></li>
            <li data-day="3"><span class="d">Wed</span><span class="p">Venice Boardwalk</span><span class="h">12–7</span></li>
            <li data-day="4"><span class="d">Thu</span><span class="p">Pershing Square</span><span class="h">11–4</span></li>
            <li data-day="5"><span class="d">Fri</span><span class="p">WeHo · Plummer Park</span><span class="h">5–11</span></li>
            <li data-day="6"><span class="d">Sat</span><span class="p">Smorgasburg Row</span><span class="h">10–4</span></li>
            <li data-day="0"><span class="d">Sun</span><span class="p">Echo Park Lake</span><span class="h">11–6</span></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</main>

<!-- ================= FOOTER ================= -->
<footer>
  <div class="wrap">
    <div class="foot-cta reveal">
      <h2>Come<br>Hungry</h2>
      <a class="btn" href="#find">Find the truck →</a>
    </div>

    <div class="foot-grid">
      <div class="foot-col">
        <div class="brand" style="font-size:16px">
          <svg class="chili" aria-hidden="true"><use href="#chili"/></svg>
          <span>Kimchi <b>Loco</b></span>
        </div>
        <p>Seoul born, LA raised. Hand-pressed tortillas, three-day kimchi, and a sauce bottle that never leaves the counter.</p>
      </div>
      <div class="foot-col">
        <h5>Menu</h5>
        <a href="#menu">Tacos</a>
        <a href="#build">Build your own</a>
        <a href="#menu">Sides &amp; salsas</a>
        <a href="#find">Catering</a>
      </div>
      <div class="foot-col">
        <h5>Follow</h5>
        <a href="#find">Instagram</a>
        <a href="#find">TikTok</a>
        <a href="#find">Newsletter</a>
        <a href="#find">Press kit</a>
      </div>
    </div>

    <div class="foot-bottom">
      <span>© 2025 Kimchi Loco · All rights reserved</span>
      <span>Made with gochujang, cilantro and a little chaos.</span>
    </div>
  </div>
</footer>

<script>
(function () {
  'use strict';

  /* ---------- scroll reveal ---------- */
  var revealEls = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (e) {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -50px 0px' });
    revealEls.forEach(function (el) { io.observe(el); });
  } else {
    revealEls.forEach(function (el) { el.classList.add('in'); });
  }

  /* ---------- highlight today's stop ---------- */
  var today = new Date().getDay();
  var weekRows = document.querySelectorAll('#week li');
  weekRows.forEach(function (li) {
    if (Number(li.dataset.day) === today) li.classList.add('today');
  });

  /* ---------- taco builder ---------- */
  var CFG = {
    protein: {
      bulgogi: { meat: '#8B3B1E', meat2: '#A34A25', label: 'BULGOGI', price: 0 },
      pork:    { meat: '#B23A1E', meat2: '#D1481F', label: 'SPICY PORK', price: 0 },
      chicken: { meat: '#A65B2C', meat2: '#C4763C', label: 'GOCHU CHICKEN', price: 0.5 },
      tofu:    { meat: '#D9A441', meat2: '#EBC26E', label: 'CRISPY TOFU', price: -0.5 }
    },
    sauce: {
      crema:  { sauce: '#FFF6E0', label: 'CREMA', price: 0 },
      sesame: { sauce: '#E9C583', label: 'SESAME', price: 0 },
      fire:   { sauce: '#FF4A16', label: 'FIRE', price: 0.5 },
      lime:   { sauce: '#C9F04A', label: 'LIME', price: 0 }
    },
    heat: {
      mild: { label: 'MILD', veg: '#7DD44A', price: 0 },
      loco: { label: 'LOCO', veg: '#6FBF3B', price: 1 },
      melt: { label: 'FACE-MELT', veg: '#58A32C', price: 1.5 }
    }
  };

  var state = { protein: 'bulgogi', sauce: 'crema', heat: 'loco' };
  var preview = document.getElementById('preview');
  var nameEl = document.getElementById('buildName');
  var priceEl = document.getElementById('buildPrice');

  function update() {
    if (!preview || !nameEl || !priceEl) return;
    var p = CFG.protein[state.protein];
    var s = CFG.sauce[state.sauce];
    var h = CFG.heat[state.heat];

    preview.style.setProperty('--meat', p.meat);
    preview.style.setProperty('--meat2', p.meat2);
    preview.style.setProperty('--sauce', s.sauce);
    preview.style.setProperty('--veg', h.veg);

    nameEl.textContent = p.label + ' · ' + h.label;
    var total = 7.5 + p.price + s.price + h.price;
    priceEl.textContent = '$' + total.toFixed(2);

    if (preview.animate) {
      preview.animate(
        [
          { transform: 'scale(.955) rotate(-2.5deg)' },
          { transform: 'scale(1) rotate(0deg)' }
        ],
        { duration: 340, easing: 'cubic-bezier(.2,.8,.2,1)' }
      );
    }
  }

  document.querySelectorAll('.chips').forEach(function (group) {
    group.addEventListener('click', function (e) {
      var btn = e.target.closest('.chip');
      if (!btn || !group.contains(btn)) return;
      var key = group.dataset.group;
      if (!key || !CFG[key]) return;
      state[key] = btn.dataset.key;
      group.querySelectorAll('.chip').forEach(function (c) {
        c.classList.toggle('active', c === btn);
      });
      update();
    });
  });

  update();
})();
</script>
</body>
</html>
Reasoning trace (25,425 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". Let me make it visually striking, mouth-watering, with lots of CSS art (no external images), animations, and interactivity. Should be self-contained HTML.

Let me design something bold: fiery Korean-inspired palette (gochujang red, sesame cream, charred black, lime green, taco yellow). Big typography, animated steam, sizzling tacos, marquee ticker, menu cards with hover, a fake "find the truck" schedule, a fun little taco builder or spice meter, maybe an interactive "heat level" slider.

I want something meaningful on first paint. Since it's a restaurant site, no game needed, but I could add a small interactive element: a "Sizzle" hero with animated tacos, floating chili peppers, and a "Build your taco" interactive section.

Let me make it great:

1. Sticky nav with logo mark.
2. Hero: huge headline "KIMCHI LOKO", subtitle, animated taco art with CSS, steam, "Find the truck" CTA. Floating animated chilies. Background: subtle noise/grid, radial gradients.
3. Marquee ticker "KOREAN BBQ • BULGOGI BEEF • KIMCHI • GOCHUJANG •..."
4. Menu section: cards with CSS-illustrated tacos, prices, hover effects (lift, glow), heat-level pepper indicators.
5. "Heat meter" interactive: hover/click spice levels changing the display.
6. Schedule/location: today's location, weekly schedule with a little live "open now" indicator.
7. Footer with socials.

Interactivity ideas:
- Clicking menu items adds to a "your order" chip count? Could be fun but maybe overkill. Let's do a "Taco Builder" that's simple: choose protein, sauce, heat → generates an order name. That's engaging and visible without scroll? Hmm, the requirement is that everything interesting is visible within the first seconds. The screenshot is at load, hero view. So the hero must be spectacular.

Let me make hero super strong: giant outlined text, a big CSS taco illustration in the center-right with animated steam and rotating garnish, floating chili confetti. Maybe a big rotating "OPEN" badge.

Also add a cursor-following glow? Not needed.

Let me also add a subtle "sizzle" effect on the taco: on click, chilies fly.

I'll build a CSS taco illustration: 
- Shell: semicircle shape with border-radius: 50% 50% 0 0 / 100% 100% 0 0, using a gradient of golden-orange, plus darker inner shell.
- Fillings: rows of colored blobs (greens for lettuce, red for kimchi, brown for bulgogi, cream for crema).
- Sesame seeds.

Alternatively, use SVG for the taco for better control. SVG inline is fine. Let's do a nice SVG taco illustration with gradients — that's more reliable and can look delicious.

Let me design an SVG taco: a folded tortilla seen at an angle. Simpler: a side view — semicircle shell with fillings on top. 

SVG path for shell: M20,200 A180,180 0 0 1 380,200 Z — a semicircle. Then fillings layered above the top edge... Actually in side view, the shell's opening is at the top, so fillings peek above the top edge. Hmm, a semicircle with the flat side up: fillings drawn along the top flat edge.

Let's do: shell path M 20 200 A 180 180 0 0 1 380 200 L 380 200 Z with gradient. Then draw fillings as blobs above y=200 between x=40 and x=360.

Actually, better: draw the taco as a "boat" shape — a tortilla folded, with the opening facing up-right, tilted. That's more complex. Keep it simple side view.

Let me construct:
- Shell outer: M 10,210 A 190,190 0 0 1 390,210 Z fill=url(#shellGrad)
- Inner highlight arc.
- Fillings: series of circles/ellipses along the top with clipping to the shell area, so they poke out.
- Sesame seeds on top of shell.
- Steam wisps rising.

Also a "lime wedge" and "cilantro" garnish.

Let me write the SVG carefully.

ViewBox 0 0 400 300.

Shell: M 15,215 A 185,185 0 0 1 385,215 Z. Center (200,215), radius 185. The arc goes from (15,215) to (385,215) through the top (200,30). Good.

Fillings sit above y=215 line, i.e., overlapping the top. Draw ellipses centered at y≈210 with ry≈35, so they poke up to y≈175. Then the top of the shell is at y=30, so fillings would be way inside the arc... hmm, the top of the semicircle is at y=30, so filling at y=175-210 is inside the shell body, not poking out. That's wrong — I need the shell to be a thin band (a curved tortilla) rather than a filled semicircle.

Better: draw the shell as a thick arc band: outer arc radius 185, inner arc radius 140, creating a crescent-shaped tortilla. Then fillings fill the inside of the crescent and poke above the inner arc.

Actually, a real taco side view: you see the front of the folded tortilla (a rounded shape) with fillings sticking out of the top. The fillings stick out beyond the top edge of the shell. Since the shell is a U-shape, the top edge is the rim. From the side, you see the front face of the shell — a semicircle-ish shape — and the fillings peek above the top rim which is behind the front face. So the fillings are drawn behind the shell front face, appearing above the rim line. The rim line is at the top of the front face, which is roughly y = 90 in the middle if the front face is a semicircle from y=30 to y=215... hmm, no.

Let me think again: a taco standing folded, viewed from the side. The front face is a half-disc with flat edge at top (the fold/rim) and the curved bottom (the fold at the bottom). Wait no — the fold is at the bottom and the opening is at the top. So the front face is like a half-disc with the flat edge at the top and the round curve at the bottom. Yes! The bottom of the taco is the fold (round curve), the top is the rim (flat). 

So: path M 15,120 A 185,185 0 0 0 385,120 Z — flat top edge at y=120, semicircle curving down to y=305. Hmm, that's the semicircle with the flat side up. And the fillings are drawn above y=120, sitting behind the shell. Wait, but then the taco's opening is at the top and the fillings pile up above the rim, visible above the front face.

So front face: from (15,120) to (385,120), arc downward to bottom (200, 305). With viewBox 0 0 400 420 maybe. Let's adjust: viewBox 0 0 400 400. Front face path: M 20,130 A 185,185 0 0 0 390,130 Z — center (205,130), radius 185, arc sweeping downward to (205,315). Hmm, A rx ry rot large-arc sweep x y: from (20,130) to (390,130), sweep=0 means counterclockwise... Let's use sweep=0: goes downward? For a circle centered at (205,130), starting point (20,130) is on the left, ending (390,130) is on the right. Sweep flag 1 = clockwise from start to end. From left point going clockwise toward... clockwise from (20,130) around center (205,130) goes up (since clockwise from the west point goes north). Yes, clockwise from angle 180° goes to 270°, 0°... In standard math with y up, but SVG y is down. In SVG, clockwise visually. From (20,130) [west], clockwise in screen coords goes up to the top (205,-55) then right. That's the upper half. So sweep=1 gives the upper half; sweep=0 gives the lower half (going down through (205,315)). Good: use sweep=0 for the lower half.

So front face: `M 20,130 A 185,185 0 0 0 390,130 Z` — this is the lower semicircle. 

Now the fillings are above y=130, drawn before (behind) the shell. Fillings as clusters of ellipses between y=60 and y=140, x from 60 to 340. They're hidden behind the shell below y=130 and visible above. 

Add a rim/thickness: draw a slightly darker band along the top edge to suggest the tortilla thickness — actually just add a highlight.

Also add the back part of the shell visible? Not needed.

Fillings: 
- Bulgogi (dark brown/red blobs) peeking.
- Kimchi (red-orange).
- Lettuce/cilantro (green).
- Crema drizzle (white/cream) — a wavy line drawn on top of everything, maybe a drizzle going down the front face.
- Sesame seeds on the shell.

That'll look decent. Let me also add steam (animated SVG paths with opacity animation, or CSS divs).

For scene: I'll make the taco float with a gentle bob animation (CSS transform on the svg wrapper), plus a rotating glow behind.

Now the whole page. Let me write it.

Palette:
- --ink: #14100e (near black brown)
- --cream: #FFF3E2
- --gochujang: #E23A1E (red)
- --chili: #FF5A1F
- --lime: #C8F135 or #A8E10C
- --sesame: #F5C86B
- --char: #1E1A17

Typography: use system font stacks with a bold display. Since no external fonts allowed, I should use a font stack. Could use 'Impact', 'Haettenschweiler', 'Arial Black', sans-serif for display. That's a common trick and looks punchy. Or use font-weight 900 with system-ui. I'll use a stack: `'Arial Black', 'Arial Bold', 'Helvetica Neue', sans-serif` with letter-spacing tight, and uppercase. Hmm, Arial Black is available on most systems including Chrome on Windows/Mac. Good.

Body: system-ui / -apple-system / Segoe UI.

Layout:
- Fixed top nav bar: logo "KIMCHI LOCO" with a chili icon, links (Menu, Heat, Find Us), and a "Order" button.
- Hero: left column text with badge "Seoul-meets-SoCal food truck", h1 "KIMCHI LOCO" huge, subtitle, CTAs, and small stats. Right: taco illustration with floating chilies + badge "OPEN NOW" rotating.
- Marquee below.
- Menu section: 4-6 cards with CSS taco art (simplified), price, description, pepper heat, hover to lift and reveal.
- "Heat" section: interactive spice slider that changes a description and colors. Actually let's do a "Build your taco" mini-interactive: 3 groups of chips (protein, heat, topping) that update a live taco preview (the SVG!) and a generated name. That's very engaging and reuses the SVG.

Hmm, that's ambitious but doable with a simplified SVG whose layers change color via CSS vars. Let's do it: the "Sizzle Lab" section with a small taco SVG that changes: protein color, salsa drizzle color, topping. And a generated name like "BULGOGI FIRE TACO". Plus a price.

Actually to keep it manageable and high quality, maybe simpler: a "Heat-O-Meter" with 3 levels (Mild / Loco / Face-Melt) and the taco illustration changes + a description. Eh, the builder is more fun.

I'll do the builder with 3 rows of 3-4 buttons each, updating the SVG preview via CSS classes. Keep the SVG simple for the preview.

- Schedule section: "Where's the truck" — a card with today's spot, hours, and a weekly list with a highlighted "today" (computed via JS Date). Plus a static map-ish CSS art? Keep it simple: a ticket-styled card.

- Footer: big "come hungry" + newsletter-ish input (no submission, just UI), socials.

Also: a sticky "Order now" bar? Maybe not.

Add scroll-triggered reveal animations with IntersectionObserver (works fine, no console errors).

Add floating chili peppers in hero with CSS animations.

Let's also add a "sizzle" interactive effect: clicking anywhere in hero spawns a chili emoji that floats up. Maybe body-wide click chili. That's a fun touch. Keep it light. Actually it could get annoying; but it adds delight. I'll do it only on the hero taco click — spawn "chili confetti".

Also add subtle cursor-following spotlight on the hero? Skip.

Let me write the code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kimchi Loco — Korean Taco Truck</title>
<style>...</style>
</head>
<body>
...
<script>...</script>
</body>
</html>
```

CSS details:

```css
:root{
  --ink:#120d0b;
  --char:#1c1512;
  --cream:#FFF4E4;
  --gochu:#E4341B;
  --chili:#FF6A1F;
  --lime:#C6F03C;
  --sesame:#F6C868;
  --deep:#2B0F0A;
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:...;overflow-x:hidden}
```

Background noise: use a repeating radial gradient? I'll add a subtle noise via SVG data URI feTurbulence... that's an inline data URI, allowed (no network). But it's long. Could use `background-image: radial-gradient(...)`. Keep it simple with layered gradients.

Hero:

```css
.hero{position:relative;min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:120px 6vw 80px;overflow:hidden}
```

Hero background: radial gradients of red/amber glow, plus a subtle grid.

Big headline:
```css
h1{font-family:'Arial Black',...;font-size:clamp(52px,9vw,140px);line-height:.82;letter-spacing:-.04em;margin:0;text-transform:uppercase}
```
Maybe use a gradient text fill with -webkit-background-clip:text for "LOCO"? Let's do "KIMCHI" in cream and "LOCO" in a gradient with a stroke.

Let me do:
```html
<h1 class="hero-title"><span class="w1">KIMCHI</span><span class="w2">LOCO</span></h1>
```
with .w2 having `-webkit-text-stroke: 2px var(--chili); color: transparent;` plus a subtle glow. Or fill with gradient. I'll fill w2 with lime gradient? Let's do cream for KIMCHI, and for LOCO a gradient from chili to gochu with a text shadow, plus a slight rotate.

Actually a strong look: "KIMCHI" solid cream, "LOCO" outlined (transparent fill, thick stroke) — classic bold poster. And on hover, fill in. Let's do outlined with a lime stroke? Hmm, cream + lime outline could look great.

Let me pick: KIMCHI in cream, LOCO in transparent with -webkit-text-stroke: 3px var(--lime) and a lime glow. Hmm, but lime on dark... yeah, punchy.

Alternatively: LOCO with gradient fill (chili → gochu) and text-shadow. I'll go gradient fill, it's more appetizing.

Decision: `.w1` cream, `.w2` background: linear-gradient(90deg,#FF8A2B,#E4341B 60%,#B01E0D); -webkit-background-clip:text; color:transparent. Plus a slight skew.

Badge above headline: "SEOUL × SO CAL · EST. 2024" small pill.

Sub: "Bulgogi beef, crispy kimchi, and gochujang crema folded into a warm corn tortilla. The best of two worlds, in one hand."

CTAs: primary "Find the truck" (lime bg, ink text), secondary "See the menu" (outline).

Stats row: ★ 4.9 (2,341 reviews) · 3 trucks · 12 tacos.

Right: taco scene with glow, rotating badge "OPEN NOW" (circular text? circular text via SVG textPath is nice). I'll do an SVG circular text badge rotating slowly.

Marquee: a band with rotated slight skew, lime background, ink text, repeating content, CSS animation translateX. Duplicate content for seamless loop.

Menu section:
```html
<section id="menu">
 <div class="section-head"><span class="eyebrow">The Lineup</span><h2>Tacos that <em>slap</em></h2></div>
 <div class="menu-grid">
   cards...
 </div>
</section>
```
Each card: a mini taco illustration (CSS or small SVG), name, description, price, heat peppers, and a "tag" like "BEST SELLER".

I'll use a small reusable SVG taco per card with different fill colors via CSS custom properties. Simpler: create an SVG `<symbol>` in a hidden svg and `<use>` it. Fill colors can be set per-use via CSS vars? With symbol/use, `currentColor` and custom properties work if the symbol uses `fill="var(--c1, #fff)"`. Yes — CSS variables inherit into the shadow DOM of `use`. That works in Chrome.

So define:
```html
<svg style="display:none">
  <symbol id="taco" viewBox="0 0 400 400">
    ...
  </symbol>
</svg>
```
with fills referencing `var(--shell,#E8A44A)`, `var(--meat,#8B3A1F)`, `var(--veg,#7BC142)`, `var(--sauce,#FFF0D0)`.

Then each card: `<svg class="taco-svg" style="--meat:#8B3A1F;--sauce:#FFE9C2"><use href="#taco"/></svg>`.

Hmm, but the hero taco should be bigger/detailed. I can reuse the same symbol with a bigger size. But the hero one might want more detail. Let's make the symbol good enough for both.

Let me design the symbol carefully.

ViewBox 0 0 400 400.

Layers (back to front):
1. Steam? No, steam in HTML.
2. Fillings poking above rim (y around 130).
3. Shell front face (lower semicircle).
4. Shell rim highlight.
5. Drizzle over the fillings and shell.
6. Sesame seeds.

Fillings: I'll draw a cluster of shapes:
- Lettuce (green, --veg): several overlapping circles/ellipses from x=70..330 at y≈120-150, plus a few frilly shapes.
- Meat (--meat): ellipses at y≈120.
- Kimchi (--kimchi): small red-orange rectangles/ellipses.
- Onion/cilantro: small dots.

They need to appear above the shell top edge at y=130, i.e., visible in y from ~75 to 130. The shell front covers from y=130 downward. So the fillings should be roughly y in [70, 150] so the bottom is hidden by the shell.

Let me define the rim ellipse: the shell front face top edge is a straight line from (20,130) to (380,130) — actually to make it 3D, the rim could be an ellipse arc suggesting the back of the shell. But keep it flat for a clean graphic look.

For a graphic look, having the fillings sit on a flat line is fine.

So the fillings: I'll draw a path with bumps.

Let me write a "filling pile" path:
```
M 60,132 
C 55,110 70,88 95,86
C 100,60 140,52 160,72
C 175,50 215,50 230,70
C 250,48 292,56 300,84
C 330,88 345,110 338,132
Z
```
Something like that — a lumpy mound. Then I'll add individual blobs of meat and kimchi within.

Simpler and more reliable: use multiple ellipses/circles with varying colors. Let me do:

Green base (lettuce): a lumpy path in --veg.
Then meat blobs: 3-4 ellipses in --meat overlapping.
Then kimchi bits: small rotated rounded rects in --gochu.
Then sesame dots: small cream ellipses.

Order matters: draw lettuce mound first, then meat on top (in front), then kimchi, then seeds.

Actually visually: a pile with meat chunks visible at the front and lettuce peeking around the edges. Let's do:

1. Lettuce mound path (big, spread wide, y from 70 to 135).
2. Meat: 5 ellipses across x=90..310, cy≈115, rx=45, ry=28, in --meat. Plus a lighter highlight.
3. Kimchi: 4 small rounded rects rotated, in --kimchi (default #E8452A).
4. Cilantro/diced onion: tiny white/green dots.
5. Then the shell front, drawn ON TOP, covering y>130.
6. Then the crema drizzle: a wavy stroke in --sauce that starts above the rim and drips down the shell front. Drawn after the shell so it's visible on the shell.
7. Sesame seeds on the shell.

Wait — if the drizzle is drawn after the shell, it sits on the front face. Good, looks like sauce dripping down.

The shell front face: `M 18,130 A 182,182 0 0 0 382,130 Z` — from (18,130) to (382,130) with radius 182, center (200,130), bottom at (200,312). Good.

Add a subtle inner shadow: an arc path with stroke lighter near the top edge.

Also add tortilla "fold" texture: a couple of soft radial gradients.

Hmm, the shell should look like a corn tortilla: golden with darker charred spots. Use a linear gradient from #F2B15A to #D98B36, plus some ellipse blobs with low-opacity brown for char.

Let's define gradients inside the symbol — but gradients inside `<symbol>` referenced by `<use>` multiple times: IDs must be unique; if the symbol is defined once and used multiple times, gradient IDs inside it are fine (same definition referenced repeatedly). Yes, that's OK.

Let me write it.

```svg
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <defs>
    <linearGradient id="shellG" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#F7C67C"/>
      <stop offset="0.45" stop-color="#E8A44A"/>
      <stop offset="1" stop-color="#C97F2E"/>
    </linearGradient>
    <radialGradient id="shellLight" cx="0.5" cy="0.05" r="0.8">
      <stop offset="0" stop-color="#FFE0A8" stop-opacity=".9"/>
      <stop offset="1" stop-color="#FFE0A8" stop-opacity="0"/>
    </radialGradient>
    <linearGradient id="tacoShade" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0.6" stop-color="#000" stop-opacity="0"/>
      <stop offset="1" stop-color="#5A2E00" stop-opacity=".35"/>
    </linearGradient>
  </defs>
  <symbol id="taco" viewBox="0 0 400 400">
    ...
  </symbol>
</svg>
```

Hmm — defs inside the standalone hidden svg, then the symbol references them. Since it's the same document, `url(#shellG)` resolves globally. Fine.

Wait, the symbol's `viewBox` is a property but for `<use>` sizing it's fine.

Symbol content:

```svg
<!-- fillings -->
<g>
  <!-- lettuce -->
  <path d="M52,140 C40,118 58,96 84,96 C92,72 128,60 150,78 C168,58 206,56 224,76 C246,54 288,60 300,84 C332,86 352,110 342,140 Z" fill="var(--veg,#6FBF3B)"/>
  <!-- darker lettuce edge -->
  <path d="M52,140 C40,118 58,96 84,96 ..." fill="none" stroke="#3F7A1E" stroke-opacity=".25" stroke-width="3"/>
  <!-- meat -->
  <ellipse cx="120" cy="118" rx="46" ry="26" fill="var(--meat,#8B3B1E)"/>
  <ellipse cx="200" cy="112" rx="52" ry="28" fill="var(--meat2,#A34A25)"/>
  <ellipse cx="282" cy="120" rx="44" ry="25" fill="var(--meat,#8B3B1E)"/>
  ...
</g>
```

Hmm, careful with clipping — the mound path bottom is at y=140 which will be covered by the shell (top at 130). Good.

But the meat ellipses at cy=118 with ry=26 extend from 92 to 144 — bottom hidden. Good.

Then kimchi chunks and the shell.

Actually wait: I want a small visual "opening" — but this is fine.

Let me also add a subtle dark shading under the fillings where they meet the shell.

Now the shell:

```svg
<path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#shellG)"/>
<path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#shellLight)"/>
<path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#tacoShade)"/>
```

Hmm, the shellLight radial gradient with cy at 0.05 in objectBoundingBox of the path bbox (which is 0..400 x 130..312): the light would be near the top center. Fine.

Char spots: a few ellipses with fill #8A4B12 opacity .18.

Rim: a thin darker line along the top: `<path d="M18,130 L382,130" stroke="#B06B22" stroke-width="6" opacity=".5"/>` Hmm, but the fillings pass over it. Actually the rim should be in front of the fillings, so draw the shell after. But the rim line at y=130 would be drawn over the fillings — good, it separates them.

Wait, the shell is drawn after the fillings, so the top edge is a straight line at y=130, and the fillings above are visible. 

Drizzle:
```svg
<path d="M40,150 C90,120 130,175 180,150 C220,130 250,180 300,152 C330,138 355,160 370,150" 
      fill="none" stroke="var(--sauce,#FFF6E0)" stroke-width="12" stroke-linecap="round" opacity=".95"/>
```
Hmm, that would cross in front of the shell. That's a crema zigzag. Maybe too messy. Let's do a drizzle that comes from the top of the fillings and drips down the front:

```svg
<path d="M150,90 C160,120 140,150 155,190 C165,215 150,235 158,255" stroke="var(--sauce)" stroke-width="10" fill="none" stroke-linecap="round" opacity=".9"/>
```
Two of those. Plus a zigzag across the fillings at the top.

I'll do a zigzag across the fillings area (y≈100, above the shell so it's behind the shell) — no wait, drawn after the shell it would be on top. Let me draw the drizzle in two parts:
1. Drizzle over the fillings (drawn after fillings, before shell) — happens only above y=130.
2. Drips down the shell front (drawn after shell).

Simpler: draw one zigzag path after the shell that spans y from 95 to 135 — mostly hidden above 130? No, it'd be on top of the shell where it dips below 130.

Let me just do: after the shell, draw a zigzag path that goes from x=80 to x=320 with y oscillating between 105 and 160, stroke-width 11, round caps, in --sauce. Where it goes below y=130 it's on the shell — that looks like sauce dripping. Good enough and looks tasty.

Actually simpler & cleaner: draw the drizzle ON the shell as a zigzag around y=150-190, plus droplets. Hmm.

I'll go with: zigzag from (70,120) through a few points to (330,118), dipping to y≈145 max. Then it sits over the fillings and just touches the shell rim. Plus two drips going down the shell.

OK, let me just write it and trust the visual.

Actually, let me reconsider — maybe simpler is better and less risky. I'll do:
- After shell: a wavy drizzle path across the upper part of the shell: `M 60,165 Q 90,140 120,165 T 180,165 T 240,165 T 300,165 T 360,165` with stroke --sauce, width 10, opacity .85. Hmm, that's a wave line. It reads as crema drizzle.

I'll do that. Plus a few round droplets.

And sesame seeds: small cream ellipses on the shell, rotated. Scatter 8 of them.

OK. And I'll add a slight dark ellipse shadow under the taco in the hero (in HTML).

Now, the preview taco in the builder: reuse the symbol with different CSS vars.

Cards: reuse the symbol at small size. But the symbol at 400x400 with the taco occupying the middle — fine.

Hmm wait, the taco occupies y 56..312, x 18..382. OK.

Now let's write the HTML sections.

**Nav**
```html
<header class="nav">
  <a class="brand" href="#top">
    <span class="brand-mark">🌮</span>  <!-- emoji might render inconsistently; use SVG chili -->
    <span class="brand-name">KIMCHI <b>LOCO</b></span>
  </a>
  <nav class="nav-links">
    <a href="#menu">Menu</a>
    <a href="#build">Build</a>
    <a href="#find">Find Us</a>
  </nav>
  <a class="btn btn-sm" href="#find">Order Now</a>
</header>
```

Emoji: risky but generally fine in Chrome. I'll use a small inline SVG chili instead for the brand mark. Actually emoji are fine in Chrome on the test machine (likely macOS or Linux with emoji fonts... Linux sandbox may lack emoji fonts → tofu). Safer to use SVG. I'll avoid emoji entirely and use SVG shapes. Yes — avoid emoji.

Let me design a chili mark SVG: a curved red pepper with a green stem.

```svg
<svg viewBox="0 0 32 32" class="chili">
  <path d="M20 6c1-2 3-2 4-1 .5.4.3 1.2-.4 1.2-1 0-1.4.6-1.6 1.6" fill="#6FBF3B"/>  <!-- stem -->
  <path d="M16 8c6 0 10 4 10 9 0 6-5 10-11 10-5 0-9-3-9-7 0-3 3-5 6-5 3 0 5 2 5 4 0 2-2 3-3 2" fill="#E4341B"/>
</svg>
```
Hmm, that's a rough chili. Let me do a simpler approach: a red teardrop rotated, with a green stem line.

```svg
<svg viewBox="0 0 24 24">
  <path d="M14 3c1.5-1 3-1 3.5 0" stroke="#6FBF3B" stroke-width="2" fill="none" stroke-linecap="round"/>
  <path d="M15 4c0 0 3 3 3 8 0 5-3 9-8 11-2 1-4 0-4-2 0-3 4-3 6-6 2-3 2-6 3-11z" fill="#E4341B"/>
</svg>
```
Eh, good enough. Actually, let me make it a simple chili: a curved cone.

Path: `M12 5 C 8 12, 6 16, 7 20 C 8 23, 12 22, 13 19 C 14 16, 14 10, 12 5 Z` — a pepper shape. Plus a stem `M12 5 C 12 3, 14 2, 16 2`.

Fine. It's a small mark; it'll read as a red chili.

**Hero**

```html
<section class="hero" id="top">
  <div class="hero-bg"></div>
  <div class="hero-inner">
    <div class="hero-copy">
      <span class="pill"><i class="dot"></i> Seoul × SoCal · Food Truck</span>
      <h1>KIMCHI<br><span class="loco">LOCO</span></h1>
      <p class="lede">Bulgogi beef, crispy kimchi and gochujang crema folded into a warm corn tortilla. Two worlds. One hand. Zero napkins left dry.</p>
      <div class="hero-cta">
        <a class="btn" href="#find">Find the truck →</a>
        <a class="btn ghost" href="#menu">See the menu</a>
      </div>
      <ul class="hero-stats">
        <li><b>4.9</b><span>2,341 reviews</span></li>
        <li><b>12</b><span>tacos on the line</span></li>
        <li><b>3</b><span>trucks roaming</span></li>
      </ul>
    </div>
    <div class="hero-art">
      <div class="glow"></div>
      <svg class="taco-hero" viewBox="0 0 400 400"><use href="#taco"/></svg>
      <!-- steam -->
      <div class="steam s1"></div>...
      <div class="badge-rotate">...circular text...</div>
      <div class="spice-tag">GOCHUJANG<br>LEVEL 3</div>
    </div>
  </div>
</section>
```

Circular badge: SVG with textPath around a circle, rotating with CSS animation. Text "OPEN NOW • KIMCHI LOCO • ".

```svg
<svg class="badge" viewBox="0 0 120 120">
  <defs><path id="circlePath" d="M60,60 m-44,0 a44,44 0 1,1 88,0 a44,44 0 1,1 -88,0"/></defs>
  <text><textPath href="#circlePath">OPEN NOW · KIMCHI LOCO · OPEN NOW · </textPath></text>
</svg>
```
With letter-spacing to fill. Might not fill exactly but it's decorative. I'll set the text length attribute to force it: `textLength="276"`? For textPath, `textLength` works in Chrome. Let's just tune the string.

Actually to be safe: use `side="left"`? No, just use one textPath and let it be.

The badge rotates: `animation: spin 18s linear infinite`.

**Marquee**

```html
<div class="marquee" aria-hidden="true">
  <div class="marquee-track">
    <span>BULGOGI BEEF</span><i>✦</i><span>CRISPY KIMCHI</span><i>✦</i>...
  </div>
</div>
```
Duplicate the track content twice for seamless loop; animate translateX(-50%).

`✦` is a unicode char that renders in most fonts. Should be fine (it's U+2726, present in DejaVu Sans on Linux). Yes, fine.

**Menu section**

Cards: I'll do 6 cards in a responsive grid.

Card structure:
```html
<article class="card">
  <div class="card-art"><svg viewBox="0 0 400 400" style="--meat:#8B3B1E;--veg:#6FBF3B;--sauce:#FFF3D6"><use href="#taco"/></svg></div>
  <div class="card-body">
    <span class="tag">Best seller</span>
    <h3>Bulgogi Loco</h3>
    <p>Sweet-soy beef, sesame slaw, pickled jalapeño, crema.</p>
    <div class="card-foot"><span class="price">$6.50</span><span class="heat">🌶🌶🌶</span></div>
  </div>
</article>
```

Heat: I need pepper icons without emoji. Use small SVG chili repeated. Let me make a `.heat` with N `<i class="pepper"></i>` elements styled as small red shapes via CSS (border-radius + rotation). 

```css
.pepper{width:9px;height:14px;background:#E4341B;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;display:inline-block;transform:rotate(12deg);margin-left:2px}
```
Hmm, that's a blob. Better: use a tiny inline SVG per pepper via a `<symbol id="pep">`. Then `<svg class="pepper"><use href="#pep"/></svg>`. Cleaner.

I'll define `<symbol id="pep" viewBox="0 0 24 24">` with a chili path.

```svg
<symbol id="pep" viewBox="0 0 24 24">
  <path d="M13 6c2 0 4 2 4 5 0 5-4 10-9 12-2 1-4-1-3-3 1-3 4-3 6-6 2-2 1-5 2-8z" fill="#E4341B"/>
  <path d="M13 6c0-2 1-3 3-3" stroke="#6FBF3B" stroke-width="2.2" fill="none" stroke-linecap="round"/>
</symbol>
```
Hmm the pepper shape: from (13,6) curve... Let me just make a simple teardrop: `<path d="M12 5c4 0 6 3.5 6 7 0 5-4.5 9-9 9-2 0-3-1-3-2.5C6 16 9 15 11 12c1.4-2 1-4.6 1-7z" fill="#E4341B"/>` plus stem. Good enough at 14px.

Set `.pepper{width:13px;height:13px;fill:...}` and use `<use>`.

Actually for the heat indicator, I'll use 5 small chilis with some faded (opacity .18) for the level. Nice.

**Build section (Sizzle Lab)**

```html
<section id="build" class="build">
  <div class="section-head">
    <span class="eyebrow">Sizzle Lab</span>
    <h2>Build your own <em>monster</em></h2>
  </div>
  <div class="build-grid">
    <div class="build-preview">
      <svg viewBox="0 0 400 400" id="previewTaco"><use href="#taco"/></svg>
      <div class="build-name" id="buildName">BULGOGI · LOCO</div>
      <div class="build-price" id="buildPrice">$8.50</div>
    </div>
    <div class="build-options">
      <div class="opt-group" data-group="protein">
        <h4>1. Protein</h4>
        <div class="chips">
          <button class="chip active" data-meat="#8B3B1E" data-meat2="#A34A25" data-name="BULGOGI">Bulgogi</button>
          ...
        </div>
      </div>
      ...
    </div>
  </div>
</section>
```

JS: on chip click, update `--meat`, `--meat2`, `--sauce` custom props on the preview SVG, and the name/price. 

Groups:
- Protein: Bulgogi (brown), Spicy Pork (red-orange), Crispy Tofu (golden), Chicken (lighter brown) — 4 chips.
- Sauce: Gochujang Crema (cream-pink), Sesame Aioli (cream), Fire Sauce (red) — 3 chips.
- Heat: Mild, Loco, Face-Melt — affects the pepper count and the name suffix.

Name = `${protein} ${sauce name}` maybe too long. Let's do: name = protein.toUpperCase() + " · " + heatLabel. Price = base + additions.

Simple. Good.

**Find section**

```html
<section id="find" class="find">
  <div class="find-card">
    <div class="find-main">
      <span class="live"><i></i> Open now · till 9pm</span>
      <h2>Downtown<br>Arts District</h2>
      <p>2nd & Traction Ave, Los Angeles</p>
      <a class="btn">Get directions</a>
    </div>
    <div class="find-week">
      <h4>This week</h4>
      <ul>... rows with day, spot, hours ...</ul>
    </div>
  </div>
</section>
```

JS highlights today's row.

Days: Mon Arts District, Tue Silver Lake, Wed Venice, Thu DTLA, Fri WeHo, Sat Smorgasburg, Sun Echo Park.

**Footer**

Big "COME HUNGRY" + email signup + credits.

Also a floating "🔥" ... skip.

Let's add scroll-reveal with IntersectionObserver adding `.in` class.

Now — the requirement: "Something meaningful must be visible on first paint" and "everything interesting visible within first seconds". The hero + taco + marquee is visible. Good. It's a website, not a game, so no "click to start" needed. But should I add keyboard? Not needed.

Now, responsiveness: at 375px, stack the hero, reduce font sizes, hide nav links maybe.

Let me write the CSS carefully.

```css
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:#120d0b;
  color:#FFF4E4;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
```

Display font stack: `'Arial Black','Arial Bold',Gadget,'Helvetica Neue',sans-serif` with font-weight 900. On Linux, Arial Black may not exist → falls back to a bold sans. Acceptable.

Actually let me use a variable approach: `font-family: 'Arial Black', 'Helvetica Neue', Impact, sans-serif; font-weight:900; letter-spacing:-0.03em;`. Fine.

Colors:
```css
:root{
  --ink:#120d0b;
  --panel:#1b1411;
  --line:rgba(255,244,228,.12);
  --cream:#FFF4E4;
  --muted:#B9A99C;
  --gochu:#E4341B;
  --chili:#FF6A1F;
  --lime:#C9F04A;
  --sesame:#F6C868;
  --amber:#FFB347;
}
```

Hero background:
```css
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:140px 6vw 90px;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(900px 600px at 78% 30%, rgba(228,52,27,.32), transparent 60%),
    radial-gradient(700px 500px at 15% 80%, rgba(255,106,31,.16), transparent 65%),
    radial-gradient(600px 400px at 50% 0%, rgba(201,240,74,.07), transparent 70%);
  pointer-events:none;
}
```
Plus a grid overlay:
```css
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,244,228,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,244,228,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 75%);
  pointer-events:none;
}
```
Need `-webkit-mask-image` for Chrome (supported unprefixed now too).

hero-inner: `position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;width:100%;max-width:1320px;margin:0 auto;`

h1:
```css
.hero h1{
  font-family:'Arial Black','Helvetica Neue',Impact,sans-serif;
  font-weight:900;
  font-size:clamp(56px, 10.5vw, 156px);
  line-height:.82;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin:18px 0 0;
}
.hero h1 .loco{
  background:linear-gradient(100deg,#FFC24B 0%,#FF6A1F 38%,#E4341B 70%,#A3140A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-block;
  filter:drop-shadow(0 10px 30px rgba(228,52,27,.45));
  transform:skewX(-6deg);  /* maybe not */
}
```
Hmm, applying gradient to text with drop-shadow: fine.

Wait: `filter: drop-shadow` on text with background-clip:text and transparent color — the drop shadow uses the alpha of the element's rendering, which is the text glyphs. Works.

Hero art:
```css
.hero-art{position:relative;display:grid;place-items:center;min-height:440px}
.taco-hero{width:min(560px,100%);height:auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.6));animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-18px) rotate(3deg)}}
```

Glow behind:
```css
.glow{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,106,31,.45),rgba(228,52,27,.15) 45%,transparent 70%);filter:blur(30px);animation:pulse 6s ease-in-out infinite}
```

Steam: three divs with a blurred white gradient, rising and fading.

```css
.steam{position:absolute;width:26px;height:110px;border-radius:50%;background:linear-gradient(to top, rgba(255,244,228,0), rgba(255,244,228,.5));filter:blur(10px);opacity:0;animation:steam 4s ease-in-out infinite}
```
Position at top of the taco, with delays. `@keyframes steam{0%{opacity:0;transform:translateY(20px) scaleX(1)}30%{opacity:.55}100%{opacity:0;transform:translateY(-90px) scaleX(1.6)}}`

The steam should be positioned relative to the taco center. `.hero-art .steam{left:50%;top:12%}` with variations.

Badge rotate:
```css
.badge-rotate{position:absolute;right:-10px;top:6%;width:132px;height:132px;animation:spin 22s linear infinite}
.badge-rotate text{font:700 11px/1 'Arial Black',sans-serif;letter-spacing:2.6px;fill:var(--lime);text-transform:uppercase}
```
Careful: the `use`/`text` inside SVG — the `font` shorthand with a font family name containing spaces needs quotes. Use separate properties: `font-size:11px;font-weight:800;letter-spacing:2.4px;fill:...`.

Hmm, letter-spacing on SVG text works in Chrome. Good.

Let me compute circular text length: circle r=44 → circumference = 276.5. Text "OPEN NOW · KIMCHI LOCO · HOT & FRESH · " — I'll just set it and let it be.

Actually to guarantee it fills nicely, use `textLength="276"` and `lengthAdjust="spacing"`. That stretches the text to fit. 

Marquee:
```css
.marquee{background:var(--lime);color:#120d0b;overflow:hidden;border-block:3px solid #120d0b;transform:rotate(-1.2deg) scale(1.02);margin:0 -20px;}
```
Hmm, rotating the marquee might cause horizontal overflow — `overflow-x:hidden` on body handles it. But `transform: rotate` with `scale(1.02)` and negative margins might cause a scrollbar on some browsers. `body{overflow-x:hidden}` handles it. I'll also add `overflow-x:clip` on html? `overflow-x:hidden` on body should be enough. Actually, with `overflow-x:hidden` on body but not html, the html may still scroll. Common fix: set `overflow-x:hidden` on both html and body. But `overflow-x:hidden` on html can break `position:sticky`... no, it's fine. Actually `overflow-x:hidden` on html makes it a scroll container for x, which is fine.

Hmm, one gotcha: `overflow-x:hidden` on body with `position:sticky` nav — sticky works relative to the nearest scrolling ancestor. If html has overflow-x:hidden, it becomes a scroll container and sticky still works within it. Should be OK. I'll use `overflow-x:hidden` on both, and keep the nav `position:sticky; top:0`.

Actually safer: make the nav `position:fixed` with a backdrop and add padding-top to the hero. Hmm, sticky is simpler for the layout. Let me use `position:sticky;top:0` on the header; it works within body as long as no ancestor has overflow hidden. Body has overflow-x:hidden → body becomes a scroll container? No — overflow on body is special (propagates to viewport). With `overflow-x:hidden` on body, the value propagates to the viewport and body itself computes to visible. Hmm, actually the propagation rule: if html is visible, the body's overflow propagates to the viewport. So body's own overflow becomes visible → sticky works. Good, and the viewport gets overflow-x:hidden.

But if I set `overflow-x:hidden` on html too, then the html is the scroll container and body's overflow doesn't propagate... For sticky, it's about the nearest scrollport. If html has overflow-x:hidden (and overflow-y auto), that's the scroll container, sticky elements inside work relative to it. Fine.

I'll set only on html: `html{overflow-x:hidden}` and body `overflow-x:clip`? Let's keep it simple: `html, body { overflow-x: hidden; }` and test mentally. It's a standard pattern. Actually to avoid the sticky-breaking issue, I'll use `position:sticky` on a nav that's inside body — should be fine.

Hmm, actually there IS a known issue: `overflow-x:hidden` on an ancestor breaks position:sticky for descendants. But body is the ancestor of nav... If body has overflow-x:hidden, the browser propagates it to the viewport and body's used overflow becomes visible. So sticky works. I'll do `body{overflow-x:hidden}` only. And to avoid the rotate causing scroll, also add `max-width:100%` / the marquee inside a container with overflow hidden.

Better: give the marquee a wrapper `overflow:hidden` and don't rotate the outer element. Rotate the inner track? If I want the slanted band, I can rotate the band and make the wrapper taller with overflow hidden. Let's do:

```html
<div class="marquee-wrap"><div class="marquee"><div class="track">...</div></div></div>
```
`.marquee-wrap{overflow:hidden;padding:14px 0;}` `.marquee{transform:rotate(-2deg);background:var(--lime);...}` and the track inside.

But the wrap with overflow hidden and rotated child — the child's corners would be clipped at the edges but since the marquee is wider than the viewport (width:110%; margin-left:-5%), it'll be fine.

Let's do `.marquee{width:112vw;margin-left:-6vw;transform:rotate(-2deg)}`. Then no horizontal scrollbar because the wrap clips it.

Hmm, but 112vw with body overflow-x hidden... the wrap has overflow:hidden so it clips. Good.

**Menu grid**: `grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px`.

Card:
```css
.card{background:linear-gradient(180deg,#1d1613,#171110);border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s}
.card:hover{transform:translateY(-8px);border-color:rgba(255,106,31,.5);box-shadow:0 30px 60px -20px rgba(228,52,27,.5)}
.card-art{position:relative;aspect-ratio:16/11;display:grid;place-items:center;background:radial-gradient(circle at 50% 120%, rgba(255,106,31,.35), transparent 65%)}
.card-art svg{width:78%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.5));transition:transform .4s}
.card:hover .card-art svg{transform:rotate(-6deg) scale(1.06)}
```

Text styles.

**Build section** background: dark with a big radial.

`.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}`.

Chips:
```css
.chip{background:rgba(255,244,228,.05);border:1px solid var(--line);color:var(--cream);padding:10px 16px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:.2s}
.chip:hover{background:rgba(255,244,228,.1)}
.chip.active{background:var(--lime);color:#120d0b;border-color:var(--lime);box-shadow:0 0 0 4px rgba(201,240,74,.15)}
```

**Find card**: grid 2 cols; the week list with today highlighted in lime.

Let me now also add a "reveal on scroll" that adds `.in`.

Also, I want a little "sizzle" interaction: clicking the hero taco spawns droplets. Let's add small floating chili particles on click. Maybe skip to reduce risk. I'll include it — it's fun and simple. Actually, let's add a subtle continuous floating chili shapes in the hero background for visual interest instead. That's safer.

Floating chilies: 5 SVG elements absolutely positioned with `animation: float 8s ease-in-out infinite` and different delays. They should be subtle (opacity .25).

Hmm, adding too much could clutter. I'll add 3 subtle ones.

Let me now write out the full code.

One more consideration: fonts. No external fonts allowed (no CDN mentioned). So use system stacks. For the display, `'Arial Black', 'Helvetica Neue', Helvetica, Arial, sans-serif` with weight 900. Fine.

Let me write the SVG taco symbol carefully.

```html
<svg class="sprite" aria-hidden="true" focusable="false">
  <defs>
    <linearGradient id="gShell" x1="0" y1="0" x2="0.15" y2="1">
      <stop offset="0" stop-color="#F8CB86"/>
      <stop offset="0.42" stop-color="#EFB35D"/>
      <stop offset="0.78" stop-color="#D2903C"/>
      <stop offset="1" stop-color="#B9762C"/>
    </linearGradient>
    <radialGradient id="gLight" cx="0.5" cy="0.02" r="0.9">
      <stop offset="0" stop-color="#FFE7B8" stop-opacity="0.85"/>
      <stop offset="0.6" stop-color="#FFE7B8" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="gShade" cx="0.5" cy="1.05" r="0.75">
      <stop offset="0" stop-color="#5A2E00" stop-opacity="0.45"/>
      <stop offset="1" stop-color="#5A2E00" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <symbol id="taco" viewBox="0 0 400 400">
    <!-- fillings -->
    <g class="fillings">
      <path d="M46,142 C34,116 56,92 84,94 C90,68 128,56 152,74 C170,52 212,50 230,72 C254,50 296,58 306,86 C338,88 358,114 346,142 Z" fill="var(--veg,#6FBF3B)"/>
      <path d="M46,142 C34,116 56,92 84,94 C90,68 128,56 152,74 C170,52 212,50 230,72 C254,50 296,58 306,86 C338,88 358,114 346,142 Z" fill="none" stroke="#2E6512" stroke-opacity="0.35" stroke-width="4"/>
      <!-- meat -->
      <ellipse cx="118" cy="122" rx="52" ry="30" fill="var(--meat,#8B3B1E)"/>
      <ellipse cx="200" cy="114" rx="60" ry="34" fill="var(--meat2,#A34A25)"/>
      <ellipse cx="286" cy="124" rx="50" ry="29" fill="var(--meat,#8B3B1E)"/>
      <!-- highlights -->
      <ellipse cx="112" cy="112" rx="20" ry="9" fill="#fff" opacity="0.14"/>
      <ellipse cx="196" cy="102" rx="24" ry="11" fill="#fff" opacity="0.16"/>
      <!-- kimchi -->
      <rect x="150" y="106" width="26" height="12" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(-14 163 112)"/>
      <rect x="240" y="112" width="24" height="11" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(12 252 117)"/>
      <rect x="92" y="118" width="20" height="10" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(-8 102 123)"/>
      <rect x="300" y="118" width="20" height="10" rx="5" fill="var(--kimchi,#E8452A)" transform="rotate(18 310 123)"/>
      <!-- sesame -->
      <ellipse cx="170" cy="96" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
      <ellipse cx="232" cy="92" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
      <ellipse cx="270" cy="106" rx="4" ry="3" fill="#FFF0CC" opacity="0.9"/>
    </g>
    <!-- shell -->
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gShell)"/>
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gLight)"/>
    <path d="M18,130 A182,182 0 0 0 382,130 Z" fill="url(#gShade)"/>
    <!-- char spots -->
    <g fill="#8A4B12" opacity="0.16">
      <ellipse cx="120" cy="200" rx="26" ry="18" transform="rotate(-18 120 200)"/>
      <ellipse cx="240" cy="250" rx="34" ry="22" transform="rotate(12 240 250)"/>
      <ellipse cx="300" cy="190" rx="20" ry="14"/>
      <ellipse cx="180" cy="280" rx="30" ry="16" transform="rotate(-6 180 280)"/>
    </g>
    <!-- rim -->
    <path d="M18,130 L382,130" stroke="#C07E2E" stroke-width="7" stroke-linecap="round" opacity="0.55"/>
    <!-- crema drizzle -->
    <path d="M56,158 Q86,132 116,158 T176,158 T236,158 T296,158 T352,158" fill="none" stroke="var(--sauce,#FFF6E0)" stroke-width="11" stroke-linecap="round" opacity="0.92"/>
    <!-- sesame seeds on shell -->
    <g fill="#FFF4D6" opacity="0.85">
      <ellipse cx="100" cy="240" rx="4.5" ry="3" transform="rotate(-20 100 240)"/>
      <ellipse cx="210" cy="255" rx="4.5" ry="3" transform="rotate(14 210 255)"/>
      <ellipse cx="300" cy="235" rx="4.5" ry="3" transform="rotate(-8 300 235)"/>
    </g>
  </symbol>
</svg>
```

Wait, the char spots and drizzle are drawn after the shell — but the shell path is the full lower semicircle, so the char spots inside it are fine.

The drizzle at y=158 with the curve dipping to ~145 at x=86... Let me check: `M56,158 Q86,132 116,158` — quadratic to (116,158) with control (86,132); the curve's midpoint is at y = (158+2*132+158)/4 = (158+264+158)/4 = 145. So it rises to 145. Then `T176,158` reflects to control (146,184) → midpoint y = (158+368+158)/4 = 171. Hmm, the T command alternates up/down. That gives a wave. Good.

But hold on — will this drizzle be visible against the shell? The shell top edge is y=130 and the drizzle is at y=145-171. Yes, on the shell. Good. White crema on the golden shell. 

The rim line at y=130 with stroke-width 7 spans 126.5 to 133.5 — I'm drawing it as a straight line, but the shell top is a straight line, so it's consistent. However, the rim would be drawn ON TOP of the fillings' bottom area, which is fine (it looks like the tortilla's rim edge in front).

Hmm, actually the fillings are drawn BEHIND the shell, so the fillings' bottoms are hidden. The rim line is drawn over the shell. It's fine.

Maybe I should add a subtle "back rim" above the fillings to suggest the tortilla's far edge — skip.

Also add a "fold" line? Skip.

One issue: the taco is 400x400 with the taco occupying y=56..312. There's empty space at the bottom (y=312..400). For the hero the drop-shadow will be around the visible shape, fine. For cards, the SVG will be centered with the taco in the upper portion. I should adjust the viewBox to crop: `viewBox="0 30 400 300"`. Then the symbol viewBox is 0 30 400 300 and the aspect is 4:3. That's better. But then the fillings at y=56 would be near the top edge — fine.

Let me set the symbol viewBox to "0 34 400 292". Hmm, the chili/sesame at y=56 has some margin. Let's do viewBox="0 40 400 288" → x 0-400, y 40-328. The shell bottom is at y=312. So there's 16px margin at the bottom. Good.

Aspect ratio 400:288 ≈ 1.39.

Then in the hero, `<svg viewBox="0 0 400 400">` on the use element — no, the viewBox comes from the symbol. When you `<use>` a symbol, the symbol's viewBox maps to the use element's width/height. The outer svg element needs its own viewBox or the sizing works out via width/height attributes. Let's just give the outer `<svg width="100%" height="100%">` hmm.

Simplest: outer svg with `class="taco-hero"` and `viewBox="0 40 400 288"` (same as symbol) and `<use href="#taco"/>`. Then the symbol's own viewBox 0 40 400 288 maps to the use's viewport... Actually when a `<use>` references a `<symbol>`, the symbol is rendered as an `<svg>` with width/height 100% of the use's... hmm, the use without width/height defaults to 100%. So the symbol's viewport is 100% of the outer svg's viewport, and the symbol's viewBox maps into it. If the outer svg has the same viewBox, the scale is 1:1. 

Let me just give the outer svg an explicit viewBox matching the symbol's. Good.

For the card SVGs, same approach: `<svg class="card-svg" viewBox="0 40 400 288"><use href="#taco"/></svg>`.

OK.

Now let's write the JS.

```js
// reveal
const io = new IntersectionObserver((entries)=>{
  entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('in'); });
},{threshold:0.12});
document.querySelectorAll('.reveal').forEach(el=>io.observe(el));

// builder
const state = {protein:'bulgogi', sauce:'crema', heat:'loco'};
const config = {
  protein:{
    bulgogi:{meat:'#8B3B1E', meat2:'#A34A25', label:'BULGOGI', price:0},
    pork:{meat:'#B23A1E', meat2:'#D1481F', label:'SPICY PORK', price:0},
    tofu:{meat:'#D9A441', meat2:'#E8BB63', label:'CRISPY TOFU', price:-0.5},
    chicken:{meat:'#A65B2C', meat2:'#C4763C', label:'GOCHU CHICKEN', price:0}
  },
  sauce:{
    crema:{sauce:'#FFF6E0', label:'CREMA'},
    gochu:{sauce:'#F0562B', label:'GOCHUJANG'},
    sesame:{sauce:'#E8C07A', label:'SESAME'},
    lime:{sauce:'#C9F04A', label:'LIME'}
  },
  heat:{
    mild:{label:'MILD', peppers:1, price:0},
    loco:{label:'LOCO', peppers:3, price:1},
    melt:{label:'FACE-MELT', peppers:5, price:1.5}
  }
};
```

Update function sets CSS vars on the preview svg and updates the name/price/pepper icons.

Name: `${protein.label} ${heat.label}` e.g. "BULGOGI LOCO". Price: base 7.5 + protein.price + heat.price.

Chips: `data-group` on the parent, `data-key` on the button.

Also add the heat peppers row in the preview.

Let me also add a "Add to order" button that shows a tiny toast "Added ✓". Hmm, keep it — a small feedback. Maybe a mini cart counter in the nav that increments. That's a nice touch. Let's do it: a badge on the "Order" button? Eh, might be confused. I'll skip the cart; instead the "Add to order" button pulses and shows "Added to bag ✓" text briefly. No alerts.

Actually, let's add a floating order pill in the nav showing the count. Simple. Maybe skip to keep it clean. I'll skip.

Now the "today" highlight:
```js
const today = new Date().getDay(); // 0 Sun
document.querySelectorAll('[data-day]').forEach(el=>{
  if(+el.dataset.day === today) el.classList.add('today');
});
```

Schedule days: Mon=1 ... Sun=0.

Let me write the week rows:
- Mon 1: Arts District, 11a–3p
- Tue 2: Silver Lake, 12p–8p
- Wed 3: Venice Boardwalk, 12p–7p
- Thu 4: DTLA Pershing Sq, 11a–4p
- Fri 5: WeHo Plummer Park, 5p–11p
- Sat 6: Smorgasburg Row, 10a–4p
- Sun 0: Echo Park Lake, 11a–6p

Footer.

Also I should add a subtle "scroll to explore" hint.

One more: the "Open now" indicator uses a pulsing dot.

Let me now write everything out.

For the circular badge text, let me use:
```html
<svg class="badge-rotate" viewBox="0 0 120 120" aria-hidden="true">
  <defs>
    <path id="circ" d="M60,60 m-46,0 a46,46 0 1,1 92,0 a46,46 0 1,1 -92,0"/>
  </defs>
  <text><textPath href="#circ" textLength="289" lengthAdjust="spacing">OPEN NOW · KIMCHI LOCO · HOT &amp; FRESH · </textPath></text>
</svg>
```
Circumference at r=46: 2π*46 = 289.0. 

Hmm, `textLength` with `lengthAdjust="spacing"` should distribute the text around the full circle. Good.

But wait: `&` in textPath needs `&amp;`. Fine.

Text color: lime. Font-size ~11, font-weight 800. Text may overflow the 120 viewBox if the letters are tall, but they're inside the circle's top. Fine.

Also add a center circle with a chili icon? The badge is at the top-right of the hero art. Let me put a small filled circle in the middle with a chili. Actually it will overlap the taco. Let me place the badge at the top-right corner, partially outside the art. With `position:absolute; right:-6%; top:0;`.

Hmm, on small screens that could overflow. I'll hide it under 900px or scale it down.

Let me also think about the hero on mobile: single column, art below the text, or maybe art first? Text first is better for a hero. Font sizes at 375px: h1 clamp(56px, 10.5vw, 156px) → 10.5vw = 39px, so 56px minimum. That's big but "KIMCHI" at 56px in Arial Black ≈ 56*0.72*6 = 242px wide. Fits in 375-48 = 327px. OK.

Let me reduce the hero padding on mobile to 5vw.

Now, let me write it all out.

Also, the `mask-image` on the hero grid: `-webkit-mask-image` for older Chrome. Fine.

Let me write the final code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Kimchi Loco — Korean Taco Truck</title>
<style>
...
</style>
</head>
<body>

<svg class="sprite" aria-hidden="true" focusable="false"><defs>...</defs><symbol>...</symbol></svg>

<header class="nav">...</header>

<main>
  <section class="hero">...</section>
  <div class="marquee-wrap">...</div>
  <section class="menu" id="menu">...</section>
  <section class="build" id="build">...</section>
  <section class="find" id="find">...</section>
</main>
<footer>...</footer>
<script>...</script>
</body>
</html>
```

Let me write out all the CSS now, carefully.

I'll write it in a reasonably organized manner.

```css
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#120d0b;
  color:#FFF4E4;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
```

Wait: `img,svg{max-width:100%}` — the sprite svg has width 0. Fine.

Display font variable:
```css
:root{
  --display:'Arial Black','Arial Bold','Helvetica Neue',Helvetica,Arial,sans-serif;
  --cream:#FFF4E4;
  --muted:#B6A497;
  --line:rgba(255,244,228,.13);
  --gochu:#E4341B;
  --chili:#FF6A1F;
  --lime:#C9F04A;
  --amber:#FFB347;
  --panel:#1a1310;
}
```

Nav:
```css
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:22px;
  padding:14px clamp(16px,4vw,44px);
  background:rgba(18,13,11,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,244,228,.08);
}
```
Fixed nav means the hero needs padding-top. Fine.

Hmm, fixed nav over the hero. Good.

Brand:
```css
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;letter-spacing:-.02em;font-size:17px;text-transform:uppercase}
.brand .chili{width:26px;height:26px;filter:drop-shadow(0 2px 6px rgba(228,52,27,.6))}
.brand b{color:var(--lime)}
```

Nav links:
```css
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links a{position:relative;padding:6px 0;transition:color .2s}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--lime);transition:width .3s}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{width:100%}
```

The "Order Now" button in the nav needs `margin-left` won't work if nav-links has margin-left:auto. Let me put `.nav-links{margin-left:auto}` and the button after. Good.

Buttons:
```css
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;border-radius:999px;
  background:var(--lime);color:#12100b;
  font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid transparent;
  transition:transform .2s, box-shadow .25s, background .25s, color .25s;
  box-shadow:0 10px 30px -10px rgba(201,240,74,.7);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(201,240,74,.85)}
.btn.ghost{background:transparent;color:var(--cream);border-color:rgba(255,244,228,.28);box-shadow:none}
.btn.ghost:hover{border-color:var(--cream);background:rgba(255,244,228,.06)}
.btn.sm{padding:10px 18px;font-size:12px}
```

Hero:

```css
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px clamp(16px,5vw,64px) 70px;overflow:hidden}
```

Note: `100svh` is supported in modern Chrome. Fallback: `min-height:100vh` first then `100svh`.

hero-inner grid.

Let me write the headline sizes:
```css
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(54px,9.6vw,142px);line-height:.84;letter-spacing:-.045em;text-transform:uppercase;margin:16px 0 0}
```

`.loco{...}` with gradient.

Pill:
```css
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;border:1px solid rgba(255,244,228,.18);background:rgba(255,244,228,.05);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#E9D9C9}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(201,240,74,.7);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,240,74,.6)}70%{box-shadow:0 0 0 10px rgba(201,240,74,0)}100%{box-shadow:0 0 0 0 rgba(201,240,74,0)}}
```

Lede:
```css
.lede{margin:22px 0 0;max-width:520px;font-size:clamp(15px,1.25vw,18px);line-height:1.6;color:#D9C8B8}
```

Stats:
```css
.hero-stats{display:flex;gap:34px;margin:34px 0 0;padding:0;list-style:none;flex-wrap:wrap}
.hero-stats li{display:flex;flex-direction:column;gap:2px}
.hero-stats b{font-family:var(--display);font-size:24px;letter-spacing:-.02em;color:var(--cream)}
.hero-stats span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
```

hero-art as described.

Now writing the menu section:

```css
.section{padding:clamp(70px,10vw,130px) clamp(16px,5vw,64px);position:relative;max-width:1360px;margin:0 auto}
```
Hmm, but the sections need full-bleed backgrounds. I'll give backgrounds to the wrapper sections and use an inner `.wrap` with max-width.

Let me structure:
```html
<section class="menu" id="menu">
  <div class="wrap">
    <div class="section-head">...</div>
    <div class="menu-grid">...</div>
  </div>
</section>
```
`.menu{padding:clamp(70px,9vw,120px) 0;background:linear-gradient(180deg,#120d0b,#1a120e 40%,#120d0b)}` and `.wrap{max-width:1320px;margin:0 auto;padding:0 clamp(16px,5vw,64px)}`.

Section head:
```css
.section-head{margin-bottom:44px;max-width:720px}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:var(--chili);margin-bottom:14px}
h2{font-family:var(--display);font-size:clamp(34px,5.2vw,68px);line-height:.95;letter-spacing:-.035em;text-transform:uppercase;margin:0}
h2 em{font-style:normal;color:var(--lime)}
```

Cards. Let me write the card HTML fully.

```html
<article class="card reveal">
  <div class="card-art">
    <svg viewBox="0 40 400 288" style="--meat:#7A3418;--meat2:#96451F;--sauce:#FFF6E0;--veg:#6FBF3B;--kimchi:#E8452A"><use href="#taco"/></svg>
    <span class="tag">Best seller</span>
  </div>
  <div class="card-body">
    <h3>Bulgogi Loco</h3>
    <p>Sweet-soy bulgogi, sesame slaw, pickled jalapeño, crema.</p>
    <div class="card-foot">
      <span class="price">$6.50</span>
      <span class="heat" data-level="3"><svg class="pep"><use href="#pep"/></svg>...</span>
    </div>
  </div>
</article>
```

For heat, I'll generate the peppers with a small JS loop, or just write 5 peppers with a class `on` on the first N. Let me write a helper in HTML: `<span class="heat"><i class="on"></i><i class="on"></i><i class="on"></i><i></i><i></i></span>` where `i` is styled as a pepper shape via CSS. That's the least markup.

CSS pepper shape:
```css
.heat i{width:8px;height:13px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:rgba(255,244,228,.15);display:inline-block;transform:rotate(14deg);margin-left:3px;transition:background .2s}
.heat i.on{background:linear-gradient(180deg,#FF6A1F,#E4341B);box-shadow:0 0 8px rgba(228,52,27,.6)}
```
Hmm, that's a rounded blob. It reads okay as a pepper when small. Let me add a slight taper via border-radius: `50% 50% 45% 45% / 65% 65% 35% 35%`. Eh, it'll look like a little red pill. Acceptable. Actually, let me use an SVG pepper for the heat too — but writing 5 `<svg><use href="#pep"/></svg>` per card × 6 cards = 30 svgs. That's fine, it's just markup. Hmm, verbose. The CSS pill is fine and looks like a chili at small size.

I'll go with the CSS pill. Actually let me make it look more chili-like: use a `clip-path` with a teardrop? Simpler: keep the pill.

Fine.

Now the build section.

```html
<section class="build" id="build">
  <div class="wrap">
    <div class="section-head">
      <span class="eyebrow">Sizzle Lab</span>
      <h2>Build your own <em>loco</em></h2>
    </div>
    <div class="build-grid">
      <div class="build-stage">
        <div class="stage-glow"></div>
        <svg class="build-taco" id="preview" viewBox="0 40 400 288"><use href="#taco"/></svg>
        <div class="build-readout">
          <div class="build-name" id="buildName">BULGOGI · LOCO</div>
          <div class="build-price" id="buildPrice">$8.50</div>
        </div>
      </div>
      <div class="build-panel">
        <div class="opt">
          <h4><span>01</span> Protein</h4>
          <div class="chips" data-group="protein">
            <button class="chip active" data-key="bulgogi">Bulgogi beef</button>
            <button class="chip" data-key="pork">Spicy pork</button>
            <button class="chip" data-key="chicken">Gochu chicken</button>
            <button class="chip" data-key="tofu">Crispy tofu</button>
          </div>
        </div>
        <div class="opt">
          <h4><span>02</span> Sauce</h4>
          <div class="chips" data-group="sauce">
            <button class="chip active" data-key="crema">Gochu crema</button>
            <button class="chip" data-key="sesame">Sesame aioli</button>
            <button class="chip" data-key="fire">Fire sauce</button>
            <button class="chip" data-key="lime">Lime crema</button>
          </div>
        </div>
        <div class="opt">
          <h4><span>03</span> Heat</h4>
          <div class="chips" data-group="heat">
            <button class="chip" data-key="mild">Mild</button>
            <button class="chip active" data-key="loco">Loco</button>
            <button class="chip" data-key="melt">Face-melt</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
```

JS handles clicks.

Build stage: centered, with a radial glow.

Now the find section.

```html
<section class="find" id="find">
  <div class="wrap">
    <div class="find-card">
      <div class="find-main">
        <span class="live"><i></i>Open now · until 9pm</span>
        <h2>Arts<br>District</h2>
        <p class="addr">2nd &amp; Traction Ave, Los Angeles CA</p>
        <div class="find-actions">
          <a class="btn" href="#">Get directions</a>
          <a class="btn ghost" href="#">Book the truck</a>
        </div>
      </div>
      <div class="find-week">
        <h4>This week's route</h4>
        <ul class="week" id="week">
          <li data-day="1"><span class="d">Mon</span><span class="p">Arts District</span><span class="h">11–3</span></li>
          ...
        </ul>
      </div>
    </div>
  </div>
</section>
```

Footer:
```html
<footer>
  <div class="wrap foot-inner">
    <div class="foot-brand">
      <div class="brand big">KIMCHI <b>LOCO</b></div>
      <p>Seoul born. LA raised. Served with a paper napkin and zero regrets.</p>
    </div>
    <div class="foot-cols">
      <div><h5>Menu</h5><a href="#menu">Tacos</a>...</div>
      ...
    </div>
  </div>
  <div class="foot-bottom">© 2024 Kimchi Loco · Made with gochujang</div>
</footer>
```

Hmm — 2024 or current year? Use a fixed "2025" or compute. I'll just write "Kimchi Loco" without year, or use new Date().getFullYear() in JS. Let's just hardcode a nice line.

Actually, let me add a big "COME HUNGRY" text at the footer top with a marquee-ish style. Keep it simple: a giant outlined text.

Let me add:
```html
<div class="foot-cta">
  <h2>COME<br>HUNGRY</h2>
  <a class="btn">Find the truck</a>
</div>
```

With giant outlined text. Good.

Now let me finalize the JS.

```js
(function(){
  // Reveal
  const revealEls = document.querySelectorAll('.reveal');
  if('IntersectionObserver' in window){
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
    },{threshold:.15, rootMargin:'0px 0px -60px 0px'});
    revealEls.forEach(el=>io.observe(el));
  } else {
    revealEls.forEach(el=>el.classList.add('in'));
  }

  // Today
  const today = new Date().getDay();
  document.querySelectorAll('#week li').forEach(li=>{
    if(Number(li.dataset.day)===today) li.classList.add('today');
  });

  // Builder
  const cfg = {
    protein:{
      bulgogi:{meat:'#8B3B1E',meat2:'#A34A25',label:'BULGOGI',price:0},
      pork:{meat:'#B23A1E',meat2:'#D1481F',label:'SPICY PORK',price:0},
      chicken:{meat:'#A65B2C',meat2:'#C4763C',label:'GOCHU CHICKEN',price:.5},
      tofu:{meat:'#D9A441',meat2:'#EBC26E',label:'CRISPY TOFU',price:-.5}
    },
    sauce:{
      crema:{sauce:'#FFF6E0',label:'CREMA',price:0},
      sesame:{sauce:'#E9C583',label:'SESAME',price:0},
      fire:{sauce:'#FF4A16',label:'FIRE',price:.5},
      lime:{sauce:'#C9F04A',label:'LIME',price:0}
    },
    heat:{
      mild:{label:'MILD',peppers:1,price:0,veg:'#7DD44A'},
      loco:{label:'LOCO',peppers:3,price:1,veg:'#6FBF3B'},
      melt:{label:'FACE-MELT',peppers:5,price:1.5,veg:'#5CA82E'}
    }
  };
  const state = {protein:'bulgogi', sauce:'crema', heat:'loco'};
  const preview = document.getElementById('preview');
  const nameEl = document.getElementById('buildName');
  const priceEl = document.getElementById('buildPrice');

  function update(){
    const p = cfg.protein[state.protein], s = cfg.sauce[state.sauce], h = cfg.heat[state.heat];
    preview.style.setProperty('--meat', p.meat);
    preview.style.setProperty('--meat2', p.meat2);
    preview.style.setProperty('--sauce', s.sauce);
    preview.style.setProperty('--veg', h.veg);
    nameEl.textContent = p.label + ' · ' + h.label;
    const total = 7.5 + p.price + s.price + h.price;
    priceEl.textContent = '$' + total.toFixed(2);
    // pop animation
    preview.animate([{transform:'scale(.96) rotate(-2deg)'},{transform:'scale(1) rotate(0)'}],{duration:320,easing:'cubic-bezier(.2,.8,.2,1)'});
  }
  document.querySelectorAll('.chips').forEach(group=>{
    group.addEventListener('click', e=>{
      const btn = e.target.closest('.chip');
      if(!btn) return;
      state[group.dataset.group] = btn.dataset.key;
      group.querySelectorAll('.chip').forEach(c=>c.classList.toggle('active', c===btn));
      update();
    });
  });
  update();
})();
```

Note: `preview.animate` — WAAPI is supported. But the CSS `animation` on `.build-taco` (if I add a bob) would conflict. I'll avoid a CSS animation on the preview and rely on the WAAPI pop, or add a subtle float on the wrapper. Let's not animate the preview itself.

Also, the taco in the build stage can be given a drop shadow via CSS filter.

The `.today` highlight.

Now the marquee CSS:

```css
.marquee-wrap{overflow:hidden;padding:18px 0;position:relative;z-index:3}
.marquee{background:var(--lime);color:#120d0b;transform:rotate(-1.8deg);width:112vw;margin-left:-6vw;padding:14px 0;border-top:3px solid #120d0b;border-bottom:3px solid #120d0b}
.marquee-track{display:flex;gap:0;white-space:nowrap;animation:scrollx 28s linear infinite}
.marquee-track span{font-family:var(--display);font-size:clamp(16px,2.2vw,26px);letter-spacing:-.01em;text-transform:uppercase;padding:0 18px;display:inline-flex;align-items:center}
.marquee-track b{font-family:var(--display);font-size:clamp(16px,2.2vw,26px);padding:0 18px;color:rgba(18,13,11,.4)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
```

For the seamless loop, the track must contain the content twice and animate to -50%. Since the content width includes the gap, translateX(-50%) of the track works if the track is exactly 2× the content. I'll duplicate with `aria-hidden` on the second copy.

Let me structure:
```html
<div class="marquee-track">
  <div class="mgroup">...</div>
  <div class="mgroup" aria-hidden="true">...</div>
</div>
```
with `.mgroup{display:flex;flex-shrink:0}` and the track `display:flex;width:max-content`. Then translateX(-50%) shifts exactly one group. 

Now the hero art details. Let me write:

```html
<div class="hero-art">
  <div class="glow"></div>
  <div class="steam s1"></div>
  <div class="steam s2"></div>
  <div class="steam s3"></div>
  <svg class="taco-hero" viewBox="0 40 400 288" aria-hidden="true"><use href="#taco"/></svg>
  <div class="badge-wrap">
    <svg class="badge-rotate" viewBox="0 0 120 120">...</svg>
  </div>
  <div class="spice-chip">GOCHUJANG<br><b>LVL 3</b></div>
</div>
```

The steam should be positioned above the taco. The taco is centered; the top of the taco is around y=56 of 400 → in the viewBox 40..328, that's about 5% from the top. So steam at top: 0%, left 50%.

The `.hero-art` is a grid with place-items center; the absolutely positioned children need `position:absolute` and the parent `position:relative`.

Let me set `.hero-art{position:relative;display:grid;place-items:center;min-height:min(560px, 60vw)}`.

The taco: `width:min(540px,92%)`.

Steam positions: `left:38%`, `left:50%`, `left:62%`, `top:0`.

Hmm, the taco's top (fillings) is around y=56 in a viewBox of 40-328, so the top is at 5.6% of the height. If the SVG has width 540 and height 540*0.72=389, then the top of the taco is at 0.056*389 = 22px from the top of the SVG. So the steam at top:0 would be above the taco's top. Good, it'll rise from there.

Actually, the fillings are the top, and the steam should come from the top of the taco. Since the taco is centered horizontally in the art, the top of the fillings is at around y=56 → 5.6% from the top. The steam at top:0 to top:-40px overlapping. Fine, I'll place the steam at `top:2%` and let it rise.

Also, since the taco has a bob animation and the steam doesn't, they'll drift apart slightly. Fine, it's steam.

Badge: position absolute, right: 2%, top: 2%, 120px.

For mobile (max-width 900px), hide the badge or shrink it.

Spice chip: a small rotated tag at the bottom-left of the art: "GOCHUJANG LVL 3" in a lime-bordered chip. Hmm, maybe too much. Let me include a rotated sticker "SINCE 2024" or a "FIRE" sticker. I'll add a small rotated sticker "HOT & FRESH" — but the badge already says that. Let me make the sticker "GOCHUJANG LVL 3 / 🌶"... no emoji. 

I'll do a sticker: a dark rounded rect rotated -8deg with lime text "SEOUL → LA". Nice.

OK. Let me write the final HTML now. I'll be careful about the SVG symbol structure — `<symbol>` inside an `<svg>` with `<defs>` before it. Actually the `<defs>` can be inside the symbol too. Let me put the gradients in the top-level `<defs>` and the symbol after.

One concern: `<use href="#taco"/>` — for the symbol to be found, the sprite svg must be in the DOM. Yes.

Let me write everything.

For the "reveal" animation:
```css
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
```
And stagger with `transition-delay` via nth-child or a data-delay. I'll add inline `style="transition-delay:.08s"` etc. Simpler: `.reveal:nth-child(2){transition-delay:.08s}` etc. But the observer adds `.in` when each enters. I'll use CSS nth-child delays within `.menu-grid`.

Careful: if JS fails, content stays invisible. The IntersectionObserver is reliable. But to be safe, add a fallback: if `document.documentElement.classList` doesn't get 'js'... I'll just make sure everything works. Actually a safer pattern: set the `.reveal` initial state only if JS runs — add a class `js` to html at the top of the script. But the script is at the end of the body, so there'd be a flash. It's fine; the script runs before first paint typically. I'll just keep it simple with CSS-only opacity since IntersectionObserver is universally supported.

Hmm, but if the observer fires for elements already in the viewport... it does fire on observe. Good.

Let me now be careful: the hero content should NOT be `.reveal` (it should be visible immediately). I'll use a CSS entrance animation for the hero instead:
```css
.hero-copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy > *:nth-child(1){animation-delay:.05s}
...
```
With `@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}`.

And the art: `animation: rise 1s .2s backwards`.

Good — visible immediately with a nice entrance.

Now let's write the whole thing.

Regarding the taco SVG in the hero: I want it big and impressive. The hero art at 540px wide. Good.

Let me write the final SVG symbol with the viewBox "0 40 400 288".

Wait, the rim line at y=130 with a 7px stroke → fine.

The fillings path starts at y=142 at the bottom which is below the rim (130). Good.

Let me double check the fillings path:
`M46,142 C34,116 56,92 84,94 C90,68 128,56 152,74 C170,52 212,50 230,72 C254,50 296,58 306,86 C338,88 358,114 346,142 Z`

- Start (46,142), curve to (84,94) with controls (34,116),(56,92). OK.
- Then curve to (152,74) with controls (90,68),(128,56). So it rises up to around y=60-74. 
- Then to (230,72) with controls (170,52),(212,50) — up to y≈55.
- Then to (306,86) with controls (254,50),(296,58).
- Then to (346,142) with controls (338,88),(358,114).
- Close back to (46,142).

So the mound spans x from 46 to 346, peaking at y≈52. Good. The shell rim is at y=130, so 78px of filling visible. 

The meat ellipses at cy=114-124 with ry=30-34 extend up to y≈80. They'll be inside the lettuce mound. Good.

The kimchi rects at y=106-130 are visible. Good.

Sesame at y=92-106, visible. Good.

Now the shell: `M18,130 A182,182 0 0 0 382,130 Z`. Wait — from (18,130) to (382,130) with radius 182: the distance between them is 364 = 2*182. So it's exactly a semicircle. Center at (200,130). Sweep 0 → lower half → bottom at (200,312). 

Now the char spots are inside the shell. Good.

The drizzle at y=145-175 — on the shell. Good.

Now, the viewBox "0 40 400 288" means y from 40 to 328. The shell bottom is at 312. Good. And the fillings' top at y=52 leaves 12px of margin. 

Let me now write everything out. I'll be thorough.

One more: the card art background glow. And a `.tag` badge.

Let me write the final code.

Also need `#pep` symbol? I decided to use CSS pills for the heat. Skip the pep symbol. But wait, I don't use it anywhere else. OK, skip.

Let me write out the menu items:

1. Bulgogi Loco — $6.50 — Sweet-soy bulgogi, sesame slaw, pickled jalapeño, crema. Heat 3. BEST SELLER.
2. Kimchi Carnitas — $6.75 — 8-hour pork, charred kimchi, cilantro, lime. Heat 3.
3. Gochu Chicken — $6.25 — Crispy thigh, gochujang glaze, scallion, sesame. Heat 4.
4. Tofu Loco — $5.75 — Crispy tofu, ssamjang, cucumber, sesame. Heat 2. VEGAN.
5. Fire Short Rib — $8.50 — Galbi short rib, fire sauce, mint, onion. Heat 5. NEW.
6. Elote Kimchi — $5.50 — Grilled corn, kimchi, cotija, chili-lime. Heat 1. VEG.

Good, 6 items.

Names for the card SVG vars:
1. meat #7A3418 / meat2 #96451F, sauce #FFF6E0
2. meat #8A4A2A? carnitas is lighter: #A9612F / #C0774A
3. chicken: #C4652A / #E07C36
4. tofu: #D9A441 / #EBC26E
5. short rib: #5E2413 / #7A3418, sauce #FF4A16 (fire)
6. elote: no meat → use corn yellow #F2C14E, sauce #FFF6E0

OK.

Now writing. Let me be careful with CSS `aspect-ratio` and grid.

I'll write the final answer now.

For the footer big text, use `-webkit-text-stroke: 2px rgba(255,244,228,.25); color:transparent`.

Let me also add `scroll-margin-top: 80px` to sections so the fixed nav doesn't cover the anchors.

Alright, writing it.

Final check on the marquee: I need `.marquee-track{display:flex;width:max-content;animation:...}`. Each `.mgroup{display:flex;align-items:center;flex:0 0 auto}`. Then translateX(-50%) of the track = one group width. ✓.

Let me write the content for the group:
```html
<div class="mgroup">
  <span>Bulgogi beef</span><b>✦</b>
  <span>Crispy kimchi</span><b>✦</b>
  <span>Gochujang crema</span><b>✦</b>
  <span>Corn tortillas</span><b>✦</b>
  <span>Seoul × SoCal</span><b>✦</b>
  <span>Open late</span><b>✦</b>
</div>
```

Good.

Now writing the final code. I'll try to keep it clean.

One thing about `100svh` — I'll use `min-height:100vh; min-height:100svh;`.

Also the hero has a fixed nav over it; padding-top 120px is enough for the nav height (~60px).

Let's write.

For the build stage glow, use a radial gradient div.

Let me write the find-week `today` style:
```css
.week li{display:grid;grid-template-columns:52px 1fr auto;gap:12px;padding:11px 12px;border-radius:12px;font-size:14px;color:#C9B7A8;border:1px solid transparent}
.week li.today{background:rgba(201,240,74,.1);border-color:rgba(201,240,74,.4);color:var(--cream)}
.week li.today .d{color:var(--lime)}
.week .d{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.week .h{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
```

Good.

Now writing everything for real.

Also, small detail: `body` background could have a subtle grain. I'll add a fixed overlay with a repeating radial gradient at low opacity. Skip for performance; the gradients are enough.

Writing the final answer.

For accessibility and robustness, add `aria-hidden` to decorative SVGs.

Let me write the code.

Actually one more consideration on `-webkit-text-stroke` for the footer text: supported in Chrome. Fine.

Let me write it.

```css
.foot-cta h2{
  font-family:var(--display);
  font-size:clamp(56px,13vw,190px);
  line-height:.8;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,244,228,.28);
  margin:0;
}
```

Good.

Now writing the whole file.

I should double check the hero grid at 375px: `grid-template-columns:1fr` with the art below the text. Set `.hero-inner{grid-template-columns:1fr}` at max-width 960px, and the art order after. Actually the art first might be nicer on mobile? Text first is better for readability. Keep text first.

The hero art min-height on mobile should be smaller.

Let's write.

Final: make sure there is no horizontal scrollbar. The `.hero` has overflow:hidden. The marquee-wrap has overflow:hidden. The build/find sections have padding and the wrap has max-width. Body overflow-x hidden. Should be fine.

Writing now.