Models 44
Claude Haiku 4.5AnthropicClaude Haiku 5.5AnthropicClaude Opus 5.5AnthropicClaude Sonnet 5.5AnthropicNorth Mini Code (free)CohereDeepSeek V4 Flash 0423DeepSeekDeepSeek V4 Pro 0813DeepSeekDeepSeek V4.1 Flash 1017DeepSeekDots3-Note Preview (free)Dots StudioGemini 3.1 Flash LiteGoogleGemini 3.8 FlashGoogleGemini 4 ArgonGoogleGemini 4 HydrogenGoogleGemma 4 31BGoogleLFM2.5-2.6B (free)LiquidAILFM3-1.7B (free)LiquidAIMuse EmberMetaMiniMax M3MiniMaxMiniMax M3.1 FlashMiniMaxMinistral 3 14B 2512MistralMistral Large 4MistralMistral Small 4MistralKimi K3.1 ProMoonshotAINemotron 3 Nano Omni (free)NVIDIANemotron 3 SuperNVIDIANemotron 3 Ultra (free)NVIDIANemotron 3.5 Lightning (free)NVIDIANemotron 3.5 Super VL (free)NVIDIAGPT-5 NanoOpenAIGPT-6 LunaOpenAIGPT-6 Luna ProOpenAIGPT-6.1 SolOpenAIGPT-6.1 TerraOpenAIgpt-oss-120bOpenAIQwen3 Coder NextQwenQwen3.8 FlashQwenQwen3.8 Max (0902)QwenFlint (free)RecursiveGrok 4.7SpaceXAIMiMo-V2.6-FlashXiaomiMiMo-V2.6-ProXiaomiXing4.0 29B A4B (free)XingChenGLM 5.3Z.aiGLM 5.3 FlashZ.ai
Food truck websiteOne-line

GLM 5.3 Flash

by Z.aiReasoningClean
Open in new window

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

How it went

Total time
6 min 47 s
Cost
$0.025
Output tokens
50,589
Spent thinking
30,851 tokens
Speed
124.4 tok/s
Console errors
0
First token after
410 ms
First visible text after
5 min 30 s
Prompt tokens
362
Code size
57.0 KB
Finish reason
stop
Served by
Cohere
Model id
z-ai/glm-5.3-flash
Reasoning sent
{"effort":"max"}
Max output
64,000 tokens
Generated
Nov 10, 2026

What it was asked

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

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

Code run-1.html · 916 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kimchi Loco — Korean-Mexican Food Truck</title>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E23A22'/%3E%3Cpath d='M3 21c-1-.9-.7-2.5.3-3.7 2.9-3.3 7.2-5.5 11.3-7 2.6-1 5-1.9 6.3-3.5.8-1 .9-2.2.4-3.1 1.2.5 2.1 1.7 2 3-.2 2.6-2.7 4.4-5.7 5.6-4.5 1.9-9.1 4-11.6 7.3-.8 1-2 2.2-3 1.4z' fill='%23FBF3E4'/%3E%3C/svg%3E">
<style>
/* ============ TOKENS & BASE ============ */
:root{
  --cream:#FBF3E4; --paper:#F6EBD7; --ink:#191410;
  --red:#E23A22; --orange:#F57C1F; --yellow:#F5C531; --green:#2F5E33;
  --display:'Archivo Black','Arial Black','Arial Bold',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --mono:'Courier New',Courier,monospace;
  --shadow:6px 6px 0 var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;overflow-x:hidden}
img,svg{display:block}
::selection{background:var(--red);color:var(--cream)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
section{scroll-margin-top:80px}

/* ============ SHARED BITS ============ */
.wrap{max-width:1160px;margin:0 auto}
.sec{padding:88px 24px}
.sec-red{background-color:var(--red);color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='4' cy='4' r='1.7' fill='%23FBF3E4' fill-opacity='.13'/%3E%3C/svg%3E")}
.sec-yellow{background-color:var(--yellow);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='5' cy='5' r='1.6' fill='%23191410' fill-opacity='.09'/%3E%3C/svg%3E")}
.sec-ink{background:var(--ink);color:var(--cream)}
.kicker{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2.5px;text-transform:uppercase}
h2{font-family:var(--display);font-size:clamp(44px,7vw,84px);line-height:.92;letter-spacing:-1px;text-transform:uppercase;margin-top:10px}
.sec-red h2 span{color:var(--yellow);-webkit-text-stroke:2.5px var(--ink)}
.sec-yellow h2 span{color:var(--red)}
.sec-ink h2 span{color:var(--yellow)}
h2 span{color:var(--red)}
.lede{max-width:52ch;margin-top:18px;font-size:18px}
.ic{width:1em;height:1em;flex:none}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-size:13px;letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--cream);border:3px solid var(--ink);border-radius:9px;padding:14px 22px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s,background .2s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-red{background:var(--red);color:var(--cream)}
.btn-yellow{background:var(--yellow)}
.btn-ghost{background:var(--cream)}
.btn-small{padding:10px 16px;font-size:11px;box-shadow:4px 4px 0 var(--ink)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--cream);display:flex;align-items:center;gap:24px;padding:12px 24px;border-bottom:3px solid var(--red)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:17px;letter-spacing:1px;color:var(--cream);text-decoration:none}
.logo{width:34px;height:34px;border-radius:50%;background:var(--red);border:2px solid var(--cream);display:grid;place-items:center;flex:none}
.logo .ic{width:17px;height:17px;color:var(--cream)}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--cream);opacity:.8;text-decoration:none}
.nav-links a:hover{opacity:1;color:var(--yellow)}
.cart-btn{display:flex;align-items:center;gap:9px;background:var(--red);color:var(--cream);border:2px solid var(--cream);border-radius:8px;padding:9px 14px;font-family:var(--display);font-size:12px;letter-spacing:1px;cursor:pointer;box-shadow:3px 3px 0 #000}
.cart-btn:hover{background:var(--orange)}
#cartCount{background:var(--cream);color:var(--ink);border-radius:999px;padding:1px 9px;font-family:var(--mono);font-weight:700}
#cartCount.pop{animation:pop .35s ease}
@keyframes pop{50%{transform:scale(1.45)}}

/* ============ HERO ============ */
.hero{padding:64px 24px 48px}
.hero-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px;align-items:center}
.hero-title-wrap{position:relative;display:inline-block}
.hero-title{font-family:var(--display);font-size:clamp(64px,11.5vw,150px);line-height:.88;letter-spacing:-3px;text-transform:uppercase}
.hero-title .line{display:inline-block}
.l2{color:var(--red);-webkit-text-stroke:3px var(--ink);transform:rotate(-2deg) translateX(6px)}
.ch{font-style:normal;transition:color .35s}
.hero-title:hover .ch{transition-delay:calc(var(--i)*55ms)}
.hero-title:hover .l1 .ch{color:var(--red)}
.hero-title:hover .l2 .ch{color:var(--yellow)}
.est{position:absolute;top:-26px;right:-8px;width:88px;height:88px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);display:grid;place-items:center;text-align:center;font-family:var(--display);font-size:15px;line-height:1.15;transform:rotate(9deg);z-index:2}
.hero-sub{font-size:19px;max-width:46ch;margin:22px 0 28px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-stats{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;margin-top:26px}
.hero-stats .ic{width:16px;height:16px;color:var(--yellow);-webkit-text-stroke:.5px var(--ink)}
.hero-truck{position:relative;min-height:1px}
.burst{position:absolute;left:0;top:2%;width:100%;animation:spin 50s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.truck-svg{position:relative;width:100%;cursor:pointer;animation:bob 5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(.6deg)}}
.truck-svg.honk{animation:honkwiggle .5s ease}
@keyframes honkwiggle{25%{transform:rotate(-1.6deg)}75%{transform:rotate(1.6deg)}}
.sign-wobble{transform-box:fill-box;transform-origin:bottom center;animation:wob 3.4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.steam path{transform-box:fill-box;transform-origin:bottom;animation:rise 3.4s ease-in-out infinite;opacity:0}
.steam path:nth-child(2){animation-delay:1.1s}
.steam path:nth-child(3){animation-delay:2.2s}
@keyframes rise{0%{transform:translateY(6px);opacity:0}35%{opacity:.4}100%{transform:translateY(-14px);opacity:0}}
.spotted-chip{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(-1.5deg);display:flex;align-items:center;gap:9px;background:var(--ink);color:var(--cream);border:2px solid var(--red);border-radius:999px;padding:9px 16px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1px;white-space:nowrap;text-decoration:none}
.spotted-chip:hover{background:var(--red)}
.spotted-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}

/* ============ MARQUEES ============ */
.marquee{overflow:hidden;padding:15px 0;user-select:none}
.m-track{display:flex;width:max-content;animation:slide 30s linear infinite}
.marquee:hover .m-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.m-black{background:var(--ink);color:var(--yellow)}
.m-black .m-group{display:flex;align-items:center;gap:30px;padding-right:30px}
.m-black span{font-family:var(--display);font-size:15px;letter-spacing:2px;white-space:nowrap}
.m-black .ic{width:17px;height:17px;color:var(--red)}
.m-red{background:var(--red);transform:rotate(-1deg) scale(1.02)}
.m-red .m-group{display:flex;align-items:center;gap:22px;padding-right:22px;padding:6px 0}
.m-red span{background:var(--cream);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:10px 18px;border-radius:10px;font-family:var(--mono);font-weight:700;font-size:13px;white-space:nowrap;transform:rotate(-1.5deg)}
.m-red span:nth-child(even){transform:rotate(1.5deg)}

/* ============ MENU ============ */
.sec-head{max-width:1160px;margin:0 auto}
.heat-legend{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;margin-top:14px;color:rgba(251,243,228,.9)}
.heat-legend .ic{width:15px;height:15px;color:var(--yellow)}
.menu-board{max-width:1160px;margin:44px auto 0;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:12px 12px 0 var(--ink)}
.mrow + .mrow{border-top:3px solid var(--ink)}
.mrow-head{width:100%;display:grid;grid-template-columns:60px 1fr auto auto 44px;align-items:center;gap:18px;padding:20px 26px;background:transparent;border:0;cursor:pointer;text-align:left;font-family:inherit;color:inherit;transition:background .2s,color .2s}
.mrow-head:hover{background:var(--ink);color:var(--cream)}
.mrow.open .mrow-head{background:var(--ink);color:var(--cream)}
.mnum{font-family:var(--mono);font-weight:700;font-size:15px;color:var(--red)}
.mname{font-family:var(--display);font-size:17px;letter-spacing:1px;text-transform:uppercase}
.mname .tag{font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:1px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:2px 9px;border-radius:999px;display:inline-block;transform:rotate(-2deg);margin-left:10px;vertical-align:2px}
.mheat{display:flex;gap:4px}
.mheat .ic{width:16px;height:16px;color:var(--red)}
.mprice{font-family:var(--display);font-size:18px}
.mprice small{font-family:var(--mono);font-size:11px;opacity:.65;font-weight:700}
.mtoggle{width:36px;height:36px;border:2px solid currentColor;border-radius:50%;display:grid;place-items:center;justify-self:end}
.mtoggle .ic{width:15px;height:15px}
.mrow.open .mtoggle{transform:rotate(45deg);background:var(--red);border-color:var(--cream);color:var(--cream)}
.mrow-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.mrow.open .mrow-body{grid-template-rows:1fr}
.mrow-inner{overflow:hidden;padding:0 26px 0 104px}
.mrow-inner p{padding-top:2px;max-width:62ch}
.mlist{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;margin:10px 0 16px;color:var(--red)}
.mrow-inner .btn{margin-bottom:22px}

/* ============ BUILDER ============ */
.build-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:48px;align-items:start}
.ctrl{margin-top:24px}
.ctrl-label{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px;margin-bottom:10px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{display:inline-flex;align-items:center;gap:7px;background:transparent;border:3px solid var(--ink);border-radius:8px;padding:10px 15px;font-family:var(--display);font-size:12px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;color:var(--ink);transition:background .2s,color .2s}
.opt .ic{width:13px;height:13px;color:var(--red)}
.opt:hover{background:var(--cream)}
.opt.on{background:var(--ink);color:var(--cream);box-shadow:3px 3px 0 rgba(25,20,16,.35)}
.build-bar{margin-top:32px;border-top:3px solid var(--ink);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.price-line span{display:block;font-family:var(--display);font-size:16px;text-transform:uppercase}
.price-line b{font-family:var(--display);font-size:30px;color:var(--red);-webkit-text-stroke:1px var(--ink)}
.build-stage{background:var(--cream);border:3px solid var(--ink);border-radius:18px;box-shadow:12px 12px 0 var(--ink);padding:30px 26px 20px;position:sticky;top:96px}
.build-stage svg{width:100%;height:auto}
.stage-caption{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:1px;text-align:center;margin-top:10px;opacity:.75}
#tacoSvg.locos{animation:shimmy .5s ease-in-out infinite}
@keyframes shimmy{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.4deg)}75%{transform:rotate(1.4deg)}}
.flame{transform-box:fill-box;transform-origin:bottom center;animation:flick 1s ease-in-out infinite}
.flame.f2{animation-delay:.4s}
@keyframes flick{50%{transform:scaleY(.82)}}

/* ============ TRUCK / MAP ============ */
.truck-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:start}
.sec-ink .lede{color:rgba(251,243,228,.85)}
.days{display:grid;gap:8px;margin:28px 0 22px}
.day{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;text-align:left;background:transparent;border:2px solid rgba(251,243,228,.25);border-radius:10px;padding:12px 16px;color:var(--cream);cursor:pointer;transition:border-color .2s,background .2s}
.day:hover{border-color:var(--cream)}
.day.on{background:var(--red);border-color:var(--red);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.d-day{font-family:var(--display);font-size:15px;color:var(--yellow)}
.day.on .d-day{color:var(--cream)}
.d-loc{font-size:15px}
.d-time{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1px;opacity:.7}
.where-card{display:flex;align-items:center;gap:16px;border:2px solid rgba(251,243,228,.4);border-radius:12px;padding:16px 20px;flex-wrap:wrap}
.wc-day{font-family:var(--display);font-size:24px;color:var(--yellow)}
.wc-loc{font-weight:700;font-size:17px}
.wc-time{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1px;opacity:.75}
.wc-badge{margin-left:auto;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:2px;padding:4px 10px;border-radius:999px;animation:blink 1.8s infinite}
.map-wrap{border-radius:18px;overflow:hidden;border:3px solid rgba(251,243,228,.25);box-shadow:10px 10px 0 rgba(0,0,0,.45)}
.map-wrap svg{width:100%;height:auto;display:block}
#pin{transition:transform .8s cubic-bezier(.6,-.15,.35,1.25)}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(.35);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* ============ STORY ============ */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.pull{font-style:italic;font-size:clamp(24px,3.2vw,36px);line-height:1.3;color:var(--red);margin:20px 0 26px;max-width:24ch}
.story-copy p:not(.kicker){margin-bottom:16px;max-width:56ch}
.story-copy b{color:var(--red)}
.story-sign{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:1px;margin-top:6px}
.story-chips{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}
.story-chips span{font-family:var(--display);font-size:12px;letter-spacing:1px;background:var(--red);color:var(--cream);border:3px solid var(--ink);border-radius:8px;padding:8px 14px;box-shadow:4px 4px 0 var(--ink)}
.story-chips span:nth-child(1){transform:rotate(-3deg)}
.story-chips span:nth-child(3){transform:rotate(3deg)}
.polaroid{background:#FFFDF6;border:3px solid var(--ink);border-radius:4px;padding:18px 18px 0;box-shadow:12px 12px 0 var(--ink);transform:rotate(2.5deg);max-width:430px;justify-self:center;position:relative}
.tape{position:absolute;width:96px;height:28px;background:var(--yellow);opacity:.85;border:1px solid rgba(25,20,16,.25);top:-14px}
.tape.tl{left:-28px;transform:rotate(-40deg)}
.tape.tr{right:-28px;transform:rotate(40deg)}
.polaroid svg{width:100%;height:auto}
.polaroid figcaption{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:2px;text-align:center;padding:14px 0 18px}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:var(--cream);padding:64px 24px 0}
.foot-mark{font-family:var(--display);font-size:clamp(38px,7.5vw,92px);line-height:1;letter-spacing:-1px;color:transparent;-webkit-text-stroke:2px rgba(251,243,228,.3);user-select:none;margin-bottom:44px}
.foot-grid{display:grid;grid-template-columns:1.2fr .7fr .8fr 1.1fr;gap:34px}
.f-head{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--yellow);margin-bottom:14px}
.foot-grid p{font-size:15px;opacity:.85}
.f-brand p.tag{font-style:italic;margin:10px 0 18px}
.socials{display:flex;gap:10px}
.socials button{width:40px;height:40px;border-radius:50%;border:2px solid var(--cream);background:transparent;color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s}
.socials button:hover{background:var(--red);border-color:var(--red)}
.socials .ic{width:17px;height:17px}
.f-col p{line-height:2}
.f-col b{color:var(--yellow)}
#newsForm{display:flex;gap:10px;margin-top:14px}
#newsForm input{flex:1;min-width:0;background:rgba(251,243,228,.08);border:2px solid rgba(251,243,228,.35);border-radius:8px;padding:12px 14px;color:var(--cream);font-family:var(--mono);font-size:14px}
#newsForm input::placeholder{color:rgba(251,243,228,.45)}
#newsForm input:focus{border-color:var(--yellow);outline:none}
.news-msg{color:var(--yellow);font-family:var(--mono);font-weight:700;font-size:13px;margin-top:14px}
.foot-bottom{border-top:1px solid rgba(251,243,228,.15);margin-top:48px;padding:20px 0 26px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1px;opacity:.55}

/* ============ TOAST ============ */
#toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,90px);opacity:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .35s;background:var(--ink);color:var(--cream);border:3px solid var(--cream);box-shadow:6px 6px 0 rgba(0,0,0,.4);border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:11px;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.5px;z-index:100;max-width:92vw}
#toast.show{transform:translate(-50%,0);opacity:1}
#toast .ic{width:17px;height:17px;color:var(--red)}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .hero-inner,.build-grid,.truck-grid,.story-grid{grid-template-columns:1fr}
  .hero-truck{max-width:560px;margin:10px auto 0}
  .build-stage{position:static;order:-1;max-width:560px;margin:0 auto 8px}
  .est{width:70px;height:70px;font-size:12px;top:-18px;right:0}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){.nav-links{display:none}}
