:root {
  --bg: Canvas;
  --text: CanvasText;
  --hint: GrayText;
  --link: LinkText;
  --done: #1D9E75;
  --running: #378ADD;
  --failed: #E24B4A;
  --return: #BA7517;
  --waiting: #B4B2A9;
  --symbol: #fff;
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  scrollbar-color: var(--hint) var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 36rem; margin-inline: auto; padding: 24px 20px; overflow-wrap: anywhere; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
h3 { font-size: 15px; font-weight: 600; }
ol { list-style: none; margin: 0; padding: 0; }
::selection { color: var(--bg); background: var(--text); }
a { color: var(--link); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
.title { margin-top: 12px; font-weight: 600; }
.summary { margin-top: 8px; font-size: 14px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 13px; color: var(--hint); font-variant-numeric: tabular-nums; }
header .meta { margin-top: 8px; }
.note { margin-top: 16px; font-size: 14px; }
.steps { position: relative; margin-top: 20px; padding-left: 44px; }
.steps li { min-height: 52px; padding: 8px 0 12px; }
.step-label { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 15px; line-height: 20px; font-weight: 600; }
.step-status { font-size: 13px; font-weight: 400; }
.detail { margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--hint); }
.rail { position: absolute; top: 0; left: 0; overflow: visible; }
.rail circle { fill: currentColor; }
.rail path, .rail line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail .done { color: var(--done); }
.rail .running, .rail .human { color: var(--running); }
.rail .failed, .rail .reverted { color: var(--failed); }
.rail .waiting, .rail .stopped { color: var(--waiting); }
.rail .waiting circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.rail .segment.waiting { stroke-width: 1.5; }
.rail .symbol { stroke: var(--symbol); }
.rail .stopped .symbol { stroke-width: 1.5; }
.rail .ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-width: 2; }
.rail .spin { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.rail .return { stroke: var(--return); }
.rail .fall { fill: var(--running); }
.fall { opacity: 0; }
.run-link { font-size: 14px; }
section { margin-top: 24px; }
.history li { position: relative; padding-block: 12px; padding-left: 28px; }
.history-status { position: absolute; left: 0; top: 12px; }
.history-status circle { fill: currentColor; }
.history-status path { fill: none; stroke: var(--symbol); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.history-status.done { color: var(--done); }
.history-status.failed { color: var(--failed); }
.history-status.running { color: var(--running); }
.history-status.waiting { color: var(--waiting); }
.history-status.waiting circle { fill: none; stroke: currentColor; stroke-width: 1.5; }
.history-status .ring { fill: none; stroke: currentColor; stroke-opacity: 0.25; stroke-width: 2; }
.history-status .spin { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.history li + li { border-top: 1px solid var(--hint); }
.history li > p { margin-top: 4px; font-size: 13px; }
.history .meta { justify-content: space-between; }
footer { margin-top: 20px; color: var(--hint); font-size: 12px; font-variant-numeric: tabular-nums; }
.message { margin-top: 24px; }
button { margin-top: 16px; min-width: 112px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--link); border-radius: 8px; background: var(--bg); color: var(--link); font: inherit; font-weight: 600; cursor: pointer; }
button:hover { text-decoration: underline; text-underline-offset: 3px; }
button:disabled { color: var(--hint); border-color: var(--hint); cursor: wait; text-decoration: none; }

@media (prefers-reduced-motion: no-preference) {
  .spin { transform-box: fill-box; transform-origin: center; animation: spin 1s linear infinite; }
  .fall { transform-box: view-box; animation: fall 1.2s ease-in-out infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes fall {
    from { opacity: 0; transform: translateY(0); }
    20% { opacity: 1; }
    80% { opacity: 1; }
    to { opacity: 0; transform: translateY(100%); }
  }
}