.canvas-layout-diagnostics {
  position: fixed;
  inset: var(--app-viewport-top, 0) auto auto var(--app-viewport-left, 0);
  z-index: 2147483647;
  box-sizing: border-box;
  max-inline-size: min(430px, var(--app-viewport-width, 100vw));
  color: #f6f8ff;
  font: 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}
.canvas-layout-diagnostics__toggle,
.canvas-layout-diagnostics__body { pointer-events: auto; }
.canvas-layout-diagnostics__toggle {
  min-block-size: 44px;
  border: 1px solid #7dd3fc;
  border-radius: 0 0 10px 0;
  padding: 8px 12px;
  background: rgba(7, 18, 35, .94);
  color: inherit;
  font: inherit;
}
.canvas-layout-diagnostics__body {
  margin: 6px;
  border: 1px solid rgba(125, 211, 252, .7);
  border-radius: 10px;
  padding: 10px;
  background: rgba(7, 18, 35, .94);
}
.canvas-layout-diagnostics.is-collapsed .canvas-layout-diagnostics__body { display: none; }
.canvas-layout-diagnostics__controls { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-block-end: 8px; }
.canvas-layout-diagnostics__controls label { display: inline-flex; align-items: center; min-block-size: 28px; gap: 5px; }
.canvas-layout-diagnostics__metrics { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; margin: 0; }
.canvas-layout-diagnostics__metrics dt { color: #7dd3fc; }
.canvas-layout-diagnostics__metrics dd { margin: 0; overflow-wrap: anywhere; }
.canvas-layout-guide {
  position: fixed;
  box-sizing: border-box;
  pointer-events: none;
}
.canvas-layout-guide--viewport {
  inset: var(--app-viewport-top) auto auto var(--app-viewport-left);
  inline-size: var(--app-viewport-width);
  block-size: var(--app-viewport-height);
  border: 2px solid #fb7185;
}
.canvas-layout-guide--safe {
  inset:
    calc(var(--app-viewport-top) + var(--canvas-safe-top))
    auto auto
    calc(var(--app-viewport-left) + var(--canvas-safe-left));
  inline-size: var(--canvas-safe-width);
  block-size: var(--canvas-safe-height);
  border: 2px dashed #4ade80;
}
.canvas-layout-guide--reference {
  inset:
    calc(var(--app-viewport-top) + var(--canvas-reference-inset-y))
    auto auto
    calc(var(--app-viewport-left) + var(--canvas-reference-inset-x));
  inline-size: calc(1080px * var(--canvas-reference-scale));
  block-size: calc(1920px * var(--canvas-reference-scale));
  border: 2px dotted #facc15;
}
.canvas-layout-guide--scroll { display: none; }
.canvas-layout-diagnostics.hide-viewport .canvas-layout-guide--viewport,
.canvas-layout-diagnostics.hide-safe .canvas-layout-guide--safe,
.canvas-layout-diagnostics.hide-reference .canvas-layout-guide--reference,
.canvas-layout-diagnostics.hide-scroll .canvas-layout-guide--scroll { display: none; }
body:has(#canvas-layout-diagnostics:not(.hide-scroll)) [data-canvas-scroll-owner] {
  outline: 3px solid #c084fc !important;
  outline-offset: -3px;
}