@media(max-width:640px){
  .sec{padding:64px 18px}
  .mrow-head{grid-template-columns:34px 1fr auto 38px;gap:10px;padding:16px 16px}
  .mprice{display:none}
  .mrow-inner{padding:0 16px 0 60px}
  .mname .tag{display:none}
  .day{grid-template-columns:44px 1fr;gap:8px}
  .d-time{grid-column:2}
  .foot-grid{grid-template-columns:1fr}
  .spotted-chip{white-space:normal;text-align:center}
  .hero-title{letter-spacing:-2px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
</style>
</head>
<body>

<!-- shared icon symbols -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
  <symbol id="chili" viewBox="0 0 24 24">
    <path fill="currentColor" d="M3 21c-1-.9-.7-2.5.3-3.7 2.9-3.3 7.2-5.5 11.3-7 2.6-1 5-1.9 6.3-3.5.8-1 .9-2.2.4-3.1 1.2.5 2.1 1.7 2 3-.2 2.6-2.7 4.4-5.7 5.6-4.5 1.9-9.1 4-11.6 7.3-.8 1-2 2.2-3 1.4z"/>
    <path fill="#2F5E33" d="M20.2 5.1c.4-1.5 1.8-2.5 3.4-2.3-.2 1.3-1.1 2.4-2.4 2.8-.4.1-.7-.1-1-.5z"/>
  </symbol>
  <symbol id="star" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7-6-3.4-6 3.4 1.3-6.7-5-4.6 6.8-.8z"/></symbol>
  <symbol id="plus" viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="currentColor" stroke-width="3.4" stroke-linecap="round" fill="none"/></symbol>
  <symbol id="arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" fill="none"/></symbol>
  <symbol id="pin" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 22C6 14 3 10.5 3 7a9 9 0 0 1 18 0c0 3.5-3 7-9 15Zm0-11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/></symbol>
  <symbol id="bag" viewBox="0 0 24 24"><path d="M5 8h14l-1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H8a1.8 1.8 0 0 1-1.8-1.8Z M9 8V6a3 3 0 0 1 6 0v2" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="ig" viewBox="0 0 24 24"><rect x="3.5" y="3.5" width="17" height="17" rx="5" fill="none" stroke="currentColor" stroke-width="2.2"/><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2.2"/><circle cx="17.2" cy="6.8" r="1.4" fill="currentColor"/></symbol>
  <symbol id="tk" viewBox="0 0 24 24"><path fill="currentColor" d="M15 4c.4 2 1.8 3.4 3.8 3.7v2.6c-1.5 0-2.8-.5-3.8-1.3v5.5a5 5 0 1 1-5-5c.3 0 .7 0 1 .1v2.7a2.3 2.3 0 1 0 1.6 2.2V4Z"/></symbol>
  <symbol id="xx" viewBox="0 0 24 24"><path d="M5 4l14 16M19 4L5 20" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" fill="none"/></symbol>
</svg>

<!-- ============ NAV ============ -->
<nav class="nav">
  <a class="brand" href="#top"><span class="logo"><svg class="ic"><use href="#chili"/></svg></span>KIMCHI LOCO</a>
  <div class="nav-links">
    <a href="#menu">Menu</a><a href="#build">Build a Taco</a><a href="#truck">Find the Truck</a><a href="#story">Story</a>
  </div>
  <button class="cart-btn" id="cartBtn" type="button" style="margin-left:auto"><svg class="ic"><use href="#bag"/></svg><span>Order</span><b id="cartCount">0</b></button>
</nav>

<!-- ============ HERO ============ -->
<header class="hero" id="top">
  <div class="hero-inner">
    <div class="hero-copy">
      <p class="kicker">Korean × Mexican food truck — marinating since 2024</p>
      <div class="hero-title-wrap">
        <h1 class="hero-title" aria-label="Kimchi Loco">
          <span class="line l1"><i class="ch" style="--i:0">K</i><i class="ch" style="--i:1">I</i><i class="ch" style="--i:2">M</i><i class="ch" style="--i:3">C</i><i class="ch" style="--i:4">H</i><i class="ch" style="--i:5">I</i></span><br>
          <span class="line l2"><i class="ch" style="--i:6">L</i><i class="ch" style="--i:7">O</i><i class="ch" style="--i:8">C</i><i class="ch" style="--i:9">O</i></span>
        </h1>
        <span class="est" aria-hidden="true">EST.<br>2024</span>
      </div>
      <p class="hero-sub">Seoul heat. Mexico City soul. We marinate for 24 hours and drive around for 12 — find us before the kimchi finds you.</p>
      <div class="hero-cta">
        <a class="btn btn-red" href="#truck"><svg class="ic"><use href="#pin"/></svg>Find the truck</a>
        <a class="btn btn-ghost" href="#menu">Peek the menu<svg class="ic"><use href="#arrow"/></svg></a>
      </div>
      <p class="hero-stats">
        <svg class="ic"><use href="#star"/></svg>4.9 · 1,200 reviews
        <span>·</span>2,300+ tacos served last week
        <span>·</span>0 regrets reported
      </p>
    </div>
    <div class="hero-truck">
      <svg class="burst" id="burst" viewBox="0 0 600 600" aria-hidden="true"></svg>
      <svg class="truck-svg" id="truckSvg" viewBox="0 0 560 360" role="img" aria-label="The Kimchi Loco food truck, illustrated">
        <ellipse cx="285" cy="326" rx="235" ry="14" fill="#191410" opacity=".16"/>
        <g class="steam" stroke="#191410" stroke-width="4.5" stroke-linecap="round" fill="none">
          <path d="M126 44c-6-8 6-13 0-21c-5-7 5-12 0-19"/>
          <path d="M138 40c-6-8 6-13 0-21c-5-7 5-12 0-19"/>
          <path d="M114 40c-6-8 6-13 0-21c-5-7 5-12 0-19"/>
        </g>
        <g>
          <g class="sign-wobble">
            <line x1="300" y1="80" x2="300" y2="46" stroke="#191410" stroke-width="5"/>
            <rect x="252" y="24" width="96" height="30" rx="7" fill="#F5C531" stroke="#191410" stroke-width="5"/>
            <text x="300" y="46" text-anchor="middle" font-family="'Arial Black',Arial,sans-serif" font-size="16" fill="#191410">OPEN!</text>
          </g>
          <rect x="44" y="74" width="440" height="18" rx="9" fill="#E23A22" stroke="#191410" stroke-width="5"/>
          <rect x="52" y="88" width="424" height="180" rx="16" fill="#FBF3E4" stroke="#191410" stroke-width="6"/>
          <clipPath id="bodyClip"><rect x="55" y="91" width="418" height="174" rx="13"/></clipPath>
          <g clip-path="url(#bodyClip)">
            <rect x="52" y="230" width="424" height="42" fill="#E23A22"/>
            <text x="270" y="260" text-anchor="middle" font-family="'Arial Black',Arial,sans-serif" font-size="26" letter-spacing="2" fill="#FBF3E4">KIMCHI LOCO</text>
          </g>
          <rect x="120" y="52" width="24" height="24" rx="4" fill="#191410"/>
          <rect x="78" y="112" width="98" height="66" rx="10" fill="#191410"/>
          <rect x="88" y="121" width="52" height="9" rx="4.5" fill="#FBF3E4" opacity=".28" transform="rotate(-8 88 121)"/>
          <rect x="212" y="116" width="176" height="62" rx="8" fill="#191410"/>
          <path d="M244 172a16 13 0 0 1 32 0z" fill="#F5C531" stroke="#F5C531"/>
          <circle cx="254" cy="168" r="3" fill="#E23A22"/><circle cx="266" cy="170" r="3" fill="#2F5E33"/>
          <path d="M288 172a16 13 0 0 1 32 0z" fill="#F5C531" stroke="#F5C531"/>
          <circle cx="298" cy="170" r="3" fill="#2F5E33"/><circle cx="310" cy="168" r="3" fill="#E23A22"/>
          <rect x="344" y="148" width="16" height="26" rx="5" fill="#E23A22" stroke="#191410" stroke-width="3"/>
          <rect x="349" y="140" width="6" height="9" rx="2" fill="#191410"/>
          <g stroke="#191410" stroke-width="4">
            <rect x="206" y="94" width="188" height="16" fill="#E23A22"/>
            <path d="M206 110a15.7 10 0 0 1 31.3 0z" fill="#FBF3E4"/><path d="M237.3 110a15.7 10 0 0 1 31.3 0z" fill="#E23A22"/>
            <path d="M268.6 110a15.7 10 0 0 1 31.3 0z" fill="#FBF3E4"/><path d="M300 110a15.7 10 0 0 1 31.3 0z" fill="#E23A22"/>
            <path d="M331.3 110a15.7 10 0 0 1 31.3 0z" fill="#FBF3E4"/><path d="M362.6 110a15.7 10 0 0 1 31.3 0z" fill="#E23A22"/>
          </g>
          <rect x="204" y="178" width="192" height="12" rx="3" fill="#191410"/>
          <rect x="468" y="198" width="10" height="24" rx="5" fill="#F5C531" stroke="#191410" stroke-width="3"/>
          <line x1="476" y1="116" x2="494" y2="102" stroke="#191410" stroke-width="5"/>
          <circle cx="497" cy="100" r="8" fill="#E23A22" stroke="#191410" stroke-width="4"/>
          <circle cx="150" cy="272" r="33" fill="#191410"/><circle cx="150" cy="272" r="13" fill="#F5C531" stroke="#191410" stroke-width="4"/>
          <circle cx="392" cy="272" r="33" fill="#191410"/><circle cx="392" cy="272" r="13" fill="#F5C531" stroke="#191410" stroke-width="4"/>
        </g>
      </svg>
      <a class="spotted-chip" id="spottedChip" href="#truck"><span class="dot"></span><span id="spottedText">TODAY: KTown Plaza · 5PM–11PM</span></a>
    </div>
  </div>
</header>

<!-- ============ TICKER ============ -->
<div class="marquee m-black" aria-hidden="true">
  <div class="m-track" data-dup>
    <div class="m-group">
      <span>GOCHUJANG TACOS</span><svg class="ic"><use href="#chili"/></svg>
      <span>KIMCHI FRIES</span><svg class="ic"><use href="#chili"/></svg>
      <span>BULGOGI QUESADILLA</span><svg class="ic"><use href="#chili"/></svg>
      <span>K-FC TACO</span><svg class="ic"><use href="#chili"/></svg>
      <span>OPEN TILL LATE</span><svg class="ic"><use href="#chili"/></svg>
      <span>EVERYTHING FERMENTED WITH LOVE</span><svg class="ic"><use href="#chili"/></svg>
    </div>
  </div>
</div>

<!-- ============ MENU ============ -->
<section id="menu" class="sec sec-red">
  <div class="sec-head reveal">
    <p class="kicker">The menu — prices in USD, regret in Scovilles</p>
    <h2>EAT <span>LOCO</span></h2>
    <p class="heat-legend">
      heat scale: <svg class="ic"><use href="#chili"/></svg> gentle
      <svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg> toasty
      <svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg> sign a waiver
    </p>
  </div>
  <div class="menu-board reveal">
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">01</span>
        <span class="mname">Bulgogi Tacos <em class="tag">CHEF'S PICK</em></span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$9 <small>/ 3 PC</small></span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Ribeye marinated 24 hours in soy, pear and garlic, seared on the flat-top until the edges candy. Then we hit it with sesame aioli and call it a taco.</p>
        <p class="mlist">CORN TORTILLA · SESAME AIOLI · CHARRED SCALLION · TOASTED SESAME</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="Bulgogi Tacos (3)" data-price="9">Add to order — $9</button>
      </div></div>
    </article>
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">02</span>
        <span class="mname">Kimchi Fries</span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$8</span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Fries under a gochujang-queso avalanche, topped with our two-week fermented kimchi relish and a snowfall of scallion. Forks optional. Recommended.</p>
        <p class="mlist">HAND-CUT FRIES · GOCHU QUESO · KIMCHI RELISH · SCALLION SNOW</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="Kimchi Fries" data-price="8">Add to order — $8</button>
      </div></div>
    </article>
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">03</span>
        <span class="mname">Spicy Pork Quesadilla</span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$10</span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Gochujang-marinated pork shoulder, molten Oaxaca cheese and kimchi salsa in a griddled flour tortilla. The LOCO lives here.</p>
        <p class="mlist">FLOUR TORTILLA · OAXACA CHEESE · KIMCHI SALSA · PICKLED JALAPEÑO</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="Spicy Pork Quesadilla" data-price="10">Add to order — $10</button>
      </div></div>
    </article>
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">04</span>
        <span class="mname">K-FC Taco</span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$7.5</span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Double-fried chicken thigh glazed soy-garlic, cooled off by pickled daikon and a drizzle of sesame aioli. Crunch you can hear from the back of the line.</p>
        <p class="mlist">CRISPY THIGH · SOY-GARLIC GLAZE · PICKLED DAIKON · SESAME</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="K-FC Taco" data-price="7.5">Add to order — $7.50</button>
      </div></div>
    </article>
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">05</span>
        <span class="mname">Bibim Tofu Taco</span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$7</span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Crispy tofu tossed in gochujang glaze with cucumber kimchi and crushed peanuts. Plants — but make them party.</p>
        <p class="mlist">CRISPY TOFU · GOCHUJANG GLAZE · CUCUMBER KIMCHI · PEANUTS</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="Bibim Tofu Taco" data-price="7">Add to order — $7</button>
      </div></div>
    </article>
    <article class="mrow">
      <button class="mrow-head" type="button" aria-expanded="false">
        <span class="mnum">06</span>
        <span class="mname">Kimchi Elote</span>
        <span class="mheat"><svg class="ic"><use href="#chili"/></svg></span>
        <span class="mprice">$6</span>
        <span class="mtoggle"><svg class="ic"><use href="#plus"/></svg></span>
      </button>
      <div class="mrow-body"><div class="mrow-inner">
        <p>Street corn rolled in kimchi butter, dusted with cotija and chili-lime. It shouldn't work. It works.</p>
        <p class="mlist">GRILLED CORN · KIMCHI BUTTER · COTIJA · TAJÍN</p>
        <button class="btn btn-red btn-small btn-add" type="button" data-item="Kimchi Elote" data-price="6">Add to order — $6</button>
      </div></div>
    </article>
  </div>
</section>

<!-- ============ BUILDER ============ -->
<section id="build" class="sec sec-yellow">
  <div class="wrap build-grid">
    <div class="build-copy reveal">
      <p class="kicker">The Taco Lab — dangerously customizable</p>
      <h2>BUILD YOUR <span>LOCO</span></h2>
      <p class="lede">Four decisions stand between you and greatness. Choose responsibly. Or don't — that's what the LOCO level is for.</p>
      <div class="ctrl">
        <p class="ctrl-label">01 · PICK YOUR PROTEIN</p>
        <div class="opts" id="proteinOpts">
          <button class="opt on" type="button" data-val="bulgogi">Bulgogi Beef +$1</button>
          <button class="opt" type="button" data-val="pork">Spicy Pork +75¢</button>
          <button class="opt" type="button" data-val="tofu">Korean BBQ Tofu +50¢</button>
        </div>
      </div>
      <div class="ctrl">
        <p class="ctrl-label">02 · TORTILLA</p>
        <div class="opts" id="tortillaOpts">
          <button class="opt" type="button" data-val="flour">Flour</button>
          <button class="opt on" type="button" data-val="corn">Corn</button>
        </div>
      </div>
      <div class="ctrl">
        <p class="ctrl-label">03 · KIMCHI LEVEL</p>
        <div class="opts" id="levelOpts">
          <button class="opt on" type="button" data-val="mild"><svg class="ic"><use href="#chili"/></svg>Mild</button>
          <button class="opt" type="button" data-val="xx"><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg>XXtra +50¢</button>
          <button class="opt" type="button" data-val="loco"><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg><svg class="ic"><use href="#chili"/></svg>LOCO +$1</button>
        </div>
      </div>
      <div class="ctrl">
        <p class="ctrl-label">04 · LOAD IT UP (+50¢ EACH)</p>
        <div class="opts" id="extraOpts">
          <button class="opt" type="button" data-val="aioli">Sesame Aioli</button>
          <button class="opt" type="button" data-val="drizzle">Gochu Drizzle</button>
          <button class="opt" type="button" data-val="daikon">Pickled Daikon</button>
        </div>
      </div>
      <div class="build-bar">
        <div class="price-line"><span id="tacoName">The Bulgogi Classic</span><b id="tacoPrice">$5.50</b></div>
        <button class="btn btn-red" id="addCustom" type="button"><svg class="ic"><use href="#plus"/></svg>Add to order</button>
      </div>
    </div>
    <div class="build-stage reveal">
      <svg id="tacoSvg" viewBox="0 0 420 300" role="img" aria-label="Your custom taco, live preview">
        <ellipse cx="210" cy="252" rx="150" ry="16" fill="#191410" opacity=".14"/>
        <g id="flamesG" style="display:none">
          <g class="flame" transform="translate(84,58)">
            <path d="M12 0C7 8 0 13 0 21a12 12 0 0 0 24 0C24 12 17 9 15 2c-1.5 4-4 5-3 1z" fill="#F5C531" stroke="#191410" stroke-width="3"/>
            <path d="M12 12c-3 4-5 6-5 9a5 5 0 0 0 10 0c0-4-3-5-5-9z" fill="#E23A22"/>
          </g>
          <g class="flame f2" transform="translate(300,58) scale(.9)">
            <path d="M12 0C7 8 0 13 0 21a12 12 0 0 0 24 0C24 12 17 9 15 2c-1.5 4-4 5-3 1z" fill="#F5C531" stroke="#191410" stroke-width="3"/>
            <path d="M12 12c-3 4-5 6-5 9a5 5 0 0 0 10 0c0-4-3-5-5-9z" fill="#E23A22"/>
          </g>
        </g>
        <g>
          <path d="M204 62l12 18-24 2z" fill="#2F5E33" stroke="#191410" stroke-width="2.5" stroke-linejoin="round"/>
          <path d="M136 74l11 16-22 2z" fill="#2F5E33" stroke="#191410" stroke-width="2.5" stroke-linejoin="round"/>
          <path d="M280 78l11 16-22 2z" fill="#2F5E33" stroke="#191410" stroke-width="2.5" stroke-linejoin="round"/>
          <g fill="var(--prot,#7A4023)" stroke="#191410" stroke-width="3">
            <rect x="176" y="72" width="52" height="14" rx="7" transform="rotate(-4 202 79)"/>
            <rect x="128" y="82" width="54" height="14" rx="7" transform="rotate(-14 155 89)"/>
            <rect x="236" y="82" width="54" height="14" rx="7" transform="rotate(8 263 89)"/>
            <rect x="158" y="94" width="58" height="14" rx="7" transform="rotate(-8 187 101)"/>
            <rect x="212" y="96" width="54" height="14" rx="7" transform="rotate(12 239 103)"/>
            <rect x="104" y="98" width="50" height="14" rx="7" transform="rotate(-22 129 105)"/>
            <rect x="266" y="100" width="50" height="14" rx="7" transform="rotate(18 291 107)"/>
          </g>
          <g id="searG" stroke="#191410" stroke-width="2.4" stroke-linecap="round" opacity=".5" fill="none">
            <path d="M138 84l30-7"/><path d="M244 84l28 4"/><path d="M170 97l30-3"/>
            <path d="M224 100l26 5"/><path d="M116 103l24-9"/><path d="M276 106l24 8"/>
          </g>
          <g id="kimchiG" fill="none" stroke-linecap="round" stroke-width="7">
            <path stroke="#E23A22" d="M124 96q8-12 16 0q8 12 16 0"/>
            <path stroke="#F57C1F" d="M180 88q8-12 16 0q8 12 16 0"/>
            <path stroke="#E23A22" d="M240 92q8-12 16 0q8 12 16 0"/>
            <path stroke="#F57C1F" d="M284 104q7-11 14 0q7 11 14 0"/>
            <path stroke="#E23A22" d="M152 106q7-10 14 0q7 10 14 0"/>
            <path stroke="#F57C1F" d="M256 118q7-10 14 0q7 10 14 0"/>
          </g>
          <g id="daikonG" fill="#F2E8B0" stroke="#191410" stroke-width="2.5" style="display:none">
            <rect x="206" y="118" width="14" height="14" rx="3" transform="rotate(10 213 125)"/>
            <rect x="162" y="122" width="14" height="14" rx="3" transform="rotate(-14 169 129)"/>
            <rect x="258" y="120" width="14" height="14" rx="3" transform="rotate(18 265 127)"/>
          </g>
        </g>
        <path id="shellPath" d="M25 165 Q210 15 395 165 Q210 225 25 165 Z" fill="var(--shell,#ECC45F)" stroke="#191410" stroke-width="6" stroke-linejoin="round"/>
        <g fill="#191410" opacity=".13">
          <ellipse cx="90" cy="168" rx="16" ry="7" transform="rotate(-18 90 168)"/>
          <ellipse cx="150" cy="140" rx="13" ry="6" transform="rotate(-24 150 140)"/>
          <ellipse cx="215" cy="128" rx="14" ry="6"/>
          <ellipse cx="285" cy="142" rx="13" ry="6" transform="rotate(22 285 142)"/>
          <ellipse cx="340" cy="166" rx="15" ry="7" transform="rotate(18 340 166)"/>
        </g>
        <path d="M40 168 Q210 100 380 168" stroke="#FBF3E4" opacity=".22" stroke-width="5" fill="none"/>
        <g id="aioliG" style="display:none">
          <path d="M130 108q12 12 24 0q12-12 24 0q12 12 24 0q12-12 24 0q12 12 24 0q12-12 24 0" stroke="#FBF3E4" stroke-width="6" fill="none" stroke-linecap="round"/>
          <circle cx="180" cy="98" r="2.7" fill="#FBF3E4"/><circle cx="216" cy="94" r="2.7" fill="#FBF3E4"/>
          <circle cx="248" cy="100" r="2.7" fill="#FBF3E4"/><circle cx="152" cy="104" r="2.7" fill="#FBF3E4"/>
        </g>
        <g id="drizG" style="display:none">
          <path d="M122 126q12-12 24 0q12 12 24 0q12-12 24 0q12 12 24 0q12-12 24 0q12 12 24 0q12-12 24 0" stroke="#E23A22" stroke-width="6.5" fill="none" stroke-linecap="round"/>
        </g>
      </svg>
      <p class="stage-caption" id="stageCaption">MILD BY DESIGN. COWARDLY, BUT VALID.</p>
    </div>
  </div>
</section>

<!-- ============ FIND THE TRUCK ============ -->
<section id="truck" class="sec sec-ink">
  <div class="wrap truck-grid">
    <div class="reveal">
      <p class="kicker" style="color:var(--yellow)">Track the truck — it moves, like your ex</p>
      <h2>FIND <span>US</span></h2>
      <p class="lede">One truck. Seven haunts. Pick a day — the map keeps up.</p>
      <div class="days" id="days"></div>
      <div class="where-card">
        <span class="wc-day" id="wcDay">—</span>
        <span><span class="wc-loc" id="wcLoc">—</span><br><span class="wc-time" id="wcTime">—</span></span>
        <span class="wc-badge" id="wcBadge" hidden>TODAY</span>
      </div>
    </div>
    <div class="map-wrap reveal">
      <svg viewBox="0 0 640 440" role="img" aria-label="Stylized map of the truck's weekly stops">
        <rect width="640" height="440" fill="#221A12"/>
        <g fill="#1B140D">
          <rect x="110" y="110" width="60" height="50" rx="4"/><rect x="290" y="110" width="46" height="60" rx="4"/>
          <rect x="40" y="210" width="80" height="60" rx="4"/><rect x="260" y="210" width="80" height="60" rx="4"/>
          <rect x="410" y="210" width="80" height="50" rx="4"/><rect x="120" y="310" width="70" height="50" rx="4"/>
          <rect x="420" y="320" width="60" height="40" rx="4"/><rect x="540" y="220" width="60" height="70" rx="4"/>
          <rect x="250" y="40" width="60" height="40" rx="4"/><rect x="30" y="30" width="50" height="50" rx="4"/>
        </g>
        <g stroke="#3D2E20" stroke-width="14">
          <path d="M0 90H640"/><path d="M0 190H640"/><path d="M0 290H640"/><path d="M0 370H640"/>
          <path d="M90 0V440"/><path d="M230 0V440"/><path d="M370 0V440"/><path d="M510 0V440"/>
        </g>
        <g stroke="#F5C531" stroke-width="2.5" stroke-dasharray="14 12" opacity=".45" fill="none">
          <path d="M0 290H640"/><path d="M370 0V440"/>
        </g>
        <rect x="382" y="100" width="116" height="80" rx="8" fill="#2F5E33"/>
        <circle cx="410" cy="122" r="9" fill="#3E7A3A"/><circle cx="442" cy="148" r="11" fill="#3E7A3A"/>
        <circle cx="472" cy="124" r="8" fill="#3E7A3A"/><circle cx="458" cy="166" r="9" fill="#3E7A3A"/>
        <text x="440" y="178" text-anchor="middle" font-family="'Courier New',monospace" font-weight="bold" font-size="10" letter-spacing="2" fill="#9DBB8E">PARK</text>
        <g font-family="'Courier New',monospace" font-weight="bold" font-size="10" letter-spacing="2" fill="#8A7154">
          <text x="18" y="84">5TH AVE</text><text x="18" y="184">MARKET ST</text>
          <text x="18" y="284">GRAND AVE</text><text x="18" y="364">HARBOR RD</text>
          <text transform="rotate(-90 82 428)" x="82" y="428">N ST</text>
          <text transform="rotate(-90 222 428)" x="222" y="428">2ND ST</text>
          <text transform="rotate(-90 362 428)" x="362" y="428">MAIN ST</text>
          <text transform="rotate(-90 502 428)" x="502" y="428">EAST BLVD</text>
        </g>
        <g>
          <circle cx="596" cy="42" r="20" fill="#191410" stroke="#8A7154" stroke-width="2"/>
          <text x="596" y="40" text-anchor="middle" font-family="'Courier New',monospace" font-weight="bold" font-size="10" fill="#FBF3E4">N</text>
          <path d="M596 44l5 10h-10z" fill="#F5C531"/>
        </g>
        <g id="pin" style="transform:translate(150px,190px)">
          <circle class="ping" cx="0" cy="-11" r="15" fill="none" stroke="#E23A22" stroke-width="3"/>
          <path d="M0 26C-9 14 -22 2 -22 -10 -22 -24 -12 -34 0 -34 12 -34 22 -24 22 -10 22 2 9 14 0 26Z" fill="#E23A22" stroke="#FBF3E4" stroke-width="3.5"/>
          <circle cx="0" cy="-11" r="8" fill="#F5C531"/>
          <circle cx="0" cy="-11" r="3" fill="#E23A22"/>
          <text id="pinLabel" x="0" y="46" text-anchor="middle" font-family="'Courier New',monospace" font-weight="bold" font-size="13" letter-spacing="1" fill="#FBF3E4">CITY HALL</text>
        </g>
      </svg>
    </div>
  </div>
</section>

<!-- ============ STORY ============ -->
<section id="story" class="sec sec-cream">
  <div class="wrap story-grid">
    <div class="story-copy reveal">
      <p class="kicker">The origin story — briefly sane</p>
      <h2>WHY SO <span>LOCO</span>?</h2>
      <blockquote class="pull">"It started with a leftover tub of grandma's kimchi and a pack of tortillas. One wrong turn later, Kimchi Loco was born."</blockquote>
      <p>2023. <b>Chef Mina</b> had a tub of her grandmother's two-week kimchi, a cast-iron comal, and exactly zero plan. The first bulgogi taco sold out in eleven minutes. The second batch took a week. We've been marinating ever since.</p>
      <p>Everything is made from scratch on the truck: the kimchi ferments in the back (it rides shotgun, legally speaking), the salsas get blended nightly, and the tortillas get charred to order. Fusion isn't a gimmick here — it's dinner.</p>
      <div class="story-sign">— Mina &amp; the Loco Crew</div>
      <div class="story-chips"><span>1 RECIPE</span><span>2 CULTURES</span><span>0 CHILL</span></div>
    </div>
    <figure class="polaroid reveal">
      <span class="tape tl"></span><span class="tape tr"></span>
      <svg viewBox="0 0 300 200" role="img" aria-label="Polaroid-style drawing of the first taco">
        <g fill="none" stroke="#191410" stroke-width="3" stroke-linecap="round" opacity=".4">
          <path d="M120 34c-5-7 5-11 0-18"/>
          <path d="M150 30c-5-7 5-11 0-18"/>
        </g>
        <path d="M120 58l8 13-16 2z" fill="#2F5E33" stroke="#191410" stroke-width="2"/>
        <path d="M168 60l8 13-16 2z" fill="#2F5E33" stroke="#191410" stroke-width="2"/>
        <g fill="#7A4023" stroke="#191410" stroke-width="2.4">
          <rect x="104" y="72" width="38" height="10" rx="5" transform="rotate(-12 123 77)"/>
          <rect x="152" y="70" width="40" height="10" rx="5" transform="rotate(8 172 75)"/>
          <rect x="128" y="80" width="42" height="10" rx="5" transform="rotate(-3 149 85)"/>
        </g>
        <path d="M96 92q7-9 14 0q7 9 14 0" stroke="#E23A22" stroke-width="5" fill="none" stroke-linecap="round"/>
        <path d="M158 90q7-9 14 0q7 9 14 0" stroke="#F57C1F" stroke-width="5" fill="none" stroke-linecap="round"/>
        <path d="M20 118 Q150 40 280 118 Q150 158 20 118 Z" fill="#ECC45F" stroke="#191410" stroke-width="5" stroke-linejoin="round"/>
        <g fill="#191410" opacity=".12">
          <ellipse cx="70" cy="120" rx="11" ry="5" transform="rotate(-16 70 120)"/>
          <ellipse cx="150" cy="104" rx="10" ry="4.5"/>
          <ellipse cx="228" cy="118" rx="11" ry="5" transform="rotate(16 228 118)"/>
        </g>
        <path d="M40 122q12 10 24 0q12-10 24 0q12 10 24 0q12-10 24 0" stroke="#E23A22" stroke-width="4.5" fill="none" stroke-linecap="round"/>
      </svg>
      <figcaption>DAY ONE · THE FIRST BATCH · 11-MINUTE SELLOUT</figcaption>
    </figure>
  </div>
</section>

<!-- ============ QUOTE TICKER ============ -->
<div class="marquee m-red" aria-hidden="true">
  <div class="m-track" data-dup>
    <div class="m-group">
      <span>"I drove 40 minutes for the kimchi fries. I'd drive 400." — MARCUS T.</span>
      <span>"The LOCO taco made me see my ancestors. They approved." — DANA R.</span>
      <span>"Came for one taco. Left with six and a sticker." — PRIYA K.</span>
      <span>"Best fusion truck in the city. No notes." — JIN H.</span>
      <span>"My diet starts tomorrow. Tonight, we LOCO." — ALEX G.</span>
    </div>
  </div>
</div>

<!-- ============ FOOTER ============ -->
<footer class="footer">
  <div class="wrap">
    <p class="foot-mark" aria-hidden="true">KIMCHI LOCO</p>
    <div class="foot-grid">
      <div class="f-brand">
        <a class="brand" href="#top"><span class="logo"><svg class="ic"><use href="#chili"/></svg></span>KIMCHI LOCO</a>
        <p class="tag">Seoul heat. Mexico City soul. One truck, zero chill.</p>
        <div class="socials">
          <button type="button" aria-label="Instagram" data-social><svg class="ic"><use href="#ig"/></svg></button>
          <button type="button" aria-label="TikTok" data-social><svg class="ic"><use href="#tk"/></svg></button>
          <button type="button" aria-label="X" data-social><svg class="ic"><use href="#xx"/></svg></button>
        </div>
      </div>
      <div class="f-col">
        <p class="f-head">HOURS</p>
        <p><b>MON–FRI</b> 11AM – LATE<br><b>SAT–SUN</b> 10AM – LATE<br>Or until the kimchi runs out.</p>
      </div>
      <div class="f-col">
        <p class="f-head">TALK TO US</p>
        <p><b>HELLO</b> @KIMCHILOCO.COM<br><b>CALL</b> (555) LOCO-TACO<br><b>CATERING?</b> Yes. Always yes.</p>
      </div>
      <div class="f-news">
        <p class="f-head">GET THE LUNCH DROP</p>
        <p>Where we'll park tomorrow, every night at 8PM. No spam — only taco intel.</p>
        <form id="newsForm">
          <input type="email" id="newsEmail" placeholder="your@email.com" required aria-label="Email address">
          <button class="btn btn-yellow btn-small" type="submit" style="box-shadow:4px 4px 0 #000">Sign up</button>
        </form>
        <p class="news-msg" id="newsMsg" hidden>You're in. First-timers get free elote — see you out there.</p>
      </div>
    </div>
    <div class="foot-bottom">© 2025 KIMCHI LOCO · MADE WITH GOCHUJANG &amp; QUESTIONABLE DECISIONS</div>
  </div>
</footer>

<div id="toast" role="status"><svg class="ic"><use href="#chili"/></svg><span id="toastText"></span></div>

<script>
(function(){
  'use strict';
  const $ = id => document.getElementById(id);

  /* ---------- toast ---------- */
  let toastTimer;
  function toast(msg){
    $('toastText').textContent = msg;
    const t = $('toast');
    t.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(()=>t.classList.remove('show'), 3200);
  }

  /* ---------- hero starburst ---------- */
  (function(){
    const n=14, o=288, i=222, cx=300, cy=300, pts=[];
    for(let k=0;k<n*2;k++){
      const r=k%2?i:o, a=Math.PI*k/n - Math.PI/2;
      pts.push((cx+r*Math.cos(a)).toFixed(1)+','+(cy+r*Math.sin(a)).toFixed(1));
    }
    $('burst').innerHTML = '<polygon points="'+pts.join(' ')+'" fill="#F5C531" stroke="#191410" stroke-width="4"/>';
  })();

  /* ---------- marquees: duplicate until seamless ---------- */
  document.querySelectorAll('.m-track').forEach(track=>{
    const g = track.children[0];
    while(track.scrollWidth < window.innerWidth*2) track.appendChild(g.cloneNode(true));
    if(track.children.length % 2) track.appendChild(g.cloneNode(true));
  });

  /* ---------- cart ---------- */
  let cart = 0;
  function addToCart(label){
    cart++;
    const c = $('cartCount');
    c.textContent = cart;
    c.classList.remove('pop'); void c.offsetWidth; c.classList.add('pop');
    toast('Added: '+label);
  }
  $('cartBtn').addEventListener('click', ()=>{
    toast(cart ? cart+' item'+(cart>1?'s':'')+' riding shotgun. Checkout happens at the window — bring cash & courage.'
               : 'Cart is empty. The taco lab downstairs can fix that.');
  });

  /* ---------- menu accordion ---------- */
  document.querySelectorAll('.mrow').forEach(row=>{
    const head = row.querySelector('.mrow-head');
    head.addEventListener('click', ()=>{
      const open = row.classList.toggle('open');
      head.setAttribute('aria-expanded', open);
    });
  });
  document.querySelectorAll('.btn-add').forEach(b=>{
    b.addEventListener('click', ()=>{
      addToCart(b.dataset.item+' — $'+b.dataset.price);
      const old = b.textContent;
      b.textContent = 'ADDED TO ORDER';
      setTimeout(()=>b.textContent = old, 1400);
    });
  });

  /* ---------- taco builder ---------- */
  const PROTEINS = {
    bulgogi:{color:'#7A4023', sear:true,  add:1.00, name:'Bulgogi'},
    pork:   {color:'#B23A2B', sear:true,  add:0.75, name:'Spicy Pork'},
    tofu:   {color:'#E0C25A', sear:false, add:0.50, name:'Tofu Bibim'}
  };
  const TORTILLAS = { flour:'#F2E3C2', corn:'#ECC45F' };
  const LEVELS = {
    mild:{kimchi:2, add:0,    suffix:'Classic', cap:'MILD BY DESIGN. COWARDLY, BUT VALID.'},
    xx:  {kimchi:4, add:0.50, suffix:'XX',      cap:'NOW WE\'RE TALKING. NAPKINS ADVISED.'},
    loco:{kimchi:6, add:1.00, suffix:'LOCO',    cap:'LOCO. NOT LIABLE FOR WHAT HAPPENS NEXT.'}
  };
  const state = { protein:'bulgogi', tortilla:'corn', level:'mild', extras:new Set() };
  const kimchis = $('kimchiG').children;

  function wireOpts(containerId, key, cb){
    $(containerId).querySelectorAll('.opt').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        $(containerId).querySelectorAll('.opt').forEach(b=>b.classList.remove('on'));
        btn.classList.add('on');
        state[key] = btn.dataset.val;
        if(cb) cb();
        renderTaco();
      });
    });
  }
  wireOpts('proteinOpts','protein');
  wireOpts('tortillaOpts','tortilla');
  wireOpts('levelOpts','level');
  $('extraOpts').querySelectorAll('.opt').forEach(btn=>{
    btn.addEventListener('click', ()=>{
      btn.classList.toggle('on');
      const v = btn.dataset.val;
      btn.classList.contains('on') ? state.extras.add(v) : state.extras.delete(v);
      renderTaco();
    });
  });

  function renderTaco(){
    const svg = $('tacoSvg');
    const p = PROTEINS[state.protein], t = TORTILLAS[state.tortilla], lv = LEVELS[state.level];
    svg.style.setProperty('--prot', p.color);
    svg.style.setProperty('--shell', t);
    $('searG').style.display = p.sear ? '' : 'none';
    for(let i=0;i<kimchis.length;i++) kimchis[i].style.visibility = i < lv.kimchi ? 'visible' : 'hidden';
    $('flamesG').style.display = state.level==='loco' ? '' : 'none';
    $('daikonG').style.display = state.extras.has('daikon') ? '' : 'none';
    $('aioliG').style.display  = state.extras.has('aioli')  ? '' : 'none';
    $('drizG').style.display   = state.extras.has('drizzle')? '' : 'none';
    svg.classList.toggle('locos', state.level==='loco');
    $('stageCaption').textContent = lv.cap;
    const price = 4.50 + p.add + lv.add + state.extras.size*0.50;
    $('tacoName').textContent = 'The '+p.name+' '+lv.suffix;
    $('tacoPrice').textContent = '$'+price.toFixed(2);
    return { name:$('tacoName').textContent, price:price.toFixed(2) };
  }
  renderTaco();

  $('addCustom').addEventListener('click', ()=>{
    const c = renderTaco();
    addToCart(c.name+' — $'+c.price);
    const b = $('addCustom'), old = b.innerHTML;
    b.textContent = 'ADDED!';
    setTimeout(()=>b.innerHTML = old, 1300);
  });

  /* ---------- schedule + map ---------- */
  const SCHED = [
    {d:'MON', loc:'City Hall Plaza',        s:'CITY HALL',     t:'11AM – 3PM',  x:150, y:190},
    {d:'TUE', loc:'Riverside Tech Park',    s:'RIVERSIDE TECH',t:'11AM – 3PM',  x:510, y:90},
    {d:'WED', loc:'Grand Night Market',     s:'NIGHT MARKET',  t:'5PM – 11PM',  x:370, y:300},
    {d:'THU', loc:'KTown Plaza',            s:'KTOWN PLAZA',   t:'5PM – 11PM',  x:230, y:300},
    {d:'FRI', loc:'Eastside Brewery Block', s:'BREWERY BLOCK', t:'6PM – 12AM',  x:560, y:340},
    {d:'SAT', loc:'Sunset Park Flea',       s:'SUNSET FLEA',   t:'12PM – 9PM',  x:440, y:140},
    {d:'SUN', loc:'Harbor Sunday Market',   s:'HARBOR MKT',    t:'10AM – 6PM',  x:120, y:340}
  ];
  const today = (new Date().getDay()+6)%7; /* Monday = 0 */
  let selDay = today;
  const daysEl = $('days');
  SCHED.forEach((s,i)=>{
    const b = document.createElement('button');
    b.type='button'; b.className='day';
    b.innerHTML = '<span class="d-day">'+s.d+'</span><span class="d-loc">'+s.loc+'</span><span class="d-time">'+s.t+'</span>';
    b.addEventListener('click', ()=>select(i));
    daysEl.appendChild(b);
  });
  function select(i){
    selDay = i;
    const s = SCHED[i];
    $('pin').style.transform = 'translate('+s.x+'px,'+s.y+'px)';
    $('pinLabel').textContent = s.s;
    $('wcDay').textContent = s.d;
    $('wcLoc').textContent = s.loc;
    $('wcTime').textContent = s.t;
    $('wcBadge').hidden = (i !== today);
    daysEl.querySelectorAll('.day').forEach((b,k)=>b.classList.toggle('on', k===i));
  }
  select(today);
  $('spottedText').textContent = 'TODAY: '+SCHED[today].loc.toUpperCase()+' · '+SCHED[today].t;

  /* ---------- truck honk ---------- */
  $('truckSvg').addEventListener('click', ()=>{
    const t = $('truckSvg');
    t.classList.remove('honk'); void t.getBoundingClientRect(); t.classList.add('honk');
    toast('She honks back. '+SCHED[today].loc+', '+SCHED[today].t+'. Don\'t be late.');
  });

  /* ---------- socials ---------- */
  document.querySelectorAll('[data-social]').forEach(b=>{
    b.addEventListener('click', ()=>toast('@kimchiloco — same truck, more photos of fries.'));
  });

  /* ---------- newsletter ---------- */
  $('newsForm').addEventListener('submit', e=>{
    e.preventDefault();
    $('newsMsg').hidden = false;
    $('newsEmail').value = '';
    toast('Subscribed. Taco intel incoming at 8PM sharp.');
  });

  /* ---------- scroll reveal ---------- */
  const io = new IntersectionObserver(entries=>{
    entries.forEach(en=>{ if(en.isIntersecting){ en.target.classList.add('in'); io.unobserve(en.target); } });
  },{threshold:.12});
  document.querySelectorAll('.reveal').forEach(el=>io.observe(el));
})();
</script>
</body>
</html>
Reasoning trace (30,851 tokens)
The user wants a website for a Korean taco food truck called "Kimchi Loco". This is a pure marketing/landing page task (not a game), but my delivery constraints still apply: single self-contained HTML file, everything inline, no external files except CDN allowed... wait, the rules say "No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task." The task doesn't explicitly allow any CDN. So I should avoid Google Fonts and icon CDNs? Hmm — the rules say no external fonts. That's a strict constraint: no Google Fonts, no Font Awesome CDN. So I need to use system-available fonts creatively... but I dislike Inter/Roboto/Arial/system-ui as primary identity fonts. Without external fonts, I have limited choices. I can use font stacks with more character: e.g., "Georgia", "Palatino", or use a condensed system stack like "Arial Narrow", "Impact", "Haettenschweiler" for display, and monospace for accents. Impact / Haettenschweiler / "Arial Black" give strong poster energy without external fonts. That could actually work great for a loud food-truck brand. Body could be a rounded stack: "Trebuchet MS", or monospace "Courier New" for tags. Let me lean into a bold street-poster aesthetic using system display fonts (Arial Black / Impact) plus a mono for labels — expressive without external requests.

