:root {
  --broth: #082226;
  --teak: #12373c;
  --steam: #f6efe3;
  --foam: #fffaf2;
  --turmeric: #e2b13c;
  --chili: #c94b2d;
  --mint: #73cbb8;
  --soy: #2c2118;
  --muted: #6b5748;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--steam);
  color: var(--soy);
  font-family: "Segoe UI", Trebuchet MS, sans-serif;
}
.mark {
  font-family: Trebuchet MS, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.mist {
  background-image:
    radial-gradient(ellipse at 12% 0%, rgba(115, 203, 184, 0.22), transparent 46%),
    radial-gradient(ellipse at 88% 20%, rgba(226, 177, 60, 0.16), transparent 42%);
}
.ticket {
  background: var(--foam);
  border: 2px dashed #1a454b;
  border-radius: 22px;
}
.bowl {
  border-radius: 2rem;
  box-shadow: 0 18px 40px rgba(8, 34, 38, 0.16);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.95rem 1.4rem;
  font-weight: 800;
}
img { display: block; max-width: 100%; }
details {
  background: var(--foam);
  border: 2px dashed #1a454b;
  border-radius: 18px;
  padding: 1.1rem 1.2rem;
  color: var(--soy);
}
summary { cursor: pointer; font-weight: 800; }
.perforation {
  background-image: radial-gradient(circle at 0 50%, transparent 10px, var(--foam) 11px),
    radial-gradient(circle at 100% 50%, transparent 10px, var(--foam) 11px);
  background-size: 100% 28px;
  background-repeat: repeat-y;
}
@media (max-width: 640px) {
  .mark { line-height: 0.95; }
}