/* ComFoo recipe film: white surroundings, a warm stage and blueberry accents. */
.oat-motion {
  --oat-blueberry: #92acc5;
  min-width: 0;
  margin-block: 38px 0;
  background: var(--paper, #fff);
  color: var(--ink);
}


/* The ingredient list remains usable independently of playback. */
.oat-motion-ingredients {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.05fr 1.1fr 1fr;
  gap: 12px;
  margin: 24px 0 0;
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--line);
  list-style: none;
}
.oat-motion-ingredients li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 8px 4px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.oat-motion-ingredients li.is-active::after { content: ''; position: absolute; inset: auto 18px 0; height: 3px; border-radius: 2px; background: var(--oat-blueberry); }
.oat-ingredient-art { display: block; flex: none; width: 100%; height: 136px; overflow: visible; }
.oat-ingredient-copy { display: block; max-width: 174px; margin-top: 8px; }
.oat-motion-ingredients strong { display: block; margin-bottom: 5px; font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: -.02em; }
.oat-ingredient-copy > span { display: block; color: var(--muted); }
.oat-ingredient-optional { position: absolute; inset: 6px 8px auto; color: var(--chocolate); font-size: 12px; font-weight: 700; line-height: 1.4; }
.oat-motion-ingredients .is-optional .oat-ingredient-copy > span { color: var(--chocolate); }
.oat-ingredient-shadow { fill: var(--ink); opacity: .045; }
.oat-ingredient-tool, .oat-ingredient-glass { fill: var(--paper, #fff); stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oat-ingredient-glass { fill-opacity: .55; }
.oat-ingredient-fill { fill: var(--soft); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.oat-ingredient-line { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.oat-ingredient-powder-dot { fill: var(--muted); opacity: .6; }
.oat-ingredient-oats-fill, .oat-ingredient-yogurt-band { fill: var(--soft); }
.oat-ingredient-oat { fill: var(--muted); opacity: .55; }
.oat-ingredient-milk { fill: var(--soft); fill-opacity: .9; }
.oat-ingredient-highlight { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.oat-ingredient-yogurt { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.oat-ingredient-yogurt-swirl { fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.oat-ingredient-foil { fill: var(--soft); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.oat-ingredient-leaf { fill: #89947b; stroke: #68745e; stroke-width: 1; }
.oat-ingredient-leaf-vein { fill: none; stroke: #e5e9dd; stroke-width: 1.2; stroke-linecap: round; }
.oat-ingredient-berry { fill: var(--oat-blueberry); stroke: #657e98; stroke-width: 1.3; }
.oat-ingredient-berry-1 { fill: #829bb5; }
.oat-ingredient-berry-2 { fill: #a1b8ce; }
.oat-ingredient-berry-bloom { fill: none; stroke: #dce7ef; stroke-width: 2.4; stroke-linecap: round; opacity: .7; }
.oat-ingredient-berry-crown { fill: #61788f; stroke: #c3d2de; stroke-width: .8; }

.oat-motion-body { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 36px; padding: 28px 0 0; }
.oat-motion-figure {
  min-width: 0;
  margin: 0;
  padding: 4px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(ellipse at 44% 27%, #faf7f0 0%, var(--soft) 66%, var(--beige) 100%);
}
.oat-motion-art { display: block; width: 100%; max-width: 680px; height: auto; overflow: hidden; color: var(--ink); }
.oat-motion-progress { height: 2px; margin: 0 22px 14px; overflow: hidden; background: #d8cabb; }
.oat-motion-progress > span { display: block; width: 100%; height: 100%; background: var(--ink); transform-origin: left center; }
.oat-motion-caption { min-height: 118px; padding: 0 20px; text-align: center; }
.oat-motion-caption strong { display: block; font-size: 21px; line-height: 1.3; letter-spacing: -.02em; }
.oat-motion-caption span { display: block; max-width: 330px; margin: 8px auto 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.oat-motion-measure { min-height: 3.1em; margin: 0 20px 12px; font-size: 13px; font-weight: 700; line-height: 1.55; text-align: center; }
.oat-motion-product { display: flex; align-items: center; gap: 10px; min-height: 90px; padding: 8px 16px 8px 12px; border-top: 1px solid var(--line); background: var(--paper, #fff); }
.oat-motion-product > img:first-child { flex: none; width: 126px; height: 84px; object-fit: contain; }
.oat-motion-product p { min-width: 0; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.oat-motion-product p > span { display: block; color: var(--ink); font-size: 14px; font-weight: 700; }
.oat-motion-product .oat-motion-product-mark { flex: none; width: 32px; height: 32px; margin-left: auto; border-radius: 2px; }

.oat-motion-steps { display: grid; gap: 7px; margin: 24px 0; padding: 0; list-style: none; }
.oat-motion-steps li { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 60px; margin: 0; padding: 10px 12px; border: 1px solid transparent; border-radius: 6px; }
.oat-motion-steps button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; text-align: center; cursor: pointer; }
.oat-motion-step-copy { padding-top: 5px; }
.oat-motion-step-copy strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.oat-motion-step-copy > span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.oat-motion-steps li.is-optional { border-color: var(--line); border-style: dashed; }
.oat-motion-number { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 1px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; font-variant-numeric: tabular-nums; }
.oat-motion[data-oat-ready] .oat-motion-static-number { display: none; }
.oat-motion[data-oat-ready] .oat-motion-steps li.is-active { border-color: var(--line); background: var(--soft); }
.oat-motion[data-oat-ready] .oat-motion-steps [aria-current=step] { border-color: var(--ink); background: var(--ink); color: var(--paper, #fff); }
.oat-motion-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 2px 0 12px; }
.oat-motion [hidden] { display: none !important; }
.oat-motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 120px; min-height: 44px; padding: 9px 15px; border: 1px solid #8a7568; border-radius: 5px; background: var(--paper, #fff); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; cursor: pointer; }
.oat-motion-toggle svg { flex: none; fill: currentColor; }
.oat-motion-position { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.oat-motion button:focus-visible { outline: 3px solid var(--focus, var(--ink)); outline-offset: 3px; }
.oat-motion-steps button:not(:disabled):hover, .oat-motion-toggle:hover { border-color: var(--ink); }

/* Native materials keep the illustration light and independent of libraries. */
.oat-art-ground { fill: var(--ink); opacity: .035; }
.oat-art-contact { fill: var(--ink); opacity: .1; }
.oat-art-table, .oat-art-line, .oat-art-tool-line, .oat-art-glass-line { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oat-art-table { stroke: var(--line); }
.oat-art-glass { fill: url(#oat-motion-glass); }
.oat-art-mix { fill: url(#oat-motion-cream); }
.oat-art-mix-surface { fill: none; stroke: #fff8e8; stroke-width: 3; stroke-linecap: round; }
.oat-art-powder { fill: #e7d6bb; }
.oat-art-mix-line { fill: none; stroke: #a58a6d; stroke-width: 1.4; stroke-linecap: round; opacity: .28; }
.oat-art-oat { fill: #a58a6d; opacity: .6; }
.oat-art-speckle { fill: #7b6653; opacity: .24; }
.oat-art-ripple { fill: none; stroke: #fff9ed; stroke-width: 1.8; stroke-linecap: round; }
.oat-art-highlight { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: .8; }
.oat-art-glass-edge { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; opacity: .75; }
.oat-art-berry { fill: var(--oat-blueberry); stroke: #657e98; stroke-width: 1.2; }
.oat-art-berry-top { fill: none; stroke: #eef5fa; stroke-width: .9; opacity: .9; }
.oat-art-leaf { fill: #89947b; }
.oat-art-lid { fill: url(#oat-motion-lid); }
.oat-art-lid-line { fill: none; stroke: #f0e7db; stroke-width: 1; opacity: .42; }
.oat-art-tool { fill: url(#oat-motion-tool); stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.oat-art-vessel-highlight { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.oat-art-falling { fill: #c0a581; }
.oat-art-milk, .oat-art-yogurt { fill: url(#oat-motion-milk); }
.oat-art-yogurt-swirl { fill: none; stroke: #d9cdbb; stroke-width: 1.6; stroke-linecap: round; }
.oat-art-pour, .oat-art-yogurt-pour { fill: none; stroke: #fffef5; stroke-width: 9; stroke-linecap: round; opacity: .95; }
.oat-art-yogurt-pour { stroke-width: 14; }
.oat-art-spoon { fill: #d6cbbd; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; }
.oat-art-sun { fill: #e4d4bd; stroke: var(--ink); stroke-width: 1.7; }
.oat-art-clock { fill: #fffaf2; stroke: #8a7568; stroke-width: 1.5; }
.oat-art-clock-tick { fill: none; stroke: #b29d87; stroke-width: 1.5; stroke-linecap: round; }
.oat-art-clock-hand { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.oat-art-clock-center { fill: var(--ink); }
.oat-art-moon { fill: var(--oat-blueberry); stroke: #657e98; stroke-width: 1.4; stroke-linejoin: round; }
.oat-art-star { fill: none; stroke: #657e98; stroke-width: 1.6; stroke-linecap: round; }

@media (max-width: 1000px) {
  .oat-motion-ingredients { gap: 6px; }
  .oat-ingredient-art { height: 120px; }
  .oat-motion-ingredients strong { font-size: 15px; }
  .oat-motion-ingredients li { font-size: 12px; }
  .oat-motion-body { grid-template-columns: 1fr 1.1fr; gap: 16px; }
  .oat-motion-steps li { gap: 9px; padding: 10px; }
  .oat-motion-product { gap: 7px; padding-inline: 8px; }
  .oat-motion-product > img:first-child { width: 98px; height: 72px; }
  .oat-motion-product .oat-motion-product-mark { width: 26px; height: 26px; }
}

@media (max-width: 767px) {
  .oat-motion { margin-block: 28px 0; }
  .oat-motion-ingredients { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; padding-block: 8px 24px; }
  .oat-motion-ingredients li { padding-inline: 4px; font-size: 13px; }
  .oat-motion-ingredients li:first-child { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1/-1; align-items: center; gap: 14px; text-align: left; }
  .oat-motion-ingredients li:first-child .oat-ingredient-copy { margin: 0; }
  .oat-ingredient-art { height: 112px; }
  .oat-ingredient-art-0 { height: 126px; }
  .oat-ingredient-copy { max-width: 165px; margin-top: 1px; }
  .oat-motion-ingredients strong { font-size: 16px; }
  .oat-motion-body { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 20px 0 0; }
  .oat-motion-figure { width: 100%; max-width: 550px; margin-inline: auto; }
  .oat-motion-art { margin-top: -6px; }
  .oat-motion-caption { min-height: 144px; padding-inline: 12px; }
  .oat-motion-caption strong { font-size: 21px; }
  .oat-motion-measure { margin-bottom: 12px; }
  .oat-motion-product { gap: 9px; padding-inline: 8px; }
  .oat-motion-product > img:first-child { width: 112px; height: 80px; }
  .oat-motion-product .oat-motion-product-mark { width: 28px; height: 28px; }
  .oat-motion-product p > span { font-size: 13px; }
  .oat-motion-steps { gap: 6px; margin: 16px 0; }
  .oat-motion-steps li { gap: 11px; padding: 11px 8px; }
  .oat-motion-step-copy > span { font-size: 13px; }
  .oat-motion-number { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .oat-motion * { scroll-behavior: auto; }
  .oat-motion-ingredients li { transition: none; }
}