snoble/brochure.html

## brochure.html
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>BurritoScript — TypeScript with Superpowers</title><meta name="description" content="An effect system that makes your code automatically debuggable, verifiable, and optimizable. Built for the age of AI-assisted development." /><style>@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');:root {  --bg-deep: #0a0a0f;  --bg-surface: #12121a;  --bg-elevated: #1a1a24;  --accent-primary: #ff6b35;  --accent-secondary: #00d4aa;  --accent-tertiary: #7c3aed;  --text-primary: #fafafa;  --text-secondary: #a0a0b0;  --text-muted: #6a6a7a;  --border: #2a2a3a;  --glow-orange: rgba(255, 107, 53, 0.5);  --glow-teal: rgba(0, 212, 170, 0.4);}* { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; }body {  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;  background: var(--bg-deep);  color: var(--text-primary);  line-height: 1.6;  overflow-x: hidden;}code, pre, .mono {  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;}a { color: inherit; text-decoration: none; }.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }.bg-grid {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image:     linear-gradient(rgba(255, 107, 53, 0.03) 1px, transparent 1px),    linear-gradient(90deg, rgba(255, 107, 53, 0.03) 1px, transparent 1px);  background-size: 60px 60px;  pointer-events: none;  z-index: -1;  animation: gridMove 20s linear infinite;}@keyframes gridMove {  0% { transform: translate(0, 0); }  100% { transform: translate(60px, 60px); }}.watermark {  position: fixed;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 80vw;  height: 80vw;  max-width: 1000px;  max-height: 1000px;  opacity: 0.06;  pointer-events: none;  z-index: 0;}.watermark svg {  width: 100%;  height: 100%;  color: var(--accent-secondary);}.orb {  position: fixed;  border-radius: 50%;  filter: blur(80px);  pointer-events: none;  z-index: -1;  animation: float 8s ease-in-out infinite;}.orb-1 {  width: 600px;  height: 600px;  background: var(--glow-orange);  top: -200px;  right: -200px;  animation-delay: 0s;}.orb-2 {  width: 500px;  height: 500px;  background: var(--glow-teal);  bottom: -150px;  left: -150px;  animation-delay: -4s;}.orb-3 {  width: 300px;  height: 300px;  background: rgba(124, 58, 237, 0.3);  top: 50%;  left: 50%;  animation-delay: -2s;}@keyframes float {  0%, 100% { transform: translate(0, 0) scale(1); }  25% { transform: translate(30px, -30px) scale(1.05); }  50% { transform: translate(-20px, 20px) scale(0.95); }  75% { transform: translate(-30px, -20px) scale(1.02); }}.reveal {  opacity: 0;  transform: translateY(40px);  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}.reveal.visible {  opacity: 1;  transform: translateY(0);}.reveal-delay-1 { transition-delay: 0.1s; }.reveal-delay-2 { transition-delay: 0.2s; }.reveal-delay-3 { transition-delay: 0.3s; }.reveal-delay-4 { transition-delay: 0.4s; }nav {  position: fixed;  top: 0;  left: 0;  right: 0;  padding: 20px 0;  background: rgba(10, 10, 15, 0.7);  backdrop-filter: blur(20px);  border-bottom: 1px solid var(--border);  z-index: 100;  transition: background 0.3s, padding 0.3s;}nav.scrolled {  background: rgba(10, 10, 15, 0.95);  padding: 12px 0;}.nav-inner {  display: flex;  justify-content: space-between;  align-items: center;}.logo {  font-weight: 800;  font-size: 22px;  display: flex;  align-items: center;  gap: 10px;  transition: transform 0.3s;}.logo:hover { transform: scale(1.05); }.logo-icon {  width: 36px;  height: 36px;  display: flex;  align-items: center;  justify-content: center;  position: relative;}.logo-icon svg {  width: 32px;  height: 32px;  filter: drop-shadow(0 0 8px var(--accent-secondary));  animation: jellyFloat 3s ease-in-out infinite, jellyGlow 2s ease-in-out infinite;}@keyframes jellyFloat {  0%, 100% { transform: translateY(0); }  50% { transform: translateY(-3px); }}@keyframes jellyGlow {  0%, 100% { filter: drop-shadow(0 0 8px var(--accent-secondary)); }  50% { filter: drop-shadow(0 0 16px var(--accent-secondary)) drop-shadow(0 0 24px var(--accent-primary)); }}.nav-links {  display: flex;  gap: 32px;}.nav-link {  font-size: 14px;  color: var(--text-secondary);  font-weight: 500;  transition: color 0.2s, transform 0.2s;  position: relative;}.nav-link::after {  content: '';  position: absolute;  bottom: -4px;  left: 0;  width: 0;  height: 2px;  background: var(--accent-primary);  transition: width 0.3s;}.nav-link:hover { color: var(--text-primary); }.nav-link:hover::after { width: 100%; }.nav-cta {  background: var(--accent-primary);  color: var(--bg-deep);  padding: 10px 20px;  border-radius: 8px;  font-weight: 600;  font-size: 14px;  transition: transform 0.2s, box-shadow 0.2s;  position: relative;  overflow: hidden;}.nav-cta::before {  content: '';  position: absolute;  top: 0;  left: -100%;  width: 100%;  height: 100%;  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);  transition: left 0.5s;}.nav-cta:hover::before { left: 100%; }.nav-cta:hover {  transform: translateY(-2px);  box-shadow: 0 8px 24px var(--glow-orange);}.hero {  min-height: 100vh;  display: flex;  align-items: center;  padding: 140px 0 100px;  position: relative;}.hero-content {  position: relative;  z-index: 1;  display: grid;  grid-template-columns: 1fr 1fr;  gap: 60px;  align-items: center;}.hero-text { max-width: 600px; }.badge {  display: inline-flex;  align-items: center;  gap: 8px;  background: rgba(255, 107, 53, 0.1);  border: 1px solid rgba(255, 107, 53, 0.3);  padding: 8px 16px;  border-radius: 999px;  font-size: 13px;  font-weight: 600;  color: var(--accent-primary);  margin-bottom: 24px;  animation: badgePulse 2s ease-in-out infinite;}@keyframes badgePulse {  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.4); }  50% { box-shadow: 0 0 0 8px rgba(255, 107, 53, 0); }}.badge-dot {  width: 8px;  height: 8px;  background: var(--accent-primary);  border-radius: 50%;  animation: pulse 1.5s infinite;}@keyframes pulse {  0%, 100% { opacity: 1; transform: scale(1); }  50% { opacity: 0.5; transform: scale(0.8); }}h1 {  font-size: 68px;  font-weight: 800;  line-height: 1.05;  margin-bottom: 24px;  letter-spacing: -0.03em;}h1 .gradient {  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary), var(--accent-primary));  background-size: 300% 300%;  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;  background-clip: text;  animation: gradientShift 4s ease infinite;}@keyframes gradientShift {  0% { background-position: 0% 50%; }  50% { background-position: 100% 50%; }  100% { background-position: 0% 50%; }}.hero-subtitle {  font-size: 20px;  color: var(--text-secondary);  max-width: 520px;  margin-bottom: 40px;}.cta-group {  display: flex;  gap: 16px;  flex-wrap: wrap;}.btn {  display: inline-flex;  align-items: center;  gap: 8px;  padding: 16px 28px;  border-radius: 12px;  font-weight: 600;  font-size: 16px;  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);  position: relative;  overflow: hidden;}.btn-primary {  background: linear-gradient(135deg, var(--accent-primary), #ff8f5a);  color: var(--bg-deep);  box-shadow: 0 4px 20px var(--glow-orange);}.btn-primary:hover {  transform: translateY(-3px) scale(1.02);  box-shadow: 0 12px 40px var(--glow-orange);}.btn-primary:active { transform: translateY(-1px) scale(0.98); }.btn-secondary {  background: var(--bg-elevated);  border: 1px solid var(--border);  color: var(--text-primary);}.btn-secondary:hover {  background: var(--bg-surface);  border-color: var(--accent-primary);  transform: translateY(-3px);  box-shadow: 0 8px 24px rgba(0,0,0,0.3);}.hero-code {  background: var(--bg-surface);  border: 1px solid var(--border);  border-radius: 16px;  overflow: hidden;  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);  animation: codeFloat 6s ease-in-out infinite;}@keyframes codeFloat {  0%, 100% { transform: translateY(0); }  50% { transform: translateY(-10px); }}.code-tabs {  display: flex;  gap: 0;  background: var(--bg-deep);  border-bottom: 1px solid var(--border);}.code-tab {  flex: 1;  padding: 12px 16px;  background: transparent;  border: none;  color: var(--text-muted);  font-family: inherit;  font-size: 12px;  font-weight: 600;  cursor: pointer;  transition: all 0.3s;  position: relative;}.code-tab:hover { color: var(--text-secondary); }.code-tab.active {  color: var(--accent-primary);  background: var(--bg-surface);}.code-tab.active::after {  content: '';  position: absolute;  bottom: -1px;  left: 0;  right: 0;  height: 2px;  background: var(--accent-primary);}.code-tab .arrow { margin: 0 4px; opacity: 0.5; }.code-panels { position: relative; min-height: 200px; }.code-panel {  position: absolute;  top: 0;  left: 0;  right: 0;  padding: 20px;  opacity: 0;  transform: translateX(20px);  transition: opacity 0.4s, transform 0.4s;  pointer-events: none;}.code-panel.active {  opacity: 1;  transform: translateX(0);  pointer-events: auto;  position: relative;}.code-panel pre {  font-size: 12px;  line-height: 1.7;  color: var(--text-secondary);  margin: 0;}.code-panel .comment { color: var(--accent-secondary); }.code-panel .warning { color: #f59e0b; }.code-panel .error { color: #ef4444; }.code-header {  display: flex;  align-items: center;  gap: 8px;  padding: 14px 18px;  background: var(--bg-elevated);  border-bottom: 1px solid var(--border);}.code-dot {  width: 12px;  height: 12px;  border-radius: 50%;  transition: transform 0.2s;}.code-header:hover .code-dot { transform: scale(1.2); }.code-dot:nth-child(1) { background: #ff5f57; }.code-dot:nth-child(2) { background: #febc2e; }.code-dot:nth-child(3) { background: #28c840; }.code-title {  margin-left: 12px;  font-size: 13px;  color: var(--text-muted);}.code-body {  padding: 20px;  font-size: 13px;  line-height: 1.7;  color: var(--text-secondary);  overflow-x: auto;  position: relative;}.cursor {  display: inline-block;  width: 2px;  height: 1.2em;  background: var(--accent-primary);  margin-left: 2px;  animation: blink 1s step-end infinite;  vertical-align: text-bottom;}@keyframes blink {  0%, 100% { opacity: 1; }  50% { opacity: 0; }}.features {  padding: 140px 0;  position: relative;}.section-header {  text-align: center;  max-width: 700px;  margin: 0 auto 80px;}.section-header h2 {  font-size: 52px;  font-weight: 800;  margin-bottom: 20px;  letter-spacing: -0.02em;}.section-header p {  font-size: 18px;  color: var(--text-secondary);}.features-grid {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 24px;}.feature-card {  background: var(--bg-surface);  border: 1px solid var(--border);  border-radius: 24px;  padding: 36px;  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  position: relative;  overflow: hidden;}.feature-card::before {  content: '';  position: absolute;  top: 0;  left: 0;  right: 0;  height: 3px;  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));  transform: scaleX(0);  transform-origin: left;  transition: transform 0.4s;}.feature-card:hover::before { transform: scaleX(1); }.feature-card:hover {  transform: translateY(-8px);  border-color: var(--accent-primary);  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px var(--glow-orange);}.feature-icon {  font-size: 42px;  margin-bottom: 20px;  display: inline-block;  animation: iconBounce 2s ease-in-out infinite;  animation-play-state: paused;}.feature-card:hover .feature-icon {  animation-play-state: running;}@keyframes iconBounce {  0%, 100% { transform: translateY(0) rotate(0deg); }  25% { transform: translateY(-5px) rotate(-5deg); }  75% { transform: translateY(-5px) rotate(5deg); }}.feature-card h3 {  font-size: 26px;  font-weight: 700;  margin-bottom: 12px;}.feature-card p {  color: var(--text-secondary);  margin-bottom: 24px;  font-size: 16px;}.feature-code {  background: var(--bg-deep);  border-radius: 12px;  padding: 18px;  font-size: 12px;  color: var(--text-secondary);  overflow-x: auto;  white-space: pre;  line-height: 1.6;  border: 1px solid var(--border);  transition: border-color 0.3s;}.feature-card:hover .feature-code {  border-color: var(--accent-secondary);}.quickstart {  padding: 140px 0;  background: var(--bg-surface);  border-top: 1px solid var(--border);  border-bottom: 1px solid var(--border);  position: relative;}.quickstart-content {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 80px;  align-items: center;}.quickstart-text h2 {  font-size: 52px;  font-weight: 800;  margin-bottom: 24px;  letter-spacing: -0.02em;}.quickstart-text p {  font-size: 18px;  color: var(--text-secondary);  margin-bottom: 40px;}.quickstart-steps {  display: flex;  flex-direction: column;  gap: 20px;}.step {  display: flex;  align-items: center;  gap: 20px;  padding: 16px;  background: var(--bg-elevated);  border-radius: 16px;  border: 1px solid transparent;  transition: all 0.3s;  cursor: default;}.step:hover {  border-color: var(--accent-primary);  transform: translateX(8px);  background: var(--bg-deep);}.step-number {  width: 40px;  height: 40px;  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));  color: var(--bg-deep);  border-radius: 12px;  display: flex;  align-items: center;  justify-content: center;  font-weight: 700;  font-size: 16px;  flex-shrink: 0;  transition: transform 0.3s;}.step:hover .step-number { transform: scale(1.1) rotate(5deg); }.step-text {  color: var(--text-secondary);  font-size: 16px;}.step-text strong { color: var(--text-primary); }.quickstart-terminal {  background: var(--bg-deep);  border: 1px solid var(--border);  border-radius: 20px;  overflow: hidden;  box-shadow: 0 20px 60px rgba(0,0,0,0.4);}.terminal-header {  display: flex;  align-items: center;  gap: 8px;  padding: 16px 20px;  background: var(--bg-elevated);  border-bottom: 1px solid var(--border);}.terminal-body {  padding: 24px;  font-size: 14px;  line-height: 2;  min-height: 280px;}.terminal-line {  opacity: 0;  animation: terminalType 0.5s forwards;}.terminal-line:nth-child(1) { animation-delay: 0.3s; }.terminal-line:nth-child(2) { animation-delay: 0.6s; }.terminal-line:nth-child(3) { animation-delay: 0.9s; }.terminal-line:nth-child(4) { animation-delay: 1.5s; }.terminal-line:nth-child(5) { animation-delay: 1.8s; }.terminal-line:nth-child(6) { animation-delay: 2.4s; }.terminal-line:nth-child(7) { animation-delay: 2.7s; }.terminal-line:nth-child(8) { animation-delay: 3.3s; }.terminal-line:nth-child(9) { animation-delay: 3.6s; }@keyframes terminalType {  from { opacity: 0; transform: translateX(-10px); }  to { opacity: 1; transform: translateX(0); }}.terminal-body .prompt { color: var(--accent-secondary); font-weight: 600; }.terminal-body .comment { color: var(--text-muted); font-style: italic; }.terminal-body .cmd { color: var(--text-primary); }.philosophy {  padding: 140px 0;}.philosophy-content {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: 32px;}.philosophy-card {  background: var(--bg-surface);  border: 1px solid var(--border);  border-radius: 24px;  padding: 48px 36px;  text-align: center;  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);  position: relative;  overflow: hidden;}.philosophy-card::after {  content: '';  position: absolute;  inset: 0;  background: radial-gradient(circle at 50% 0%, var(--glow-orange), transparent 70%);  opacity: 0;  transition: opacity 0.4s;  pointer-events: none;}.philosophy-card:hover::after { opacity: 0.1; }.philosophy-card:hover {  transform: translateY(-12px) scale(1.02);  border-color: var(--accent-primary);  box-shadow: 0 24px 60px rgba(0,0,0,0.3);}.philosophy-card h3 {  font-size: 22px;  font-weight: 700;  margin-bottom: 16px;  position: relative;}.philosophy-card p {  color: var(--text-secondary);  font-size: 15px;  line-height: 1.7;  position: relative;}.philosophy-icon {  font-size: 56px;  margin-bottom: 28px;  display: inline-block;  transition: transform 0.4s;}.philosophy-card:hover .philosophy-icon {  transform: scale(1.2) rotate(10deg);}.case-study {  padding: 140px 0;  background: var(--bg-surface);  border-top: 1px solid var(--border);  border-bottom: 1px solid var(--border);}.case-study-content {  display: grid;  gap: 40px;}.case-problem {  background: var(--bg-elevated);  border: 1px solid var(--border);  border-radius: 20px;  padding: 32px;}.case-problem h3 {  font-size: 24px;  margin-bottom: 16px;  color: #ef4444;}.case-problem ul {  list-style: none;  display: grid;  gap: 12px;  margin-top: 16px;}.case-problem li {  padding-left: 24px;  position: relative;  color: var(--text-secondary);}.case-problem li::before {  content: '✗';  position: absolute;  left: 0;  color: #ef4444;}.case-diagram {  background: var(--bg-deep);  border: 1px solid var(--border);  border-radius: 20px;  padding: 32px;  overflow: hidden;}.diagram-container {  display: flex;  justify-content: center;  align-items: center;}.system-diagram {  width: 100%;  max-width: 600px;  height: auto;}.case-how-it-works {  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));  border: 1px solid var(--accent-tertiary);  border-radius: 20px;  padding: 40px;}.case-how-it-works h3 {  font-size: 28px;  margin-bottom: 16px;  color: var(--accent-tertiary);}.how-intro {  font-size: 16px;  color: var(--text-secondary);  margin-bottom: 32px;  line-height: 1.7;}.how-intro strong { color: var(--accent-primary); }.how-intro em { color: var(--accent-secondary); font-style: normal; }.how-steps {  display: grid;  gap: 24px;}.how-step {  display: grid;  grid-template-columns: 48px 1fr;  gap: 20px;  align-items: start;}.how-step-num {  width: 48px;  height: 48px;  background: linear-gradient(135deg, var(--accent-tertiary), var(--accent-secondary));  border-radius: 12px;  display: flex;  align-items: center;  justify-content: center;  font-weight: 800;  font-size: 20px;  color: var(--bg-deep);}.how-step-content {  background: var(--bg-deep);  border: 1px solid var(--border);  border-radius: 12px;  padding: 20px;}.how-step-content strong {  display: block;  font-size: 16px;  margin-bottom: 8px;  color: var(--text-primary);}.how-step-content p {  font-size: 14px;  color: var(--text-muted);  margin-bottom: 12px;}.how-step-content pre {  font-size: 12px;  line-height: 1.6;  color: var(--text-secondary);  background: var(--bg-surface);  padding: 12px;  border-radius: 8px;  overflow-x: auto;  white-space: pre;}.case-solution {  background: var(--bg-elevated);  border: 1px solid var(--accent-secondary);  border-radius: 20px;  padding: 32px;}.case-solution h3 {  font-size: 24px;  margin-bottom: 24px;  color: var(--accent-secondary);}.solution-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: 24px;}.solution-item {  text-align: center;}.solution-icon {  font-size: 32px;  margin-bottom: 12px;}.solution-item strong {  display: block;  margin-bottom: 8px;  color: var(--text-primary);}.solution-item p {  font-size: 13px;  color: var(--text-muted);}.case-code {  background: var(--bg-deep);  border: 1px solid var(--border);  border-radius: 16px;  padding: 24px;  overflow-x: auto;}.case-code pre {  font-size: 13px;  line-height: 1.7;  color: var(--text-secondary);  white-space: pre;}@media (max-width: 900px) {  .solution-grid { grid-template-columns: repeat(2, 1fr); }}.cta {  padding: 160px 0;  text-align: center;  position: relative;  overflow: hidden;}.cta::before {  content: '';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  width: 1000px;  height: 500px;  background: radial-gradient(ellipse, var(--glow-orange), transparent 60%);  opacity: 0.4;  animation: ctaPulse 4s ease-in-out infinite;  pointer-events: none;}@keyframes ctaPulse {  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }  50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; }}.cta-content {  position: relative;  z-index: 1;}.cta h2 {  font-size: 60px;  font-weight: 800;  margin-bottom: 24px;  letter-spacing: -0.02em;}.cta p {  font-size: 20px;  color: var(--text-secondary);  max-width: 600px;  margin: 0 auto 48px;}footer {  padding: 48px 0;  border-top: 1px solid var(--border);  text-align: center;  color: var(--text-muted);  font-size: 14px;}footer a {  color: var(--accent-primary);  transition: color 0.2s;}footer a:hover { color: var(--accent-secondary); }@media (max-width: 900px) {  .hero-content { grid-template-columns: 1fr; gap: 40px; }  .hero-code { display: none; }  h1 { font-size: 44px; }  .features-grid { grid-template-columns: 1fr; }  .quickstart-content { grid-template-columns: 1fr; gap: 40px; }  .philosophy-content { grid-template-columns: 1fr; }  .cta h2 { font-size: 36px; }  .nav-links { display: none; }}</style></head><body><div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div><div class="watermark"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="wm-glow" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#00d4aa" stop-opacity="0.8"/><stop offset="50%" stop-color="#7c3aed" stop-opacity="1"/><stop offset="100%" stop-color="#00d4aa" stop-opacity="0.8"/></linearGradient><filter id="wm-blur"><feGaussianBlur stdDeviation="0.3"/></filter></defs><ellipse cx="16" cy="11" rx="9" ry="7" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.3"/><path d="M10 9 Q16 5 22 9" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/><path d="M8 17 Q7 21 9 25" stroke="currentColor" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0.3"/><path d="M12 18 Q11 23 13 27" stroke="currentColor" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0.3"/><path d="M16 18 Q15 24 16 28" stroke="currentColor" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0.3"/><path d="M20 18 Q21 23 19 27" stroke="currentColor" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0.3"/><path d="M24 17 Q25 21 23 25" stroke="currentColor" stroke-width="1.25" fill="none" stroke-linecap="round" opacity="0.3"/><ellipse cx="16" cy="11" rx="9" ry="7" fill="none" stroke="url(#wm-glow)" stroke-width="2" filter="url(#wm-blur)" stroke-dasharray="8 50" stroke-linecap="round"><animate attributeName="stroke-dashoffset" values="0;-58" dur="4s" repeatCount="indefinite"/></ellipse><path d="M8 17 Q7 21 9 25" stroke="url(#wm-glow)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#wm-blur)" stroke-dasharray="3 20"><animate attributeName="stroke-dashoffset" values="0;-23" dur="2.5s" repeatCount="indefinite"/></path><path d="M12 18 Q11 23 13 27" stroke="url(#wm-glow)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#wm-blur)" stroke-dasharray="3 20"><animate attributeName="stroke-dashoffset" values="0;-23" dur="2.8s" begin="0.3s" repeatCount="indefinite"/></path><path d="M16 18 Q15 24 16 28" stroke="url(#wm-glow)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#wm-blur)" stroke-dasharray="3 20"><animate attributeName="stroke-dashoffset" values="0;-23" dur="2.2s" begin="0.6s" repeatCount="indefinite"/></path><path d="M20 18 Q21 23 19 27" stroke="url(#wm-glow)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#wm-blur)" stroke-dasharray="3 20"><animate attributeName="stroke-dashoffset" values="0;-23" dur="2.6s" begin="0.2s" repeatCount="indefinite"/></path><path d="M24 17 Q25 21 23 25" stroke="url(#wm-glow)" stroke-width="2" fill="none" stroke-linecap="round" filter="url(#wm-blur)" stroke-dasharray="3 20"><animate attributeName="stroke-dashoffset" values="0;-23" dur="2.4s" begin="0.5s" repeatCount="indefinite"/></path></svg></div><div class="bg-grid"></div><nav><div class="container nav-inner"><a href="#" class="logo"><div class="logo-icon"><svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="jellyGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#00d4aa"/><stop offset="100%" stop-color="#7c3aed"/></linearGradient><linearGradient id="jellyGlow" x1="0.5" y1="0" x2="0.5" y2="1"><stop offset="0%" stop-color="#00d4aa" stop-opacity="0.8"/><stop offset="100%" stop-color="#00d4aa" stop-opacity="0"/></linearGradient></defs><!-- Bell/dome --><ellipse cx="16" cy="12" rx="10" ry="8" fill="url(#jellyGrad)" opacity="0.9"/><ellipse cx="16" cy="12" rx="7" ry="5" fill="url(#jellyGlow)" opacity="0.6"/><!-- Inner glow --><ellipse cx="16" cy="11" rx="4" ry="3" fill="#fff" opacity="0.3"/><!-- Tentacles --><path d="M8 18 Q6 22 8 26" stroke="url(#jellyGrad)" stroke-width="1.5" fill="none" opacity="0.8"><animate attributeName="d" values="M8 18 Q6 22 8 26;M8 18 Q10 22 8 26;M8 18 Q6 22 8 26" dur="2s" repeatCount="indefinite"/></path><path d="M12 19 Q10 24 12 28" stroke="url(#jellyGrad)" stroke-width="1.5" fill="none" opacity="0.8"><animate attributeName="d" values="M12 19 Q10 24 12 28;M12 19 Q14 24 12 28;M12 19 Q10 24 12 28" dur="2.3s" repeatCount="indefinite"/></path><path d="M16 20 Q14 25 16 29" stroke="url(#jellyGrad)" stroke-width="1.5" fill="none" opacity="0.9"><animate attributeName="d" values="M16 20 Q14 25 16 29;M16 20 Q18 25 16 29;M16 20 Q14 25 16 29" dur="1.8s" repeatCount="indefinite"/></path><path d="M20 19 Q22 24 20 28" stroke="url(#jellyGrad)" stroke-width="1.5" fill="none" opacity="0.8"><animate attributeName="d" values="M20 19 Q22 24 20 28;M20 19 Q18 24 20 28;M20 19 Q22 24 20 28" dur="2.1s" repeatCount="indefinite"/></path><path d="M24 18 Q26 22 24 26" stroke="url(#jellyGrad)" stroke-width="1.5" fill="none" opacity="0.8"><animate attributeName="d" values="M24 18 Q26 22 24 26;M24 18 Q22 22 24 26;M24 18 Q26 22 24 26" dur="2.4s" repeatCount="indefinite"/></path></svg></div>BurritoScript</a><div class="nav-links"><a class="nav-link" href="#features">Features</a><a class="nav-link" href="#case-study">Case Study</a><a class="nav-link" href="#quickstart">Quickstart</a><a class="nav-link" href="https://github.com/burritoscript/burritoscript">GitHub</a></div><a class="nav-cta" href="#quickstart">Get Started</a></div></nav><section class="hero"><div class="container hero-content"><div class="hero-text"><div class="badge"><span class="badge-dot"></span>Open Source</div><h1>TypeScript with <span class="gradient">superpowers</span></h1><p class="hero-subtitle">An effect system that makes your code automatically debuggable, verifiable, and optimizable. Built for the age of AI-assisted development.</p><div class="cta-group"><a class="btn btn-primary" href="#quickstart"><span>⚡</span> Get Started</a><a class="btn btn-secondary" href="https://github.com/burritoscript/burritoscript"><span>★</span> Star on GitHub</a></div></div><div class="hero-code"><div class="code-header"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div><span class="code-title mono">The BurritoScript Pipeline</span></div><div class="code-tabs"><button class="code-tab active" data-panel="write">1. You Write</button><button class="code-tab" data-panel="see"><span class="arrow">→</span>2. Burrito Sees</button><button class="code-tab" data-panel="get"><span class="arrow">→</span>3. You Get</button></div><div class="code-panels"><div class="code-panel active" id="panel-write"><pre class="mono">// You write this
async function transfer(db, from, to, amt) {
  const balance = await db.getBalance(from)
  await db.debit(from, amt)
  await db.credit(to, amt)
  return { success: true }
}</pre></div><div class="code-panel" id="panel-see"><pre class="mono">// Burrito sees this
{ tag: "Op", interface: "db",
  method: "getBalance", args: ["from"],
  next: balance =&gt;
    { tag: "Op", method: "debit", ... }
}</pre></div><div class="code-panel" id="panel-get"><pre class="mono">// You get this
$ burrito race transfer.burrito.ts

