/* The hero product animation: a simplified Mesa window. */
.mk { container-type: inline-size; width: 100%; font-family: var(--font-sans); color: var(--ink); }
.mk__win { position: relative; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.mk__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.mk__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-stone); }
.mk__name { margin-left: 8px; color: var(--ink-secondary); }
.mk__body { display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr); min-height: 402px; }
.mk__chat { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.mk__msg { align-self: flex-end; max-width: 88%; margin: 0; padding: 10px 14px; border-radius: 12px 12px 4px 12px; background: var(--tint-sky); color: var(--ink); }
.mk__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mk__step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-cloud); color: var(--ink-secondary); }
.mk__step svg, .mk__file svg { flex: none; }
.mk__check { margin-left: auto; color: var(--success); display: inline-flex; }
.mk__result { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.mk__file { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--ink); }
.mk__fname { font-weight: 600; }
.mk__actions { display: flex; gap: 8px; }
.mk__audit { display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 52px; border-left: 1px solid var(--hairline); background: var(--canvas); }
.mk__audit-title { margin: 0; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.mk__warden { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--ink-secondary); }
.mk__log { position: relative; list-style: none; margin: 0; padding: 0 0 0 14px; display: grid; gap: 12px; }
.mk__thread { position: absolute; left: 0; top: 2px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--brand-mahogany);
  transform-origin: top; transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-settle); }
.mk__thread.on { transform: scaleY(1); }
.mk__entry { display: grid; gap: 2px; }
.mk__time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mk__what { color: var(--ink); font-weight: 600; }
.mk__why { color: var(--ink-muted); }
/* Motion. Items settle in; the window rises once when it scrolls into view;
   at the end of each loop the content fades out, resets while hidden, and fades back in. */
.mk-in { opacity: 0; transform: translateY(12px) scale(0.985); transition: opacity 600ms var(--ease-settle), transform 800ms var(--ease-settle); }
.mk-in.on { opacity: 1; transform: none; }
.mk-slide { opacity: 0; transform: translateX(16px); transition: opacity 600ms var(--ease-settle), transform 800ms var(--ease-settle); }
.mk-slide.on { opacity: 1; transform: none; }
.mk-enter { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-settle), transform var(--dur-slower) var(--ease-settle); }
.mk-enter.on { opacity: 1; transform: none; }
.mk-stage { transition: opacity 500ms var(--ease-standard); }
.mk-stage.is-out { opacity: 0; transition: opacity 600ms var(--ease-exit); }
.mk-stage.is-reset { opacity: 0; transition: none; }
.mk-stage.is-reset *, .mk-stage.is-reset *::before, .mk-stage.is-reset *::after { transition: none !important; }
.mk__pause { position: absolute; right: 6px; bottom: 6px; min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-muted); cursor: pointer; font: 500 12px/16px var(--font-sans); }
.mk__pause:hover { background: var(--surface-cloud); color: var(--ink); }
@container (max-width: 540px) {
  .mk__body { grid-template-columns: 1fr; min-height: 0; }
  .mk__audit { border-left: 0; border-top: 1px solid var(--hairline); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-in, .mk-slide, .mk__thread, .mk-enter, .mk-stage { transition: none; }
}