:root {
  --page-bg: #fff;
  --minimap-top: 120px;
  --minimap-left: 50px;
  --minimap-height: 600px;
  --indicator-border: rgb(153 0 0 / 0.9);
  --indicator-fill: rgb(153 0 0 / 0.12);
  --minimap-shadow: 0 1px 6px rgb(0 0 0 / 0.25);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--page-bg);
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.canvas {
  position: fixed;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
  outline: none;
}

.canvas.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.plate {
  width: max-content;
  line-height: 0;
}

.plate img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.minimap {
  position: fixed;
  z-index: 10;
  top: var(--minimap-top);
  left: var(--minimap-left);
}

.minimap__surface {
  position: relative;
  height: min(var(--minimap-height), calc(100dvh - var(--minimap-top) - 20px));
  aspect-ratio: 155 / 826;
  box-shadow: var(--minimap-shadow);
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.minimap__surface.is-dragging {
  cursor: grabbing;
}

.minimap__image {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-user-drag: none;
}

.minimap__indicator {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--indicator-border);
  background: var(--indicator-fill);
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 600px) {
  :root {
    --minimap-top: 16px;
    --minimap-left: 16px;
    --minimap-height: 50dvh;
  }
}

.plate {
  position: relative;
}

.text-layer {
  position: absolute;
  inset: 0;
  color: transparent;
  font-family: system-ui, sans-serif;
  white-space: pre;
}

.text-block {
  margin: 0;
  font: inherit;
}

.text-line {
  position: absolute;
  line-height: 1;
  cursor: text;
  transform-origin: 0 0;
}

.text-line::selection {
  color: transparent;
  background: rgb(0 90 200 / 0.3);
}
