/* The first source starts production. All animation stays inside the product window. */
@media (min-width: 1101px) {
  .story-hero { padding-top: 64px; }
}
.import-demo .product-topbar { min-height: 50px; padding-block: 11px; }
.import-demo .product-window-body { padding: 18px 21px; }
.import-demo .product-heading small { margin-bottom: 3px; font-size: 8px; }
.import-demo .product-heading h2 { font-size: 17px; }
.import-source-picker { display: flex; gap: 7px; margin-top: 13px; }
.import-source-picker button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 29px; padding: 5px 9px; border: 1px solid #d8dee8; border-radius: 4px; color: #667085; background: #fff; font-size: 10px; font-weight: 500; line-height: 1.5; transition: color .18s, background-color .18s, border-color .18s; }
.import-source-picker button:hover { border-color: #a9c3ef; color: #1d4ed8; }
.import-source-picker button[aria-pressed='true'] { border-color: #b5ccf6; color: #1d4ed8; background: #edf4ff; }
.import-source-picker .icon { width: 14px; height: 14px; }
.import-transfer { position: relative; display: flex; align-items: center; gap: 10px; overflow: hidden; min-height: 47px; margin-top: 10px; padding: 8px 11px; border: 1px solid #d8e3f3; border-radius: 5px; background: #f8fafd; }
.import-file-symbol { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 29px; border: 1px solid #c9daf6; border-radius: 4px; color: #2563eb; background: #fff; }
.import-file-symbol .icon { width: 16px; height: 16px; }
.import-transfer-copy { flex: 1; min-width: 0; }
.import-transfer-copy strong { display: block; overflow: hidden; color: #344054; font-size: 11px; font-weight: 550; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.import-transfer-copy span { display: block; margin-top: 2px; color: #667085; font-size: 9px; line-height: 1.4; }
.import-transfer-indicator { position: relative; display: grid; place-items: center; flex: 0 0 18px; width: 18px; height: 18px; color: #25805b; }
.import-transfer-indicator .icon { width: 15px; height: 15px; opacity: 0; }
.import-transfer-indicator::before { content: ''; position: absolute; inset: 2px; border: 1.5px solid #d7e5fc; border-top-color: #2563eb; border-radius: 50%; opacity: 0; }
.import-demo:is([data-import-stage='upload'], [data-import-stage='reading']) .import-transfer-indicator::before { opacity: 1; animation: import-spin .95s linear infinite; }
.import-demo:is([data-import-stage='producing'], [data-import-stage='complete']) .import-transfer-indicator .icon { opacity: 1; }
.import-demo[data-import-stage='upload'] .import-file-symbol { animation: import-file-arrive .7s cubic-bezier(.2,.7,.3,1) both; }
.import-transfer::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #88aef5; }
.import-demo[data-import-stage='upload'] .import-transfer::after { animation: import-upload 1.25s ease-out both; }
.import-demo[data-import-stage='reading'] .import-transfer::after { width: 100%; opacity: .6; }
.import-flow-track { display: flex; align-items: center; gap: 0; margin-top: 11px; }
.import-flow-track > span { position: relative; display: flex; flex: 1; align-items: center; gap: 6px; color: #8b97a8; font-size: 9px; line-height: 1.5; }
.import-flow-track > span:last-child { flex: 0 0 auto; }
.import-flow-track > span:not(:last-child)::after { content: ''; flex: 1; min-width: 8px; height: 1px; margin: 0 9px 0 3px; background: #e1e6ee; }
.import-flow-track i { display: grid; place-items: center; flex: 0 0 19px; width: 19px; height: 19px; border: 1px solid #dce3ed; border-radius: 50%; font-size: 8px; font-style: normal; line-height: 1; }
.import-flow-track > [data-step-state='active'] { color: #2563eb; }
.import-flow-track > [data-step-state='active'] i { border-color: #afc9f7; background: #edf4ff; }
.import-flow-track > [data-step-state='done'] { color: #536174; }
.import-flow-track > [data-step-state='done'] i { border-color: #bcd3f5; color: #2563eb; background: #edf4ff; }
.import-flow-track > [data-step-state='done']::after { background: #bbd1f5; }
.import-demo .progress-meta { gap: 17px; min-height: 40px; margin-top: 13px; }
.import-demo .progress-meta strong { font-size: 12px; line-height: 1.6; }
.import-demo .progress-meta > span { font-size: 9px; line-height: 1.6; }
.import-demo .dossier-list { margin-top: 12px; }
.import-demo .dossier-row { min-height: 43px; padding-block: 8px; font-size: 11px; transition: color .2s, background-color .2s; }
.import-demo .dossier-code { min-height: 25px; font-size: 9px; transition: color .2s, background-color .2s, border-color .2s; }
.import-demo .dossier-row .demo-pill { min-width: 59px; padding: 3px 6px; font-size: 9px; }
.import-demo [data-import-row-state='waiting'] { color: #8b97a8; }
.import-demo [data-import-row-state='waiting'] .dossier-code { border-color: #e0e5ed; color: #8b97a8; background: #f7f9fc; }
.import-demo [data-import-row-state='waiting'] .demo-pill { border-color: #e0e5ed; color: #8b97a8; background: #f7f9fc; }
.import-demo [data-import-row-state='building'] { color: #1d4ed8; }
.import-demo [data-import-row-state='building'] .dossier-code { border-color: #bfd3f7; color: #1d4ed8; background: #edf4ff; }
.import-demo [data-import-row-state='building'] .demo-pill { border-color: #c2d6fa; color: #1d4ed8; background: #edf4ff; animation: import-building 1.3s ease-in-out infinite; }
.import-demo [data-import-row-state='ready'] .demo-pill { border-color: #c9e4d2; color: #176142; background: #edf8f1; }
.import-demo [data-import-row-state='manual'] .demo-pill { border-color: #efdaa3; color: #8a5413; background: #fff8e6; }
.import-demo .dossier-footer { min-height: 18px; margin-top: 12px; font-size: 9px; }
.import-demo .dossier-footer a { font-size: 9px; }
.import-playback { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid #edf0f5; color: #8b97a8; font-size: 9px; line-height: 1.5; }
.import-playback > div { display: inline-flex; align-items: center; gap: 12px; }
.import-playback button { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 1px 0; border: 0; color: #536174; background: transparent; font-size: 10px; line-height: 1.5; }
.import-playback button:hover { color: #2563eb; }
.import-playback button .icon { width: 11px; height: 11px; }
.import-demo button:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.import-demo[data-import-paused='true'] *, .import-demo[data-import-paused='true'] *::before, .import-demo[data-import-paused='true'] *::after { animation-play-state: paused; }
@keyframes import-file-arrive { from { opacity: 0; transform: translateY(-8px) rotate(-5deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes import-spin { to { transform: rotate(360deg); } }
@keyframes import-upload { from { width: 0; } to { width: 100%; } }
@keyframes import-building { 0%, 100% { background-color: #edf4ff; } 50% { background-color: #dceaff; } }

@media (max-width: 1100px) {
  .import-demo .product-window-body { padding-inline: 17px; }
  .import-demo .dossier-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; font-size: 10px; }
}
@media (max-width: 460px) {
  .import-demo .product-window-body { padding: 16px 13px; }
  .import-demo .product-topbar { min-height: 47px; }
  .import-demo .product-heading h2 { font-size: 15px; }
  .import-source-picker { gap: 6px; margin-top: 12px; }
  .import-source-picker button { min-height: 31px; padding-inline: 8px; font-size: 10px; }
  .import-transfer { min-height: 48px; padding-inline: 9px; }
  .import-flow-track > span { gap: 5px; font-size: 9px; }
  .import-flow-track > span:not(:last-child)::after { margin-inline: 6px; }
  .import-demo .progress-meta { grid-template-columns: 1.05fr 1fr; gap: 10px; }
  .import-demo .progress-meta strong { font-size: 11px; }
  .import-demo .progress-meta > span { font-size: 9px; }
  .import-demo .dossier-row { min-height: 45px; font-size: 10px; }
  .import-demo .dossier-row .demo-pill { min-width: 55px; padding-inline: 4px; font-size: 9px; }
  .import-demo .dossier-footer { gap: 4px 8px; }
  .import-demo .dossier-footer a { margin-left: auto; }
  .import-playback { margin-top: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .import-demo *, .import-demo *::before, .import-demo *::after { animation: none !important; transition: none !important; }
}