/* Mess → Lanes animation component. Self-contained; no external assets. */
.mtl {
  --mtl-bg: #1f9e8f;          /* teal */
  --mtl-bg-deep: #1a8a7d;     /* subtle vignette */
  --mtl-line: #fbf7ef;        /* off-white */
  --mtl-soft: rgba(251, 247, 239, 0.72);
  --mtl-faint: rgba(251, 247, 239, 0.62);
  --mtl-accent: #f6b73c;      /* marigold */
  --mtl-font: inherit;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 0 28px;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 30% 40%, var(--mtl-bg) 55%, var(--mtl-bg-deep) 100%);
  color: var(--mtl-line);
  font-family: var(--mtl-font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.mtl *, .mtl *::before, .mtl *::after { box-sizing: border-box; }
.mtl__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mtl__svg text { font-family: var(--mtl-font); }
.mtl__caption { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; fill: var(--mtl-soft); }
.mtl__step { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; fill: var(--mtl-line); }
.mtl__stepword { font-size: 16px; font-style: italic; font-weight: 400; fill: var(--mtl-soft); }
.mtl__worry { font-size: 16px; font-style: italic; fill: var(--mtl-faint); }
.mtl__lane-name { font-size: 18px; font-weight: 700; fill: var(--mtl-line); }
.mtl__lane-bot { font-size: 16px; font-weight: 400; fill: var(--mtl-soft); }
.mtl__closing { margin: 0; padding: 0 24px; text-align: center; }
.mtl__headline { display: block; font-size: clamp(22px, 3.2vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.mtl__subline { display: block; margin-top: 8px; font-size: 16px; line-height: 1.4; color: var(--mtl-soft); }
.mtl__replay {
  position: absolute; right: 14px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 12px;
  border: 1.5px solid rgba(251, 247, 239, 0.45); border-radius: 999px;
  background: transparent; color: var(--mtl-line);
  font: inherit; font-size: 14px; line-height: 1; cursor: pointer;
  opacity: 0.8; transition: opacity .2s, background-color .2s;
}
.mtl__replay[hidden] { display: none; }
.mtl__replay:hover { opacity: 1; background: rgba(251, 247, 239, 0.1); }
.mtl__replay:focus-visible { outline: 3px solid var(--mtl-accent); outline-offset: 2px; opacity: 1; }
.mtl__replay svg { width: 14px; height: 14px; }
@media (max-width: 639px) {
  .mtl { border-radius: 16px; padding-bottom: 76px; }
  .mtl__replay { right: 50%; transform: translateX(50%); bottom: 14px; }
}