⚠️  Race condition detected!
    db.getBalance → db.debit
    Another request can interleave

$ burrito run --provenance
balance = 500 ← db.getBalance("alice")</pre></div></div></div></div></section><section id="features" class="features"><div class="container"><div class="section-header reveal"><h2>Superpowers for your code</h2><p>BurritoScript's effect system gives you capabilities that are impossible in regular TypeScript.</p></div><div class="features-grid"><div class="feature-card reveal reveal-delay-1"><div class="feature-icon">🔍</div><h3>Provenance Debugging</h3><p>CLI commands trace any value to its origin. Perfect for AI agents debugging your code.</p><pre class="feature-code mono">$ pnpm burrito explain total

total = 1050
├─ expression: &quot;amount + fee&quot;
├─ source: payment.ts:15
└─ inputs:
    ├── amount = 1000 ← payload.amount
    └── fee = 50 ← db.getFee()</pre></div><div class="feature-card reveal reveal-delay-2"><div class="feature-icon">⚡</div><h3>Race Condition Detection</h3><p>Exhaustively enumerate all interleavings. Find concurrency bugs before production.</p><pre class="feature-code mono">enumerateInterleavings(
  [increment, increment],
  { initialState: { counter: 0 } }
)

// Found 2 buggy executions where
// counter === 1 instead of 2</pre></div><div class="feature-card reveal reveal-delay-3"><div class="feature-icon">🎯</div><h3>Zero-Overhead Reactivity</h3><p>Static analysis generates precise binding maps. O(1) DOM updates, no virtual DOM.</p><pre class="feature-code mono">// binding map (computed at build time)
['count']  → #counter.textContent
['theme']  → body.className

