.stepper-card{ display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:16px; }
.stepper-card[data-valign="top"]{ align-items:flex-start; }
.stepper-steps{ position:relative; width:100%; margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; }
.stepper-steps::before{
  content:''; position:absolute; left:40px; top:36px; bottom:36px; width:1px; background:var(--slide-stroke);
}
.stepper-step{
  position:relative; display:flex; align-items:center; gap:18px; min-width:0; overflow:hidden;
  padding:14px 20px; border-radius:16px; color:var(--slide-text-2);
  transition:background .3s ease, color .3s ease;
}
.stepper-idx{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; box-sizing:border-box;
  font-family:var(--font-regular); font-size:18px;
  background:var(--slide-surface); border:1px solid var(--slide-stroke);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.stepper-idx > *{ grid-area:1 / 1; transition:opacity .2s ease, transform .25s ease; }
.stepper-check{ font-size:16px; opacity:0; transform:scale(.6); }
.stepper-name{ flex:1; min-width:0; font-family:var(--font-regular); font-size:22px; line-height:1.3; outline:none; overflow-wrap:anywhere; }

.stepper-step.is-current{ background:var(--slide-surface-2); color:var(--slide-text-1); }
.stepper-step.is-current .stepper-idx{ background:var(--slide-accent); border-color:var(--slide-accent); color:#FFFFFF; }
.stepper-step.is-done .stepper-idx{ background:var(--slide-accent-soft); border-color:transparent; color:var(--slide-accent); }
.frame[data-theme="dark"] .stepper-step.is-done .stepper-idx{ background:color-mix(in srgb, var(--slide-accent) 18%, var(--slide-surface)); }
.stepper-step.is-done .stepper-n{ opacity:0; transform:scale(.6); }
.stepper-step.is-done .stepper-check{ opacity:1; transform:none; }

.stepper-card[data-orient="row"] .stepper-steps{ flex-direction:row; align-items:stretch; }
.stepper-card[data-orient="row"] .stepper-steps::before{
  left:calc(100% / var(--n, 3) / 2); right:calc(100% / var(--n, 3) / 2); top:34px; bottom:auto; width:auto; height:1px;
}
.stepper-card[data-orient="row"] .stepper-step{ flex:1 1 0; flex-direction:column; justify-content:flex-start; gap:12px; padding:14px 12px; text-align:center; }
.stepper-card[data-orient="row"] .stepper-name{ flex:none; width:100%; }
.stepper-steps:has(.stepper-step:only-child)::before{ display:none; }

.stepper-link-row{ display:flex; align-items:center; gap:10px; min-width:0; margin-bottom:8px; }
.stepper-link-thumb{ width:56px; height:35px; border-radius:6px; object-fit:cover; flex-shrink:0; background:var(--ui-surface-2, var(--md-neutral-background-2-rest)); }
.stepper-link-row > i{ width:56px; text-align:center; color:var(--ui-muted); }
.stepper-link-name{ flex:1; min-width:0; font-size:13px; color:var(--md-neutral-foreground-1-rest); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-edit.stepper-row-edit{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:6px; align-items:center; padding:6px 4px; }
.row-edit.stepper-row-edit:hover{ background:var(--md-neutral-background-2-rest); }
.stepper-row-pickers{ grid-column:2 / 3; display:flex; flex-direction:column; gap:6px; min-width:0; }
.stepper-row-pickers .panel-hint{ font-size:12px; }
.stepper-row-pickers .photo-select-trigger i.photo-select-glyph{
  width:36px; height:22px; border-radius:5px; flex-shrink:0; font-size:11px;
  background:var(--md-neutral-background-2-rest); color:var(--ui-muted);
  display:flex; align-items:center; justify-content:center;
}
.stepper-row-pickers .photo-select-trigger-thumb{ width:36px; height:22px; border-radius:5px; }
.stepper-row-pickers .photo-select-trigger{ padding-top:9.25px; padding-bottom:9.25px; }
.stepper-row-pickers .photo-select-option-thumb{ width:36px; height:22px; border-radius:4px; }
.stepper-row-pickers .icon-select-option i.photo-select-glyph{ width:36px; text-align:center; flex-shrink:0; }
.stepper-part-btn{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:12px;
  border:1px solid var(--ui-border); border-radius:8px; background:var(--md-color-grey-white);
  font:inherit; font-size:13px; line-height:normal; color:var(--md-neutral-foreground-1-rest); cursor:pointer; text-align:left;
}
.stepper-part-btn:hover{ border-color:var(--ui-accent); }
.stepper-dur{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; height:42.5px; padding:0 12px;
  border:1px solid var(--ui-border); border-radius:8px; background:var(--md-color-grey-white);
  font-size:13px; color:var(--md-neutral-foreground-1-rest); cursor:text;
}
.stepper-dur:focus-within{ border-color:var(--ui-accent); }
.stepper-dur-label{ flex:1; min-width:0; color:var(--ui-muted); }
.stepper-dur .stepper-dur-input{
  width:56px; height:auto; flex-shrink:0; padding:0; border:0; border-radius:0; outline:none; background:none; box-shadow:none; text-align:right;
  font:inherit; font-size:13px; color:inherit;
}
.stepper-dur-unit{ color:var(--ui-muted); }
.stepper-part-label{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stepper-part-edit{ color:var(--ui-muted); font-size:12px; }

#stepperPartOverlay{
  display:flex; position:fixed; inset:0; background:rgba(20,24,32,0.45); z-index:var(--z-modal);
  align-items:center; justify-content:center; opacity:0; transition:opacity .2s ease;
}
#stepperPartOverlay.open{ opacity:1; }
#stepperPartModal{
  width:880px; max-width:94vw; max-height:92vh; background:var(--md-color-grey-white); border-radius:16px;
  box-shadow:var(--shadow-modal); display:flex; flex-direction:column; overflow:hidden;
  animation:modal-rise-in .32s cubic-bezier(.2,.8,.2,1);
}
.skf-body{ display:flex; flex-direction:column; gap:14px; padding:4px 20px 12px; overflow:auto; min-height:0; }
.skf-preview{
  position:relative; width:100%; max-height:46vh; margin:0 auto; border-radius:12px; overflow:hidden;
  background:var(--md-neutral-background-2-rest);
}
.skf-preview-img{ width:100%; height:100%; object-fit:contain; display:block; }
.skf-preview.anim-playing .skf-preview-img{ visibility:hidden; }
.skf-preview-time{
  position:absolute; left:12px; bottom:12px; z-index:2; padding:4px 10px; border-radius:999px;
  font-size:12px; color:#FFFFFF; background:rgba(20,26,34,.72); pointer-events:none;
}
.skf-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.skf-readout{ flex:1; min-width:0; font-size:14px; color:var(--md-neutral-foreground-1-rest); }
.skf-play{ display:inline-flex; align-items:center; gap:8px; }
.skf-timeline{ display:flex; flex-direction:column; gap:6px; padding:0 8px; }
.skf-track{
  position:relative; height:44px; border-radius:10px; background:var(--md-neutral-background-2-rest);
  touch-action:none; user-select:none; cursor:crosshair;
}
.skf-seg{
  position:absolute; top:4px; bottom:4px; box-sizing:border-box; border-radius:8px;
  background:color-mix(in srgb, var(--md-neutral-stroke-1-rest) 70%, transparent); color:var(--md-neutral-foreground-3-rest);
  display:flex; align-items:center; justify-content:center; font-size:12px; pointer-events:none;
}
.skf-seg.is-current{ background:var(--ui-accent); color:#FFFFFF; pointer-events:auto; cursor:grab; box-shadow:0 1px 4px rgba(0,64,222,.35); z-index:1; }
.skf-track.is-dragging, .skf-track.is-dragging .skf-seg.is-current{ cursor:grabbing; }
.skf-seg-n{ pointer-events:none; }
.skf-handle{
  position:absolute; top:-4px; bottom:-4px; width:14px; padding:0; border:0; background:none; cursor:ew-resize; z-index:2;
}
.skf-handle::before{
  content:''; position:absolute; top:6px; bottom:6px; left:5px; width:4px; border-radius:2px; background:#FFFFFF;
  box-shadow:0 0 0 1px var(--ui-accent);
}
.skf-handle-start{ left:-7px; }
.skf-handle-end{ right:-7px; }
.skf-handle:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:1px; border-radius:4px; }
.skf-handle.is-dragging::before{ background:var(--ui-accent-soft, #EEF3FE); }
.skf-playhead{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:var(--md-neutral-foreground-1-rest); opacity:.5; pointer-events:none; z-index:3; }
.skf-track.is-dragging .skf-playhead{ display:none; }
.skf-scale{ display:flex; justify-content:space-between; font-size:11px; color:var(--ui-muted); }
.skf-hint{ margin:0; font-size:12px; color:var(--ui-muted); }
.skf-track.is-playing .skf-playhead{ opacity:1; width:3px; margin-left:-1.5px; background:#FFFFFF; box-shadow:0 0 0 1px rgba(20,26,34,.55); }

.stepper-step.is-running::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--slide-accent); opacity:.35; transform:scaleX(0); transform-origin:left; pointer-events:none;
  animation:stepper-progress var(--step-dur, 4s) linear forwards;
}
@keyframes stepper-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.present-frame .stepper-step{ cursor:pointer; }
.present-frame .image-asset-crop{ position:relative; }
.stepper-img-next{ position:absolute; left:0; top:0; opacity:0; transition:opacity .45s ease; }
.stepper-img-next.is-in{ opacity:1; }
.present-frame .stepper-step:not(.is-current):hover{ background:color-mix(in srgb, var(--slide-surface-2) 60%, transparent); color:var(--slide-text-1); }