.rua-chart .rua-c-root { position: relative; color: #151617; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.rua-chart .rua-c-root svg { display: block; width: 100%; height: auto; overflow: visible; }
.rua-chart .rua-c-root svg text { font-family: inherit; }
.rua-chart .rua-c-measure { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; overflow: hidden; }

.rua-chart .rua-c-shared { margin: 0 0 14px; font-size: 13.5px; line-height: 1.45; color: #6B6E71; }
.rua-chart .rua-c-ptitle { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; color: #151617; }
.rua-chart .rua-c-letter { display: inline-block; min-width: 1.35em; color: #406D5C; font-weight: 600; }

.rua-chart .rua-c-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.rua-chart .rua-c-grid.rua-c-side {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
}
.rua-chart .rua-c-grid:not(.rua-c-side) > .rua-c-ptitle ~ .rua-c-ptitle { margin-top: 30px; }


.rua-chart .rua-c-prompt {
  background: #fff; border: 1px solid #E2E2DE; border-radius: 10px; padding: 9px 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11.5px; line-height: 1.5; color: #151617;
}
.rua-chart .rua-c-pl { position: relative; display: flex; padding: 2.5px 10px 2.5px 0; }
.rua-chart .rua-c-gut { position: relative; z-index: 1; flex: 0 0 20px; text-align: center; font-weight: 700; }
.rua-chart .rua-c-pt { position: relative; z-index: 1; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0;
  padding-left: 2ch; text-indent: -2ch; }
.rua-chart .rua-c-k-comment { color: #6B6E71; }
.rua-chart .rua-c-k-added::before,
.rua-chart .rua-c-k-key::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: 0; bottom: 0; border-radius: 4px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1) calc(0.15s + var(--d, 0ms));
}
.rua-chart .rua-c-k-added::before { background: #C9DCD3; }
.rua-chart .rua-c-k-key::before { background: #DFE6DA; }
.rua-chart .rua-c-on.rua-c-prompt .rua-c-pl::before { transform: none; }
.rua-chart .rua-c-k-added .rua-c-gut { color: #406D5C; opacity: 0; transition: opacity 0.4s ease calc(0.3s + var(--d, 0ms)); }
.rua-chart .rua-c-on .rua-c-k-added .rua-c-gut { opacity: 1; }

.rua-chart .rua-c-tl { margin-top: 18px; }


.rua-chart .rua-c-fade { opacity: 0; transition: opacity 0.45s ease-out; }
.rua-chart .rua-c-rise { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease-out, transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1); }
.rua-chart .rua-c-pop {
  opacity: 0; transform: scale(0.2); transform-box: fill-box; transform-origin: center;
  transition: opacity 0.25s ease-out, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.rua-chart .rua-c-frame {
  opacity: 0; transform: translateY(10px) scale(0.86); transform-box: fill-box; transform-origin: 50% 0;
  transition: opacity 0.35s ease-out 0.1s, transform 0.6s cubic-bezier(0.3, 1.45, 0.5, 1) 0.1s;
}
.rua-chart .rua-c-fade.rua-c-on,
.rua-chart .rua-c-rise.rua-c-on,
.rua-chart .rua-c-pop.rua-c-on,
.rua-chart .rua-c-frame.rua-c-on { opacity: 1; transform: none; }


.rua-chart .rua-c-static *,
.rua-chart .rua-c-static *::before { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rua-chart .rua-c-root *,
  .rua-chart .rua-c-root *::before { transition: none !important; }
}