/* V03: small capsule in a 4:3 plate, with room for animated callouts. */
.formula-media,
.prototype .formula-media {
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.capsule-study {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.stage-label {
  display: grid;
  gap: 5px;
  max-width: 34%;
  line-height: 1.3;
  color: #554335;
}
.stage-label small {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .13em;
  color: #796957;
}
.stage-label strong {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 600;
  letter-spacing: -.01em;
}
.stage-label span {
  max-width: 180px;
  font-size: clamp(10px, .85vw, 12px);
  line-height: 1.35;
  color: #766450;
}
.label-blend { left: 67%; top: 15.5%; max-width: 27%; }
.label-shell { left: 8.5%; top: 71%; max-width: 29%; }
.motion-leader {
  fill: none;
  stroke: #ef4b2c;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.motion-point { fill: #ef4b2c; }
.study-label { top: 22px; left: 24px; color:#8a7662; }
.study-control { bottom: 18px; right: 22px; }
.formula-link { margin-top: 30px; }
.capsule-render { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.capsule-capture-frame { display:none; position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.using-render .capsule-render { display: block; }
.using-render.capture-mode .capsule-render { display:none; }
.using-render.capture-mode .capsule-capture-frame { display:block; }
.using-render .capsule-composition { visibility: hidden; }
.using-render .capsule-study { z-index: 1; }
.using-render .stage-label,.using-render .study-label,.using-render .study-control { z-index: 2; }
.render-switch { display:flex; align-items:center; gap:20px; margin-top:22px; font-size:12px; color:var(--muted); }
.render-switch button { padding:9px 14px; border:1px solid var(--line); border-radius:6px; background:var(--paper); font-size:13px; }
@media(max-width:600px){.render-switch{align-items:start;flex-direction:column;gap:10px}}
@media(max-width:600px) {
  .stage-label { gap: 4px; max-width: 37%; }
  .stage-label small { font-size: 7px; letter-spacing: .1em; }
  .stage-label strong { font-size: 11px; }
  .stage-label span { display:none; }
  .label-blend { left: 65%; top: 15%; max-width:31%; }
  .label-shell { left: 7%; top: 72%; max-width:32%; }
  .study-label { top: 14px; left: 16px; font-size: 8px; }
  .study-control { bottom: 12px; right: 15px; font-size: 10px; }
}