.tu-workflow-context { margin: 28px 0; max-width: 100%; width: 100%; }
.tu-workflow-context img { border-radius: 16px; display: block; height: auto; max-width: 100%; width: 100%; }
.tu-workflow-context figcaption { color: #aab7c8; font-size: 0.76rem; line-height: 1.65; margin-top: 12px; }

.tu-workflow {
  background: #0e1520;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 22px;
  box-sizing: border-box;
  color: #f1f5f9;
  margin: 32px 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 28px;
  text-align: left;
  width: 100%;
}

.tu-workflow-heading { margin-bottom: 24px; }
.tu-workflow-kicker,
.tu-workflow-language,
.tu-workflow-step { font-size: 0.78rem; font-weight: 700; line-height: 1.5; }
.tu-workflow-kicker { color: #93c5fd; margin-bottom: 10px; }
.tu-workflow-heading h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); line-height: 1.2; margin: 0 0 14px; }
.tu-workflow-heading > p:last-child { color: #cbd5e1; font-size: 0.92rem; line-height: 1.65; margin: 0; }
.tu-workflow-stages { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.tu-workflow-card { background: #151e2c; border: 1px solid #334155; border-radius: 14px; box-sizing: border-box; min-width: 0; padding: 20px; }
.tu-workflow-card p { max-width: none; }
.tu-workflow-step { color: #cbd5e1; display: flex; gap: 10px; margin: 0 0 14px; }
.tu-workflow-step span { color: #93c5fd; flex-shrink: 0; }
.tu-workflow-language { color: #94a3b8; margin: 0 0 7px; }
.tu-workflow-source,
.tu-workflow-result-text { color: #f8fafc; font-size: clamp(1.2rem, 3vw, 1.65rem); line-height: 1.4; margin: 0; }
.tu-workflow-use > p:last-child { color: #e2e8f0; font-size: 0.96rem; line-height: 1.65; margin: 0; }
.tu-workflow-use { grid-column: 1 / -1; }
.tu-workflow-progress-track { background: #334155; border-radius: 2px; display: none; height: 3px; margin-top: 20px; overflow: hidden; }
.tu-workflow-progress { background: #93c5fd; display: block; height: 100%; transform-origin: left; width: 100%; }
.tu-workflow[data-tu-motion="enabled"] .tu-workflow-progress-track { display: block; }
.tu-workflow[data-tu-phase="input"] [data-tu-card="input"],
.tu-workflow[data-tu-phase="result"] [data-tu-card="result"],
.tu-workflow[data-tu-phase="use"] [data-tu-card="use"] { background: #19304a; border-color: #93c5fd; }
.tu-workflow figcaption { color: #aab7c8; font-size: 0.76rem; line-height: 1.6; margin-top: 18px; }
.tu-workflow-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tu-workflow [hidden] { display: none; }
.tu-workflow-controls button { background: #1e293b; border: 1px solid #64748b; border-radius: 10px; color: #f8fafc; cursor: pointer; font: inherit; font-size: 0.8rem; line-height: 1.3; min-height: 44px; min-width: 44px; padding: 10px 14px; }
.tu-workflow-controls button:hover { background: #334155; }
.tu-workflow-controls button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
.tu-workflow-status { color: #cbd5e1; font-size: 0.78rem; line-height: 1.5; margin: 10px 0 0; min-height: 0; }
.tu-workflow-status:empty { display: none; }

@media (max-width: 600px) {
  .tu-workflow { border-radius: 18px; padding: 20px 16px; }
  .tu-workflow-card { padding: 16px; }
  .tu-workflow-stages { grid-template-columns: minmax(0, 1fr); }
  .tu-workflow-controls button { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .tu-workflow-progress-track { display: none !important; }
}