Models 44

GPT-6.1 Terra

by OpenAIReasoningClean
Open in new window

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

How it went

Total time
1 min 41 s
Cost
$0.042
Output tokens
8,239
Spent thinking
399 tokens
Speed
91.3 tok/s
Console errors
0
First token after
10.9 s
First visible text after
10.9 s
Prompt tokens
360
Code size
21.2 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6.1-terra
Reasoning sent
model default
Max output
128,000 tokens
Generated
Nov 12, 2026

What it was asked

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

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

Code run-1.html · 258 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kimchi Loco — Seoul food, street soul</title>
<style>
  :root{--ink:#22251d;--cream:#f8f3e5;--orange:#f15b35;--yellow:#f9ce4c;--green:#364c32;--line:#d9d4c5}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
  a{color:inherit;text-decoration:none}
  button{font:inherit}
  .announcement{height:30px;background:var(--green);color:#fff8df;display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
  .announcement span{color:var(--yellow)}
  .header{height:82px;display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:auto;padding:0 6%;border-bottom:1px solid var(--line)}
  .logo{display:flex;align-items:center;gap:9px;line-height:.78;font-size:22px;font-weight:1000;letter-spacing:-1.5px}
  .logo-mark{width:37px;height:37px;background:var(--orange);border-radius:50%;display:grid;place-items:center;color:var(--cream);font-size:24px;letter-spacing:-3px;padding-right:3px;transform:rotate(-12deg)}
  .logo small{display:block;font-size:7px;line-height:1;letter-spacing:2.1px;margin-top:6px}
  nav{display:flex;align-items:center;gap:36px;font-size:12px;font-weight:800}
  nav a:not(.nav-cta):hover{color:var(--orange)}
  .nav-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:var(--ink);color:white;padding:16px 20px;border:1px solid var(--ink);font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase;transition:.2s;cursor:pointer}
  .nav-cta{padding:13px 17px}
  .nav-cta:hover,.button:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-2px)}
  .hero{max-width:1400px;margin:auto;display:grid;grid-template-columns:46% 54%;min-height:518px;padding:36px 6% 23px;overflow:hidden}
  .hero-copy{align-self:center;position:relative;z-index:2;padding-bottom:14px}
  .eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.17em;font-weight:900;text-transform:uppercase}
  .eyebrow:before{content:"";width:28px;height:2px;background:var(--orange)}
  h1{font-size:clamp(58px,6.4vw,91px);line-height:.91;letter-spacing:-.075em;margin:23px 0 21px;font-weight:1000}
  h1 em{font-family:Georgia,serif;font-weight:normal;color:var(--orange);letter-spacing:-.065em}
  .intro{font-size:15px;line-height:1.65;max-width:360px;color:#575a4d;margin:0 0 26px}
  .actions{display:flex;align-items:center;gap:25px}
  .text-link{font-size:11px;font-weight:900;letter-spacing:.04em;border-bottom:1px solid var(--ink);padding:5px 0}
  .text-link:hover{color:var(--orange);border-color:var(--orange)}
  .hero-art{position:relative;min-height:450px;display:flex;align-items:center;justify-content:center}
  .art-circle{position:absolute;width:min(94%,480px);aspect-ratio:1;border-radius:50%;background:var(--orange);top:50%;left:50%;transform:translate(-45%,-50%);overflow:hidden}
  .art-circle:before{content:"";position:absolute;inset:20px;border:1px solid rgba(255,240,204,.35);border-radius:50%}
  .art-circle:after{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 14deg,rgba(255,238,192,.12) 14.3deg 14.8deg,transparent 15deg 30deg)}
  .taco{width:112%;max-width:610px;position:relative;z-index:1;transform:rotate(-8deg) translate(2%,3%);filter:drop-shadow(0 22px 12px rgba(90,41,20,.23))}
  .stamp{position:absolute;z-index:3;right:1%;top:8%;width:105px;height:105px;background:var(--yellow);border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(13deg);font-size:10px;font-weight:900;letter-spacing:.11em;line-height:1.4}
  .stamp strong{display:block;font-size:23px;letter-spacing:-1px}
  .art-label{position:absolute;z-index:4;bottom:30px;left:2%;background:var(--cream);border:1px solid var(--ink);padding:10px 14px;transform:rotate(-5deg);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;box-shadow:4px 4px 0 var(--ink)}
  .art-label span{color:var(--orange)}
  .spark{position:absolute;z-index:2;font-size:34px;color:var(--yellow);top:18%;left:14%;transform:rotate(15deg)}
  .spark.two{top:auto;bottom:13%;left:auto;right:7%;font-size:26px}
  .ticker{background:var(--yellow);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden}
  .ticker-inner{display:flex;justify-content:space-around;align-items:center;gap:30px;white-space:nowrap;min-width:800px;height:49px;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
  .ticker b{font-size:19px;color:var(--orange)}
  .menu{padding:64px 6% 75px;max-width:1400px;margin:auto}
  .section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
  .section-head h2,.location-copy h2{font-size:clamp(40px,5vw,65px);letter-spacing:-.065em;line-height:.95;margin:12px 0 0}
  .section-head p{font-size:13px;color:#66695b;max-width:260px;line-height:1.6;margin:0}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .card{background:#eee6d2;border:1px solid var(--ink)}
  .card-art{height:190px;position:relative;overflow:hidden;display:grid;place-items:center}
  .card:nth-child(1) .card-art{background:#eabf61}
  .card:nth-child(2) .card-art{background:#e89b7e}
  .card:nth-child(3) .card-art{background:#a9b98b}
  .card-art svg{width:85%;height:180px;filter:drop-shadow(0 10px 5px rgba(71,39,20,.2))}
  .card-number{position:absolute;top:15px;left:16px;font-size:10px;font-weight:900;letter-spacing:.1em}
  .card-body{padding:21px}
  .card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .card h3{font-size:20px;letter-spacing:-.05em;margin:0}
  .price{font-size:13px;font-weight:900}
  .card p{font-size:12px;line-height:1.6;color:#65665a;margin:9px 0 15px}
  .tag{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--orange)}
  .location{background:var(--green);color:var(--cream);display:grid;grid-template-columns:1fr 1fr;min-height:390px}
  .location-copy{padding:70px 12%}
  .location-copy .eyebrow:before{background:var(--yellow)}
  .location-copy h2 em{font-family:Georgia,serif;font-weight:normal;color:var(--yellow)}
  .location-copy p{font-size:14px;line-height:1.7;color:#d4ddc8;max-width:380px;margin:20px 0 25px}
  .button.light{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
  .button.light:hover{background:var(--cream)}
  .location-art{background:#e7a63e;position:relative;overflow:hidden;display:grid;place-items:center;min-height:320px}
  .location-art svg{width:80%;max-width:470px}
  footer{padding:30px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
  footer .logo{text-transform:none;letter-spacing:-1.5px}
  .modal-backdrop{position:fixed;inset:0;background:rgba(24,27,20,.7);z-index:10;display:none;align-items:center;justify-content:center;padding:20px}
  .modal-backdrop.open{display:flex}
  .modal{background:var(--cream);border:2px solid var(--ink);max-width:460px;width:100%;padding:36px;position:relative;box-shadow:8px 8px 0 var(--orange)}
  .modal h2{font-size:40px;line-height:1;letter-spacing:-.06em;margin:15px 0}
  .modal p{font-size:14px;line-height:1.7;color:#5e6254}
  .close{position:absolute;right:18px;top:13px;background:none;border:0;font-size:27px;cursor:pointer;color:var(--ink)}
  @media(max-width:700px){
    .announcement{font-size:8px;letter-spacing:.08em}
    .header{height:70px;padding:0 5%}
    nav{gap:14px}nav a:not(.nav-cta){display:none}
    .nav-cta{font-size:10px;padding:12px}
    .hero{grid-template-columns:1fr;padding:44px 6% 20px}
    .hero-copy{padding:0}
    h1{font-size:clamp(59px,13vw,84px);margin:20px 0}
    .intro{font-size:14px}
    .hero-art{min-height:340px;margin-top:5px}
    .art-circle{width:330px;max-width:85%}
    .taco{width:110%}
    .stamp{width:82px;height:82px;font-size:8px;right:1%;top:8%}.stamp strong{font-size:18px}
    .art-label{bottom:17px;left:0;font-size:9px}
    .spark{left:8%}
    .menu{padding:55px 6%}
    .section-head{align-items:start;flex-direction:column}
    .cards{grid-template-columns:1fr}
    .card-art{height:180px}
    .location{grid-template-columns:1fr}
    .location-copy{padding:55px 6%}
    .location-art{min-height:260px}
    footer{flex-wrap:wrap}
  }
</style>
</head>
<body>
<div class="announcement"><span>✳</span> BIG SEOUL ENERGY. BIGGER TACO ENERGY. <span>✳</span></div>
<header class="header">
  <a href="#top" class="logo" aria-label="Kimchi Loco home"><span class="logo-mark">K.</span><span>KIMCHI<br>LOCO<small>KOREAN TACOS</small></span></a>
  <nav aria-label="Main navigation">
    <a href="#menu">THE MENU</a>
    <a href="#story">OUR STORY</a>
    <a href="#find">FIND THE TRUCK</a>
    <a class="nav-cta" href="#find">COME HUNGRY ↗</a>
  </nav>
</header>

<main id="top">
  <section class="hero">
    <div class="hero-copy">
      <div class="eyebrow">Korean flavor. Taco attitude.</div>
      <h1>SEOUL FOOD.<br><em>STREET</em><br>SOUL.</h1>
      <p class="intro">Korean comfort meets street food magic. Bold flavors, happy messes, and tacos worth chasing down.</p>
      <div class="actions">
        <a class="button" href="#menu">EXPLORE THE MENU <span>↗</span></a>
        <a class="text-link" href="#find">Find the truck ↗</a>
      </div>
    </div>
    <div class="hero-art" aria-label="Illustration of a Korean taco">
      <div class="art-circle"></div>
      <div class="spark">✳</div><div class="spark two">✳</div>
      <div class="stamp"><div>MADE WITH<strong>SEOUL</strong>& A LITTLE HEAT</div></div>
      <svg class="taco" viewBox="0 0 620 410" role="img" aria-label="A taco piled high with colorful fillings">
        <defs>
          <linearGradient id="shell" x1="0" y1="0" x2="0.8" y2="1"><stop stop-color="#ffe283"/><stop offset=".6" stop-color="#edab42"/><stop offset="1" stop-color="#d78b30"/></linearGradient>
          <linearGradient id="front" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#ffdc72"/><stop offset="1" stop-color="#e7a33d"/></linearGradient>
        </defs>
        <path d="M46 229 Q73 129 191 103 Q344 65 478 134 Q548 168 570 240 Q533 314 312 335 Q112 327 46 229Z" fill="#c77c2b" stroke="#6c401e" stroke-width="5"/>
        <path d="M51 220 Q80 118 198 94 Q365 58 489 129 Q548 165 566 225 Q494 276 306 292 Q124 277 51 220Z" fill="url(#shell)" stroke="#874f22" stroke-width="5"/>
        <!-- greens and fillings -->
        <path d="M70 222 Q64 196 83 194 Q75 176 98 169 Q94 149 115 150 Q121 129 143 139 Q154 115 175 130 Q190 108 209 119 Q223 99 243 114 Q261 96 280 113 Q302 96 319 112 Q343 99 360 117 Q380 103 394 122 Q415 111 429 132 Q453 120 462 144 Q484 139 488 159 Q511 154 512 178 Q539 175 537 199 Q557 207 548 225 L516 254 103 260Z" fill="#3f6d35" stroke="#325229" stroke-width="4"/>
        <path d="M95 205 Q112 183 134 194 L145 174 173 180 185 158 209 169 229 149 251 162 272 145 295 161 313 148 333 165 353 151 374 172 397 160 410 181 437 172 448 192 478 188 488 212 520 207 532 238 102 248Z" fill="#8dbb54"/>
        <!-- meat -->
        <g fill="#804522" stroke="#60371f" stroke-width="3">
          <path d="M106 214l18-20 26 4 9 21-16 17-29-2z"/><path d="M152 197l18-21 27 6 7 22-19 17-27-3z"/><path d="M199 202l17-25 25 2 13 23-20 20-27-2z"/>
          <path d="M252 190l21-19 26 8 4 23-20 16-27-5z"/><path d="M301 196l17-21 26 4 11 22-21 19-27-4z"/><path d="M351 199l19-22 24 7 8 20-17 19-28-3z"/>
          <path d="M402 205l18-19 25 4 8 19-17 18-27-3z"/><path d="M453 213l17-17 24 4 7 20-15 16-26-4z"/>
        </g>
        <!-- kimchi -->
        <g fill="#ec5d39" stroke="#b83e28" stroke-width="2">
          <path d="M118 191q21-30 43-15l-10 12-24 14z"/><path d="M179 178q20-30 45-18l-9 14-28 16z"/>
          <path d="M235 174q24-26 47-11l-12 13-28 11z"/><path d="M315 174q20-26 42-12l-10 15-24 10z"/>
          <path d="M377 181q23-25 43-7l-10 13-26 7z"/><path d="M440 191q20-20 39-5l-9 11-24 7z"/>
        </g>
        <!-- cabbage ribbons -->
        <g fill="none" stroke-linecap="round" stroke-width="6">
          <path d="M120 206q39-20 70-10t63-4" stroke="#f2d5e1"/><path d="M203 213q35-22 70-12t70-6" stroke="#e9b8d2"/>
          <path d="M320 211q38-17 67-7t70-3" stroke="#f2d5e1"/><path d="M159 185l31 13m69-22l27 17m70-14l28 18m50-10l24 16" stroke="#faf0dc"/>
        </g>
        <!-- sauce -->
        <path d="M116 223q30-24 61-5t62-4q28-21 57-2t58-5q30-20 60-2t64-1" fill="none" stroke="#fff0c5" stroke-width="7" stroke-linecap="round"/>
        <!-- shell front -->
        <path d="M48 227 Q101 242 153 255 Q310 292 466 252 Q522 238 570 225 Q550 300 493 335 Q418 380 310 385 Q205 383 128 344 Q70 313 48 227Z" fill="url(#front)" stroke="#74421f" stroke-width="5"/>
        <path d="M67 248 Q123 275 188 286 Q312 310 443 280 Q506 266 548 245" fill="none" stroke="#ffe9a5" stroke-width="5" opacity=".7"/>
        <g fill="#bc762c" opacity=".55"><ellipse cx="146" cy="298" rx="8" ry="4"/><ellipse cx="192" cy="329" rx="6" ry="3"/><ellipse cx="248" cy="303" rx="5" ry="3"/><ellipse cx="289" cy="350" rx="8" ry="4"/><ellipse cx="344" cy="317" rx="7" ry="3"/><ellipse cx="401" cy="336" rx="6" ry="3"/><ellipse cx="451" cy="304" rx="8" ry="4"/><ellipse cx="495" cy="280" rx="5" ry="3"/><ellipse cx="120" cy="274" rx="4" ry="3"/></g>
        <!-- cilantro -->
        <g fill="#376a38">
          <path d="M144 179q-20-18-12-25 9-5 15 9-2-19 8-19 10 2 4 20 12-13 18-6 6 8-14 19z"/>
          <path d="M280 175q-21-17-13-24 9-6 16 8-2-19 8-19 9 2 4 20 12-13 18-6 5 8-14 19z"/>
          <path d="M409 184q-20-17-12-24 8-5 15 8-2-19 8-19 10 2 4 20 12-13 18-6 5 8-14 19z"/>
        </g>
        <g fill="#fff0c5"><ellipse cx="197" cy="189" rx="3" ry="2"/><ellipse cx="245" cy="188" rx="3" ry="2"/><ellipse cx="344" cy="184" rx="3" ry="2"/><ellipse cx="389" cy="198" rx="3" ry="2"/><ellipse cx="456" cy="207" rx="3" ry="2"/></g>
      </svg>
      <div class="art-label"><span>✳</span> Your new favorite taco</div>
    </div>
  </section>

  <div class="ticker"><div class="ticker-inner"><span>Not your average taco</span><b>✳</b><span>Seoul good</span><b>✳</b><span>Made fresh, always</span><b>✳</b><span>Follow the flavor</span><b>✳</b><span>Not your average taco</span></div></div>

  <section class="menu" id="menu">
    <div class="section-head">
      <div><div class="eyebrow">The good stuff</div><h2>MEET THE LINEUP.</h2></div>
      <p>Big flavors, little tortillas. Pick your favorite or, honestly, try them all.</p>
    </div>
    <div class="cards">
      <article class="card">
        <div class="card-art"><span class="card-number">01 / THE CLASSIC</span>
          <svg viewBox="0 0 300 180" aria-hidden="true"><ellipse cx="150" cy="145" rx="112" ry="19" fill="#b67e38" opacity=".3"/><path d="M39 94Q62 30 148 38Q241 31 263 94L242 132H59Z" fill="#406d38"/><path d="M53 91q16-30 33-15 17-25 35-9 21-24 39-5 21-22 39 3 21-15 35 14l18 17" fill="none" stroke="#e45e3c" stroke-width="13"/><path d="M58 92q40-15 74 0t72-2q21-12 40 2" fill="none" stroke="#f5e6cb" stroke-width="7"/><path d="M37 93q111 46 226 0-11 69-112 72Q50 162 37 93" fill="#f6ce6b" stroke="#8b5529" stroke-width="3"/><path d="M65 113q83 23 171 0" fill="none" stroke="#ffe3a0" stroke-width="4"/><g fill="#ce9142"><circle cx="97" cy="130" r="3"/><circle cx="151" cy="143" r="4"/><circle cx="209" cy="128" r="3"/></g></svg>
        </div>
        <div class="card-body"><div class="card-top"><h3>THE SEOUL OG</h3><span class="price">$5</span></div><p>Sweet-savory bulgogi, crunchy slaw, kimchi, and our signature loco sauce.</p><span class="tag">✳ Crowd favorite</span></div>
      </article>
      <article class="card">
        <div class="card-art"><span class="card-number">02 / BRING THE HEAT</span>
          <svg viewBox="0 0 300 180" aria-hidden="true"><ellipse cx="150" cy="145" rx="112" ry="19" fill="#a35b40" opacity=".25"/><path d="M39 94Q62 30 148 38Q241 31 263 94L242 132H59Z" fill="#558044"/><path d="M55 94q17-32 34-16 19-28 37-10 21-24 38-4 19-25 38 3 23-14 42 22" fill="none" stroke="#c9472d" stroke-width="17"/><path d="M59 91q39-16 74 1t73-3q19-10 38 3" fill="none" stroke="#ffd39b" stroke-width="7"/><path d="M37 93q111 46 226 0-11 69-112 72Q50 162 37 93" fill="#f5c965" stroke="#8b5529" stroke-width="3"/><path d="M65 113q83 23 171 0" fill="none" stroke="#ffe3a0" stroke-width="4"/><g fill="#ce9142"><circle cx="97" cy="130" r="3"/><circle cx="151" cy="143" r="4"/><circle cx="209" cy="128" r="3"/></g></svg>
        </div>
        <div class="card-body"><div class="card-top"><h3>GOCHU GANG</h3><span class="price">$5</span></div><p>Spicy gochujang chicken, pickled cucumbers, slaw, and a little extra fire.</p><span class="tag">✳ A little kick</span></div>
      </article>
      <article class="card">
        <div class="card-art"><span class="card-number">03 / PLANT POWER</span>
          <svg viewBox="0 0 300 180" aria-hidden="true"><ellipse cx="150" cy="145" rx="112" ry="19" fill="#657c51" opacity=".25"/><path d="M39 94Q62 30 148 38Q241 31 263 94L242 132H59Z" fill="#3b7339"/><path d="M57 93q17-31 35-15 18-26 36-10 21-24 39-4 19-23 38 4 21-14 39 19" fill="none" stroke="#c77b42" stroke-width="15"/><path d="M58 92q40-15 74 0t72-2q21-12 40 2" fill="none" stroke="#e8c9df" stroke-width="7"/><path d="M37 93q111 46 226 0-11 69-112 72Q50 162 37 93" fill="#f6ce6b" stroke="#8b5529" stroke-width="3"/><path d="M65 113q83 23 171 0" fill="none" stroke="#ffe3a0" stroke-width="4"/><g fill="#ce9142"><circle cx="97" cy="130" r="3"/><circle cx="151" cy="143" r="4"/><circle cx="209" cy="128" r="3"/></g></svg>
        </div>
        <div class="card-body"><div class="card-top"><h3>TOFU LOCO</h3><span class="price">$5</span></div><p>Crispy tofu, tangy kimchi, sesame slaw, and a drizzle of pure joy.</p><span class="tag">✳ Plant-based goodness</span></div>
      </article>
    </div>
  </section>

  <section class="location" id="find">
    <div class="location-copy" id="story">
      <div class="eyebrow">Good food on the move</div>
      <h2>FOLLOW YOUR<br><em>CRAVINGS.</em></h2>
      <p>We're a little truck with a lot of Seoul. Find us around town, bring your people, and come make a delicious mess with us.</p>
      <button class="button light" id="findButton">FIND THE TRUCK <span>↗</span></button>
    </div>
    <div class="location-art">
      <svg viewBox="0 0 480 300" role="img" aria-label="Kimchi Loco food truck illustration">
        <circle cx="240" cy="143" r="125" fill="#f7d36d" stroke="#273127" stroke-width="2" stroke-dasharray="4 8"/>
        <path d="M74 204h26V99q0-12 12-12h206v117h19v-70h49l35 41v29h12v19H74z" fill="#f8f1df" stroke="#273127" stroke-width="5" stroke-linejoin="round"/>
        <path d="M337 144h42l26 32h-68z" fill="#92b4a2" stroke="#273127" stroke-width="4"/>
        <path d="M115 107h176v53H115z" fill="#364c32" stroke="#273127" stroke-width="4"/>
        <path d="M107 104h192l-8-17H115z" fill="#f15b35" stroke="#273127" stroke-width="4"/>
        <path d="M115 104v15m25-15v15m25-15v15m25-15v15m25-15v15m25-15v15m25-15v15m26-15v15" stroke="#f8f1df" stroke-width="8"/>
        <text x="203" y="144" text-anchor="middle" fill="#f8f1df" font-family="Arial,sans-serif" font-size="21" font-weight="900" letter-spacing="-1">KIMCHI LOCO</text>
        <text x="202" y="179" text-anchor="middle" fill="#273127" font-family="Arial,sans-serif" font-size="9" font-weight="bold" letter-spacing="2">SEOUL FOOD. STREET SOUL.</text>
        <path d="M101 195h216" stroke="#f15b35" stroke-width="9"/>
        <circle cx="142" cy="222" r="22" fill="#273127"/><circle cx="142" cy="222" r="10" fill="#f8f1df"/><circle cx="375" cy="222" r="22" fill="#273127"/><circle cx="375" cy="222" r="10" fill="#f8f1df"/>
        <path d="M58 244h372" stroke="#273127" stroke-width="3" stroke-linecap="round"/>
        <text x="75" y="69" fill="#273127" font-family="Arial" font-size="28">✳</text><text x="386" y="88" fill="#f15b35" font-family="Arial" font-size="30">✳</text>
      </svg>
    </div>
  </section>
</main>
<footer><a href="#top" class="logo"><span class="logo-mark">K.</span><span>KIMCHI<br>LOCO<small>KOREAN TACOS</small></span></a><span>BIG FLAVOR. GOOD PEOPLE. ✳</span><span>© KIMCHI LOCO</span></footer>

<div class="modal-backdrop" id="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <div class="modal">
    <button class="close" id="closeModal" aria-label="Close">×</button>
    <div class="eyebrow">We're on the move</div>
    <h2 id="modalTitle">GOOD THINGS<br>ARE ROLLING.</h2>
    <p>We're getting the truck ready to hit the streets. Check back soon for our location and hours. Until then, keep those taco cravings warm.</p>
    <button class="button" id="gotIt">SOUNDS GOOD <span>✳</span></button>
  </div>
</div>
<script>
  const modal = document.getElementById('modal');
  const findButton = document.getElementById('findButton');
  function closeModal(){ modal.classList.remove('open'); findButton.focus(); }
  findButton.addEventListener('click',()=>{ modal.classList.add('open'); document.getElementById('closeModal').focus(); });
  document.getElementById('closeModal').addEventListener('click',closeModal);
  document.getElementById('gotIt').addEventListener('click',closeModal);
  modal.addEventListener('click',e=>{if(e.target===modal) closeModal();});
  document.addEventListener('keydown',e=>{if(e.key==='Escape' && modal.classList.contains('open')) closeModal();});
</script>
</body>
</html>