Also no images allowed (no network requests), so all visuals must be inline SVG / CSS. That's fine — I can draw the truck, tacos, chili, kimchi in SVG.

The rules also say games must start in self-playing demo mode — this isn't a game, so that doesn't apply. But "something meaningful must be visible on first paint" — yes, a landing page is fine. Keyboard note only applies if keyboard is used; I could add a small easter egg but not required.

Design direction: "Kimchi Loco" — Korean-Mexican fusion. Loud, street, gochujang red + kimchi orange + avocado green + black + cream. Avoid gradients as primary device — use flat bold color blocks, big type, halftone/sticker texture via SVG patterns. The prohibitions: no gradients, no equal 3-column card rows, no emoji, no blue/purple. Careful: icon library needed for small icons — but no external CDN allowed... I can use inline SVG icons drawn by hand (that's fine, "use an icon library for small icons" — inline SVG icons are acceptable; the constraint against emoji is key).

Let me plan the page structure — asymmetric, editorial, poster-like:

1. **Hero**: Split asymmetric — huge stacked display type "KIMCHI / LOCO" with a rotated sticker badge ("EST. 2024 · SEOUL ✕ MEXICO CITY" — no emoji, use ✕ character... that's fine, it's punctuation not emoji). Left: giant type + tagline "Gochujang meets salsa verde." Right: illustrated SVG food truck, slightly rotated, with steam animation, wheels. Marquee strip scrolling "GOCHU TACOS • KIMCHI FRIES • BULGOGI QUESADILLA •" across.

2. **Menu**: NOT uniform cards. Do a menu-board style — like a chalkboard/diner menu list: big item names with dotted leaders and prices, hover reveals description. Or an alternating editorial list: each item a row with number, name, heat level (chili icons), description, price — with varying accent colors. Make it interactive: click an item to see a big illustrated taco SVG variant + details in a sticky panel? That could be the signature moment: an interactive "build-your-taco" or a menu where hovering items makes a floating taco illustration change fillings.

Signature moment idea: **"The Heat-o-Meter"** — an interactive gochujang heat slider? Or a live "truck tracker" mock map showing the truck's location today with a pulsing pin, and a "rolling schedule" (Mon–Sun locations). 

Better signature: a **taco builder** — pick a protein (bulgogi, spicy pork, tofu), pick kimchi level (mild/medium/LOCO), and an SVG taco updates live — tortilla color, filling colors, flame count. Plus a generated "order name" and it tells price. That's memorable and interactive. Keep it compact.

Also: **Find the truck** section with a stylized map (SVG streets) showing today's stop with pulsing pin and address, plus weekly schedule list where clicking a day moves the pin. That's a nice second interaction.

Other sections:
- Sticky nav (minimal): logo, links, "Order ahead" button.
- Story strip: "Why loco?" — short punchy copy about Korean-Mexican fusion, with rotating kimchi jar illustration? Keep tight.
- Testimonials — do a ticker of "receipt-style" quotes instead of card grid.
- Footer: hours, socials (SVG icons), newsletter signup with inline success message (no alert — show inline toast).

Interactions to wire:
- Marquee (CSS animation).
- Menu items hover/click highlight.
- Taco builder updates SVG + price + heat label + "Add to order" that increments a cart count with toast.
- Schedule day buttons move map pin + change address text.
- Newsletter form inline confirmation.
- Smooth scroll nav.
- Maybe a subtle parallax on the truck? Or truck bobbing + steam.
- Cursor-following? Keep restrained.

Color system (flat, no gradients):
- Background cream: #F6EFE3 / paper #FBF5EA
- Ink black: #191410
- Gochujang red: #E23A22 (primary)
- Kimchi orange: #F28C28? maybe #F57C1F
- Avocado/perilla green: #3E7A3A or darker #2F5E33
- Sesame yellow: #F5C531
Flat blocks, thick black borders (3px), hard offset shadows (box-shadow: 6px 6px 0 #191410) — "sticker/risograph" style. That's cohesive and bold.

Typography: Display: "Arial Black", "Helvetica Neue", with letter-spacing tight, uppercase. Alternative condensed: Impact for the giant hero? Impact might feel cheap; Arial Black is safer and chunky. Use `font-stretch` not reliable. I'll use a stack: `"Archivo Black", "Arial Black", sans-serif` — Archivo Black won't load without CDN, fallback fine. Mono labels: `"Courier New", monospace` uppercase small tracking. Body: `"Trebuchet MS", Verdana` — hmm. Maybe body also Arial-based but that's fine as body; identity carried by display + mono. Actually let me use Georgia for body text in the story section? Mixing serif body with loud display can be nice editorial. I'll use: display = Arial Black; body = Georgia (warm, food-editorial feel); labels = Courier New. Good contrast.

Halftone dot pattern via SVG for texture on some blocks.

Layout details:

**Nav**: black bar, cream text, logo mark (small SVG chili in circle), links (Menu, Build, Truck, Story), cart button "Order · 0".

**Hero** (cream bg): grid 1.2fr / 0.8fr. Left: mono kicker "KOREAN-MEXICAN FOOD TRUCK — FOUNDED ON A HUNCH & A HOT GRILL", then giant "KIMCHI" (red) newline "LOCO" (black outlined?) — maybe "KIMCHI" solid black, "LOCO" red with slight rotation, overlapping. Tagline in Georgia italic: "Seoul heat. Mexico City soul. One truck, zero chill." CTAs: "Find the truck" (red solid, hard shadow) + "See the menu" (outline). Small stats row: "★ 4.9 · 2,300+ tacos last week · #1 in late-night cravings" — mono.
Right: SVG truck illustration, rotated -3deg, hard shadow, on a red circle/dot burst backdrop (SVG starburst). Steam wisps animate. Wheels could rotate on hover, truck bobs subtly.

**Marquee**: black strip, yellow text scrolling items separated by chili SVG glyphs. Pause on hover.

**Menu section** (red bg? or cream): Let me do red section with cream menu board. Title "THE MENU" huge. Then rows: number 01, name big display, description Georgia, heat chilis (1–3 SVG chilis), price mono. Hover: row background flips black→text cream, translate. Clicking a row sets it "selected" showing a larger detail? To keep scope sane: hover effect + a "Chef's pick" tag on one. Maybe each row expandable on click (accordion-ish) revealing "what's inside" list. I'll make rows expandable — real interactivity.

**Taco builder** (cream/yellow?): "BUILD YOUR LOCO" — left: controls: protein (3 pill buttons: Bulgogi Beef / Spicy Pork / Korean BBQ Tofu), tortilla (flour blue-corn / corn), kimchi level slider or 3 steps (Mild / Extra / LOCO), extras checkboxes (sesame aioli, pickled daikon, gochujang drizzle). Right: big SVG taco that live-updates: tortilla color, protein color/texture, kimchi flecks (red-orange bits, count varies), drizzle path appears, flame badge for LOCO level. Below: computed price and "Add to order" → cart count + toast "Added: Your Custom Loco — $5.50".

Taco SVG: side view — half-moon tortilla shape, fillings peeking above rim: strips (protein), kimchi shreds (orange-red wavy), greens, sesame dots. Manageable with paths/rects. LOCO level: add flame icon badge + more red flecks + slight shake animation at max.

**Find the truck**: black section. Left: schedule — 7 day buttons (MON–SUN vertical list), each with location + time. Click selects, right map updates. Map: SVG stylized streets grid, blocks, a river/park, truck icon pin that pulses, address card overlay "TODAY · THU — KTown Plaza, 6PM–11PM". Pin animation moves (CSS transition on transform). Cute: a dashed route line. On load, default today's day (compute from Date). 

**Story**: cream, editorial: big pull quote "It started with a leftover tub of grandma's kimchi and a pack of tortillas." + short paragraphs, photo substitute: an SVG "polaroid" of a taco with tape corners, slightly rotated. Maybe skip to keep length reasonable... The page is already rich; a compact story strip adds warmth. Include a small "founder note" with signature (script-ish via SVG path? just italic Georgia).

**Testimonials**: black ticker or a diagonal sticker wall — 3-4 rotated sticker quotes at varied sizes/rotations (not uniform cards — varied). Or a marquee row of quote stickers scrolling opposite direction. I'll do a second marquee of receipt-style quotes, opposite direction.

**Footer**: red or black: hours, locations summary, socials inline SVG (Instagram, TikTok, X — draw simple), newsletter input + button with inline success, copyright.

Toast component: fixed bottom, slides up, black bg yellow text, auto-hide.

Heat chilis: small inline SVG chili repeated.

Amount of code: substantial but let's write it carefully. Target ~900-1100 lines. Ensure zero console errors, responsive: hero stacks, truck scales, builder stacks, map stacks. No horizontal scroll: watch marquee widths (overflow hidden), rotated stickers.

Accessibility touches: aria-labels, focus styles, prefers-reduced-motion for marquees? Keep simple but add reduced-motion media query to pause animations.

Let me define SVG assets:

Chili icon (small): path like a curved pepper: 
`<svg viewBox="0 0 24 24"><path d="M19 3c1 .5 1.5 2 .8 3.4C18.5 9 15 9.5 12 10.5 8.5 11.7 6 14 4.5 17.5c-.4 1-1.8 1.3-2.3.3-.3-.6-.1-1.2.3-1.8C4.5 12 8 9 12 7.6c2.6-1 5.5-1.6 6.4-3.2.3-.6.1-1-.4-1.4z" fill="currentColor"/></svg>` — I'll craft something decent: a chili = elongated curved teardrop with green stem. Simpler: use a path for body + small stem path.

Chili SVG (id="chili"): 
body: `M20.5 4.5c.8.9.6 2.3-.3 3.4-2 2.4-5 3.4-7.6 4.7-3 1.5-5.6 3.7-7.2 6.8-.5 1-1.9 1.2-2.4.2-.4-.7-.2-1.5.3-2.2C5.6 13.6 9 11 13 9.3c2.7-1.1 5.3-2 6.4-3.6.5-.7.6-1.2.6-1.4z` plus stem `M20.6 3.9c-.5-.9-1.6-1.3-2.5-.9` stroke. I'll iterate visually in head; approximate is fine at small size with currentColor.

Starburst SVG behind truck: polygon star with many points, yellow, rotating slowly (60s). Generate with JS or precompute points? I can generate points inline via JS on load into an SVG polygon — or just use a simpler "sun rays" via repeating-conic-gradient... no gradients. Use CSS: a div with `background: repeating-conic-gradient(...)` — that's a gradient technically but produces flat rays; prohibition is about decorative gradients that look gradient-y; repeating-conic with hard stops = flat rays, not a gradient look. Risky per "no gradients". Safer: generate SVG polygon with JS — deterministic, easy: 24-point star. Fine.

Truck SVG: side view. Body: rounded rect white/cream with red band, window, serving hatch open with taco sign, wheels (two black circles with hub), "KIMCHI LOCO" text on side (SVG text with Arial Black), roof sign. Steam curls above hatch (paths with dash animation or opacity float). Keep viewBox 0 0 520 340.

Truck details:
- ground shadow ellipse.
- body rect x40 y80 w400 h150 rx16 fill #FBF5EA stroke black 5.
- red stripe rect y190 h28.
- window rect x70 y100 w90 h60 rx8 fill #191410? dark with light frame; driver window.
- hatch: serving window x210 y105 w170 h70, open awning above (striped? stripes via small rects red/cream — flat). Counter ledge below.
- text "KIMCHI" red, "LOCO" black on body.
- roof: small rect + sign pole with taco on top? A taco sign: half-circle yellow with red bits.
- wheels: circles cx110 cy245 r30 fill black, inner hub r12 cream, spokes? simple. Second wheel cx330.
- exhaust puff? skip.
- Steam: 2-3 wavy paths stroke cream? Above hatch on red? Steam on cream bg needs dark-ish; use black at low opacity or red. Animated translateY + opacity keyframes.

Taco SVG for builder (id big, viewBox 0 0 360 260):
- tortilla: half-ellipse: path M20,180 A160,150 0 0 1 340,180 ... hmm side view taco: shell is like a "D" rotated? Side-view taco = semicircle with flat side up? No: taco side view: shell like an arc from left tip up over to right tip — shape like a lens/D: flat top open with fillings spilling, curved bottom. Classic: shell path: M30,150 Q180,40 330,150 then bottom curve back Q180,250 30,150? That gives lens shape (taco profile). Fillings: cluster of shapes along the top opening between the tips.
Simplify: shell = path "M20 160 Q180 -10 340 160 Q180 230 20 160 Z" — upper arc high, lower arc shallow → lens. Fillings drawn above shell's top edge within a clip? Easier: draw fillings first (behind/above), then shell over lower part. Fillings: group of rounded rects/ellipses in protein color, kimchi shreds (thin wavy paths, orange-red), lettuce (green triangles), drizzle path (yellow-white squiggle stroke), sesame dots. Then shell drawn on top covering lower halves, with texture dots (charred spots: darker ellipses on shell). LOCO level changes: number of kimchi shreds & flames badge & drop-shadow shake.
Protein colors: Bulgogi = #8a4a2b brown-ish; Spicy Pork = #c0392b reddish; Tofu = #d9c46a golden cubes.
Tortilla: corn #e9c46a vs blue-corn #5a5aa0? Blue-corn is blue-purple... prohibited vibe is "blue/purple default schemes" for UI; a blue-corn tortilla is authentic but might clash. Offer "Flour" #f0e0c0 and "Corn" #e9c46a and maybe "Sesame charcoal" #3a3a3a? Keep flour/corn.

Price calc: base 4.50 + protein (0 / +0.5 / 0) + extras 0.5 each + LOCO kimchi +0.5.

Builder controls: 
- Step 1 "Pick your protein": 3 buttons.
- Step 2 "Tortilla": 2 buttons.
- Step 3 "Kimchi level": 3 buttons w/ chili count.
- Step 4 "Load it up": 3 toggle chips.
Price + CTA.

Map SVG: viewBox 0 0 600 400. Streets: grid of lines (stroke cream on black bg? map bg dark #1d1812 with street lines #3a2f24 and one main avenue yellow). Blocks implied. Park: green polygon. Labels mono tiny. 7 pins positions. Truck pin: group with truck mini icon or marker (red circle w/ taco). Pulse: animated circle. Move via setting transform translate with CSS transition (transition on transform .6s cubic-bezier). Route dashed circle? Keep simple: pin + pulsing ring + label of location name near pin (text updates).

Schedule data:
MON — Lot K Food Court · 11AM–3PM
TUE — Dongdaemun Market? These should feel local city-agnostic: 
- Mon: "City Hall Plaza · 11–3"
- Tue: "Riverside Tech Park · 11–3"
- Wed: "Grand Central Night Market · 5–11"
- Thu: "KTown Plaza · 5–11"
- Fri: "Eastside Brewery Block · 6–12"
- Sat: "Sunset Park Flea · 12–9"
- Sun: "Harbor Sunday Market · 10–6"

Map coordinates per day.

Menu items (6):
01 Bulgogi Tacos (3) — caramelized soy-glazed ribeye, sesame aioli, charred scallion — $9 — heat 1 — chef's pick
02 Kimchi Fries — gochujang queso, kimchi relish, scallion snow — $8 — heat 2
03 Spicy Pork Quesadilla — gochujang-marinated pork, Oaxaca cheese, kimchi salsa — $10 — heat 3
04 Korean Fried Chicken Taco — double-fressed thigh, soy-garlic glaze, pickled daikon — $7.5 each — heat 1
05 Tofu Bibim Bowl — hmm keep tacos-adjacent: "Bibim Tofu Taco — crispy tofu, gochujang glaze, cucumber kimchi" $7 heat 2
06 Elote Kimchi Corn — Mexican street corn with kimchi butter & cotija — $6 heat 1
Also "Loco Nachos"? 6 items is plenty.

Expandable detail on click: reveal inside list + "Add to order" quick button that increments cart & toast. Nice — makes rows truly interactive.

Testimonials marquee quotes:
""I drove 40 minutes for the kimchi fries. I'd drive 400." — Marcus T."
""The LOCO level taco made me see my ancestors." — Dana R."
""Best fusion truck in the city. No notes." — Eater.X? use "— Jin H."
""Came for one taco. Left with six and a sticker." — Priya K."
Format as receipt-ish stickers: black on yellow / red on cream alternate, slight rotations.

Story section: heading "THE (SLIGHTLY UNHINGED) ORIGIN", pull quote big Georgia italic, two short paragraphs, plus a "polaroid" SVG: cream card rotated with a simple taco illustration + tape strips, caption mono "day one — the first batch of grandma's kimchi meets a cast-iron comal". Also stats stickers: "1 recipe · 2 cultures · 0 chill".

Nav cart behavior: count increments; clicking cart shows toast "Checkout opens at the truck — bring cash & courage." (playful, wired behavior).

Hero CTAs scroll to sections.

Keyboard: not needed; no start overlay (not a game). But maybe add konami-ish? Skip.

Fonts recap: 
--display: 'Archivo Black','Arial Black','Helvetica Neue',sans-serif
--mono: 'Courier New', monospace  (letterspacing, uppercase, bold)
--serif: Georgia, 'Times New Roman', serif

CSS variables for palette. Hard shadows util class. Noise/halftone: subtle SVG pattern background on red sections? Use `background-image: radial-gradient(...)` — that's a gradient function but used for dot pattern... radial-gradient dots = polka pattern; it's technically gradient-based. The prohibition targets gradients as visual device (fades); dot patterns via radial-gradient hard stops render as flat dots. I judge it acceptable but to be safe I'll use an inline SVG data-URI pattern for dots — cleaner conscience. data:image/svg+xml with small circle pattern. Fine.

Marquee implementation: .marquee > .track { display:flex; animation: scroll 20s linear infinite } track contains two identical groups; translateX(-50%). Build items in HTML duplicated.

Responsive: 
- ≤900px: hero stacks (truck below text), builder stacks (svg on top), menu grid fine, map/schedule stack, nav links hidden except menu? Use simple: hide some nav links at small width, keep logo + cart.
- Font sizes clamp().

Now icons needed (inline SVG): chili (heat + logo), star, map pin, clock, arrow, Instagram-ish (camera rounded square + dot), TikTok-ish (musical note — draw note), X (simple), plus/close. Draw minimal but decent line icons, stroke currentColor.

Cart count element with pop animation on change (re-trigger via class).

Toast: #toast div, function toast(msg) sets text, adds .show, timeout removes.

Taco builder rendering: I'll write renderTaco() that updates:
- shell fill (flour #f2e3c2 / corn #ecc45f), 
- protein fill colors & shape style (beef strips dark brown #7a4023; pork #b23a2b; tofu #e0c25a cubes with dark sear edges),
- kimchi group: predefined 5 shred paths; visible count = mild:2, extra:4, loco:6(all + extra ones) & red tint; loco adds flames group + class 'shaking' on svg (CSS keyframes tiny rotate).
- drizzle visible if gochujang drizzle checked (red-orange stroke path),
- sesame aioli checked → cream squiggle + sesame dots,
- daikon checked → pale yellow cubes.
Price text update; name generation: e.g., "The Bulgogi LOCO" etc.

Flames: two small flame paths (yellow with red inner) near top, with flicker animation.

Add to order: cart++, toast with computed name & price, button brief "Added!" state.

Menu add buttons inside expanded rows also increment cart.

Also a subtle scroll reveal: IntersectionObserver adding .in class for fade-up on sections. Cheap but tasteful; keep durations modest.

Signature moment: the builder + the marquee + truck illustration. Also the hero headline could have a hover effect: letters of "LOCO" wiggle? Maybe hover on headline flips "KIMCHI" letters to red individually (span per letter, transition delay) — cute micro-detail. I'll wrap letters in spans with hover color change. Cheap fun, fine.

Also add "LOCO" outlined text style: -webkit-text-stroke black, fill transparent, on cream — nice poster feel. Careful fallback: text-stroke widely supported in Chrome; fine, but add solid color fallback via @supports? Chrome target fine.

Now write code. Structure:

<!DOCTYPE html><html lang="en"><head><meta charset><meta viewport><title>Kimchi Loco — Korean-Mexican Food Truck</title><style>…</style></head><body>
<nav>…</nav>
<header class="hero">…</header>
<div class="marquee">…</div>
<section id="menu">…</section>
<section id="build">…</section>
<section id="truck">…</section>
<section id="story">…</section>
<div class="marquee quotes">…</div>
<footer>…</footer>
<div id="toast"></div>
<script>…</script>
</body></html>

Write CSS with care: base reset, variables, typography, buttons (btn hard-shadow, hover translate), section paddings, grid layouts, marquee keyframes, truck float keyframes, steam, pulse pin, shake.

Detailed hero headline:
<h1 class="hero-title">
 <span class="line l1">KIM<span class="flip">C</span>HI</span>? — per-letter spans: KIMCHI = K I M C H I; LOCO = L O C O.
Let JS wrap? Just hand-write spans: <span class="ch">K</span>... each with --i for delay. Hover: .hero-title:hover .ch{color:red; transition-delay: calc(var(--i)*40ms)} and default black; on mouseout reverts (delay too). Nice.

Line 2 "LOCO" red with black text-stroke? Red fill + black stroke looks bold. Or yellow fill w/ black stroke. I'll do: .l1 black fill; .l2 color transparent, -webkit-text-stroke: 3px var(--ink)?? Outline-only red? Let's do l2 red with black stroke 2px and slight rotate(-2deg) & display inline-block; plus a small sticker "✱" badge? Add a rotated yellow starburst sticker "EST. 2024" absolutely positioned near title.

Hero right: .truck-stage: starburst svg (JS-generated polygon) absolutely centered rotating slow; truck svg with float animation; under: mono caption "SPOTTED: KTown Plaza · TODAY 5–11PM" chip linking to #truck.

Stats row: separators "·", star icon svg inline.

Menu rows: 
<div class="menu-row" data-...>
 <button class="row-head"> number, name block (name + tags), heat chilis, price, plus icon</button>
 <div class="row-body"> description + includes + add button </div>
</div>
Row-body collapsed via grid-template-rows 0fr→1fr trick or max-height. Use grid rows trick for smoothness.

Row-head hover: background ink, color cream. Selected state keeps red number.

Colors per section: hero cream; marquee black/yellow; menu cream with red panel? Let's alternate: menu on cream but with big red "MENU" watermark? Better: menu section bg red (#E23A22) with cream board rows — loud. Rows cream cards on red, hover ink. Hmm many cards = repeated modules warning? They're a menu list — semantic, fine, varied content.

Builder section: bg yellow (#F5C531)? Yellow full-bleed with black controls — energetic. Controls as ink-outlined panels on yellow; taco stage cream panel with halftone dots.

Truck/map section: bg ink black, cream text.

Story: bg cream with red pull quote.

Quotes marquee: yellow bg black text? First marquee: black bg yellow text; quotes marquee: red bg cream stickers. Stickers: spans with bg cream, rotated alternate via nth-child.

Footer: ink bg continued or red? After story (cream) → quotes marquee red → footer black. Good rhythm: cream, black, red, cream, yellow, black, cream, red, black. 

Newsletter: input + button; on submit preventDefault, validate contains @, show inline success replacing form ("You're on the list — free taco on your first visit. 🌮" no emoji! "…free elote on your first visit.").

Now, write the actual SVGs carefully.

Chili icon path (24x24), fill-based:
<path d="M21.2 4.9c.6 1 .2 2.3-.7 3.2-1.8 1.8-4.3 2.7-6.7 3.7-3.6 1.5-7 3.6-9.2 7-.6.9-2 1-2.4 0-.3-.7 0-1.4.4-2C4.8 13.4 8 11 11.6 9.5c2.9-1.2 5.9-2 7.5-3.7.8-.8 1-1.7 1-2 0-.3.6-.5 1.1.1z" /> hmm messy. Let me construct more deliberately.

Chili: crescent shape. Think of a curved band: outer arc from tip (bottom-left) to top (stem), inner arc back. Parametric: center (14,12), radius outer 10, inner 6, angles from 200° to 20°? Easier: use two quadratics:
M3 20 Q2 12 9 8 Q15 5 19 4 (outer top edge) then Q17 8 13 11 Q8 14.5 5.5 20.5 Q4 22 3 20 Z — plus stem at (19,4): small path M19 4 q1.5-1.5 3-1 l-1 1.6 q-1 .2-1.6.6z.
I'll accept approximate; small icon reads as red curved pepper with green stem if I add stem in green. Two paths: body currentColor, stem separate class colored #2F5E33. Actually with currentColor body and stem always green — good.

Refine body: 
`M2.8 20.6c-.5-.8-.2-1.9.6-2.9C6 14.4 9.6 11.9 13.7 10.3c2.6-1 5.4-1.8 6.9-3.5.9-1 1.1-2.3.6-3.2.9.3 1.7 1.1 1.8 2.2.3 2.6-2 4.6-5 5.9-4.6 2-9 4.2-11.6 7.8-.6.9-1.9 2-3 .6z` meh. I'll just write a plausible path; visual approximations okay:

body: `M3 21c-1-1-.6-2.6.4-3.8 2.8-3.4 7-5.7 11.2-7.2 2.7-1 5.3-1.9 6.6-3.6.7-.9.8-2.1.3-3 1.2.5 2 1.7 1.9 3-.2 2.7-2.8 4.5-5.9 5.8-4.4 1.8-8.9 3.9-11.4 7.2-.8 1-2 2.3-3.1 1.6z`
That shape: starts bottom-left (3,21), curves up-right along outer edge to near stem (22.4? ), no—it goes through "5.8" area then down-right? Actually it traces outer edge then inner edge back. Points: (3,21) → control up to (11.2... ) passes (13.7,10.3) region → (6.6?) Let me not over-engineer; I'll test mentally: The path: M3 21 c-1-1-.6-2.6.4-3.8 → moves to (3.4,17.2) with leftward bulge — makes rounded tip at bottom-left. Then c 2.8-3.4 7-5.7 11.2-7.2 → to (14.6,10) rising along outer (left) edge. Then c 2.7-1 5.3-1.9 6.6-3.6 → (21.2,6.4) continue to top-right. Then c .7-.9 .8-2.1 .3-3 → (21.5,3.4) tip near stem. Then c 1.2.5 2 1.7 1.9 3 → (23.4,6.4)?? goes right and down — hmm this makes the stem-side end bulbous then we need inner edge back: c -.2 2.7-2.8 4.5-5.9 5.8 → (17.5,12.2) inner edge down-left; c-4.4 1.8-8.9 3.9-11.4 7.2 → (6.1,19.4); c-.8 1-2 2.3-3.1 1.6z → back to (3,21). Roughly crescent. OK, plausible enough at 16px. Stem: `M20.3 3.9c.4-1.2 1.6-2 2.9-1.9-.2.9-.7 1.7-1.4 2.2-.9.6-2.3.5-2.9-.3z`? Simpler stem: small triangle-ish green: `M20.5 4.5c.6-1.4 2-2.2 3.3-2-.3 1.2-1.2 2.1-2.4 2.4l-.9-.4z`. Fine.

Star icon: classic 5-point path: `M12 2l2.9 6.2 6.8.8-5 4.6 1.3 6.7-6-3.4-6 3.4 1.3-6.7-5-4.6 6.8-.8z`.

Pin icon: `M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7z` + circle.

Clock: circle + hands strokes.

Plus/minus for accordion: plus icon that rotates 45° when open.

Arrow: `M5 12h14M13 5l7 7-7 7` stroke.

Social icons: 
- IG: rect rx + circle + dot (strokes).
- TikTok-ish note: path of a note: `M14 3v9.5a3.5 3.5 0 1 1-2.5-3.4V6.3c... ` complicated; simpler generic: use simple shapes: camera (IG), bird? Use "X": two crossing strokes. TikTok note: `M15 4c.4 2 1.8 3.4 3.8 3.7v2.6c-1.5 0-2.8-.5-3.8-1.3v5.5a5 5 0 1 1-5-5c.3 0 .7 0 1 .1v2.7a2.3 2.3 0 1 0 1.6 2.2V4z` — that's actually roughly the TikTok glyph. Good enough.

Now the truck SVG (inline, ~60 lines). Coordinates viewBox="0 0 560 360":
- ground shadow: ellipse cx=290 cy=325 rx=230 ry=14 fill #191410 opacity .18.
- body main: rect x=48 y=88 w=430 h=180 rx=18 fill=#FBF5EA stroke=#191410 sw=6.
- roof cap: rect x=48 y=76 w=430 h=20 rx=10 fill=#191410? Or red awning strip on top: rect x=44 y=78 w=438 h=16 rx=8 fill=#E23A22 stroke ink 5.
- driver window: rect x=78 y=112 w=100 h=68 rx=10 fill=#191410; highlight: line stroke #F5C531 diagonal? small rect x=86 y=120 w=34 h=10 fill #F5C531 opacity .9 rotated? Keep: add thin cream reflection rect rotated: <rect x="90" y="120" width="70" height="8" rx="4" fill="#FBF5EA" opacity=".25" transform="rotate(-12 90 120)"/> hmm transform on rect fine.
- serving hatch: opening rect x=210 y=118 w=180 h=64 rx=8 fill=#191410; inside: counter with taco silhouettes? small: two taco shapes (yellow half-moons) + red squeeze bottle. 
- awning above hatch: striped canopy: path arc from (200,112) to (400,112) bulging up? Canopy: group of alternating red/cream rects rotated? Simple scalloped awning: base rect x=202 y=96 w=196 h=20 fill #E23A22 stroke ink 5; scallop semicircles along bottom: 5 circles r=20? Semicircles: path arcs. Alternate colors: draw 5 half-circles: positions x=212+ i*38, cy=116, r=19: path "M a 116 a 19 19 0 0 1 38 0 z" alternating #E23A22 and #FBF5EA with ink stroke. Cute.
- counter: rect x=204 y=182 w=192 h=12 fill #191410.
- Brand text on lower body: text "KIMCHI" x=70 y=248? But red stripe there. Put brand big on the hatch-side panel: text x=210 y=... Actually side panel below window left: small text? Let's place big wordmark under the awning region on body: text "KIMCHI LOCO" centered x=300 y=246 font Arial Black 34 fill #E23A22? But red stripe rect y=? Let me restructure: body y=88..268 (h=180). Red stripe: y=228 h=40 fill red full width (rounded clip: use rx via same radius? just rect x=48 w=430 with clip-path rounded? simpler: rect y=232 h=36, and body stroke overlays edges; corners might poke out—use rx=0 but body has rounded corners r=18; stripe at bottom would stick outside the rounded corner. Use clipPath with the body rounded rect. Define clipPath #bodyClip rect same as body; apply to stripe group.
- wordmark: text "KIMCHI LOCO" white on red stripe? Stripe h=36, font 30 Arial Black, centered x=300, fill #FBF5EA, letter-spacing 2. 
- above stripe, left area maybe "EST. 2024" mono small black.
- wheels: circle cx=140 cy=272 r=34 fill #191410; hub r=13 fill #F5C531 stroke ink 4; bolt dots? small circle r=3 ink ×? keep hub. wheel2 cx=396. Wheels bottom at 306; shadow at 325 fine. Body bottom 268; wheels overlap body — normal.
- headlight: circle cx=470? front is right side: small rounded rect x=466 y=196 w=10? Add taillight front: rect x=472 y=210 w=8 h=18 rx=4 fill #F5C531.
- roof sign: pole line from (300,78) to (300,48); sign board: rect x=252 y=28 w=96 h=26 rx=6 fill #F5C531 stroke ink 5, text "OPEN!" 16 Arial Black ink centered; wobble animation on sign (rotate ±3deg origin bottom). Cute.
- steam: above hatch? Steam should come from hatch opening (food). paths stroke #191410 opacity .35 sw=5 round: e.g. M240 112 q8 -14 0 -26 q-8 -12 0 -26 etc. three curls at x 240, 300, 360, animate rise: keyframes translateY(-6px) fade? Since stroke dark, fade opacity .35→.15 with translateY. Use CSS targeting .steam path with animation and delays.

Truck float: .truck-svg { animation: bob 5s ease-in-out infinite } translateY ±4px + rotate .5deg.

Starburst behind: SVG polygon generated by JS: function starPoints(cx,cy,outer,inner,n) → points string. n=16, outer=250, inner=190? For viewBox 600x600 centered 300,300. Fill #F5C531 stroke ink? On cream hero, yellow burst behind truck = fun poster. Slow rotate 40s linear. Add small ink dots pattern? Keep.

Taco builder SVG viewBox="0 0 420 300":
- shadow ellipse cx=210 cy=250 rx=150 ry=16 opacity .15.
- fillings group (drawn first): 
  - base bed: ellipse cx=210 cy=150 rx=120 ry=28 fill protein dark shade? The fillings sit in the opening; the shell top edge is around y=150.
  Let me define geometry: shell path: M25 165 Q210 15 395 165 Q210 225 25 165 Z (top arc peak y≈90 via quadratic midpoint (210,(165+15)/2? quadratic midpoint = (165+2*? ) Q control y=15 → curve apex at (165+15)/2*? For quadratic Bezier B(0.5) = 0.25*P0+0.5*C+0.25*P2 = .25*165+.5*15+.25*165 = 90. Good apex y=90.) Bottom arc control y=225 → apex .25*165*2+.5*225= 195. So shell lens from y=90..195, width 25..395.
- Fillings peek above the shell's upper edge near the middle: cluster around y 60..110 spanning x 120..300:
  - protein: 8 rounded strips rotated various: rects w=54 h=14 rx=7 fill proteinColor stroke ink 3, rotated -15..15 around cx. Positions along arc.
  - kimchi: 6 wavy thin paths stroke #E23A22/#F57C1F sw=6 round, like "M x y q 6 -10 12 0 q 6 10 12 0".
  - greens: 3 triangles green #2F5E33.
  - sesame: dots cream r=2.5 scattered on protein (group toggled).
  - daikon cubes: 3 small rects #F2E8B0.
- shell path on top (covers below-opening), fill tortillaColor stroke ink 6, plus char spots: 4 small ellipses fill #00000022? use darker tortilla derivative — use fill #191410 opacity .12 ellipses. Add inner fold line: path along bottom arc stroke ink opacity .2.
- drizzle: path squiggle across fillings above shell edge: stroke #E23A22 sw=6 round, dashes? A wavy path from (130,95) to (290,95): M130 98 q15 -14 30 0 q15 14 30 0 q15 -14 30 0 q15 14 30 0 q15 -14 30 0 — toggled.
- aioli squiggle similar in cream #FBF5EA offset y+10.
- flames group (LOCO): two flame paths above: flame path: M0 0 c... classic flame: `M10 0C4 8 0 12 0 18a10 10 0 0 0 20 0c0-6-4-9-6-14-1.5 3-3 4-4 2z`? I'll craft: outer yellow flame path + inner red. Position near top corners, class flame with flicker (scaleY/rotate keyframes, transform-origin bottom).
- plate? no, floating on shadow fine. Maybe below shell a small "paper boat"? skip.

Shake when LOCO: .taco-svg.locos { animation: shimmy .4s ease-in-out infinite } tiny rotate.

Protein rendering: change fills via JS setting CSS variable --protein on svg root and strips use fill var(--protein); shape variant: tofu → strips become cubes? Simpler: keep strips but color change + add sear stripes for meat (dark lines) toggled class. Fine: meat = strips with darker second color stripes; tofu = strips become squares (change rx and width via class? messy). Just color change + label. Acceptable: also swap strip stroke dash for tofu to look cubed? I'll set per-protein: colors and a "texture" class controlling an overlay pattern of dark dashes. Keep it simple: color + texture dots overlay opacity toggles.

Prices: base $4.50; bulgogi +$1.00, spicy pork +$0.75, tofu +$0.50; kimchi level: mild +0, extra +0.50, loco +1.00; extras each +0.50. Show total like "$6.50".

Name: `${protein} ${level==='loco'?'LOCO':level==='extra'?'XX':'Classic'} Taco`? e.g., "Bulgogi LOCO Taco". Good.

Map SVG viewBox 0 0 640 440, dark:
- bg rect fill #221a12.
- streets: horizontal lines y=90,180,270,360 stroke #4a3a28 sw=10; vertical x=110,230,350,470,590? Actually make roads lighter cream-ish #5b4835 sw=12 with center dashed line #F5C531 sw=2 dash on main avenue (the y=270 one horizontal and x=350 vertical).
- park: rect x=470 y=90 w=140 h=140? place park block fill #2F5E33 opacity? with tree circles darker + label "PARK".
- river? skip.
- blocks: a few rects fill #2c2318 with tiny building rects? Keep minimal: some building footprints: small rects #191410.
- Labels mono: "N AVE", "5TH ST", "MARKET ST" in #8a7154 font 12.
- pin group #pin: transform translate(x,y): marker: path teardrop fill #E23A22 stroke cream 3: `M0-30c-11 0-20 9-20 20C-20 4-6 14 0 24 6 14 20 4 20-10c0-11-9-20-20-20z`? Standard pin: `M0 -34C-13 -34 -22 -25 -22 -13 -22 -2 -8 12 0 22 8 12 22 -2 22 -13 22 -25 13 -34 0 -34Z` plus inner circle cream r=8 at (0,-13) with chili? small circle. Pulse ring: circle r=10 stroke #E23A22 with animation scale/opacity (SVG animate via CSS on circle with transform-box: fill-box).
- Also location name label near pin: <text id="pinLabel">.
Truck icon instead of pin? Pin with tiny truck? Pin is clearer.

Positions (7): 
MON City Hall Plaza → (140,180)
TUE Riverside Tech Park → (500,120)
WED Grand Central Night Market → (350,270)
THU KTown Plaza → (230,300)
FRI Eastside Brewery → (560,320)
SAT Sunset Park Flea → (140,90)? that's in park area — park at (470..610, 90..230) so SAT "Sunset Park Flea" → (540,160) inside park. 
SUN Harbor Sunday Market → (90,360).
Adjust: MON (140,180), TUE (500,90)? Put TUE near park edge (470,60)? Fine-tune later: 
- Mon: 150,190
- Tue: 480,80
- Wed: 350,300
- Thu: 240,340? Thu KTown 5-11pm; place (240,150)? Whatever—spread: Mon(150,190) Tue(500,100) Wed(350,250) Thu(230,350) Fri(560,330) Sat(540,170) Sun(90,360). Roads at y 90/180/270/360 and x 110/230/350/470/590: place pins near intersections: Mon(230,180)? Just eyeball; not critical.

Schedule list: 7 buttons stacked; each shows day mono, location, time; selected = red bg cream. Click → move pin (set attribute transform with transition — SVG transform attribute doesn't CSS-transition; instead use style.transform with translate(px). Use pin group style: `pin.style.transform = translate(...)` with CSS `#pin{transition: transform .7s cubic-bezier(.6,-0.2,.3,1.3)}` — SVG elements support CSS transforms in Chrome, yes. But coordinate system: user units; style transform translate uses px = user units in SVG (when no viewBox scaling? With viewBox, CSS px in transform map to user units — yes, CSS transforms on SVG elements use user-space units). Good.

Also update info card: day name, location, hours, and "Today" badge if selected day == actual today (computed). Default select actual today.

Weekly data with map coords.

Nav: fixed top? Sticky with black bg. On scroll, fine.

Scroll reveal: sections .reveal → observer adds .in.

Let me also add small "heat legend" near menu title: chili×3 = "call your lawyer" copy — fun.

Newsletter: footer form.

Also "Order ahead" nav button scrolls to builder.

Toast styling: fixed bottom center, bg #191410, cream text, red left border, transform translateY(20px) opacity 0 → show class. Include small chili icon.

Cart: button with bag icon + count span; pop animation.

Edge: reduce motion query: disable marquee animation? set animation-duration long or paused. I'll add @media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important} } but that kills marquee (text frozen—fine).

Now sizes: hero title clamp(64px, 12vw, 150px) for KIMCHI; LOCO same size. Two lines stacked tightly. letter-spacing -0.02em? Arial Black tight.

Let me now write the full file. I'll be systematic and thorough. Also ensure no console errors: careful with getElementById names.

JS pieces:
1. letter spans already in HTML (hand-written).
2. starburst generator.
3. marquee: pure CSS with duplicated content — I'll write duplication in JS to avoid huge HTML: track.innerHTML += track.innerHTML (once). Good.
4. menu accordion + add buttons.
5. builder state + render.
6. schedule/map.
7. toast, cart.
8. newsletter.
9. reveal observer.
10. current day highlight.

Write menu data inline in HTML (better for first paint / no JS dependence).

Let me carefully compose the HTML now.

Nav HTML:
<nav class="nav">
 <a class="brand" href="#top"> [svg chili in red circle] KIMCHI LOCO</a>
 <div class="nav-links"><a href="#menu">Menu</a><a href="#build">Build a Taco</a><a href="#truck">Find the Truck</a><a href="#story">Story</a></div>
 <button class="cart-btn" id="cartBtn">[bag svg] <span>Order</span> <b id="cartCount">0</b></button>
</nav>

Hero:
<header class="hero" id="top">
 <div class="hero-inner">
  <div class="hero-copy">
   <p class="kicker">KOREAN × MEXICAN FOOD TRUCK — SERVING SINCE 2024</p>
   <h1 class="hero-title"><span class="line">K<span class="ch" style="--i:0">I</span>...` 

For flip letters: wrap each letter: KIMCHI → 6 spans each with --i 0..5, LOCO 4 spans --i 6..9. Hover on h1 colors them red sequentially. Actually inverse: default black; on hover red. But l2 is red already — give l2 hover → yellow? Do: l1 black→red hover; l2 red→? l2 default red with black stroke; hover → ink fill? Fun enough: l2 letters on hover get yellow fill. Implement via CSS: .line-1 .ch{transition color; } .hero-title:hover .line-1 .ch{color:var(--red); transition-delay:calc(var(--i)*45ms)} .line-2 .ch{-webkit-text-stroke:2.5px ink; color red} .hero-title:hover .line-2 .ch{color:var(--yellow); transition-delay...}. text-stroke on red→yellow change fine.

Tagline: <p class="hero-sub">Seoul heat. Mexico City soul. We marinate for 24 hours and drive around for 12 — find us before the kimchi finds you.</p>
CTAs: <a class="btn btn-red" href="#truck">[pin] Find the truck</a> <a class="btn btn-ghost" href="#menu">Peek the menu [arrow]</a>
Stats: <p class="hero-stats">[star] 4.9 (1,200 reviews) · 2,300+ tacos served last week · 0 regrets reported</p>

Right: <div class="hero-truck">
 <svg class="burst" id="burst" viewBox="0 0 600 600" aria-hidden="true"></svg>
 <svg class="truck-svg" viewBox="0 0 560 360">…</svg>
 <a class="spotted-chip" href="#truck"><span class="dot"></span> TODAY: KTown Plaza · 5–11PM</a> — set text via JS from schedule today. Good touch.
</div>

Marquee:
<div class="marquee m-black" aria-hidden="true"><div class="m-track" id="m1"><div class="m-group"> spans: GOCHUJANG TACOS [chili] KIMCHI FRIES [chili] BULGOGI QUESADILLA [chili] K-FC TACO [chili] OPEN TILL LATE [chili] …</div></div></div>

Menu:
<section id="menu" class="sec sec-red">
 <div class="wrap">
 <div class="sec-head"><p class="kicker k-cream">THE MENU — PRICES IN USD, REGRET IN SCOVILLES</p><h2>EAT <span>LOCO</span></h2>
 <p class="heat-legend"> heat key: [1 chili] mild [2] warm [3] "sign a waiver"</p></div>
 <div class="menu-board">
  rows… each:
 <article class="mrow">
  <button class="mrow-head" aria-expanded="false">
    <span class="mnum">01</span>
    <span class="mname">Bulgogi Tacos <em class="tag">CHEF'S PICK</em></span>
    <span class="mheat">[chili svg ×1]</span>
    <span class="mprice">$9<small>/3</small></span>
    <span class="mtoggle">[plus]</span>
  </button>
  <div class="mrow-body"><div class="mrow-inner">
    <p>24-hour soy-pear marinade…</p>
    <p class="mlist">corn tortilla · sesame aioli · charred scallion · gochu crumble</p>
    <button class="btn btn-small btn-add" data-item="Bulgogi Tacos (3)">Add to order — $9</button>
  </div></div>
 </article>
 … 6 rows
 </div>
 </div>
</section>

Data rows:
01 Bulgogi Tacos (3) — $9 — heat1 — CHEF'S PICK — "Ribeye marinated 24 hrs in soy, pear & garlic, seared on a flat-top till the edges candy. Then we hit it with sesame aioli and call it a taco." — corn tortilla · sesame aioli · charred scallion · toasted sesame
02 Kimchi Fries — $8 — heat2 — "Fries under a gochujang-queso avalanche, topped with our 2-week fermented kimchi relish and a snowfall of scallion. Forks optional. Recommended." — hand-cut fries · gochu queso · kimchi relish · scallion snow
03 Spicy Pork Quesadilla — $10 — heat3 — "Gochujang-marinated pork shoulder, molten Oaxaca cheese and kimchi salsa in a griddled flour tortilla. The LOCO lives here." — flour tortilla · Oaxaca cheese · kimchi salsa · pickled jalapeño
04 K-FC Taco — $7.5 — heat1 — "Double-fried chicken thigh glazed soy-garlic, cooled by pickled daikon and a drizzle of sesame aioli. Crunch you can hear from the line." — crispy thigh · soy-garlic glaze · pickled daikon · sesame
05 Bibim Tofu Taco — $7 — heat2 — "Crispy tofu tossed in gochujang glaze with cucumber kimchi and crushed peanuts. Plants, but make them party." — crispy tofu · gochujang glaze · cucumber kimchi · peanuts
06 Kimchi Elote — $6 — heat1 — "Street corn rolled in kimchi butter, dusted with cotija and chili-lime. It shouldn't work. It works." — grilled corn · kimchi butter · cotija · tajín

Heat counts: 1,2,3,1,2,1.

Builder:
<section id="build" class="sec sec-yellow">
 <div class="wrap build-grid">
  <div class="build-copy">
   <p class="kicker">THE TACO LAB — DANGEROUSLY CUSTOMIZABLE</p>
   <h2>BUILD YOUR <span>LOCO</span></h2>
   <p class="lede">Four decisions stand between you and greatness. Choose responsibly. Or don't — that's what LOCO level is for.</p>
   controls:
   <div class="ctrl"><p class="ctrl-label">01 · PROTEIN</p><div class="opts" id="proteinOpts"> 3 buttons data-val…</div></div>
   <div class="ctrl"><p>02 · TORTILLA</p><div id="tortillaOpts"> Flour / Blue Corn? no blue → "Flour" "Corn" "Charcoal Sesame"? tortilla options: FLOUR / CORN. Two buttons.
   <div class="ctrl"><p>03 · KIMCHI LEVEL</p><div id="levelOpts"> MILD [1 chili] / XXTRA [2] / LOCO [3]</div>
   <div class="ctrl"><p>04 · LOAD IT UP</p><div id="extraOpts"> chips: SESAME AIOLI +.5 / GOCHU DRIZZLE +.5 / PICKLED DAIKON +.5 (toggle class .on)
   <div class="build-bar"><div class="price-line"><span id="tacoName">The Bulgogi Classic</span><b id="tacoPrice">$5.50</b></div>
   <button class="btn btn-red" id="addCustom">[plus] Add to order</button></div>
  </div>
  <div class="build-stage"><svg id="tacoSvg" viewBox="0 0 420 300">…</svg><p class="stage-caption" id="stageCaption">Mild by design. Cowardly, but valid.</p></div>
 </div>
</section>

Stage caption updates per level: mild: "Mild by design. Cowardly, but valid." extra: "Now we're talking. Napkins advised." loco: "LOCO. We are not liable for what happens next."

Map/truck:
<section id="truck" class="sec sec-ink">
 <div class="wrap truck-grid">
  <div>
   <p class="kicker k-yellow">TRACK THE TRUCK — IT MOVES, LIKE YOUR EX</p>
   <h2>FIND <span class="t-yellow">US</span></h2>
   <p class="lede">One truck. Seven haunts. Pick a day — the map keeps up.</p>
   <div class="days" id="days"> buttons generated by JS from SCHED array (or hardcode 7 buttons in HTML with data-index) — generate via JS is fine but first paint shows after JS runs immediately; fine. I'll generate in JS to keep HTML lean.
   <div class="where-card" id="whereCard">
     <p class="wc-day" id="wcDay">THU</p>
     <p class="wc-loc" id="wcLoc">KTown Plaza</p>
     <p class="wc-time" id="wcTime">5PM – 11PM</p>
     <span class="wc-badge" id="wcBadge" hidden>TODAY</span>
   </div>
  </div>
  <div class="map-wrap">
   <svg id="mapSvg" viewBox="0 0 640 440">…</svg>
  </div>
 </div>
</section>

Story:
<section id="story" class="sec sec-cream">
 <div class="wrap story-grid">
  <div class="story-copy">
   <p class="kicker">THE ORIGIN STORY — BRIEFLY SANE</p>
   <blockquote class="pull">"It started with a leftover tub of grandma's kimchi and a pack of tortillas. One wrong turn later, Kimchi Loco was born."</blockquote>
   <p>2023. Chef <b>Mina Oak?</b> — name: Mina Do? "Chef Mina" — fine: <b>Chef Mina</b> — had a tub of her grandmother's 2-week kimchi, a comal, and exactly zero plan. The first bulgogi taco sold out in 11 minutes. The second batch took a week. We've been marinating ever since.</p>
   <p>Everything is made from scratch on the truck: the kimchi ferments in the back (it rides shotgun, legally speaking), the salsas get blended nightly, and the tortillas get charred to order. Fusion isn't a gimmick here — it's dinner.</p>
   <div class="story-sign">— Mina & the Loco Crew</div>
  </div>
  <div class="polaroid"> svg taco drawing + caption "DAY ONE · THE FIRST BATCH, 11-MINUTE SELLOUT" + tape strips (divs). Also stat stickers around: "1 RECIPE" "2 CULTURES" "0 CHILL" rotated chips.
 </div>
</section>

Polaroid SVG: reuse mini taco drawing simplified (shell + fillings) inside cream card. I can reuse a smaller static version of builder taco with fixed colors.

Quotes marquee:
<div class="marquee m-red"><div class="m-track" id="m2"><div class="m-group"> sticker spans: "I drove 40 minutes for the kimchi fries. I'd drive 400." — MARCUS T. / "The LOCO taco made me see my ancestors. They approved." — DANA R. / "Came for one taco. Left with six and a sticker." — PRIYA K. / "Best fusion truck in the city. No notes." — JIN H. / "My diet starts tomorrow. Tonight we LOCO." — ALEX G.

Footer:
<footer class="footer">
 <div class="wrap foot-grid">
  <div class="f-brand"> logo, tagline "Seoul heat. Mexico City soul.", socials icons</div>
  <div class="f-col">HOURS: MON–FRI 11–LATE, SAT–SUN 10–LATE? per schedule; simpler: "THIS WEEK" mini list? Keep: <p class="f-head">HOURS</p> lines.
  <div class="f-col">CONTACT: hello@kimchiloco.com · (555) 019-LOCO? "(555) LOCO-TACO" fun. Catering note.</div>
  <div class="f-news"><p class="f-head">GET THE LUNCH DROP</p><p>Where we'll be tomorrow, every night at 8PM. No spam — only taco intel.</p><form id="newsForm"><input type="email" placeholder="your@email.com" required><button class="btn btn-yellow">Sign me up</button></form><p id="newsMsg" class="news-msg" hidden>You're in. First-timers get free elote. See you out there.</p></div>
 </div>
 <div class="foot-bottom">© 2025 Kimchi Loco · Made with gochujang & questionable decisions</div>
</footer>

Socials: three circle buttons with svg; clicking? They'd be href="#" — make them buttons that toast "We're @kimchiloco everywhere. See you there." Wired behavior instead of dead link. Good.

Now CSS. Let me write it out.

:root{
 --cream:#FBF3E4; --paper:#F6EBD7; --ink:#191410; --red:#E23A22; --orange:#F57C1F; --yellow:#F5C531; --green:#2F5E33;
 --display:'Archivo Black','Arial Black','Segoe UI',sans-serif? Arial Black primary: font-family:'Arial Black','Arial Bold',Arial,sans-serif? fine: 'Archivo Black','Arial Black',sans-serif;
 --serif:Georgia,'Times New Roman',serif; --mono:'Courier New',monospace;
 --shadow:6px 6px 0 var(--ink);
}
Base: *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{bg cream, color ink, font serif? body font: Georgia for paragraphs; base font serif, headings display. font-size 17px? line-height 1.6.

Selection color red/cream.

Nav: position sticky top 0 z 50; bg ink; color cream; display flex; padding 12px 24px; gap; border-bottom 3px solid var(--red)? A red underline accent nice. brand: display font 18px letterspacing; chili logo: svg 26px in red circle.
nav-links a: mono? use font:600 13px sans? Use mono uppercase 12px letter-spacing 2px color cream opacity .8 hover red. hide below 820px.
cart-btn: bg red, cream text, border 2px cream? style: display font 12px padding 8px 14px border-radius 999? Keep boxy: border-radius 6px; box-shadow 3px 3px 0 #000; b#cartCount bg cream color ink radius pill padding 1px 8px.
cart pop: @keyframes pop {50% scale 1.35}. .pop{animation:pop .35s}.

Hero: bg cream; padding: 64px 24px 40px; grid: minmax(0,1.05fr) minmax(0,.95fr); gap 24; align center; max-width 1200 margin auto.
kicker: mono 12px ls 2px uppercase; with before "—" ? style plain.
hero-title: display font; line 1 font-size clamp(72px,13vw,164px); line-height .85; letter-spacing -1px? Arial Black tight: letter-spacing:-2px. Line2 same size, color red, -webkit-text-stroke 2.5px ink? Red fill with dark stroke can look muddy at big size — actually red + black stroke reads poster-like. Try: line2 uses text-stroke ink 3px, fill red, transform rotate(-2deg) translateY(4px) display inline-block. Add yellow sticker "✱ HOT & READY"? Add an absolutely positioned rotated badge near title: <span class="est-badge">EST.<br>2024</span> yellow circle sticker with mono text rotated 8deg. Circle sticker: border-radius 50%, border 3px ink, box-shadow, display font 14px centered, size 86px. Position after LOCO inline.

ch spans: display inline-block; transition color .3s; delays on hover.

hero-sub: serif italic? normal Georgia 19px max-width 46ch; margin 20px 0 28px.
btn: display font? Button font: use display at 13px letter-spacing 1px uppercase; padding 14px 22px; border:3px solid ink; border-radius 8px; box-shadow var(--shadow); display inline-flex gap 8 align center; transition transform .15, box-shadow; hover translate(-2,-2) shadow 8 8; active translate(2,2) shadow 3 3.
btn-red bg red cream; btn-ghost bg cream ink.
hero-stats: mono 12px; display flex gap; align center; svg star yellow stroke ink? star icon fill var(--yellow) stroke ink 1.5. separators.

hero-truck: position relative; .burst{position absolute; inset 5%; width 90%; animation spin 45s linear infinite; opacity? full color}. truck-svg width 100%; position relative; animation bob. spotted-chip: absolute bottom 6px left 50% translateX; bg ink color cream mono 11px padding 8px 14px border-radius 999 border 2px red? with pulsing dot (red circle animation). hover bg red.

Marquee: overflow hidden; bg ink; color yellow; border-y 3px ink? .m-track{display flex; width max-content; animation slide 28s linear infinite}. .m-group{display flex; align-items center; gap 28px; padding-right 28px? For seamless: two groups each containing items; translateX(-50%). Item font display 15px ls 2px; svg chili 16px red. hover pause: .marquee:hover .m-track{animation-play-state:paused}.
@keyframes slide{to{transform:translateX(-50%)}}
m-red variant: bg red color cream; sticker spans: bg cream color ink padding 8px 16px border 2px ink box-shadow 3px3px0 ink? In marquee, stickers rotated: .m-red .m-group span{transform rotate(-2deg)} nth-child even rotate(2deg). Quote stickers font mono 13px bold.

Sections: .sec{padding:88px 24px} .wrap{max-width:1160px;margin:auto}
sec-red{background:var(--red); color:var(--cream)} — with dot pattern overlay? add subtle halftone via background-image data-uri: url("data:image/svg+xml,...") small 18px tile with cream dot opacity .12. Pattern: <svg xmlns width=18 height=18><circle cx=3 cy=3 r=1.6 fill='%23FBF3E4' opacity='.18'/></svg> encoded. ok.
sec-yellow{background:var(--yellow)}
sec-ink{background:var(--ink); color:var(--cream)}
sec-cream{background:var(--cream)}

sec-head h2: display font clamp(44px,7vw,84px) line-height .9; span{color:...} In red section span color yellow with ink stroke; in yellow section span red; ink section span yellow.
kicker colors adapt: .k-cream{color:rgba cream .85}.

heat-legend: mono 12px margin-top 10px; chili svg 14px inline vertical-align.

menu-board: margin-top 40px; border:3px solid var(--ink); border-radius:14px; overflow hidden; background var(--cream); box-shadow 8px 8px 0 rgba(25,20,16,.35)? On red bg, shadow ink solid: 10px 10px 0 var(--ink)? cream board with ink shadow on red — nice.
mrow + mrow{border-top:3px solid var(--ink)}
mrow-head{width 100%; display grid; grid-template-columns: 64px 1fr auto auto 44px; align-items center; gap 18px; padding 20px 26px; background transparent; cursor pointer; text-align left; font inherit; transition background .2,color .2}
mrow-head:hover{background var(--ink); color var(--cream)} — then chilis & price adapt (currentColor) — chili fill currentColor red? set .mheat svg color var(--red); on hover row keep red? On ink hover red chilis fine. mnum: mono bold color red; hover stays red.
mname: display font 20px ls .5; em.tag: mono 10px bg yellow border 2px ink padding 2px 8px radius 999 rotate(-2deg) display inline-block margin-left 10px vertical-align middle.
mheat: display flex gap 3; svg 16px color red.
mprice: display font 18px; small mono 11px opacity .7.
mtoggle: 34px circle border 2px ink display grid place-items center; svg plus 16; transition transform .3. open: rotate 45deg; and head background ink? When open keep row head ink bg? Selected style: .mrow.open .mrow-head{background ink; color cream}.
mrow-body{display grid; grid-template-rows:0fr; transition grid-template-rows .35s ease} .mrow.open .mrow-body{grid-template-rows:1fr} inner{overflow hidden;} inner padding: 0 26px 24px 108px (aligned under name); p desc serif 16 max-width 60ch; mlist mono 12px margin 10px 0 16px; btn-small padding 10px 16px font 11px.

On ≤700px: head grid-template-columns: 40px 1fr auto 34px; hide mheat? keep heat, hide price small? Set columns: 44px 1fr auto 40px with heat+price in a column? Simplify: at small: mheat hidden? Heat info also in tag? I'd keep heat: grid 44px 1fr auto; move toggle? Keep: [num][name][heat+price stacked? ] Eh: at ≤640: grid-template-columns 40px 1fr auto 40px; .mprice{display none}? Price useful... hide mheat at very small? I'll hide mprice small (price shown in expanded Add button). Good compromise.

Builder grid: grid-template-columns minmax(0,.9fr) minmax(0,1.1fr); gap 48; align-items start.
ctrl: margin-top 22px. ctrl-label mono 12px bold margin-bottom 10px.
opts: flex wrap gap 10.
opt button: bg cream? On yellow bg: bg transparent border 3px ink padding 10 16 radius 8 display font 12px ls 1; hover bg cream; .on{bg ink; color yellow; box-shadow 3px 3px 0 rgba(0,0,0,.25)? or red shadow} .on{background:var(--ink); color:var(--cream)} with chili svgs colored red inside.
extra chips same.
build-bar: margin-top 30px; border-top 3px ink; padding-top 18px; display flex; justify-content space-between; align-items center; flex-wrap. price-line: name display font 16, price display font 28 color red.
build-stage: background cream; border 3px ink; radius 16; box-shadow 10px 10px 0 var(--ink); padding 28px; position sticky? top 90px sticky nice on desktop. svg width 100%. stage-caption mono 12px center margin-top 8 color ink .7.

Truck section grid: .9fr 1.1fr gap 40.
days: display grid gap 8 margin 26px 0; day button: display grid grid-template-columns 52px 1fr auto; text-align left; bg transparent; border 2px solid rgba(251,243,228,.25); color cream; padding 12px 16px; radius 10; cursor; transition; day mono bold color yellow; loc serif 15; time mono 11 opacity .7. hover border-color cream. .on{background red; border-color red; color cream; box-shadow 4px 4px 0 rgba(0,0,0,.4)} .on .wc? day color cream.
where-card: border 2px cream radius 12 padding 16 20; display flex gap 14 align center; position relative. wc-day display font 22 color yellow; wc-loc serif 16 bold; time mono 11. wc-badge: bg yellow color ink mono 10 bold padding 3 8 radius 999 margin-left auto; pulse animation.

map-wrap: border 3px solid #4a3a28? map in rounded frame: border-radius 16; overflow hidden; border 3px solid rgba(cream,.2); box-shadow 8px 8px 0 rgba(0,0,0,.4). svg display block width 100%.
Pin CSS: #pin{transition: transform .8s cubic-bezier(.65,-0.15,.35,1.25)} pulse circle: @keyframes ping{0%{r:8? animate r not via CSS in Chrome? CSS can animate r as property (Chrome supports r as CSS property for circles). Safer: animate transform scale on circle with transform-origin center; use transform-box: fill-box. .ping{transform-box:fill-box; transform-origin:center; animation:ping 2s ease-out infinite} @keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.6);opacity:0}}.

Story grid: 1.05fr .95fr gap 48 align center.
pull: serif italic clamp(26px,3.4vw,38px) line-height 1.25; color red; with quotes styled; margin 18px 0 24px; text-indent? Add big red "“" as ::before display block display font? Keep simple.
story p: serif 17 margin-bottom 16 max-width 58ch. b red? b{color:var(--red)}? "Chef Mina" highlighted red nice.
story-sign: mono 13 bold margin-top 8.
polaroid: bg #fff? cream card: background #FFFDF6; border 3px ink; padding 16px 16px 0; box-shadow 10px 10px 0 var(--ink); rotate 2.5deg; max-width 420; justify-self center; position relative. tape: two divs absolute width 90 height 26 bg yellow opacity .8 border 1px solid rgba(ink,.2) rotate ∓45 top -12 left/right.
caption mono 11 center padding 12.
mini svg reuse: draw simple taco inline (static, fixed colors) viewBox 0 0 300 210.
stat stickers row below polaroid? place three chips rotated: .story-chips{display flex gap 12 margin-top 26} chip: bg red color cream display font 12 padding 8 14 radius 8 border 3 ink shadow 4 4 0 ink; nth rotate. Items "1 RECIPE", "2 CULTURES", "0 CHILL". Put chips in story-copy under sign instead. ok.

Footer: bg ink color cream padding 64 24 0.
foot-grid: grid 1.2fr .7fr .8fr 1.1fr gap 32. f-head mono 12 yellow margin-bottom 12. lines serif 15 opacity .85 line-height 1.9.
f-brand .brandline: display font 20; tagline serif italic opacity .8 margin 10 0 16. socials flex gap 10: button 40px circle border 2px cream bg transparent color cream display grid place; hover bg red border red; svg 18.
news form: display flex gap 10 margin-top 12; input flex 1 bg #2a2119? bg rgba(cream,.08); border 2px solid rgba(cream,.35); color cream; padding 12 14; radius 8; font mono 14; focus border yellow outline none. btn-yellow bg yellow ink border ink shadow 4 4 0 #000.
news-msg: color yellow mono 13 margin-top 12.
foot-bottom: border-top 1px solid rgba(cream,.15); margin-top 48; padding 20 0 28; mono 11 opacity .6 center? left with wrap.

Toast: #toast{position fixed; left 50%; bottom 28px; transform translate(-50%,80px); opacity 0; transition .35s cubic; background var(--ink); color cream; border 3px solid var(--cream); box-shadow 6px 6px 0 rgba(0,0,0,.35); padding 14px 20px; radius 12; display flex gap 10 align center; z 100; max-width 90vw; font? mono 13}. .show{transform translate(-50%,0); opacity 1}. chili svg red inside.

Reveal: .reveal{opacity 0; transform translateY(26px); transition .7s ease} .reveal.in{opacity 1; transform none}.

Shake for LOCO taco: @keyframes shimmy{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.4deg)}75%{transform:rotate(1.4deg)}} #tacoSvg.locos{animation shimmy .5s ease-in-out infinite}.

Flame flicker: @keyframes flick{0,100:scaleY(1);50:scaleY(.86) } flames transform-box fill-box origin bottom.

Steam: .steam path{animation: rise 3.2s ease-in-out infinite; opacity .35} delays nth. keyframes rise{0%{transform:translateY(4px);opacity:0}30%{opacity:.4}100%{transform:translateY(-10px);opacity:0}} transform-box fill-box.

Bob: @keyframes bob{0,100:translateY(0) rotate(0);50:translateY(-7px) rotate(.6deg)}.

Spin burst: @keyframes spin{to{rotate:360deg}} use transform rotate.

Open sign wobble: @keyframes wob{0,100:rotate(-2deg);50:rotate(2deg)} transform-origin bottom; apply to sign group.

Now the truck SVG concrete markup:

<svg class="truck-svg" viewBox="0 0 560 360" role="img" aria-label="Kimchi Loco food truck illustration">
 <ellipse cx="285" cy="326" rx="235" ry="14" fill="#191410" opacity=".16"/>
 <!-- wheels behind body? draw after body but standard side view wheels overlap body bottom; draw wheels after body. -->
 <g class="truck-bob">
 <g class="sign-wobble">
   <line x1="300" y1="80" x2="300" y2="46" stroke="#191410" stroke-width="5"/>
   <rect x="252" y="24" width="96" height="30" rx="7" fill="#F5C531" stroke="#191410" stroke-width="5"/>
   <text x="300" y="46" text-anchor="middle" font-family="'Arial Black',sans-serif" font-size="17" fill="#191410">OPEN!</text>
 </g>
 <rect x="44" y="74" width="440" height="18" rx="9" fill="#E23A22" stroke="#191410" stroke-width="5"/> roof
 <rect x="52" y="88" width="424" height="180" rx="16" fill="#FBF3E4" stroke="#191410" stroke-width="6"/>
 <clipPath id="bodyClip"><rect x="55" y="91" width="418" height="174" rx="13"/></clipPath>
 <g clip-path="url(#bodyClip)">
   <rect x="52" y="230" width="424" height="42" fill="#E23A22"/>
   <text x="264" y="260" text-anchor="middle" font-family="'Arial Black',sans-serif" font-size="27" fill="#FBF3E4" letter-spacing="2">KIMCHI LOCO</text>
 </g>
 driver window: <rect x="78" y="112" width="98" height="66" rx="10" fill="#191410"/>
 <rect x="88" y="121" width="52" height="9" rx="4.5" fill="#FBF3E4" opacity=".28" transform="rotate(-8 88 121)"/>
 hatch opening: <rect x="212" y="116" width="176" height="62" rx="8" fill="#191410"/>
 counter: <rect x="204" y="178" width="192" height="12" rx="3" fill="#191410"/>
 awning: <g stroke="#191410" stroke-width="4">
   <rect x="206" y="94" width="188" height="16" fill="#E23A22"/>
   scallops: <path d="M206 110a16 16 0 0 1 31.4 0z" fill="#FBF3E4"/> hmm scallop width: 188/6≈31.3: xs:206,237.3,268.7,300,331.3,362.7 → last ends 394. path "M206 110a16 15 0 0 0 31.3 0z"? Semicircle bulging downward: from (206,110) arc to (237.3,110) with sweep flag making it dip down: a 16 16 0 0 0 31.3 0 → sweep 0 goes counterclockwise → downward bulge? For arc from left to right, sweep=1 bulges up... let me think: arc with sweep-flag 1 goes clockwise → from (206,110) to (237,110) clockwise passes above? Clockwise in SVG (y down): moving right along the top would be... start (206,110), end (237,110). Clockwise path from start to end with small radius goes below? Hmm: clockwise (sweep=1) means the arc turns right relative to travel; traveling +x direction, turning right = downward in screen coords. So sweep=1 bulges down. I want scallops bulging down (awning flaps). Use sweep=1. Alternate colors: i=0 cream,1 red,2 cream,3 red,4 cream,5 red.
   Each: <path d="M206 110a15.7 15.7 0 0 1 31.3 0z" fill="#FBF3E4"/> — wait if sweep 1 bulges down, but the flat top edge is the awning bottom (y=110) and the rect bottom is y=110 — scallops hang below. Good. But then scallop centers y=110 with r≈15.7 dipping to 125.7. But hatch top at y=116 — scallops overlap hatch opening top. Hatch opening y=116..178: scallops to ~126 overlapping the dark opening — visually awning over window: fine, looks natural. Reduce r: make scallops shallower: ry 10: "a15.7 10 0 0 1 31.3 0z". OK.
 </g>
 inside hatch: two mini tacos + bottle: 
  <g>
   <path d="M246 172q14 -16 28 0z" fill="#F5C531" stroke="#191410" stroke-width="3"/> (taco shell half-moon with flat top at y=172) Actually shape: flat top, curved bottom? Taco side: arc bulging down = shell. M246 172 a14 14 0 0 1? from left to right sweep 1 bulges down — that's shell silhouette upside? Taco side view: curved bottom, tips up, fillings top. Tiny icon: half-circle bulging down with dots on the flat top. Do: path M244 170 a16 13 0 0 0 32 0 z — sweep 0 bulges up. I want bulge down: sweep... ugh. Test: from (244,170) to (276,170), sweep=1: clockwise → bulge down (as reasoned). So "M244 170a16 13 0 0 1 32 0z" wait direction flags: a rx ry rot large-arc sweep dx dy: "a16 13 0 0 1 32 0". Large-arc 0. That gives downward bulge (half-ellipse below the line) — that looks like an upside down taco shell; fine as stylized taco with filling dots on top edge? Draw filling dots above line: 3 small circles red/green at y 166. Eh—simplify: tiny tacos: semicircle down + dots above. Add squeeze bottle: rect x=346 y=146 w=14 h=26 rx=4 fill red stroke ink 3 + tip triangle? rect + small rect tip: path M350 146 h6 v-8 l-3 -4 -3 4z fill ink? Keep: bottle body + cap.
 Steam above hatch top (y ~116) — but awning there; steam from hatch front? Place steam curls rising from behind counter? Actually steam from hatch opening upward would hit awning. Put steam from the roof? No. Alternative: steam from a chimney? Food trucks vent on roof. Put small vent stack on roof left of sign: rect x=120 y=52 w=22 h=22 fill ink; steam curls rising from (131,50): three paths class steam: d="M131 46c-6-8 6-14 0-22c-5-7 5-13 0-20" stroke ink sw4 fill none opacity .35. With rise animation. Good — roof vent steam, playful.
 headlight: <rect x="468" y="200" width="10" height="22" rx="5" fill="#F5C531" stroke="#191410" stroke-width="3"/> front right edge x body to 476; place x=468.
 front bumper: <rect x="44" y="244" width="12" height="26" rx="6" fill="#191410"/>? skip.
 wheels: <g> <circle cx="150" cy="272" r="33" fill="#191410"/><circle cx="150" cy="272" r="13" fill="#F5C531" stroke="#191410" stroke-width="4"/> similarly cx="392". Add wheel rotation on hover? skip.
 side mirror: <line x1="52" y1="120" x2="34" y2="104" stroke ink 5/><circle cx="32" cy="102" r="7" fill="#E23A22" stroke ink 4/> — front is right? If front right, mirror on right: x=476.. place right: line 476,116 → 494,102 circle 496,100. But roof ends 484; fine.
 Order of draw: shadow, bob group [sign, roof, body, clip stuff, window, hatch, counter, awning, hatch items, wheels, mirror, light], steam group (on top).
</svg>

Hmm wheels drawn inside bob group bob too (whole truck bobs, shadow static) — good.

Text inside SVG: font-family 'Arial Black' — should render.

Now map SVG concrete:

<svg id="mapSvg" viewBox="0 0 640 440">
 <rect width="640" height="440" fill="#221A12"/>
 blocks: several rects fill #191410 opacity? subtle: fill="#2A2016": e.g. rects (30,30,220,110? avoid roads). Roads: horizontal at y=100,200,300,380? Let roads: y: 90,190,290,370 (stroke width 14) and vertical x: 90,230,370,510 (w 14). color #46362a? Let me set road color #3D2E20 and dashed center lines #F5C531 opacity .5 on main roads y=290 and x=370.
 Buildings: small rects #1B140D scattered within blocks — maybe 8 rects.
 Park: rect x=392 y=102 w=100? block between x 377..503, y 97..183: park rect x=382 y=100 w=116 h=80 fill #2F5E33 rx=6; trees: 4 circles #3E7A3A + trunks? just circles opacity .9 r=8; label "PARK" mono 10 fill #9dbb8e.
 Water? Harbor near Sun location (90,360): add water: rect x=20 y=330? Sun at (90,360) — put water bottom-left: path/rect x=0 y=340 w=180 h=100 fill #1E3A3A? dark teal? Blue prohibited vibe — a dark slate water is fine but let's use ink-blue... skip water, call it "HARBOR" label instead. Fine.
 Street labels: mono 10 fill #8a7154: "5TH AVE" along y=90, "MARKET ST" y=190, "GRAND AVE" y=290, "HARBOR RD" y=370; vertical: "N ST" x=90, "2ND" 230, "MAIN" 370, "EAST BLVD" 510. Rotate vertical text -90.
 Route: dashed path from depot to pin? skip.
 Pin group:
 <g id="pin" style="transform:translate(230px,290px)">
   <circle class="ping" r="16" fill="none" stroke="#E23A22" stroke-width="3"/>
   <path d="M0 26C-9 14 -22 2 -22 -10 -22 -24 -12 -34 0 -34 12 -34 22 -24 22 -10 22 2 9 14 0 26Z" fill="#E23A22" stroke="#FBF3E4" stroke-width="3.5"/>
   <circle cx="0" cy="-11" r="8" fill="#F5C531"/>
   <path tiny chili inside? small red dot: circle r=3 fill #E23A22 cx0 cy-11.
   <text id="pinLabel" x="0" y="46" text-anchor="middle" font-family="'Courier New',monospace" font-weight="bold" font-size="13" fill="#FBF3E4">KTOWN PLAZA</text>
 </g>
 Compass: circle top-right with N arrow: <g> circle cx=596 cy=44 r=22 fill #191410 stroke #8a7154; path arrow up yellow; text N.
 Also truck route trail: dashed circle? skip.

Pulse circle inside pin group with CSS animation transform scale — transform-box fill-box on circle at origin of group (cx default 0,0): circle cx=0 cy=0? Put at cy=-11? ping centered at pin circle: cx=0 cy=-11 r=14.

Schedule data JS:
const SCHED=[
 {d:'MON',loc:'City Hall Plaza',t:'11AM – 3PM',x:230,y:190},
 {d:'TUE',loc:'Riverside Tech Park',t:'11AM – 3PM',x:510,y:90},
 {d:'WED',loc:'Grand Night Market',t:'5PM – 11PM',x:370,y:290},
 {d:'THU',loc:'KTown Plaza',t:'5PM – 11PM',x:230,y:290},
 {d:'FRI',loc:'Eastside Brewery Block',t:'6PM – 12AM',x:510,y:290? Fri (510,370)? spread: (560,180)},
 {d:'SAT',loc:'Sunset Park Flea',t:'12PM – 9PM',x:440,y:140},
 {d:'SUN',loc:'Harbor Sunday Market',t:'10AM – 6PM',x:90,y:370},
];
Adjust overlaps: Mon(230,190)? Wed(370,290) & Thu(230,290) both on grand ave—fine visually distinct. Fri(560,180)? that's on road x=510.. put (560,200). Sat park (440,140). Tue (510,90)? Tue near (510,90) intersection w/ park above y 97 — put Tue (510,60)? Roads y=90: Tue at (510,90) intersection ok, park y=100 below? conflict-ish; park block y 100..180 between x 377..503 — Tue pin at (510,90) is above park, fine.
Final: Mon(150,190) Tue(510,90) Wed(370,290) Thu(230,290)→ hmm Wed and Thu same road: fine. Actually make Thu (230,290) and Wed (370,190)? Wed night market near center. Final: Mon(150,190), Tue(510,90), Wed(370,190)? That crowds park (x377-493,y100-180). Wed(370,190) is at intersection x=370,y=190 — ok, park starts x=382. fine.
Thu(230,340)? Let's finalize: Mon(150,190) Tue(510,90) Wed(370,300) Thu(230,300) Fri(560,340)? y roads 370: Fri(510,370). Sun(90,340). Sat(440,140). Good spread: 
Mon(150,190), Tue(510,60)? pin label text may clip at top (y-34.. label y=46 relative) → Tue at y=90 keeps label at 136 fine. Tue(510,90). Fri(510,370): label at y=416 within 440 ok. Sun(90,340): label "HARBOR SUNDAY MARKET" width at mono 13 ~ 21 chars*8 =168px centered at x=90 → clips left (x -6). Shorten labels: pinLabel shows short: use loc uppercase truncated? Provide short label field: {s:'CITY HALL'}, 'RIVERSIDE TECH','NIGHT MARKET','KTOWN PLAZA','BREWERY BLOCK','SUNSET FLEA','HARBOR MKT'. Sun at (120,340) label centered width ~ 11*8=88 fine.

Today: const today = (new Date().getDay()+6)%7 (Mon=0). Default select today. Badge "TODAY" shown when selected==today. Hero spotted chip text: `TODAY: ${SCHED[today].loc.toUpperCase()} · ${SCHED[today].t}`.

Builder JS:
state={protein:'Bulgogi Beef',tortilla:'Corn',level:'mild',extras:new Set()}
PROTEINS={Bulgogi Beef:{color:'#7A4023',price:1,sear:true}, 'Spicy Pork':{color:'#B23A2B',price:.75,sear:true},'Korean BBQ Tofu':{color:'#D9A93C'? tofu golden #E0C25A,price:.5,sear:false}}
TORT={Flour:'#F2E3C2',Corn:'#ECC45F'}
render():
 svg.style.setProperty('--shell', TORT[tortilla]); shell path fill via fill="var(--shell)"? SVG fill accepts CSS var when set via style attr: fill="var(--shell)" works in Chrome if property on element/ancestor. Set on svg element style. Similarly --prot.
 protein strips fill="var(--prot)". sear overlay group display toggled (dark stripes) — class 'sear' toggled on svg, CSS #searG{display:none} svg.sear #searG{display:block}? Use attribute hidden toggling in JS directly: searG.style.display.
 kimchi count: kimchi paths array (6), visible first N: mild 2, extra 4, loco 6; loco also flames on + svg class locos + caption.
 drizzle & aioli & daikon groups toggled by extras set.
 price: 4.5 + prot + levelAdd + extras.size*.5 → toFixed(2) with $.
 name: `The ${protein.split(' ')[0]} ${level==='mild'?'Classic':level==='xx'?'XX':'LOCO'}`? level keys: mild/xx/loco. Name: "The Bulgogi Classic", "The Bulgogi XX", "The Bulgogi LOCO". If tofu: "The Korean BBQ Classic"? split(' ')[0] gives "Korean". Better custom names: Bulgogi Beef→'Bulgogi', Spicy Pork→'Spicy Pork', Korean BBQ Tofu→'Tofu Bibim'. map name field.
 Caption per level.
Also stage caption + flames flicker.

Add to order: cart++, cartCount text, pop class, toast(`Added: ${name} — $${price}`), button text swap "ADDED!" temporarily.

Menu add buttons: data-item & data-price → cart++, toast(`Added: ${item} — $${price}`).

Cart click: toast("Checkout happens at the window — bring cash & courage.").

Newsletter submit: hide form? keep form, show msg, reset. If invalid email, browser handles via required+type=email (inline validation) — fine.

Social buttons: toast("@kimchiloco — see you on your feed.").

Reveal targets: sections' children? apply .reveal to .sec-head, menu-board, build cols, truck cols, story cols, polaroid. Observer threshold .15.

Also active nav? skip.

Starburst generator:
function burst(){const svg=document.getElementById('burst');const n=14,o=290,i=225,cx=300,cy=300;let pts=[];for(let k=0;k<n*2;k++){const r=k%2?i:o,a=Math.PI*k/n - Math.PI/2;pts.push((cx+r*Math.cos(a)).toFixed(1)+','+(cy+r*Math.sin(a)).toFixed(1));}
svg.innerHTML=`<polygon points="${pts.join(' ')}" fill="#F5C531" stroke="#191410" stroke-width="4"/>`;}
Note: burst rotating slowly with bobbing truck above. Stroke rotating visible. Also add second smaller? fine.
Marquee duplicate: m1 track innerHTML += innerHTML; but two groups needed for -50%: structure: .m-track > .m-group; duplicate group via JS append clone. Then animation translateX(-50%) moves exactly one group width if track width = 2 groups and gap handled: put gap inside group padding-right equal to column gap. Set .m-group{padding-right:28px; gap? display flex gap 28px} and track no gap. Then translate -50% seamless. For quotes same.

Responsive:
@media(max-width:960px): hero grid 1col (truck after copy, max-width 520 margin auto); build grid 1col (stage first? order: stage after controls fine; set build-stage order -1? On mobile show taco at top: .build-grid{display:grid} .build-stage{order:-1}? then sticky off. Yes order -1 with non-sticky.) truck-grid 1col; story 1col; foot-grid 2col then 1col at 640; nav-links display none; hero-title sizes clamp handles.
@media(max-width:640px): mrow-head columns 36px 1fr auto 34px; hide mprice; paddings reduce; h2 sizes; where-card stack? fine flex wrap.
No horizontal scroll: marquee overflow hidden ✓; body overflow-x hidden as safety.

Buttons in .opts have chili svgs: for level buttons include heat chili count colored red (svg use via <svg class="c"><use href="#chili"/></svg>? Define chili as <symbol id="chili"> in a hidden svg defs block at top, then <svg class="ic"><use href="#chili"/></svg>. use with href works in Chrome. Colors: symbol paths fill currentColor except stem fill var(--green)? symbol with two paths: body fill currentColor; stem fill="#2F5E33". Good.

Define symbols block (display:none): chili, star, pin, plus, arrow-right, bag, clock? and social glyphs drawn inline separately.

Plus icon symbol: <symbol id="plus" viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="currentColor" stroke-width="3" stroke-linecap="round" fill="none"/></symbol>
Bag: <symbol id="bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M5 8h14l-1.2 12.2a1.8 1.8 0 0 1-1.8 1.8H8a1.8 1.8 0 0 1-1.8-1.8Z" ... /><path d="M9 8V6a3 3 0 0 1 6 0v2"/></symbol>
Arrow: <symbol id="arrow"><path d="M4 12h15M13 6l6 6-6 6" stroke currentColor sw 2.5 fill none linecap round linejoin round/></symbol>
Star: fill currentColor path as above.
Pin: fill currentColor + hole? pin symbol: path fill currentColor + circle fill var? hole circle fill cream won't adapt... use fill-rule evenodd combining: single path with hole: d="M12 22C6 14 3 10.5 3 7a9 9 0 0 1 18 0c0 3.5-3 7-9 15Zm0-11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" fill currentColor fill-rule evenodd. good.

Chili symbol final:
<symbol id="chili" viewBox="0 0 24 24">
 <path fill="currentColor" d="M2.9 21.1c-1.1-.9-.8-2.5.2-3.7 2.9-3.3 7.2-5.5 11.3-7 2.6-1 5-1.9 6.3-3.5.8-1 .9-2.2.4-3.1 1.2.5 2 1.7 1.9 3-.2 2.6-2.7 4.4-5.7 5.6-4.5 1.9-9.1 4-11.6 7.3-.8 1-1.8 2.1-2.8 1.4z"/>
 <path fill="#2F5E33" d="M20.2 5.1c.4-1.5 1.8-2.5 3.4-2.3-.2 1.3-1.1 2.4-2.4 2.8-.4.1-.7-.1-1-.5z"/>
</symbol>
Hmm body path — I earlier composed something; final body path: let me write coherent:
`M3 21c-1-.9-.7-2.5.3-3.7 2.9-3.3 7.2-5.5 11.3-7 2.6-1 5-1.9 6.3-3.5.8-1 .9-2.2.4-3.1 1.2.5 2.1 1.7 2 3-.2 2.6-2.7 4.4-5.7 5.6-4.5 1.9-9.1 4-11.6 7.3-.8 1-2 2.2-3 1.4z`
Path trace: M3,21; c → (3.3,17.3)-ish tip curl; then long curve up-right through (14.6,10.3); then to (20.9,6.8)? then (21.3,3.7)? then stem-side bulge to (23.3? ) — wait c 1.2.5 2.1 1.7 2 3 relative from (21.3,3.7) → (23.3,6.7); then c -.2 2.6-2.7 4.4-5.7 5.6 → (17.6,12.3); then c-4.5 1.9-9.1 4-11.6 7.3 → (6,19.6); then c-.8 1-2 2.2-3 1.4z → back to (3,21). Yes plausible crescent. Stem near (21-23,3-5) green. 

Logo chili in nav: red circle with cream chili: <span class="logo"><svg><use chili></svg></span> .logo{width:34px;height:34px;border-radius:50%;background:var(--red);display:grid;place-items:center;border:2px solid var(--cream)} svg 18px color cream — but stem green on red ok.

Also heat legend chilis: three sizes? Show "★ heat scale:" with 1/2/3 chilis.

Now quotes/sticker colors: .m-red .m-group span{background:var(--cream); color:var(--ink); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:10px 18px; border-radius:10px; font:700 13px var(--mono); white-space:nowrap}. Rotation nth-child(odd) rotate(-1.5deg), even 1.5deg; but animation on parent transform — children transform fine.

Black marquee items: .m-black span{font display 15px; color yellow; ls 2px; white-space nowrap} chili icon red 16px. 

Menu section pattern overlay: .sec-red{background-color:var(--red); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='4' cy='4' r='1.7' fill='%23FBF3E4' fill-opacity='.14'/%3E%3C/svg%3E")}. Also sec-yellow similar with ink dots .08.

Headings inside sections: h2 margin 8 0 0; kicker margin-bottom 6.

Let me also make hero-sub italic serif with red underline squiggle? Add small SVG underline scribble under "LOCO" in tagline? skip.

Focus styles: :focus-visible{outline:3px solid var(--red); outline-offset:2px}.

One more interactive delight: clicking the truck makes the OPEN sign flip to "SOLD OUT!? " then back? Fun: click truck → honk toast "Beep beep — see you at KTown Plaza." and wheels spin? Keep: click truck → toast "She honks back. KTown Plaza, 5PM. Don't be late." Add cursor pointer on truck svg. Cheap, wired. Also add tiny truck wiggle on click via class.

Let me now count ids: burst, m1, m2, cartBtn, cartCount, toast, tacoSvg, tacoName, tacoPrice, addCustom, stageCaption, proteinOpts, tortillaOpts, levelOpts, extraOpts, days, wcDay, wcLoc, wcTime, wcBadge, pin, pinLabel, mapSvg? newsForm, newsMsg, spottedChip, truckSvg, searG, kimchiG (paths nodelist), flamesG, drizzleG, aioliG, daikonG, shellPath.

Taco SVG markup concrete (viewBox 0 0 420 300):

<svg id="tacoSvg" viewBox="0 0 420 300">
 <ellipse cx="210" cy="252" rx="150" ry="16" fill="#191410" opacity=".14"/>
 <!-- flames -->
 <g id="flamesG" style="display:none">
  <g class="flame" transform="translate(96,58)">
    <path d="M12 0C7 8 0 13 0 21a12 12 0 0 0 24 0C24 12 17 9 15 2c-1.5 4-4 5-3 1z" fill="#F5C531" stroke="#191410" stroke-width="3"/>
    <path d="M12 12c-3 4-5 6-5 9a5 5 0 0 0 10 0c0-4-3-5-5-9z" fill="#E23A22"/>
  </g>
  <g class="flame" transform="translate(298,58) scale(.85)"> same paths
 </g>
 <!-- fillings -->
 <g id="fillG">
  <ellipse cx="210" cy="152" rx="118" ry="30" fill="#2F5E33"/> bed of lettuce green? base bed dark green — nice depth.
  protein strips (8): use <g id="protG" fill="var(--prot,#7A4023)" stroke="#191410" stroke-width="3">
    <rect x="120" y="96" width="58" height="15" rx="7.5" transform="rotate(-14 149 103)"/>
    <rect x="170" y="86" width="60" height="15" rx="7.5" transform="rotate(-7 200 93)"/>
    <rect x="222" y="88" width="58" height="15" rx="7.5" transform="rotate(6 251 95)"/>
    <rect x="262" y="100" width="54" height="15" rx="7.5" transform="rotate(14 289 107)"/>
    <rect x="132" y="114" width="60" height="15" rx="7.5" transform="rotate(-18 162 121)"/>
    <rect x="238" y="118" width="58" height="15" rx="7.5" transform="rotate(16 267 125)"/>
    <rect x="184" y="106" width="64" height="15" rx="7.5" transform="rotate(2 216 113)"/>
    <rect x="196" y="70" width="46" height="14" rx="7" transform="rotate(-3 219 77)"/>
  </g>
  sear group #searG: dark dashes on strips: <g stroke="#191410" stroke-width="2.5" stroke-linecap="round" opacity=".55"> lines along strips: <path d="M132 100l34-8"/> etc ~6 lines. fill none.
  kimchi #kimchiG stroke-linecap round fill none: paths class k, stroke alternating #E23A22 / #F57C1F sw 7:
   k1 M118 128 q8 -12 16 0 q8 12 16 0
   k2 M176 118 q8 -12 16 0 q8 12 16 0
   k3 M236 112 q8 -12 16 0 q8 12 16 0
   k4 M284 126 q7 -11 14 0 q7 11 14 0
   k5 M150 142 q7 -10 14 0 q7 10 14 0
   k6 M254 140 q7 -10 14 0 q7 10 14 0
  greens triangles #2F5E33: <path d="M150 84l10 16-20 2z"/> few... keep 3 small.
  daikon #daikonG fill #F2E8B0 stroke ink 2.5: rects 12x12 rotated: x=210 y=124; x=164 y=130; x=262 y=128.
  sesame #aioliSes? sesame dots belong with aioli? Sesame always? Put sesame dots group #sesG always on? Tie sesame to aioli extra: aioli group = cream squiggle + dots.
  aioli #aioliG: <path d="M140 150q14 -12 28 0q14 12 28 0q14 -12 28 0q14 12 28 0q14 -12 28 0" stroke="#FBF3E4" stroke-width="6" fill="none" stroke-linecap="round"/> plus dots: 5 circles r=2.6 fill #FBF3E4 on strips.
  drizzle #drizG: <path d="M128 132q12 12 24 0q12 -12 24 0q12 12 24 0q12 -12 24 0q12 12 24 0q12 -12 24 0" stroke="#E23A22" stroke-width="6.5" fill none linecap round/>
 </g>
 <!-- shell -->
 <path id="shellPath" d="M25 165 Q210 15 395 165 Q210 225 25 165 Z" fill="var(--shell,#ECC45F)" stroke="#191410" stroke-width="6" stroke-linejoin="round"/>
 char spots: <g fill="#191410" opacity=".14"><ellipse cx="90" cy="168" rx="16" ry="7" transform="rotate(-18 90 168)"/><ellipse cx="150" cy="140" rx="13" ry="6" transform="rotate(-24 150 140)"/><ellipse cx="215" cy="128" rx="14" ry="6"/><ellipse cx="285" cy="142" rx="13" ry="6" transform="rotate(22 285 142)"/><ellipse cx="340" cy="166" rx="15" ry="7" transform="rotate(18 340 166)"/></g>
 fold highlight: <path d="M40 168 Q210 100 380 168" stroke="#FBF3E4" opacity=".25" stroke-width="5" fill="none"/>
</svg>

Wait shell top apex y=90 but fillings at y 70-150 — fillings above 90 would poke above shell edge; shell drawn after covers area below its top edge curve... The shell's top edge passes through points; fillings between y 70..150 will be partially covered by shell (region between top arc and bottom arc). Since shell drawn on top, fillings visible only where they're above the shell's top-edge curve. Near center, top edge y≈90, so fillings above y≈90 near center visible; at sides top edge rises to 165. Strips at y 70-130 centered: strip at x=120 y=96: shell top edge at x=120? Bezier point t where x=120: x(t)=25+... approximate t=0.27 → y ≈ ... B(t)= (1-t)²*165 + 2t(1-t)*15 + t²*165 = 165 - 300t(1-t). At t=0.27: 165-300*.197=106. Strip at y96..111 top part visible above 106. OK fillings peek nicely. Kimchi at y112-142 near center x176-208: shell edge ~90 there, so kimchi at 118-142 is INSIDE shell region → covered. Hmm! Shell covers everything below its top edge. Fillings cluster must sit above the top edge curve: edge y at center 90, at x=118: 165-300*(t(1-t)), t=(118-25)/370=0.251 → 165-300*.188=108.6. At x=150 t=.338: 165-67.9=97? 300*.338*.662=67.1 → 97.9. At x=210: 90. At x=270 t=.662: 97.9. At x=300 t=.743: 165-57.2? 300*.743*.257=57.3→107.7. So top edge ranges 90(center)→165(tips).

So visible filling band is roughly y< 90..108 near middle. My fillings y70-142 → lower parts hidden (good, they're "inside" taco), upper parts visible. That's exactly the taco look — fillings peeking over the shell rim. The base green ellipse cy=152 mostly hidden — pointless. Reduce: fillings cluster should center ~y=100 with parts above. Visible amounts: strip rows at y≈70-105 visible near center; sides (x<120, x>300) need fillings higher? Near tips shell edge is at 120-160, so fillings there visible only above ~110. My strips at x=120 y=96 visible top half. Fine. The kimchi paths at y112-142 mostly hidden — raise them: place kimchi squiggles at y ~78-110 across x 130-290. Adjust kimchi paths upward ~30px:
 k1 M124 96 q8 -12 16 0 q8 12 16 0 (y96, dips to ~102/90)
 k2 M180 88 q8 -12 16 0 q8 12 16 0
 k3 M240 92 ...
 k4 M282 104 ...
 k5 M152 104 ...
 k6 M256 116 ...
Strips raise a bit too: rows at y 70/80/92/100. Let me redo strips:
 row1 (top): y=72: rect x=176 y=72 w=52 h=14 rotate(-4 202 79)
 row2: x=128 y=82 rotate(-14 154 89); x=236 y=82 rotate(8 262 89)
 row3: x=158 y=94 rotate(-8 190 101); x=210 y=96 rotate(12 242 103)
 row4: x=104 y=98 rotate(-22 130 105); x=268 y=100 rotate(18 296 108)
Greens: small triangles poking: M204 62 l12 18 -24 2z at (204,62); M136 74 l11 16 -22 2z; M280 78 l11 16 -22 2z fill #2F5E33 stroke ink 2.5 linejoin round.
Sesame dots on strips ~ (190,86),(220,90),(160,95),(255,95) r2.6 cream.
Drizzle path across visible band: M120 100 q12 -12 24 0 q12 12 24 0 q12 -12 24 0 q12 12 24 0 q12 -12 24 0 q12 12 24 0 q12 -12 24 0 — spans 120→288, wavy around y 94-106. Good.
Aioli similar shifted y+? M136 112 q12 12 24 0 ... spans to 280, around y108-118 — partially hidden near sides ok center visible (edge 90 at center — 112 hidden at center!). At x=136-160 edge ~97-99, so y112 hidden. Move aioli wave above: y base 98: q12 12 24 0 gives dips +12 → 110 hidden at center... The wave hugging y~95-105 with dips below edge hidden — partially visible crest. Eh. Alternative: aioli drawn OVER shell too? Real tacos: sauce drizzled over fillings and drips on shell. Nice: draw drizzle & aioli AFTER shell — sauce on top of everything. Yes! Drizzle over shell looks great. So order: fillings, shell, char, then sauce groups on top (drizzle red, aioli cream with sesame dots on top). Then they're always visible when selected. 
Flames at translate(96,58) & (298,52) scale .9 — left/right above tips, visible.
Also add tiny "steam" above taco? no.

Kimchi final paths (drawn under shell, only crests visible): fine as placed at y 88-116 area, crest -12 → 76-104 visible partially. Good enough visually — red bits peeking between strips.

Builder initial state: protein Bulgogi (prot #7A4023, sear on), tortilla Corn, mild, no extras.

Now the mini polaroid taco (static): simple: <svg viewBox="0 0 300 190"> shell path scaled: M20 120 Q150 25 280 120 Q150 165 20 120 Z fill #ECC45F stroke ink 5; strips few; kimchi bits; sauce; plate ellipse? Add steam? cute: two steam curls. Compose quickly.

Cart pop retrigger: el.classList.remove('pop'); void el.offsetWidth; add.

Now assemble everything. Also html lang, meta description.

Potential console errors: none expected; careful with use href symbols defined later in DOM — put symbols svg right after body open. use href="#chili" resolves regardless of position. Chrome fine.

Font check: 'Arial Black' loaded on all systems (Windows/mac). Good.

Write final HTML. Also ensure buttons default type="button" where inside no form (not needed outside form; but cart etc fine).

Toast timer variable to clear.

Let me write the code now, complete and consistent.

Additional detail — hero est badge: yellow circle with "EST 2024" rotated; position absolute near title top-right? Place inside hero-copy relative: after h1, absolute? Put badge positioned at right of LOCO: make h1 wrapper relative, badge absolute right ~10% top -10px. Might overlap on mobile — hide below 640px? Keep but scale down.

Let me also handle: nav anchor links smooth scrolling — html scroll-behavior smooth.

Sticky nav height ~64px; sections scroll-margin-top: 80px.

Now writing. I'll aim for clean, commented code.

For the .mrow-head grid on desktop: "64px 1fr auto auto 44px". mnum mono bold 15 color red. mname font display 19px letter-spacing .3px, text-transform none (keep title case? Menu names look better uppercase? Display font uppercase strong: uppercase 17px ls 1px). Use uppercase.

mrow.open .mrow-head{background:var(--ink); color:var(--cream)} .mrow.open .mtoggle{background:var(--red); border-color:var(--cream)}.

Prices with <small>: /3 PC etc.

Row expanded inner left padding 108 desktop, 66 mobile.

Builder sticky stage top: 96px.

OK also "spotted-chip" pulse dot: .dot{width 8px;height 8px;border-radius 50%;background var(--red); animation blink 1.6s infinite}.

Let me write out. Also add favicon inline? <link rel="icon" href="data:...svg chili"> nice touch: data uri svg red circle. Simple: <link rel="icon" href="data:image/svg+xml,...chili...">. Compose tiny: %3Csvg xmlns='...' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23E23A22'/%3E%3Cpath d='...' fill='%23FBF3E4'/%3E%3C/svg%3E — reuse simplified crescent. Fine, small.

Time to write the final file carefully, keeping all IDs consistent.

JS schedule day buttons: build from SCHED; innerHTML: `<button class="day" data-i="${i}"><span class="d-day">${s.d}</span><span class="d-loc">${s.loc}</span><span class="d-time">${s.t}</span></button>`; listener sets select(i).

select(i): set pin.style.transform = `translate(${s.x}px, ${s.y}px)`; pinLabel.textContent = s.s; update card texts; badge hidden = (i!==today); toggle .on classes.

Init: build days, select(today), spotted chip.

Hero title spans: I'll hand-write:
<span class="line l1"><i class="ch" style="--i:0">K</i><i class="ch" style="--i:1">I</i><i class="ch" style="--i:2">M</i><i class="ch" style="--i:3">C</i><i class="ch" style="--i:4">H</i><i class="ch" style="--i:5">I</i></span><br><span class="line l2"><i class="ch" style="--i:6">L</i>...O C O</span>
Use <i> styled font-style normal. Fine.

Hover effect: .hero-title:hover .ch{color:var(--red); transition-delay:calc(var(--i)*50ms)} but transition back also delayed on mouseout — same delay applies which gives wave-out; fine. For l2: default color red + stroke; hover color yellow.

Actually with -webkit-text-stroke on l2, transition of color works.

Also add slight rotate on l2: display inline-block transform rotate(-2deg) — with br structure, l2 span inline-block.

Est badge: <span class="est">EST.<br>2024</span> absolute in .hero-title-wrap.

Now finalize CSS sizes and write.

One more: prefers-reduced-motion snippet.

Body overflow-x:hidden.

Also ensure #mapSvg pin initial transform set via JS on load (else pin at 0,0 top-left corner flash) — set inline style in markup: style="transform:translate(230px,290px)" default Thu? Default today unknown until JS; set markup (150px,190px) Mon; JS immediately corrects on DOMContentLoaded (script at end, runs before paint mostly). Fine.

Writing final answer now. Length ~ large but fine.

Double-check marquee duplication: JS: document.querySelectorAll('.m-track').forEach(t=>{t.appendChild(t.children[0].cloneNode(true))}) — but I need group repeated enough times to exceed screen width; one group of ~5 items at ~1500px? 6 items * ~250px ≈ 1500px; on 1280 viewport, group must be ≥ viewport for seamless -50% loop... Actually seamless requires track ≥ 2×viewport ideally to avoid gaps when translating: translate -50% of track (one group width); if group width < viewport, items loop with blank space? The standard trick: track width = 2 groups, both visible filling 2×group; if group < viewport, blank space at right during animation. Fix: duplicate group 3-4 times so group≥viewport? Seamless requires the repeating unit to be ≥ viewport width. I'll clone the group enough times: while track.scrollWidth < innerWidth*2 { append clone of first group }... simpler: clone group 3 times (4 total) for black marquee (items long) and quotes (5 quotes long ~ 2000px). Even simpler: JS loop: const g=t.children[0]; while (t.scrollWidth < t.offsetWidth? no—offsetWidth of overflow max-content... Use while (t.scrollWidth < window.innerWidth * 2) t.appendChild(g.cloneNode(true)); then animation translateX(-50%)? With N copies, -50% shifts by N/2 units — seamless only if shift = integer multiple of unit width and pattern periodic: translating by half of total (if total = k units, half = k/2 units) is seamless if k even. Make k even by ensuring: if count odd after loop, add one more. Implement: build until scrollWidth ≥ 2×viewport, then if children.length odd append clone. Then translateX(-50%) seamless. 

Edge: .m-track width max-content.

Animation duration proportional? fixed 30s fine; quotes 36s.

Reveal observer: document.querySelectorAll('.reveal').

OK write it.

Also `sec-head h2 span` per-section colors via .sec-red h2 span{color:var(--yellow); -webkit-text-stroke:2px var(--ink)}? On red bg, yellow text w/ ink stroke pops. .sec-yellow h2 span{color:var(--red)}. .sec-ink h2 span{color:var(--yellow)}. Default (cream sections) span red.

h2 in story? story uses blockquote pull instead of h2? Add h2 "WHY SO LOCO?" maybe. Yes: story has kicker + h2 "WHY SO LOCO?" then pull quote. Good.

Footer wordmark big? Footer top: giant display "KIMCHI LOCO" outline cream? Add .foot-mark{font display clamp(40px,8vw,96px); color transparent; -webkit-text-stroke:2px rgba(251,243,228,.35); line-height 1; margin-bottom 40px; user-select none}. Nice poster closer. Place above foot-grid.

Now write everything.

For map road dashes: <path d="M0 290H640" stroke="#F5C531" stroke-width="3" stroke-dasharray="14 12" opacity=".5"/> and vertical M370 0V440.

Buildings rects: fill #1B140D: e.g. <rect x="110" y="110" width="60" height="60" rx="4"/> scattered: (110,110,60,50),(310,110,40,60),(40,210,80,60),(260,210,80,60),(410,210,80,50),(120,310,70,50),(420,320,60,40),(540,220,60,70),(250,40,60,40). Make sure they don't cover roads. Roads at y=90(±7),190,290,370 and x=90,230,370,510. Blocks between. My rects roughly ok.

Trees in park: circles (410,120,9),(440,150,11),(470,125,8),(455,165,9) fill #3E7A3A stroke? none.

Labels: text font-family Courier New, size 11, fill #8A7154, letter-spacing 2: "5TH AVE" x=20 y=84? Place labels just above roads: y=84 for road y=90; "MARKET ST" y=184; "GRAND AVE" y=284; "HARBOR RD" y=364. Vertical: "N ST" x=84 y=60 rotate(-90 84 60); "2ND ST" x=224 y=60; "MAIN ST" x=364 y=60; "EAST BLVD" x=504 y=70. transform rotate(-90, x,y) with text-anchor start? rotate -90 around point: text reads bottom-up. Use text-anchor="middle" positioned at (84, 80) rotate(-90 84 80)? Eh, details fine.

PARK label at (440,190)? park y 100-180, label y=176.

Compass: skip? small: circle (596,42,r20) fill #191410 stroke #8A7154 2; path M596 30 L602 48 L596 43 L590 48 Z fill yellow; text N at 596,26? Keep just arrow+N text inside: text x=596 y=38? Let me: circle, then text "N" at (596,36) mono bold 10 fill #FBF3E4, arrow below: path M596 40l5 10h-10z fill yellow. Fine.

Pin default translate(150,190).

Where-card initial text = today's.

OK — writing final code now. I must be careful about quotes inside JS strings with apostrophes (use ' inside double-quoted or template strings).

Also cartCount pop CSS on b#cartCount.

Final check prohibitions: no gradients ✓ (dot patterns via data-uri SVG, flat colors), no emoji ✓ (✕? I use "×" char in kicker "KOREAN × MEXICAN" — that's fine typographic), no lorem ✓, all buttons wired ✓, no alert ✓, fonts: Arial Black/Georgia/Courier — acceptable given no-CDN constraint, primary identity = Arial Black display ✓ distinctive.

Write it.