/* Standalone player chrome. Scene-specific visuals belong to story-scenes. */
html.story-player-open, body.story-player-open { overflow: hidden; }
.story-dialog {
  --story-ink: #0d1017;
  --story-muted: #626976;
  --story-line: #e4e6eb;
  --story-surface: #f4f5f8;
  --story-accent: #25805d;
  --story-tint: #e7f6ef;
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 40px));
  height: min(860px, 88dvh);
  min-height: min(620px, 72dvh);
  max-height: calc(100dvh - 24px);
  padding: 0;
  margin: auto;
  overflow: hidden;
  border: 1px solid #dce1e8;
  border-radius: 24px;
  background: #fff;
  color: var(--story-ink);
  font-family: var(--font-body, "Wix Madefor Text", sans-serif);
  box-shadow: 0 30px 100px #17243838;
}
.story-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; }
.story-dialog::backdrop { background: #17202e75; }
.story-dialog[data-kind="packages"] { --story-accent: #b84b3e; --story-tint: #ffebe6; }
.story-dialog[data-kind="checks"] { --story-accent: #537bc4; --story-tint: #eaf0fd; }
.story-dialog[data-kind="images"] { --story-accent: #947215; --story-tint: #fff0ba; }
.story-dialog *, .story-dialog *::before, .story-dialog *::after { box-sizing: border-box; }
.story-dialog [hidden] { display: none !important; }
.story-dialog :is(button, input, select, textarea) { font: inherit; }
.story-dialog :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #6694e8; outline-offset: 3px; }
.story-dialog h2, .story-dialog h3, .story-dialog p { margin: 0; }
.story-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 23px 28px 20px; border-bottom: 1px solid var(--story-line); }
.story-heading-group { min-width: 0; }
.story-context { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.story-format { color: var(--story-accent); background: var(--story-tint); border-radius: 6px; padding: 4px 7px; font-size: 11px; line-height: 1.2; font-weight: 700; }
.story-role { color: var(--story-muted); font-size: 12px; line-height: 1.45; }
.story-dialog .story-title { font-family: var(--font-display, "Wix Madefor Display", sans-serif); font-size: clamp(23px, 2.7vw, 31px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; }
.story-title:focus { outline: none; }
.story-dialog .story-summary { color: var(--story-muted); font-size: 13px; line-height: 1.5; margin-top: 8px; max-width: 80ch; }
.story-close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; min-height: 42px; padding: 0; border: 1px solid #e1e5eb; border-radius: 50%; background: #fff; color: #566170; font-size: 27px !important; line-height: 1; cursor: pointer; }
.story-close:hover { background: var(--story-surface); color: var(--story-ink); }
.story-stage { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 24px; background: var(--story-surface); scrollbar-gutter: stable; }
.story-stage:focus-visible { outline-offset: -4px !important; }
.story-description { min-width: 0; padding: 16px 28px 17px; border-top: 1px solid var(--story-line); background: #fff; }
.story-dialog .story-scene-title { font-size: 18px; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; }
.story-dialog .story-caption { color: #657080; font-size: 13px; line-height: 1.5; margin-top: 5px; max-width: 92ch; }
.story-footer { padding: 13px 28px 15px; border-top: 1px solid var(--story-line); min-width: 0; background: #fff; }
.story-timeline { display: grid; grid-template-columns: repeat(var(--story-scene-count, 6), minmax(0, 1fr)); gap: 8px; min-width: 0; margin-bottom: 8px; }
.story-segment { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 7px; min-width: 0; min-height: 43px; padding: 5px 0; border: 0; border-radius: 3px; background: transparent; color: #8a929e; text-align: left; cursor: pointer; }
.story-segment-track { display: block; overflow: hidden; height: 4px; background: #e8ebf0; border-radius: 8px; }
.story-segment-fill { display: block; height: 100%; background: var(--story-accent); transform-origin: left center; transform: scaleX(var(--story-progress, 0)); }
.story-segment-label { display: flex; align-items: baseline; min-width: 0; gap: 5px; font-size: 10px; line-height: 1.35; }
.story-segment-number { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.story-segment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-segment[aria-current="step"] { color: var(--story-ink); font-weight: 600; }
.story-segment:hover { color: var(--story-ink); }
.story-segment:hover .story-segment-track { background: #d7dde7; }
.story-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.story-playback, .story-navigation, .story-final-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.story-dialog .story-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 10px 15px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.35; white-space: nowrap; cursor: pointer; text-decoration: none; }
.story-button--primary { background: var(--story-ink); color: #fff; }
.story-button--primary:hover { background: #303846; }
.story-button--plain { background: #f4f5f8; color: #465164; }
.story-button--plain:hover { background: #e8ecf2; }
.story-button:disabled { opacity: .36; cursor: default; }
.story-button:disabled:hover { background: #f4f5f8; }
.story-play { min-width: 120px; }
.story-clock { color: #818a97; font-size: 11px; line-height: 1.35; }
.story-counter { min-width: 36px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: #828b98; }
.story-final { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--story-line); margin-top: 14px; padding-top: 14px; }
.story-dialog .story-outcome { max-width: 58ch; font-size: 13px; font-weight: 600; line-height: 1.5; color: #3b4a41; }
.story-dialog .story-demo-label { margin-top: 9px; color: #8b93a0; font-size: 10px; line-height: 1.4; }
.story-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.story-dialog[data-play-state="paused"] .story-stage *,
.story-dialog[data-play-state="paused"] .story-stage *::before,
.story-dialog[data-play-state="paused"] .story-stage *::after,
.story-dialog[data-play-state="complete"] .story-stage *,
.story-dialog[data-play-state="complete"] .story-stage *::before,
.story-dialog[data-play-state="complete"] .story-stage *::after { animation-play-state: paused !important; }
.story-dialog[data-reduced-motion="true"] *,
.story-dialog[data-reduced-motion="true"] *::before,
.story-dialog[data-reduced-motion="true"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (max-width: 700px) {
  .story-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); min-height: 0; border-radius: 18px; }
  .story-header { padding: 17px 17px 14px; gap: 12px; }
  .story-context { gap: 6px 9px; margin-bottom: 8px; }
  .story-dialog .story-title { font-size: 24px; }
  .story-dialog .story-summary { font-size: 12px; margin-top: 7px; line-height: 1.45; }
  .story-role { font-size: 11px; }
  .story-close { width: 38px; height: 38px; min-height: 38px; }
  .story-stage { padding: 12px; scrollbar-gutter: auto; }
  .story-description { padding: 12px 17px; }
  .story-dialog .story-scene-title { font-size: 16px; }
  .story-dialog .story-caption { font-size: 12px; line-height: 1.45; }
  .story-footer { padding: 8px 14px 11px; }
  .story-timeline { gap: 7px; margin-bottom: 5px; }
  .story-segment { min-height: 37px; padding: 4px 0; gap: 5px; }
  .story-segment-label { justify-content: center; font-size: 11px; }
  .story-segment-name { display: none; }
  .story-controls { gap: 8px; flex-wrap: wrap; }
  .story-playback { flex: 1; gap: 6px; }
  .story-navigation { gap: 5px; }
  .story-dialog .story-button { padding: 9px 11px; min-height: 42px; font-size: 12px; }
  .story-play { min-width: 105px; }
  .story-clock { display: none; }
  .story-counter { min-width: 30px; font-size: 11px; }
  .story-final { display: grid; gap: 10px; margin-top: 10px; padding-top: 10px; }
  .story-dialog .story-outcome { font-size: 12px; line-height: 1.4; }
  .story-final-actions { display: grid; grid-template-columns: auto 1fr; }
  .story-final-actions .story-button { white-space: normal; }
  .story-dialog .story-demo-label { font-size: 10px; margin-top: 7px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .story-dialog { height: calc(100dvh - 20px); min-height: 0; max-height: calc(100dvh - 20px); }
  .story-header { padding-top: 14px; padding-bottom: 12px; }
  .story-context { margin-bottom: 5px; }
  .story-dialog .story-summary { display: none; }
  .story-description { padding-top: 10px; padding-bottom: 10px; }
  .story-stage { padding: 15px; }
  .story-footer { padding-top: 7px; padding-bottom: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-dialog *, .story-dialog *::before, .story-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Keep the working result in view throughout automatic playback. */
.story-dialog{height:min(760px,calc(100dvh - 24px));min-height:0;max-width:calc(100vw - 16px)}
.story-header{padding:15px 24px 12px;gap:18px}
.story-context{margin-bottom:6px}
.story-dialog .story-title{font-size:27px}
.story-dialog .story-summary{margin-top:5px;font-size:12px}
.story-stage{padding:12px;display:flex;align-items:center;justify-content:center}
.story-description{padding:12px 24px}
.story-dialog .story-scene-title{font-size:17px}
.story-footer{padding:8px 24px 10px}
.story-timeline{margin-bottom:4px}
.story-segment{min-height:36px;gap:5px}
.story-segment-label{font-size:12px;justify-content:center}
.story-segment-name{display:none}
.story-clock{color:#626976;font-size:12px}
.story-dialog .story-caption{font-size:14px;line-height:1.45}
.story-dialog .story-button{font-size:14px;min-height:44px}
.story-dialog .story-demo-label{color:#6b717e;font-size:11px}
.story-dialog .story-demo-label{margin-top:5px}
.story-final{margin-top:9px;padding-top:9px;gap:12px}
@media(max-width:700px){
 .story-dialog{height:min(740px,calc(100dvh - 16px));max-height:calc(100dvh - 16px);width:calc(100vw - 16px)}
 .story-header{padding:13px 13px 10px;gap:8px}
 .story-dialog .story-title{font-size:21px}
 .story-dialog .story-summary{display:none}
 .story-context{gap:5px;margin-bottom:6px}
 .story-role{display:none}
 .story-close{width:44px;height:44px;min-height:44px}
 .story-stage{padding:8px;align-items:flex-start}
 .story-description{padding:10px 13px}
 .story-dialog .story-scene-title{font-size:16px}
 .story-footer{padding:5px 10px 8px}
 .story-segment{min-height:31px}
 .story-segment-label{font-size:12px}
 .story-dialog .story-button{font-size:13px;padding:9px 10px}
 .story-dialog .story-caption{font-size:13px}
 .story-controls{display:grid;grid-template-columns:1fr auto;gap:6px 8px}
 .story-playback{display:contents}
 .story-navigation{grid-column:2;grid-row:1}
 .story-clock{display:block;grid-column:1 / -1;grid-row:2;font-size:11px;min-height:15px}
 .story-play{justify-self:start}
 .story-final{gap:8px}
 .story-dialog .story-outcome{font-size:13px}
}
.story-dialog[data-play-state="complete"]{grid-template-rows:auto minmax(0,1fr) auto}
.story-dialog[data-play-state="complete"] .story-final{border:0;margin-top:0;padding-top:0}

/* The result offers a native tool first; all three actions fit narrow panels. */
.story-final{flex-direction:column;align-items:stretch}.story-final-actions{flex-wrap:wrap}.story-final-actions .story-button{white-space:normal;min-height:44px}
@media(max-width:700px){.story-final-actions{grid-template-columns:1fr 1fr}.story-final-actions>a{grid-column:1/-1}}