/* Разметка экрана (js/layout-guides.js): под интерфейсом, над фоном; на клики не реагирует. */
.lg { position: absolute; inset: 0; z-index: 3;   /* над затемнением краёв экрана (.screen::after), под панелями (10) */
  pointer-events: none; font: 600 9px/1 var(--font-ui); font-variant-numeric: tabular-nums;
  background:
    repeating-linear-gradient(to right, rgba(255,255,255,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to right, rgba(255,255,255,.03) 0 1px, transparent 1px 8px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.03) 0 1px, transparent 1px 8px);
}
.lg[hidden] { display: none; }
.lg-band { position: absolute; background: rgba(255, 64, 129, .16); box-shadow: inset 0 0 0 .5px rgba(255, 64, 129, .55); }
.lg-band.is-side { background: rgba(255, 64, 129, .07); box-shadow: inset -.5px 0 0 rgba(255, 64, 129, .45), inset .5px 0 0 rgba(255, 64, 129, .45); }
.lg-band.is-big { background: none; box-shadow: inset 0 0 0 .5px rgba(255, 64, 129, .35); }
.lg-band.is-row { background: rgba(255, 64, 129, .28); }
.lg-box { position: absolute; outline: 1px dashed rgba(0, 200, 255, .55); outline-offset: -.5px; }
.lg-n, .lg-h { position: absolute; translate: -50% -50%; padding: 2px 3px; border-radius: 3px; white-space: nowrap; color: #fff; }
.lg-n { background: rgba(255, 64, 129, .9); }
.lg-n.is-side { writing-mode: vertical-rl; }
.lg-h { background: rgba(0, 170, 220, .9); }