dialog.fr-source {
  width: min(900px, 94vw);
  max-width: 94vw;
  height: min(78vh, 820px);
  margin: auto;
  padding: 0;
  border: 1px solid #bdcec2;
  border-radius: 12px;
  overflow: hidden;
  color: #213a2d;
  background: #f8faf8;
}
dialog.fr-source[open] { display: flex; flex-direction: column; }
.fr-source::backdrop { background: #101e22aa; }
.fr-source-header, .fr-source-tools { display: flex; align-items: center; gap: 8px 14px; padding: 12px 18px; }
.fr-source-header { justify-content: space-between; border-bottom: 1px solid #d8e3db; }
.fr-source-header h2 { margin: 0; font: 600 clamp(16px, 2.3vw, 23px)/1.25 var(--mono); overflow-wrap: anywhere; }
.fr-source-path { color: #4a6456; margin-top: 4px; font: 12px/1.35 var(--mono); }
.fr-source-tools { flex-wrap: wrap; color: #4b6254; padding-block: 8px; font-size: 12px; }
.fr-source-tools [hidden] { display: none; }
.fr-source button { flex: none; padding: 5px 10px; border-radius: 6px; font-size: 12px; }
.fr-source-viewport { display: flex; flex: 1; align-items: stretch; overflow: auto; background: #172331; color: #e9eef2; }
.fr-source-viewport pre { margin: 0; padding: 10px 12px; overflow: visible; max-height: none; flex: 0 0 auto; color: inherit; background: transparent; white-space: pre; tab-size: 4; font: 12px/19px var(--mono); }
.fr-source-viewport .fr-source-gutter { position: sticky; left: 0; z-index: 1; color: #88a0af; background: #12202d; border-inline-end: 1px solid #324855; user-select: none; text-align: right; align-self: flex-start; }
.fr-source-code mark { color: #eaffd9; background: #385143; box-shadow: 0 0 0 2px #385143; font-weight: 700; }