html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0b1a;
}
body { font-family: monospace; }

/* ruler: fixed 1000px tall container, never sized by viewport units */
#ruler {
  position: fixed;
  top: 0;
  left: 0;
  width: 44px;
  height: 1000px;
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 10;
}
.tick {
  position: absolute;
  left: 0;
  width: 10px;
  height: 1px;
  background: rgba(255, 255, 255, 0.85);
}
.tick-label {
  position: absolute;
  left: 12px;
  font: 9px/9px monospace;
  color: #fff;
}

/* safe-area bands */
#band-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sim-safe-top, env(safe-area-inset-top));
  background: rgba(255, 0, 0, 0.45);
  pointer-events: none;
  z-index: 20;
}
#band-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sim-safe-bottom, env(safe-area-inset-bottom));
  background: rgba(0, 120, 255, 0.45);
  pointer-events: none;
  z-index: 20;
}
.band-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font: 10px/10px monospace;
  color: #fff;
  white-space: nowrap;
}
#band-top .band-label { bottom: 1px; }
#band-bottom .band-label { top: 1px; }

/* edge bars */
#bar-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #00ff66;
  pointer-events: none;
  z-index: 30;
}
#bar-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #ff00ff;
  pointer-events: none;
  z-index: 30;
}
#bar-bottom-label {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font: 9px/9px monospace;
  color: #ff00ff;
  pointer-events: none;
  z-index: 30;
}

/* height columns, side by side from the right edge */
.col {
  position: fixed;
  top: 0;
  width: 22px;
  pointer-events: none;
  z-index: 15;
}
#col-vh    { right: 0;     height: 100vh;                          background: #ffff00; }
#col-dvh   { right: 26px;  height: 100vh; height: 100dvh;          background: #ff8800; }
#col-svh   { right: 52px;  height: 100vh; height: 100svh;          background: #00ffff; }
#col-lvh   { right: 78px;  height: 100vh; height: 100lvh;          background: #ffffff; }
#col-inner { right: 104px; height: 0;                              background: #00ff00; }
#col-vv    { right: 130px; height: 0;                              background: #ff69b4; }

.col-tag {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font: 8px/8px monospace;
  color: #000;
}
.col-label {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 9px/9px monospace;
  color: #000;
  white-space: nowrap;
}

/* hidden measurement probes */
.probe {
  position: absolute;
  top: -2000px;
  left: 0;
  width: 1px;
  visibility: hidden;
  pointer-events: none;
}
#probe-vh  { height: 100vh; }
#probe-dvh { height: 100dvh; }
#probe-svh { height: 100svh; }
#probe-lvh { height: 100lvh; }
#probe-safe {
  padding: var(--sim-safe-top, env(safe-area-inset-top)) var(--sim-safe-right, env(safe-area-inset-right)) var(--sim-safe-bottom, env(safe-area-inset-bottom)) var(--sim-safe-left, env(safe-area-inset-left));
}

/* readout panel */
#panel {
  position: fixed;
  top: calc(var(--sim-safe-top, env(safe-area-inset-top)) + 40px);
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid #ffff00;
  color: #fff;
  font: 11px/1.35 monospace;
  padding: 8px;
  pointer-events: none;
  z-index: 100;
}
#readout {
  margin: 0;
  font: 11px/1.35 monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
#panel button {
  pointer-events: auto;
  flex: 1;
  min-height: 36px;
  font: 12px monospace;
  font-weight: bold;
  color: #000;
  background: #ffff00;
  border: 1px solid #fff;
  border-radius: 4px;
}
#panel-footer {
  margin-top: 6px;
  font: 9px/1.3 monospace;
  color: #aaa;
}