@font-face {
  font-family: "PetMe64";
  src: url("../../assets/fonts/PetMe64.ttf") format("truetype");
  font-display: block;
}

:root {
  --paper: #f6f1e7;
  --ink: #1d1a15;
  --ink-2: #463f35;
  --muted: #776e61;
  --rule: #d8ccb7;
  --accent: #8e2f1f;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.55; }
a { color: var(--accent); }
.ribbon { font-family: var(--sans); font-size: .78rem; text-align: center; padding: 7px 12px; background: var(--ink); color: #f3e9d6; }
.ribbon strong { color: #ffcf9c; text-transform: uppercase; letter-spacing: .12em; margin-right: .3em; }
.wrap { max-width: 980px; margin: 0 auto; padding: 28px clamp(14px, 4vw, 32px) 60px; }
.back { font-family: var(--sans); font-size: .9rem; display: inline-block; padding: 10px 0; }
h1 { font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1; margin: 10px 0 12px; letter-spacing: -.01em; }
h1 span { display: block; font-size: .42em; color: var(--muted); font-style: italic; margin-top: 8px; letter-spacing: 0; }
.lede { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--ink-2); max-width: 44rem; margin: 0 0 22px; }
.stage { background: #f3ede1; border: 1px solid var(--rule); border-radius: 10px; padding: clamp(10px, 3vw, 28px) clamp(6px, 2vw, 20px) 22px; }
.notes { font-family: var(--sans); font-size: .9rem; color: var(--ink-2); max-width: 46rem; margin: 22px auto 0; line-height: 1.6; }
.notes p { margin: 0 0 10px; }
.notes b { color: var(--ink); }
.credit { font-family: var(--sans); font-size: .8rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 22px; }

/* The handful of Tailwind utilities the June 2026 component uses */
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; }
.relative { position: relative; } .absolute { position: absolute; } .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.block { display: block; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; }
.whitespace-pre { white-space: pre; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.font-mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.m-0 { margin: 0; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .-mt-1 { margin-top: -.25rem; }
.p-2\.5 { padding: .625rem; } .p-3 { padding: .75rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; }
.rounded-\[22px\] { border-radius: 22px; } .rounded-\[16px\] { border-radius: 16px; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: .5rem; }
.max-w-full { max-width: 100%; } .max-w-\[480px\] { max-width: 480px; } .max-w-\[44ch\] { max-width: 44ch; }
.w-full { width: 100%; } .w-\[78\%\] { width: 78%; } .w-px { width: 1px; } .h-px { height: 1px; }
.opacity-0 { opacity: 0; } .pointer-events-none { pointer-events: none; } .select-none { user-select: none; -webkit-user-select: none; }
.text-xs { font-size: .75rem; line-height: 1rem; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .text-center { text-align: center; }
.text-white { color: #fff; } .text-amber-400 { color: #fbbf24; } .text-stone-400 { color: #a8a29e; } .text-stone-500 { color: #78716c; }
.bg-stone-900\/90 { background-color: rgba(28, 25, 23, .9); }
.bg-\[\#2e2c9b\] { background-color: #2e2c9b; } .border { border-width: 1px; border-style: solid; } .border-\[\#5a57d6\] { border-color: #5a57d6; }
.hover\:bg-\[\#3d3ac0\]:hover { background-color: #3d3ac0; }
.transition-colors { transition: color .15s, background-color .15s, border-color .15s; } .transition-\[filter\] { transition: filter .15s; } .duration-75 { transition-duration: 75ms; }
.group:hover .group-hover\:brightness-110 { filter: brightness(1.1); } .group:hover .group-hover\:text-amber-600 { color: #d97706; }
.animate-pulse { animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes pulse { 50% { opacity: .5; } }
@media (min-width: 768px) { .md\:p-4 { padding: 1rem; } .md\:p-5 { padding: 1.25rem; } .md\:text-sm { font-size: .875rem; line-height: 1.25rem; } }
button { font: inherit; cursor: pointer; }
@media (max-width: 560px) {
  .flex.items-center.gap-4.mt-4 { flex-direction: column; align-items: stretch; text-align: center; }
  .wrap { padding-left: 10px; padding-right: 10px; }
  .stage { padding-left: 4px; padding-right: 4px; border-radius: 6px; }
  /* fit all 40 columns: wrap, stage, monitor and tube padding total about 72px */
  #old-west pre { font-size: calc((100vw - 72px) / 40) !important; }
}