:root {
  --radius: 12px;
  --background: #f5f5f7;
  --foreground: #1d1d1f;
  --card: #ffffff;
  --muted: #f5f5f7;
  --muted-foreground: #6e6e73;
  --primary: #0071e3;
  --primary-hover: #0066cc;
  --primary-foreground: #ffffff;
  --accent: #e8f2ff;
  --destructive: #dc2626;
  --border: #d2d2d7;
  --input: #d2d2d7;
  --ring: #0071e3;
  --wa-font-family-body: "SF Pro Text", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wa-font-size-m: 14px;
  --wa-color-focus: var(--ring);
  --wa-color-surface-default: var(--card);
  --wa-color-surface-raised: var(--card);
  --wa-color-surface-border: var(--border);
  --wa-color-text-normal: var(--foreground);
  --wa-color-text-quiet: var(--muted-foreground);
  --wa-color-brand-fill-loud: var(--primary);
  --wa-color-brand-border-loud: var(--primary);
  --wa-color-brand-on-loud: var(--primary-foreground);
  --wa-form-control-background-color: var(--card);
  --wa-form-control-border-color: var(--input);
  --wa-form-control-border-radius: 8px;
  --wa-form-control-height: 40px;
  --wa-form-control-padding-block: 0;
  --wa-form-control-padding-inline: 12px;
  --wa-form-control-activated-color: var(--primary);
  --wa-form-control-value-color: var(--foreground);
  --wa-form-control-value-font-weight: 600;
  --wa-focus-ring: solid 2px var(--ring);
  --wa-focus-ring-offset: 2px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family:
    "SF Pro Text", "SF Pro Display", Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
wa-select,
wa-slider,
wa-switch {
  font: inherit;
}

button,
a,
select,
input,
wa-select,
wa-slider,
wa-switch {
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  display: flex;
  height: 100svh;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
}

.titlebar {
  z-index: 20;
  display: flex;
  height: 56px;
  flex: 0 0 auto;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.8);
  padding: 0 20px 0 25px;
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 8px;
}

.brand-wordmark {
  display: block;
  height: 20px;
  width: auto;
  max-width: 118px;
}

.workspace {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 16px 20px;
}

.workspace-grid {
  display: grid;
  height: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.stage-scroll,
.inspector-scroll {
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #c7c7cc transparent;
}

.stage-scroll {
  padding-right: 4px;
}

.card {
  border: 1px solid rgba(210, 210, 215, 0.9);
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
}

.preview-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.settings-card {
  background: rgba(255, 255, 255, 0.95);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
}

.preview-header {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
}

.card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}

.card-description {
  margin: 6px 0 0;
  color: var(--muted-foreground);
  font-size: 14px;
}

.card-content {
  padding: 0 20px 20px;
}

.preview-content {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
}

.source-summary {
  display: flex;
  min-width: 220px;
  max-width: 360px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(245, 245, 247, 0.7);
  padding: 8px 12px;
}

.source-icon,
.settings-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--primary);
  mask: center / contain no-repeat;
}

.source-icon {
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%27/%3E%3Cpath%20d%3D%27M14%202v4a2%202%200%200%200%202%202h4%27/%3E%3C/svg%3E");
}

.settings-icon {
  width: 16px;
  height: 16px;
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2Z%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27/%3E%3C/svg%3E");
}

.source-text {
  min-width: 0;
  flex: 1 1 auto;
}

.source-text p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-text p:first-child {
  font-weight: 600;
  line-height: 1.25;
}

.source-text p:last-child {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.stage {
  position: relative;
  display: flex;
  min-height: 360px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--muted);
}

.stage.is-dragging {
  box-shadow: 0 0 0 2px var(--ring), 0 0 0 5px rgba(0, 113, 227, 0.15);
}

.stage-content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: inherit;
  align-items: center;
  justify-content: center;
}

.stage-input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
}

.stage-input:disabled {
  cursor: not-allowed;
}

.stage.has-stale-preview .stage-content {
  z-index: 3;
}

.stage.has-stale-preview .stage-input {
  pointer-events: none;
  z-index: 1;
}