setState(['count'], 42)
// Only #counter updates. Nothing else.</pre></div><div class="feature-card reveal reveal-delay-4"><div class="feature-icon">🛡️</div><h3>Built for AI Agents</h3><p>Business logic and infrastructure stay separate. AI writes features, you verify safety.</p><pre class="feature-code mono">// AI writes clean async/await
async function updateEmail(db, id, email) {
  const user = await db.getUser(id)
  await db.saveUser({ ...user, email })
  return { success: true }
}

// You configure infrastructure separately
{ retries: 3, concurrency: &quot;serialized&quot; }</pre></div></div></div></section><section id="quickstart" class="quickstart"><div class="container quickstart-content"><div class="quickstart-text reveal"><h2>Up and running in<br/>60 seconds</h2><p>BurritoScript works with your existing TypeScript setup. No config required.</p><div class="quickstart-steps"><div class="step reveal reveal-delay-1"><div class="step-number">1</div><div class="step-text"><strong>Install</strong> the CLI with npm</div></div><div class="step reveal reveal-delay-2"><div class="step-number">2</div><div class="step-text"><strong>Write</strong> your logic in .burrito.ts files</div></div><div class="step reveal reveal-delay-3"><div class="step-number">3</div><div class="step-text"><strong>Run</strong> with superpowers enabled</div></div></div></div><div class="quickstart-terminal reveal reveal-delay-2"><div class="terminal-header"><div class="code-dot"></div><div class="code-dot"></div><div class="code-dot"></div><span class="code-title mono">Terminal</span></div><div class="terminal-body mono"><div class="terminal-line"><span class="comment"># Install</span></div><div class="terminal-line"><span class="prompt">$ </span><span class="cmd">npm install burritoscript</span></div><div class="terminal-line">&nbsp;</div><div class="terminal-line"><span class="comment"># Run your first effect</span></div><div class="terminal-line"><span class="prompt">$ </span><span class="cmd">npx burrito run my-app.burrito.ts</span></div><div class="terminal-line">&nbsp;</div><div class="terminal-line"><span class="comment"># Find concurrency bugs</span></div><div class="terminal-line"><span class="prompt">$ </span><span class="cmd">npx burrito interleave my-app.burrito.ts</span></div><div class="terminal-line">&nbsp;</div></div></div></div></section><section id="philosophy" class="philosophy"><div class="container"><div class="section-header reveal"><h2>Built on solid foundations</h2><p>BurritoScript separates what from how, so you can focus on business logic while the framework handles infrastructure.</p></div><div class="philosophy-content"><div class="philosophy-card reveal reveal-delay-1"><div class="philosophy-icon">📊</div><h3>Effects as Data</h3><p>Your async operations become tangible data structures that can be analyzed, traced, and optimized at build time.</p></div><div class="philosophy-card reveal reveal-delay-2"><div class="philosophy-icon">🔬</div><h3>Static Analysis</h3><p>Find race conditions, N+1 queries, and permission gaps before your code runs. Not with tests—with proofs.</p></div><div class="philosophy-card reveal reveal-delay-3"><div class="philosophy-icon">🤖</div><h3>AI-Native</h3><p>Business logic and infrastructure concerns stay separate, so AI agents can safely modify production code.</p></div></div></div></section><section id="case-study" class="case-study"><div class="container"><div class="section-header reveal"><h2>Case Study: Flash Sale Lottery</h2><p>How BurritoScript solves the impossible: 100 concurrent requests, 10 items, zero race conditions.</p></div><div class="case-study-content"><div class="case-problem reveal reveal-delay-1"><h3>The Problem</h3><p>A flash sale drops 10 limited-edition items. 100 users click "Buy" simultaneously. Traditional approaches fail:</p><ul><li><strong>Race conditions</strong> — Multiple users read "10 in stock" before any writes</li><li><strong>Overselling</strong> — 50 orders placed for 10 items</li><li><strong>Database overload</strong> — 100 reads + 100 writes in milliseconds</li><li><strong>Unfair</strong> — Fastest connection wins, not random chance</li></ul></div><div class="case-diagram reveal reveal-delay-2"><div class="diagram-container"><svg class="system-diagram" viewBox="0 0 600 400" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="reqGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#ff6b35"/><stop offset="100%" stop-color="#ff8f5a"/></linearGradient><linearGradient id="batchGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#00d4aa"/><stop offset="100%" stop-color="#00f0c0"/></linearGradient><linearGradient id="dbGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#7c3aed"/><stop offset="100%" stop-color="#a78bfa"/></linearGradient><filter id="glow"><feGaussianBlur stdDeviation="3" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g class="requests-group"><text x="60" y="30" fill="#6a6a7a" font-size="12" text-anchor="middle">100 Requests</text><circle cx="40" cy="70" r="12" fill="url(#reqGrad)" opacity="0.9"><animate attributeName="cy" values="70;200;70" dur="3s" repeatCount="indefinite"/></circle><circle cx="60" cy="90" r="12" fill="url(#reqGrad)" opacity="0.8"><animate attributeName="cy" values="90;200;90" dur="3s" begin="0.1s" repeatCount="indefinite"/></circle><circle cx="80" cy="75" r="12" fill="url(#reqGrad)" opacity="0.85"><animate attributeName="cy" values="75;200;75" dur="3s" begin="0.2s" repeatCount="indefinite"/></circle><circle cx="50" cy="110" r="12" fill="url(#reqGrad)" opacity="0.7"><animate attributeName="cy" values="110;200;110" dur="3s" begin="0.15s" repeatCount="indefinite"/></circle><circle cx="70" cy="130" r="12" fill="url(#reqGrad)" opacity="0.75"><animate attributeName="cy" values="130;200;130" dur="3s" begin="0.25s" repeatCount="indefinite"/></circle><text x="60" y="165" fill="#6a6a7a" font-size="10" text-anchor="middle">. . .</text></g><g class="arrow-to-batch"><path d="M100 200 L180 200" stroke="#ff6b35" stroke-width="2" stroke-dasharray="5,5"><animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" repeatCount="indefinite"/></path><polygon points="175,195 185,200 175,205" fill="#ff6b35"/></g><g class="batch-queue"><rect x="200" y="100" width="200" height="200" rx="16" fill="#12121a" stroke="url(#batchGrad)" stroke-width="2"/><text x="300" y="125" fill="#00d4aa" font-size="14" font-weight="600" text-anchor="middle">BatchQueue</text><rect x="215" y="140" width="170" height="50" rx="8" fill="#1a1a24" stroke="#2a2a3a"/><text x="300" y="158" fill="#6a6a7a" font-size="9" text-anchor="middle">QUEUE (100ms window)</text><text x="300" y="178" fill="#a0a0b0" font-size="11" text-anchor="middle">100 requests waiting...</text><rect x="215" y="200" width="170" height="80" rx="8" fill="#0a0a0f" stroke="#7c3aed"/><text x="300" y="218" fill="#7c3aed" font-size="9" text-anchor="middle">CONSUMER (runs on close)</text><g class="lottery"><circle cx="250" cy="248" r="8" fill="#ff6b35"><animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="275" cy="248" r="8" fill="#00d4aa"><animate attributeName="opacity" values="1;0.3;1" dur="1s" begin="0.2s" repeatCount="indefinite"/></circle><circle cx="300" cy="248" r="8" fill="#ff6b35"><animate attributeName="opacity" values="1;0.3;1" dur="1s" begin="0.4s" repeatCount="indefinite"/></circle><circle cx="325" cy="248" r="8" fill="#00d4aa"><animate attributeName="opacity" values="1;0.3;1" dur="1s" begin="0.6s" repeatCount="indefinite"/></circle><circle cx="350" cy="248" r="8" fill="#ff6b35"><animate attributeName="opacity" values="1;0.3;1" dur="1s" begin="0.8s" repeatCount="indefinite"/></circle><text x="300" y="273" fill="#6a6a7a" font-size="10" text-anchor="middle">→ lotteryResolver()</text></g></g><g class="arrow-to-db"><path d="M420 200 L480 200" stroke="#00d4aa" stroke-width="2" stroke-dasharray="5,5"><animate attributeName="stroke-dashoffset" values="10;0" dur="0.5s" repeatCount="indefinite"/></path><polygon points="475,195 485,200 475,205" fill="#00d4aa"/></g><g class="database"><ellipse cx="540" cy="160" rx="40" ry="15" fill="url(#dbGrad)"/><rect x="500" y="160" width="80" height="60" fill="url(#dbGrad)"/><ellipse cx="540" cy="220" rx="40" ry="15" fill="url(#dbGrad)"/><ellipse cx="540" cy="160" rx="40" ry="15" fill="#1a1a24" opacity="0.3"/><text x="540" y="195" fill="#fff" font-size="12" font-weight="600" text-anchor="middle">DB</text><text x="540" y="250" fill="#6a6a7a" font-size="10" text-anchor="middle">1 atomic write</text></g><g class="results"><text x="300" y="330" fill="#a0a0b0" font-size="12" text-anchor="middle">Results</text><g class="winners"><circle cx="220" cy="360" r="10" fill="#00d4aa"/><text x="220" y="364" fill="#0a0a0f" font-size="10" text-anchor="middle">✓</text><circle cx="245" cy="360" r="10" fill="#00d4aa"/><text x="245" y="364" fill="#0a0a0f" font-size="10" text-anchor="middle">✓</text><circle cx="270" cy="360" r="10" fill="#00d4aa"/><text x="270" y="364" fill="#0a0a0f" font-size="10" text-anchor="middle">✓</text><text x="295" y="364" fill="#6a6a7a" font-size="10">...</text><text x="250" y="390" fill="#00d4aa" font-size="10" text-anchor="middle">10 winners</text></g><g class="losers"><circle cx="340" cy="360" r="10" fill="#3a3a4a"/><text x="340" y="364" fill="#6a6a7a" font-size="10" text-anchor="middle">✗</text><circle cx="365" cy="360" r="10" fill="#3a3a4a"/><text x="365" y="364" fill="#6a6a7a" font-size="10" text-anchor="middle">✗</text><circle cx="390" cy="360" r="10" fill="#3a3a4a"/><text x="390" y="364" fill="#6a6a7a" font-size="10" text-anchor="middle">✗</text><text x="415" y="364" fill="#6a6a7a" font-size="10">...</text><text x="370" y="390" fill="#6a6a7a" font-size="10" text-anchor="middle">90 fair rejections</text></g></g></svg></div></div><div class="case-how-it-works reveal reveal-delay-3"><h3>How It Works: Effect Suspension</h3><p class="how-intro">BurritoService runs a <strong>queue consumer</strong> that collects requests within a time window. When the window closes, your <strong>resolver</strong> runs once with all queued requests. Each original request then <em>resumes</em> with its individual result from the resolver&apos;s array.</p><div class="how-steps"><div class="how-step"><div class="how-step-num">1</div><div class="how-step-content"><strong>You write clean async/await</strong><p>Each HTTP request handler is just normal BurritoScript</p><pre class="mono">// purchase.burrito.ts
async function purchase(inventory: Inventory, userId: string) {
  return await inventory.purchase({ userId, qty: 1 })
}</pre></div></div><div class="how-step"><div class="how-step-num">2</div><div class="how-step-content"><strong>Requests enter the queue (100ms window)</strong><p>A queue consumer collects all requests that arrive within the batch window</p><pre class="mono">// BatchQueue config: windowMs = 100
//
// t=0ms:   user-001 arrives → queued
// t=12ms:  user-002 arrives → queued
// t=47ms:  user-003 arrives → queued
// ...99 more arrive...
// t=100ms: window closes, consumer wakes up</pre></div></div><div class="how-step"><div class="how-step-num">3</div><div class="how-step-content"><strong>Queue consumer invokes your resolver</strong><p>When the window closes, the consumer calls your resolver with ALL queued requests</p><pre class="mono">// Consumer calls your resolver with the batch:
await lotteryResolver([
  { userId: "user-001", qty: 1 },
  { userId: "user-002", qty: 1 },
  // ... 98 more
])
// Your resolver returns: [result₁, result₂, ... result₁₀₀]</pre></div></div><div class="how-step"><div class="how-step-num">4</div><div class="how-step-content"><strong>Each await resumes with its result</strong><p>Request 1 gets result[0], Request 2 gets result[1], etc.</p><pre class="mono">// user-001: await returns { success: true, orderId: "..." }
// user-047: await returns { success: false, message: "Sold out" }
// Each HTTP request gets its own response!</pre></div></div></div></div><div class="case-solution reveal reveal-delay-4"><h3>The Result</h3><div class="solution-grid"><div class="solution-item"><div class="solution-icon">📦</div><strong>100 → 1</strong><p>100 requests batched into 1 resolver call</p></div><div class="solution-item"><div class="solution-icon">🎲</div><strong>Fair Lottery</strong><p>Random selection, not fastest-connection-wins</p></div><div class="solution-item"><div class="solution-icon">⚡</div><strong>1 DB Write</strong><p>Single atomic operation, zero race conditions</p></div><div class="solution-item"><div class="solution-icon">✨</div><strong>100 Responses</strong><p>Each user gets their individual answer</p></div></div></div></div></div></section><section class="cta"><div class="container cta-content reveal"><h2>Ready to level up?</h2><p>Join developers building more reliable software with less effort. BurritoScript is open source and free forever.</p><div class="cta-group" style="justify-content: center;"><a class="btn btn-primary" href="https://github.com/burritoscript/burritoscript"><span>→</span> View on GitHub</a><a class="btn btn-secondary" href="#features"><span>📖</span> Read the Docs</a></div></div></section><footer><div class="container"><p>BurritoScript is <a href="https://github.com/burritoscript/burritoscript">open source</a> under the MIT license.</p></div></footer><script>// Scroll reveal animation
const observerOptions = { threshold: 0.1, rootMargin: "0px 0px -50px 0px" };
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
    }
  });
}, observerOptions);
document.querySelectorAll(".reveal").forEach(el => observer.observe(el));

// Nav scroll effect
window.addEventListener("scroll", () => {
  const nav = document.querySelector("nav");
  if (window.scrollY > 50) {
    nav.classList.add("scrolled");
  } else {
    nav.classList.remove("scrolled");
  }
});

// Code tabs with auto-cycling
const tabs = document.querySelectorAll(".code-tab");
const panels = document.querySelectorAll(".code-panel");
const panelIds = ["write", "see", "get"];
let currentPanel = 0;
let autoCycle;

function showPanel(index) {
  tabs.forEach(t => t.classList.remove("active"));
  panels.forEach(p => p.classList.remove("active"));
  tabs[index].classList.add("active");
  panels[index].classList.add("active");
  currentPanel = index;
}

function startAutoCycle() {
  autoCycle = setInterval(() => {
    showPanel((currentPanel + 1) % 3);
  }, 3000);
}

tabs.forEach((tab, i) => {
  tab.addEventListener("click", () => {
    clearInterval(autoCycle);
    showPanel(i);
    startAutoCycle();
  });
});

// Start auto-cycling after 2s
setTimeout(startAutoCycle, 2000);</script></body></html>
No results found