.process-demo {
  --process-paper: var(--paper, var(--sbi-gray-1));
  --process-ink: var(--ink, var(--sbi-ink));
  --process-accent: var(--accent, var(--sbi-ink));
  --process-rule: var(--sbi-gray-3);
  --process-muted: var(--sbi-gray-6);
  color: var(--process-ink);
  background: var(--process-paper);
  border: 1px solid var(--process-rule);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  isolation: isolate;
}

.process-demo *,
.process-demo *::before,
.process-demo *::after { box-sizing: border-box; }

.process-demo ::selection { color: var(--process-paper); background: var(--process-accent); }
.process-demo button { font: inherit; cursor: pointer; border-radius: 0; }
.process-demo button:focus-visible { outline: 2px solid var(--process-accent); outline-offset: -5px; }
.process-demo button:disabled { cursor: default; }
.process-demo svg { display: block; width: 20px; height: 20px; flex: 0 0 auto; }
.process-demo p,
.process-demo h3,
.process-demo h4,
.process-demo ol,
.process-demo ul,
.process-demo dl,
.process-demo blockquote { margin: 0; }

.process-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--process-rule);
}

.process-identity { display: flex; align-items: center; gap: 10px; }
.process-identity strong { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.process-identity-mark { width: 8px; height: 8px; background: var(--process-accent); }
.process-identity-detail { color: var(--process-muted); font-size: 12px; margin-left: 12px; }
.process-simulation { color: var(--process-muted); font-size: 11px; }
.process-navigation { padding: 0 28px; border-bottom: 1px solid var(--process-rule); }
.process-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.process-steps li { min-width: 0; }
.process-step {
  width: 100%;
  min-height: 65px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  color: var(--process-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-align: left;
  font-weight: 500;
}
.process-step[aria-current="step"] { color: var(--process-accent); border-bottom-color: var(--process-accent); }
.process-step-number { font-variant-numeric: tabular-nums; font-size: 11px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; }
.process-step[aria-current="step"] .process-step-number { background: var(--process-accent); color: var(--sbi-white); border-color: var(--process-accent); }
.process-step-check { margin-left: auto; visibility: hidden; }
.process-step-check svg { width: 15px; height: 15px; }
.process-step[data-complete="true"] .process-step-check { visibility: visible; }
.process-workspace { display: grid; grid-template-columns: 148px minmax(0, 1fr) 190px; min-height: 630px; }
.process-index { padding: 33px 19px 24px 28px; border-right: 1px solid var(--process-rule); display: flex; flex-direction: column; }
.process-index-caption { font-size: 11px; color: var(--process-muted); margin-bottom: 36px; }
.process-index ol { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 28px; }
.process-index li { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--process-muted); }
.process-index li[data-active="true"] { color: var(--process-accent); }
.process-index li[data-active="true"] > span:last-child { font-weight: 600; }
.process-index-number { font-variant-numeric: tabular-nums; font-size: 10px; }
.process-index-reference { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; letter-spacing: 0.04em; margin-top: auto; padding-top: 40px; color: var(--process-muted); }
.process-view { min-width: 0; padding: 32px clamp(24px, 3vw, 48px) 36px; }
.process-stage { opacity: 1; transform: translateY(0); transition: opacity 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)); }
.process-demo[data-motion="instant"] .process-stage { transition: none; }
@starting-style {
  .process-demo[data-motion="animate"] .process-stage { opacity: 0.35; transform: translateY(6px); }
}
.process-title { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -0.04em; font-weight: 500; text-wrap: balance; margin-bottom: 34px !important; }
.process-document { border-top: 1px solid var(--process-ink); }
.process-document-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 16px; color: var(--process-muted); font-size: 10px; }
.process-document-meta time,
.process-document-meta > span:last-child { font-variant-numeric: tabular-nums; }
.process-document-subject { font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.025em; max-width: 40ch; margin-bottom: 22px !important; }
.process-mail-body { font-size: 13px; line-height: 1.7; max-width: 70ch; }
.process-mail-body p + p { margin-top: 14px; }
.process-mail-body strong { font-weight: 600; }
.process-document-foot { display: grid; grid-template-columns: 110px 1fr; gap: 18px; border-top: 1px solid var(--process-rule); margin-top: 26px; padding-top: 15px; }
.process-data-label { font-size: 10px; color: var(--process-muted); }
.process-document-foot p { font-size: 11px; line-height: 1.55; }
.process-context { padding: 33px 24px 30px; border-left: 1px solid var(--process-rule); }
.process-context-heading { font-size: 12px; font-weight: 500; margin-bottom: 36px !important; }
.process-metadata { display: flex; flex-direction: column; gap: 26px; }
.process-metadata dt { color: var(--process-muted); font-size: 10px; margin-bottom: 6px; }
.process-metadata dd { margin: 0; font-size: 12px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.process-context-note { color: var(--process-muted); font-size: 11px; line-height: 1.65; border-top: 1px solid var(--process-rule); padding-top: 17px; margin-top: 35px !important; }
.process-document-intro { max-width: 55ch; font-size: 13px; line-height: 1.65; margin-bottom: 24px !important; }
.process-file-list { list-style: none; padding: 0; }
.process-file-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 20px 0; border-top: 1px solid var(--process-rule); }
.process-file-type { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 9px; color: var(--process-accent); padding-top: 3px; }
.process-file-list strong { font-size: 13px; line-height: 1.4; font-weight: 600; }
.process-file-list p { font-size: 11px; line-height: 1.6; color: var(--process-muted); margin-top: 5px; }
.process-file-date { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--process-muted); padding-top: 3px; white-space: nowrap; }
.process-context-extract { padding-top: 19px; border-top: 1px solid var(--process-rule); }
.process-context-extract blockquote { font-size: 17px; letter-spacing: -0.02em; line-height: 1.45; margin: 13px 0 12px; }
.process-context-extract > p { font-size: 11px; color: var(--process-muted); }
.process-review-list { padding: 0; list-style: none; }
.process-review-list li { display: flex; gap: 20px; padding: 17px 0; border-top: 1px solid var(--process-rule); }
.process-review-number { color: var(--process-accent); font-size: 11px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.process-review-list strong { font-size: 13px; font-weight: 600; }
.process-review-list p { font-size: 11px; line-height: 1.6; color: var(--process-muted); margin-top: 6px; }
.process-review-callout { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--process-ink); padding-top: 18px; margin-top: 12px; }
.process-review-symbol { color: var(--process-accent); }
.process-review-callout p { font-size: 12px; line-height: 1.6; }
.process-footer { border-top: 1px solid var(--process-rule); padding: 16px 24px 16px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.process-status { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.process-status-dot { width: 5px; height: 5px; flex: 0 0 auto; background: var(--process-accent); }
.process-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.process-reset { text-underline-offset: 4px; }
.process-next { min-width: 219px; }
.process-next svg { width: 17px; height: 17px; }
.process-next:disabled svg { display: none; }
.process-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (hover: hover) and (pointer: fine) {
  .process-step:hover { color: var(--process-accent); }
}

@media (max-width: 1000px) {
  .process-workspace { grid-template-columns: 111px minmax(0, 1fr) 154px; }
  .process-index { padding-left: 19px; padding-right: 12px; }
  .process-context { padding-right: 18px; padding-left: 18px; }
  .process-identity-detail { display: none; }
  .process-view { padding-right: 25px; padding-left: 25px; }
}

@media (max-width: 700px) {
  .process-header { flex-wrap: wrap; gap: 6px 16px; padding: 17px 20px; }
  .process-simulation { width: 100%; font-size: 10px; margin-left: 18px; }
  .process-navigation { padding: 0 10px; }
  .process-step { flex-direction: column; justify-content: center; gap: 5px; padding: 12px 3px; min-height: 76px; font-size: 11px !important; }
  .process-step-number { width: 20px; height: 20px; font-size: 10px; }
  .process-step-check { display: none; }
  .process-workspace { display: block; min-height: 0; }
  .process-index { display: none; }
  .process-view { padding: 27px 20px 30px; }
  .process-title { font-size: clamp(28px, 6vw, 36px); margin-bottom: 28px !important; }
  .process-document-subject { font-size: 17px; }
  .process-mail-body { font-size: 13px; }
  .process-document-foot { grid-template-columns: 1fr; gap: 6px; }
  .process-context { border-left: 0; border-top: 1px solid var(--process-rule); padding: 20px; }
  .process-context-heading { margin-bottom: 20px !important; }
  .process-metadata { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .process-context-note { margin-top: 20px !important; padding-top: 13px; }
  .process-file-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .process-file-date { grid-column: 2; margin-top: -6px; }
  .process-footer { flex-direction: column; align-items: stretch; padding: 18px 20px; gap: 16px; }
  .process-actions { justify-content: space-between; gap: 12px; }
  .process-next { flex: 1 1 190px; min-width: 0; }
  .process-status { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .process-stage { transform: none; transition: none; }
  @starting-style {
    .process-demo[data-motion="animate"] .process-stage { opacity: 1; transform: none; }
  }
}