.checkerboard {
  background-image:
    linear-gradient(45deg, #d2d2d7 25%, transparent 25%),
    linear-gradient(-45deg, #d2d2d7 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d2d2d7 75%),
    linear-gradient(-45deg, transparent 75%, #d2d2d7 75%);
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-size: 16px 16px;
}

.empty-stage {
  display: flex;
  max-width: 360px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
}

.empty-icon,
.processing-icon,
.watermark-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
}

.empty-icon,
.processing-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
}

.empty-title {
  margin: 0;
  font-weight: 600;
}

.empty-detail {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.choose-pill {
  display: inline-flex;
  height: 36px;
  align-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0 16px;
  font-weight: 600;
}

.stage-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.stale-preview-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(245, 245, 247, 0.66);
  color: var(--foreground);
  cursor: pointer;
  backdrop-filter: blur(3px);
}

.stale-preview-panel {
  display: grid;
  max-width: min(340px, calc(100% - 40px));
  gap: 6px;
  border: 1px solid rgba(210, 210, 215, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px 18px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(29, 29, 31, 0.12);
}

.stale-preview-title {
  color: var(--primary);
  font-weight: 700;
}

.stale-preview-detail {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.4;
}

.processing-card {
  display: flex;
  width: min(100% - 32px, 384px);
  flex-direction: column;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 20px;
  text-align: center;
}

.processing-title {
  margin: 0;
  font-weight: 600;
}

.processing-label {
  margin: 4px 0 0;
  color: var(--muted-foreground);
}

.progress-wrap {
  width: 100%;
}

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.progress-percent {
  color: var(--foreground);
  font-weight: 600;
}

.progress-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
  transition: width 160ms ease;
}

.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(0, 113, 227, 0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.clip-panel,
.option-panel,
.export-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(245, 245, 247, 0.7);
}

.clip-panel {
  padding: 16px;
}

.panel-title {
  margin: 0;
  font-weight: 600;
}

.clip-control {
  margin-top: 12px;
}

.clip-control.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.clip-rail {
  position: relative;
  height: 48px;
  touch-action: none;
  cursor: pointer;
}

.clip-control.disabled .clip-rail {
  cursor: not-allowed;
}

.clip-base,
.clip-fill {
  position: absolute;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  border-radius: 999px;
}

.clip-base {
  left: 8px;
  right: 8px;
  background: var(--border);
}

.clip-fill {
  left: var(--clip-start, 8px);
  right: var(--clip-right, 8px);
  background: var(--primary);
}

.clip-tick {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: rgba(110, 110, 115, 0.2);
}

.clip-handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  background: var(--card);
  cursor: grab;
  transform: translate(-50%, -50%);
}

.clip-handle:disabled {
  cursor: not-allowed;
}

.clip-handle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring), 0 0 0 5px rgba(0, 113, 227, 0.16);
}

.clip-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
}

.muted-line {
  margin: 8px 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

.settings-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field-grid,
.watermark-details,
.option-panel {
  display: grid;
  gap: 12px;
}

.option-panel {
  padding: 12px;
  background: rgba(245, 245, 247, 0.5);
}

.field {
  display: grid;
  gap: 8px;
  font-weight: 600;
}

.field-row,
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.field-value {
  color: var(--muted-foreground);
  font-weight: 500;
}

select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--input);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  padding: 0 12px;
}

wa-select,
wa-slider {
  width: 100%;
  min-width: 0;
}

wa-select::part(form-control-input) {
  min-height: 40px;
}

wa-select::part(display-input) {
  overflow: hidden;
  text-overflow: ellipsis;
}

wa-slider {
  --thumb-height: 16px;
  --thumb-width: 16px;
  --track-size: 8px;
}

wa-switch {
  --height: 20px;
  --thumb-size: 14px;
  --width: 36px;
  flex: 0 0 auto;
}

wa-select[disabled],
wa-slider[disabled],
wa-switch[disabled] {
  cursor: not-allowed;
  opacity: 0.6;
}

input[type="range"] {
  width: 100%;
  height: 8px;
  accent-color: var(--primary);
  cursor: pointer;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

select:focus-visible,
input:focus-visible,
.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring), 0 0 0 5px rgba(0, 113, 227, 0.16);
}

select:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.switch-row {
  font-weight: 600;
}

.watermark-file-row {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.watermark-file {
  width: 100%;
  min-width: 0;
  cursor: pointer;
}

.watermark-file > span:not(.watermark-name),
.watermark-file {
  display: flex;
}

.watermark-file {
  height: 48px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 8px 12px;
}

.watermark-file-row .button-small {
  max-width: 76px;
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-thumb,
.watermark-thumb-empty {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 8px;
  background: var(--muted);
}

.watermark-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.watermark-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted-foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.watermark-panel,
.watermark-details,
.field,
.field-grid {
  min-width: 0;
}

.watermark-panel {
  overflow: hidden;
}

.watermark-preview-panel {
  display: flex;
  min-height: 72px;
  max-height: 112px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
}

.watermark-preview-panel[hidden] {
  display: none;
}

.watermark-preview-image {
  display: block;
  max-width: 100%;
  max-height: 92px;
  object-fit: contain;
}

.export-panel {
  display: grid;
  gap: 16px;
  background: rgba(247, 247, 248, 0.95);
  padding: 12px;
}

.export-summary p {
  margin: 0;
}

.export-summary p:first-child {
  font-weight: 700;
}

.export-summary p:last-child,
.message {
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.4;
}

.message-list {
  display: grid;
  gap: 8px;
}

.message.error {
  color: var(--destructive);
  font-size: 14px;
  font-weight: 600;
}

.action-grid {
  display: grid;
  gap: 8px;
}

.button {
  display: inline-flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 8px;
  padding: 8px 14px;
  border: 1px solid transparent;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.button-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover:not(:disabled) {
  background: var(--primary-hover);
}

.button-outline {
  border-color: var(--input);
  background: var(--card);
  color: var(--foreground);
}

.button-outline:hover:not(:disabled):not(.button-disabled) {
  background: var(--accent);
}

.button-small {
  width: auto;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12px;
}

.button:disabled,
.button-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.5;
}

.button-icon,
.empty-icon::before,
.processing-icon::before,
.watermark-thumb-empty::before {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background: currentColor;
  mask: center / contain no-repeat;
}

.empty-icon::before {
  content: "";
  width: 28px;
  height: 28px;
  color: var(--primary);
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M12%203v12%27/%3E%3Cpath%20d%3D%27m17%208-5-5-5%205%27/%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3C/svg%3E");
}

.watermark-thumb-empty::before {
  content: "";
  color: var(--primary);
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M21%2012v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h7%27/%3E%3Cline%20x1%3D%2716%27%20x2%3D%2722%27%20y1%3D%275%27%20y2%3D%275%27/%3E%3Cline%20x1%3D%2719%27%20x2%3D%2719%27%20y1%3D%272%27%20y2%3D%278%27/%3E%3Ccircle%20cx%3D%279%27%20cy%3D%279%27%20r%3D%272%27/%3E%3Cpath%20d%3D%27m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%27/%3E%3C/svg%3E");
}

.icon-play {
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27black%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M8%205v14l11-7Z%27/%3E%3C/svg%3E");
}

.icon-download {
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%27/%3E%3Cpolyline%20points%3D%277%2010%2012%2015%2017%2010%27/%3E%3Cline%20x1%3D%2712%27%20x2%3D%2712%27%20y1%3D%2715%27%20y2%3D%273%27/%3E%3C/svg%3E");
}

.icon-reset {
  mask-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%27/%3E%3Cpath%20d%3D%27M3%203v5h5%27/%3E%3C/svg%3E");
}

@media (min-height: 850px) {
  .stage {
    min-height: 520px;
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app-shell {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .titlebar {
    padding-left: 20px;
  }

  .workspace {
    overflow: visible;
  }

  .workspace-grid {
    height: auto;
    grid-template-columns: 1fr;
  }

  .stage-scroll,
  .inspector-scroll {
    overflow: visible;
  }

  .preview-header {
    flex-direction: column;
  }

  .source-summary {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .stage {
    min-height: 360px;
  }
}