#sgs-r10-version {
  position: fixed;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  border: 1px solid rgba(73, 212, 230, .36);
  border-radius: 5px;
  padding: 2px 6px;
  background: rgba(4, 15, 29, .62);
  color: rgba(190, 245, 255, .82);
  font: 600 10px/1.25 ui-monospace, monospace;
  pointer-events: none;
  white-space: nowrap;
}

#sgs-r10-zoom {
  position: fixed;
  z-index: 100002;
  right: max(9px, env(safe-area-inset-right));
  top: max(81px, calc(env(safe-area-inset-top) + 76px));
  width: min(268px, calc(100vw - 22px));
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid rgba(48, 215, 238, .84);
  border-radius: 11px;
  background: rgba(5, 16, 33, .92);
  color: #effbff;
  box-shadow: 0 0 13px rgba(17, 218, 243, .18);
  font: 600 12px/1.35 ui-monospace, 'Courier New', monospace;
  touch-action: pan-x;
  user-select: none;
}
#sgs-r10-zoom[hidden] { display: none !important; }
#sgs-r10-zoom strong,
#sgs-r10-zoom output,
#sgs-r10-zoom small { display: block; margin-bottom: 7px; }
#sgs-r10-zoom strong { color: #39dced; letter-spacing: 1px; }
#sgs-r10-zoom output { color: #f4faff; }
#sgs-r10-zoom input[type='range'] {
  display: block;
  width: 100%;
  margin: 7px 0 4px;
  accent-color: #36e2f0;
  height: 26px;
  touch-action: none;
}
#sgs-r10-zoom .sgs-r10-ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #9de9f1;
  font-size: 10px;
}
#sgs-r10-zoom button {
  display: block;
  width: 100%;
  border: 1px solid #ffc56a;
  background: rgba(255, 185, 75, .12);
  color: #ffdb9f;
  padding: 6px;
  border-radius: 5px;
  font: inherit;
  cursor: pointer;
}
#sgs-r10-zoom small { margin: 8px 0 0; color: #a7e7bb; font-size: 10px; }
@media (max-height: 420px) {
  #sgs-r10-zoom {
    top: 60px;
    width: 230px;
    padding: 7px 10px;
    font-size: 11px;
  }
  #sgs-r10-zoom strong,
  #sgs-r10-zoom output,
  #sgs-r10-zoom small { margin-bottom: 3px; }
}