Models 44

GPT-6 Luna

by OpenAIReasoningClean
Open in new window

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

How it went

Total time
5 min 29 s
Cost
$0.022
Output tokens
44,230
Spent thinking
29,224 tokens
Speed
136.6 tok/s
Console errors
0
First token after
5.2 s
First visible text after
3 min 59 s
Prompt tokens
360
Code size
44.8 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-6-luna
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 · 1462 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#fff6e8">
  <meta name="description" content="Kimchi Loco brings big Korean flavor and taco attitude to the streets. Find your new favorite taco and catch the truck.">
  <title>Kimchi Loco — Korean Street Tacos</title>
  <style>
    :root {
      --paper: #fff6e8;
      --paper-light: #fffaf2;
      --ink: #20271f;
      --muted: #6c6c60;
      --tomato: #e84d37;
      --tomato-dark: #c83b2b;
      --green: #245440;
      --green-dark: #1d392d;
      --gold: #f4bd4f;
      --line: #ece4d6;
      --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      --body: Arial, Helvetica, sans-serif;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 92px;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper-light);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }

    a:focus-visible, button:focus-visible, input:focus-visible {
      outline: 3px solid #f0a73d;
      outline-offset: 3px;
    }

    .announcement {
      min-height: 28px;
      padding: 6px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 11px;
      background: var(--green-dark);
      color: #ffe2a0;
      text-align: center;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .announcement .spark {
      color: var(--tomato);
      font-size: 13px;
      line-height: 1;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255, 248, 237, .94);
      border-bottom: 1px solid rgba(40, 47, 36, .09);
      backdrop-filter: blur(12px);
    }

    .nav-wrap {
      position: relative;
      width: min(100%, 1280px);
      height: 74px;
      margin: 0 auto;
      padding: 0 34px;
      display: flex;
      align-items: center;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      flex: 0 0 auto;
    }

    .brand-mark {
      width: 40px;
      height: 40px;
      display: block;
      flex: 0 0 auto;
    }

    .brand-words {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .brand-name {
      font-family: var(--display);
      font-size: 19px;
      line-height: .98;
      letter-spacing: .015em;
    }

    .brand-caption {
      color: #667064;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .nav-links {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 32px;
    }

    .nav-links a {
      position: relative;
      padding: 8px 0;
      color: #42483f;
      font-size: 13px;
      font-weight: 700;
      transition: color .2s ease;
    }

    .nav-links a::after {
      position: absolute;
      right: 0;
      bottom: 3px;
      left: 0;
      height: 2px;
      background: var(--tomato);
      content: "";
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .2s ease;
    }

    .nav-links a:hover { color: var(--tomato-dark); }
    .nav-links a:hover::after { transform: scaleX(1); }

    .header-cta {
      min-height: 42px;
      margin-left: 29px;
      padding: 0 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border-radius: 99px;
      background: var(--tomato);
      box-shadow: 0 4px 0 rgba(151, 48, 35, .17);
      color: #fffaf0;
      font-size: 12px;
      font-weight: 800;
      transition: background .2s ease, transform .2s ease;
    }

    .header-cta:hover {
      background: var(--tomato-dark);
      transform: translateY(-2px);
    }

    .header-cta svg { width: 15px; height: 15px; }
    .cta-mobile { display: none; }

    .menu-toggle {
      width: 38px;
      height: 38px;
      margin-left: 8px;
      padding: 0;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      border: 1px solid rgba(33, 45, 34, .14);
      border-radius: 50%;
      background: transparent;
      cursor: pointer;
    }

    .menu-toggle span {
      width: 15px;
      height: 2px;
      border-radius: 2px;
      background: var(--ink);
      transition: transform .2s ease;
    }

    .hero {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 43%, rgba(248, 193, 74, .19) 0 13%, transparent 34%),
        linear-gradient(118deg, #fff8ed 0%, #fff2de 100%);
    }

    .hero::before {
      position: absolute;
      z-index: -1;
      top: 142px;
      left: -216px;
      width: 405px;
      height: 405px;
      border: 1px solid rgba(226, 143, 55, .12);
      border-radius: 50%;
      content: "";
    }

    .hero::after {
      position: absolute;
      z-index: -1;
      inset: 0;
      background-image: radial-gradient(rgba(112, 82, 41, .13) .55px, transparent .7px);
      background-size: 8px 8px;
      content: "";
      opacity: .12;
      pointer-events: none;
    }

    .hero-inner {
      width: min(100%, 1280px);
      min-height: 535px;
      margin: 0 auto;
      padding: 25px 34px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: 18px;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 5px 0;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--green);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      display: inline-block;
      flex: 0 0 auto;
      border-radius: 50%;
      background: var(--tomato);
      box-shadow: 0 0 0 4px rgba(232, 77, 55, .11);
    }

    .hero h1 {
      margin: 19px 0 16px;
      font-family: var(--display);
      font-size: clamp(48px, 5.8vw, 75px);
      font-weight: 900;
      line-height: .91;
      letter-spacing: -.065em;
      text-transform: uppercase;
    }

    .hero h1 span {
      display: block;
      color: var(--tomato);
    }

    .hero-deck {
      max-width: 450px;
      margin: 0;
      color: #575c52;
      font-size: 16px;
      line-height: 1.68;
    }

    .hero-actions {
      margin-top: 23px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 17px;
    }

    .button-primary {
      min-height: 50px;
      padding: 0 19px 0 21px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border: 0;
      border-radius: 99px;
      background: var(--tomato);
      box-shadow: 0 5px 0 rgba(151, 48, 35, .17);
      color: #fff9ef;
      font-size: 13px;
      font-weight: 800;
      transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .button-primary:hover {
      background: var(--tomato-dark);
      box-shadow: 0 7px 0 rgba(151, 48, 35, .15);
      transform: translateY(-2px);
    }

    .button-primary svg { width: 17px; height: 17px; }

    .button-text {
      padding: 9px 1px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: 13px;
      font-weight: 800;
      transition: color .2s ease;
    }

    .button-text span {
      color: var(--tomato);
      font-size: 18px;
      line-height: 1;
      transition: transform .2s ease;
    }

    .button-text:hover { color: var(--tomato-dark); }
    .button-text:hover span { transform: translateX(3px); }

    .hero-proof {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 19px;
      color: #596354;
      font-size: 11px;
      font-weight: 700;
    }

    .hero-proof span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .proof-check {
      width: 17px;
      height: 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #dce7cf;
      color: var(--green);
      font-size: 11px;
      font-style: normal;
      font-weight: 900;
    }

    .hero-visual {
      width: 100%;
      max-width: 600px;
      justify-self: end;
    }

    .hero-art-svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .flavor-tape {
      min-height: 43px;
      padding: 9px 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(12px, 2.2vw, 28px);
      overflow: hidden;
      background: var(--green);
      color: #ffe09a;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .14em;
      text-align: center;
      text-transform: uppercase;
    }

    .flavor-tape .separator {
      color: var(--tomato);
      font-size: 14px;
    }

    .menu-section {
      padding: 59px 32px 88px;
      background: var(--paper-light);
    }

    .menu-inner {
      width: min(100%, 1190px);
      margin: 0 auto;
    }

    .section-heading {
      margin-bottom: 30px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 28px;
    }

    .section-kicker {
      margin: 0 0 11px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--tomato-dark);
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .section-kicker .star {
      color: var(--gold);
      font-size: 15px;
    }

    .section-heading h2 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(34px, 3.5vw, 46px);
      font-weight: 900;
      line-height: .98;
      letter-spacing: -.04em;
    }

    .section-heading h2 em {
      color: var(--tomato);
      font-style: normal;
    }

    .section-intro {
      max-width: 290px;
      margin: 0 0 3px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    .menu-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .dish-card {
      min-width: 0;
      padding: 12px 12px 20px;
      border: 1px solid #eee5d8;
      border-radius: 21px;
      background: #fff;
      box-shadow: 0 9px 24px rgba(65, 49, 25, .045);
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .dish-card:hover {
      box-shadow: 0 15px 30px rgba(65, 49, 25, .1);
      transform: translateY(-4px);
    }

    .dish-art {
      position: relative;
      height: 126px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 14px;
    }

    .dish-art::before {
      position: absolute;
      top: -46px;
      right: -18px;
      width: 156px;
      height: 156px;
      border: 1px solid rgba(57, 65, 42, .12);
      border-radius: 50%;
      content: "";
    }

    .dish-card--beef .dish-art { background: #f4edcf; }
    .dish-card--chicken .dish-art { background: #ffe7d2; }
    .dish-card--tofu .dish-art { background: #e5ecd6; }

    .mini-taco {
      position: relative;
      z-index: 1;
      width: 137px;
      height: auto;
      transform: rotate(-7deg);
      transition: transform .25s ease;
    }

    .dish-card:hover .mini-taco { transform: rotate(-3deg) scale(1.04); }

    .mini-taco .food { fill: #713825; }
    .dish-card--chicken .mini-taco .food { fill: #9a492e; }
    .dish-card--tofu .mini-taco .food { fill: #88745b; }

    .dish-art-tag {
      position: absolute;
      z-index: 2;
      top: 11px;
      right: 11px;
      padding: 6px 8px;
      border-radius: 99px;
      background: rgba(255, 252, 244, .9);
      color: #4c5447;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .dish-art-number {
      position: absolute;
      bottom: 9px;
      left: 12px;
      color: rgba(32, 39, 31, .44);
      font-family: var(--display);
      font-size: 17px;
    }

    .dish-meta {
      margin: 17px 2px 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: #727366;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .dish-meta .heat {
      color: var(--tomato-dark);
      letter-spacing: .06em;
    }

    .dish-card h3 {
      margin: 0 2px 8px;
      font-family: var(--display);
      font-size: 25px;
      line-height: 1;
      letter-spacing: -.025em;
    }

    .dish-card p {
      min-height: 47px;
      margin: 0 2px;
      color: #6b6d62;
      font-size: 12px;
      line-height: 1.65;
    }

    .dish-bottom {
      margin: 17px 2px 0;
      padding-top: 13px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-top: 1px solid #f0ebe1;
    }

    .dish-price {
      color: var(--tomato-dark);
      font-family: var(--display);
      font-size: 19px;
      white-space: nowrap;
    }

    .dish-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--green);
      font-size: 11px;
      font-weight: 800;
      transition: color .2s ease, gap .2s ease;
    }

    .dish-link span {
      color: var(--tomato);
      font-size: 16px;
    }

    .dish-link:hover {
      gap: 9px;
      color: var(--tomato-dark);
    }

    .story-route {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 7% 12%, rgba(247, 193, 76, .08) 0 1px, transparent 1.4px),
        var(--green-dark);
      background-size: 9px 9px, auto;
      color: var(--paper);
    }

    .story-inner {
      position: relative;
      width: min(100%, 1190px);
      margin: 0 auto;
      padding: 76px 32px;
      display: grid;
      grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
      align-items: center;
      gap: 68px;
    }

    .story-copy .section-kicker {
      color: #f3c260;
    }

    .story-copy h2 {
      margin: 16px 0 18px;
      font-family: var(--display);
      font-size: clamp(42px, 5vw, 60px);
      line-height: .94;
      letter-spacing: -.045em;
    }

    .story-copy h2 em {
      color: #f4c25d;
      font-style: normal;
    }

    .story-copy > p {
      max-width: 405px;
      margin: 0;
      color: #d7e2d8;
      font-size: 14px;
      line-height: 1.8;
    }

    .story-promise {
      margin-top: 25px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #f8dfa3;
      font-size: 11px;
      font-weight: 700;
    }

    .story-promise .promise-star {
      width: 27px;
      height: 27px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 227, 165, .4);
      border-radius: 50%;
      color: #f4c25d;
      font-size: 15px;
    }

    .route-card {
      min-width: 0;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .45);
      border-radius: 22px;
      background: #fffaf0;
      box-shadow: 0 18px 45px rgba(7, 22, 15, .2);
      color: var(--ink);
    }

    .route-map {
      position: relative;
      height: 137px;
      overflow: hidden;
      background: #e8ecd9;
    }

    .route-map svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .map-label {
      position: absolute;
      top: 12px;
      left: 13px;
      padding: 7px 9px;
      border: 1px solid rgba(38, 62, 43, .11);
      border-radius: 99px;
      background: rgba(255, 252, 244, .92);
      color: var(--green);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .map-sticker {
      position: absolute;
      top: 42px;
      left: 53%;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid rgba(255, 255, 255, .85);
      border-radius: 50% 50% 50% 4px;
      background: var(--tomato);
      box-shadow: 0 4px 9px rgba(41, 53, 35, .18);
      color: #fff;
      font-size: 15px;
      transform: rotate(-45deg);
    }

    .map-sticker span { transform: rotate(45deg); }

    .route-content {
      padding: 22px 24px 23px;
    }

    .route-heading {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .route-eyebrow {
      margin: 0 0 6px;
      color: var(--tomato-dark);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .route-heading h3 {
      margin: 0;
      font-family: var(--display);
      font-size: 28px;
      line-height: 1;
      letter-spacing: -.02em;
    }

    .route-status {
      margin-top: 3px;
      padding: 7px 9px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 99px;
      background: #e7efdf;
      color: var(--green);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .route-status i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #5a9a5e;
      box-shadow: 0 0 0 3px rgba(90, 154, 94, .12);
    }

    .route-description {
      max-width: 450px;
      margin: 12px 0 15px;
      color: #66685e;
      font-size: 12px;
      line-height: 1.6;
    }

    .pin-form {
      display: flex;
      gap: 7px;
    }

    .pin-form input {
      width: 0;
      min-width: 0;
      min-height: 43px;
      padding: 0 12px;
      flex: 1 1 auto;
      border: 1px solid #e7dfd1;
      border-radius: 10px;
      background: #fff;
      color: var(--ink);
      font-size: 12px;
    }

    .pin-form input::placeholder { color: #96958a; }

    .pin-form button {
      min-height: 43px;
      padding: 0 14px;
      flex: 0 0 auto;
      border: 0;
      border-radius: 10px;
      background: var(--tomato);
      color: #fff9f0;
      cursor: pointer;
      font-size: 11px;
      font-weight: 800;
      transition: background .2s ease, transform .2s ease;
    }

    .pin-form button:hover {
      background: var(--tomato-dark);
      transform: translateY(-1px);
    }

    .pin-form button:disabled {
      background: var(--green);
      cursor: default;
      transform: none;
    }

    .form-note {
      min-height: 15px;
      margin: 9px 0 0;
      color: #858477;
      font-size: 10px;
      line-height: 1.4;
    }

    .site-footer {
      padding: 24px 32px;
      background: #172b22;
      color: #d6dfd4;
    }

    .footer-inner {
      width: min(100%, 1190px);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: #fff4dc;
      font-family: var(--display);
      font-size: 15px;
      letter-spacing: .03em;
    }

    .footer-brand .mini-mark {
      width: 26px;
      height: 26px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--tomato);
      color: #fff2d4;
      font-size: 15px;
    }

    .footer-copy {
      margin: 0;
      color: #aebcb0;
      font-size: 10px;
      text-align: right;
    }

    @media (max-width: 1020px) {
      .nav-wrap { padding: 0 25px; }
      .nav-links { gap: 22px; }
      .header-cta { margin-left: 21px; }
      .hero-inner {
        padding-right: 27px;
        padding-left: 27px;
        gap: 8px;
      }
      .hero h1 { font-size: clamp(48px, 5.9vw, 68px); }
      .story-inner { gap: 38px; }
    }

    @media (max-width: 760px) {
      html { scroll-padding-top: 78px; }

      .announcement {
        min-height: 26px;
        padding: 5px 10px;
        gap: 8px;
        font-size: 9px;
        letter-spacing: .12em;
      }

      .nav-wrap {
        height: 68px;
        padding: 0 20px;
      }

      .brand-mark { width: 37px; height: 37px; }
      .brand-name { font-size: 17px; }
      .brand-caption { font-size: 7px; }

      .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 5;
        margin: 0;
        padding: 8px 20px 15px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-bottom: 1px solid rgba(40, 47, 36, .12);
        background: rgba(255, 248, 237, .98);
        box-shadow: 0 14px 18px rgba(28, 38, 29, .08);
      }

      .nav-links.is-open { display: flex; }

      .nav-links a {
        padding: 13px 2px;
        border-bottom: 1px solid rgba(40, 47, 36, .08);
        font-size: 14px;
      }

      .nav-links a:last-child { border-bottom: 0; }
      .nav-links a::after { display: none; }

      .header-cta {
        min-height: 38px;
        margin-left: auto;
        padding: 0 12px;
        gap: 6px;
        font-size: 11px;
      }

      .cta-desktop { display: none; }
      .cta-mobile { display: inline; }
      .header-cta svg { width: 14px; height: 14px; }
      .menu-toggle { display: flex; }

      .hero-inner {
        min-height: 0;
        padding: 28px 22px 12px;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      .hero-copy { padding: 0; }

      .hero h1 {
        margin: 16px 0 13px;
        font-size: clamp(42px, 10.7vw, 63px);
        letter-spacing: -.065em;
      }

      .hero-deck {
        max-width: 490px;
        font-size: 15px;
        line-height: 1.58;
      }

      .hero-actions {
        margin-top: 17px;
        gap: 13px;
      }

      .button-primary {
        min-height: 46px;
        padding: 0 16px 0 18px;
        font-size: 12px;
      }

      .hero-proof {
        margin-top: 17px;
        gap: 8px 13px;
        font-size: 10px;
      }

      .proof-check { width: 16px; height: 16px; }

      .hero-visual {
        width: min(100%, 490px);
        margin: -1px auto 0;
        justify-self: center;
      }

      .flavor-tape {
        min-height: 40px;
        padding: 8px 12px;
        gap: 11px;
        font-size: 8px;
        letter-spacing: .1em;
      }

      .flavor-tape .separator { font-size: 12px; }

      .menu-section { padding: 55px 21px 65px; }

      .section-heading {
        margin-bottom: 23px;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
      }

      .section-heading h2 { font-size: clamp(35px, 8.4vw, 43px); }
      .section-intro { max-width: 430px; font-size: 13px; }

      .menu-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .dish-card { padding: 11px 11px 17px; }
      .dish-art { height: 116px; }
      .dish-card p { min-height: 0; }

      .story-inner {
        padding: 58px 21px;
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
      }

      .story-copy h2 { font-size: clamp(43px, 11vw, 55px); }
      .route-content { padding: 19px 18px 20px; }
      .route-map { height: 128px; }
      .route-heading h3 { font-size: 26px; }
      .route-status { font-size: 7px; }

      .site-footer { padding: 21px; }
      .footer-inner { align-items: flex-start; flex-direction: column; gap: 10px; }
      .footer-copy { text-align: left; }
    }

    @media (max-width: 430px) {
      .nav-wrap { padding-right: 14px; padding-left: 14px; }
      .brand { gap: 7px; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-name { font-size: 15px; }
      .brand-caption { font-size: 6.5px; letter-spacing: .12em; }
      .header-cta { padding: 0 10px; }
      .menu-toggle { width: 35px; height: 35px; }
      .hero-inner { padding-right: 20px; padding-left: 20px; }
      .hero-proof { gap: 8px 10px; }
      .flavor-tape { gap: 8px; font-size: 7px; }
      .flavor-tape .last-item { display: none; }
      .route-heading { flex-wrap: wrap; }
      .route-status { margin-top: 0; }
      .pin-form { gap: 6px; }
      .pin-form input { padding: 0 9px; font-size: 11px; }
      .pin-form button { padding: 0 10px; font-size: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
  </style>
</head>
<body>
  <div class="announcement">
    <span class="spark" aria-hidden="true">✦</span>
    Seoul flavor. Street-corner energy.
    <span class="spark" aria-hidden="true">✦</span>
  </div>

  <header class="site-header">
    <div class="nav-wrap">
      <a class="brand" href="#home" aria-label="Kimchi Loco home">
        <svg class="brand-mark" viewBox="0 0 44 44" aria-hidden="true">
          <circle cx="22" cy="22" r="22" fill="#e84d37"/>
          <path d="M27.7 10.2c-1.1 5.3-3.1 8.3-7.1 11.8-4.1 3.5-7.1 7.5-5.3 11.1 1.8 3.6 7.3 3.1 10.2-.1 2.8-3.1 2.3-7.5 4.4-11.2 2.4-4.1 2.3-8.1-.1-11.6-.5 2.2-1.1 3.3-2.1 4.2" fill="#ffe195" stroke="#fff1c8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
          <path d="M28 10c1.8-2.8 4.3-3.2 6.4-2.2-1 2.5-3.2 3.8-6.5 3.4" fill="#83a55d" stroke="#83a55d" stroke-linecap="round"/>
        </svg>
        <span class="brand-words">
          <span class="brand-name">KIMCHI LOCO</span>
          <span class="brand-caption">Korean street tacos</span>
        </span>
      </a>

      <nav class="nav-links" id="primary-nav" aria-label="Main navigation">
        <a href="#menu">The menu</a>
        <a href="#story">Our vibe</a>
        <a href="#truck">Find the truck</a>
      </nav>

      <a class="header-cta" href="#truck">
        <span class="cta-desktop">Catch the truck</span>
        <span class="cta-mobile">Find us</span>
        <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
          <path d="M4 10h11m-4-4 4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>

      <button class="menu-toggle" type="button" aria-label="Open navigation" aria-controls="primary-nav" aria-expanded="false">
        <span></span><span></span>
      </button>
    </div>
  </header>

  <main id="home">
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-inner">
        <div class="hero-copy">
          <div class="eyebrow"><span class="eyebrow-dot"></span>Korean–Mexican street tacos</div>
          <h1 id="hero-title">Korean soul.<span>Taco attitude.</span></h1>
          <p class="hero-deck">
            Gochujang-glazed chicken, soy-pear bulgogi, and punchy house kimchi—tucked into warm tortillas and griddled fresh. One bite and your lunch plans change.
          </p>
          <div class="hero-actions">
            <a class="button-primary" href="#truck">
              Find the truck
              <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
                <path d="M4 10h11m-4-4 4 4-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
            <a class="button-text" href="#menu">Meet the menu <span aria-hidden="true">↘</span></a>
          </div>
          <div class="hero-proof" aria-label="Made fresh with house kimchi">
            <span><i class="proof-check" aria-hidden="true">✓</i> House-kimchi crunch</span>
            <span><i class="proof-check" aria-hidden="true">✓</i> Griddled to order</span>
          </div>
        </div>

        <div class="hero-visual">
          <svg class="hero-art-svg" viewBox="0 0 620 520" role="img" aria-labelledby="food-title food-description">
            <title id="food-title">Kimchi Loco's Korean street tacos</title>
            <desc id="food-description">Three golden tacos loaded with Korean barbecue, kimchi, crunchy greens, and lime.</desc>
            <defs>
              <linearGradient id="tortilla" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stop-color="#ffdc79"/>
                <stop offset=".55" stop-color="#f4b94d"/>
                <stop offset="1" stop-color="#df9136"/>
              </linearGradient>
              <linearGradient id="tortilla-front" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stop-color="#ffcf66"/>
                <stop offset="1" stop-color="#e9a13c"/>
              </linearGradient>
              <filter id="plate-shadow" x="-20%" y="-30%" width="140%" height="180%">
                <feDropShadow dx="0" dy="10" stdDeviation="9" flood-color="#70512e" flood-opacity=".19"/>
              </filter>
              <g id="taco">
                <ellipse cx="132" cy="117" rx="110" ry="14" fill="#704b2d" opacity=".15"/>
                <path d="M17 100C26 55 59 16 108 10c54-7 108 26 138 86-66-21-147-16-222 27L17 100Z" fill="url(#tortilla)" stroke="#bd752a" stroke-width="4" stroke-linejoin="round"/>
                <path d="M29 97c12-34 39-61 76-68 43-8 84 12 118 57-64-15-133-9-197 22l3-11Z" fill="#663624"/>
                <path d="m45 87 7-14 16-5 10 9-6 13-18 4-9-7Zm48-21 8-15 16-3 8 10-7 13-19 2-6-7Zm54-6 7-11 15 2 7 10-9 10-16-3-4-8Zm38 21 8-12 15 1 7 10-9 9-15-2-6-6Z" fill="#a85231"/>
                <path d="m65 69 10-14 15 2 6 10-10 10-16-2-5-6Zm55 14 9-12 15 2 5 9-8 8-16-1-5-6Z" fill="#8b412b"/>
                <path d="m38 91 13-12 11 3 7 9-12 6-16-1-3-5Zm73-48 12-8 11 5 1 10-12 4-12-5v-6Zm57 0 12-4 10 7-4 9-14 1-7-6 3-7Z" fill="#d45339"/>
                <path d="m77 54 10-10 10 2 5 7-10 7-12-1-3-5Zm67 5 9-9 12 3 4 8-9 7-13-3-3-6Z" fill="#ec7050"/>
                <path d="M49 74c9-14 18-19 28-20m30 2c10-8 17-10 27-9m24 15c10-4 18-2 25 4" fill="none" stroke="#a8c36a" stroke-width="7" stroke-linecap="round"/>
                <path d="M58 63c10 2 13 5 18 12m35-26c9 3 14 7 18 15m25 4c8 2 13 6 17 12m-79-7c-5 7-11 10-18 12" fill="none" stroke="#f1e8ce" stroke-width="5" stroke-linecap="round"/>
                <path d="M24 99c65-26 146-30 222-6l2 16c-73-24-153-17-223 14L24 99Z" fill="url(#tortilla-front)" stroke="#bd752a" stroke-width="3.5" stroke-linejoin="round"/>
                <path d="M35 102c55-18 137-24 197-7" fill="none" stroke="#ffdf8d" stroke-width="3" stroke-linecap="round" opacity=".85"/>
                <path d="M53 111q7 3 9 9m20-15q7 3 9 9m33-14q7 3 9 9m34-12q7 3 9 9m32-8q7 3 9 9" fill="none" stroke="#cc8534" stroke-width="2.4" stroke-linecap="round" opacity=".75"/>
                <g fill="#f8e5b0">
                  <ellipse cx="83" cy="82" rx="2.4" ry="1.4" transform="rotate(-23 83 82)"/>
                  <ellipse cx="130" cy="37" rx="2.4" ry="1.4" transform="rotate(20 130 37)"/>
                  <ellipse cx="185" cy="57" rx="2.4" ry="1.4" transform="rotate(-18 185 57)"/>
                  <ellipse cx="110" cy="67" rx="2.1" ry="1.3" transform="rotate(30 110 67)"/>
                </g>
                <g fill="#7fa254">
                  <circle cx="101" cy="51" r="3.5"/>
                  <circle cx="176" cy="78" r="3"/>
                  <circle cx="73" cy="82" r="2.6"/>
                </g>
              </g>
            </defs>

            <path d="M330 31c100-29 212 28 253 119 46 103 15 221-75 273-85 49-229 37-300-24-72-62-90-180-41-264C205 72 261 44 330 31Z" fill="#ed593e"/>
            <circle cx="335" cy="238" r="188" fill="#f6bd50"/>
            <circle cx="335" cy="238" r="166" fill="none" stroke="#e9a63e" stroke-width="2" stroke-dasharray="2 11" opacity=".72"/>
            <g stroke="#fff0c8" stroke-width="5" stroke-linecap="round" opacity=".9">
              <path d="m329 31 1-16"/><path d="m467 83 12-12"/><path d="m532 222 16-2"/>
              <path d="m472 365 12 10"/><path d="m211 92-12-11"/><path d="m142 238-16 1"/>
            </g>

            <ellipse cx="319" cy="374" rx="241" ry="74" fill="#d78c43" opacity=".22"/>
            <ellipse cx="319" cy="359" rx="239" ry="73" fill="#fffaf0" stroke="#f0dfc5" stroke-width="4" filter="url(#plate-shadow)"/>
            <ellipse cx="319" cy="356" rx="213" ry="55" fill="none" stroke="#f2e7d6" stroke-width="3"/>

            <g transform="translate(30 200) scale(.83)">
              <g transform="rotate(-14 130 65)"><use href="#taco"/></g>
            </g>
            <g transform="translate(358 190) scale(.83)">
              <g transform="rotate(13 130 65)"><use href="#taco"/></g>
            </g>
            <g transform="translate(172 221) scale(1.04)">
              <g transform="rotate(-3 130 65)"><use href="#taco"/></g>
            </g>

            <g transform="translate(467 340) rotate(-12 28 28)">
              <circle cx="28" cy="28" r="27" fill="#578b49" stroke="#fffaf0" stroke-width="5"/>
              <circle cx="28" cy="28" r="20" fill="#dce88a"/>
              <path d="M28 9v38M9 28h38M14.5 14.5l27 27m0-27-27 27" stroke="#f7f4d6" stroke-width="2.7"/>
              <circle cx="28" cy="28" r="3" fill="#fffaf0"/>
            </g>

            <g transform="translate(32 91) rotate(-7 73 26)">
              <rect width="146" height="54" rx="12" fill="#fff9ed" stroke="#e8dfce" stroke-width="2"/>
              <circle cx="18" cy="19" r="5" fill="#e84d37"/>
              <text x="32" y="22" fill="#283c2d" font-family="Arial, sans-serif" font-size="9" font-weight="800" letter-spacing="1">GRIDDLE-KISSED</text>
              <text x="32" y="39" fill="#74766a" font-family="Arial, sans-serif" font-size="8" font-weight="700" letter-spacing=".8">FRESH. ALWAYS.</text>
            </g>

            <g transform="translate(508 100)">
              <circle cx="0" cy="0" r="40" fill="#fff7e8" stroke="#2b3c2d" stroke-width="2"/>
              <path d="m-24-3 5-5 5 5-5 5-5-5Zm38-15 4-4 4 4-4 4-4-4Zm2 35 4-4 4 4-4 4-4-4Z" fill="#e84d37"/>
              <text x="0" y="-3" fill="#263d2e" font-family="Arial, sans-serif" font-size="9" font-weight="900" letter-spacing="1.1" text-anchor="middle">TACO</text>
              <text x="0" y="10" fill="#263d2e" font-family="Arial, sans-serif" font-size="9" font-weight="900" letter-spacing="1.1" text-anchor="middle">HAPPY</text>
            </g>

            <g fill="#fff8e8">
              <path d="m124 343 4 8 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1 4-8Z"/>
              <path d="m548 284 3 6 7 1-5 5 1 7-6-4-6 4 2-7-6-5 7-1 3-6Z"/>
            </g>
            <path d="M108 390c11-9 22-9 30-2-6 10-17 13-30 2Z" fill="#75a252"/>
            <path d="M121 383c-1 9-3 14-8 19m17-14c-1 7-1 10-5 15" fill="none" stroke="#416e45" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </div>
      </div>
    </section>

    <div class="flavor-tape" aria-label="Fermented with love, sauced with intent, served hot">
      <span>Fermented with love</span>
      <span class="separator" aria-hidden="true">✦</span>
      <span>Sauced with intent</span>
      <span class="separator" aria-hidden="true">✦</span>
      <span class="last-item">Served hot, always</span>
    </div>

    <section class="menu-section" id="menu" aria-labelledby="menu-title">
      <div class="menu-inner">
        <div class="section-heading">
          <div>
            <p class="section-kicker"><span class="star" aria-hidden="true">✦</span> The opening lineup</p>
            <h2 id="menu-title">Three tacos. <em>Zero wrong answers.</em></h2>
          </div>
          <p class="section-intro">Big Korean flavor, portable format. Start with a favorite—or get one of everything.</p>
        </div>

        <div class="menu-grid">
          <article class="dish-card dish-card--beef">
            <div class="dish-art">
              <span class="dish-art-tag">Sweet · savory</span>
              <span class="dish-art-number" aria-hidden="true">01</span>
              <svg class="mini-taco" viewBox="0 0 120 90" aria-hidden="true">
                <ellipse cx="60" cy="72" rx="46" ry="7" fill="#675339" opacity=".15"/>
                <path d="M11 58c7-28 25-44 48-45 23-1 42 17 51 45-31-11-66-8-96 8l-3-8Z" fill="#f2bd59" stroke="#bb792d" stroke-width="3"/>
                <path class="food" d="M20 56c9-22 24-34 40-35 17 0 32 11 42 31-29-7-57-4-84 11l2-7Z"/>
                <path d="m32 47 6-9 9 1 5 7-6 7-11-1-3-5Zm31-9 6-8 10 2 3 7-7 6-10-2-2-5Zm20 11 6-8 9 2 3 7-6 5-10-1-2-5Z" fill="#d45036"/>
                <path d="M25 48c8-8 13-11 21-10m19-7c7 1 11 5 15 10m8 4c6 1 10 4 14 8" fill="none" stroke="#a9c46b" stroke-width="5" stroke-linecap="round"/>
                <path d="M12 58c29-13 66-16 98-5l1 9c-32-10-67-6-96 9l-3-13Z" fill="#eaa541" stroke="#b9772a" stroke-width="2.5"/>
                <circle cx="54" cy="49" r="2" fill="#f6e5bd"/><circle cx="78" cy="40" r="2" fill="#f6e5bd"/>
              </svg>
            </div>
            <div class="dish-meta"><span>The crowd favorite</span><span class="heat">Mild heat</span></div>
            <h3>Bulgogi Boom</h3>
            <p>Soy-pear bulgogi, crunchy kimchi slaw, and sesame-lime crema.</p>
            <div class="dish-bottom">
              <span class="dish-price">$7.50</span>
              <a class="dish-link" href="#truck">Find it on the truck <span aria-hidden="true">↗</span></a>
            </div>
          </article>

          <article class="dish-card dish-card--chicken">
            <div class="dish-art">
              <span class="dish-art-tag">Sticky · spicy</span>
              <span class="dish-art-number" aria-hidden="true">02</span>
              <svg class="mini-taco" viewBox="0 0 120 90" aria-hidden="true">
                <ellipse cx="60" cy="72" rx="46" ry="7" fill="#675339" opacity=".15"/>
                <path d="M11 58c7-28 25-44 48-45 23-1 42 17 51 45-31-11-66-8-96 8l-3-8Z" fill="#f2bd59" stroke="#bb792d" stroke-width="3"/>
                <path class="food" d="M20 56c9-22 24-34 40-35 17 0 32 11 42 31-29-7-57-4-84 11l2-7Z"/>
                <path d="m29 47 6-10 10 1 5 7-7 8-10-1-4-5Zm34-10 7-8 10 2 3 7-7 6-10-2-3-5Zm20 12 6-8 9 2 3 7-6 5-10-1-2-5Z" fill="#eb6e42"/>
                <path d="M25 48c8-8 13-11 21-10m19-7c7 1 11 5 15 10m8 4c6 1 10 4 14 8" fill="none" stroke="#b9ce72" stroke-width="5" stroke-linecap="round"/>
                <path d="M12 58c29-13 66-16 98-5l1 9c-32-10-67-6-96 9l-3-13Z" fill="#eaa541" stroke="#b9772a" stroke-width="2.5"/>
                <circle cx="54" cy="49" r="2" fill="#f6e5bd"/><circle cx="78" cy="40" r="2" fill="#f6e5bd"/>
              </svg>
            </div>
            <div class="dish-meta"><span>Gochujang-glazed</span><span class="heat">A little kick</span></div>
            <h3>Gochujang Crunch</h3>
            <p>Crispy chicken, sticky gochujang, cool cabbage, and a hit of lime.</p>
            <div class="dish-bottom">
              <span class="dish-price">$6.75</span>
              <a class="dish-link" href="#truck">Find it on the truck <span aria-hidden="true">↗</span></a>
            </div>
          </article>

          <article class="dish-card dish-card--tofu">
            <div class="dish-art">
              <span class="dish-art-tag">Plant-powered</span>
              <span class="dish-art-number" aria-hidden="true">03</span>
              <svg class="mini-taco" viewBox="0 0 120 90" aria-hidden="true">
                <ellipse cx="60" cy="72" rx="46" ry="7" fill="#675339" opacity=".15"/>
                <path d="M11 58c7-28 25-44 48-45 23-1 42 17 51 45-31-11-66-8-96 8l-3-8Z" fill="#f2bd59" stroke="#bb792d" stroke-width="3"/>
                <path class="food" d="M20 56c9-22 24-34 40-35 17 0 32 11 42 31-29-7-57-4-84 11l2-7Z"/>
                <path d="m31 47 7-9 10 1 4 7-7 7-11-1-3-5Zm31-9 7-8 10 2 4 7-7 6-10-2-4-5Zm20 12 6-8 9 2 3 7-6 5-10-1-2-5Z" fill="#d54b38"/>
                <path d="M25 48c8-8 13-11 21-10m19-7c7 1 11 5 15 10m8 4c6 1 10 4 14 8" fill="none" stroke="#89a857" stroke-width="5" stroke-linecap="round"/>
                <path d="M12 58c29-13 66-16 98-5l1 9c-32-10-67-6-96 9l-3-13Z" fill="#eaa541" stroke="#b9772a" stroke-width="2.5"/>
                <circle cx="54" cy="49" r="2" fill="#f6e5bd"/><circle cx="78" cy="40" r="2" fill="#f6e5bd"/>
              </svg>
            </div>
            <div class="dish-meta"><span>Crunch with a twist</span><span class="heat">Chili crunch</span></div>
            <h3>Kimchi Crunch</h3>
            <p>Crispy tofu, zingy cucumber kimchi, scallions, and chili crunch.</p>
            <div class="dish-bottom">
              <span class="dish-price">$6.25</span>
              <a class="dish-link" href="#truck">Find it on the truck <span aria-hidden="true">↗</span></a>
            </div>
          </article>
        </div>
      </div>
    </section>

    <section class="story-route" id="story" aria-labelledby="story-title">
      <div class="story-inner">
        <div class="story-copy">
          <p class="section-kicker"><span class="star" aria-hidden="true">✦</span> The good kind of fusion</p>
          <h2 id="story-title">A little Seoul.<br><em>A lot of soul.</em></h2>
          <p>
            We take the comfort of Korean home cooking, the joy of a street taco, and the long way around on the sauce. Big flavor, no ceremony—just really good food wherever the wheels take us.
          </p>
          <div class="story-promise">
            <span class="promise-star" aria-hidden="true">✦</span>
            <span>Pull up hungry. Leave a little louder.</span>
          </div>
        </div>

        <div class="route-card" id="truck">
          <div class="route-map" aria-hidden="true">
            <svg viewBox="0 0 640 170" preserveAspectRatio="none">
              <path d="M-30 133c92-31 126-22 185-55 58-32 81-68 166-54 88 14 116 77 183 77 48 0 82-26 157-64" fill="none" stroke="#cfd8bb" stroke-width="25"/>
              <path d="M-30 133c92-31 126-22 185-55 58-32 81-68 166-54 88 14 116 77 183 77 48 0 82-26 157-64" fill="none" stroke="#fffdf5" stroke-width="18"/>
              <path d="M82-14c17 38 26 71 59 91 36 22 62 21 86 57 17 25 18 40 29 61" fill="none" stroke="#fffdf5" stroke-width="13"/>
              <path d="M425-13c-30 36-41 65-28 93 12 27 42 46 61 103" fill="none" stroke="#fffdf5" stroke-width="11"/>
              <path d="M-10 146c103-34 134-24 198-59 58-32 82-68 163-55 84 13 121 79 186 76 45-2 75-27 120-48" fill="none" stroke="#e84d37" stroke-width="4" stroke-dasharray="7 9" stroke-linecap="round"/>
              <g fill="#a9bb91">
                <circle cx="167" cy="31" r="5"/><circle cx="211" cy="122" r="4"/><circle cx="472" cy="45" r="5"/>
                <circle cx="566" cy="131" r="4"/><circle cx="361" cy="19" r="4"/><circle cx="107" cy="108" r="3"/>
              </g>
            </svg>
            <span class="map-label">No fixed address. Big flavor.</span>
            <span class="map-sticker"><span>✦</span></span>
          </div>

          <div class="route-content">
            <div class="route-heading">
              <div>
                <p class="route-eyebrow">The daily drop</p>
                <h3>Catch us out there.</h3>
              </div>
              <span class="route-status"><i></i> Route drops daily</span>
            </div>
            <p class="route-description">We post the day's stop every morning. Get the pin before your cravings do.</p>
            <form class="pin-form" id="pin-form">
              <input type="email" name="email" placeholder="Your email address" aria-label="Your email address" required>
              <button type="submit">Send me the pin</button>
            </form>
            <p class="form-note" id="form-note" aria-live="polite">Just the occasional location drop. No spam, promise.</p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="footer-inner">
      <a class="footer-brand" href="#home">
        <span class="mini-mark" aria-hidden="true">K</span>
        KIMCHI LOCO
      </a>
      <p class="footer-copy">Korean soul. Taco attitude. See you out there. &nbsp;✦</p>
    </div>
  </footer>

  <script>
    const toggle = document.querySelector('.menu-toggle');
    const navigation = document.querySelector('.nav-links');

    toggle.addEventListener('click', () => {
      const isOpen = navigation.classList.toggle('is-open');
      toggle.setAttribute('aria-expanded', String(isOpen));
      toggle.setAttribute('aria-label', isOpen ? 'Close navigation' : 'Open navigation');
    });

    navigation.querySelectorAll('a').forEach((link) => {
      link.addEventListener('click', () => {
        navigation.classList.remove('is-open');
        toggle.setAttribute('aria-expanded', 'false');
        toggle.setAttribute('aria-label', 'Open navigation');
      });
    });

    document.querySelector('.header-cta').addEventListener('click', () => {
      navigation.classList.remove('is-open');
      toggle.setAttribute('aria-expanded', 'false');
      toggle.setAttribute('aria-label', 'Open navigation');
    });

    document.getElementById('pin-form').addEventListener('submit', (event) => {
      event.preventDefault();
      const form = event.currentTarget;
      const input = form.querySelector('input');
      const button = form.querySelector('button');
      const note = document.getElementById('form-note');

      note.textContent = 'You’re on the list. Keep an eye out for the next location drop!';
      button.textContent = 'You’re in ✓';
      button.disabled = true;
      input.disabled = true;
    });
  </script>
</body>
</html>
Reasoning trace (29,224 tokens)
**Designing food truck website**

I need to create a self-contained HTML website for a Korean taco food truck called Kimchi Loco. The design should be polished and appealing to draw people in. I’ll focus on a compelling layout with a responsive design, using vibrant colors like red, orange, and cream, and inline SVG illustrations of Korean tacos. It should feature a navigation section, a catchy call-to-action like "Find the truck," and a menu. My goal is to create a visually impressive site that makes people crave the food!**Creating a stylish food truck website**

I’m focusing on designing a polished website for the food truck. The hero section should feature text on the left and a vibrant graphic on the right. I want the layout to include a header at the top, a hero section that’s 680px tall, and a clear title reflecting the brand theme. Also, I’ll ensure an interactive navigation with sections like Menu, Find Us, and Our Story, plus a call-to-action for location. The hero will use warm cream and chili-red colors, featuring an SVG illustration of tacos and Korean ingredients for that delicious appeal!**Enhancing location visibility**

I need to ensure the website is fully engaging at 1280x800 resolution, showcasing the brand identity with a vibrant red accent. The site should communicate the excitement of the food truck by providing clear information about location, freshness, and social proof. I could use a customizable location like "Rolling through LA" instead of giving a fictional address. A placeholder for "Find today's stop" seems great, with a button that reveals a modal showing today's specific spot. This should help create a genuine connection with potential customers!**Designing engaging features**

I'm considering a "Find us today" button that either opens a built-in modal or scrolls to the location section. Since this is a demo, keeping it static is a good choice. I could highlight actual menu items like Gochujang Glazed Short Rib Tacos, Crunchy Korean Fried Chicken Tacos, and others. I’m thinking about using a colorful and appealing design for the menu, with a nice palette and typography, while keeping the overall look polished for the "KIMCHI LOCO" brand.**Refining logo and header design**

I'm thinking of a circular red icon for the logo featuring the letter "K". The header would span the full width, maxing out at 1180 pixels, and I want to use dark text for contrast. On the left side of the hero section, there could be a small label that says "KOREAN SOUL. TACO ATTITUDE." along with a tiny red dot. The main typography should highlight the tagline "K-TOWN / IN A / TORTILLA." Overall, I want it to embody the brand name "Kimchi Loco" with a catchy phrase emphasizing bold flavors and small tortillas.**Designing taco truck visuals**

I’m thinking about a title with a fun, catchy vibe: "Korean Soul. / Taco Attitude." It’ll introduce Gochujang-glazed tacos with crunchy kimchi and lime. The call to action will include “Find the truck” and “See the menu.” I need a big hero illustration of three tacos in a vibrant color scheme. Using SVG, I’ll create a detailed, compelling image that captures the essence of the tacos and their deliciousness. Aesthetics are key here!**Creating taco shapes**

I’m thinking about the actual shape for the taco. The shell should have a golden soft-corner U shape, resembling a filled semicircle. I’ll use a gradient fill for the appearance. I want a plausible taco design that features an open top and a tortilla base. For the silhouette, I could use a polygon for the shell that’s angled with a rounded upper curve. I’ll draw an outer shell using a specific path shape to ensure it looks appealing!**Detailing taco components**

I’m outlining the inner details for the taco. The top layer will show dark brown meat irregularly shaped, with shredded cabbage, mint, red kimchi pieces, and scallions. I want the shell's front rim to have a curved stroke with a specific color and width. My central taco shape will be broad with layered components, and I might add sesame for extra detail. I’m considering a handmade art style with clean strokes, and the background could feature a giant red or orange circle in SVG format!**Refining taco design**

I'm focusing on creating a taco design that has a shell base filled with gradient colors. The toppings will include meat chunks, lettuce, and red kimchi. I'm trying to outline the shell shape, with the upper rim crossing a certain area and starting point. The height and curves of the shell are becoming clearer, and I'm considering adding shading to represent marinade. I'll introduce irregular shapes for the beef and sprinkle in some green to enhance the look!**Designing the taco shell**

I’m working on the taco front shell design, ensuring it covers the lower layer effectively. I'm using specific path coordinates to define its shape, with the goal of ensuring the ingredients are visible above the shell edge. It’s a little tricky to balance coverage while showcasing the delicious fillings! I want to ensure the design looks appealing and accurately represents what’s inside the taco. Keeping track of the details is essential here!**Considering mobile layout**

I’m thinking about the mobile layout, maybe starting with hero text and a visual illustration at the top. I could compress elements to ensure everything is visually visible. For font sizes, I’m considering a headline at 53, header at 68, announcement at 28, and content at 30. The title wraps at 375 with "Korean soul" and "Taco attitude" lines. I’ll clamp the font sizes and set the body at 15, with the illustration being 100% width and 260 in height.**Considering design elements**

I need to ensure that the topping silhouette is centered and doesn't overlap the outside space. I’m picturing small brown beef pieces and decorative sesame seeds. I’ll also think about using an SVG filter. For the badge, it might work well to use a circular SVG white sticker positioned at x443 y83, with a possible rotation. The text could read, "SAUCE / YOUR /SELF." I could style it externally to position the HTML nicely.**Designing food truck page**

I'm brainstorming elements for a potential food truck page. I think starting with a banner announcement like "NOW SERVING THE STREETS • FOLLOW YOUR NOSE" could grab attention. I want an eye-catching hero section featuring the eyebrow text "THE KOREAN–MEXICAN LOVE STORY" and a catchy headline like "Tacos with a little Seoul." I'll include a description of the food, a call-to-action to catch the truck, and social proof showing how customers love it.**Crafting food truck highlights**

I’m thinking about how to showcase our spicy gochujang and punchy house kimchi in warm tortillas, made fresh when customers roll up. That sounds delicious! For buttons, I’ll create a mini line with three graphics that highlight: "House-fermented kimchi," "Griddled fresh," and "Good chaos, no forks." I want to use icons for these to make them visually engaging. The main art needs to reflect the vibrancy and deliciousness of the food!**Designing Route Message**

I’m thinking about how to add a route message for the simulation. It should say something like, "Truck is parked," but I want to avoid anything misleading. Perhaps something like, "We roam. Get the next stop." 

I’m also considering a map panel illustration for visual appeal, using CSS for a street map with a route pin. The site structure could start with a top announcement about fresh tacos, and I want to make sure the message is catchy yet clear.**Designing Overlay Elements**

I'm planning an overlay for the design that says "SIZZLING / RIGHT NOW" at the top left, with a small red dot to grab attention. For the bottom right, I’m thinking of a tag that says "ONE BITE / YOU'RE LOCO." 

I want to position it nicely—maybe at a 50/50 grid for a hero section at 1280 pixels wide. The art could have a minimum width of 100% or 610 pixels, with a height of 500 pixels. I'll use SVG for background and text labels to give it a striking visual style.**Exploring emoji rendering options**

I'm looking into the emoji render system, and it seems we can't use external assets. That's alright, though! I'm thinking it would be better to use mini vector icons with inline SVG for a cleaner look. Alternatively, I could create appealing product cards in pastel colors. Each item could feature a graphic area at the top, maybe with a CSS abstract food image or a small SVG of the same style. This could enhance the overall design!**Designing Taco Cards**

I'm considering using separate simple vector tacos to keep up quality. I think I could do about three top cards, each featuring icon circles and ingredient chips. They should remain visible after scrolling. Each card could have a fun taco illustration as a large colored graphic at the top. I could also use the same SVG for the taco image. Maybe a stylized food stamp emoji would add a nice touch, along with details like tags, names, descriptions, and prices.**Creating Menu and Location Details**

I’m working on a menu with some delicious items like Gochujang chicken for $6, Bulgogi boom for $7, and Kimchi crunch tofu for $5.50. Adding a flavor meter labeled "SWEET HEAT" could make it more engaging. For location, I think a "Find our truck" section with a deep green background and a map panel would be appealing. I’d suggest saying, “We post the day's stop each morning,” and include options for a subscription form to get updates on the next stop!**Designing the Website Layout**

I think the user expects a comprehensive website, so I need to include a footer with social handles, like the invented brand handle `@kimchiloco`. It’s best not to include external links since they might not function. Adding anchors like `#truck` is a good idea. I’m also considering a story section for some narrative depth; I could create an anchor for that at `#story`. Navigation should link to `#menu`, `#story`, and `#truck`, with the story embedded below the menu as a pull quote or mini section.**Planning website layout**

I'm considering a layout for the website that includes elements like a dark green background, a short copy, and an illustrated stamp. I want to organize it with a header, hero section, ticker, and menu. I'll have a combined story and route section, featuring a catchy tagline and a schedule card. I need to ensure that mobile responsiveness is prioritized, possibly hiding nav links behind a hamburger button, ensuring it's interactive and accessible.**Designing mobile navigation**

I'm configuring the navigation for mobile devices, ensuring that at widths of 760 pixels or less, I hide the nav links and display only a visible button. The nav should become accessible with absolute positioning when opened. I'm considering whether to keep both the call-to-action (CTA) button and hamburger icon or just show the CTA as an icon. I need to calculate spacing and widths carefully to keep everything within limits, ensuring smooth interactions like toggling the menu and submitting forms.**Implementing event listeners**

I'm setting up an event listener for a button that should prevent the default action. I might simplify the button label to "You're on the list!" with a message saying "You're on the list—next stop coming your way." For the menu item "Add to your line-up," the buttons will add an item to the `#order-note` and use `aria-live` for accessibility. I'm considering how a counter on the bag icon could enhance the user experience, but it might not be necessary. The "Want this" button should trigger updates for the sticky toast instead.**Designing interactive ordering**

I’m rethinking how to structure the ordering interface. The "I'm in" button scrolls to the truck's location with a message encouraging user interaction. Each taco card should link directly to location sections, making it engaging. I could add a button for users to include items in "My taco lineup" that triggers a toast notification confirming their selection.

I need a clear call-to-action to catch people’s attention and also emphasize a signup form for updates about truck locations.**Planning web layout**

I'm considering a placeholder message like "📍 Our home base: wherever lunch is hungry." I want to include a section titled "Today’s stop: revealed daily" with a form for collecting emails instead of phone numbers, labeled "Get the daily pin." The email field would have a placeholder and a clear call-to-action that reassures users about no spam.

Visually, I'll think about the design and layout specifics, including necessary HTML and CSS, ensuring a smooth user experience. I’ll plan how to implement subtle background patterns as well!**Designing dish cards**

I'm working on the design for dish cards, considering a white background and some subtle borders with rounded corners. I want to add a small visual element, maybe a taco emoji or even a custom SVG icon for a mini taco. Using inline SVGs for each card seems like a good idea. I'll create unique icons with different toppings. The markup should remain simple, and I'll ensure consistency in style across the icons.**Considering menu presentation**

I think I need to present a menu with prices. It seems like a persuasive approach, and I wonder if it can be seen as creative even though the user hasn't provided any specific details. I'll need to put some thought into how this menu will look and what to include. Overall, it's important to make it engaging, so I'm curious about how best to format and present the information.**Considering pricing options**

I'm thinking about how to handle the menu pricing and whether to provide specific price points or just values. Since it's a demo site, I might not need to state exact prices. A good idea could be to use something like "from $6" to make it enticing without being inaccurate. I’ll consider showing sample prices around $6.50 or $6.25 but I'm wondering if it’s better to omit them altogether to keep things simple. Engaging design is the priority!**Designing the route card**

I'm thinking about the layout for the route card, making sure it's visually appealing with a background color of #fff8eb. I’m considering stacking elements at 375 pixels and separating the location section with a title and email form but without an actual route shown. 

I want to include an engaging story section that highlights the personal touch of the sauce. There’s a catchy phrase: "A little Seoul. A lot of soul," explaining our blend of Korean home cooking and street tacos. Also, a fun note suggesting to "Pull up hungry" adds to the vibe!**Considering pear marinade options**

I'm thinking about a pear marinade with an Asian twist. I found a dish called "Gochujang Glow" for $6.50 featuring crispy chicken and sticky gochujang glaze with cool cabbage and lime—it sounds spicy and delicious! There's also the "Kimchi Crunch" for $6, which has crispy tofu and zingy cucumber kimchi; that could be the best choice because it seems so flavorful. I'm picturing a container design with a dark green background, maybe with dots and cream text for the story copy.**Considering website design**

I'm thinking about how to structure elements on the webpage. For example, I might want to map the label in HTML absolutely and decide on a color scheme for the route card, like dark or cream colors. I need to think about padding for the `.route-panel` and include actionable elements like "Get today's stop," while keeping in mind how the form will operate without a backend. I’ll also need to consider various CSS details for the visual quality of the site and maintain user engagement.**Designing taco visuals**

I'm working on designing some visuals for a taco-themed project. I plan to use a lime wedge with a specific placement and transform it with circles and paths to give it texture. There’s a thought to overlay a floating note on the SVG, possibly with some vibrant labels for emphasis. I’m considering the color scheme, font styles, and ensuring the final look is bright and friendly. There’s a mix of elements like a banner and a call-to-action.**Defining navigation elements**

I'm focused on designing the header with a navigation element that has a clear aria label for accessibility. I think I should include a button that features a line, which could help in organizing the structure visually. This thought highlights the importance of both functionality and design in making the navigation intuitive for users. Ensuring it's accessible while keeping it visually appealing is key to creating a user-friendly interface.**Considering text visibility**

I'm thinking about the call-to-action label "Catch the truck" at the desktop view, but how it might be best to switch to "Find us" on mobile. Maybe I can achieve that using CSS to hide the text effectively. It's crucial to ensure that users get the appropriate message depending on their device without cluttering the interface. I'll explore the options for implementing that CSS change.**Calculating segment fit**

I’m considering that with a width of 375, I might be able to fit three segments. The phrase "FERMENTED WITH LOVE ✳ SAUCED WITH INTENT ✳ SERVED HOT" is about 58 characters long when using a 10px font. I’ll need to think about how the layout looks and if there’s enough space without overcrowding it. If each segment has a good amount of padding, it should work well!**Designing marquee animation**

I'm thinking about a ticker layout that includes horizontal scrolling but without a visible scrollbar. I want to animate text using CSS with a marquee effect that lasts 28 seconds, ensuring that it doesn't interfere with reduced motion preferences. Screenshots could capture cut text due to movement, which is fine. I’ll also consider responsive elements for mobile devices, like hiding the third segment or stars. It feels like I have a clear plan forming!**Planning CSS and HTML layout**

I need to avoid static elements, especially for the `flavor-tape`, which will be dark green with decorative text. For mobile, I'll make sure to hide the third span if it contains anything. It seems necessary to add an anchor link to `#home`, and I’m wondering about using inline CSS for everything, which might lead to around 1000 lines of code! It feels like I should carefully define my CSS rules and HTML structure to keep it tidy and efficient.**Evaluating SVG design**

I'm considering the taco's shape and its outer shell. The filling path might extend, which is good. The texture looks tiny and main. I'm thinking about the SVG's text rendering—fonts can cause issues. The image has an intrinsic height and width, and I wonder if an overlay in the lower-left is necessary. It might not be since the bright visual is likely sufficient. I'll add a small white badge in the SVG instead. 

I need to solidify the badge's position and details!**Designing taco card layout**

I’m thinking about how to set the taco center coordinates and add some decorative elements. I’ll incorporate small dots without any external components. For the card art, I need the height set to 116 and the SVG should have a slight rotation. I’ll also include a big circle ring behind the SVG with a good z-index. The button should say "Find it on the truck" instead of "Track this taco," and I’ll ensure the section description is clear.**Assessing layout dimensions**

I’m analyzing the dimensions for a design. The current hero min-height is at 790, and I think reducing it to 525 might work. However, the artwork image appears to overflow if it's set at 493; adjusting the art SVG dimensions to 470 could help. I’m also considering the content width and inner min-height, aiming for good balance. It seems stretching widths and managing columns effectively matters, so I’ll keep those elements aligned for the best result!**Reviewing layout dimensions**

I’m working on details like the inner width at 1208, and I see I need to consider a gap of 30 between elements, which results in each section being around 589. The visual max-width is set to 555, which seems good. The hero section might need a min-height of 525, and I think that works with the right artwork dimensions of 555 by 448. It sounds like I’m making solid progress on achieving a well-aligned and balanced layout!**Designing a Food Truck Page**

I’m thinking about how to make this food truck's webpage engaging and self-contained, without needing a network. Setting a theme color helps create a visual identity. I want to emphasize sensory words to draw people in. A catchy tagline like “Your next lunch crush is on four wheels” could work! I should also include a bold announcement about the brand. Adding social proof while avoiding fake ratings is essential. Lastly, I’ll format the location information with a catchy heading and a description to attract customers effectively.**Creating Signup and Status Features**

I’m thinking about how to design the form for interested customers. There will be an email input field with a clear purpose, like getting notifications when the truck is nearby—without any spam! I want to ensure the status message indicates daily drops without committing to specific openings. Maybe a line suggesting “Our first stop is on its way” instead of exact timing to keep it flexible. I'll explain there’s no permanent address and encourage signups. Adding a “Book the truck” call to action could also help catch private events.**Updating the Footer**

I'm considering the footer layout for the website. It should have a clear call to action like, “Need a taco truck for your event? Sign up or get in touch!” I thought about including a mail link to book the truck directly, but I want to ensure authenticity—so I'll skip any fake elements. I should also decide if the copyright year should be dynamic or static. In any case, it needs to feel current, like using JavaScript to update to the current year automatically.**Finalizing styles for hero section**

I’m thinking about using a subtle paper pattern for the hero, with a low-opacity background to avoid visual noise. The main section will have a light background color. I’ll choose specific fonts like Arial for the body and Impact for headings, ensuring they’re loaded locally. I need to carefully finalize the CSS code, including media queries for responsive design. I'll also pay attention to padding and font sizes to ensure it looks great on different screen widths.